From 1d1dfd08ef61473d8cf2b222232bedd1dbc18ee4 Mon Sep 17 00:00:00 2001 From: ParkSohyunee Date: Wed, 14 Feb 2024 15:43:22 +0900 Subject: [PATCH 1/8] =?UTF-8?q?Design:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20svg=20=ED=8C=8C=EC=9D=BC=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80=20=EB=B0=8F=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/icons/google_login.svg | 9 +++++++++ public/icons/kakao_login.svg | 9 +++++++++ public/icons/large_logo.svg | 9 +++++++++ public/icons/naver_login.svg | 9 +++++++++ src/app/login/page.tsx | 35 ++++++++++++++++++++++++++++++----- 5 files changed, 66 insertions(+), 5 deletions(-) create mode 100644 public/icons/google_login.svg create mode 100644 public/icons/kakao_login.svg create mode 100644 public/icons/large_logo.svg create mode 100644 public/icons/naver_login.svg diff --git a/public/icons/google_login.svg b/public/icons/google_login.svg new file mode 100644 index 00000000..02311df4 --- /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..dd989c77 --- /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..06eacc75 --- /dev/null +++ b/public/icons/naver_login.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx index ec76dd49..76e8b983 100644 --- a/src/app/login/page.tsx +++ b/src/app/login/page.tsx @@ -1,3 +1,5 @@ +'use client'; + /** TODO - [ ] 로그인 만료 확인, refreshToken(추후) @@ -5,20 +7,43 @@ */ import Link from 'next/link'; +import Image from 'next/image'; + +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 = { - kakao: 'kakao', naver: 'naver', google: 'google', + kakao: 'kakao', }; +const baseUrl = 'https://dev.api.listywave.com'; // TODO 이 부분은 나중에 .env.local로 수정 + export default function LoginPage() { return ( -
- 로그인페이지 +
+
+ 리스티웨이브 로고 +
+

시작하기

+

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

