Design: 회원탈퇴 페이지 ver3.0 디자인 적용

src/app/account/withdraw/_component/AgreementConfirmation.css.ts

@@ -1,6 +1,6 @@
 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 wrapper = style({
   display: 'flex',
@@ -10,7 +10,7 @@ export const wrapper = style({
 });
 
 export const agreement = style([
-  fonts.bodyMedium,
+  fonts.Label,
   {
     padding: '0px 10px 22px',
 
@@ -19,14 +19,14 @@ export const agreement = style([
     alignContent: 'center',
     gap: 8,
 
-    color: vars.color.gray9,
+    color: vars.color.bluegray10,
 
-    borderBottom: `1px solid ${vars.color.gray7} `,
+    borderBottom: `1px solid ${vars.color.bluegray8} `,
   },
 ]);
 
 export const confirmButton = style([
-  fonts.bodyMedium,
+  fonts.Body,
   {
     padding: '8px 32px ',
     backgroundColor: vars.color.blue,
@@ -35,8 +35,8 @@ export const confirmButton = style([
 
     selectors: {
       '&:disabled': {
-        backgroundColor: vars.color.gray5,
-        color: vars.color.gray7,
+        backgroundColor: vars.color.white,
+        color: vars.color.bluegray8,
       },
     },
   },

src/app/account/withdraw/_component/AgreementConfirmation.tsx

@@ -2,20 +2,21 @@
 
 import useBooleanOutput from '@/hooks/useBooleanOutput';
 
+import { accountLocale } from '@/app/account/locale';
+import { useLanguage } from '@/store/useLanguage';
+import WithdrawalButton from './WithdrawalButton';
+
 import UncheckedBox from '/public/icons/unchecked_box.svg';
 import CheckedBox from '/public/icons/checked_box.svg';
-import WithdrawalButton from './WithdrawalButton';
 import * as styles from './AgreementConfirmation.css';
-import { accountLocale } from '@/app/account/locale';
-import { useLanguage } from '@/store/useLanguage';
 
 export default function AgreementConfirmationButton() {
   const { language } = useLanguage();
   const { isOn, toggle } = useBooleanOutput(false);
   return (
     <section className={styles.wrapper}>
       <div className={styles.agreement}>
-        <div onClick={toggle}>{!isOn ? <UncheckedBox /> : <CheckedBox />}</div>
+        <div onClick={toggle}>{!isOn ? <UncheckedBox /> : <CheckedBox fill="#3D95FF" />}</div>
         <p>{accountLocale[language].withdrawMessage}</p>
       </div>
       <WithdrawalButton isDisabled={!isOn} />

src/app/account/withdraw/_component/WithdrawalButton.tsx

@@ -3,16 +3,16 @@
 import { useRouter } from 'next/navigation';
 import { useMutation } from '@tanstack/react-query';
 
-import Modal from '@/components/Modal/Modal';
-import useBooleanOutput from '@/hooks/useBooleanOutput';
 import withdraw from '@/app/_api/user/withdraw';
+import { accountLocale } from '@/app/account/locale';
 import toasting from '@/lib/utils/toasting';
 import { removeCookie } from '@/lib/utils/cookie';
 import toastMessage from '@/lib/constants/toastMessage';
+import useBooleanOutput from '@/hooks/useBooleanOutput';
 import { useUser } from '@/store/useUser';
-import * as styles from './AgreementConfirmation.css';
 import { useLanguage } from '@/store/useLanguage';
-import { accountLocale } from '@/app/account/locale';
+import Modal from '@/components/Modal/Modal';
+import * as styles from './AgreementConfirmation.css';
 
 interface WithdrawalButtonProps {
   isDisabled: boolean;

src/app/account/withdraw/_component/WithdrawalNotice.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 wrapper = style({
   display: 'flex',
@@ -9,24 +9,25 @@ export const wrapper = style({
   gap: 18,
 });
 
-export const title = style([fonts.titleLarge]);
+export const title = style([fonts.Header]);
 
 export const warning = style([
-  fonts.titleRegular,
+  fonts.Subtitle,
   {
     color: vars.color.red,
   },
 ]);
 
 export const detailBox = style([
-  fonts.bodyMedium,
+  fonts.Label,
   {
-    margin: '20px 35px',
-    padding: '18px 12px',
+    margin: '20px 30px 30px',
+    padding: '18px 16px',
 
+    lineHeight: '150%',
+    color: vars.color.bluegray10,
     backgroundColor: vars.color.white,
-    color: vars.color.gray9,
-    borderRadius: 10,
+    borderRadius: '2rem',
   },
 ]);
 

src/app/account/withdraw/_component/WithdrawalNotice.tsx

@@ -1,9 +1,9 @@
 'use client';
 
-import LogoCircle from '/public/icons/logo_circle.svg';
-import * as styles from './WithdrawalNotice.css';
 import { accountLocale } from '@/app/account/locale';
 import { useLanguage } from '@/store/useLanguage';
+import LogoCircle from '/public/icons/logo_circle.svg';
+import * as styles from './WithdrawalNotice.css';
 
 export default function WithdrawalNotice() {
   const { language } = useLanguage();

src/app/account/withdraw/page.css.ts

@@ -9,6 +9,4 @@ export const page = style({
 export const main = style({
   height: '100%',
   padding: '30px 0',
-
-  backgroundColor: vars.color.gray3,
 });

src/components/Modal/Modal.css.ts

@@ -1,6 +1,7 @@
 import { style, styleVariants, ComplexStyleRule } from '@vanilla-extract/css';
-import { vars } from '@/styles/__theme.css';
+import { vars } from '@/styles/theme.css';
 
+//TODO: 공용모달 ver3.0 새디자인 필요
 export const background = style({
   margin: 'auto',
   width: '100vw',

src/components/Modal/ModalButton.css.ts

@@ -1,6 +1,6 @@
 import { style, styleVariants } from '@vanilla-extract/css';
-import { body3 } from '@/styles/__font.css';
-import { vars } from '@/styles/__theme.css';
+import { Label } from '@/styles/font.css';
+import { vars } from '@/styles/theme.css';
 
 export const buttonContainer = style({
   width: '100%',
@@ -11,7 +11,7 @@ export const buttonContainer = style({
 });
 
 export const baseButton = style([
-  body3,
+  Label,
   {
     padding: '10px 16px',
 
@@ -36,15 +36,15 @@ export const button = styleVariants({
   secondary: [
     baseButton,
     {
-      backgroundColor: vars.color.blueGray,
+      backgroundColor: vars.color.whiteblue,
       color: vars.color.blue,
     },
   ],
   disabled: [
     baseButton,
     {
-      backgroundColor: vars.color.gray7,
-      color: vars.color.white,
+      backgroundColor: vars.color.white,
+      color: vars.color.bluegray8,
 
       cursor: 'default',
     },