[Deploy] Develop -> Main

src/features/Auth/components/LoginCard/LoginCard.style.ts

@@ -5,7 +5,6 @@ import { theme } from '@/shared/styles/theme'
 
 export const Right = styled.div`
   flex: 1;
-  padding: 50px;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -16,38 +15,45 @@ export const Right = styled.div`
 `
 
 export const InnerCard = styled.div`
-  width: 100%;
-  max-width: 900px;
-  padding: 32px;
-  border-radius: 24px;
-  background: rgba(255, 255, 255, 0.5);
-  backdrop-filter: blur(14px);
-  -webkit-backdrop-filter: blur(14px);
-  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+  width: 380px;
+  max-width: 100%;
+  min-height: 480px;
+  padding: 80px 32px;
 
   display: flex;
   flex-direction: column;
   align-items: center;
-  ${media.down(theme.breakPoints.tablet)} {
-    width: 100%;
-  }
+
+  border-radius: 90px;
+
+  background: rgba(255, 255, 255, 0.12);
+  backdrop-filter: blur(25px);
+  -webkit-backdrop-filter: blur(25px);
+  border: 1px solid rgba(255, 255, 255, 0.45);
+
+  box-shadow:
+    inset 4px 6px 15px rgba(255, 255, 255, 0.4),
+    inset -4px -6px 15px rgba(0, 0, 0, 0.03),
+    0 20px 40px rgba(0, 0, 0, 0.08);
 `
 
 export const Title = styled.h2`
-  margin: 0 0 24px;
-  font-size: 20px;
-  font-weight: 700;
+  margin: 0 0 50px;
+  font-size: 28px;
+  font-weight: 600;
   text-align: center;
+  /* 물과 잘 어울리는 투명감 있는 청록/네이비 계열 */
+  color: #3e6b77;
+  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5);
 `
+
 export const SocialButton = styled.button`
-  width: 100%;
-  height: 48px;
-  border-radius: 12px;
+  width: 80%;
+  height: 54px;
+  border-radius: 20px;
   border: none;
-  margin-bottom: 12px;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  gap: 8px;
-  padding: 20px;
+  margin-bottom: 16px;
+  padding: 0 30px;
 
   display: flex;
   align-items: center;
@@ -56,11 +62,19 @@ export const SocialButton = styled.button`
   font-weight: 600;
   cursor: pointer;
 
-  background: none;
+  /* 부드러운 상호작용 */
+  transition:
+    transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
+    filter 0.2s,
+    box-shadow 0.3s;
 
   &:hover {
-    filter: brightness(0.9);
-    transition: filter 0.2s;
+    transform: scale(1.03); /* 마우스 올리면 말랑하게 부풀어 오름 */
+    filter: brightness(0.95);
+  }
+
+  &:active {
+    transform: scale(0.98); /* 누르면 꾹 짜지는 느낌 */
   }
 `
 
@@ -71,7 +85,7 @@ export const ButtonText = styled.span`
   &:visited,
   &:active,
   &:link {
-    color: black;
+    color: inherit; /* 부모 컬러를 따르도록 수정 */
     text-decoration: none;
   }
 `
@@ -84,25 +98,55 @@ export const IconWrapper = styled.span`
   justify-content: center;
 `
 
+/* 버튼마다 물에 젖은 듯한 광택(inset shadow) 추가 */
 export const Google = styled(SocialButton)`
-  background: white;
-  color: black;
-  border: 1px solid white;
+  background: rgba(255, 255, 255, 0.8);
+  color: #222;
+  border: 1px solid rgba(255, 255, 255, 0.6);
+  box-shadow:
+    inset 2px 4px 6px rgba(255, 255, 255, 0.9),
+    0 4px 10px rgba(0, 0, 0, 0.05);
+
+  &:hover {
+    box-shadow:
+      inset 2px 4px 6px rgba(255, 255, 255, 0.9),
+      0 8px 15px rgba(0, 0, 0, 0.1);
+  }
 `
 
 export const Kakao = styled(SocialButton)`
   background: #fee500;
-  color: black;
+  color: #181600;
+  box-shadow:
+    inset 2px 4px 6px rgba(255, 255, 255, 0.5),
+    0 4px 10px rgba(254, 229, 0, 0.3);
+
+  &:hover {
+    box-shadow:
+      inset 2px 4px 6px rgba(255, 255, 255, 0.5),
+      0 8px 15px rgba(254, 229, 0, 0.4);
+  }
 `
 
 export const Naver = styled(SocialButton)`
   background: #2db400;
   color: white;
+  box-shadow:
+    inset 2px 4px 6px rgba(255, 255, 255, 0.3),
+    0 4px 10px rgba(45, 180, 0, 0.3);
+
+  &:hover {
+    box-shadow:
+      inset 2px 4px 6px rgba(255, 255, 255, 0.3),
+      0 8px 15px rgba(45, 180, 0, 0.4);
+  }
 `
+
 export const Footer = styled.div`
-  margin-top: 24px;
+  margin-top: 28px;
   font-size: 14px;
   text-align: center;
+  color: rgba(0, 0, 0, 0.6); /* 배경이 투명하므로 가독성을 위해 살끔 어둡게 처리 */
 `
 
 export const LinkText = styled.button`
@@ -116,6 +160,11 @@ export const LinkText = styled.button`
 
   text-decoration: underline;
   cursor: pointer;
+  opacity: 0.8;
+
+  &:hover {
+    opacity: 1;
+  }
 
   &:focus-visible {
     outline: 2px solid currentColor;

src/features/Auth/components/LoginCard/LoginCard.tsx

@@ -13,7 +13,7 @@ const LoginCard = () => {
   return (
     <S.Right>
       <S.InnerCard>
-        <S.Title>로그인 하기</S.Title>
+        <S.Title>바로 시작해보세요</S.Title>
 
         <S.Google
           onClick={function () {