diff --git a/public/icons/google_login.svg b/public/icons/google_login.svg new file mode 100644 index 00000000..94ee1892 --- /dev/null +++ b/public/icons/google_login.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/icons/kakao_login.svg b/public/icons/kakao_login.svg new file mode 100644 index 00000000..1748599f --- /dev/null +++ b/public/icons/kakao_login.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/icons/large_logo.svg b/public/icons/large_logo.svg new file mode 100644 index 00000000..766dc77f --- /dev/null +++ b/public/icons/large_logo.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/icons/naver_login.svg b/public/icons/naver_login.svg new file mode 100644 index 00000000..ad569d51 --- /dev/null +++ b/public/icons/naver_login.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/app/login/_components/init.ts b/src/app/login/_components/init.ts deleted file mode 100644 index e099ee9f..00000000 --- a/src/app/login/_components/init.ts +++ /dev/null @@ -1,2 +0,0 @@ -// 보일러플레이트용 임시 파일 -// 추후 이 파일은 지워주세요 diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx index ec76dd49..8484e300 100644 --- a/src/app/login/page.tsx +++ b/src/app/login/page.tsx @@ -1,24 +1,44 @@ /** TODO - - [ ] 로그인 만료 확인, refreshToken(추후) - - [ ] 로그인 페이지 UI + * 로그인 모달이 모든 곳에 연동될 때까지 로그인을 하기위한 임시페이지 + * 추후 페이지 삭제 예정 */ -import Link from 'next/link'; +'use client'; -const oauthType = { - kakao: 'kakao', - naver: 'naver', - google: 'google', -}; +import Modal from '@/components/Modal/Modal'; +import LoginModal from '@/components/login/LoginModal'; +import useBooleanOutput from '@/hooks/useBooleanOutput'; export default function LoginPage() { + const { isOn, handleSetOff, handleSetOn } = useBooleanOutput(); + return ( -
- 로그인페이지 -
- 카카오 로그인 -
-
+ <> +
+ +
+ {isOn && ( + + + + )} + ); } diff --git a/src/components/Modal/Modal.css.ts b/src/components/Modal/Modal.css.ts index 7fdf4f3e..91b02b35 100644 --- a/src/components/Modal/Modal.css.ts +++ b/src/components/Modal/Modal.css.ts @@ -1,4 +1,4 @@ -import { style } from '@vanilla-extract/css'; +import { style, styleVariants, ComplexStyleRule } from '@vanilla-extract/css'; import { vars } from '@/styles/theme.css'; export const background = style({ @@ -17,10 +17,7 @@ export const background = style({ backgroundColor: 'rgba(25, 25, 27, 0.3)', }); -export const container = style({ - width: '326px', - padding: '24px', - +const container = style({ display: 'flex', flexDirection: 'column', justifyContent: 'center', @@ -28,6 +25,27 @@ export const container = style({ gap: '2.4rem', backgroundColor: vars.color.white, +}); - borderRadius: '8px', +interface SizeVariantsType { + [key: string]: ComplexStyleRule; +} + +export const sizeVariants = styleVariants({ + basic: [ + container, + { + width: '326px', + padding: '2.4rem', + borderRadius: '0.8rem', + }, + ], + large: [ + container, + { + width: '391px', + padding: '6rem 7.5rem', + borderRadius: '3rem', + }, + ], }); diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx index 29040b02..6aa37e81 100644 --- a/src/components/Modal/Modal.tsx +++ b/src/components/Modal/Modal.tsx @@ -6,11 +6,12 @@ import ModalButton from './ModalButton'; import useOnClickOutside from '@/hooks/useOnClickOutside'; interface ModalMainProps { + size?: 'basic' | 'large'; children?: ReactNode; handleModalClose: () => void; } -function ModalMain({ children, handleModalClose }: ModalMainProps) { +function ModalMain({ size = 'basic', children, handleModalClose }: ModalMainProps) { const { ref } = useOnClickOutside(() => { handleModalClose(); }); @@ -18,7 +19,7 @@ function ModalMain({ children, handleModalClose }: ModalMainProps) { return (
-
+
{children}
diff --git a/src/components/login/LoginModal.css.ts b/src/components/login/LoginModal.css.ts new file mode 100644 index 00000000..00353926 --- /dev/null +++ b/src/components/login/LoginModal.css.ts @@ -0,0 +1,62 @@ +import { style } from '@vanilla-extract/css'; +import { vars } from '@/styles/theme.css'; + +export const container = style({ + width: '100%', + display: 'flex', + flexDirection: 'column', + justifyContent: 'space-between', + alignItems: 'center', + gap: '2.4rem', +}); + +export const logoContainer = style({ + display: 'flex', + flexDirection: 'column', + justifyContent: 'space-between', + alignItems: 'center', + gap: '2.4rem', +}); + +export const textContainer = style({ + display: 'flex', + flexDirection: 'column', + justifyContent: 'space-between', + alignItems: 'center', + gap: '1.8rem', +}); + +export const text = style({ + color: vars.color.black, + + // TODO Body Regular로 변경하기 + fontSize: '1.5rem', + fontWeight: '500', + lineHeight: '2rem', + letterSpacing: '0.2px', +}); + +export const variantText = style({ + color: vars.color.blue, +}); + +export const title = style({ + color: vars.color.black, + + // TODO Title Large로 변경하기 + fontSize: '2.2rem', + fontWeight: '600', + lineHeight: '2.8rem', + letterSpacing: '0.088px', +}); + +export const buttonContainer = style({ + padding: '2.4rem 2.8rem 0 2.8rem', + + display: 'flex', + justifyContent: 'space-between', + alignItems: 'center', + gap: '1.8rem', + + borderTop: `1px solid ${vars.color.gray5}`, +}); diff --git a/src/components/login/LoginModal.tsx b/src/components/login/LoginModal.tsx new file mode 100644 index 00000000..72f0dd3c --- /dev/null +++ b/src/components/login/LoginModal.tsx @@ -0,0 +1,51 @@ +'use client'; + +/** + TODO + - [ ] 로그인 만료 확인, refreshToken(추후) + - [x] 로그인 페이지 UI (모달) + */ + +import Link from 'next/link'; +import Image from 'next/image'; + +import * as styles from './LoginModal.css'; + +import NaverLoginIcon from '/public/icons/naver_login.svg'; +import GoogleLoginIcon from '/public/icons/google_login.svg'; +import KakaoLoginIcon from '/public/icons/kakao_login.svg'; + +const oauthType = { + naver: 'naver', + google: 'google', + kakao: 'kakao', +}; + +const baseUrl = 'https://dev.api.listywave.com'; // TODO 이 부분은 나중에 .env.local로 수정 + +export default function LoginModal() { + return ( +
+
+ 리스티웨이브 로고 +
+

+ 나만의 리스트를 만들어보세요! +

+

시작하기

+
+
+
+ + + + + + + + + +
+
+ ); +}