From d6ed26b23a90ef2552dd41d455e11201ea9d335c Mon Sep 17 00:00:00 2001
From: TaeeunKim <xodms0309@naver.com>
Date: Thu, 12 Oct 2023 17:37:40 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EB=8C=93=EA=B8=80=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=EB=A5=BC=20fixed=EB=A1=9C=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Recipe/CommentForm/CommentForm.tsx        | 27 ++++++++++++++-----
 frontend/src/pages/RecipeDetailPage.tsx       |  8 ++----
 frontend/src/router/index.tsx                 | 18 ++++++-------
 3 files changed, 32 insertions(+), 21 deletions(-)

diff --git a/frontend/src/components/Recipe/CommentForm/CommentForm.tsx b/frontend/src/components/Recipe/CommentForm/CommentForm.tsx
index ac53b1a40..28820c71a 100644
--- a/frontend/src/components/Recipe/CommentForm/CommentForm.tsx
+++ b/frontend/src/components/Recipe/CommentForm/CommentForm.tsx
@@ -3,6 +3,7 @@ import type { ChangeEventHandler, FormEventHandler } from 'react';
 import { useState } from 'react';
 import styled from 'styled-components';
 
+import { SvgIcon } from '@/components/Common';
 import { useToastActionContext } from '@/hooks/context';
 import useRecipeCommentMutation from '@/hooks/queries/recipe/useRecipeCommentMutation';
 
@@ -46,7 +47,7 @@ const CommentForm = ({ recipeId }: CommentFormProps) => {
   };
 
   return (
-    <>
+    <CommentFormContainer>
       <Form onSubmit={handleSubmitComment}>
         <CommentTextarea
           placeholder="댓글을 입력하세요. (200자)"
@@ -54,33 +55,47 @@ const CommentForm = ({ recipeId }: CommentFormProps) => {
           onChange={handleCommentInput}
           maxLength={MAX_COMMENT_LENGTH}
         />
-        <SubmitButton size="xs" customWidth="40px" customHeight="auto" disabled={commentValue.length === 0}>
-          등록
+        <SubmitButton variant="transparent" disabled={commentValue.length === 0}>
+          <SvgIcon
+            variant="plane"
+            width={30}
+            height={30}
+            color={commentValue.length === 0 ? theme.colors.gray2 : theme.colors.gray4}
+          />
         </SubmitButton>
       </Form>
       <Spacing size={8} />
       <Text size="xs" color={theme.textColors.info} align="right">
         {commentValue.length}자 / {MAX_COMMENT_LENGTH}자
       </Text>
-    </>
+    </CommentFormContainer>
   );
 };
 
 export default CommentForm;
 
+const CommentFormContainer = styled.div`
+  position: fixed;
+  bottom: 0;
+  width: calc(100% - 40px);
+  max-width: 540px;
+  padding: 16px 0;
+  background: ${({ theme }) => theme.backgroundColors.default};
+`;
+
 const Form = styled.form`
   display: flex;
   gap: 4px;
   justify-content: space-around;
+  align-items: center;
 `;
 
 const CommentTextarea = styled(Textarea)`
-  width: calc(100% - 50px);
+  height: 50px;
   padding: 8px;
   font-size: 1.4rem;
 `;
 
 const SubmitButton = styled(Button)`
-  background: ${({ theme, disabled }) => (disabled ? theme.colors.gray2 : theme.colors.primary)};
   cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
 `;
diff --git a/frontend/src/pages/RecipeDetailPage.tsx b/frontend/src/pages/RecipeDetailPage.tsx
index fab578792..da5f050bf 100644
--- a/frontend/src/pages/RecipeDetailPage.tsx
+++ b/frontend/src/pages/RecipeDetailPage.tsx
@@ -20,7 +20,7 @@ export const RecipeDetailPage = () => {
   const { id, images, title, content, author, products, totalPrice, favoriteCount, favorite, createdAt } = recipeDetail;
 
   return (
-    <RecipeDetailPageContainer>
+    <>
       <SectionTitle name={title} />
       <Spacing size={24} />
       {images.length > 0 ? (
@@ -80,14 +80,10 @@ export const RecipeDetailPage = () => {
       </ErrorBoundary>
       <CommentForm recipeId={Number(recipeId)} />
       <Spacing size={12} />
-    </RecipeDetailPageContainer>
+    </>
   );
 };
 
-const RecipeDetailPageContainer = styled.div`
-  padding: 20px 20px 0;
-`;
-
 const RecipeImageContainer = styled.ul`
   display: flex;
   flex-direction: column;
diff --git a/frontend/src/router/index.tsx b/frontend/src/router/index.tsx
index 0103d0fc7..1f0ee78a9 100644
--- a/frontend/src/router/index.tsx
+++ b/frontend/src/router/index.tsx
@@ -17,15 +17,6 @@ const router = createBrowserRouter([
     ),
     errorElement: <NotFoundPage />,
     children: [
-      {
-        path: `${PATH.RECIPE}/:recipeId`,
-        async lazy() {
-          const { RecipeDetailPage } = await import(
-            /* webpackChunkName: "RecipeDetailPage" */ '@/pages/RecipeDetailPage'
-          );
-          return { Component: RecipeDetailPage };
-        },
-      },
       {
         path: PATH.MEMBER,
         async lazy() {
@@ -119,6 +110,15 @@ const router = createBrowserRouter([
           return { Component: ProductDetailPage };
         },
       },
+      {
+        path: `${PATH.RECIPE}/:recipeId`,
+        async lazy() {
+          const { RecipeDetailPage } = await import(
+            /* webpackChunkName: "RecipeDetailPage" */ '@/pages/RecipeDetailPage'
+          );
+          return { Component: RecipeDetailPage };
+        },
+      },
     ],
   },
   {