From 260ff40e889a106c678138d87cb3493665799c70 Mon Sep 17 00:00:00 2001
From: stakbucks <dhassidu11@gmail.com>
Date: Wed, 21 Aug 2024 22:13:55 +0900
Subject: [PATCH] fix: step container height

---
 apps/bottle/src/app/create-profile/_steps/MBTI/index.tsx      | 4 ++--
 apps/bottle/src/app/create-profile/_steps/alcohol/index.tsx   | 4 ++--
 apps/bottle/src/app/create-profile/_steps/height/index.tsx    | 4 ++--
 .../src/app/create-profile/_steps/information/index.tsx       | 4 ++--
 apps/bottle/src/app/create-profile/_steps/job/index.tsx       | 4 ++--
 apps/bottle/src/app/create-profile/_steps/kakao-id/index.tsx  | 4 ++--
 apps/bottle/src/app/create-profile/_steps/keywords/index.tsx  | 4 ++--
 apps/bottle/src/app/create-profile/_steps/region/index.tsx    | 4 ++--
 apps/bottle/src/app/create-profile/_steps/religion/index.tsx  | 4 ++--
 apps/bottle/src/app/create-profile/_steps/smoking/index.tsx   | 4 ++--
 apps/bottle/src/features/steps/stepStyle.css.ts               | 3 +--
 11 files changed, 21 insertions(+), 22 deletions(-)

