From e4b408e70e8074f5abcf8c5a9bddcb76d1775ccd Mon Sep 17 00:00:00 2001
From: joojjang <itchu999@naver.com>
Date: Tue, 1 Oct 2024 06:37:45 +0900
Subject: [PATCH] =?UTF-8?q?!HOTFIX(review-write):=20=ED=99=94=EB=A9=B4=20?=
 =?UTF-8?q?=EB=86=92=EC=9D=B4=20=EA=BD=89=20=EC=B1=84=EC=9A=B0=EA=B2=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/review-write/index.tsx | 145 +++++++++++++++++--------------
 1 file changed, 78 insertions(+), 67 deletions(-)

diff --git a/src/pages/review-write/index.tsx b/src/pages/review-write/index.tsx
index d5abb7a..32c4628 100644
--- a/src/pages/review-write/index.tsx
+++ b/src/pages/review-write/index.tsx
@@ -6,7 +6,7 @@ import ChallengeTitle from '@/components/common/challenge-title';
 import CTA, { CTAContainer } from '@/components/common/cta';
 import Textarea from '@/components/common/form/textarea';
 import { StarRating } from '@/components/common/star-rating';
-import TopBar from '@/components/features/layout/top-bar';
+import TopBar, { HEADER_HEIGHT } from '@/components/features/layout/top-bar';
 import { useChallengeStore } from '@/store/useChallengeStore';
 import {
   formatRating,
@@ -106,73 +106,75 @@ const ReviewWrite = () => {
         {categoryLabel && challengeTitle && (
           <ChallengeTitle category={categoryLabel} title={challengeTitle} />
         )}
-        <FlexBox flexDirection='column' alignItems='center' alignSelf='center'>
-          <FlexBox flexDirection='row' alignItems='center'>
-            <StarRating
-              rating={rating}
-              size={32}
-              onClick={(newRating) => setRating(newRating)}
+        <Inner>
+          <FormItem alignItems='center' alignSelf='center'>
+            <Box display='flex' flex-direction='row' alignItems='center'>
+              <StarRating
+                rating={rating}
+                size={32}
+                onClick={(newRating) => setRating(newRating)}
+              />
+              <Rating>
+                <span>{rating}.0</span>&nbsp;<span>/ 5.0</span>
+              </Rating>
+            </Box>
+            <Box>
+              <Text fontSize='var(--font-size-sm)' color='var(--color-gray-01)'>
+                {formatRating(rating)}
+              </Text>
+            </Box>
+          </FormItem>
+          <FormItem>
+            <ItemTitle>체감 난이도</ItemTitle>
+            <Box as='ul' display='flex' margin='0 16px'>
+              {difficultyList.map((d) => (
+                <Chip
+                  as='li'
+                  key={d}
+                  onClick={() => handleDifficultyClick(d)}
+                  isSelected={selectedDifficulty === d}
+                >
+                  {formatDifficulty(d)}
+                </Chip>
+              ))}
+            </Box>
+          </FormItem>
+          <FormItem>
+            <ItemTitle>성취감</ItemTitle>
+            <Box as='ul' display='flex' margin='0 16px'>
+              {achievementList.map((a) => (
+                <Chip
+                  as='li'
+                  key={a}
+                  onClick={() => handleFeelingClick(a)}
+                  isSelected={selectedAchievement === a}
+                >
+                  {formatAchievement(a)}
+                </Chip>
+              ))}
+            </Box>
+          </FormItem>
+          <FormItem>
+            <ItemTitle>소감</ItemTitle>
+            <Textarea
+              placeholder='챌린지 완수 후 느낀 점을 적어주세요.'
+              value={content}
+              onChange={handleContentChange}
+              minValueLength={MIN_CONTENT_LENGTH}
+              valid={isContentValid}
             />
-            <Rating>
-              <span>{rating}.0</span>&nbsp;<span>/ 5.0</span>
-            </Rating>
-          </FlexBox>
-          <FlexBox alignSelf='center'>
-            <Text fontSize='var(--font-size-sm)' color='var(--color-gray-01)'>
-              {formatRating(rating)}
+          </FormItem>
+          <FormItem>
+            <ItemTitle>리뷰 작성 시 주의 사항</ItemTitle>
+            <Text fontSize='var(--font-size-sm)' margin='0 16px 32px'>
+              해당 챌린지와 무관한 내용 또는 욕설, 도배 등의{' '}
+              <Text as='span' color='var(--color-green-01)' fontWeight={600}>
+                부적절한 내용은 삭제 조치
+              </Text>
+              될 수 있습니다.
             </Text>
-          </FlexBox>
-        </FlexBox>
-        <FlexBox flexDirection='column'>
-          <ItemTitle>체감 난이도</ItemTitle>
-          <Box as='ul' display='flex' margin='0 16px'>
-            {difficultyList.map((d) => (
-              <Chip
-                as='li'
-                key={d}
-                onClick={() => handleDifficultyClick(d)}
-                isSelected={selectedDifficulty === d}
-              >
-                {formatDifficulty(d)}
-              </Chip>
-            ))}
-          </Box>
-        </FlexBox>
-        <FlexBox flexDirection='column'>
-          <ItemTitle>성취감</ItemTitle>
-          <Box as='ul' display='flex' margin='0 16px'>
-            {achievementList.map((a) => (
-              <Chip
-                as='li'
-                key={a}
-                onClick={() => handleFeelingClick(a)}
-                isSelected={selectedAchievement === a}
-              >
-                {formatAchievement(a)}
-              </Chip>
-            ))}
-          </Box>
-        </FlexBox>
-        <FlexBox flexDirection='column'>
-          <ItemTitle>소감</ItemTitle>
-          <Textarea
-            placeholder='챌린지 완수 후 느낀 점을 적어주세요.'
-            value={content}
-            onChange={handleContentChange}
-            minValueLength={MIN_CONTENT_LENGTH}
-            valid={isContentValid}
-          />
-        </FlexBox>
-        <FlexBox flexDirection='column'>
-          <ItemTitle>리뷰 작성 시 주의 사항</ItemTitle>
-          <Text fontSize='var(--font-size-sm)' margin='0 16px'>
-            해당 챌린지와 무관한 내용 또는 욕설, 도배 등의{' '}
-            <Text as='span' color='var(--color-green-01)' fontWeight={600}>
-              부적절한 내용은 삭제 조치
-            </Text>
-            될 수 있습니다.
-          </Text>
-        </FlexBox>
+          </FormItem>
+        </Inner>
 
         <CTAContainer>
           <CTA
@@ -192,13 +194,22 @@ const Wrapper = styled.div`
   position: relative;
   display: flex;
   flex-direction: column;
+  flex: 1;
   text-align: left;
   width: 100%;
+  min-height: calc(100vh - ${HEADER_HEIGHT});
+`;
+
+const Inner = styled.form`
+  display: flex;
+  flex-direction: column;
+  flex: 1;
   gap: 16px;
 `;
 
-const FlexBox = styled(Box)`
+const FormItem = styled(Box)`
   display: flex;
+  flex-direction: column;
 `;
 
 const ItemTitle = styled(Text)`