Merge pull request #167 from sebanimm/main

fix: if문을 객체 방식으로 수정

Author: Ubinquitous

src/templates/post/layouts/edit/index.tsx

@@ -15,6 +15,10 @@ import { CATEGORY } from "../../constants";
 import { usePostWritable } from "../../hooks";
 import { PostDetailParamsProps } from "../../types/@props";
 
+type PostCategoryType = {
+  [key in keyof typeof CATEGORY]?: JSX.Element;
+};
+
 const PostEditPage = ({ id }: PostDetailParamsProps) => {
   const { post } = usePostQuery(id);
   const {
@@ -24,6 +28,44 @@ const PostEditPage = ({ id }: PostDetailParamsProps) => {
     handlePostEditButtonClick,
     handleInputPostDataChange,
   } = usePostWritable(post);
+
+  const PostCategory: PostCategoryType = {
+    PROJECT: (
+      <ProjectInputBox
+        handleChange={handleInputPostDataChange}
+        postData={postData}
+      />
+    ),
+    CODE_REVIEW: (
+      <CodeReviewInputBox
+        handleChange={handleInputPostDataChange}
+        postData={postData}
+      />
+    ),
+    LOST: (
+      <LostFoundInputBox
+        handleChange={handleInputPostDataChange}
+        handleFileSelect={handleImageFileSelect}
+        postData={postData}
+        lostImageUrl={lostImageUrl}
+      />
+    ),
+    FOUND: (
+      <>
+        <LostFoundInputBox
+          handleChange={handleInputPostDataChange}
+          handleFileSelect={handleImageFileSelect}
+          postData={postData}
+          lostImageUrl={lostImageUrl}
+        />
+        <FoundInputBox
+          handleChange={handleInputPostDataChange}
+          postData={postData}
+        />
+      </>
+    ),
+  };
+
   return (
     <>
       <Layout>
@@ -34,33 +76,7 @@ const PostEditPage = ({ id }: PostDetailParamsProps) => {
             handleChange={handleInputPostDataChange}
             postData={postData}
           />
-          {postData.category === CATEGORY.PROJECT && (
-            <ProjectInputBox
-              handleChange={handleInputPostDataChange}
-              postData={postData}
-            />
-          )}
-          {postData.category === CATEGORY.CODE_REVIEW && (
-            <CodeReviewInputBox
-              handleChange={handleInputPostDataChange}
-              postData={postData}
-            />
-          )}
-          {(postData.category === CATEGORY.LOST ||
-            postData.category === CATEGORY.FOUND) && (
-            <LostFoundInputBox
-              handleChange={handleInputPostDataChange}
-              handleFileSelect={handleImageFileSelect}
-              postData={postData}
-              lostImageUrl={lostImageUrl}
-            />
-          )}
-          {postData.category === CATEGORY.FOUND && (
-            <FoundInputBox
-              handleChange={handleInputPostDataChange}
-              postData={postData}
-            />
-          )}
+          {PostCategory[postData.category]}
           <ContentInputBox
             handleChange={handleInputPostDataChange}
             postData={postData}

src/templates/post/layouts/write/index.tsx

@@ -14,6 +14,10 @@ import { CATEGORY } from "../../constants";
 import { usePostWritable } from "../../hooks";
 import PostCategoryBox from "./CategoryBox";
 
+type PostCategoryType = {
+  [key in keyof typeof CATEGORY]?: JSX.Element;
+};
+
 const PostWritePage = () => {
   const {
     postData,
@@ -23,6 +27,44 @@ const PostWritePage = () => {
     handlePostWriteButtonClick,
     handleInputPostDataChange,
   } = usePostWritable();
+
+  const PostCategory: PostCategoryType = {
+    PROJECT: (
+      <ProjectInputBox
+        handleChange={handleInputPostDataChange}
+        postData={postData}
+      />
+    ),
+    CODE_REVIEW: (
+      <CodeReviewInputBox
+        handleChange={handleInputPostDataChange}
+        postData={postData}
+      />
+    ),
+    LOST: (
+      <LostFoundInputBox
+        handleChange={handleInputPostDataChange}
+        handleFileSelect={handleImageFileSelect}
+        postData={postData}
+        lostImageUrl={lostImageUrl}
+      />
+    ),
+    FOUND: (
+      <>
+        <LostFoundInputBox
+          handleChange={handleInputPostDataChange}
+          handleFileSelect={handleImageFileSelect}
+          postData={postData}
+          lostImageUrl={lostImageUrl}
+        />
+        <FoundInputBox
+          handleChange={handleInputPostDataChange}
+          postData={postData}
+        />
+      </>
+    ),
+  };
+
   return (
     <>
       <Layout>
@@ -37,33 +79,7 @@ const PostWritePage = () => {
             handleChange={handleInputPostDataChange}
             postData={postData}
           />
-          {postData.category === CATEGORY.PROJECT && (
-            <ProjectInputBox
-              handleChange={handleInputPostDataChange}
-              postData={postData}
-            />
-          )}
-          {postData.category === CATEGORY.CODE_REVIEW && (
-            <CodeReviewInputBox
-              handleChange={handleInputPostDataChange}
-              postData={postData}
-            />
-          )}
-          {(postData.category === CATEGORY.LOST ||
-            postData.category === CATEGORY.FOUND) && (
-            <LostFoundInputBox
-              handleChange={handleInputPostDataChange}
-              handleFileSelect={handleImageFileSelect}
-              postData={postData}
-              lostImageUrl={lostImageUrl}
-            />
-          )}
-          {postData.category === CATEGORY.FOUND && (
-            <FoundInputBox
-              handleChange={handleInputPostDataChange}
-              postData={postData}
-            />
-          )}
+          {PostCategory[postData.category]}
           <ContentInputBox
             handleChange={handleInputPostDataChange}
             postData={postData}