diff --git a/apps/bottle/src/app/create-profile/_steps/MBTI/index.tsx b/apps/bottle/src/app/create-profile/_steps/MBTI/index.tsx
index 1552dc0..f50ab2c 100644
--- a/apps/bottle/src/app/create-profile/_steps/MBTI/index.tsx
+++ b/apps/bottle/src/app/create-profile/_steps/MBTI/index.tsx
@@ -25,7 +25,7 @@ export function MBTI() {
   const isDisabled = useMemo(() => EI == null || SN == null || TF == null || JP == null, [EI, JP, TF, SN]);
 
   return (
-    <Step>
+    <>
       <Step.Title>{name}님의 성격에 대해 알고 싶어요</Step.Title>
       <section className={bodyStyle}>
         <div className={controlStyle}>
@@ -93,7 +93,7 @@ export function MBTI() {
       >
         다음
       </Step.FixedButton>
-    </Step>
+    </>
   );
 }
 
diff --git a/apps/bottle/src/app/create-profile/_steps/alcohol/index.tsx b/apps/bottle/src/app/create-profile/_steps/alcohol/index.tsx
index d63d23e..8eff527 100644
--- a/apps/bottle/src/app/create-profile/_steps/alcohol/index.tsx
+++ b/apps/bottle/src/app/create-profile/_steps/alcohol/index.tsx
@@ -14,7 +14,7 @@ export function Alcohol() {
   const [alcohol, setAlcohol] = useState<AlcoholType | undefined>(getValue('alcohol'));
 
   return (
-    <Step>
+    <>
       <Step.Title>술은 얼마나 즐기나요?</Step.Title>
       <Control value={alcohol}>
         <section className={alcoholStyle}>
@@ -39,6 +39,6 @@ export function Alcohol() {
       >
         다음
       </Step.FixedButton>
-    </Step>
+    </>
   );
 }
diff --git a/apps/bottle/src/app/create-profile/_steps/height/index.tsx b/apps/bottle/src/app/create-profile/_steps/height/index.tsx
index 0d42ca7..7da0281 100644
--- a/apps/bottle/src/app/create-profile/_steps/height/index.tsx
+++ b/apps/bottle/src/app/create-profile/_steps/height/index.tsx
@@ -22,7 +22,7 @@ export function Height() {
   const [height, setHeight] = useState(getValue('height') ?? Number(DEFAULT_ID));
 
   return (
-    <Step>
+    <>
       <Step.Title>키는 어떻게 되나요?</Step.Title>
       <div className={wheelPickerContainerStyle}>
         <WheelPicker
@@ -46,6 +46,6 @@ export function Height() {
       >
         다음
       </Step.FixedButton>
-    </Step>
+    </>
   );
 }
diff --git a/apps/bottle/src/app/create-profile/_steps/information/index.tsx b/apps/bottle/src/app/create-profile/_steps/information/index.tsx
index 8cff1b5..4efeb6a 100644
--- a/apps/bottle/src/app/create-profile/_steps/information/index.tsx
+++ b/apps/bottle/src/app/create-profile/_steps/information/index.tsx
@@ -30,7 +30,7 @@ export function Information() {
     gender === undefined;
 
   return (
-    <Step>
+    <>
       <Step.Title>{'프로필 생성을 위해\n개인 정보를 입력해 주세요'}</Step.Title>
       <section className={containerStyle}>
         <div className={fieldStyle}>
@@ -107,6 +107,6 @@ export function Information() {
       >
         다음
       </Step.FixedButton>
-    </Step>
+    </>
   );
 }
diff --git a/apps/bottle/src/app/create-profile/_steps/job/index.tsx b/apps/bottle/src/app/create-profile/_steps/job/index.tsx
index 170f633..540e01f 100644
--- a/apps/bottle/src/app/create-profile/_steps/job/index.tsx
+++ b/apps/bottle/src/app/create-profile/_steps/job/index.tsx
@@ -13,7 +13,7 @@ export function Job() {
 
   const [job, setJob] = useState<JobType | undefined>(getValue('job'));
   return (
-    <Step>
+    <>
       <Step.Title>지금 어떤 일을 하고 있나요?</Step.Title>
       <section className={jobStyle}>
         <Control value={job}>
@@ -38,6 +38,6 @@ export function Job() {
       >
         다음
       </Step.FixedButton>
-    </Step>
+    </>
   );
 }
diff --git a/apps/bottle/src/app/create-profile/_steps/kakao-id/index.tsx b/apps/bottle/src/app/create-profile/_steps/kakao-id/index.tsx
index 31a23f7..0ea313c 100644
--- a/apps/bottle/src/app/create-profile/_steps/kakao-id/index.tsx
+++ b/apps/bottle/src/app/create-profile/_steps/kakao-id/index.tsx
@@ -14,7 +14,7 @@ export function KaKaoId() {
   const disabled = kakaoId.trim().length === 0;
 
   return (
-    <Step>
+    <>
       <Step.Title>{'연락처 공유를 위해\n카카오톡 아이디를 입력해 주세요'}</Step.Title>
       <Step.Description style={{ marginTop: spacings.sm }}>오타가 없는지 한 번 더 확인해 주세요</Step.Description>
       <TextField
@@ -38,6 +38,6 @@ export function KaKaoId() {
       >
         다음
       </Step.FixedButton>
-    </Step>
+    </>
   );
 }
diff --git a/apps/bottle/src/app/create-profile/_steps/keywords/index.tsx b/apps/bottle/src/app/create-profile/_steps/keywords/index.tsx
index f7c0013..76846aa 100644
--- a/apps/bottle/src/app/create-profile/_steps/keywords/index.tsx
+++ b/apps/bottle/src/app/create-profile/_steps/keywords/index.tsx
@@ -17,7 +17,7 @@ export function Keywords() {
   const [keywords, setKeywords] = useState<Keyword[]>(getValue('keyword') ?? []);
 
   return (
-    <Step>
+    <>
       <Step.Title>나를 표현하는 키워드는?</Step.Title>
       <Step.Description style={{ marginTop: '12px' }}>최소 3개, 최대 5개까지 선택할 수 있어요</Step.Description>
       <Control value={keywords}>
@@ -58,6 +58,6 @@ export function Keywords() {
       >
         {`다음 ${keywords.length} / ${MAX_SELECTED}`}
       </Step.FixedButton>
-    </Step>
+    </>
   );
 }
diff --git a/apps/bottle/src/app/create-profile/_steps/region/index.tsx b/apps/bottle/src/app/create-profile/_steps/region/index.tsx
index 130e779..a90cf1b 100644
--- a/apps/bottle/src/app/create-profile/_steps/region/index.tsx
+++ b/apps/bottle/src/app/create-profile/_steps/region/index.tsx
@@ -58,7 +58,7 @@ export function Region() {
   };
 
   return (
-    <Step>
+    <>
       <OverlayProvider>
         <Step.Title>주로 생활하는 지역은 어딘가요?</Step.Title>
         <Step.Subtitle style={{ marginTop: spacings.xxl }}>전체 지역</Step.Subtitle>
@@ -95,6 +95,6 @@ export function Region() {
       >
         다음
       </Step.FixedButton>
-    </Step>
+    </>
   );
 }
diff --git a/apps/bottle/src/app/create-profile/_steps/religion/index.tsx b/apps/bottle/src/app/create-profile/_steps/religion/index.tsx
index 0f76a9c..75db059 100644
--- a/apps/bottle/src/app/create-profile/_steps/religion/index.tsx
+++ b/apps/bottle/src/app/create-profile/_steps/religion/index.tsx
@@ -14,7 +14,7 @@ export function Religion() {
   const [religion, setReligion] = useState<ReligionType | undefined>(getValue('religion'));
 
   return (
-    <Step>
+    <>
       <Step.Title>어떤 종교를 가지고 있나요?</Step.Title>
       <section className={religionStyle}>
         <Control value={religion}>
@@ -39,6 +39,6 @@ export function Religion() {
       >
         다음
       </Step.FixedButton>
-    </Step>
+    </>
   );
 }
diff --git a/apps/bottle/src/app/create-profile/_steps/smoking/index.tsx b/apps/bottle/src/app/create-profile/_steps/smoking/index.tsx
index d194614..6de6ad2 100644
--- a/apps/bottle/src/app/create-profile/_steps/smoking/index.tsx
+++ b/apps/bottle/src/app/create-profile/_steps/smoking/index.tsx
@@ -14,7 +14,7 @@ export function Smoking() {
   const [smoking, setSmoking] = useState<SmokingType | undefined>(getValue('smoking'));
 
   return (
-    <Step>
+    <>
       <Step.Title>흡연 스타일이 궁금해요</Step.Title>
       <Control value={smoking}>
         <section className={smokingStyle}>
@@ -39,6 +39,6 @@ export function Smoking() {
       >
         다음
       </Step.FixedButton>
-    </Step>
+    </>
   );
 }
diff --git a/apps/bottle/src/features/steps/stepStyle.css.ts b/apps/bottle/src/features/steps/stepStyle.css.ts
index 0747f49..430655f 100644
--- a/apps/bottle/src/features/steps/stepStyle.css.ts
+++ b/apps/bottle/src/features/steps/stepStyle.css.ts
@@ -9,8 +9,7 @@ export const CTA_HEIGHT = 109;
  * the Bottom CTA's gradient overlaps with the body of the Step Container.
  */
 export const OVERLAP_HEIGHT = 20;
-const STEPPER_HEIGHT = 26;
-export const CONTAINER_OFFSET_HEIGHT = HEADER_HEIGHT + CTA_HEIGHT + STEPPER_HEIGHT;
+export const CONTAINER_OFFSET_HEIGHT = HEADER_HEIGHT + CTA_HEIGHT;
 
 export const buttonContainer = style({
   position: 'fixed',