From 963d15f6a4d6312ce52a28dec40ab14e1d047e7f Mon Sep 17 00:00:00 2001 From: wookki Date: Wed, 17 Jan 2024 03:45:34 +0900 Subject: [PATCH 1/3] =?UTF-8?q?assets:=20linkArrow=20=EC=95=84=EC=9D=B4?= =?UTF-8?q?=EC=BD=98=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/assets/icons/linkArrow.svg | 3 +++ src/components/icons/LinkArrow.tsx | 15 +++++++++++++++ 2 files changed, 18 insertions(+) create mode 100644 public/assets/icons/linkArrow.svg create mode 100644 src/components/icons/LinkArrow.tsx diff --git a/public/assets/icons/linkArrow.svg b/public/assets/icons/linkArrow.svg new file mode 100644 index 00000000..6b682c7f --- /dev/null +++ b/public/assets/icons/linkArrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/icons/LinkArrow.tsx b/src/components/icons/LinkArrow.tsx new file mode 100644 index 00000000..d180fc96 --- /dev/null +++ b/src/components/icons/LinkArrow.tsx @@ -0,0 +1,15 @@ +interface LinkArrowProps { + width?: number + height?: number +} + +function LinkArrow({ width = 8, height = 14 }: LinkArrowProps) { + return ( + + + + + ); +} + +export default LinkArrow; From a3c7dd26242fd1351c38969ddcafd3a7d5100b60 Mon Sep 17 00:00:00 2001 From: wookki Date: Wed, 17 Jan 2024 03:46:19 +0900 Subject: [PATCH 2/3] =?UTF-8?q?design:=20tertiary=20=EC=83=89=EC=83=81=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/globals.css | 1 + src/styles/colorPalette.ts | 1 + 2 files changed, 2 insertions(+) diff --git a/src/app/globals.css b/src/app/globals.css index 67437e92..386a4bd3 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -8,6 +8,7 @@ --gray-300: #72777A; --gray-400: #404446; --tertiary: #7A7A7A; + --tertiary-300: #F5F5F5; --black: #090A0A; --white: #FFF; --white-100: #F3F5F8; diff --git a/src/styles/colorPalette.ts b/src/styles/colorPalette.ts index 50001ed7..88b27710 100644 --- a/src/styles/colorPalette.ts +++ b/src/styles/colorPalette.ts @@ -8,6 +8,7 @@ export const colors = { gray300: 'var(--gray-300)', gray400: 'var(--gray-400)', tertiary: 'var(--tertiary)', + tertiary300: 'var(--tertiary-300)', black: 'var(--black)', white: 'var(--white)', white100: 'var(--white-100)', From eb781295630495b899d59bcae2fc4657939d61e3 Mon Sep 17 00:00:00 2001 From: wookki Date: Wed, 17 Jan 2024 03:46:47 +0900 Subject: [PATCH 3/3] =?UTF-8?q?feat:=20=ED=94=84=EB=A1=9C=ED=95=84=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20UI=20=EC=A0=9C=EC=9E=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/my-page/page.module.scss | 18 +++++++ src/app/my-page/page.tsx | 67 +++++++++++++++++++++++++++ src/components/shared/title/Title.tsx | 10 ++-- 3 files changed, 91 insertions(+), 4 deletions(-) create mode 100644 src/app/my-page/page.module.scss create mode 100644 src/app/my-page/page.tsx diff --git a/src/app/my-page/page.module.scss b/src/app/my-page/page.module.scss new file mode 100644 index 00000000..85fc07aa --- /dev/null +++ b/src/app/my-page/page.module.scss @@ -0,0 +1,18 @@ +.loginDescriptionWrapper { + padding: 0 24px; +} + +.titleWrapper { + padding: 16px 24px; +} + +.nameWrapper { + padding: 16px 24px; +} + +.linkInfoContainer { + display: flex; + align-items: center; + justify-content: space-between; + padding: 18px 24px; +} diff --git a/src/app/my-page/page.tsx b/src/app/my-page/page.tsx new file mode 100644 index 00000000..3b979715 --- /dev/null +++ b/src/app/my-page/page.tsx @@ -0,0 +1,67 @@ +import classNames from 'classnames/bind'; +import Link from 'next/link'; + +import BottomNav from '@/components/shared/bottom-nav/BottomNav'; +import Button from '@/components/shared/button/Button'; +import LinkArrow from '@components/icons/LinkArrow'; +import Spacing from '@components/shared/spacing/Spacing'; +import Text from '@components/shared/text/Text'; +import Title from '@components/shared/title/Title'; + +import styles from './page.module.scss'; + +const cx = classNames.bind(styles); + +function MyProfilePage() { + const name = 'washpedia'; + const isLoggedIn = true; + + if (isLoggedIn === true) { + return ( + <> + +
+ + <Spacing size={260} /> + <Button size="large" full>로그인 하기</Button> + </div> + <BottomNav /> + </> + ); + } + + return ( + <> + <Spacing size={20} /> + <div className={cx('titleWrapper')}> + <Title title="프로필" titleSize="t3" /> + </div> + <div className={cx('nameWrapper')}> + <Text typography="t4">{`${name} 님 안녕하세요!`}</Text> + </div> + <Spacing size={8} backgroundColor="tertiary300" /> + <Spacing size={120} /> + <ul> + <li className={cx('linkInfoContainer')}> + <Link href="/">나의 차량 정보</Link> + <LinkArrow /> + </li> + <li className={cx('linkInfoContainer')}> + <Link href="/">나의 세차 정보</Link> + <LinkArrow /> + </li> + <li className={cx('linkInfoContainer')}> + <Link href="/">리뷰 관리</Link> + <LinkArrow /> + </li> + </ul> + <BottomNav /> + </> + ); +} + +export default MyProfilePage; diff --git a/src/components/shared/title/Title.tsx b/src/components/shared/title/Title.tsx index b8be595f..285c4675 100644 --- a/src/components/shared/title/Title.tsx +++ b/src/components/shared/title/Title.tsx @@ -1,23 +1,25 @@ +import { Typography } from '@/styles/typography'; import Flex from '@shared/flex/Flex'; import Spacing from '@shared/spacing/Spacing'; import Text from '@shared/text/Text'; import { Colors } from '@styles/colorPalette'; interface TitleProps { - title: string - description?: string + title: React.ReactNode + titleSize?: Typography + description?: React.ReactNode descriptionColor?: Colors titleIcon?: React.ReactNode size?: number } function Title({ - title, description, descriptionColor, titleIcon, size = 10, + title, titleSize = 't1', description, descriptionColor, titleIcon, size = 10, }: TitleProps) { return ( <Flex direction="column"> <Flex justify="space-between" align="center"> - <Text typography="t1" bold>{title}</Text> + <Text typography={titleSize} bold>{title}</Text> {titleIcon} </Flex> <Spacing size={size} />