feat: 댓글 컴포넌트를 fixed로 변경

woowacourse-teams · Oct 12, 2023 · d6ed26b · d6ed26b
1 parent 6b4e689
commit d6ed26b
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 21 deletions.
diff --git 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,41 +47,55 @@ const CommentForm = ({ recipeId }: CommentFormProps) => {
   };
 
   return (
-    <>
+    <CommentFormContainer>
       <Form onSubmit={handleSubmitComment}>
         <CommentTextarea
           placeholder="댓글을 입력하세요. (200자)"
           value={commentValue}
           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
@@ -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
@@ -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 };
+        },
+      },
     ],
   },
   {