+
+
- 카카오 로그인 + + + + + + + + +
-
+ ); } From 21ead6497414888965f6f5929f19bbb4b28c8ebb Mon Sep 17 00:00:00 2001 From: ParkSohyunee Date: Wed, 14 Feb 2024 18:44:30 +0900 Subject: [PATCH 2/8] =?UTF-8?q?Design:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=AA=A8=EB=8B=AC=EB=A1=9C=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD=20=EB=B0=8F=20=ED=8D=BC=EB=B8=94=EB=A6=AC?= =?UTF-8?q?=EC=8B=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/login/LoginModal.css.ts | 61 ++++++++++++++++++++++++++ src/components/login/LoginModal.tsx | 51 +++++++++++++++++++++ 2 files changed, 112 insertions(+) create mode 100644 src/components/login/LoginModal.css.ts create mode 100644 src/components/login/LoginModal.tsx diff --git a/src/components/login/LoginModal.css.ts b/src/components/login/LoginModal.css.ts new file mode 100644 index 00000000..d1a6c52d --- /dev/null +++ b/src/components/login/LoginModal.css.ts @@ -0,0 +1,61 @@ +import { style } from '@vanilla-extract/css'; +import { vars } from '@/styles/theme.css'; + +export const container = style({ + 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({ + paddingTop: '2.4rem', + + 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..c38ce693 --- /dev/null +++ b/src/components/login/LoginModal.tsx @@ -0,0 +1,51 @@ +'use client'; + +/** + TODO + - [ ] 로그인 만료 확인, refreshToken(추후) + - [ ] 로그인 페이지 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 ( +
+
+ 리스티웨이브 로고 +
+

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

+

시작하기

+
+
+
+ + + + + + + + + +
+
+ ); +} From 0c1db32f502eb9c87858c7289f0ddbb484a545d9 Mon Sep 17 00:00:00 2001 From: ParkSohyunee Date: Wed, 14 Feb 2024 18:45:59 +0900 Subject: [PATCH 3/8] =?UTF-8?q?Feat:=20=EA=B3=B5=ED=86=B5=EB=AA=A8?= =?UTF-8?q?=EB=8B=AC=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20size=20prop?= =?UTF-8?q?=20=EC=B6=94=EA=B0=80=20=EB=B0=8F=20css=20prop=20=ED=83=80?= =?UTF-8?q?=EC=9E=85=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Modal/Modal.css.ts | 30 ++++++++++++++++++++++++------ src/components/Modal/Modal.tsx | 5 +++-- 2 files changed, 27 insertions(+), 8 deletions(-) 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..ae4df071 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?: string; 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}
From bf5e2a43a51e5e2fa5a3665d052068d323307d58 Mon Sep 17 00:00:00 2001 From: ParkSohyunee Date: Wed, 14 Feb 2024 19:22:38 +0900 Subject: [PATCH 4/8] =?UTF-8?q?Fix:=20=EA=B3=B5=ED=86=B5=EB=AA=A8=EB=8B=AC?= =?UTF-8?q?=20size=20prop=20type=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Modal/Modal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx index ae4df071..6aa37e81 100644 --- a/src/components/Modal/Modal.tsx +++ b/src/components/Modal/Modal.tsx @@ -6,7 +6,7 @@ import ModalButton from './ModalButton'; import useOnClickOutside from '@/hooks/useOnClickOutside'; interface ModalMainProps { - size?: string; + size?: 'basic' | 'large'; children?: ReactNode; handleModalClose: () => void; } From 179975c2f9f84670f998bc4f843a57ac6622a6d3 Mon Sep 17 00:00:00 2001 From: ParkSohyunee Date: Wed, 14 Feb 2024 19:36:39 +0900 Subject: [PATCH 5/8] =?UTF-8?q?Design:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?= =?UTF-8?q?=EC=95=84=EC=9D=B4=EC=BD=98=20=EB=B3=80=EA=B2=BD=20=EB=B0=8F=20?= =?UTF-8?q?=EC=9D=BC=EB=B6=80=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/icons/google_login.svg | 8 ++++---- public/icons/kakao_login.svg | 8 ++++---- public/icons/naver_login.svg | 8 ++++---- src/components/login/LoginModal.css.ts | 3 ++- 4 files changed, 14 insertions(+), 13 deletions(-) diff --git a/public/icons/google_login.svg b/public/icons/google_login.svg index 02311df4..94ee1892 100644 --- a/public/icons/google_login.svg +++ b/public/icons/google_login.svg @@ -1,9 +1,9 @@ - - + + - + - + diff --git a/public/icons/kakao_login.svg b/public/icons/kakao_login.svg index dd989c77..1748599f 100644 --- a/public/icons/kakao_login.svg +++ b/public/icons/kakao_login.svg @@ -1,9 +1,9 @@ - - + + - + - + diff --git a/public/icons/naver_login.svg b/public/icons/naver_login.svg index 06eacc75..ad569d51 100644 --- a/public/icons/naver_login.svg +++ b/public/icons/naver_login.svg @@ -1,9 +1,9 @@ - - + + - + - + diff --git a/src/components/login/LoginModal.css.ts b/src/components/login/LoginModal.css.ts index d1a6c52d..00353926 100644 --- a/src/components/login/LoginModal.css.ts +++ b/src/components/login/LoginModal.css.ts @@ -2,6 +2,7 @@ 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', @@ -50,7 +51,7 @@ export const title = style({ }); export const buttonContainer = style({ - paddingTop: '2.4rem', + padding: '2.4rem 2.8rem 0 2.8rem', display: 'flex', justifyContent: 'space-between', From 7149a5d9cd670933e68edf547afb37abf42860ab Mon Sep 17 00:00:00 2001 From: ParkSohyunee Date: Thu, 15 Feb 2024 14:21:18 +0900 Subject: [PATCH 6/8] =?UTF-8?q?Style:=20=EB=B6=88=ED=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20=ED=8C=8C=EC=9D=BC=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/login/_components/init.ts | 2 -- 1 file changed, 2 deletions(-) delete mode 100644 src/app/login/_components/init.ts 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 @@ -// 보일러플레이트용 임시 파일 -// 추후 이 파일은 지워주세요 From 8a90712139e0fb2e59611005bffb0065775db042 Mon Sep 17 00:00:00 2001 From: ParkSohyunee Date: Thu, 15 Feb 2024 14:22:12 +0900 Subject: [PATCH 7/8] =?UTF-8?q?Feat:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?= =?UTF-8?q?=EB=AA=A8=EB=8B=AC=20=EC=97=B0=EB=8F=99=EC=A0=84=EA=B9=8C?= =?UTF-8?q?=EC=A7=80=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=EC=9D=84=20=ED=95=98?= =?UTF-8?q?=EA=B8=B0=EC=9C=84=ED=95=9C=20=EC=9E=84=EC=8B=9C=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/login/page.tsx | 73 ++++++++++++++--------------- src/components/login/LoginModal.tsx | 2 +- 2 files changed, 35 insertions(+), 40 deletions(-) diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx index 76e8b983..495a0c5c 100644 --- a/src/app/login/page.tsx +++ b/src/app/login/page.tsx @@ -1,49 +1,44 @@ -'use client'; - /** TODO - - [ ] 로그인 만료 확인, refreshToken(추후) - - [ ] 로그인 페이지 UI + * 로그인 모달이 모든 곳에 연동될 때까지 로그인을 하기위한 임시페이지 + * 추후 페이지 삭제 예정 */ -import Link from 'next/link'; -import Image from 'next/image'; - -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', -}; +'use client'; -const baseUrl = 'https://dev.api.listywave.com'; // TODO 이 부분은 나중에 .env.local로 수정 +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/login/LoginModal.tsx b/src/components/login/LoginModal.tsx index c38ce693..72f0dd3c 100644 --- a/src/components/login/LoginModal.tsx +++ b/src/components/login/LoginModal.tsx @@ -3,7 +3,7 @@ /** TODO - [ ] 로그인 만료 확인, refreshToken(추후) - - [ ] 로그인 페이지 UI + - [x] 로그인 페이지 UI (모달) */ import Link from 'next/link'; From a87c2403c634bf0efb977815a684c028e4574db9 Mon Sep 17 00:00:00 2001 From: ParkSohyunee Date: Thu, 15 Feb 2024 15:05:44 +0900 Subject: [PATCH 8/8] =?UTF-8?q?Feat:=20Modal=20size=20prop=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/login/page.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx index 495a0c5c..8484e300 100644 --- a/src/app/login/page.tsx +++ b/src/app/login/page.tsx @@ -35,7 +35,7 @@ export default function LoginPage() { {isOn && ( - + )}