From 867423d831ec5a1003d65068edda45a78b2802e4 Mon Sep 17 00:00:00 2001
From: bluewhaleyh <bluewhaleyh@gmail.com>
Date: Sat, 31 Aug 2024 16:48:01 +0900
Subject: [PATCH] =?UTF-8?q?fix/#61:=20=EA=B0=81=EC=A2=85=20=EB=B2=84?=
 =?UTF-8?q?=EA=B7=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ssh-web/src/pages/Egg/EggFetch.styles.ts      |  2 +-
 ssh-web/src/pages/Egg/components/TodayEgg.tsx | 14 +++++-----
 .../MissionCreate/MissionCreate.styles.ts     |  2 +-
 .../src/pages/Mission/MissionCreate/index.tsx | 28 +++++++++----------
 ssh-web/src/pages/Mission/index.tsx           |  2 +-
 ssh-web/src/pages/Promise/styles.ts           |  2 +-
 ssh-web/src/utils/appUtil.ts                  |  2 +-
 7 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/ssh-web/src/pages/Egg/EggFetch.styles.ts b/ssh-web/src/pages/Egg/EggFetch.styles.ts
index d15a62f..06858af 100644
--- a/ssh-web/src/pages/Egg/EggFetch.styles.ts
+++ b/ssh-web/src/pages/Egg/EggFetch.styles.ts
@@ -1,7 +1,7 @@
 import { tv } from 'tailwind-variants';
 
 export const contentStyles = tv({
-  base: 'flex flex-col justify-between items-center desktop:w-[48rem] desktop:h-[48rem] desktop:rounded-lg desktop:py-0 tablet:w-full tablet:h-full tablet:rounded-t-[2rem] tablet:py-8 mob:!pb-0 bg-primary-100 px-4',
+  base: 'flex flex-col justify-between items-center desktop:w-[48rem] desktop:h-[48rem] desktop:rounded-lg desktop:py-0 tablet:w-full tablet:h-full tablet:rounded-t-[2rem] mob:!pb-0 bg-primary-100 px-4',
 });
 
 export const containerStyles = tv({
diff --git a/ssh-web/src/pages/Egg/components/TodayEgg.tsx b/ssh-web/src/pages/Egg/components/TodayEgg.tsx
index 3ce5318..45726d5 100644
--- a/ssh-web/src/pages/Egg/components/TodayEgg.tsx
+++ b/ssh-web/src/pages/Egg/components/TodayEgg.tsx
@@ -95,9 +95,9 @@ export const TodayEgg = () => {
                     {reward?.specialEggName}이 나왔어요
                   </Typography>
                 </div>
-                <div className="relative w-full h-max bg-primary-300 flex flex-row justify-center items-center py-8 rounded-3xl">
+                <div className="relative flex flex-row items-center justify-center w-full py-8 h-max bg-primary-300 rounded-3xl">
                   <img src={reward?.imageUrl} alt="" className="w-[12rem]" />
-                  <div className="absolute left-1/4 bottom-20 w-full flex flex-col items-center justify-center">
+                  <div className="absolute flex flex-col items-center justify-center w-full left-1/4 bottom-20">
                     <img
                       src={'/assets/images/check_icon.png'}
                       alt=""
@@ -137,7 +137,7 @@ export const TodayEgg = () => {
                     아무것도 나오지 않았어요.
                   </Typography>
                 </div>
-                <div className="relative w-full h-max bg-secondary-400 flex flex-row justify-center items-center py-8 rounded-3xl">
+                <div className="relative flex flex-row items-center justify-center w-full py-8 h-max bg-secondary-400 rounded-3xl">
                   <img
                     src={'/assets/images/egg_crack.png'}
                     alt=""
@@ -177,7 +177,7 @@ export const TodayEgg = () => {
           + {collectedAmount}원
         </Typography>
       </div>
-      <div className="flex flex-row justify-between w-full items-end mb-5">
+      <div className="flex flex-row items-end justify-between w-full mb-5">
         <Badge
           text={`${todayDestroyCount} / 10`}
           weight="semibold"
@@ -210,7 +210,7 @@ export const TodayEgg = () => {
               className={`rounded-full absolute top-10 transform transition-transform duration-300 ${eggScale}`}
             />
           </div>
-          <div className="bg-primary-200 w-full h-24 rounded-3xl items-center flex flex-row justify-center gap-4">
+          <div className="flex flex-row items-center justify-center w-full h-24 gap-4 bg-primary-200 rounded-3xl">
             <Typography
               size="6xl"
               weight="bold"
@@ -244,8 +244,8 @@ export const TodayEgg = () => {
               className={`rounded-full absolute top-10 transform transition-transform duration-300 ${eggScale}`}
             />
           </div>
-          <div className="bg-secondary-700 w-full h-24 rounded-3xl items-center flex flex-row justify-center gap-4">
-            <Typography size="4xl" weight="bold" color="light">
+          <div className="flex flex-row items-center justify-center w-full py-4 rounded-md bg-secondary-700">
+            <Typography size="xl" weight="semibold" color="light">
               내 저축 계좌가 없어요
             </Typography>
           </div>
diff --git a/ssh-web/src/pages/Mission/MissionCreate/MissionCreate.styles.ts b/ssh-web/src/pages/Mission/MissionCreate/MissionCreate.styles.ts
index 6d52fdc..59cdb99 100644
--- a/ssh-web/src/pages/Mission/MissionCreate/MissionCreate.styles.ts
+++ b/ssh-web/src/pages/Mission/MissionCreate/MissionCreate.styles.ts
@@ -1,7 +1,7 @@
 import { tv } from 'tailwind-variants';
 
 export const missionCreateStyles = tv({
-  base: 'flex flex-col w-full items-center justify-center bg-white gap-4',
+  base: 'flex flex-col w-full items-center justify-center bg-white gap-4 relative',
   variants: {
     size: {
       M: 'px-4 py-1',
diff --git a/ssh-web/src/pages/Mission/MissionCreate/index.tsx b/ssh-web/src/pages/Mission/MissionCreate/index.tsx
index 0295f1c..230e784 100644
--- a/ssh-web/src/pages/Mission/MissionCreate/index.tsx
+++ b/ssh-web/src/pages/Mission/MissionCreate/index.tsx
@@ -112,7 +112,7 @@ export const MissionCreate: React.FC = () => {
 
   return (
     <div className={missionCreateStyles({ size })}>
-      <div className="text-left w-full flex flex-col">
+      <div className="flex flex-col w-full text-left">
         <Typography size="2xl" weight="bold">
           쏠쏠한 미션 등록
         </Typography>
@@ -127,7 +127,7 @@ export const MissionCreate: React.FC = () => {
             <select
               value={selectedChild}
               onChange={(e) => setSelectedChild(e.target.value)}
-              className="input w-full p-2 border rounded"
+              className="w-full p-2 border rounded input"
             >
               <option value="">도전자를 선택해 주세요</option>
               {children?.map((child) => (
@@ -149,8 +149,8 @@ export const MissionCreate: React.FC = () => {
         />
       </div>
 
-      <div className="flex gap-4 w-full">
-        <div className="flex flex-col gap-1 w-1/2">
+      <div className="flex w-full gap-4">
+        <div className="flex flex-col w-1/2 gap-1">
           <label className="text-primary-500">미션 시작 날짜</label>
           <input
             type="date"
@@ -160,11 +160,11 @@ export const MissionCreate: React.FC = () => {
                 `${e.target.value}T${missionStartAt.split('T')[1] || '00:00'}`,
               )
             }
-            className="input w-full p-2 border rounded"
+            className="w-full p-2 border rounded input"
           />
         </div>
 
-        <div className="flex flex-col gap-1 w-1/2">
+        <div className="flex flex-col w-1/2 gap-1">
           <label className="text-primary-500">미션 시작 시간</label>
           <input
             type="time"
@@ -174,13 +174,13 @@ export const MissionCreate: React.FC = () => {
                 `${missionStartAt.split('T')[0] || '2024-01-01'}T${e.target.value}`,
               )
             }
-            className="input w-full p-2 border rounded"
+            className="w-full p-2 border rounded input"
           />
         </div>
       </div>
 
-      <div className="flex gap-4 w-full mt-0">
-        <div className="flex flex-col gap-1 w-1/2">
+      <div className="flex w-full gap-4 mt-0">
+        <div className="flex flex-col w-1/2 gap-1">
           <label className="text-primary-500">미션 종료 날짜</label>
           <input
             type="date"
@@ -190,11 +190,11 @@ export const MissionCreate: React.FC = () => {
                 `${e.target.value}T${missionEndAt.split('T')[1] || '00:00'}`,
               )
             }
-            className="input w-full p-2 border rounded"
+            className="w-full p-2 border rounded input"
           />
         </div>
 
-        <div className="flex flex-col gap-1 w-1/2">
+        <div className="flex flex-col w-1/2 gap-1">
           <label className="text-primary-500">미션 종료 시간</label>
           <input
             type="time"
@@ -204,7 +204,7 @@ export const MissionCreate: React.FC = () => {
                 `${missionEndAt.split('T')[0] || '2024-01-01'}T${e.target.value}`,
               )
             }
-            className="input w-full p-2 border rounded"
+            className="w-full p-2 border rounded input"
           />
         </div>
       </div>
@@ -230,7 +230,7 @@ export const MissionCreate: React.FC = () => {
 
       <Button
         onClick={handleMissionSubmit}
-        classNameStyles={`${bigButtonStyles()}`}
+        classNameStyles={`${bigButtonStyles()} absolute bottom-0`}
       >
         등록하기
       </Button>
@@ -239,5 +239,5 @@ export const MissionCreate: React.FC = () => {
 };
 
 const bigButtonStyles = tv({
-  base: '!bg-primary-400 hover:!bg-primary-300 active:!bg-primary-300 !rounded-3xl !w-full !px-4 !z-10 !py-8 font-bold !text-2xl mt-4',
+  base: '!bg-primary-400 hover:!bg-primary-300 active:!bg-primary-300 !rounded-md !w-full !z-10 !py-4 font-semibold !text-xl',
 });
diff --git a/ssh-web/src/pages/Mission/index.tsx b/ssh-web/src/pages/Mission/index.tsx
index 69d66f1..20bc6e7 100644
--- a/ssh-web/src/pages/Mission/index.tsx
+++ b/ssh-web/src/pages/Mission/index.tsx
@@ -152,7 +152,7 @@ export const MissionFetch: React.FC = () => {
 
         {role === 'parent' && (
           <Button
-            classNameStyles={`${bigButtonStyles()} absolute bottom-8`}
+            classNameStyles={`${bigButtonStyles()} absolute bottom-12`}
             onClick={onClickCreateModalOpen}
           >
             새 미션 등록하기
diff --git a/ssh-web/src/pages/Promise/styles.ts b/ssh-web/src/pages/Promise/styles.ts
index c65251d..6138757 100644
--- a/ssh-web/src/pages/Promise/styles.ts
+++ b/ssh-web/src/pages/Promise/styles.ts
@@ -34,7 +34,7 @@ export const contentStyles = tv({
 });
 
 export const gridStyles = tv({
-  base: 'grid ',
+  base: 'grid py-14',
   variants: {
     size: {
       M: 'grid-cols-2 gap-[15vw]',
diff --git a/ssh-web/src/utils/appUtil.ts b/ssh-web/src/utils/appUtil.ts
index 151a5ec..8d12ef6 100644
--- a/ssh-web/src/utils/appUtil.ts
+++ b/ssh-web/src/utils/appUtil.ts
@@ -16,6 +16,6 @@ export const getNavHasBack = (path?: string) => {
   return true;
 };
 export const getHasBottom = (path: string) => {
-  if (path === '/mypage') return false;
+  if (path === '/mypage' || path === '/quiz/solve') return false;
   return true;
 };