페이지 UI: 프로필 페이지

src/app/globals.css

@@ -10,6 +10,7 @@
   --tertiary: #7A7A7A;
   --tertiary-100: #EAEAEA;
   --tertiary-200: #F6F6F6;
+  --tertiary-300: #F5F5F5;
   --tertiary-400: #7C7A7A;
   --black: #090A0A;
   --white: #FFF;

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;
+}

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={220} />
+        <div className={cx('loginDescriptionWrapper')}>
+          <Title
+            title={'로그인 후\n이용해 주세요.'}
+            description={'로그인 후 내 차량 정보와 세차 정보를\n등록해 보세요.'}
+            descriptionColor="tertiary"
+          />
+          <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;

src/components/icons/LinkArrow.tsx

@@ -0,0 +1,15 @@
+interface LinkArrowProps {
+  width?: number
+  height?: number
+}
+
+function LinkArrow({ width = 8, height = 14 }: LinkArrowProps) {
+  return (
+    <svg width={width} height={height} viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M1 1L6.68539 6.29289C7.10487 6.68342 7.10487 7.31658 6.68539 7.70711L1 13" stroke="#CDCFD0" strokeWidth="1.5" strokeLinecap="round" />
+    </svg>
+
+  );
+}
+
+export default LinkArrow;

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} />

src/styles/colorPalette.ts

@@ -10,6 +10,7 @@ export const colors = {
   tertiary: 'var(--tertiary)',
   tertiary100: 'var(--tertiary-100)',
   tertiary200: 'var(--tertiary-200)',
+  tertiary300: 'var(--tertiary-300)',
   tertiary400: 'var(--tertiary-400)',
   black: 'var(--black)',
   white: 'var(--white)',