diff --git a/src/assets/login/LandingCalendar.svg b/src/assets/login/LandingCalendar.svg
new file mode 100644
index 0000000..6c42830
--- /dev/null
+++ b/src/assets/login/LandingCalendar.svg
@@ -0,0 +1,35 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/assets/login/LandingChat.svg b/src/assets/login/LandingChat.svg
new file mode 100644
index 0000000..1da0ccc
--- /dev/null
+++ b/src/assets/login/LandingChat.svg
@@ -0,0 +1,40 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/assets/login/LandingFriends.svg b/src/assets/login/LandingFriends.svg
new file mode 100644
index 0000000..fb4ee97
--- /dev/null
+++ b/src/assets/login/LandingFriends.svg
@@ -0,0 +1,35 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/assets/login/LandingRobot.svg b/src/assets/login/LandingRobot.svg
new file mode 100644
index 0000000..3591ebc
--- /dev/null
+++ b/src/assets/login/LandingRobot.svg
@@ -0,0 +1,35 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/features/Auth/components/LoginCard/LoginCard.style.ts b/src/features/Auth/components/LoginCard/LoginCard.style.ts
index d8df371..71ec441 100644
--- a/src/features/Auth/components/LoginCard/LoginCard.style.ts
+++ b/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;
diff --git a/src/features/Auth/components/LoginCard/LoginCard.tsx b/src/features/Auth/components/LoginCard/LoginCard.tsx
index d6e102a..e8db43f 100644
--- a/src/features/Auth/components/LoginCard/LoginCard.tsx
+++ b/src/features/Auth/components/LoginCard/LoginCard.tsx
@@ -13,7 +13,7 @@ const LoginCard = () => {
return (
- 로그인 하기
+ 바로 시작해보세요
- 말하면 일정이 된다
+ 말 한마디로
+ 일정이 완성된다
+
+
+ 자연어로 입력하면 AI가 자동으로 일정을 등록해드려요.
+
+
+
+ 채팅 한 줄로 일정 등록
+ input : 말 한마디 → output : 일정 등록
+
+
+
+
+ AI가 반복되는 일정 추천
+ 사용자 데이터 기반으로 먼저 일정을 추천
+
+
+
+
+ 캘린더 + 할 일 통합 관리
+ 일정과 할 일을 하나의 앱에서 깔끔하게
+
+
+
+
+ 친구와 일정 공유도 쉽게
+ 일정 생성 후 초대 → 수락으로 함께하는 일정 완성
+
+
+
diff --git a/src/shared/styles/GlobalStyle.tsx b/src/shared/styles/GlobalStyle.tsx
index fbaac1d..8655b8f 100644
--- a/src/shared/styles/GlobalStyle.tsx
+++ b/src/shared/styles/GlobalStyle.tsx
@@ -7,6 +7,25 @@ export default function GlobalStyle() {