Design: 마이페이지 설정으로 이름 변경 및 font, theme ver3.0 적용

src/app/account/_components/LanguageDropdown.css.ts

@@ -1,13 +1,13 @@
 import { style } from '@vanilla-extract/css';
-import { vars } from '@/styles/__theme.css';
-import * as fonts from '@/styles/__font.css';
+import { vars } from '@/styles/theme.css';
+import * as fonts from '@/styles/font.css';
 
 export const container = style({
   position: 'relative',
 });
 
 export const triggerDiv = style([
-  fonts.labelMedium,
+  fonts.LabelSmall,
   {
     width: 172,
     height: 36,
@@ -17,37 +17,38 @@ export const triggerDiv = style([
     alignItems: 'center',
     justifyContent: 'space-between',
 
-    color: vars.color.gray9,
+    color: vars.color.black,
 
-    border: `2px solid ${vars.color.gray7}`,
+    border: `2px solid ${vars.color.bluegray8}`,
     borderRadius: 8,
   },
 ]);
 
 export const menuDiv = style([
-  fonts.labelMedium,
+  fonts.LabelSmall,
   {
     width: 172,
-    padding: '8px 0',
 
     position: 'absolute',
 
-    color: vars.color.gray9,
+    color: vars.color.black,
 
-    border: `2px solid ${vars.color.gray7}`,
+    border: `2px solid ${vars.color.bluegray8}`,
     borderTop: 'none',
-    borderRadius: '0px 0px 8px 8px',
+    borderRadius: '0.8rem',
+    backgroundColor: vars.color.bggray,
   },
 ]);
 
 export const listDiv = style([
-  fonts.labelMedium,
+  fonts.LabelSmall,
   {
     padding: '8px 16px',
+    borderRadius: '0.8rem',
 
     selectors: {
       '&:hover': {
-        backgroundColor: vars.color.lightblue,
+        backgroundColor: vars.color.bluegray6,
       },
     },
   },

src/app/account/locale.ts

@@ -15,7 +15,7 @@ export const accountLocale = {
     introduceError: '소개 에러',
     profileSetting: '프로필 설정',
     save: '저장',
-    myPage: '마이페이지',
+    settings: '설정',
     changeLanguage: '언어변경',
     language: '언어',
     contact: '문의하기',
@@ -50,7 +50,7 @@ export const accountLocale = {
     profileSetting: 'Profile Settings',
     save: 'Save',
 
-    myPage: 'My Page',
+    settings: 'Settings',
     changeLanguage: 'Change language',
     language: 'Language',
     contact: 'Contact us',

src/app/account/page.css.ts

@@ -1,6 +1,6 @@
 import { style } from '@vanilla-extract/css';
-import * as fonts from '@/styles/__font.css';
-import { vars } from '@/styles/__theme.css';
+import * as fonts from '@/styles/font.css';
+import { vars } from '@/styles/theme.css';
 
 export const container = style({
   marginTop: 18,
@@ -11,7 +11,7 @@ export const container = style({
 });
 
 export const baseDiv = style([
-  fonts.titleSmall,
+  fonts.Label,
   {
     padding: '16px 32px',
 
@@ -25,10 +25,11 @@ export const buttonDiv = style([
   baseDiv,
   {
     cursor: 'pointer',
+    borderRadius: '1.2rem',
 
     selectors: {
       '&:hover': {
-        backgroundColor: vars.color.lightblue,
+        backgroundColor: vars.color.bluegray6,
       },
     },
   },

src/app/account/page.tsx

@@ -34,7 +34,7 @@ export default function AccountPage() {
         leftClick={() => {
           router.back();
         }}
-        title={accountLocale[language].myPage}
+        title={accountLocale[language].settings}
       />
       <section className={styles.container}>
         <div className={styles.buttonDiv} onClick={onClickMoveToPage('account/profile')} role="button">

src/app/layout.css.ts

@@ -10,7 +10,7 @@ export const body = style({
 
   position: 'relative',
 
-  backgroundColor: vars.color.whiteblue,
+  backgroundColor: vars.color.bggray,
 });
 
 export const toastContainer = style([fonts.labelMedium]);

src/components/Header/Header.tsx

@@ -1,16 +1,14 @@
 'use client';
 import { ReactNode } from 'react';
 
-import CloseButton from '/public/icons/close_button.svg';
-import BackIcon from '/public/icons/back.svg';
-
 import * as styles from './Header.css';
 import { commonLocale } from '@/components/locale';
 import { useLanguage } from '@/store/useLanguage';
 
+//TODO: left의 close 없애야함.
 interface HeaderProps {
   title: string;
-  left?: 'close' | 'back';
+  left?: 'cancel' | 'back' | 'close';
   leftClick?: () => void;
   right?: ReactNode;
 }
@@ -20,14 +18,15 @@ function Header({ title, left, leftClick, right }: HeaderProps) {
   return (
     <div className={styles.header}>
       <button className={`${styles.flexChild} ${styles.leftChild}`} type="button" onClick={leftClick}>
-        {left === 'close' && <CloseButton width={'24'} height={'24'} alt={commonLocale[language].closeButton} />}
-        {left === 'back' && <BackIcon width={'8'} height={'14'} alt={commonLocale[language].goBack} />}
+        {left === 'cancel' && <p>{commonLocale[language].cancel}</p>}
+        {left === 'back' && <p>{commonLocale[language].back}</p>}
+        {left === 'close' && <p>"닫기"</p>}
         {left === null && <></>}
       </button>
 
       <h1 className={`${styles.headerTitle} ${styles.flexChild}`}>{title}</h1>
 
-      <div className={`${styles.flexChild} ${styles.rightChild}`}>{right}</div>
+      {right === null ? <></> : <div className={`${styles.flexChild} ${styles.rightChild}`}>{right}</div>}
     </div>
   );
 }

src/components/locale.ts

@@ -30,6 +30,7 @@ export const commonLocale: Record<string, { [key: string]: string }> = {
     make: '를 만들어보세요!',
     start: '시작하기',
     cancel: '취소',
+    back: '뒤로가기',
     noDataImage: '데이터 없을 때 이미지',
     imageDescription: '이미지 설명',
     notSupportedPlatform: '지원하지 않는 플랫폼입니다.',
@@ -65,7 +66,8 @@ export const commonLocale: Record<string, { [key: string]: string }> = {
     list: 'your own',
     make: 'list!',
     start: 'Getting started',
-    cancel: 'cancel',
+    cancel: 'Cancel',
+    back: 'Back',
     noDataImage: 'Image displayed when there is no data',
     imageDescription: 'Image description',
     notSupportedPlatform: 'This platform is not supported.',