From c87d3aa6e115610f688a3fa3986c708d71479213 Mon Sep 17 00:00:00 2001
From: "chanki.kim" <chanki.kim89@gmail.com>
Date: Sat, 28 Dec 2024 10:54:25 +0900
Subject: [PATCH 01/72] =?UTF-8?q?Refactor(mentor):=20useResponsive?=
 =?UTF-8?q?=ED=9B=85=20=EB=82=B4=EB=B6=80=20=EB=B3=80=EC=88=98=EB=AA=85=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/useResponsive.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/hooks/useResponsive.js b/src/hooks/useResponsive.js
index fb4d92a72..ecbe87cbb 100644
--- a/src/hooks/useResponsive.js
+++ b/src/hooks/useResponsive.js
@@ -2,21 +2,21 @@ import { useEffect, useState } from "react";
 import { getDeviceType } from "@util/breakpoints";
 import { debounce } from "@util/debounce";
 
-export default function useReponsive(
+export default function useResponsive(
   initialOption = {
     pc: 10,
     tablet: 6,
     mobile: 4,
   }
 ) {
-  const [pageSize, setPageSize] = useState(
+  const [responsiveValue, setResponsiveValue] = useState(
     () => initialOption[getDeviceType()]
   );
 
   useEffect(() => {
     const debounceHandleResize = debounce(function () {
       const targetSize = initialOption[getDeviceType()];
-      setPageSize(targetSize);
+      setResponsiveValue(targetSize);
     }, 100);
 
     window.addEventListener("resize", debounceHandleResize);
@@ -26,5 +26,5 @@ export default function useReponsive(
     };
   }, []);
 
-  return pageSize;
+  return responsiveValue;
 }

From 4b8509b94732afa508acc68c7373242447756443 Mon Sep 17 00:00:00 2001
From: "chanki.kim" <chanki.kim89@gmail.com>
Date: Sat, 28 Dec 2024 11:15:58 +0900
Subject: [PATCH 02/72] =?UTF-8?q?Refactor(mentor):=20module=20css=EB=A5=BC?=
 =?UTF-8?q?=20flat=20=ED=95=98=EA=B2=8C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Comment/Comment.module.scss    | 45 +++--------
 src/components/Comment/CommentAdd.jsx         |  7 +-
 src/components/Comment/CommentAdd.module.scss |  3 +
 src/components/Comment/CommentForm.jsx        | 77 +++++++++----------
 .../Comment/CommentForm.module.scss           | 13 +++-
 src/components/Section/Section.module.scss    | 42 +++++-----
 6 files changed, 86 insertions(+), 101 deletions(-)
 create mode 100644 src/components/Comment/CommentAdd.module.scss

diff --git a/src/components/Comment/Comment.module.scss b/src/components/Comment/Comment.module.scss
index 62947252c..823ef2540 100644
--- a/src/components/Comment/Comment.module.scss
+++ b/src/components/Comment/Comment.module.scss
@@ -2,41 +2,18 @@
   margin-bottom: 2.4rem;
   padding-bottom: 2.4rem;
   border-bottom: 1px solid var(--color-secondary-200);
+}
 
-  .form {
-    margin-bottom: -4rem;
-  }
-
-  .comment {
-    display: flex;
-    gap: 2rem;
-
-    .content {
-      flex: 1;
-
-      .text {
-        margin-bottom: 2.4rem;
-        white-space: pre-wrap;
-      }
-
-      .footer {
-        display: flex;
-        justify-content: space-between;
-
-        .controls {
-          display: flex;
-          gap: 0.4rem;
-        }
-      }
-    }
+.comment {
+  display: flex;
+  gap: 2rem;
+}
 
-    .actions {
-      flex: 0 0 2.4rem;
-    }
+.content {
+  flex: 1;
+}
 
-    textarea {
-      height: 8rem;
-      margin-bottom: 1.6rem;
-    }
-  }
+.text {
+  margin-bottom: 2.4rem;
+  white-space: pre-wrap;
 }
diff --git a/src/components/Comment/CommentAdd.jsx b/src/components/Comment/CommentAdd.jsx
index 3fc0fd404..ed83c9e28 100644
--- a/src/components/Comment/CommentAdd.jsx
+++ b/src/components/Comment/CommentAdd.jsx
@@ -1,7 +1,12 @@
 import { CommentForm } from ".";
 import useComment from "./useComment";
+import styles from "./CommentAdd.module.scss";
 
 export function CommentAdd({ name }) {
   const { handleSubmit } = useComment(name);
-  return <CommentForm onCommentSubmit={handleSubmit} />;
+  return (
+    <div className={styles.form}>
+      <CommentForm onCommentSubmit={handleSubmit} />
+    </div>
+  );
 }
diff --git a/src/components/Comment/CommentAdd.module.scss b/src/components/Comment/CommentAdd.module.scss
new file mode 100644
index 000000000..d36cc7558
--- /dev/null
+++ b/src/components/Comment/CommentAdd.module.scss
@@ -0,0 +1,3 @@
+.form {
+  margin-bottom: 4rem;
+}
diff --git a/src/components/Comment/CommentForm.jsx b/src/components/Comment/CommentForm.jsx
index f3c542ad7..5a399859e 100644
--- a/src/components/Comment/CommentForm.jsx
+++ b/src/components/Comment/CommentForm.jsx
@@ -1,6 +1,5 @@
 import useForm from "@hooks/useForm";
 import { FieldItem, Form, Textarea } from "@components/Field";
-import { Section } from "@components/Section";
 import { Author, Button } from "@components/ui";
 import { commentSchema } from "./schema";
 import styles from "./CommentForm.module.scss";
@@ -39,48 +38,44 @@ export function CommentForm({
       error={formError}
       onSubmit={handleSubmit(onSubmit)}
     >
-      <Section>
-        <Section.Content>
-          <FieldItem>
-            {!isEdit && (
-              <FieldItem.Label htmlFor="content">문의하기</FieldItem.Label>
-            )}
-            <Textarea
-              size="sm"
-              placeholder="개인정보를 공유 및 요청하거나, 명예 훼손, 무단 광고, 불법 정보 유포시 모니터링 후 삭제될 수 있으며, 이에 대한 민형사상 책임은 게시자에게 있습니다."
-              {...register("content")}
+      <FieldItem>
+        {!isEdit && (
+          <FieldItem.Label htmlFor="content">문의하기</FieldItem.Label>
+        )}
+        <Textarea
+          size="sm"
+          placeholder="개인정보를 공유 및 요청하거나, 명예 훼손, 무단 광고, 불법 정보 유포시 모니터링 후 삭제될 수 있으며, 이에 대한 민형사상 책임은 게시자에게 있습니다."
+          {...register("content")}
+        />
+      </FieldItem>
+      <div className={styles.footer}>
+        {isEdit ? (
+          <div className={styles.meta}>
+            <Author
+              avatar={initialData.writer.mage}
+              nickname={initialData.writer.nickname}
+              updatedAt={initialData.updatedAt}
             />
-          </FieldItem>
-        </Section.Content>
-        <Section.Footer>
-          {isEdit ? (
-            <div className={styles.meta}>
-              <Author
-                avatar={initialData.writer.mage}
-                nickname={initialData.writer.nickname}
-                updatedAt={initialData.updatedAt}
-              />
-              <div className={styles.controls}>
-                <Button
-                  variant="text"
-                  color="secondary"
-                  size="sm"
-                  onClick={handleClose}
-                >
-                  취소
-                </Button>
-                <Button type="submit" size="sm" disabled={!isFormValid}>
-                  수정 완료
-                </Button>
-              </div>
+            <div className={styles.controls}>
+              <Button
+                variant="text"
+                color="secondary"
+                size="sm"
+                onClick={handleClose}
+              >
+                취소
+              </Button>
+              <Button type="submit" size="sm" disabled={!isFormValid}>
+                수정 완료
+              </Button>
             </div>
-          ) : (
-            <Button type="submit" size="sm" disabled={!isFormValid}>
-              등록
-            </Button>
-          )}
-        </Section.Footer>
-      </Section>
+          </div>
+        ) : (
+          <Button type="submit" size="sm" disabled={!isFormValid}>
+            등록
+          </Button>
+        )}
+      </div>
     </Form>
   );
 }
diff --git a/src/components/Comment/CommentForm.module.scss b/src/components/Comment/CommentForm.module.scss
index 5fa0bed5d..73d100d5d 100644
--- a/src/components/Comment/CommentForm.module.scss
+++ b/src/components/Comment/CommentForm.module.scss
@@ -2,9 +2,14 @@
   display: flex;
   width: 100%;
   justify-content: space-between;
+}
 
-  .controls {
-    display: flex;
-    gap: 1rem;
-  }
+.controls {
+  display: flex;
+  gap: 1rem;
+}
+
+.footer {
+  display: flex;
+  justify-content: flex-end;
 }
diff --git a/src/components/Section/Section.module.scss b/src/components/Section/Section.module.scss
index 38cc7235b..7f16625a3 100644
--- a/src/components/Section/Section.module.scss
+++ b/src/components/Section/Section.module.scss
@@ -3,29 +3,29 @@
 .section {
   position: relative;
   margin-bottom: 4rem;
+}
 
-  .header {
-    display: flex;
-    align-items: center;
-    gap: 0.8rem 1.2rem;
-    margin-bottom: 2.4rem;
-
-    @include mixins.mobile {
-      flex-wrap: wrap;
-      justify-content: flex-end;
-    }
-
-    .title {
-      flex: none;
-      margin-right: auto;
-      font-size: 2rem;
-      font-weight: 700;
-      color: var(--color-secondary-900);
-    }
-  }
+.header {
+  display: flex;
+  align-items: center;
+  gap: 0.8rem 1.2rem;
+  margin-bottom: 2.4rem;
 
-  .footer {
-    display: flex;
+  @include mixins.mobile {
+    flex-wrap: wrap;
     justify-content: flex-end;
   }
 }
+
+.title {
+  flex: none;
+  margin-right: auto;
+  font-size: 2rem;
+  font-weight: 700;
+  color: var(--color-secondary-900);
+}
+
+.footer {
+  display: flex;
+  justify-content: flex-end;
+}

From 03dccf466cb2ea052ccc44ced8faded80a20423d Mon Sep 17 00:00:00 2001
From: "chanki.kim" <chanki.kim89@gmail.com>
Date: Sat, 28 Dec 2024 11:19:13 +0900
Subject: [PATCH 03/72] =?UTF-8?q?Refactor(mentor):=20=EB=8C=93=EA=B8=80=20?=
 =?UTF-8?q?=EC=A3=BC=EC=9D=B8=EB=A7=8C=20more=20menu=EA=B0=80=20=EB=B3=B4?=
 =?UTF-8?q?=EC=9D=B4=EB=8F=84=EB=A1=9D=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Comment/Comment.jsx   | 16 +++++++++-------
 src/components/Comment/useComment.js |  2 +-
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/components/Comment/Comment.jsx b/src/components/Comment/Comment.jsx
index c83f8414b..b55e67b5a 100644
--- a/src/components/Comment/Comment.jsx
+++ b/src/components/Comment/Comment.jsx
@@ -16,7 +16,7 @@ export function Comment({ name, comment }) {
     updatedAt,
     writer: { nickname, image, id: writerId },
   } = comment;
-  const { handleUpdate, handleDelete } = useComment(name, comment);
+  const { isOwner, handleUpdate, handleDelete } = useComment(name, comment);
 
   function handleModify() {
     if (user?.id !== writerId) {
@@ -53,12 +53,14 @@ export function Comment({ name, comment }) {
             <Author avatar={image} nickname={nickname} updatedAt={updatedAt} />
           </div>
         </div>
-        <More
-          options={[
-            { label: "수정하기", action: handleModify },
-            { label: "삭제하기", action: handleDelete },
-          ]}
-        />
+        {isOwner && (
+          <More
+            options={[
+              { label: "수정하기", action: handleModify },
+              { label: "삭제하기", action: handleDelete },
+            ]}
+          />
+        )}
       </div>
     </li>
   );
diff --git a/src/components/Comment/useComment.js b/src/components/Comment/useComment.js
index aa3ef1d88..c34ed5766 100644
--- a/src/components/Comment/useComment.js
+++ b/src/components/Comment/useComment.js
@@ -45,5 +45,5 @@ export default function useComment(name, comment = {}) {
     }
   }
 
-  return { handleSubmit, handleUpdate, handleDelete };
+  return { isOwner, handleSubmit, handleUpdate, handleDelete };
 }

From e8ade7429d0714ebed0669f516e011cd35cd6d9f Mon Sep 17 00:00:00 2001
From: "chanki.kim" <chanki.kim89@gmail.com>
Date: Sat, 28 Dec 2024 11:20:36 +0900
Subject: [PATCH 04/72] =?UTF-8?q?Refactor:=20=EB=B3=80=EC=88=98=EB=AA=85?=
 =?UTF-8?q?=20=EC=98=A4=ED=83=80=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/items/AllItemsPage.jsx              | 4 ++--
 src/pages/items/components/useRecentSearch.js | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/pages/items/AllItemsPage.jsx b/src/pages/items/AllItemsPage.jsx
index 8bebdbb90..c3bf35693 100644
--- a/src/pages/items/AllItemsPage.jsx
+++ b/src/pages/items/AllItemsPage.jsx
@@ -44,7 +44,7 @@ export default function AllItemsPage() {
 
   const {
     searchInput,
-    recentSearh,
+    recentSearch,
     handleSearchSubmit,
     handleSearchChange,
     handleSearchClear,
@@ -73,7 +73,7 @@ export default function AllItemsPage() {
             <Recent
               title="최근검색"
               storageKey="keyword"
-              data={recentSearh}
+              data={recentSearch}
               onItemClick={handleRecentSearchClick}
               onItemClear={handleRecentSearchClear}
               onItemRemove={handleRecentSearchRemove}
diff --git a/src/pages/items/components/useRecentSearch.js b/src/pages/items/components/useRecentSearch.js
index 85c8dd5ae..2ee590028 100644
--- a/src/pages/items/components/useRecentSearch.js
+++ b/src/pages/items/components/useRecentSearch.js
@@ -5,7 +5,7 @@ const RECENT_SEARCH_SIZE = 5;
 
 export default function useRecentSearch({ initialKeyword, onChange }) {
   const [searchInput, setSearchInput] = useState(initialKeyword || "");
-  const [recentSearh, setRecentSearch] = useLocalStorage("keyword", []);
+  const [recentSearch, setRecentSearch] = useLocalStorage("keyword", []);
 
   // 검색창 핸들러 (submit, change, clear)
   function handleSearchSubmit() {
@@ -53,7 +53,7 @@ export default function useRecentSearch({ initialKeyword, onChange }) {
 
   return {
     searchInput,
-    recentSearh,
+    recentSearch,
     handleSearchSubmit,
     handleSearchChange,
     handleSearchClear,

From 6f5c0f63e16bdcec75fda3f3cc563d9eff652fe7 Mon Sep 17 00:00:00 2001
From: "chanki.kim" <chanki.kim89@gmail.com>
Date: Sat, 28 Dec 2024 11:21:51 +0900
Subject: [PATCH 05/72] =?UTF-8?q?Refactor:=20=ED=8C=8C=EC=9D=BC=EB=AA=85?=
 =?UTF-8?q?=20=EC=98=A4=ED=83=80=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/items/AllItemsPage.jsx                                | 2 +-
 .../items/components/{ProdcutFilter.jsx => ProductFilter.jsx}   | 0
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename src/pages/items/components/{ProdcutFilter.jsx => ProductFilter.jsx} (100%)

diff --git a/src/pages/items/AllItemsPage.jsx b/src/pages/items/AllItemsPage.jsx
index c3bf35693..a0dd13c1b 100644
--- a/src/pages/items/AllItemsPage.jsx
+++ b/src/pages/items/AllItemsPage.jsx
@@ -7,7 +7,7 @@ import { Search, Recent } from "@components/Search";
 import { Section } from "@components/Section";
 import { Pagination } from "@components/Pagination/";
 import ProductList from "./components/ProductList";
-import ProductFilter from "./components/ProdcutFilter";
+import ProductFilter from "./components/ProductFilter";
 import useRecentSearch from "./components/useRecentSearch";
 
 export default function AllItemsPage() {
diff --git a/src/pages/items/components/ProdcutFilter.jsx b/src/pages/items/components/ProductFilter.jsx
similarity index 100%
rename from src/pages/items/components/ProdcutFilter.jsx
rename to src/pages/items/components/ProductFilter.jsx

From c0ab760e08a0e5486804df1f56fe0e89a8528dd2 Mon Sep 17 00:00:00 2001
From: "chanki.kim" <chanki.kim89@gmail.com>
Date: Sat, 28 Dec 2024 11:24:12 +0900
Subject: [PATCH 06/72] =?UTF-8?q?Refactor:=20=EB=B3=80=EC=88=98=EB=AA=85?=
 =?UTF-8?q?=20=EC=98=A4=ED=83=80=20=EC=88=98=EC=A0=95=20(=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=EB=84=A4=EC=9D=B4=EC=85=98)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Pagination/Pagination.jsx | 12 ++++++------
 src/hooks/usePagination.js               |  8 ++++----
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/components/Pagination/Pagination.jsx b/src/components/Pagination/Pagination.jsx
index 7d2976adf..956cb9bf9 100644
--- a/src/components/Pagination/Pagination.jsx
+++ b/src/components/Pagination/Pagination.jsx
@@ -10,8 +10,8 @@ export function Pagination({
   pageNumbers,
   isPrevDisabled,
   isNextDisabled,
-  isPrevGroupDisabeld,
-  isNextGroupDisabeld,
+  isPrevGroupDisabled,
+  isNextGroupDisabled,
   onPrevClick,
   onNextClick,
   onPageClick,
@@ -26,8 +26,8 @@ export function Pagination({
         <button
           type="button"
           className={styles.item}
-          onClick={!isPrevGroupDisabeld ? onPrevGroupClick : undefined}
-          disabled={isPrevGroupDisabeld}
+          onClick={!isPrevGroupDisabled ? onPrevGroupClick : undefined}
+          disabled={isPrevGroupDisabled}
         >
           <img src={doubleArrowLeft} alt="이전 그룹" />
         </button>
@@ -68,8 +68,8 @@ export function Pagination({
         <button
           type="button"
           className={styles.item}
-          onClick={!isNextGroupDisabeld ? onNextGroupClick : undefined}
-          disabled={isNextGroupDisabeld}
+          onClick={!isNextGroupDisabled ? onNextGroupClick : undefined}
+          disabled={isNextGroupDisabled}
         >
           <img src={doubleArrowRight} alt="다음 그룹" />
         </button>
diff --git a/src/hooks/usePagination.js b/src/hooks/usePagination.js
index 82d91e1c3..f038cdb11 100644
--- a/src/hooks/usePagination.js
+++ b/src/hooks/usePagination.js
@@ -20,8 +20,8 @@ export default function usePagination({
   const isPrevDisabled = page === 1;
   const isNextDisabled = totalPage === page;
 
-  const isPrevGroupDisabeld = currentGroup === 1;
-  const isNextGroupDisabeld = lastPageInGroup === totalPage;
+  const isPrevGroupDisabled = currentGroup === 1;
+  const isNextGroupDisabled = lastPageInGroup === totalPage;
 
   function handleNextClick() {
     onChange(page + 1);
@@ -55,8 +55,8 @@ export default function usePagination({
     pageNumbers,
     isPrevDisabled,
     isNextDisabled,
-    isPrevGroupDisabeld,
-    isNextGroupDisabeld,
+    isPrevGroupDisabled,
+    isNextGroupDisabled,
     onPrevClick: handlePrevClick,
     onNextClick: handleNextClick,
     onPageClick: handlePageClick,

From c5997ecce76004d4002811960973a3e3a367fe3a Mon Sep 17 00:00:00 2001
From: "chanki.kim" <chanki.kim89@gmail.com>
Date: Sat, 28 Dec 2024 11:25:01 +0900
Subject: [PATCH 07/72] =?UTF-8?q?Refactor:=20=EB=B3=80=EC=88=98=EB=AA=85?=
 =?UTF-8?q?=20=EC=98=A4=ED=83=80=20=EC=88=98=EC=A0=95=20(=ED=8C=8C?=
 =?UTF-8?q?=EC=9D=BC=EC=97=85=EB=A1=9C=EB=93=9C)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Field/ImageUpload.jsx | 2 +-
 src/hooks/useSingleFile.js           | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Field/ImageUpload.jsx b/src/components/Field/ImageUpload.jsx
index 3a3e0c219..8c1468b0f 100644
--- a/src/components/Field/ImageUpload.jsx
+++ b/src/components/Field/ImageUpload.jsx
@@ -18,7 +18,7 @@ export function ImageUpload({
     name,
     value,
     accept: "image/*",
-    limiSize: LIMIT_SIZE_MB,
+    limitSize: LIMIT_SIZE_MB,
     onChange: (file) => onChange(name, file),
     errorMessage: {
       max: "이미지 등록은 최대 1개까지 가능합니다.",
diff --git a/src/hooks/useSingleFile.js b/src/hooks/useSingleFile.js
index 31966e5b0..ac60d4c83 100644
--- a/src/hooks/useSingleFile.js
+++ b/src/hooks/useSingleFile.js
@@ -4,7 +4,7 @@ export default function useSingleFile({
   value,
   onChange,
   accept = "",
-  limiSize = 5,
+  limitSize = 5,
   errorMessage = {},
 }) {
   const [preview, setPreview] = useState(null);
@@ -13,7 +13,7 @@ export default function useSingleFile({
 
   const defaultMessage = {
     max: "등록은 최대 1개까지 가능합니다.",
-    size: `${limiSize}MB 이하로 올려주세요`,
+    size: `${limitSize}MB 이하로 올려주세요`,
     accept: "지원하지 않는 형식입니다.",
   };
 
@@ -50,7 +50,7 @@ export default function useSingleFile({
     if (!file.type.match(accept)) {
       return setError(message.accept);
     }
-    if (file.size > limiSize * 1024 * 1024) {
+    if (file.size > limitSize * 1024 * 1024) {
       return setError(message.size);
     }
 

From 20e97445816b8dddfb1173f3713ad083ef93cba6 Mon Sep 17 00:00:00 2001
From: "chanki.kim" <chanki.kim89@gmail.com>
Date: Sat, 28 Dec 2024 11:27:13 +0900
Subject: [PATCH 08/72] =?UTF-8?q?Refactor(mentor):=20loader=20=EB=B9=84?=
 =?UTF-8?q?=EB=8F=99=EA=B8=B0=ED=95=A8=EC=88=98=20=EC=88=9C=EC=84=9C=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/items/ItemDetailPage.loader.js | 17 ++---------------
 1 file changed, 2 insertions(+), 15 deletions(-)

diff --git a/src/pages/items/ItemDetailPage.loader.js b/src/pages/items/ItemDetailPage.loader.js
index 22a0c6d08..9b67d8ba9 100644
--- a/src/pages/items/ItemDetailPage.loader.js
+++ b/src/pages/items/ItemDetailPage.loader.js
@@ -4,21 +4,8 @@ import { getComments } from "@service/comments";
 export default async function loader({ params }) {
   const { id } = params;
 
-  // 1. 첫번째 시도 : Promise.all
-  // 두 요청이 병렬로 시작은 가능하나, 두 요청이 모두 끝나야 반환하므로, 원하는 케이스가 아님
-
-  // 2. 두번째 시도 : 하나만 await
-  // getProduct를 먼저 await하고 getProdcutComments는 promise상태로 담아서 보내기
-  // getProduct의 await 때문에 코멘트 데이터 요청이 동시에 이뤄지지가 않음 (서비스 호출함수에서 임의로 시간지연으로 테스트해봄)
-  //const detail = await getProduct(id);
-  //const comments = getProductComments({ productId: id, limit: 5 });
-
-  // 3. 해결한 방법
-  // 두 요청을 거의 동시에 보내도록 우선 await없이 promise를 각 변수에 할당함
-  // 여기서 미리 await을 작성하면 그 요청을 기다린후 다음줄의 코드가 실행되어서 동시에 요청이 안됨
-  const detail = getProduct(id);
   const comments = getComments("products", { productId: id, limit: 5 });
+  const detail = await getProduct(id);
 
-  // detail에 담긴 promise를 기다린후에 리턴
-  return { detail: await detail, comments };
+  return { detail, comments };
 }

From ad77a33c1cbf330763666e8bc7c2e8f231adfe9c Mon Sep 17 00:00:00 2001
From: "chanki.kim" <chanki.kim89@gmail.com>
Date: Sat, 28 Dec 2024 11:34:12 +0900
Subject: [PATCH 09/72] =?UTF-8?q?Refactor(mentor):=20Modal=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ui/Fullscreen.jsx | 12 ++++++------
 src/components/ui/Modal.jsx      |  5 +++++
 src/components/ui/index.js       |  1 +
 3 files changed, 12 insertions(+), 6 deletions(-)
 create mode 100644 src/components/ui/Modal.jsx

diff --git a/src/components/ui/Fullscreen.jsx b/src/components/ui/Fullscreen.jsx
index 4690e2584..92b6e2a44 100644
--- a/src/components/ui/Fullscreen.jsx
+++ b/src/components/ui/Fullscreen.jsx
@@ -1,5 +1,5 @@
 import { cloneElement, useState } from "react";
-import { createPortal } from "react-dom";
+import { Modal } from "@components/ui";
 import styles from "./Fullscreen.module.scss";
 
 export function Fullscreen({ children }) {
@@ -16,11 +16,11 @@ export function Fullscreen({ children }) {
   return (
     <>
       {cloneElement(children, { onOpenScreen: handleOpenScreen })}
-      {imgSrc &&
-        createPortal(
-          <ImgViewer src={imgSrc} onCloseScreen={handleCloseScreen} />,
-          document.querySelector("#root")
-        )}
+      {imgSrc && (
+        <Modal>
+          <ImgViewer src={imgSrc} onCloseScreen={handleCloseScreen} />
+        </Modal>
+      )}
     </>
   );
 }
diff --git a/src/components/ui/Modal.jsx b/src/components/ui/Modal.jsx
new file mode 100644
index 000000000..ba9d4a2f0
--- /dev/null
+++ b/src/components/ui/Modal.jsx
@@ -0,0 +1,5 @@
+import { createPortal } from "react-dom";
+
+export function Modal({ children }) {
+  return createPortal(children, document.querySelector("#root"));
+}
diff --git a/src/components/ui/index.js b/src/components/ui/index.js
index 69dc6d4e4..58a84cf70 100644
--- a/src/components/ui/index.js
+++ b/src/components/ui/index.js
@@ -12,3 +12,4 @@ export * from "./Author";
 export * from "./LikeButton";
 export * from "./Message";
 export * from "./Fullscreen";
+export * from "./Modal";

From e4170e3b2a107941577a9b98098d6d99b4881075 Mon Sep 17 00:00:00 2001
From: "chanki.kim" <chanki.kim89@gmail.com>
Date: Sat, 28 Dec 2024 14:33:21 +0900
Subject: [PATCH 10/72] =?UTF-8?q?Chore:=20Typescript=20=EC=85=8B=ED=8C=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 jsconfig.json                    | 14 --------
 package-lock.json                | 62 ++++++++++++++++++++++++++++++++
 package.json                     |  4 +++
 src/vite-env.d.ts                |  1 +
 tsconfig.app.json                | 38 ++++++++++++++++++++
 tsconfig.json                    |  7 ++++
 tsconfig.node.json               | 36 +++++++++++++++++++
 vite.config.js => vite.config.ts |  0
 8 files changed, 148 insertions(+), 14 deletions(-)
 delete mode 100644 jsconfig.json
 create mode 100644 src/vite-env.d.ts
 create mode 100644 tsconfig.app.json
 create mode 100644 tsconfig.json
 create mode 100644 tsconfig.node.json
 rename vite.config.js => vite.config.ts (100%)

diff --git a/jsconfig.json b/jsconfig.json
deleted file mode 100644
index 677adb23c..000000000
--- a/jsconfig.json
+++ /dev/null
@@ -1,14 +0,0 @@
-{
-  "compilerOptions": {
-    "baseUrl": ".",
-    "paths": {
-      "@components/*": ["src/components/*"],
-      "@hooks/*": ["src/hooks/*"],
-      "@context/*": ["src/context/*"],
-      "@service/*": ["src/service/*"],
-      "@util/*": ["src/util/*"],
-      "@assets/*": ["src/assets/*"]
-    }
-  },
-  "include": ["src"]
-}
diff --git a/package-lock.json b/package-lock.json
index b896223fb..edf920f51 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,8 +18,12 @@
         "react-router-dom": "^6.28.0"
       },
       "devDependencies": {
+        "@types/node": "^22.10.2",
+        "@types/react": "^19.0.2",
+        "@types/react-dom": "^19.0.2",
         "@vitejs/plugin-react": "^4.3.3",
         "sass": "^1.81.0",
+        "typescript": "^5.7.2",
         "vite": "^5.4.11"
       }
     },
@@ -1376,6 +1380,36 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/node": {
+      "version": "22.10.2",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.10.2.tgz",
+      "integrity": "sha512-Xxr6BBRCAOQixvonOye19wnzyDiUtTeqldOOmj3CkeblonbccA12PFwlufvRdrpjXxqnmUaeiU5EOA+7s5diUQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~6.20.0"
+      }
+    },
+    "node_modules/@types/react": {
+      "version": "19.0.2",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.0.2.tgz",
+      "integrity": "sha512-USU8ZI/xyKJwFTpjSVIrSeHBVAGagkHQKPNbxeWwql/vDmnTIBgx+TJnhFnj1NXgz8XfprU0egV2dROLGpsBEg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@types/react-dom": {
+      "version": "19.0.2",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.0.2.tgz",
+      "integrity": "sha512-c1s+7TKFaDRRxr1TxccIX2u7sfCnc3RxkVyBIUA2lCpyqCF+QoAwQ/CBg7bsMdVwP120HEH143VQezKtef5nCg==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "^19.0.0"
+      }
+    },
     "node_modules/@vitejs/plugin-react": {
       "version": "4.3.3",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.3.3.tgz",
@@ -1525,6 +1559,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/csstype": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/dayjs": {
       "version": "1.11.13",
       "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz",
@@ -2139,6 +2180,27 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/typescript": {
+      "version": "5.7.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.7.2.tgz",
+      "integrity": "sha512-i5t66RHxDvVN40HfDd1PsEThGNnlMCMT3jMUuoh9/0TaqWevNontacunWyN02LA9/fIbEWlcHZcgTKb9QoaLfg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/undici-types": {
+      "version": "6.20.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.20.0.tgz",
+      "integrity": "sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.1.tgz",
diff --git a/package.json b/package.json
index d3161d571..2faee63a1 100644
--- a/package.json
+++ b/package.json
@@ -30,8 +30,12 @@
     ]
   },
   "devDependencies": {
+    "@types/node": "^22.10.2",
+    "@types/react": "^19.0.2",
+    "@types/react-dom": "^19.0.2",
     "@vitejs/plugin-react": "^4.3.3",
     "sass": "^1.81.0",
+    "typescript": "^5.7.2",
     "vite": "^5.4.11"
   }
 }
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
new file mode 100644
index 000000000..11f02fe2a
--- /dev/null
+++ b/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/tsconfig.app.json b/tsconfig.app.json
new file mode 100644
index 000000000..60bc3f6f5
--- /dev/null
+++ b/tsconfig.app.json
@@ -0,0 +1,38 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "allowJs": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+
+    /* alias */
+    "baseUrl": ".",
+    "paths": {
+      "@components/*": ["src/components/*"],
+      "@hooks/*": ["src/hooks/*"],
+      "@context/*": ["src/context/*"],
+      "@service/*": ["src/service/*"],
+      "@util/*": ["src/util/*"],
+      "@assets/*": ["src/assets/*"]
+    }
+  },
+  "include": ["src"]
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 000000000..1ffef600d
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
diff --git a/tsconfig.node.json b/tsconfig.node.json
new file mode 100644
index 000000000..087b5b208
--- /dev/null
+++ b/tsconfig.node.json
@@ -0,0 +1,36 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "allowJs": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+
+    /* alias */
+    "baseUrl": ".",
+    "paths": {
+      "@components/*": ["src/components/*"],
+      "@hooks/*": ["src/hooks/*"],
+      "@context/*": ["src/context/*"],
+      "@service/*": ["src/service/*"],
+      "@util/*": ["src/util/*"],
+      "@assets/*": ["src/assets/*"]
+    }
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/vite.config.js b/vite.config.ts
similarity index 100%
rename from vite.config.js
rename to vite.config.ts

From 95e0567441e260a04fe1bd46ff8f6ff0701da45d Mon Sep 17 00:00:00 2001
From: "chanki.kim" <chanki.kim89@gmail.com>
Date: Sat, 28 Dec 2024 14:38:33 +0900
Subject: [PATCH 11/72] =?UTF-8?q?Chore:=20=ED=94=84=EB=A1=9C=EC=A0=9D?=
 =?UTF-8?q?=ED=8A=B8=20=EC=A7=84=EC=9E=85=EB=B6=80=20=ED=8C=8C=EC=9D=BC=20?=
 =?UTF-8?q?tsx=EB=A1=9C=20=EB=B3=80=ED=99=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html                     | 2 +-
 src/{App.jsx => App.tsx}       | 0
 src/{index.jsx => index.tsx}   | 2 +-
 src/{router.jsx => router.tsx} | 0
 4 files changed, 2 insertions(+), 2 deletions(-)
 rename src/{App.jsx => App.tsx} (100%)
 rename src/{index.jsx => index.tsx} (98%)
 rename src/{router.jsx => router.tsx} (100%)

diff --git a/index.html b/index.html
index 8aaedbfc0..8906f8012 100644
--- a/index.html
+++ b/index.html
@@ -19,6 +19,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/src/index.jsx"></script>
+    <script type="module" src="/src/index.tsx"></script>
   </body>
 </html>
diff --git a/src/App.jsx b/src/App.tsx
similarity index 100%
rename from src/App.jsx
rename to src/App.tsx
diff --git a/src/index.jsx b/src/index.tsx
similarity index 98%
rename from src/index.jsx
rename to src/index.tsx
index 4b9b58144..c35d25c0c 100644
--- a/src/index.jsx
+++ b/src/index.tsx
@@ -3,7 +3,7 @@ import ReactDOM from "react-dom/client";
 import "./assets/scss/style.scss";
 import App from "./App";
 
-const root = ReactDOM.createRoot(document.getElementById("root"));
+const root = ReactDOM.createRoot(document.getElementById("root")!);
 root.render(
   <React.StrictMode>
     <App />
diff --git a/src/router.jsx b/src/router.tsx
similarity index 100%
rename from src/router.jsx
rename to src/router.tsx

From c2b20a24feb10caa8cc19b12bc282f5e5390d9e4 Mon Sep 17 00:00:00 2001
From: "chanki.kim" <chanki.kim89@gmail.com>
Date: Sat, 28 Dec 2024 15:02:57 +0900
Subject: [PATCH 12/72] =?UTF-8?q?Chore:=20type=20=ED=8F=B4=EB=8D=94=20alia?=
 =?UTF-8?q?s=20=EC=84=A4=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 tsconfig.app.json  | 3 ++-
 tsconfig.node.json | 3 ++-
 vite.config.ts     | 1 +
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/tsconfig.app.json b/tsconfig.app.json
index 60bc3f6f5..b26c6f21f 100644
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -31,7 +31,8 @@
       "@context/*": ["src/context/*"],
       "@service/*": ["src/service/*"],
       "@util/*": ["src/util/*"],
-      "@assets/*": ["src/assets/*"]
+      "@assets/*": ["src/assets/*"],
+      "@type/*": ["src/types/*"]
     }
   },
   "include": ["src"]
diff --git a/tsconfig.node.json b/tsconfig.node.json
index 087b5b208..ecd5c2549 100644
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@@ -29,7 +29,8 @@
       "@context/*": ["src/context/*"],
       "@service/*": ["src/service/*"],
       "@util/*": ["src/util/*"],
-      "@assets/*": ["src/assets/*"]
+      "@assets/*": ["src/assets/*"],
+      "@type/*": ["src/types/*"]
     }
   },
   "include": ["vite.config.ts"]
diff --git a/vite.config.ts b/vite.config.ts
index f763edca3..363e4f3d3 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -15,6 +15,7 @@ export default defineConfig({
       { find: "@service", replacement: path.resolve(__dirname, "src/service") },
       { find: "@util", replacement: path.resolve(__dirname, "src/util") },
       { find: "@assets", replacement: path.resolve(__dirname, "src/assets") },
+      { find: "@type", replacement: path.resolve(__dirname, "src/types") },
     ],
   },
   css: {

From 8f6d65b234f32a38071d004351320b90e5174fda Mon Sep 17 00:00:00 2001
From: "chanki.kim" <chanki.kim89@gmail.com>
Date: Sat, 28 Dec 2024 15:03:17 +0900
Subject: [PATCH 13/72] =?UTF-8?q?Chore:=20AuthContext=20ts=20=EC=9E=91?=
 =?UTF-8?q?=EC=97=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../{AuthContext.jsx => AuthContext.tsx}      | 35 +++++++++++++------
 src/types/auth.ts                             | 15 ++++++++
 2 files changed, 40 insertions(+), 10 deletions(-)
 rename src/context/{AuthContext.jsx => AuthContext.tsx} (82%)
 create mode 100644 src/types/auth.ts

diff --git a/src/context/AuthContext.jsx b/src/context/AuthContext.tsx
similarity index 82%
rename from src/context/AuthContext.jsx
rename to src/context/AuthContext.tsx
index 7cc94324c..a4f1fe3ca 100644
--- a/src/context/AuthContext.jsx
+++ b/src/context/AuthContext.tsx
@@ -1,11 +1,28 @@
-import { createContext, useContext, useEffect, useRef, useState } from "react";
+import {
+  createContext,
+  ReactNode,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
 import { getUser, login, refreshAccessToken, signUp } from "@service/auth";
 import { isTokenValid } from "@util/helper";
 import { axiosInstance } from "@service/axios";
+import { SigninFormData, SignupFormData, User } from "@type/auth";
 
-const AuthContext = createContext();
+type AuthContextProps = {
+  auth: {
+    accessToken: string | null;
+    refreshToken: string | null;
+    user: User | null;
+  };
+  handleLogin: (formData: SigninFormData) => void;
+  handleLogout: () => void;
+  handleSignup: (formData: SignupFormData) => void;
+};
+const AuthContext = createContext<AuthContextProps | null>(null);
 
-export function AuthProvider({ children }) {
+export function AuthProvider({ children }: { children: ReactNode }) {
   const [auth, setAuth] = useState(() => ({
     accessToken: localStorage.getItem("accessToken") || null,
     refreshToken: localStorage.getItem("refreshToken") || null,
@@ -18,7 +35,7 @@ export function AuthProvider({ children }) {
 
     const authInterceptor = axiosInstance.interceptors.request.use(
       async function (config) {
-        if (!config._retry && auth.accessToken) {
+        if (auth.accessToken) {
           config.headers.Authorization = `Bearer ${auth.accessToken}`;
         }
 
@@ -74,10 +91,8 @@ export function AuthProvider({ children }) {
         const user = await getUser();
         setAuth((prev) => ({ ...prev, user }));
       } catch (err) {
-        if (err.name !== "CanceledError") {
-          console.error(err);
-          clear();
-        }
+        console.error(err);
+        clear();
       }
     })();
   }, [auth.accessToken]);
@@ -95,7 +110,7 @@ export function AuthProvider({ children }) {
     }
   }
 
-  async function handleLogin({ email, password }) {
+  async function handleLogin({ email, password }: SigninFormData) {
     try {
       const { user, accessToken, refreshToken } = await login({
         email,
@@ -114,7 +129,7 @@ export function AuthProvider({ children }) {
     }
   }
 
-  async function handleSignup(formData) {
+  async function handleSignup(formData: SignupFormData) {
     return signUp(formData);
   }
 
diff --git a/src/types/auth.ts b/src/types/auth.ts
new file mode 100644
index 000000000..a45e26020
--- /dev/null
+++ b/src/types/auth.ts
@@ -0,0 +1,15 @@
+export type SigninFormData = {
+  email: string;
+  password: string;
+};
+
+export type SignupFormData = SigninFormData & {
+  nickname: string;
+  passwordConfirmation: string;
+};
+
+export type User = {
+  image: string;
+  nickname: string;
+  id: number;
+};

From 454c74cac11e000fbef613bdb4a9bd0760b188d8 Mon Sep 17 00:00:00 2001
From: "chanki.kim" <chanki.kim89@gmail.com>
Date: Sat, 28 Dec 2024 16:06:21 +0900
Subject: [PATCH 14/72] =?UTF-8?q?Chore:=20hooks=20=ED=8F=B4=EB=8D=94?=
 =?UTF-8?q?=EB=82=B4=20=ED=8C=8C=EC=9D=BC=EB=93=A4=20ts=20=EC=9E=91?=
 =?UTF-8?q?=EC=97=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/{useAsync.js => useAsync.ts}        | 10 +--
 src/hooks/{useForm.js => useForm.ts}          | 83 +++++++++++++++----
 ...{useLocalStorage.js => useLocalStorage.ts} |  4 +-
 .../{usePagination.js => usePagination.ts}    | 16 +++-
 .../{useResponsive.js => useResponsive.ts}    |  0
 .../{useSingleFile.js => useSingleFile.ts}    | 30 +++++--
 6 files changed, 109 insertions(+), 34 deletions(-)
 rename src/hooks/{useAsync.js => useAsync.ts} (55%)
 rename src/hooks/{useForm.js => useForm.ts} (73%)
 rename src/hooks/{useLocalStorage.js => useLocalStorage.ts} (84%)
 rename src/hooks/{usePagination.js => usePagination.ts} (83%)
 rename src/hooks/{useResponsive.js => useResponsive.ts} (100%)
 rename src/hooks/{useSingleFile.js => useSingleFile.ts} (69%)

diff --git a/src/hooks/useAsync.js b/src/hooks/useAsync.ts
similarity index 55%
rename from src/hooks/useAsync.js
rename to src/hooks/useAsync.ts
index 39bc51cc6..cce9ae419 100644
--- a/src/hooks/useAsync.js
+++ b/src/hooks/useAsync.ts
@@ -1,11 +1,11 @@
 import { useState } from "react";
 
-export default function useAsync(asyncFn) {
-  const [result, setResult] = useState(null);
+export default function useAsync<T>(asyncFn: () => Promise<T>) {
+  const [result, setResult] = useState<T | null>(null);
   const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState(null);
+  const [error, setError] = useState<Error | null>(null);
 
-  async function wrappedFn(...args) {
+  async function wrappedFn(...args: Parameters<typeof asyncFn>) {
     try {
       setError(null);
       setIsLoading(true);
@@ -13,7 +13,7 @@ export default function useAsync(asyncFn) {
       setResult(res);
       return res;
     } catch (err) {
-      if (err.name !== "CanceledError") {
+      if (err instanceof Error && err.name !== "CanceledError") {
         setError(err);
       }
     } finally {
diff --git a/src/hooks/useForm.js b/src/hooks/useForm.ts
similarity index 73%
rename from src/hooks/useForm.js
rename to src/hooks/useForm.ts
index 824c6688d..3fc36706a 100644
--- a/src/hooks/useForm.js
+++ b/src/hooks/useForm.ts
@@ -1,10 +1,49 @@
-import { useState } from "react";
+import { ChangeEvent, useState } from "react";
 
-export default function useForm(formSchema, defaultValues = {}) {
+type FormValue = string | number | File | File[] | undefined;
+
+type FormSchema = {
+  [key: string]: {
+    value: FormValue;
+    rule: Rule;
+  };
+};
+
+type Rule = {
+  required?: boolean | string;
+  patterns?: {
+    regex: RegExp;
+    message: string;
+  }[];
+  custom?: {
+    validate: (value: FormValue) => boolean;
+    message: string;
+  };
+  match?: {
+    field: keyof FormSchema;
+    message: string;
+  };
+};
+
+type DefaultValues = {
+  [key: keyof FormSchema]: FormValue;
+};
+
+type FormState = {
+  [name: keyof FormSchema]: {
+    value: FormValue;
+    error: string | null;
+  };
+};
+
+export default function useForm(
+  formSchema: FormSchema,
+  defaultValues: DefaultValues = {}
+) {
   //rule은 따로 보관하기
   const rules = Object.fromEntries(
     Object.entries(formSchema)
-      .filter(([key, value]) => value.rule)
+      .filter(([_, value]) => value.rule)
       .map(([key, value]) => [key, value.rule])
   );
 
@@ -16,14 +55,17 @@ export default function useForm(formSchema, defaultValues = {}) {
     ])
   );
 
-  const [formState, setFormState] = useState(initialState);
+  const [formState, setFormState] = useState<FormState>(initialState);
   const [isLoading, setIsLoading] = useState(false);
-  const [formError, setFormError] = useState(null);
+  const [formError, setFormError] = useState<Error | null>(null);
   const isFormValid = Object.entries(formState).every(([key, item]) =>
     isValidField(rules[key], item)
   );
 
-  function isValidField(rule, item) {
+  function isValidField(
+    rule: Rule,
+    item: { value: FormValue; error: string | null }
+  ) {
     if (item.error !== null) return false;
 
     if (rule?.required) {
@@ -47,7 +89,7 @@ export default function useForm(formSchema, defaultValues = {}) {
     return true;
   }
 
-  function handleInputChange(e) {
+  function handleInputChange(e: ChangeEvent<HTMLInputElement>) {
     const { type, name, value } = e.target;
     let nextValue;
 
@@ -60,12 +102,12 @@ export default function useForm(formSchema, defaultValues = {}) {
     handleChange(name, nextValue);
   }
 
-  function trigger(name) {
+  function trigger(name: keyof FormSchema) {
     const value = formState[name].value;
     handleChange(name, value);
   }
 
-  function handleChange(name, value) {
+  function handleChange(name: keyof FormSchema, value: FormValue) {
     const { isValid, message } = validate(name, value);
 
     setFormState((prev) => ({
@@ -78,7 +120,7 @@ export default function useForm(formSchema, defaultValues = {}) {
     }));
   }
 
-  function validate(name, value) {
+  function validate(name: keyof FormSchema, value: FormValue) {
     const rule = rules[name];
 
     if (!rule) {
@@ -104,7 +146,10 @@ export default function useForm(formSchema, defaultValues = {}) {
 
     if (rule.patterns) {
       for (const pattern of rule.patterns) {
-        if (Array.isArray(value)) {
+        if (
+          Array.isArray(value) &&
+          value.every((item) => typeof item === "string")
+        ) {
           const isArrayValid = value.every((item) => pattern.regex.test(item));
           if (!isArrayValid) {
             return {
@@ -114,7 +159,7 @@ export default function useForm(formSchema, defaultValues = {}) {
             };
           }
         } else {
-          if (!pattern.regex.test(value)) {
+          if (typeof value === "string" && !pattern.regex.test(value)) {
             return {
               isValid: false,
               message: pattern.message || "유효하지 않은 형식입니다.",
@@ -159,10 +204,14 @@ export default function useForm(formSchema, defaultValues = {}) {
     return { isValid: true, message: null };
   }
 
-  function handleSubmit(submitFn) {
+  function handleSubmit<T>(
+    submitFn: (submitData: {
+      [name: keyof FormSchema]: FormValue;
+    }) => Promise<T>
+  ) {
     //다른곳에서 submit과 관련된 비동기코드만 넣으면 되도록
     //공통적으로 사용되는 코드를 모아두기
-    return async function (e) {
+    return async function (e: SubmitEvent) {
       e.preventDefault();
 
       //전체적으로 field들을 다시한번 trigger를 호출해서 재점검
@@ -179,7 +228,9 @@ export default function useForm(formSchema, defaultValues = {}) {
       try {
         return await submitFn(getValues());
       } catch (err) {
-        setFormError(err);
+        if (err instanceof Error) {
+          setFormError(err);
+        }
       } finally {
         setIsLoading(false);
       }
@@ -192,7 +243,7 @@ export default function useForm(formSchema, defaultValues = {}) {
     );
   }
 
-  function register(name) {
+  function register(name: keyof FormSchema) {
     return {
       id: name,
       name,
diff --git a/src/hooks/useLocalStorage.js b/src/hooks/useLocalStorage.ts
similarity index 84%
rename from src/hooks/useLocalStorage.js
rename to src/hooks/useLocalStorage.ts
index e4d4aefc6..453f45a8f 100644
--- a/src/hooks/useLocalStorage.js
+++ b/src/hooks/useLocalStorage.ts
@@ -1,6 +1,6 @@
 import { useState } from "react";
 
-export default function useLocalStorage(key, initialValue) {
+export default function useLocalStorage(key: string, initialValue: string[]) {
   const [state, setState] = useState(() => {
     try {
       const value = window.localStorage.getItem(key);
@@ -11,7 +11,7 @@ export default function useLocalStorage(key, initialValue) {
     }
   });
 
-  function setValue(value) {
+  function setValue(value: string[]) {
     try {
       //useState의 setState에 callback을 넘기는 행동처럼 사용가능하도록
       const newValue = value instanceof Function ? value(state) : value;
diff --git a/src/hooks/usePagination.js b/src/hooks/usePagination.ts
similarity index 83%
rename from src/hooks/usePagination.js
rename to src/hooks/usePagination.ts
index f038cdb11..73efa7d3e 100644
--- a/src/hooks/usePagination.js
+++ b/src/hooks/usePagination.ts
@@ -1,4 +1,12 @@
-import { useEffect } from "react";
+import { MouseEvent, useEffect } from "react";
+
+interface PaginationProps {
+  page: number;
+  pageSize: number;
+  totalCount: number;
+  visibleCount: number;
+  onChange: (page: number) => void;
+}
 
 export default function usePagination({
   page,
@@ -6,7 +14,7 @@ export default function usePagination({
   totalCount,
   visibleCount = 5,
   onChange,
-}) {
+}: PaginationProps) {
   const totalPage = Math.ceil(totalCount / pageSize);
   const currentGroup = Math.ceil(page / visibleCount);
   const firstPageInGroup = (currentGroup - 1) * visibleCount + 1;
@@ -31,8 +39,8 @@ export default function usePagination({
     onChange(page - 1);
   }
 
-  function handlePageClick(e) {
-    onChange(Number(e.target.dataset.number));
+  function handlePageClick(e: MouseEvent<HTMLElement>) {
+    onChange(Number(e.currentTarget.dataset.number));
   }
 
   function handleNextGroupClick() {
diff --git a/src/hooks/useResponsive.js b/src/hooks/useResponsive.ts
similarity index 100%
rename from src/hooks/useResponsive.js
rename to src/hooks/useResponsive.ts
diff --git a/src/hooks/useSingleFile.js b/src/hooks/useSingleFile.ts
similarity index 69%
rename from src/hooks/useSingleFile.js
rename to src/hooks/useSingleFile.ts
index ac60d4c83..0c2862bd4 100644
--- a/src/hooks/useSingleFile.js
+++ b/src/hooks/useSingleFile.ts
@@ -1,4 +1,15 @@
-import { useEffect, useRef, useState } from "react";
+import { ChangeEvent, useEffect, useRef, useState } from "react";
+
+interface SingleFileProps {
+  value: File;
+  onChange: (file: File | undefined) => void;
+  accept: string;
+  limitSize: number;
+  errorMessage?: {
+    max?: string;
+    accept?: string;
+  };
+}
 
 export default function useSingleFile({
   value,
@@ -6,10 +17,10 @@ export default function useSingleFile({
   accept = "",
   limitSize = 5,
   errorMessage = {},
-}) {
-  const [preview, setPreview] = useState(null);
-  const [error, setError] = useState(null);
-  const fileRef = useRef(null);
+}: SingleFileProps) {
+  const [preview, setPreview] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const fileRef = useRef<HTMLInputElement>(null);
 
   const defaultMessage = {
     max: "등록은 최대 1개까지 가능합니다.",
@@ -39,7 +50,9 @@ export default function useSingleFile({
     }
   }, [value]);
 
-  function handleChange(e) {
+  function handleChange(e: ChangeEvent<HTMLInputElement>) {
+    if (!e.target.files) return;
+
     const file = e.target.files[0];
     setError(null);
 
@@ -54,7 +67,10 @@ export default function useSingleFile({
       return setError(message.size);
     }
 
-    fileRef.current.value = "";
+    if (fileRef.current) {
+      fileRef.current.value = "";
+    }
+
     onChange(file);
   }
 

From b9f0c415a8fffcad64fa0f745e063d544e6701df Mon Sep 17 00:00:00 2001
From: "chanki.kim" <chanki.kim89@gmail.com>
Date: Sat, 28 Dec 2024 16:21:50 +0900
Subject: [PATCH 15/72] =?UTF-8?q?Chore:=20service=20=ED=8F=B4=EB=8D=94?=
 =?UTF-8?q?=EB=82=B4=20=ED=8C=8C=EC=9D=BC=EB=93=A4=20ts=20=EC=9E=91?=
 =?UTF-8?q?=EC=97=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/service/{auth.js => auth.ts}         |  7 ++++---
 src/service/{axios.js => axios.ts}       |  0
 src/service/{comments.js => comments.ts} | 21 +++++++++++++++++----
 src/service/{product.js => product.ts}   | 15 ++++++++-------
 src/types/comment.ts                     | 14 ++++++++++++++
 src/types/product.ts                     | 20 ++++++++++++++++++++
 6 files changed, 63 insertions(+), 14 deletions(-)
 rename src/service/{auth.js => auth.ts} (75%)
 rename src/service/{axios.js => axios.ts} (100%)
 rename src/service/{comments.js => comments.ts} (57%)
 rename src/service/{product.js => product.ts} (69%)
 create mode 100644 src/types/comment.ts
 create mode 100644 src/types/product.ts

diff --git a/src/service/auth.js b/src/service/auth.ts
similarity index 75%
rename from src/service/auth.js
rename to src/service/auth.ts
index d881ca5fe..9c379529f 100644
--- a/src/service/auth.js
+++ b/src/service/auth.ts
@@ -1,6 +1,7 @@
 import { axiosInstance } from "@service/axios";
+import { SigninFormData, SignupFormData } from "@type/auth";
 
-export async function login({ email, password }) {
+export async function login({ email, password }: SigninFormData) {
   const response = await axiosInstance.post("/auth/signIn", {
     email,
     password,
@@ -14,7 +15,7 @@ export async function signUp({
   nickname,
   password,
   passwordConfirmation,
-}) {
+}: SignupFormData) {
   const response = await axiosInstance.post("/auth/signUp", {
     email,
     nickname,
@@ -31,7 +32,7 @@ export async function getUser() {
   return response.data;
 }
 
-export async function refreshAccessToken(refreshToken) {
+export async function refreshAccessToken(refreshToken: string) {
   const response = await axiosInstance.post("/auth/refresh-token", {
     refreshToken,
   });
diff --git a/src/service/axios.js b/src/service/axios.ts
similarity index 100%
rename from src/service/axios.js
rename to src/service/axios.ts
diff --git a/src/service/comments.js b/src/service/comments.ts
similarity index 57%
rename from src/service/comments.js
rename to src/service/comments.ts
index faaad1a4b..75d3807c2 100644
--- a/src/service/comments.js
+++ b/src/service/comments.ts
@@ -1,6 +1,15 @@
 import { axiosInstance } from "@service/axios";
 
-export async function getComments(name, { productId, limit = 5, cursor }) {
+type BoardName = "articles" | "products";
+
+export async function getComments(
+  name: BoardName,
+  {
+    productId,
+    limit = 5,
+    cursor,
+  }: { productId: number; limit: number; cursor: number }
+) {
   const query = `limit=${limit}${cursor ? `&cursor=${cursor}` : ""}`;
   const response = await axiosInstance.get(
     `/${name}/${productId}/comments?${query}`
@@ -9,7 +18,11 @@ export async function getComments(name, { productId, limit = 5, cursor }) {
   return response.data;
 }
 
-export async function addComment(name, id, formData) {
+export async function addComment(
+  name: BoardName,
+  id: number,
+  formData: Comment
+) {
   const response = await axiosInstance.post(
     `/${name}/${id}/comments`,
     formData
@@ -18,13 +31,13 @@ export async function addComment(name, id, formData) {
   return response.data;
 }
 
-export async function removeComment(commentId) {
+export async function removeComment(commentId: number) {
   const response = await axiosInstance.delete(`/comments/${commentId}`);
 
   return response.data;
 }
 
-export async function updateComment(commentId, formData) {
+export async function updateComment(commentId: number, formData: Comment) {
   const response = await axiosInstance.patch(
     `/comments/${commentId}`,
     formData
diff --git a/src/service/product.js b/src/service/product.ts
similarity index 69%
rename from src/service/product.js
rename to src/service/product.ts
index 040c208e7..f46d45fe2 100644
--- a/src/service/product.js
+++ b/src/service/product.ts
@@ -1,8 +1,9 @@
 import { axiosInstance } from "@service/axios";
+import { Product } from "@type/product";
 
 export async function getProducts(
   { page = 1, pageSize = 10, orderBy = "recent", keyword = "" },
-  signal
+  signal: AbortSignal
 ) {
   const query = `page=${page}&pageSize=${pageSize}&orderBy=${orderBy}&keyword=${keyword}`;
   const response = await axiosInstance.get(`/products?${query}`, { signal });
@@ -10,19 +11,19 @@ export async function getProducts(
   return response.data;
 }
 
-export async function uploadProductImage(formData) {
+export async function uploadProductImage(formData: FormData) {
   const response = await axiosInstance.post("/images/upload", formData);
 
   return response.data;
 }
 
-export async function addProduct(productData) {
+export async function addProduct(productData: Product) {
   const response = await axiosInstance.post("/products", productData);
 
   return response.data;
 }
 
-export async function modifyProduct(productId, productData) {
+export async function modifyProduct(productId: number, productData: Product) {
   const response = await axiosInstance.patch(
     `/products/${productId}`,
     productData
@@ -31,19 +32,19 @@ export async function modifyProduct(productId, productData) {
   return response.data;
 }
 
-export async function deleteProduct(productId) {
+export async function deleteProduct(productId: number) {
   const response = await axiosInstance.delete(`/products/${productId}`);
 
   return response.data;
 }
 
-export async function getProduct(productId) {
+export async function getProduct(productId: number) {
   const response = await axiosInstance.get(`/products/${productId}`);
 
   return response.data;
 }
 
-export async function toggleLike(productId, flag) {
+export async function toggleLike(productId: number, flag: boolean) {
   const response = await axiosInstance({
     method: flag ? "POST" : "DELETE",
     url: `/products/${productId}/favorite`,
diff --git a/src/types/comment.ts b/src/types/comment.ts
new file mode 100644
index 000000000..d7c58dee1
--- /dev/null
+++ b/src/types/comment.ts
@@ -0,0 +1,14 @@
+import { User } from "./auth";
+
+export type CommentList = {
+  nextCursor: number;
+  list: Comment[];
+};
+
+export type Comment = {
+  writer: User;
+  updatedAt: string;
+  createdAt: string;
+  content: string;
+  id: number;
+};
diff --git a/src/types/product.ts b/src/types/product.ts
new file mode 100644
index 000000000..a20f205bc
--- /dev/null
+++ b/src/types/product.ts
@@ -0,0 +1,20 @@
+export type Product = {
+  createdAt: string;
+  favoriteCount: number;
+  ownerNickname: string;
+  ownerId: number;
+  images: string[];
+  tags: Tags;
+  price: number;
+  description: string;
+  name: string;
+  id: number;
+  isFavorite: boolean;
+};
+
+export type Tags = string[];
+
+export type ProductList = {
+  totalCount: number;
+  list: Product[];
+};

From 0961d9a400f3811f6540b6a8482ee10a2396c2b8 Mon Sep 17 00:00:00 2001
From: "chanki.kim" <chanki.kim89@gmail.com>
Date: Sat, 28 Dec 2024 16:24:19 +0900
Subject: [PATCH 16/72] =?UTF-8?q?Chore:=20util=20=ED=8F=B4=EB=8D=94?=
 =?UTF-8?q?=EB=82=B4=20=ED=8C=8C=EC=9D=BC=EB=93=A4=20ts=20=EC=9E=91?=
 =?UTF-8?q?=EC=97=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/util/{breakpoints.js => breakpoints.ts} | 0
 src/util/{debounce.js => debounce.ts}       | 0
 src/util/{formatter.js => formatter.ts}     | 4 ++--
 src/util/{helper.js => helper.ts}           | 4 +++-
 src/util/{validation.js => validation.ts}   | 0
 5 files changed, 5 insertions(+), 3 deletions(-)
 rename src/util/{breakpoints.js => breakpoints.ts} (100%)
 rename src/util/{debounce.js => debounce.ts} (100%)
 rename src/util/{formatter.js => formatter.ts} (61%)
 rename src/util/{helper.js => helper.ts} (68%)
 rename src/util/{validation.js => validation.ts} (100%)

diff --git a/src/util/breakpoints.js b/src/util/breakpoints.ts
similarity index 100%
rename from src/util/breakpoints.js
rename to src/util/breakpoints.ts
diff --git a/src/util/debounce.js b/src/util/debounce.ts
similarity index 100%
rename from src/util/debounce.js
rename to src/util/debounce.ts
diff --git a/src/util/formatter.js b/src/util/formatter.ts
similarity index 61%
rename from src/util/formatter.js
rename to src/util/formatter.ts
index eb552b89b..ff2c80baf 100644
--- a/src/util/formatter.js
+++ b/src/util/formatter.ts
@@ -1,9 +1,9 @@
 import dayjs from "dayjs";
 
-export function toWon(price) {
+export function toWon(price: number) {
   return Number(price).toLocaleString() + "원";
 }
 
-export function toDate(date) {
+export function toDate(date: string) {
   return dayjs(date).format("YYYY.MM.DD");
 }
diff --git a/src/util/helper.js b/src/util/helper.ts
similarity index 68%
rename from src/util/helper.js
rename to src/util/helper.ts
index f406c4b3e..ce00926e4 100644
--- a/src/util/helper.js
+++ b/src/util/helper.ts
@@ -1,8 +1,10 @@
 import { jwtDecode } from "jwt-decode";
 
-export function isTokenValid(token) {
+export function isTokenValid(token: string) {
   try {
     const { exp } = jwtDecode(token);
+    if (!exp) return false;
+
     return Date.now() < exp * 1000;
   } catch (err) {
     return false;
diff --git a/src/util/validation.js b/src/util/validation.ts
similarity index 100%
rename from src/util/validation.js
rename to src/util/validation.ts

From d0194999e60beb8f7e8c90474b8de5e04d81b095 Mon Sep 17 00:00:00 2001
From: "chanki.kim" <chanki.kim89@gmail.com>
Date: Sun, 29 Dec 2024 13:49:31 +0900
Subject: [PATCH 17/72] =?UTF-8?q?Chore:=20components=20=ED=8F=B4=EB=8D=94?=
 =?UTF-8?q?=EB=82=B4=20=ED=8C=8C=EC=9D=BC=EB=93=A4=20ts=20=EC=9E=91?=
 =?UTF-8?q?=EC=97=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Button/{BackToList.jsx => BackToList.tsx} |  0
 src/components/Button/{More.jsx => More.tsx}  |  9 ++-
 src/components/Button/{index.js => index.ts}  |  0
 .../Comment/{Comment.jsx => Comment.tsx}      |  8 ++-
 .../{CommentAdd.jsx => CommentAdd.tsx}        |  3 +-
 .../{CommentForm.jsx => CommentForm.tsx}      | 30 +++++---
 .../{CommentList.jsx => CommentList.tsx}      | 13 +++-
 src/components/Comment/{index.js => index.ts} |  0
 .../Comment/{schema.js => schema.ts}          |  0
 .../Comment/{useComment.js => useComment.ts}  | 16 +++--
 .../{useComments.js => useComments.ts}        | 18 ++++-
 src/components/Field/{Error.jsx => Error.tsx} |  2 +-
 .../Field/{FieldItem.jsx => FieldItem.tsx}    | 11 ++-
 src/components/Field/{Form.jsx => Form.tsx}   | 10 ++-
 .../{ImageUpload.jsx => ImageUpload.tsx}      | 12 +++-
 src/components/Field/{Input.jsx => Input.tsx} | 10 ++-
 .../{NumberInput.jsx => NumberInput.tsx}      | 11 ++-
 .../Field/{TagsInput.jsx => TagsInput.tsx}    | 28 ++++++--
 .../Field/{Textarea.jsx => Textarea.tsx}      |  9 ++-
 src/components/Field/{index.js => index.ts}   |  0
 .../Footer/{Footer.jsx => Footer.tsx}         |  0
 src/components/Footer/{index.js => index.ts}  |  0
 .../Header/{Header.jsx => Header.tsx}         |  6 +-
 src/components/Header/{Logo.jsx => Logo.tsx}  |  0
 src/components/Header/{Nav.jsx => Nav.tsx}    |  2 +-
 .../Header/{Profile.jsx => Profile.tsx}       |  8 ++-
 src/components/Header/{Util.jsx => Util.tsx}  |  0
 src/components/Header/{index.js => index.ts}  |  0
 .../Layout/{Layout.jsx => Layout.tsx}         |  7 +-
 src/components/Layout/{index.js => index.ts}  |  0
 src/components/List/{List.jsx => List.tsx}    | 16 ++++-
 src/components/List/{index.js => index.ts}    |  0
 .../Page/{PageWrapper.jsx => PageWrapper.tsx} |  3 +-
 src/components/Page/{index.js => index.ts}    |  0
 .../{Pagination.jsx => Pagination.tsx}        | 17 ++++-
 .../Pagination/{index.js => index.ts}         |  0
 .../Search/{Recent.jsx => Recent.tsx}         | 26 +++++--
 .../Search/{Search.jsx => Search.tsx}         | 28 ++++----
 src/components/Search/{index.js => index.ts}  |  0
 .../Section/{Section.jsx => Section.tsx}      |  9 +--
 src/components/Section/{index.js => index.ts} |  0
 ...{ProtectedRoute.jsx => ProtectedRoute.tsx} |  4 +-
 src/components/ui/{Alert.jsx => Alert.tsx}    |  8 ++-
 src/components/ui/{Author.jsx => Author.tsx}  | 10 ++-
 src/components/ui/{Avatar.jsx => Avatar.tsx}  | 13 +++-
 src/components/ui/Button.jsx                  | 30 --------
 src/components/ui/Button.tsx                  | 46 +++++++++++++
 src/components/ui/{Chip.jsx => Chip.tsx}      |  8 ++-
 .../ui/{Dropdown.jsx => Dropdown.tsx}         | 59 +++++++++++++---
 .../ui/{Fullscreen.jsx => Fullscreen.tsx}     | 20 ++++--
 .../ui/{LikeButton.jsx => LikeButton.tsx}     |  8 ++-
 .../ui/{Loading.jsx => Loading.tsx}           |  3 +-
 ...{LoadingSpinner.jsx => LoadingSpinner.tsx} | 10 ++-
 .../ui/{Message.jsx => Message.tsx}           | 15 +++-
 src/components/ui/Modal.jsx                   |  5 --
 src/components/ui/Modal.tsx                   |  6 ++
 src/components/ui/{Select.jsx => Select.tsx}  | 13 +++-
 src/components/ui/{Tags.jsx => Tags.tsx}      |  7 +-
 .../ui/{Temporary.jsx => Temporary.tsx}       |  7 +-
 .../ui/{Thumbnail.jsx => Thumbnail.tsx}       | 12 +++-
 src/components/ui/{index.js => index.ts}      |  0
 src/context/AuthContext.tsx                   | 15 +++-
 src/hooks/useAsync.ts                         |  2 +-
 src/hooks/useForm.ts                          | 69 +++++++++----------
 src/service/comments.ts                       | 10 +--
 src/types/comment.ts                          |  6 ++
 66 files changed, 517 insertions(+), 181 deletions(-)
 rename src/components/Button/{BackToList.jsx => BackToList.tsx} (100%)
 rename src/components/Button/{More.jsx => More.tsx} (80%)
 rename src/components/Button/{index.js => index.ts} (100%)
 rename src/components/Comment/{Comment.jsx => Comment.tsx} (89%)
 rename src/components/Comment/{CommentAdd.jsx => CommentAdd.tsx} (73%)
 rename src/components/Comment/{CommentForm.jsx => CommentForm.tsx} (75%)
 rename src/components/Comment/{CommentList.jsx => CommentList.tsx} (80%)
 rename src/components/Comment/{index.js => index.ts} (100%)
 rename src/components/Comment/{schema.js => schema.ts} (100%)
 rename src/components/Comment/{useComment.js => useComment.ts} (71%)
 rename src/components/Comment/{useComments.js => useComments.ts} (63%)
 rename src/components/Field/{Error.jsx => Error.tsx} (76%)
 rename src/components/Field/{FieldItem.jsx => FieldItem.tsx} (56%)
 rename src/components/Field/{Form.jsx => Form.tsx} (54%)
 rename src/components/Field/{ImageUpload.jsx => ImageUpload.tsx} (88%)
 rename src/components/Field/{Input.jsx => Input.tsx} (82%)
 rename src/components/Field/{NumberInput.jsx => NumberInput.tsx} (78%)
 rename src/components/Field/{TagsInput.jsx => TagsInput.tsx} (68%)
 rename src/components/Field/{Textarea.jsx => Textarea.tsx} (62%)
 rename src/components/Field/{index.js => index.ts} (100%)
 rename src/components/Footer/{Footer.jsx => Footer.tsx} (100%)
 rename src/components/Footer/{index.js => index.ts} (100%)
 rename src/components/Header/{Header.jsx => Header.tsx} (72%)
 rename src/components/Header/{Logo.jsx => Logo.tsx} (100%)
 rename src/components/Header/{Nav.jsx => Nav.tsx} (94%)
 rename src/components/Header/{Profile.jsx => Profile.tsx} (74%)
 rename src/components/Header/{Util.jsx => Util.tsx} (100%)
 rename src/components/Header/{index.js => index.ts} (100%)
 rename src/components/Layout/{Layout.jsx => Layout.tsx} (79%)
 rename src/components/Layout/{index.js => index.ts} (100%)
 rename src/components/List/{List.jsx => List.tsx} (66%)
 rename src/components/List/{index.js => index.ts} (100%)
 rename src/components/Page/{PageWrapper.jsx => PageWrapper.tsx} (51%)
 rename src/components/Page/{index.js => index.ts} (100%)
 rename src/components/Pagination/{Pagination.jsx => Pagination.tsx} (83%)
 rename src/components/Pagination/{index.js => index.ts} (100%)
 rename src/components/Search/{Recent.jsx => Recent.tsx} (80%)
 rename src/components/Search/{Search.jsx => Search.tsx} (67%)
 rename src/components/Search/{index.js => index.ts} (100%)
 rename src/components/Section/{Section.jsx => Section.tsx} (58%)
 rename src/components/Section/{index.js => index.ts} (100%)
 rename src/components/routing/{ProtectedRoute.jsx => ProtectedRoute.tsx} (67%)
 rename src/components/ui/{Alert.jsx => Alert.tsx} (71%)
 rename src/components/ui/{Author.jsx => Author.tsx} (61%)
 rename src/components/ui/{Avatar.jsx => Avatar.tsx} (55%)
 delete mode 100644 src/components/ui/Button.jsx
 create mode 100644 src/components/ui/Button.tsx
 rename src/components/ui/{Chip.jsx => Chip.tsx} (69%)
 rename src/components/ui/{Dropdown.jsx => Dropdown.tsx} (65%)
 rename src/components/ui/{Fullscreen.jsx => Fullscreen.tsx} (63%)
 rename src/components/ui/{LikeButton.jsx => LikeButton.tsx} (72%)
 rename src/components/ui/{Loading.jsx => Loading.tsx} (51%)
 rename src/components/ui/{LoadingSpinner.jsx => LoadingSpinner.tsx} (60%)
 rename src/components/ui/{Message.jsx => Message.tsx} (53%)
 delete mode 100644 src/components/ui/Modal.jsx
 create mode 100644 src/components/ui/Modal.tsx
 rename src/components/ui/{Select.jsx => Select.tsx} (80%)
 rename src/components/ui/{Tags.jsx => Tags.tsx} (74%)
 rename src/components/ui/{Temporary.jsx => Temporary.tsx} (89%)
 rename src/components/ui/{Thumbnail.jsx => Thumbnail.tsx} (86%)
 rename src/components/ui/{index.js => index.ts} (100%)

diff --git a/src/components/Button/BackToList.jsx b/src/components/Button/BackToList.tsx
similarity index 100%
rename from src/components/Button/BackToList.jsx
rename to src/components/Button/BackToList.tsx
diff --git a/src/components/Button/More.jsx b/src/components/Button/More.tsx
similarity index 80%
rename from src/components/Button/More.jsx
rename to src/components/Button/More.tsx
index 8d454d949..dd8072714 100644
--- a/src/components/Button/More.jsx
+++ b/src/components/Button/More.tsx
@@ -2,7 +2,14 @@ import { Dropdown } from "@components/ui";
 import dotsIcon from "@assets/img/icon/icon_dots.svg";
 import styles from "./More.module.scss";
 
-export function More({ options }) {
+interface MoreProps {
+  options: {
+    label: string;
+    action: () => void;
+  }[];
+}
+
+export function More({ options }: MoreProps) {
   return (
     <Dropdown>
       <Dropdown.Toggle>
diff --git a/src/components/Button/index.js b/src/components/Button/index.ts
similarity index 100%
rename from src/components/Button/index.js
rename to src/components/Button/index.ts
diff --git a/src/components/Comment/Comment.jsx b/src/components/Comment/Comment.tsx
similarity index 89%
rename from src/components/Comment/Comment.jsx
rename to src/components/Comment/Comment.tsx
index b55e67b5a..184121612 100644
--- a/src/components/Comment/Comment.jsx
+++ b/src/components/Comment/Comment.tsx
@@ -5,8 +5,14 @@ import { Author } from "@components/ui";
 import { More } from "@components/Button";
 import { CommentForm } from ".";
 import styles from "./Comment.module.scss";
+import { BoardName, Comment as CommentItem } from "@type/comment";
 
-export function Comment({ name, comment }) {
+interface Comment {
+  name: BoardName;
+  comment: CommentItem;
+}
+
+export function Comment({ name, comment }: Comment) {
   const {
     auth: { user },
   } = useAuth();
diff --git a/src/components/Comment/CommentAdd.jsx b/src/components/Comment/CommentAdd.tsx
similarity index 73%
rename from src/components/Comment/CommentAdd.jsx
rename to src/components/Comment/CommentAdd.tsx
index ed83c9e28..d585d1ece 100644
--- a/src/components/Comment/CommentAdd.jsx
+++ b/src/components/Comment/CommentAdd.tsx
@@ -1,8 +1,9 @@
 import { CommentForm } from ".";
 import useComment from "./useComment";
 import styles from "./CommentAdd.module.scss";
+import { BoardName } from "@type/comment";
 
-export function CommentAdd({ name }) {
+export function CommentAdd({ name }: { name: BoardName }) {
   const { handleSubmit } = useComment(name);
   return (
     <div className={styles.form}>
diff --git a/src/components/Comment/CommentForm.jsx b/src/components/Comment/CommentForm.tsx
similarity index 75%
rename from src/components/Comment/CommentForm.jsx
rename to src/components/Comment/CommentForm.tsx
index 5a399859e..8413a1006 100644
--- a/src/components/Comment/CommentForm.jsx
+++ b/src/components/Comment/CommentForm.tsx
@@ -3,26 +3,34 @@ import { FieldItem, Form, Textarea } from "@components/Field";
 import { Author, Button } from "@components/ui";
 import { commentSchema } from "./schema";
 import styles from "./CommentForm.module.scss";
+import { Comment, CommentFormSchema } from "@type/comment";
+
+interface CommentForm {
+  initialData?: Comment;
+  onCommentSubmit: (data: CommentFormSchema) => void;
+  onClose?: () => void;
+  isEdit?: boolean;
+}
 
 export function CommentForm({
-  initialData = {},
+  initialData,
   onCommentSubmit,
   onClose,
   isEdit,
-}) {
+}: CommentForm) {
   const { formError, isFormValid, isLoading, handleSubmit, register, reset } =
-    useForm(commentSchema, initialData);
+    useForm<CommentFormSchema>(commentSchema, initialData);
 
   function handleClose() {
     reset();
-    onClose();
+    onClose && onClose();
   }
 
   const message = isEdit
     ? "성공적으로 수정했습니다."
     : "성공적으로 작성했습니다.";
 
-  async function onSubmit(data) {
+  async function onSubmit(data: CommentFormSchema) {
     try {
       await onCommentSubmit(data);
       alert(message);
@@ -51,11 +59,13 @@ export function CommentForm({
       <div className={styles.footer}>
         {isEdit ? (
           <div className={styles.meta}>
-            <Author
-              avatar={initialData.writer.mage}
-              nickname={initialData.writer.nickname}
-              updatedAt={initialData.updatedAt}
-            />
+            {initialData && (
+              <Author
+                avatar={initialData.writer.image}
+                nickname={initialData.writer.nickname}
+                updatedAt={initialData.updatedAt}
+              />
+            )}
             <div className={styles.controls}>
               <Button
                 variant="text"
diff --git a/src/components/Comment/CommentList.jsx b/src/components/Comment/CommentList.tsx
similarity index 80%
rename from src/components/Comment/CommentList.jsx
rename to src/components/Comment/CommentList.tsx
index ceb647326..70c93d102 100644
--- a/src/components/Comment/CommentList.jsx
+++ b/src/components/Comment/CommentList.tsx
@@ -1,10 +1,19 @@
 import useComments from "./useComments";
-import { Message } from "@components/ui";
+import { Alert, Message } from "@components/ui";
 import { Comment } from "./Comment";
 import emptyIcon from "@assets/img/icon/icon_inquiry_empty.svg";
 import styles from "./CommentList.module.scss";
+import { BoardName, CommentList as CommentListType } from "@type/comment";
 
-export function CommentList({ name, comments: initialComments }) {
+interface CommentListProps {
+  name: BoardName;
+  comments: CommentListType;
+}
+
+export function CommentList({
+  name,
+  comments: initialComments,
+}: CommentListProps) {
   const { comments, handleLoad, isLoading, error } = useComments(
     name,
     initialComments
diff --git a/src/components/Comment/index.js b/src/components/Comment/index.ts
similarity index 100%
rename from src/components/Comment/index.js
rename to src/components/Comment/index.ts
diff --git a/src/components/Comment/schema.js b/src/components/Comment/schema.ts
similarity index 100%
rename from src/components/Comment/schema.js
rename to src/components/Comment/schema.ts
diff --git a/src/components/Comment/useComment.js b/src/components/Comment/useComment.ts
similarity index 71%
rename from src/components/Comment/useComment.js
rename to src/components/Comment/useComment.ts
index c34ed5766..b00f3b8ad 100644
--- a/src/components/Comment/useComment.js
+++ b/src/components/Comment/useComment.ts
@@ -1,15 +1,20 @@
 import { useParams } from "react-router-dom";
 import { addComment, removeComment, updateComment } from "@service/comments";
 import { useAuth } from "@context/AuthContext";
+import { BoardName, Comment, CommentFormSchema } from "@type/comment";
 
-export default function useComment(name, comment = {}) {
+export default function useComment(
+  name: BoardName,
+  comment: Partial<Comment> = {}
+) {
   const {
     auth: { user },
   } = useAuth();
-  const { id: productId } = useParams();
+  const { id } = useParams();
+  const productId = Number(id);
   const isOwner = user?.id === comment.writer?.id;
 
-  async function handleSubmit(data) {
+  async function handleSubmit(data: CommentFormSchema) {
     try {
       await addComment(name, productId, data);
     } catch (err) {
@@ -17,7 +22,8 @@ export default function useComment(name, comment = {}) {
     }
   }
 
-  async function handleUpdate(data) {
+  async function handleUpdate(data: CommentFormSchema) {
+    if (!comment.id) return;
     if (!isOwner) {
       return alert("작성자만 수정이 가능합니다.");
     }
@@ -30,6 +36,8 @@ export default function useComment(name, comment = {}) {
   }
 
   async function handleDelete() {
+    if (!comment.id) return;
+
     if (!isOwner) {
       return alert("작성자만 삭제가 가능합니다.");
     }
diff --git a/src/components/Comment/useComments.js b/src/components/Comment/useComments.ts
similarity index 63%
rename from src/components/Comment/useComments.js
rename to src/components/Comment/useComments.ts
index 0b562383b..50ec8ee5e 100644
--- a/src/components/Comment/useComments.js
+++ b/src/components/Comment/useComments.ts
@@ -2,19 +2,31 @@ import { useState } from "react";
 import { useParams } from "react-router-dom";
 import useAsync from "@hooks/useAsync";
 import { getComments } from "@service/comments";
+import { CommentList } from "@type/comment";
 
-export default function useComments(name, initialComments = {}) {
+export default function useComments(
+  name: string,
+  initialComments: CommentList
+) {
   const { id: productId } = useParams();
   const [comments, setComments] = useState(initialComments);
-  const { isLoading, error, wrappedFn: getData } = useAsync(getComments);
+  const {
+    isLoading,
+    error,
+    wrappedFn: getData,
+  } = useAsync<CommentList>(getComments);
 
   async function handleLoad() {
     try {
-      const { list, nextCursor: newCursor } = await getData(name, {
+      const result = await getData(name, {
         productId,
         cursor: comments.nextCursor,
       });
 
+      if (!result) return;
+
+      const { list, nextCursor: newCursor } = result;
+
       setComments((prev) => ({
         ...prev,
         nextCursor: newCursor,
diff --git a/src/components/Field/Error.jsx b/src/components/Field/Error.tsx
similarity index 76%
rename from src/components/Field/Error.jsx
rename to src/components/Field/Error.tsx
index d9e80013c..45959e12e 100644
--- a/src/components/Field/Error.jsx
+++ b/src/components/Field/Error.tsx
@@ -1,6 +1,6 @@
 import styles from "./Error.module.scss";
 
-export function Error({ error }) {
+export function Error({ error }: { error: string | null }) {
   if (!error) {
     return null;
   }
diff --git a/src/components/Field/FieldItem.jsx b/src/components/Field/FieldItem.tsx
similarity index 56%
rename from src/components/Field/FieldItem.jsx
rename to src/components/Field/FieldItem.tsx
index ab2466a17..ebcfc90d0 100644
--- a/src/components/Field/FieldItem.jsx
+++ b/src/components/Field/FieldItem.tsx
@@ -1,10 +1,17 @@
+import { ReactNode } from "react";
 import styles from "./FieldItem.module.scss";
 
-export function FieldItem({ children }) {
+export function FieldItem({ children }: { children: ReactNode }) {
   return <div className={styles["form-item"]}>{children}</div>;
 }
 
-function Label({ htmlFor, children }) {
+function Label({
+  htmlFor,
+  children,
+}: {
+  htmlFor?: string;
+  children: ReactNode;
+}) {
   return (
     <label className={styles["item-label"]} htmlFor={htmlFor}>
       {children}
diff --git a/src/components/Field/Form.jsx b/src/components/Field/Form.tsx
similarity index 54%
rename from src/components/Field/Form.jsx
rename to src/components/Field/Form.tsx
index c964b6801..c2698847f 100644
--- a/src/components/Field/Form.jsx
+++ b/src/components/Field/Form.tsx
@@ -1,6 +1,14 @@
+import { FormEvent, ReactNode } from "react";
 import { Alert, LoadingSpinner } from "@components/ui";
 
-export function Form({ isLoading, error, onSubmit, children }) {
+interface FormProps {
+  isLoading: boolean;
+  error: Error | null;
+  onSubmit: (e: FormEvent) => void;
+  children: ReactNode;
+}
+
+export function Form({ isLoading, error, onSubmit, children }: FormProps) {
   return (
     <>
       {isLoading && <LoadingSpinner />}
diff --git a/src/components/Field/ImageUpload.jsx b/src/components/Field/ImageUpload.tsx
similarity index 88%
rename from src/components/Field/ImageUpload.jsx
rename to src/components/Field/ImageUpload.tsx
index 8c1468b0f..12156e3b1 100644
--- a/src/components/Field/ImageUpload.jsx
+++ b/src/components/Field/ImageUpload.tsx
@@ -6,6 +6,15 @@ import styles from "./ImageUpload.module.scss";
 
 const LIMIT_SIZE_MB = 2;
 
+interface ImageUploadProps {
+  error: string;
+  value: File;
+  id: string;
+  name: string;
+  onChange: (name: string, file: File | undefined) => {};
+  placeholder: string;
+}
+
 export function ImageUpload({
   error,
   value,
@@ -13,9 +22,8 @@ export function ImageUpload({
   name,
   onChange,
   placeholder = "이미지 등록",
-}) {
+}: ImageUploadProps) {
   const { fileProps, fileError, handleRemove, preview } = useSingleFile({
-    name,
     value,
     accept: "image/*",
     limitSize: LIMIT_SIZE_MB,
diff --git a/src/components/Field/Input.jsx b/src/components/Field/Input.tsx
similarity index 82%
rename from src/components/Field/Input.jsx
rename to src/components/Field/Input.tsx
index 6ed1b2f0c..1c925eaa0 100644
--- a/src/components/Field/Input.jsx
+++ b/src/components/Field/Input.tsx
@@ -1,11 +1,17 @@
-import { useState } from "react";
+import { InputHTMLAttributes, useState } from "react";
 import clsx from "clsx";
 import { Error } from "@components/Field";
 import iconViewOn from "@assets/img/icon/icon_view_on.svg";
 import iconViewOff from "@assets/img/icon/icon_view_off.svg";
 import styles from "./Input.module.scss";
 
-export function Input({ type = "text", error, value, ...props }) {
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+  type: string;
+  error: string;
+  value: string;
+}
+
+export function Input({ type = "text", error, value, ...props }: InputProps) {
   const [currentType, setCurrentType] = useState(type);
   const valid = value && !error;
   const css = clsx(
diff --git a/src/components/Field/NumberInput.jsx b/src/components/Field/NumberInput.tsx
similarity index 78%
rename from src/components/Field/NumberInput.jsx
rename to src/components/Field/NumberInput.tsx
index 1c85bd771..274c588e3 100644
--- a/src/components/Field/NumberInput.jsx
+++ b/src/components/Field/NumberInput.tsx
@@ -1,15 +1,22 @@
-import { useState } from "react";
+import { InputHTMLAttributes, useState } from "react";
 import clsx from "clsx";
 import { Error } from "@components/Field";
 import styles from "./Input.module.scss";
 
+interface NumberInputProps extends InputHTMLAttributes<HTMLInputElement> {
+  type: string;
+  error: string;
+  value: number;
+  formatter: (value: number) => string;
+}
+
 export function NumberInput({
   type = "number",
   error,
   value,
   formatter,
   ...props
-}) {
+}: NumberInputProps) {
   const [currentType, setCurrentType] = useState(type);
   const valid = value && !error;
   const css = clsx(
diff --git a/src/components/Field/TagsInput.jsx b/src/components/Field/TagsInput.tsx
similarity index 68%
rename from src/components/Field/TagsInput.jsx
rename to src/components/Field/TagsInput.tsx
index 02227dc88..d2577fcad 100644
--- a/src/components/Field/TagsInput.jsx
+++ b/src/components/Field/TagsInput.tsx
@@ -1,11 +1,27 @@
-import { useRef } from "react";
+import { KeyboardEvent, useRef } from "react";
 import clsx from "clsx";
 import { Tags } from "@components/ui";
 import { Error } from "@components/Field";
 import styles from "./Input.module.scss";
 
-export function TagsInput({ error, value, id, name, onChange, placeholder }) {
-  const inputRef = useRef(null);
+interface TagsInputProps {
+  error: string;
+  value: string[];
+  id: string;
+  name: string;
+  onChange: (name: string, tags: string[]) => void;
+  placeholder: string;
+}
+
+export function TagsInput({
+  error,
+  value,
+  id,
+  name,
+  onChange,
+  placeholder,
+}: TagsInputProps) {
+  const inputRef = useRef<HTMLInputElement>(null);
   const valid = value.length && !error;
   const css = clsx(
     styles["field-box"],
@@ -13,11 +29,13 @@ export function TagsInput({ error, value, id, name, onChange, placeholder }) {
     error && styles.error
   );
 
-  function handleKeyDown(e) {
+  function handleKeyDown(e: KeyboardEvent) {
     if (e.nativeEvent.isComposing) return;
 
     if (e.key === "Enter") {
       e.preventDefault();
+      if (!inputRef.current) return;
+
       const tag = inputRef.current.value.trim();
       if (tag && !value.includes(tag)) {
         const newTags = [...value, tag];
@@ -27,7 +45,7 @@ export function TagsInput({ error, value, id, name, onChange, placeholder }) {
     }
   }
 
-  function handleRemove(tag) {
+  function handleRemove(tag: string) {
     const newTags = value.filter((item) => item !== tag);
     onChange(name, newTags);
   }
diff --git a/src/components/Field/Textarea.jsx b/src/components/Field/Textarea.tsx
similarity index 62%
rename from src/components/Field/Textarea.jsx
rename to src/components/Field/Textarea.tsx
index 0ca218534..31459cf21 100644
--- a/src/components/Field/Textarea.jsx
+++ b/src/components/Field/Textarea.tsx
@@ -1,8 +1,15 @@
 import clsx from "clsx";
 import { Error } from "@components/Field";
 import styles from "./Input.module.scss";
+import { TextareaHTMLAttributes } from "react";
 
-export function Textarea({ error, value, size, ...props }) {
+interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+  error: string | null;
+  value: string;
+  size: "sm" | "lg";
+}
+
+export function Textarea({ error, value, size, ...props }: TextareaProps) {
   const valid = value && !error;
   const css = clsx(
     styles["field-box"],
diff --git a/src/components/Field/index.js b/src/components/Field/index.ts
similarity index 100%
rename from src/components/Field/index.js
rename to src/components/Field/index.ts
diff --git a/src/components/Footer/Footer.jsx b/src/components/Footer/Footer.tsx
similarity index 100%
rename from src/components/Footer/Footer.jsx
rename to src/components/Footer/Footer.tsx
diff --git a/src/components/Footer/index.js b/src/components/Footer/index.ts
similarity index 100%
rename from src/components/Footer/index.js
rename to src/components/Footer/index.ts
diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.tsx
similarity index 72%
rename from src/components/Header/Header.jsx
rename to src/components/Header/Header.tsx
index c490d4d68..b5b6852aa 100644
--- a/src/components/Header/Header.jsx
+++ b/src/components/Header/Header.tsx
@@ -1,7 +1,11 @@
 import { Logo, Nav, Util } from "@components/Header";
 import styles from "./Header.module.scss";
 
-export function Header({ showNav = false }) {
+interface HeaderProps {
+  showNav?: boolean;
+}
+
+export function Header({ showNav = false }: HeaderProps) {
   return (
     <header className={styles.header}>
       <nav className={styles.nav}>
diff --git a/src/components/Header/Logo.jsx b/src/components/Header/Logo.tsx
similarity index 100%
rename from src/components/Header/Logo.jsx
rename to src/components/Header/Logo.tsx
diff --git a/src/components/Header/Nav.jsx b/src/components/Header/Nav.tsx
similarity index 94%
rename from src/components/Header/Nav.jsx
rename to src/components/Header/Nav.tsx
index 8e7e11da1..06fc39a58 100644
--- a/src/components/Header/Nav.jsx
+++ b/src/components/Header/Nav.tsx
@@ -15,7 +15,7 @@ const MENU = [
   },
 ];
 
-function isInclude(path, list = []) {
+function isInclude(path: string, list: string[] = []) {
   return list.filter((item) => path.startsWith(item)).length > 0;
 }
 
diff --git a/src/components/Header/Profile.jsx b/src/components/Header/Profile.tsx
similarity index 74%
rename from src/components/Header/Profile.jsx
rename to src/components/Header/Profile.tsx
index 3884d2638..39d08159e 100644
--- a/src/components/Header/Profile.jsx
+++ b/src/components/Header/Profile.tsx
@@ -1,6 +1,12 @@
 import { Dropdown, Avatar } from "@components/ui";
+import { User } from "@type/auth";
 
-export function Profile({ user, onLogout }) {
+interface ProfileProps {
+  user: User;
+  onLogout: () => void;
+}
+
+export function Profile({ user, onLogout }: ProfileProps) {
   function handleLogout() {
     if (confirm("정말로 로그아웃 하시겠습니까?")) {
       onLogout();
diff --git a/src/components/Header/Util.jsx b/src/components/Header/Util.tsx
similarity index 100%
rename from src/components/Header/Util.jsx
rename to src/components/Header/Util.tsx
diff --git a/src/components/Header/index.js b/src/components/Header/index.ts
similarity index 100%
rename from src/components/Header/index.js
rename to src/components/Header/index.ts
diff --git a/src/components/Layout/Layout.jsx b/src/components/Layout/Layout.tsx
similarity index 79%
rename from src/components/Layout/Layout.jsx
rename to src/components/Layout/Layout.tsx
index d7441c062..c14d30acc 100644
--- a/src/components/Layout/Layout.jsx
+++ b/src/components/Layout/Layout.tsx
@@ -4,7 +4,12 @@ import { Footer } from "@components/Footer";
 import styles from "./Layout.module.scss";
 import { LoadingSpinner } from "@components/ui";
 
-export function Layout({ hasNav = false, hasFooter = false }) {
+interface LayoutProps {
+  hasNav?: boolean;
+  hasFooter?: boolean;
+}
+
+export function Layout({ hasNav = false, hasFooter = false }: LayoutProps) {
   const navigation = useNavigation();
 
   return (
diff --git a/src/components/Layout/index.js b/src/components/Layout/index.ts
similarity index 100%
rename from src/components/Layout/index.js
rename to src/components/Layout/index.ts
diff --git a/src/components/List/List.jsx b/src/components/List/List.tsx
similarity index 66%
rename from src/components/List/List.jsx
rename to src/components/List/List.tsx
index 1c74064c9..727041032 100644
--- a/src/components/List/List.jsx
+++ b/src/components/List/List.tsx
@@ -1,4 +1,18 @@
+import { HTMLAttributes, ReactNode } from "react";
 import { LoadingSpinner, Message } from "@components/ui";
+import { Product } from "@type/product";
+
+interface ListProps extends HTMLAttributes<HTMLUListElement> {
+  items: Product[];
+  renderItem: (item: Product) => ReactNode;
+  isLoading: boolean;
+  error: Error | null;
+  message: {
+    emptyMessage: string;
+    errorMessage: string;
+  };
+  itemClassName: string;
+}
 
 export function List({
   items,
@@ -11,7 +25,7 @@ export function List({
   },
   itemClassName = "",
   ...props
-}) {
+}: ListProps) {
   if (error) {
     return <Message>{errorMessage}</Message>;
   }
diff --git a/src/components/List/index.js b/src/components/List/index.ts
similarity index 100%
rename from src/components/List/index.js
rename to src/components/List/index.ts
diff --git a/src/components/Page/PageWrapper.jsx b/src/components/Page/PageWrapper.tsx
similarity index 51%
rename from src/components/Page/PageWrapper.jsx
rename to src/components/Page/PageWrapper.tsx
index 2730d9729..15b01560e 100644
--- a/src/components/Page/PageWrapper.jsx
+++ b/src/components/Page/PageWrapper.tsx
@@ -1,5 +1,6 @@
+import { ReactNode } from "react";
 import styles from "./PageWrapper.module.scss";
 
-export function PageWrapper({ children }) {
+export function PageWrapper({ children }: { children: ReactNode }) {
   return <div className={styles.container}>{children}</div>;
 }
diff --git a/src/components/Page/index.js b/src/components/Page/index.ts
similarity index 100%
rename from src/components/Page/index.js
rename to src/components/Page/index.ts
diff --git a/src/components/Pagination/Pagination.jsx b/src/components/Pagination/Pagination.tsx
similarity index 83%
rename from src/components/Pagination/Pagination.jsx
rename to src/components/Pagination/Pagination.tsx
index 956cb9bf9..2a48c1e40 100644
--- a/src/components/Pagination/Pagination.jsx
+++ b/src/components/Pagination/Pagination.tsx
@@ -4,6 +4,21 @@ import arrowRight from "@assets/img/icon/icon_arrow_right.svg";
 import doubleArrowLeft from "@assets/img/icon/icon_double_arrow_left.svg";
 import doubleArrowRight from "@assets/img/icon/icon_double_arrow_right.svg";
 import styles from "./Pagination.module.scss";
+import { MouseEvent } from "react";
+
+interface PaginationProps {
+  page: number;
+  pageNumbers: number[];
+  isPrevDisabled: boolean;
+  isNextDisabled: boolean;
+  isPrevGroupDisabled: boolean;
+  isNextGroupDisabled: boolean;
+  onPrevClick: () => void;
+  onNextClick: () => void;
+  onPageClick: (e: MouseEvent<HTMLElement>) => void;
+  onPrevGroupClick: () => void;
+  onNextGroupClick: () => void;
+}
 
 export function Pagination({
   page,
@@ -17,7 +32,7 @@ export function Pagination({
   onPageClick,
   onPrevGroupClick,
   onNextGroupClick,
-}) {
+}: PaginationProps) {
   if (!pageNumbers.length) return null;
 
   return (
diff --git a/src/components/Pagination/index.js b/src/components/Pagination/index.ts
similarity index 100%
rename from src/components/Pagination/index.js
rename to src/components/Pagination/index.ts
diff --git a/src/components/Search/Recent.jsx b/src/components/Search/Recent.tsx
similarity index 80%
rename from src/components/Search/Recent.jsx
rename to src/components/Search/Recent.tsx
index 3d10aaef8..da8f5c974 100644
--- a/src/components/Search/Recent.jsx
+++ b/src/components/Search/Recent.tsx
@@ -1,7 +1,19 @@
-import { cloneElement, useEffect, useRef, useState } from "react";
+import { cloneElement, ReactElement, useEffect, useRef, useState } from "react";
 import searchIcon from "@assets/img/icon/icon_search.svg";
 import styles from "./Recent.module.scss";
 
+interface RecentProps {
+  title: string;
+  data: string[];
+  onItemClick: (value: string) => void;
+  onItemRemove: (value: string) => void;
+  onItemClear: () => void;
+  children: ReactElement<{
+    onOpenRecent: () => void;
+    onCloseRecent: () => void;
+  }>;
+}
+
 export function Recent({
   title,
   data,
@@ -9,13 +21,13 @@ export function Recent({
   onItemRemove,
   onItemClear,
   children,
-}) {
+}: RecentProps) {
   const [isOpen, setIsOpen] = useState(false);
-  const modalRef = useRef(null);
+  const modalRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    function handleClickOutside(e) {
-      if (modalRef.current && !modalRef.current.contains(e.target)) {
+    function handleClickOutside(e: MouseEvent) {
+      if (modalRef.current && !modalRef.current.contains(e.target as Node)) {
         setIsOpen(false);
       }
     }
@@ -26,12 +38,12 @@ export function Recent({
     };
   }, []);
 
-  function handleClick(keyword) {
+  function handleClick(keyword: string) {
     onItemClick(keyword);
     setIsOpen(false);
   }
 
-  function handleRemove(e, keyword) {
+  function handleRemove(e: React.MouseEvent, keyword: string) {
     e.stopPropagation();
     onItemRemove(keyword);
   }
diff --git a/src/components/Search/Search.jsx b/src/components/Search/Search.tsx
similarity index 67%
rename from src/components/Search/Search.jsx
rename to src/components/Search/Search.tsx
index 55ac0805e..cef57af39 100644
--- a/src/components/Search/Search.jsx
+++ b/src/components/Search/Search.tsx
@@ -1,33 +1,34 @@
-import { useRef } from "react";
+import { ChangeEvent, FormEvent, useRef } from "react";
 import searchIcon from "@assets/img/icon/icon_search.svg";
 import clearIcon from "@assets/img/icon/icon_clear.svg";
 import styles from "./Search.module.scss";
 
+interface SearchProps {
+  value: string;
+  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+  onSubmit: () => void;
+  onClear: () => void;
+  placeholder: string;
+}
+
 export function Search({
   value,
   onChange,
   onSubmit,
   onClear,
   placeholder,
-  onOpenRecent,
-  onCloseRecent,
-}) {
-  const inputRef = useRef(null);
+}: SearchProps) {
+  const inputRef = useRef<HTMLInputElement>(null);
 
-  function handleSubmit(e) {
+  function handleSubmit(e: FormEvent) {
     e.preventDefault();
     onSubmit();
-    inputRef.current.blur();
-    onCloseRecent && onCloseRecent();
+    inputRef.current && inputRef.current.blur();
   }
 
   function handleClear() {
     onClear();
-    inputRef.current.blur();
-  }
-
-  function handleFocus() {
-    onOpenRecent && onOpenRecent();
+    inputRef.current && inputRef.current.blur();
   }
 
   return (
@@ -41,7 +42,6 @@ export function Search({
           value={value}
           onChange={onChange}
           placeholder={placeholder}
-          onFocus={handleFocus}
         />
         {value && (
           <button type="button" className={styles.clear} onClick={handleClear}>
diff --git a/src/components/Search/index.js b/src/components/Search/index.ts
similarity index 100%
rename from src/components/Search/index.js
rename to src/components/Search/index.ts
diff --git a/src/components/Section/Section.jsx b/src/components/Section/Section.tsx
similarity index 58%
rename from src/components/Section/Section.jsx
rename to src/components/Section/Section.tsx
index 760dad5e6..9f22de3de 100644
--- a/src/components/Section/Section.jsx
+++ b/src/components/Section/Section.tsx
@@ -1,10 +1,11 @@
+import { ReactNode } from "react";
 import styles from "./Section.module.scss";
 
-export function Section({ children }) {
+export function Section({ children }: { children: ReactNode }) {
   return <section className={styles.section}>{children}</section>;
 }
 
-function Header({ title, children }) {
+function Header({ title, children }: { title: string; children: ReactNode }) {
   return (
     <header className={styles.header}>
       <h2 className={styles.title}>{title}</h2>
@@ -13,11 +14,11 @@ function Header({ title, children }) {
   );
 }
 
-function Content({ children }) {
+function Content({ children }: { children: ReactNode }) {
   return <>{children}</>;
 }
 
-function Footer({ children }) {
+function Footer({ children }: { children: ReactNode }) {
   return <div className={styles.footer}>{children}</div>;
 }
 
diff --git a/src/components/Section/index.js b/src/components/Section/index.ts
similarity index 100%
rename from src/components/Section/index.js
rename to src/components/Section/index.ts
diff --git a/src/components/routing/ProtectedRoute.jsx b/src/components/routing/ProtectedRoute.tsx
similarity index 67%
rename from src/components/routing/ProtectedRoute.jsx
rename to src/components/routing/ProtectedRoute.tsx
index d0dab1c97..c51ac170f 100644
--- a/src/components/routing/ProtectedRoute.jsx
+++ b/src/components/routing/ProtectedRoute.tsx
@@ -1,7 +1,7 @@
+import { ReactNode } from "react";
 import { Navigate } from "react-router-dom";
-import { useAuth } from "@context/AuthContext";
 
-export default function ProtectedRoute({ children }) {
+export default function ProtectedRoute({ children }: { children: ReactNode }) {
   const accessToken = localStorage.getItem("accessToken");
 
   if (!accessToken) {
diff --git a/src/components/ui/Alert.jsx b/src/components/ui/Alert.tsx
similarity index 71%
rename from src/components/ui/Alert.jsx
rename to src/components/ui/Alert.tsx
index 361e12fa5..b8cc5ae55 100644
--- a/src/components/ui/Alert.jsx
+++ b/src/components/ui/Alert.tsx
@@ -1,14 +1,20 @@
+import { ReactNode } from "react";
 import clsx from "clsx";
 import iconError from "@assets/img/icon/icon_error.svg";
 import iconWarn from "@assets/img/icon/icon_warn.svg";
 import styles from "./Alert.module.scss";
 
+interface AlertProps {
+  mode?: "error" | "warn";
+  children: ReactNode;
+}
+
 const iconImg = {
   warn: { src: iconWarn, alt: "경고" },
   error: { src: iconError, alt: "에러" },
 };
 
-export function Alert({ mode = "error", children }) {
+export function Alert({ mode = "error", children }: AlertProps) {
   return (
     <div className={clsx(styles.alert, styles[mode])}>
       <img src={iconImg[mode].src} alt={iconImg[mode].alt} />
diff --git a/src/components/ui/Author.jsx b/src/components/ui/Author.tsx
similarity index 61%
rename from src/components/ui/Author.jsx
rename to src/components/ui/Author.tsx
index cfa52f715..0ebd0209b 100644
--- a/src/components/ui/Author.jsx
+++ b/src/components/ui/Author.tsx
@@ -2,13 +2,19 @@ import { Avatar } from "@components/ui";
 import { toDate } from "@util/formatter";
 import styles from "./Author.module.scss";
 
-export function Author({ avatar, nickname, updateAt }) {
+interface AuthorProps {
+  avatar: string;
+  nickname: string;
+  updatedAt: string;
+}
+
+export function Author({ avatar, nickname, updatedAt }: AuthorProps) {
   return (
     <div className={styles.author}>
       <Avatar img={avatar} nickname={nickname} />
       <div className={styles.info}>
         <div className={styles.nickname}>{nickname}</div>
-        <time className={styles.date}>{toDate(updateAt)}</time>
+        <time className={styles.date}>{toDate(updatedAt)}</time>
       </div>
     </div>
   );
diff --git a/src/components/ui/Avatar.jsx b/src/components/ui/Avatar.tsx
similarity index 55%
rename from src/components/ui/Avatar.jsx
rename to src/components/ui/Avatar.tsx
index bad0f2d97..b5f7d7e31 100644
--- a/src/components/ui/Avatar.jsx
+++ b/src/components/ui/Avatar.tsx
@@ -1,12 +1,19 @@
 import clsx from "clsx";
 import defaultAvatar from "@assets/img/icon/icon_avatar.svg";
 import styles from "./Avatar.module.scss";
+import { SyntheticEvent } from "react";
 
-export function Avatar({ nickname, img, hover }) {
+interface AvatarProps {
+  nickname: string;
+  img: string;
+  hover?: boolean;
+}
+
+export function Avatar({ nickname, img, hover }: AvatarProps) {
   const avatarImg = img || defaultAvatar;
 
-  function handleError(e) {
-    e.target.src = defaultAvatar;
+  function handleError(e: SyntheticEvent<HTMLImageElement>) {
+    e.currentTarget.src = defaultAvatar;
   }
 
   const css = clsx(styles.avatar, hover && styles.hover);
diff --git a/src/components/ui/Button.jsx b/src/components/ui/Button.jsx
deleted file mode 100644
index 8d88746e2..000000000
--- a/src/components/ui/Button.jsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { Link } from "react-router-dom";
-import clsx from "clsx";
-import styles from "./Button.module.scss";
-
-export function Button({
-  to,
-  className,
-  children,
-  size = "sm",
-  variant = "solid",
-  color = "primary",
-  ...props
-}) {
-  const css = clsx(
-    styles.btn,
-    variant && styles[variant],
-    color && styles[color],
-    size && styles[size],
-    className
-  );
-  const Component = to ? Link : "button";
-  const ComponentProps = {
-    className: css,
-    ...(to && { to }),
-    ...(Component === "button" && { type: "button" }),
-    ...props,
-  };
-
-  return <Component {...ComponentProps}>{children}</Component>;
-}
diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx
new file mode 100644
index 000000000..bfd58ff2c
--- /dev/null
+++ b/src/components/ui/Button.tsx
@@ -0,0 +1,46 @@
+import { ButtonHTMLAttributes } from "react";
+import { Link, LinkProps, To } from "react-router-dom";
+import clsx from "clsx";
+import styles from "./Button.module.scss";
+
+interface BaseButtonProps {
+  to?: To;
+  size?: "sm" | "sm-48" | "md" | "lg" | "xl";
+  variant?: "solid" | "outlined" | "text";
+  color?: "primary" | "secondary" | "error";
+}
+type ButtonAsButton = ButtonHTMLAttributes<HTMLButtonElement> & BaseButtonProps;
+type ButtonAsLink = LinkProps & BaseButtonProps;
+type ButtonProps = ButtonAsButton | ButtonAsLink;
+
+export function Button({
+  to,
+  className,
+  children,
+  size = "sm",
+  variant = "solid",
+  color = "primary",
+  ...props
+}: ButtonProps) {
+  const css = clsx(
+    styles.btn,
+    variant && styles[variant],
+    color && styles[color],
+    size && styles[size],
+    className
+  );
+
+  if (to) {
+    return (
+      <Link to={to} className={css} {...(props as Omit<ButtonAsLink, "to">)}>
+        {children}
+      </Link>
+    );
+  }
+
+  return (
+    <button className={css} {...(props as ButtonAsButton)}>
+      {children}
+    </button>
+  );
+}
diff --git a/src/components/ui/Chip.jsx b/src/components/ui/Chip.tsx
similarity index 69%
rename from src/components/ui/Chip.jsx
rename to src/components/ui/Chip.tsx
index 7493e6d24..c2b2ee5e2 100644
--- a/src/components/ui/Chip.jsx
+++ b/src/components/ui/Chip.tsx
@@ -1,7 +1,13 @@
 import clearIcon from "@assets/img/icon/icon_clear.svg";
 import styles from "./Chip.module.scss";
 
-export function Chip({ removable, text, onClick }) {
+interface ChipProps {
+  removable?: boolean;
+  text: string;
+  onClick?: () => void;
+}
+
+export function Chip({ removable, text, onClick }: ChipProps) {
   return (
     <div className={styles.chip}>
       {text}
diff --git a/src/components/ui/Dropdown.jsx b/src/components/ui/Dropdown.tsx
similarity index 65%
rename from src/components/ui/Dropdown.jsx
rename to src/components/ui/Dropdown.tsx
index 9b7810f74..30234f980 100644
--- a/src/components/ui/Dropdown.jsx
+++ b/src/components/ui/Dropdown.tsx
@@ -1,6 +1,8 @@
 import {
   cloneElement,
   createContext,
+  ReactElement,
+  ReactNode,
   useContext,
   useEffect,
   useRef,
@@ -8,9 +10,23 @@ import {
 } from "react";
 import styles from "./Dropdown.module.scss";
 
+type DropdownStateContext = {
+  isOpen: boolean;
+};
+
+type DropdownDispatchContext = {
+  onChange?: (value: string) => void;
+  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+};
+
 /** compound pattern + context api 복습 (mui dropdown 참고) */
-const DropdownStateContext = createContext();
-const DropdownDispatchContext = createContext();
+const DropdownStateContext = createContext<DropdownStateContext>({
+  isOpen: false,
+});
+const DropdownDispatchContext = createContext<DropdownDispatchContext>({
+  onChange: () => {},
+  setIsOpen: () => {},
+});
 
 const useDropdownState = () => {
   const context = useContext(DropdownStateContext);
@@ -28,9 +44,15 @@ const useDropdownDispatch = () => {
   return context;
 };
 
-export function Dropdown({ onChange = () => {}, children }) {
+export function Dropdown({
+  onChange,
+  children,
+}: {
+  onChange?: (value: string) => void;
+  children: ReactNode;
+}) {
   const [isOpen, setIsOpen] = useState(false);
-  const dropdownRef = useRef(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
 
   const state = { isOpen };
 
@@ -40,8 +62,11 @@ export function Dropdown({ onChange = () => {}, children }) {
   };
 
   useEffect(() => {
-    function handleClickOutside(e) {
-      if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
+    function handleClickOutside(e: MouseEvent) {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(e.target as Node)
+      ) {
         setIsOpen(false);
       }
     }
@@ -63,7 +88,13 @@ export function Dropdown({ onChange = () => {}, children }) {
   );
 }
 
-function Toggle({ children, asChild = false }) {
+function Toggle({
+  children,
+  asChild = false,
+}: {
+  children: ReactElement<{ onClick?: () => void }>;
+  asChild?: boolean;
+}) {
   const { setIsOpen } = useDropdownDispatch();
 
   function handleClick() {
@@ -81,7 +112,7 @@ function Toggle({ children, asChild = false }) {
   );
 }
 
-function Menu({ children }) {
+function Menu({ children }: { children: ReactNode }) {
   const { isOpen } = useDropdownState();
 
   if (!isOpen) return null;
@@ -89,12 +120,20 @@ function Menu({ children }) {
   return <ul className={styles.list}>{children}</ul>;
 }
 
-function Item({ value, onClick, children }) {
+function Item({
+  value,
+  onClick,
+  children,
+}: {
+  value?: string;
+  onClick?: () => void;
+  children: ReactNode;
+}) {
   const { setIsOpen, onChange } = useDropdownDispatch();
 
   function handleClick() {
     setIsOpen(false);
-    onChange(value);
+    value && onChange && onChange(value);
 
     if (onClick) {
       onClick();
diff --git a/src/components/ui/Fullscreen.jsx b/src/components/ui/Fullscreen.tsx
similarity index 63%
rename from src/components/ui/Fullscreen.jsx
rename to src/components/ui/Fullscreen.tsx
index 92b6e2a44..6d906ee54 100644
--- a/src/components/ui/Fullscreen.jsx
+++ b/src/components/ui/Fullscreen.tsx
@@ -1,11 +1,15 @@
-import { cloneElement, useState } from "react";
+import { cloneElement, ReactElement, useState } from "react";
 import { Modal } from "@components/ui";
 import styles from "./Fullscreen.module.scss";
 
-export function Fullscreen({ children }) {
-  const [imgSrc, setImgSrc] = useState(null);
+export function Fullscreen({
+  children,
+}: {
+  children: ReactElement<{ onOpenScreen?: (src: string) => void }>;
+}) {
+  const [imgSrc, setImgSrc] = useState<string | null>(null);
 
-  function handleOpenScreen(src) {
+  function handleOpenScreen(src: string) {
     setImgSrc(src);
   }
 
@@ -25,7 +29,13 @@ export function Fullscreen({ children }) {
   );
 }
 
-function ImgViewer({ src, onCloseScreen }) {
+function ImgViewer({
+  src,
+  onCloseScreen,
+}: {
+  src: string;
+  onCloseScreen: () => void;
+}) {
   return (
     <div className={styles.fullscreen} onClick={onCloseScreen}>
       <div className={styles.info}>아무곳이나 클릭하시면 닫힙니다.</div>
diff --git a/src/components/ui/LikeButton.jsx b/src/components/ui/LikeButton.tsx
similarity index 72%
rename from src/components/ui/LikeButton.jsx
rename to src/components/ui/LikeButton.tsx
index 2dc0c6c32..cb42e5981 100644
--- a/src/components/ui/LikeButton.jsx
+++ b/src/components/ui/LikeButton.tsx
@@ -3,7 +3,13 @@ import iconHeartFill from "@assets/img/icon/icon_heart_fill.svg";
 import styles from "./LikeButton.module.scss";
 import clsx from "clsx";
 
-export function LikeButton({ count, isLiked, onClick }) {
+interface LikeButtonProps {
+  count: number;
+  isLiked: boolean;
+  onClick: () => void;
+}
+
+export function LikeButton({ count, isLiked, onClick }: LikeButtonProps) {
   const buttonCss = clsx(styles.button, isLiked && styles.active);
   return (
     <button type="button" className={buttonCss} onClick={onClick}>
diff --git a/src/components/ui/Loading.jsx b/src/components/ui/Loading.tsx
similarity index 51%
rename from src/components/ui/Loading.jsx
rename to src/components/ui/Loading.tsx
index 8c7bc5cf4..007dff0c0 100644
--- a/src/components/ui/Loading.jsx
+++ b/src/components/ui/Loading.tsx
@@ -1,5 +1,6 @@
+import { ReactNode } from "react";
 import styles from "./Loading.module.scss";
 
-export function Loading({ children }) {
+export function Loading({ children }: { children: ReactNode }) {
   return <div className={styles.loading}>{children}</div>;
 }
diff --git a/src/components/ui/LoadingSpinner.jsx b/src/components/ui/LoadingSpinner.tsx
similarity index 60%
rename from src/components/ui/LoadingSpinner.jsx
rename to src/components/ui/LoadingSpinner.tsx
index 0c631b4d9..f0addcff0 100644
--- a/src/components/ui/LoadingSpinner.jsx
+++ b/src/components/ui/LoadingSpinner.tsx
@@ -1,7 +1,15 @@
 import clsx from "clsx";
 import styles from "./LoadingSpinner.module.scss";
 
-export function LoadingSpinner({ position = "fixed", light }) {
+interface LoadingSpinnerProps {
+  position?: "fixed" | "absolute";
+  light?: boolean;
+}
+
+export function LoadingSpinner({
+  position = "fixed",
+  light,
+}: LoadingSpinnerProps) {
   return (
     <div
       className={clsx(
diff --git a/src/components/ui/Message.jsx b/src/components/ui/Message.tsx
similarity index 53%
rename from src/components/ui/Message.jsx
rename to src/components/ui/Message.tsx
index dba8aa7f9..6435f4f3e 100644
--- a/src/components/ui/Message.jsx
+++ b/src/components/ui/Message.tsx
@@ -1,7 +1,20 @@
+import { ReactNode } from "react";
 import clsx from "clsx";
 import styles from "./Message.module.scss";
 
-export function Message({ icon, alt = "", compact = false, children }) {
+interface MessageProps {
+  icon?: string;
+  alt?: string;
+  compact?: boolean;
+  children: ReactNode;
+}
+
+export function Message({
+  icon,
+  alt = "",
+  compact = false,
+  children,
+}: MessageProps) {
   const css = clsx(styles.message, compact && styles.compact);
   return (
     <div className={css}>
diff --git a/src/components/ui/Modal.jsx b/src/components/ui/Modal.jsx
deleted file mode 100644
index ba9d4a2f0..000000000
--- a/src/components/ui/Modal.jsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { createPortal } from "react-dom";
-
-export function Modal({ children }) {
-  return createPortal(children, document.querySelector("#root"));
-}
diff --git a/src/components/ui/Modal.tsx b/src/components/ui/Modal.tsx
new file mode 100644
index 000000000..0d033a379
--- /dev/null
+++ b/src/components/ui/Modal.tsx
@@ -0,0 +1,6 @@
+import { ReactNode } from "react";
+import { createPortal } from "react-dom";
+
+export function Modal({ children }: { children: ReactNode }) {
+  return createPortal(children, document.querySelector("#root")!);
+}
diff --git a/src/components/ui/Select.jsx b/src/components/ui/Select.tsx
similarity index 80%
rename from src/components/ui/Select.jsx
rename to src/components/ui/Select.tsx
index 12953257a..4a083920f 100644
--- a/src/components/ui/Select.jsx
+++ b/src/components/ui/Select.tsx
@@ -3,8 +3,17 @@ import sortIcon from "@assets/img/icon/icon_sort.svg";
 import { Dropdown } from "@components/ui";
 import styles from "./Select.module.scss";
 
-export function Select({ value, options, onChange }) {
-  const selectedLabel = options.find((option) => option.value === value).label;
+interface SelectProps {
+  value: string;
+  options: {
+    value: string;
+    label: string;
+  }[];
+  onChange: () => void;
+}
+
+export function Select({ value, options = [], onChange }: SelectProps) {
+  const selectedLabel = options.find((option) => option.value === value)?.label;
   return (
     <Dropdown onChange={onChange}>
       <Dropdown.Toggle asChild>
diff --git a/src/components/ui/Tags.jsx b/src/components/ui/Tags.tsx
similarity index 74%
rename from src/components/ui/Tags.jsx
rename to src/components/ui/Tags.tsx
index 35e79131d..3c9f60e48 100644
--- a/src/components/ui/Tags.jsx
+++ b/src/components/ui/Tags.tsx
@@ -1,7 +1,12 @@
 import { Chip } from "@components/ui";
 import styles from "./Tags.module.scss";
 
-export function Tags({ tags, onRemoveItem }) {
+interface Tags {
+  tags: string[];
+  onRemoveItem?: (tag: string) => void;
+}
+
+export function Tags({ tags, onRemoveItem }: Tags) {
   return (
     <div className={styles["item-tags"]}>
       {tags?.map((tag) => (
diff --git a/src/components/ui/Temporary.jsx b/src/components/ui/Temporary.tsx
similarity index 89%
rename from src/components/ui/Temporary.jsx
rename to src/components/ui/Temporary.tsx
index 866602611..d804d388c 100644
--- a/src/components/ui/Temporary.jsx
+++ b/src/components/ui/Temporary.tsx
@@ -2,10 +2,15 @@ import { useNavigate } from "react-router-dom";
 import { Button } from "@components/ui";
 import styles from "./Temporary.module.scss";
 
+interface TemporaryProps {
+  title: string;
+  description: string;
+}
+
 export function Temporary({
   title = "임시페이지",
   description = "페이지를 준비중입니다. 처음으로 돌아가주세요",
-}) {
+}: TemporaryProps) {
   const navigate = useNavigate();
 
   function handleGoBack() {
diff --git a/src/components/ui/Thumbnail.jsx b/src/components/ui/Thumbnail.tsx
similarity index 86%
rename from src/components/ui/Thumbnail.jsx
rename to src/components/ui/Thumbnail.tsx
index 9a7e1476d..b1e43aa67 100644
--- a/src/components/ui/Thumbnail.jsx
+++ b/src/components/ui/Thumbnail.tsx
@@ -1,8 +1,16 @@
+import { useState } from "react";
 import clsx from "clsx";
 import defaultImg from "@assets/img/icon/icon_placeholder.svg";
 import clearIcon from "@assets/img/icon/icon_clear.svg";
 import styles from "./Thumbnail.module.scss";
-import { useState } from "react";
+
+interface ThumbnailProps {
+  src: string;
+  alt?: string;
+  onRemove?: () => void;
+  aspectRatio?: string;
+  onOpenScreen?: (src: string) => void;
+}
 
 export function Thumbnail({
   src = defaultImg,
@@ -10,7 +18,7 @@ export function Thumbnail({
   onRemove,
   aspectRatio = "1 / 1",
   onOpenScreen,
-}) {
+}: ThumbnailProps) {
   const [isDefault, setIsDefault] = useState(src === defaultImg);
   const hasFullScreen = onOpenScreen && !isDefault;
 
diff --git a/src/components/ui/index.js b/src/components/ui/index.ts
similarity index 100%
rename from src/components/ui/index.js
rename to src/components/ui/index.ts
diff --git a/src/context/AuthContext.tsx b/src/context/AuthContext.tsx
index a4f1fe3ca..3d2979562 100644
--- a/src/context/AuthContext.tsx
+++ b/src/context/AuthContext.tsx
@@ -20,7 +20,16 @@ type AuthContextProps = {
   handleLogout: () => void;
   handleSignup: (formData: SignupFormData) => void;
 };
-const AuthContext = createContext<AuthContextProps | null>(null);
+const AuthContext = createContext<AuthContextProps>({
+  auth: {
+    accessToken: null,
+    refreshToken: null,
+    user: null,
+  },
+  handleLogin: () => {},
+  handleLogout: () => {},
+  handleSignup: () => {},
+});
 
 export function AuthProvider({ children }: { children: ReactNode }) {
   const [auth, setAuth] = useState(() => ({
@@ -82,6 +91,8 @@ export function AuthProvider({ children }: { children: ReactNode }) {
     if (!auth.accessToken) return;
 
     (async function getUserData() {
+      if (!auth.accessToken) return;
+
       try {
         // 토큰이 만료되었으면 재발급후 종료 (다시 이 effect가 호출되어서 유저정보를 가져옴)
         if (!isTokenValid(auth.accessToken)) {
@@ -98,6 +109,8 @@ export function AuthProvider({ children }: { children: ReactNode }) {
   }, [auth.accessToken]);
 
   async function handleRrefreshToken() {
+    if (!auth.refreshToken) return;
+
     try {
       const { accessToken } = await refreshAccessToken(auth.refreshToken);
       localStorage.setItem("accessToken", accessToken);
diff --git a/src/hooks/useAsync.ts b/src/hooks/useAsync.ts
index cce9ae419..67723d4d3 100644
--- a/src/hooks/useAsync.ts
+++ b/src/hooks/useAsync.ts
@@ -1,6 +1,6 @@
 import { useState } from "react";
 
-export default function useAsync<T>(asyncFn: () => Promise<T>) {
+export default function useAsync<T>(asyncFn: (...args: any[]) => Promise<T>) {
   const [result, setResult] = useState<T | null>(null);
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<Error | null>(null);
diff --git a/src/hooks/useForm.ts b/src/hooks/useForm.ts
index 3fc36706a..a2ede6a94 100644
--- a/src/hooks/useForm.ts
+++ b/src/hooks/useForm.ts
@@ -1,12 +1,8 @@
-import { ChangeEvent, useState } from "react";
+import { ChangeEvent, FormEvent, useState } from "react";
 
-type FormValue = string | number | File | File[] | undefined;
-
-type FormSchema = {
-  [key: string]: {
-    value: FormValue;
-    rule: Rule;
-  };
+type FieldValue = string | number | File | undefined;
+type FieldValues = {
+  [key: string]: FieldValue;
 };
 
 type Rule = {
@@ -16,36 +12,39 @@ type Rule = {
     message: string;
   }[];
   custom?: {
-    validate: (value: FormValue) => boolean;
+    validate: (value: FieldValue) => boolean;
     message: string;
   };
   match?: {
-    field: keyof FormSchema;
+    field: string;
     message: string;
   };
 };
 
-type DefaultValues = {
-  [key: keyof FormSchema]: FormValue;
+type FormState<T extends FieldValues> = {
+  [K in keyof T]: {
+    value: T[K];
+    error: string | null;
+  };
 };
 
-type FormState = {
-  [name: keyof FormSchema]: {
-    value: FormValue;
-    error: string | null;
+type FormSchema<T extends FieldValues> = {
+  [K in keyof T]: {
+    value: T[K];
+    rule: Rule;
   };
 };
 
-export default function useForm(
-  formSchema: FormSchema,
-  defaultValues: DefaultValues = {}
+export default function useForm<T extends FieldValues>(
+  formSchema: FormSchema<T>,
+  defaultValues: Partial<T> = {}
 ) {
   //rule은 따로 보관하기
   const rules = Object.fromEntries(
     Object.entries(formSchema)
       .filter(([_, value]) => value.rule)
       .map(([key, value]) => [key, value.rule])
-  );
+  ) as Record<keyof T, Rule>;
 
   //상태관리할 벨류값만 추려서 초기state만들기
   const initialState = Object.fromEntries(
@@ -53,9 +52,9 @@ export default function useForm(
       key,
       { value: defaultValues[key] ?? value.value, error: null },
     ])
-  );
+  ) as FormState<T>;
 
-  const [formState, setFormState] = useState<FormState>(initialState);
+  const [formState, setFormState] = useState<FormState<T>>(initialState);
   const [isLoading, setIsLoading] = useState(false);
   const [formError, setFormError] = useState<Error | null>(null);
   const isFormValid = Object.entries(formState).every(([key, item]) =>
@@ -64,7 +63,7 @@ export default function useForm(
 
   function isValidField(
     rule: Rule,
-    item: { value: FormValue; error: string | null }
+    item: { value: FieldValue; error: string | null }
   ) {
     if (item.error !== null) return false;
 
@@ -89,7 +88,9 @@ export default function useForm(
     return true;
   }
 
-  function handleInputChange(e: ChangeEvent<HTMLInputElement>) {
+  function handleInputChange(
+    e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) {
     const { type, name, value } = e.target;
     let nextValue;
 
@@ -102,12 +103,12 @@ export default function useForm(
     handleChange(name, nextValue);
   }
 
-  function trigger(name: keyof FormSchema) {
+  function trigger(name: keyof T) {
     const value = formState[name].value;
     handleChange(name, value);
   }
 
-  function handleChange(name: keyof FormSchema, value: FormValue) {
+  function handleChange(name: keyof T, value: FieldValue) {
     const { isValid, message } = validate(name, value);
 
     setFormState((prev) => ({
@@ -120,7 +121,7 @@ export default function useForm(
     }));
   }
 
-  function validate(name: keyof FormSchema, value: FormValue) {
+  function validate(name: keyof T, value: FieldValue) {
     const rule = rules[name];
 
     if (!rule) {
@@ -204,14 +205,10 @@ export default function useForm(
     return { isValid: true, message: null };
   }
 
-  function handleSubmit<T>(
-    submitFn: (submitData: {
-      [name: keyof FormSchema]: FormValue;
-    }) => Promise<T>
-  ) {
+  function handleSubmit(submitFn: (submitData: T) => Promise<void>) {
     //다른곳에서 submit과 관련된 비동기코드만 넣으면 되도록
     //공통적으로 사용되는 코드를 모아두기
-    return async function (e: SubmitEvent) {
+    return async function (e: FormEvent) {
       e.preventDefault();
 
       //전체적으로 field들을 다시한번 trigger를 호출해서 재점검
@@ -237,13 +234,13 @@ export default function useForm(
     };
   }
 
-  function getValues() {
+  function getValues(): T {
     return Object.fromEntries(
       Object.entries(formState).map(([key, value]) => [key, value.value])
-    );
+    ) as T;
   }
 
-  function register(name: keyof FormSchema) {
+  function register<K extends keyof T>(name: K) {
     return {
       id: name,
       name,
diff --git a/src/service/comments.ts b/src/service/comments.ts
index 75d3807c2..1ca351f7f 100644
--- a/src/service/comments.ts
+++ b/src/service/comments.ts
@@ -1,6 +1,5 @@
 import { axiosInstance } from "@service/axios";
-
-type BoardName = "articles" | "products";
+import { BoardName, CommentFormSchema } from "@type/comment";
 
 export async function getComments(
   name: BoardName,
@@ -21,7 +20,7 @@ export async function getComments(
 export async function addComment(
   name: BoardName,
   id: number,
-  formData: Comment
+  formData: CommentFormSchema
 ) {
   const response = await axiosInstance.post(
     `/${name}/${id}/comments`,
@@ -37,7 +36,10 @@ export async function removeComment(commentId: number) {
   return response.data;
 }
 
-export async function updateComment(commentId: number, formData: Comment) {
+export async function updateComment(
+  commentId: number,
+  formData: CommentFormSchema
+) {
   const response = await axiosInstance.patch(
     `/comments/${commentId}`,
     formData
diff --git a/src/types/comment.ts b/src/types/comment.ts
index d7c58dee1..99b47d081 100644
--- a/src/types/comment.ts
+++ b/src/types/comment.ts
@@ -1,5 +1,7 @@
 import { User } from "./auth";
 
+export type BoardName = "articles" | "products";
+
 export type CommentList = {
   nextCursor: number;
   list: Comment[];
@@ -12,3 +14,7 @@ export type Comment = {
   content: string;
   id: number;
 };
+
+export type CommentFormSchema = {
+  content: string;
+};

From d959021425a3b988fd9c4a324ae6eff3d06605c6 Mon Sep 17 00:00:00 2001
From: "chanki.kim" <chanki.kim89@gmail.com>
Date: Sun, 29 Dec 2024 14:20:23 +0900
Subject: [PATCH 18/72] =?UTF-8?q?Chore:=20=EB=9E=9C=EB=94=A9,=20=EB=A1=9C?=
 =?UTF-8?q?=EA=B7=B8=EC=9D=B8,=20=ED=9A=8C=EC=9B=90=EA=B0=80=EC=9E=85,=20?=
 =?UTF-8?q?=EA=B8=B0=ED=83=80=20=ED=8E=98=EC=9D=B4=EC=A7=80=20ts=20?=
 =?UTF-8?q?=EC=9E=91=EC=97=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Comment/CommentForm.tsx        |  8 +++---
 src/components/Comment/useComment.ts          |  6 ++--
 src/components/Field/ImageUpload.tsx          |  2 +-
 src/components/Field/Input.tsx                |  2 +-
 src/components/Field/NumberInput.tsx          |  2 +-
 src/components/Field/TagsInput.tsx            |  2 +-
 .../auth/{LoginPage.jsx => LoginPage.tsx}     |  5 ++--
 .../auth/{SignupPage.jsx => SignupPage.tsx}   |  5 ++--
 .../{AuthContainer.jsx => AuthContainer.tsx}  |  0
 .../auth/components/{Oauth.jsx => Oauth.tsx}  |  0
 .../auth/components/{schema.js => schema.ts}  |  0
 .../boards/{BoardPage.jsx => BoardPage.tsx}   |  0
 src/pages/error/ErrorPage.jsx                 | 20 -------------
 src/pages/error/ErrorPage.tsx                 | 22 +++++++++++++++
 src/pages/etc/{FaqPage.jsx => FaqPage.tsx}    |  0
 .../etc/{PrivacyPage.jsx => PrivacyPage.tsx}  |  0
 .../{LandingPage.jsx => LandingPage.tsx}      |  0
 .../components/{Banner.jsx => Banner.tsx}     | 16 ++++++++++-
 .../components/{Feature.jsx => Feature.tsx}   | 28 +++++++++++++++++--
 ...{landingContents.js => landingContents.ts} |  5 ++--
 src/service/comments.ts                       |  6 ++--
 src/types/comment.ts                          |  2 +-
 22 files changed, 87 insertions(+), 44 deletions(-)
 rename src/pages/auth/{LoginPage.jsx => LoginPage.tsx} (92%)
 rename src/pages/auth/{SignupPage.jsx => SignupPage.tsx} (94%)
 rename src/pages/auth/components/{AuthContainer.jsx => AuthContainer.tsx} (100%)
 rename src/pages/auth/components/{Oauth.jsx => Oauth.tsx} (100%)
 rename src/pages/auth/components/{schema.js => schema.ts} (100%)
 rename src/pages/boards/{BoardPage.jsx => BoardPage.tsx} (100%)
 delete mode 100644 src/pages/error/ErrorPage.jsx
 create mode 100644 src/pages/error/ErrorPage.tsx
 rename src/pages/etc/{FaqPage.jsx => FaqPage.tsx} (100%)
 rename src/pages/etc/{PrivacyPage.jsx => PrivacyPage.tsx} (100%)
 rename src/pages/landing/{LandingPage.jsx => LandingPage.tsx} (100%)
 rename src/pages/landing/components/{Banner.jsx => Banner.tsx} (74%)
 rename src/pages/landing/components/{Feature.jsx => Feature.tsx} (70%)
 rename src/pages/landing/components/{landingContents.js => landingContents.ts} (92%)

diff --git a/src/components/Comment/CommentForm.tsx b/src/components/Comment/CommentForm.tsx
index 8413a1006..577bebe06 100644
--- a/src/components/Comment/CommentForm.tsx
+++ b/src/components/Comment/CommentForm.tsx
@@ -3,11 +3,11 @@ import { FieldItem, Form, Textarea } from "@components/Field";
 import { Author, Button } from "@components/ui";
 import { commentSchema } from "./schema";
 import styles from "./CommentForm.module.scss";
-import { Comment, CommentFormSchema } from "@type/comment";
+import { Comment, CommentFormData } from "@type/comment";
 
 interface CommentForm {
   initialData?: Comment;
-  onCommentSubmit: (data: CommentFormSchema) => void;
+  onCommentSubmit: (data: CommentFormData) => void;
   onClose?: () => void;
   isEdit?: boolean;
 }
@@ -19,7 +19,7 @@ export function CommentForm({
   isEdit,
 }: CommentForm) {
   const { formError, isFormValid, isLoading, handleSubmit, register, reset } =
-    useForm<CommentFormSchema>(commentSchema, initialData);
+    useForm<CommentFormData>(commentSchema, initialData);
 
   function handleClose() {
     reset();
@@ -30,7 +30,7 @@ export function CommentForm({
     ? "성공적으로 수정했습니다."
     : "성공적으로 작성했습니다.";
 
-  async function onSubmit(data: CommentFormSchema) {
+  async function onSubmit(data: CommentFormData) {
     try {
       await onCommentSubmit(data);
       alert(message);
diff --git a/src/components/Comment/useComment.ts b/src/components/Comment/useComment.ts
index b00f3b8ad..c8792cda9 100644
--- a/src/components/Comment/useComment.ts
+++ b/src/components/Comment/useComment.ts
@@ -1,7 +1,7 @@
 import { useParams } from "react-router-dom";
 import { addComment, removeComment, updateComment } from "@service/comments";
 import { useAuth } from "@context/AuthContext";
-import { BoardName, Comment, CommentFormSchema } from "@type/comment";
+import { BoardName, Comment, CommentFormData } from "@type/comment";
 
 export default function useComment(
   name: BoardName,
@@ -14,7 +14,7 @@ export default function useComment(
   const productId = Number(id);
   const isOwner = user?.id === comment.writer?.id;
 
-  async function handleSubmit(data: CommentFormSchema) {
+  async function handleSubmit(data: CommentFormData) {
     try {
       await addComment(name, productId, data);
     } catch (err) {
@@ -22,7 +22,7 @@ export default function useComment(
     }
   }
 
-  async function handleUpdate(data: CommentFormSchema) {
+  async function handleUpdate(data: CommentFormData) {
     if (!comment.id) return;
     if (!isOwner) {
       return alert("작성자만 수정이 가능합니다.");
diff --git a/src/components/Field/ImageUpload.tsx b/src/components/Field/ImageUpload.tsx
index 12156e3b1..3aaeeccda 100644
--- a/src/components/Field/ImageUpload.tsx
+++ b/src/components/Field/ImageUpload.tsx
@@ -7,7 +7,7 @@ import styles from "./ImageUpload.module.scss";
 const LIMIT_SIZE_MB = 2;
 
 interface ImageUploadProps {
-  error: string;
+  error: string | null;
   value: File;
   id: string;
   name: string;
diff --git a/src/components/Field/Input.tsx b/src/components/Field/Input.tsx
index 1c925eaa0..063700937 100644
--- a/src/components/Field/Input.tsx
+++ b/src/components/Field/Input.tsx
@@ -7,7 +7,7 @@ import styles from "./Input.module.scss";
 
 interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
   type: string;
-  error: string;
+  error: string | null;
   value: string;
 }
 
diff --git a/src/components/Field/NumberInput.tsx b/src/components/Field/NumberInput.tsx
index 274c588e3..505ab02d2 100644
--- a/src/components/Field/NumberInput.tsx
+++ b/src/components/Field/NumberInput.tsx
@@ -5,7 +5,7 @@ import styles from "./Input.module.scss";
 
 interface NumberInputProps extends InputHTMLAttributes<HTMLInputElement> {
   type: string;
-  error: string;
+  error: string | null;
   value: number;
   formatter: (value: number) => string;
 }
diff --git a/src/components/Field/TagsInput.tsx b/src/components/Field/TagsInput.tsx
index d2577fcad..ecebb5d20 100644
--- a/src/components/Field/TagsInput.tsx
+++ b/src/components/Field/TagsInput.tsx
@@ -5,7 +5,7 @@ import { Error } from "@components/Field";
 import styles from "./Input.module.scss";
 
 interface TagsInputProps {
-  error: string;
+  error: string | null;
   value: string[];
   id: string;
   name: string;
diff --git a/src/pages/auth/LoginPage.jsx b/src/pages/auth/LoginPage.tsx
similarity index 92%
rename from src/pages/auth/LoginPage.jsx
rename to src/pages/auth/LoginPage.tsx
index d20c25943..a7ea64509 100644
--- a/src/pages/auth/LoginPage.jsx
+++ b/src/pages/auth/LoginPage.tsx
@@ -5,6 +5,7 @@ import { Form, FieldItem, Input } from "@components/Field";
 import { Button } from "@components/ui";
 import AuthContainer from "./components/AuthContainer";
 import { loginFormSchema } from "./components/schema";
+import { SigninFormData } from "@type/auth";
 
 export default function LoginPage() {
   const navigate = useNavigate();
@@ -18,9 +19,9 @@ export default function LoginPage() {
   }
 
   const { formError, isFormValid, isLoading, handleSubmit, register } =
-    useForm(loginFormSchema);
+    useForm<SigninFormData>(loginFormSchema);
 
-  async function onSubmit(data) {
+  async function onSubmit(data: SigninFormData) {
     try {
       await handleLogin(data);
       alert("로그인에 성공했습니다.");
diff --git a/src/pages/auth/SignupPage.jsx b/src/pages/auth/SignupPage.tsx
similarity index 94%
rename from src/pages/auth/SignupPage.jsx
rename to src/pages/auth/SignupPage.tsx
index d8a94f379..81c84b79e 100644
--- a/src/pages/auth/SignupPage.jsx
+++ b/src/pages/auth/SignupPage.tsx
@@ -6,6 +6,7 @@ import { Form, FieldItem, Input } from "@components/Field";
 import { Button } from "@components/ui";
 import AuthContainer from "./components/AuthContainer";
 import { signupFormSchema } from "./components/schema";
+import { SignupFormData } from "@type/auth";
 
 export default function SignupPage() {
   const {
@@ -26,7 +27,7 @@ export default function SignupPage() {
     trigger,
     handleSubmit,
     register,
-  } = useForm(signupFormSchema);
+  } = useForm<SignupFormData>(signupFormSchema);
 
   //비밀번호 변경시 비밀번호확인 필드 trigger
   useEffect(() => {
@@ -36,7 +37,7 @@ export default function SignupPage() {
     trigger("passwordConfirmation");
   }, [formState.password.value]);
 
-  async function onSubmit(data) {
+  async function onSubmit(data: SignupFormData) {
     try {
       await handleSignup(data);
       alert("회원가입에 성공했습니다. \n로그인 페이지로 이동합니다.");
diff --git a/src/pages/auth/components/AuthContainer.jsx b/src/pages/auth/components/AuthContainer.tsx
similarity index 100%
rename from src/pages/auth/components/AuthContainer.jsx
rename to src/pages/auth/components/AuthContainer.tsx
diff --git a/src/pages/auth/components/Oauth.jsx b/src/pages/auth/components/Oauth.tsx
similarity index 100%
rename from src/pages/auth/components/Oauth.jsx
rename to src/pages/auth/components/Oauth.tsx
diff --git a/src/pages/auth/components/schema.js b/src/pages/auth/components/schema.ts
similarity index 100%
rename from src/pages/auth/components/schema.js
rename to src/pages/auth/components/schema.ts
diff --git a/src/pages/boards/BoardPage.jsx b/src/pages/boards/BoardPage.tsx
similarity index 100%
rename from src/pages/boards/BoardPage.jsx
rename to src/pages/boards/BoardPage.tsx
diff --git a/src/pages/error/ErrorPage.jsx b/src/pages/error/ErrorPage.jsx
deleted file mode 100644
index 97a5a6f13..000000000
--- a/src/pages/error/ErrorPage.jsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { Temporary } from "@components/ui";
-import { useRouteError } from "react-router-dom";
-
-export default function ErrorPage() {
-  const error = useRouteError();
-
-  let title = "알수없는 에러가 발생했습니다.";
-  let description = "문제가 발생했습니다.";
-
-  if (error.status === 500) {
-    description = error.message;
-  }
-
-  if (error.status === 404) {
-    title = "페이지를 찾을 수 없습니다.";
-    description = "요청하신 페이지가 존재하지 않습니다.";
-  }
-
-  return <Temporary title={title} description={description} />;
-}
diff --git a/src/pages/error/ErrorPage.tsx b/src/pages/error/ErrorPage.tsx
new file mode 100644
index 000000000..721bde6eb
--- /dev/null
+++ b/src/pages/error/ErrorPage.tsx
@@ -0,0 +1,22 @@
+import { Temporary } from "@components/ui";
+import { useRouteError, isRouteErrorResponse } from "react-router-dom";
+
+export default function ErrorPage() {
+  const error = useRouteError() as Error;
+
+  let title = "알수없는 에러가 발생했습니다.";
+  let description = "문제가 발생했습니다.";
+
+  if (isRouteErrorResponse(error)) {
+    if (error.status === 500) {
+      description = error.message;
+    }
+
+    if (error.status === 404) {
+      title = "페이지를 찾을 수 없습니다.";
+      description = "요청하신 페이지가 존재하지 않습니다.";
+    }
+  }
+
+  return <Temporary title={title} description={description} />;
+}
diff --git a/src/pages/etc/FaqPage.jsx b/src/pages/etc/FaqPage.tsx
similarity index 100%
rename from src/pages/etc/FaqPage.jsx
rename to src/pages/etc/FaqPage.tsx
diff --git a/src/pages/etc/PrivacyPage.jsx b/src/pages/etc/PrivacyPage.tsx
similarity index 100%
rename from src/pages/etc/PrivacyPage.jsx
rename to src/pages/etc/PrivacyPage.tsx
diff --git a/src/pages/landing/LandingPage.jsx b/src/pages/landing/LandingPage.tsx
similarity index 100%
rename from src/pages/landing/LandingPage.jsx
rename to src/pages/landing/LandingPage.tsx
diff --git a/src/pages/landing/components/Banner.jsx b/src/pages/landing/components/Banner.tsx
similarity index 74%
rename from src/pages/landing/components/Banner.jsx
rename to src/pages/landing/components/Banner.tsx
index 53d37ee08..52a578d14 100644
--- a/src/pages/landing/components/Banner.jsx
+++ b/src/pages/landing/components/Banner.tsx
@@ -1,12 +1,26 @@
 import { Button } from "@components/ui";
 import styles from "./Banner.module.scss";
+import { To } from "react-router-dom";
+
+export interface BannerProps {
+  title: string;
+  bannerType: "hero" | "footer";
+  action?: {
+    to: To;
+    label: string;
+  };
+  bannerImg: {
+    src: string;
+    alt: string;
+  };
+}
 
 export default function Banner({
   title,
   bannerType = "hero",
   action,
   bannerImg,
-}) {
+}: BannerProps) {
   return (
     <section className={`${styles.banner} ${styles[`${bannerType}-banner`]}`}>
       <div className={styles.inner}>
diff --git a/src/pages/landing/components/Feature.jsx b/src/pages/landing/components/Feature.tsx
similarity index 70%
rename from src/pages/landing/components/Feature.jsx
rename to src/pages/landing/components/Feature.tsx
index 86c21fa14..91086915b 100644
--- a/src/pages/landing/components/Feature.jsx
+++ b/src/pages/landing/components/Feature.tsx
@@ -1,6 +1,24 @@
 import styles from "./Feature.module.scss";
 
-export default function Feature({ list }) {
+type Featrue = {
+  keyword: string;
+  title: string;
+  description: string;
+  featureImg: {
+    src: string;
+    alt: string;
+  };
+};
+
+interface FeatureProps {
+  list: Featrue[];
+}
+
+type FetaureItemProps = Featrue & {
+  reverse: boolean;
+};
+
+export default function Feature({ list }: FeatureProps) {
   return (
     <section className={styles.features}>
       <h2 className="a11y">판다마켓의 기능들</h2>
@@ -15,7 +33,13 @@ export default function Feature({ list }) {
   );
 }
 
-function FeatureItem({ reverse, keyword, title, featureImg, description }) {
+function FeatureItem({
+  reverse,
+  keyword,
+  title,
+  featureImg,
+  description,
+}: FetaureItemProps) {
   return (
     <div className={`${styles.feature} ${reverse ? styles.reverse : ""}`}>
       <div className={styles.inner}>
diff --git a/src/pages/landing/components/landingContents.js b/src/pages/landing/components/landingContents.ts
similarity index 92%
rename from src/pages/landing/components/landingContents.js
rename to src/pages/landing/components/landingContents.ts
index 01e9dd4ba..c7489ac39 100644
--- a/src/pages/landing/components/landingContents.js
+++ b/src/pages/landing/components/landingContents.ts
@@ -3,8 +3,9 @@ import bottomBannerImg from "@assets/img/landing/banner_img_bottom.svg";
 import featureImg1 from "@assets/img/landing/landing_content_01.svg";
 import featureImg2 from "@assets/img/landing/landing_content_02.svg";
 import featureImg3 from "@assets/img/landing/landing_content_03.svg";
+import { BannerProps } from "./Banner";
 
-export const heroBannerData = {
+export const heroBannerData: BannerProps = {
   bannerType: "hero",
   title: "일상의 모든 물건을 \n거래해 보세요",
   action: { to: "/items", label: "구경하러가기" },
@@ -14,7 +15,7 @@ export const heroBannerData = {
   },
 };
 
-export const footerBannerData = {
+export const footerBannerData: BannerProps = {
   bannerType: "footer",
   title: "믿을 수 있는 \n판다마켓 중고 거래",
   bannerImg: {
diff --git a/src/service/comments.ts b/src/service/comments.ts
index 1ca351f7f..63e29aa2a 100644
--- a/src/service/comments.ts
+++ b/src/service/comments.ts
@@ -1,5 +1,5 @@
 import { axiosInstance } from "@service/axios";
-import { BoardName, CommentFormSchema } from "@type/comment";
+import { BoardName, CommentFormData } from "@type/comment";
 
 export async function getComments(
   name: BoardName,
@@ -20,7 +20,7 @@ export async function getComments(
 export async function addComment(
   name: BoardName,
   id: number,
-  formData: CommentFormSchema
+  formData: CommentFormData
 ) {
   const response = await axiosInstance.post(
     `/${name}/${id}/comments`,
@@ -38,7 +38,7 @@ export async function removeComment(commentId: number) {
 
 export async function updateComment(
   commentId: number,
-  formData: CommentFormSchema
+  formData: CommentFormData
 ) {
   const response = await axiosInstance.patch(
     `/comments/${commentId}`,
diff --git a/src/types/comment.ts b/src/types/comment.ts
index 99b47d081..f584a0cdf 100644
--- a/src/types/comment.ts
+++ b/src/types/comment.ts
@@ -15,6 +15,6 @@ export type Comment = {
   id: number;
 };
 
-export type CommentFormSchema = {
+export type CommentFormData = {
   content: string;
 };

From f75418e56e6d7a053d3f50978694d702b141faae Mon Sep 17 00:00:00 2001
From: "chanki.kim" <chanki.kim89@gmail.com>
Date: Mon, 30 Dec 2024 14:05:12 +0900
Subject: [PATCH 19/72] =?UTF-8?q?Chore:=20=EC=83=81=ED=92=88=20=EB=A6=AC?=
 =?UTF-8?q?=EC=8A=A4=ED=8A=B8,=20=EC=88=98=EC=A0=95,=20=EC=B6=94=EA=B0=80?=
 =?UTF-8?q?=20=ED=8E=98=EC=9D=B4=EC=A7=80=20ts=20=EC=9E=91=EC=97=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Field/ImageUpload.tsx          |  6 +++---
 src/components/Field/Input.tsx                |  2 +-
 src/components/Field/NumberInput.tsx          |  6 +++---
 src/components/Field/Textarea.tsx             |  2 +-
 src/components/Section/Section.tsx            |  2 +-
 src/components/ui/Author.tsx                  |  2 +-
 src/components/ui/Avatar.tsx                  |  2 +-
 src/components/ui/Select.tsx                  |  2 +-
 src/hooks/useForm.ts                          |  5 +++--
 src/hooks/useLocalStorage.ts                  |  4 ++--
 src/hooks/useSingleFile.ts                    |  9 ++++++++-
 .../{AllItemsPage.jsx => AllItemsPage.tsx}    | 11 +++++------
 .../{BestItemsPage.jsx => BestItemsPage.tsx}  |  2 +-
 .../{ItemAddPage.jsx => ItemAddPage.tsx}      |  0
 src/pages/items/ItemDetailPage.loader.js      | 11 -----------
 src/pages/items/ItemDetailPage.loader.ts      | 16 ++++++++++++++++
 ...{ItemDetailPage.jsx => ItemDetailPage.tsx} |  7 ++++++-
 src/pages/items/ItemModifyPage.loader.js      |  8 --------
 src/pages/items/ItemModifyPage.loader.ts      | 13 +++++++++++++
 ...{ItemModifyPage.jsx => ItemModifyPage.tsx} | 12 ++++--------
 .../items/{ItemsPage.jsx => ItemsPage.tsx}    |  0
 .../{ProductDetail.jsx => ProductDetail.tsx}  | 12 +++++++++---
 .../{ProductFilter.jsx => ProductFilter.tsx}  | 13 ++++++++++++-
 .../{ProductForm.jsx => ProductForm.tsx}      | 19 +++++++++++++------
 .../{ProductItem.jsx => ProductItem.tsx}      | 17 +++++++++++++++--
 .../{ProductList.jsx => ProductList.tsx}      | 17 +++++++++++++++--
 .../items/components/{schema.js => schema.ts} |  3 ++-
 ...ProductActions.js => useProductActions.ts} | 19 +++++++++++++------
 .../{useProductList.js => useProductList.ts}  | 15 +++++++++++++--
 ...{useRecentSearch.js => useRecentSearch.ts} | 18 +++++++++++++-----
 src/service/comments.ts                       |  2 +-
 src/service/product.ts                        |  9 ++++++---
 src/types/product.ts                          |  9 +++++++++
 src/util/formatter.ts                         |  2 +-
 34 files changed, 192 insertions(+), 85 deletions(-)
 rename src/pages/items/{AllItemsPage.jsx => AllItemsPage.tsx} (94%)
 rename src/pages/items/{BestItemsPage.jsx => BestItemsPage.tsx} (95%)
 rename src/pages/items/{ItemAddPage.jsx => ItemAddPage.tsx} (100%)
 delete mode 100644 src/pages/items/ItemDetailPage.loader.js
 create mode 100644 src/pages/items/ItemDetailPage.loader.ts
 rename src/pages/items/{ItemDetailPage.jsx => ItemDetailPage.tsx} (80%)
 delete mode 100644 src/pages/items/ItemModifyPage.loader.js
 create mode 100644 src/pages/items/ItemModifyPage.loader.ts
 rename src/pages/items/{ItemModifyPage.jsx => ItemModifyPage.tsx} (74%)
 rename src/pages/items/{ItemsPage.jsx => ItemsPage.tsx} (100%)
 rename src/pages/items/components/{ProductDetail.jsx => ProductDetail.tsx} (90%)
 rename src/pages/items/components/{ProductFilter.jsx => ProductFilter.tsx} (51%)
 rename src/pages/items/components/{ProductForm.jsx => ProductForm.tsx} (85%)
 rename src/pages/items/components/{ProductItem.jsx => ProductItem.tsx} (84%)
 rename src/pages/items/components/{ProductList.jsx => ProductList.tsx} (72%)
 rename src/pages/items/components/{schema.js => schema.ts} (90%)
 rename src/pages/items/components/{useProductActions.js => useProductActions.ts} (67%)
 rename src/pages/items/components/{useProductList.js => useProductList.ts} (77%)
 rename src/pages/items/components/{useRecentSearch.js => useRecentSearch.ts} (77%)

diff --git a/src/components/Field/ImageUpload.tsx b/src/components/Field/ImageUpload.tsx
index 3aaeeccda..1e3f9d314 100644
--- a/src/components/Field/ImageUpload.tsx
+++ b/src/components/Field/ImageUpload.tsx
@@ -8,11 +8,11 @@ const LIMIT_SIZE_MB = 2;
 
 interface ImageUploadProps {
   error: string | null;
-  value: File;
+  value: Blob | File | string | string[] | undefined;
   id: string;
   name: string;
-  onChange: (name: string, file: File | undefined) => {};
-  placeholder: string;
+  onChange: (name: string, file: File | undefined) => void;
+  placeholder?: string;
 }
 
 export function ImageUpload({
diff --git a/src/components/Field/Input.tsx b/src/components/Field/Input.tsx
index 063700937..d41ee0482 100644
--- a/src/components/Field/Input.tsx
+++ b/src/components/Field/Input.tsx
@@ -6,7 +6,7 @@ import iconViewOff from "@assets/img/icon/icon_view_off.svg";
 import styles from "./Input.module.scss";
 
 interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
-  type: string;
+  type?: string;
   error: string | null;
   value: string;
 }
diff --git a/src/components/Field/NumberInput.tsx b/src/components/Field/NumberInput.tsx
index 505ab02d2..b9c0d2c06 100644
--- a/src/components/Field/NumberInput.tsx
+++ b/src/components/Field/NumberInput.tsx
@@ -4,10 +4,10 @@ import { Error } from "@components/Field";
 import styles from "./Input.module.scss";
 
 interface NumberInputProps extends InputHTMLAttributes<HTMLInputElement> {
-  type: string;
+  type?: string;
   error: string | null;
-  value: number;
-  formatter: (value: number) => string;
+  value: number | undefined;
+  formatter: (value: number | undefined) => string;
 }
 
 export function NumberInput({
diff --git a/src/components/Field/Textarea.tsx b/src/components/Field/Textarea.tsx
index 31459cf21..4af2fff7f 100644
--- a/src/components/Field/Textarea.tsx
+++ b/src/components/Field/Textarea.tsx
@@ -6,7 +6,7 @@ import { TextareaHTMLAttributes } from "react";
 interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
   error: string | null;
   value: string;
-  size: "sm" | "lg";
+  size?: "sm" | "lg";
 }
 
 export function Textarea({ error, value, size, ...props }: TextareaProps) {
diff --git a/src/components/Section/Section.tsx b/src/components/Section/Section.tsx
index 9f22de3de..69b1c19ea 100644
--- a/src/components/Section/Section.tsx
+++ b/src/components/Section/Section.tsx
@@ -5,7 +5,7 @@ export function Section({ children }: { children: ReactNode }) {
   return <section className={styles.section}>{children}</section>;
 }
 
-function Header({ title, children }: { title: string; children: ReactNode }) {
+function Header({ title, children }: { title: string; children?: ReactNode }) {
   return (
     <header className={styles.header}>
       <h2 className={styles.title}>{title}</h2>
diff --git a/src/components/ui/Author.tsx b/src/components/ui/Author.tsx
index 0ebd0209b..bc1b2670f 100644
--- a/src/components/ui/Author.tsx
+++ b/src/components/ui/Author.tsx
@@ -3,7 +3,7 @@ import { toDate } from "@util/formatter";
 import styles from "./Author.module.scss";
 
 interface AuthorProps {
-  avatar: string;
+  avatar?: string;
   nickname: string;
   updatedAt: string;
 }
diff --git a/src/components/ui/Avatar.tsx b/src/components/ui/Avatar.tsx
index b5f7d7e31..fb3b089e0 100644
--- a/src/components/ui/Avatar.tsx
+++ b/src/components/ui/Avatar.tsx
@@ -5,7 +5,7 @@ import { SyntheticEvent } from "react";
 
 interface AvatarProps {
   nickname: string;
-  img: string;
+  img: string | undefined;
   hover?: boolean;
 }
 
diff --git a/src/components/ui/Select.tsx b/src/components/ui/Select.tsx
index 4a083920f..e7c2e979f 100644
--- a/src/components/ui/Select.tsx
+++ b/src/components/ui/Select.tsx
@@ -9,7 +9,7 @@ interface SelectProps {
     value: string;
     label: string;
   }[];
-  onChange: () => void;
+  onChange: (value: string) => void;
 }
 
 export function Select({ value, options = [], onChange }: SelectProps) {
diff --git a/src/hooks/useForm.ts b/src/hooks/useForm.ts
index a2ede6a94..753ebe0e6 100644
--- a/src/hooks/useForm.ts
+++ b/src/hooks/useForm.ts
@@ -1,6 +1,7 @@
 import { ChangeEvent, FormEvent, useState } from "react";
 
-type FieldValue = string | number | File | undefined;
+export type FieldValue = string[] | string | number | File | Blob | undefined;
+
 type FieldValues = {
   [key: string]: FieldValue;
 };
@@ -108,7 +109,7 @@ export default function useForm<T extends FieldValues>(
     handleChange(name, value);
   }
 
-  function handleChange(name: keyof T, value: FieldValue) {
+  function handleChange(name: keyof T | string, value: FieldValue) {
     const { isValid, message } = validate(name, value);
 
     setFormState((prev) => ({
diff --git a/src/hooks/useLocalStorage.ts b/src/hooks/useLocalStorage.ts
index 453f45a8f..5df1948b0 100644
--- a/src/hooks/useLocalStorage.ts
+++ b/src/hooks/useLocalStorage.ts
@@ -11,7 +11,7 @@ export default function useLocalStorage(key: string, initialValue: string[]) {
     }
   });
 
-  function setValue(value: string[]) {
+  function setValue(value: string[] | ((value: string[]) => void)) {
     try {
       //useState의 setState에 callback을 넘기는 행동처럼 사용가능하도록
       const newValue = value instanceof Function ? value(state) : value;
@@ -22,5 +22,5 @@ export default function useLocalStorage(key: string, initialValue: string[]) {
     }
   }
 
-  return [state, setValue];
+  return [state, setValue] as const;
 }
diff --git a/src/hooks/useSingleFile.ts b/src/hooks/useSingleFile.ts
index 0c2862bd4..072682cbd 100644
--- a/src/hooks/useSingleFile.ts
+++ b/src/hooks/useSingleFile.ts
@@ -1,7 +1,7 @@
 import { ChangeEvent, useEffect, useRef, useState } from "react";
 
 interface SingleFileProps {
-  value: File;
+  value: Blob | File | string | string[] | undefined;
   onChange: (file: File | undefined) => void;
   accept: string;
   limitSize: number;
@@ -32,6 +32,13 @@ export default function useSingleFile({
 
   useEffect(() => {
     if (!value) return;
+    if (Array.isArray(value)) {
+      setPreview(value[0]);
+
+      return () => {
+        setPreview(null);
+      };
+    }
 
     if (typeof value === "string") {
       setPreview(value);
diff --git a/src/pages/items/AllItemsPage.jsx b/src/pages/items/AllItemsPage.tsx
similarity index 94%
rename from src/pages/items/AllItemsPage.jsx
rename to src/pages/items/AllItemsPage.tsx
index a0dd13c1b..d740f8831 100644
--- a/src/pages/items/AllItemsPage.jsx
+++ b/src/pages/items/AllItemsPage.tsx
@@ -28,8 +28,8 @@ export default function AllItemsPage() {
   });
 
   const { isLoading, error, items, totalCount } = useProductList({
-    page,
-    pageSize,
+    page: Number(page),
+    pageSize: Number(pageSize),
     keyword,
     orderBy,
   });
@@ -53,15 +53,15 @@ export default function AllItemsPage() {
     handleRecentSearchClear,
   } = useRecentSearch({ initialKeyword: keyword, onChange: handleSearch });
 
-  function handlePage(page) {
+  function handlePage(page: number) {
     setParams((prev) => ({ ...prev, page }), { preventScrollReset: true });
   }
 
-  function handleSearch(keyword) {
+  function handleSearch(keyword: string) {
     setParams((prev) => ({ ...prev, page: 1, keyword }));
   }
 
-  function handleOrderBy(orderBy) {
+  function handleOrderBy(orderBy: string) {
     setParams((prev) => ({ ...prev, orderBy }));
   }
 
@@ -72,7 +72,6 @@ export default function AllItemsPage() {
           search={
             <Recent
               title="최근검색"
-              storageKey="keyword"
               data={recentSearch}
               onItemClick={handleRecentSearchClick}
               onItemClear={handleRecentSearchClear}
diff --git a/src/pages/items/BestItemsPage.jsx b/src/pages/items/BestItemsPage.tsx
similarity index 95%
rename from src/pages/items/BestItemsPage.jsx
rename to src/pages/items/BestItemsPage.tsx
index f095b1329..d9c349a51 100644
--- a/src/pages/items/BestItemsPage.jsx
+++ b/src/pages/items/BestItemsPage.tsx
@@ -15,7 +15,7 @@ export default function BestItemsPage() {
   });
 
   return (
-    <Section title="베스트 상품">
+    <Section>
       <Section.Header title="베스트 상품" />
       <Section.Content>
         <ProductList
diff --git a/src/pages/items/ItemAddPage.jsx b/src/pages/items/ItemAddPage.tsx
similarity index 100%
rename from src/pages/items/ItemAddPage.jsx
rename to src/pages/items/ItemAddPage.tsx
diff --git a/src/pages/items/ItemDetailPage.loader.js b/src/pages/items/ItemDetailPage.loader.js
deleted file mode 100644
index 9b67d8ba9..000000000
--- a/src/pages/items/ItemDetailPage.loader.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import { getProduct } from "@service/product";
-import { getComments } from "@service/comments";
-
-export default async function loader({ params }) {
-  const { id } = params;
-
-  const comments = getComments("products", { productId: id, limit: 5 });
-  const detail = await getProduct(id);
-
-  return { detail, comments };
-}
diff --git a/src/pages/items/ItemDetailPage.loader.ts b/src/pages/items/ItemDetailPage.loader.ts
new file mode 100644
index 000000000..deeba952b
--- /dev/null
+++ b/src/pages/items/ItemDetailPage.loader.ts
@@ -0,0 +1,16 @@
+import { Params, redirect } from "react-router-dom";
+import { getProduct } from "@service/product";
+import { getComments } from "@service/comments";
+
+export default async function loader({ params }: { params: Params }) {
+  const { id } = params;
+
+  if (!id) {
+    return redirect("/items");
+  }
+
+  const comments = getComments("products", { productId: Number(id), limit: 5 });
+  const detail = await getProduct(Number(id));
+
+  return { detail, comments };
+}
diff --git a/src/pages/items/ItemDetailPage.jsx b/src/pages/items/ItemDetailPage.tsx
similarity index 80%
rename from src/pages/items/ItemDetailPage.jsx
rename to src/pages/items/ItemDetailPage.tsx
index e221c3e9d..1ca90f71d 100644
--- a/src/pages/items/ItemDetailPage.jsx
+++ b/src/pages/items/ItemDetailPage.tsx
@@ -5,9 +5,14 @@ import ProductDetail from "./components/ProductDetail";
 import { BackToList } from "@components/Button/BackToList";
 import { Loading } from "@components/ui/Loading";
 import { CommentAdd, CommentList } from "@components/Comment";
+import { Product } from "@type/product";
+import { CommentList as CommentListType } from "@type/comment";
 
 export default function ItemDetailPage() {
-  const { detail, comments } = useLoaderData();
+  const { detail, comments } = useLoaderData() as {
+    detail: Product;
+    comments: CommentListType;
+  };
 
   return (
     <PageWrapper>
diff --git a/src/pages/items/ItemModifyPage.loader.js b/src/pages/items/ItemModifyPage.loader.js
deleted file mode 100644
index 9a86d6c78..000000000
--- a/src/pages/items/ItemModifyPage.loader.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import { getProduct } from "@service/product";
-
-export default async function loader({ params }) {
-  const { id } = params;
-  const detail = await getProduct(id);
-
-  return { detail };
-}
diff --git a/src/pages/items/ItemModifyPage.loader.ts b/src/pages/items/ItemModifyPage.loader.ts
new file mode 100644
index 000000000..372607878
--- /dev/null
+++ b/src/pages/items/ItemModifyPage.loader.ts
@@ -0,0 +1,13 @@
+import { Params, redirect } from "react-router-dom";
+import { getProduct } from "@service/product";
+
+export default async function loader({ params }: { params: Params }) {
+  const { id } = params;
+  if (!id) {
+    return redirect("/items");
+  }
+
+  const detail = await getProduct(Number(id));
+
+  return { detail };
+}
diff --git a/src/pages/items/ItemModifyPage.jsx b/src/pages/items/ItemModifyPage.tsx
similarity index 74%
rename from src/pages/items/ItemModifyPage.jsx
rename to src/pages/items/ItemModifyPage.tsx
index cf4a6af47..a0ed82236 100644
--- a/src/pages/items/ItemModifyPage.jsx
+++ b/src/pages/items/ItemModifyPage.tsx
@@ -3,9 +3,10 @@ import { useAuth } from "@context/AuthContext";
 import { PageWrapper } from "@components/Page";
 import ProductForm from "./components/ProductForm";
 import useProductActions from "./components/useProductActions";
+import { Product } from "@type/product";
 
 export default function ItemModifyPage() {
-  const { detail } = useLoaderData();
+  const { detail } = useLoaderData() as { detail: Product };
   const {
     auth: { user },
   } = useAuth();
@@ -16,16 +17,11 @@ export default function ItemModifyPage() {
     return <Navigate to="/items" replace />;
   }
 
-  const initialData = {
-    ...detail,
-    images: detail.images[0],
-  };
-
   return (
     <PageWrapper>
       <ProductForm
-        initialData={initialData}
-        onProductSubmit={(formData) => handleProductModify(detail, formData)}
+        initialData={detail}
+        onProductSubmit={(formData) => handleProductModify(formData)}
         isEdit
       />
     </PageWrapper>
diff --git a/src/pages/items/ItemsPage.jsx b/src/pages/items/ItemsPage.tsx
similarity index 100%
rename from src/pages/items/ItemsPage.jsx
rename to src/pages/items/ItemsPage.tsx
diff --git a/src/pages/items/components/ProductDetail.jsx b/src/pages/items/components/ProductDetail.tsx
similarity index 90%
rename from src/pages/items/components/ProductDetail.jsx
rename to src/pages/items/components/ProductDetail.tsx
index 75a789bc4..abdda9ebe 100644
--- a/src/pages/items/components/ProductDetail.jsx
+++ b/src/pages/items/components/ProductDetail.tsx
@@ -1,3 +1,4 @@
+import { ReactNode } from "react";
 import { Link, useNavigate, useRevalidator } from "react-router-dom";
 import { useAuth } from "@context/AuthContext";
 import {
@@ -11,8 +12,13 @@ import { More } from "@components/Button";
 import { toWon } from "@util/formatter";
 import styles from "./ProductDetail.module.scss";
 import useProductActions from "./useProductActions";
+import { Product } from "@type/product";
 
-export default function ProductDetail({ detail }) {
+interface ProductDetail {
+  detail: Product;
+}
+
+export default function ProductDetail({ detail }: ProductDetail) {
   const {
     id,
     images,
@@ -57,7 +63,7 @@ export default function ProductDetail({ detail }) {
 
     if (confirm("정말 삭제할까요?")) {
       try {
-        await handleProductDelete(id);
+        await handleProductDelete();
         alert("상품을 삭제했습니다.");
         navigate("/items");
       } catch (err) {
@@ -113,7 +119,7 @@ export default function ProductDetail({ detail }) {
   );
 }
 
-function Section({ title, children }) {
+function Section({ title, children }: { title: string; children: ReactNode }) {
   return (
     <section className={styles.section}>
       <h3 className={styles.title}>{title}</h3>
diff --git a/src/pages/items/components/ProductFilter.jsx b/src/pages/items/components/ProductFilter.tsx
similarity index 51%
rename from src/pages/items/components/ProductFilter.jsx
rename to src/pages/items/components/ProductFilter.tsx
index b12ac4458..6055b8f02 100644
--- a/src/pages/items/components/ProductFilter.jsx
+++ b/src/pages/items/components/ProductFilter.tsx
@@ -1,6 +1,17 @@
+import { ReactNode } from "react";
 import styles from "./ProductFilter.module.scss";
 
-export default function ProductFilter({ search, action, filter }) {
+interface ProductFilterProps {
+  search: ReactNode;
+  action: ReactNode;
+  filter: ReactNode;
+}
+
+export default function ProductFilter({
+  search,
+  action,
+  filter,
+}: ProductFilterProps) {
   return (
     <>
       <div className={styles.search}>{search}</div>
diff --git a/src/pages/items/components/ProductForm.jsx b/src/pages/items/components/ProductForm.tsx
similarity index 85%
rename from src/pages/items/components/ProductForm.jsx
rename to src/pages/items/components/ProductForm.tsx
index f2f73d378..0ac0327ee 100644
--- a/src/pages/items/components/ProductForm.jsx
+++ b/src/pages/items/components/ProductForm.tsx
@@ -13,12 +13,19 @@ import {
   NumberInput,
 } from "@components/Field";
 import { addItemSchema } from "./schema";
+import { Product, ProductFormData } from "@type/product";
+
+interface ProductFormProps {
+  initialData?: Partial<Product>;
+  onProductSubmit: (formData: ProductFormData) => void;
+  isEdit?: boolean;
+}
 
 export default function ProductForm({
-  initialData = {},
+  initialData,
   onProductSubmit,
   isEdit = false,
-}) {
+}: ProductFormProps) {
   const {
     formError,
     isFormValid,
@@ -26,15 +33,16 @@ export default function ProductForm({
     handleChange,
     handleSubmit,
     register,
-  } = useForm(addItemSchema, initialData);
+  } = useForm<ProductFormData>(addItemSchema, initialData);
   const navigate = useNavigate();
 
-  const redirect = isEdit ? `/items/${initialData.id}` : "/items";
+  const redirect =
+    isEdit && initialData ? `/items/${initialData.id}` : "/items";
   const message = isEdit
     ? "성공적으로 수정했습니다."
     : "성공적으로 작성했습니다.";
 
-  async function onSubmit(data) {
+  async function onSubmit(data: ProductFormData) {
     try {
       await onProductSubmit(data);
       alert(message);
@@ -84,7 +92,6 @@ export default function ProductForm({
           <FieldItem>
             <FieldItem.Label htmlFor="tags">태그</FieldItem.Label>
             <TagsInput
-              label="태그"
               placeholder="태그를 입력해주세요"
               {...register("tags")}
               onChange={handleChange}
diff --git a/src/pages/items/components/ProductItem.jsx b/src/pages/items/components/ProductItem.tsx
similarity index 84%
rename from src/pages/items/components/ProductItem.jsx
rename to src/pages/items/components/ProductItem.tsx
index 2e303026b..6d7b97082 100644
--- a/src/pages/items/components/ProductItem.jsx
+++ b/src/pages/items/components/ProductItem.tsx
@@ -4,8 +4,15 @@ import { Thumbnail } from "@components/ui";
 import { toWon } from "@util/formatter";
 import iconHeart from "@assets/img/icon/icon_heart.svg";
 import styles from "./ProductItem.module.scss";
+import { Product } from "@type/product";
 
-function HighLightWithKeyword({ content, keyword }) {
+function HighLightWithKeyword({
+  content,
+  keyword,
+}: {
+  content: string;
+  keyword?: string;
+}) {
   if (!keyword) return <>{content}</>;
 
   const textArray = content.split(new RegExp(`(${keyword})`, "gi"));
@@ -22,7 +29,13 @@ function HighLightWithKeyword({ content, keyword }) {
   );
 }
 
-export default function ProductItem({ item, keyword }) {
+export default function ProductItem({
+  item,
+  keyword,
+}: {
+  item: Product;
+  keyword?: string;
+}) {
   const { id, images, name, price, favoriteCount } = item;
 
   return (
diff --git a/src/pages/items/components/ProductList.jsx b/src/pages/items/components/ProductList.tsx
similarity index 72%
rename from src/pages/items/components/ProductList.jsx
rename to src/pages/items/components/ProductList.tsx
index d247e0b3e..aac0da13f 100644
--- a/src/pages/items/components/ProductList.jsx
+++ b/src/pages/items/components/ProductList.tsx
@@ -2,14 +2,27 @@ import clsx from "clsx";
 import { List } from "@components/List";
 import ProductItem from "./ProductItem";
 import styles from "./ProductList.module.scss";
+import { Product } from "@type/product";
+
+interface ProductListProps {
+  items: Product[];
+  keyword?: string;
+  isLoading: boolean;
+  error: Error | null;
+  rspnCol: {
+    pc: number;
+    tablet: number;
+    mobile: number;
+  };
+}
 
 export default function ProductList({
   items,
   keyword,
   isLoading,
   error,
-  rspnCol = { pc: 5, table: 3, mobile: 2 },
-}) {
+  rspnCol = { pc: 5, tablet: 3, mobile: 2 },
+}: ProductListProps) {
   const col = Object.entries(rspnCol).map(
     ([key, value]) => styles[`${key}-col-${value}`]
   );
diff --git a/src/pages/items/components/schema.js b/src/pages/items/components/schema.ts
similarity index 90%
rename from src/pages/items/components/schema.js
rename to src/pages/items/components/schema.ts
index 0246e2ba0..81de134db 100644
--- a/src/pages/items/components/schema.js
+++ b/src/pages/items/components/schema.ts
@@ -1,3 +1,4 @@
+import { FieldValue } from "@hooks/useForm";
 import { PRODUCT_VALIDATION_MESSAGE as MESSAGE } from "@util/validation";
 
 export const addItemSchema = {
@@ -42,7 +43,7 @@ export const addItemSchema = {
         },
       ],
       custom: {
-        validate: (value) => value >= 100,
+        validate: (value: FieldValue) => Number(value) >= 100,
         message: "최소 100원이상 작성해주세요.",
       },
     },
diff --git a/src/pages/items/components/useProductActions.js b/src/pages/items/components/useProductActions.ts
similarity index 67%
rename from src/pages/items/components/useProductActions.js
rename to src/pages/items/components/useProductActions.ts
index bb080b126..a4773d208 100644
--- a/src/pages/items/components/useProductActions.js
+++ b/src/pages/items/components/useProductActions.ts
@@ -5,15 +5,18 @@ import {
   toggleLike,
   uploadProductImage,
 } from "@service/product";
+import { ProductFormData } from "@type/product";
+
+export default function useProductActions(productId?: number) {
+  async function handleLike(flag: boolean) {
+    if (!productId) return;
 
-export default function useProductActions(productId) {
-  async function handleLike(flag) {
     return toggleLike(productId, flag);
   }
 
-  async function handleProductAdd(formData) {
+  async function handleProductAdd(formData: ProductFormData) {
     try {
-      if (formData.images) {
+      if (formData.images instanceof Blob) {
         const imgFormData = new FormData();
         imgFormData.append("image", formData.images);
 
@@ -27,9 +30,11 @@ export default function useProductActions(productId) {
     }
   }
 
-  async function handleProductModify(prevData, formData) {
+  async function handleProductModify(formData: ProductFormData) {
+    if (!productId) return;
+
     try {
-      if (formData.images !== prevData.images[0]) {
+      if (formData.images instanceof Blob) {
         const imgFormData = new FormData();
         imgFormData.append("image", formData.images);
 
@@ -44,6 +49,8 @@ export default function useProductActions(productId) {
   }
 
   async function handleProductDelete() {
+    if (!productId) return;
+
     return deleteProduct(productId);
   }
 
diff --git a/src/pages/items/components/useProductList.js b/src/pages/items/components/useProductList.ts
similarity index 77%
rename from src/pages/items/components/useProductList.js
rename to src/pages/items/components/useProductList.ts
index 2d29baf81..fab00eea2 100644
--- a/src/pages/items/components/useProductList.js
+++ b/src/pages/items/components/useProductList.ts
@@ -2,8 +2,19 @@ import { useEffect } from "react";
 import { getProducts } from "@service/product";
 import useAsync from "@hooks/useAsync";
 
-export default function useProductList(params) {
-  const { page, pageSize, keyword, orderBy } = params;
+interface useProductListProps {
+  page?: number;
+  pageSize: number;
+  keyword?: string;
+  orderBy: string;
+}
+
+export default function useProductList({
+  page,
+  pageSize,
+  keyword,
+  orderBy,
+}: useProductListProps) {
   const {
     isLoading,
     error,
diff --git a/src/pages/items/components/useRecentSearch.js b/src/pages/items/components/useRecentSearch.ts
similarity index 77%
rename from src/pages/items/components/useRecentSearch.js
rename to src/pages/items/components/useRecentSearch.ts
index 2ee590028..4683216a6 100644
--- a/src/pages/items/components/useRecentSearch.js
+++ b/src/pages/items/components/useRecentSearch.ts
@@ -1,9 +1,17 @@
-import { useState } from "react";
+import { ChangeEvent, useState } from "react";
 import useLocalStorage from "@hooks/useLocalStorage";
 
 const RECENT_SEARCH_SIZE = 5;
 
-export default function useRecentSearch({ initialKeyword, onChange }) {
+interface useRecentSearchProps {
+  initialKeyword: string;
+  onChange: (keyword: string) => void;
+}
+
+export default function useRecentSearch({
+  initialKeyword,
+  onChange,
+}: useRecentSearchProps) {
   const [searchInput, setSearchInput] = useState(initialKeyword || "");
   const [recentSearch, setRecentSearch] = useLocalStorage("keyword", []);
 
@@ -22,7 +30,7 @@ export default function useRecentSearch({ initialKeyword, onChange }) {
     onChange(searchInput);
   }
 
-  function handleSearchChange(e) {
+  function handleSearchChange(e: ChangeEvent<HTMLInputElement>) {
     setSearchInput(e.target.value);
   }
 
@@ -32,7 +40,7 @@ export default function useRecentSearch({ initialKeyword, onChange }) {
   }
 
   // 최근검색 이벤트 핸들러 (click, remove, clear)
-  function handleRecentSearchClick(value) {
+  function handleRecentSearchClick(value: string) {
     setRecentSearch((prev) =>
       [value, ...prev.filter((keyword) => keyword !== value)].slice(
         0,
@@ -43,7 +51,7 @@ export default function useRecentSearch({ initialKeyword, onChange }) {
     onChange(value);
   }
 
-  function handleRecentSearchRemove(value) {
+  function handleRecentSearchRemove(value: string) {
     setRecentSearch((prev) => prev.filter((keyword) => keyword !== value));
   }
 
diff --git a/src/service/comments.ts b/src/service/comments.ts
index 63e29aa2a..d7f6e486f 100644
--- a/src/service/comments.ts
+++ b/src/service/comments.ts
@@ -7,7 +7,7 @@ export async function getComments(
     productId,
     limit = 5,
     cursor,
-  }: { productId: number; limit: number; cursor: number }
+  }: { productId: number; limit: number; cursor?: number }
 ) {
   const query = `limit=${limit}${cursor ? `&cursor=${cursor}` : ""}`;
   const response = await axiosInstance.get(
diff --git a/src/service/product.ts b/src/service/product.ts
index f46d45fe2..b428343ec 100644
--- a/src/service/product.ts
+++ b/src/service/product.ts
@@ -1,5 +1,5 @@
 import { axiosInstance } from "@service/axios";
-import { Product } from "@type/product";
+import { ProductFormData } from "@type/product";
 
 export async function getProducts(
   { page = 1, pageSize = 10, orderBy = "recent", keyword = "" },
@@ -17,13 +17,16 @@ export async function uploadProductImage(formData: FormData) {
   return response.data;
 }
 
-export async function addProduct(productData: Product) {
+export async function addProduct(productData: ProductFormData) {
   const response = await axiosInstance.post("/products", productData);
 
   return response.data;
 }
 
-export async function modifyProduct(productId: number, productData: Product) {
+export async function modifyProduct(
+  productId: number,
+  productData: ProductFormData
+) {
   const response = await axiosInstance.patch(
     `/products/${productId}`,
     productData
diff --git a/src/types/product.ts b/src/types/product.ts
index a20f205bc..839067f34 100644
--- a/src/types/product.ts
+++ b/src/types/product.ts
@@ -1,5 +1,6 @@
 export type Product = {
   createdAt: string;
+  updatedAt: string;
   favoriteCount: number;
   ownerNickname: string;
   ownerId: number;
@@ -18,3 +19,11 @@ export type ProductList = {
   totalCount: number;
   list: Product[];
 };
+
+export type ProductFormData = {
+  images: Blob | string[] | undefined;
+  tags: string[];
+  price: number | undefined;
+  description: string;
+  name: string;
+};
diff --git a/src/util/formatter.ts b/src/util/formatter.ts
index ff2c80baf..b7463b6f6 100644
--- a/src/util/formatter.ts
+++ b/src/util/formatter.ts
@@ -1,6 +1,6 @@
 import dayjs from "dayjs";
 
-export function toWon(price: number) {
+export function toWon(price: number | undefined) {
   return Number(price).toLocaleString() + "원";
 }
 

From 173d2621d039e2016fb8479ecc6dcd7ed50aa43e Mon Sep 17 00:00:00 2001
From: "chanki.kim" <chanki.kim89@gmail.com>
Date: Mon, 30 Dec 2024 23:58:35 +0900
Subject: [PATCH 20/72] =?UTF-8?q?Chore:=20react=20hook=20form,=20zod=20?=
 =?UTF-8?q?=EC=84=A4=EC=B9=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json | 39 ++++++++++++++++++++++++++++++++++++++-
 package.json      |  5 ++++-
 2 files changed, 42 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index edf920f51..a1d2ae90d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "1-weekly-mission",
       "version": "0.1.0",
       "dependencies": {
+        "@hookform/resolvers": "^3.9.1",
         "axios": "^1.7.8",
         "clsx": "^2.1.1",
         "dayjs": "^1.11.13",
@@ -15,7 +16,9 @@
         "lodash": "^4.17.21",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "react-router-dom": "^6.28.0"
+        "react-hook-form": "^7.54.2",
+        "react-router-dom": "^6.28.0",
+        "zod": "^3.24.1"
       },
       "devDependencies": {
         "@types/node": "^22.10.2",
@@ -704,6 +707,15 @@
         "node": ">=12"
       }
     },
+    "node_modules/@hookform/resolvers": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-3.9.1.tgz",
+      "integrity": "sha512-ud2HqmGBM0P0IABqoskKWI6PEf6ZDDBZkFqe2Vnl+mTHCEHzr3ISjjZyCwTjC/qpL25JC9aIDkloQejvMeq0ug==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react-hook-form": "^7.0.0"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
@@ -2022,6 +2034,22 @@
         "react": "^18.3.1"
       }
     },
+    "node_modules/react-hook-form": {
+      "version": "7.54.2",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.54.2.tgz",
+      "integrity": "sha512-eHpAUgUjWbZocoQYUHposymRb4ZP6d0uwUnooL2uOybA9/3tPUvoAKqEWK1WaSiTxxOfTpffNZP7QwlnM3/gEg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-hook-form"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17 || ^18 || ^19"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.14.2",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz",
@@ -2298,6 +2326,15 @@
       "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
       "dev": true,
       "license": "ISC"
+    },
+    "node_modules/zod": {
+      "version": "3.24.1",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.24.1.tgz",
+      "integrity": "sha512-muH7gBL9sI1nciMZV67X5fTKKBLtwpZ5VBp1vsOQzj1MhrBZ4wlVCm3gedKZWLp0Oyel8sIGfeiz54Su+OVT+A==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index 2faee63a1..6a10967c6 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@hookform/resolvers": "^3.9.1",
     "axios": "^1.7.8",
     "clsx": "^2.1.1",
     "dayjs": "^1.11.13",
@@ -10,7 +11,9 @@
     "lodash": "^4.17.21",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.28.0"
+    "react-hook-form": "^7.54.2",
+    "react-router-dom": "^6.28.0",
+    "zod": "^3.24.1"
   },
   "scripts": {
     "dev": "vite",

From ff2a18e58f68d73de67e730bdc6e3da14322096b Mon Sep 17 00:00:00 2001
From: "chanki.kim" <chanki.kim89@gmail.com>
Date: Tue, 31 Dec 2024 00:01:51 +0900
Subject: [PATCH 21/72] =?UTF-8?q?Feat:=20custom=20react=20hook=20form=20?=
 =?UTF-8?q?=ED=9B=85=20=EC=9E=91=EC=84=B1=20-=20=ED=86=B5=EC=8B=A0?=
 =?UTF-8?q?=EC=97=90=EB=9F=AC=EC=99=80=20=ED=95=84=EB=93=9C=EC=97=90?=
 =?UTF-8?q?=EB=9F=AC=EA=B0=92=EC=9D=84=20=EB=84=98=EA=B2=A8=EC=A4=84?=
 =?UTF-8?q?=EC=88=98=EC=9E=88=EB=8F=84=EB=A1=9D=20=EB=B3=80=ED=98=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/useFormWithError.ts | 43 +++++++++++++++++++++++++++++++++++
 1 file changed, 43 insertions(+)
 create mode 100644 src/hooks/useFormWithError.ts

diff --git a/src/hooks/useFormWithError.ts b/src/hooks/useFormWithError.ts
new file mode 100644
index 000000000..11d0691ed
--- /dev/null
+++ b/src/hooks/useFormWithError.ts
@@ -0,0 +1,43 @@
+import { useState } from "react";
+import { FieldPath, FieldValues, useForm, UseFormProps } from "react-hook-form";
+
+export default function useFormWithError<TFieldValues extends FieldValues>(
+  options: UseFormProps<TFieldValues>
+) {
+  const [formError, setFormError] = useState<Error | null>(null);
+  const form = useForm<TFieldValues>(options);
+  const { handleSubmit, getFieldState, register, formState } = form;
+
+  function registerWithError<TFieldName extends FieldPath<TFieldValues>>(
+    name: TFieldName
+  ) {
+    const { error, invalid, isTouched } = getFieldState(name, formState);
+
+    return {
+      ...register(name),
+      error: error?.message,
+      isValid: !invalid,
+      isTouched,
+    };
+  }
+
+  function handleSumbitWithError(
+    submitFn: (data: TFieldValues) => Promise<void>
+  ) {
+    return handleSubmit(async function (data) {
+      try {
+        setFormError(null);
+        await submitFn(data);
+      } catch (error) {
+        setFormError(error as Error);
+      }
+    });
+  }
+
+  return {
+    ...form,
+    register: registerWithError,
+    formError,
+    handleSubmit: handleSumbitWithError,
+  };
+}

From 9c2875a9942a1e2402326c13bd856a35b97f15de Mon Sep 17 00:00:00 2001
From: "chanki.kim" <chanki.kim89@gmail.com>
Date: Tue, 31 Dec 2024 00:09:59 +0900
Subject: [PATCH 22/72] =?UTF-8?q?Fix:=20auth=20service,=20types=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/service/auth.ts | 24 +++++++++++++++++-------
 src/types/auth.ts   | 16 ++++++++++++++++
 2 files changed, 33 insertions(+), 7 deletions(-)

diff --git a/src/service/auth.ts b/src/service/auth.ts
index 9c379529f..d3a361b4b 100644
--- a/src/service/auth.ts
+++ b/src/service/auth.ts
@@ -1,8 +1,15 @@
 import { axiosInstance } from "@service/axios";
-import { SigninFormData, SignupFormData } from "@type/auth";
+import {
+  RefreshResponse,
+  SigninFormData,
+  SigninResponse,
+  SignupFormData,
+  SignupResponse,
+  User,
+} from "@type/auth";
 
 export async function login({ email, password }: SigninFormData) {
-  const response = await axiosInstance.post("/auth/signIn", {
+  const response = await axiosInstance.post<SigninResponse>("/auth/signIn", {
     email,
     password,
   });
@@ -16,7 +23,7 @@ export async function signUp({
   password,
   passwordConfirmation,
 }: SignupFormData) {
-  const response = await axiosInstance.post("/auth/signUp", {
+  const response = await axiosInstance.post<SignupResponse>("/auth/signUp", {
     email,
     nickname,
     password,
@@ -27,15 +34,18 @@ export async function signUp({
 }
 
 export async function getUser() {
-  const response = await axiosInstance.get("/users/me");
+  const response = await axiosInstance.get<User>("/users/me");
 
   return response.data;
 }
 
 export async function refreshAccessToken(refreshToken: string) {
-  const response = await axiosInstance.post("/auth/refresh-token", {
-    refreshToken,
-  });
+  const response = await axiosInstance.post<RefreshResponse>(
+    "/auth/refresh-token",
+    {
+      refreshToken,
+    }
+  );
 
   return response.data;
 }
diff --git a/src/types/auth.ts b/src/types/auth.ts
index a45e26020..aaadca974 100644
--- a/src/types/auth.ts
+++ b/src/types/auth.ts
@@ -13,3 +13,19 @@ export type User = {
   nickname: string;
   id: number;
 };
+
+export type SigninResponse = {
+  accessToken: string;
+  refreshToken: string;
+  user: User;
+};
+
+export type SignupResponse = {
+  accessToken: string;
+  refreshToken: string;
+  user: User;
+};
+
+export type RefreshResponse = {
+  accessToken: string;
+};

From 40c1ae6267b06c389a179b66e92239c1205362dd Mon Sep 17 00:00:00 2001
From: "chanki.kim" <chanki.kim89@gmail.com>
Date: Tue, 31 Dec 2024 00:10:24 +0900
Subject: [PATCH 23/72] =?UTF-8?q?Fix:=20auth=20context=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95=20-=20=EA=B8=B0=EB=B3=B8=EA=B0=92=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95=20-=20type=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/context/AuthContext.tsx | 38 ++++++++++++++++++++++---------------
 1 file changed, 23 insertions(+), 15 deletions(-)

diff --git a/src/context/AuthContext.tsx b/src/context/AuthContext.tsx
index 3d2979562..ddf36cfa9 100644
--- a/src/context/AuthContext.tsx
+++ b/src/context/AuthContext.tsx
@@ -8,7 +8,12 @@ import {
 import { getUser, login, refreshAccessToken, signUp } from "@service/auth";
 import { isTokenValid } from "@util/helper";
 import { axiosInstance } from "@service/axios";
-import { SigninFormData, SignupFormData, User } from "@type/auth";
+import {
+  SigninFormData,
+  SignupFormData,
+  SignupResponse,
+  User,
+} from "@type/auth";
 
 type AuthContextProps = {
   auth: {
@@ -16,23 +21,21 @@ type AuthContextProps = {
     refreshToken: string | null;
     user: User | null;
   };
-  handleLogin: (formData: SigninFormData) => void;
+  handleLogin: (formData: SigninFormData) => Promise<User>;
   handleLogout: () => void;
-  handleSignup: (formData: SignupFormData) => void;
+  handleSignup: (formData: SignupFormData) => Promise<SignupResponse>;
 };
-const AuthContext = createContext<AuthContextProps>({
-  auth: {
-    accessToken: null,
-    refreshToken: null,
-    user: null,
-  },
-  handleLogin: () => {},
-  handleLogout: () => {},
-  handleSignup: () => {},
-});
+
+type AuthStateProps = {
+  accessToken: string | null;
+  refreshToken: string | null;
+  user: User | null;
+};
+
+const AuthContext = createContext<AuthContextProps | null>(null);
 
 export function AuthProvider({ children }: { children: ReactNode }) {
-  const [auth, setAuth] = useState(() => ({
+  const [auth, setAuth] = useState<AuthStateProps>(() => ({
     accessToken: localStorage.getItem("accessToken") || null,
     refreshToken: localStorage.getItem("refreshToken") || null,
     user: null,
@@ -173,5 +176,10 @@ export function AuthProvider({ children }: { children: ReactNode }) {
 }
 
 export function useAuth() {
-  return useContext(AuthContext);
+  const context = useContext(AuthContext);
+  if (!context) {
+    throw new Error("useAuth는 AuthProvider 내부에서만 사용가능합니다.");
+  }
+
+  return context;
 }

From 8f8ea962e0429580911d926c71babae894c6925f Mon Sep 17 00:00:00 2001
From: "chanki.kim" <chanki.kim89@gmail.com>
Date: Tue, 31 Dec 2024 00:12:02 +0900
Subject: [PATCH 24/72] =?UTF-8?q?Feat:=20input=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=88=98=EC=A0=95=20-=20=EB=A6=AC?=
 =?UTF-8?q?=EC=95=A1=ED=8A=B8=ED=9B=85=ED=8F=BC=EC=97=90=20=EB=A7=9E?=
 =?UTF-8?q?=EA=B2=8C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Field/Error.tsx |  5 +----
 src/components/Field/Input.tsx | 21 ++++++++++++---------
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/components/Field/Error.tsx b/src/components/Field/Error.tsx
index 45959e12e..974788447 100644
--- a/src/components/Field/Error.tsx
+++ b/src/components/Field/Error.tsx
@@ -1,9 +1,6 @@
 import styles from "./Error.module.scss";
 
-export function Error({ error }: { error: string | null }) {
-  if (!error) {
-    return null;
-  }
+export function Error({ error }: { error: string }) {
   return (
     <div className={styles["item-error"]}>
       {error || "오류가 발생했습니다."}
diff --git a/src/components/Field/Input.tsx b/src/components/Field/Input.tsx
index d41ee0482..40624e3cf 100644
--- a/src/components/Field/Input.tsx
+++ b/src/components/Field/Input.tsx
@@ -1,4 +1,4 @@
-import { InputHTMLAttributes, useState } from "react";
+import { forwardRef, InputHTMLAttributes, useState } from "react";
 import clsx from "clsx";
 import { Error } from "@components/Field";
 import iconViewOn from "@assets/img/icon/icon_view_on.svg";
@@ -7,19 +7,22 @@ import styles from "./Input.module.scss";
 
 interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
   type?: string;
-  error: string | null;
-  value: string;
+  error: string | undefined;
+  isValid: boolean;
+  isTouched: boolean;
 }
 
-export function Input({ type = "text", error, value, ...props }: InputProps) {
+export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
+  { type = "text", error, isValid, isTouched, ...props },
+  ref
+) {
   const [currentType, setCurrentType] = useState(type);
-  const valid = value && !error;
+  const valid = isValid && isTouched;
   const css = clsx(
     styles["field-box"],
     valid && styles.valid,
     error && styles.error
   );
-
   function handleVisibility() {
     setCurrentType((prev) => (prev === "password" ? "text" : "password"));
   }
@@ -27,7 +30,7 @@ export function Input({ type = "text", error, value, ...props }: InputProps) {
   return (
     <>
       <div className={styles.field}>
-        <input type={currentType} className={css} value={value} {...props} />
+        <input ref={ref} type={currentType} className={css} {...props} />
         {type === "password" && (
           <button
             type="button"
@@ -45,7 +48,7 @@ export function Input({ type = "text", error, value, ...props }: InputProps) {
           </button>
         )}
       </div>
-      <Error error={error} />
+      {error && <Error error={error} />}
     </>
   );
-}
+});

From f9280c05c6af9fca5a5e046c159d147f31177c6a Mon Sep 17 00:00:00 2001
From: "chanki.kim" <chanki.kim89@gmail.com>
Date: Tue, 31 Dec 2024 09:06:34 +0900
Subject: [PATCH 25/72] =?UTF-8?q?Feat:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8,=20?=
 =?UTF-8?q?=ED=9A=8C=EC=9B=90=EA=B0=80=EC=9E=85=20=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20=EC=88=98=EC=A0=95=20-=20=EB=A6=AC=EC=95=A1?=
 =?UTF-8?q?=ED=8A=B8=ED=9B=85=ED=8F=BC=20=EC=A0=81=EC=9A=A9=20-=20?=
 =?UTF-8?q?=EC=8A=A4=ED=82=A4=EB=A7=88=20=EC=9E=91=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/auth/LoginPage.tsx        |  24 ++++---
 src/pages/auth/SignupPage.tsx       |  33 ++++-----
 src/pages/auth/components/schema.ts | 105 +++++++---------------------
 src/types/auth.ts                   |  20 +++---
 4 files changed, 66 insertions(+), 116 deletions(-)

diff --git a/src/pages/auth/LoginPage.tsx b/src/pages/auth/LoginPage.tsx
index a7ea64509..a34adadd3 100644
--- a/src/pages/auth/LoginPage.tsx
+++ b/src/pages/auth/LoginPage.tsx
@@ -1,11 +1,12 @@
 import { Navigate, useNavigate } from "react-router-dom";
 import { useAuth } from "@context/AuthContext";
-import useForm from "@hooks/useForm";
 import { Form, FieldItem, Input } from "@components/Field";
 import { Button } from "@components/ui";
 import AuthContainer from "./components/AuthContainer";
-import { loginFormSchema } from "./components/schema";
-import { SigninFormData } from "@type/auth";
+import useFormWithError from "@hooks/useFormWithError";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { signinFormSchmea } from "./components/schema";
+import { SigninFormType } from "@type/auth";
 
 export default function LoginPage() {
   const navigate = useNavigate();
@@ -18,10 +19,17 @@ export default function LoginPage() {
     return <Navigate to="/items" />;
   }
 
-  const { formError, isFormValid, isLoading, handleSubmit, register } =
-    useForm<SigninFormData>(loginFormSchema);
+  const {
+    formError,
+    register,
+    handleSubmit,
+    formState: { isSubmitting, isValid },
+  } = useFormWithError<SigninFormType>({
+    mode: "onBlur",
+    resolver: zodResolver(signinFormSchmea),
+  });
 
-  async function onSubmit(data: SigninFormData) {
+  async function onSubmit(data: SigninFormType) {
     try {
       await handleLogin(data);
       alert("로그인에 성공했습니다.");
@@ -34,7 +42,7 @@ export default function LoginPage() {
   return (
     <AuthContainer>
       <Form
-        isLoading={isLoading}
+        isLoading={isSubmitting}
         error={formError}
         onSubmit={handleSubmit(onSubmit)}
       >
@@ -54,7 +62,7 @@ export default function LoginPage() {
             {...register("password")}
           />
         </FieldItem>
-        <Button type="submit" size="xl" disabled={!isFormValid}>
+        <Button type="submit" size="xl" disabled={!isValid}>
           로그인
         </Button>
       </Form>
diff --git a/src/pages/auth/SignupPage.tsx b/src/pages/auth/SignupPage.tsx
index 81c84b79e..9e9392c08 100644
--- a/src/pages/auth/SignupPage.tsx
+++ b/src/pages/auth/SignupPage.tsx
@@ -1,43 +1,34 @@
-import { useEffect } from "react";
 import { Navigate, useNavigate } from "react-router-dom";
 import { useAuth } from "@context/AuthContext";
-import useForm from "@hooks/useForm";
 import { Form, FieldItem, Input } from "@components/Field";
 import { Button } from "@components/ui";
 import AuthContainer from "./components/AuthContainer";
+import { zodResolver } from "@hookform/resolvers/zod";
+import useFormWithError from "@hooks/useFormWithError";
 import { signupFormSchema } from "./components/schema";
-import { SignupFormData } from "@type/auth";
+import { SignupFormType } from "@type/auth";
 
 export default function SignupPage() {
+  const navigate = useNavigate();
   const {
     auth: { accessToken },
     handleSignup,
   } = useAuth();
-  const navigate = useNavigate();
 
   if (accessToken) {
     return <Navigate to="/items" />;
   }
 
   const {
-    formState,
     formError,
-    isFormValid,
-    isLoading,
-    trigger,
-    handleSubmit,
     register,
-  } = useForm<SignupFormData>(signupFormSchema);
-
-  //비밀번호 변경시 비밀번호확인 필드 trigger
-  useEffect(() => {
-    if (!formState.password.value || !formState.passwordConfirmation.value)
-      return;
-
-    trigger("passwordConfirmation");
-  }, [formState.password.value]);
+    handleSubmit,
+    formState: { isSubmitting, isValid },
+  } = useFormWithError<SignupFormType>({
+    resolver: zodResolver(signupFormSchema),
+  });
 
-  async function onSubmit(data: SignupFormData) {
+  async function onSubmit(data: SignupFormType) {
     try {
       await handleSignup(data);
       alert("회원가입에 성공했습니다. \n로그인 페이지로 이동합니다.");
@@ -50,7 +41,7 @@ export default function SignupPage() {
   return (
     <AuthContainer mode="signup">
       <Form
-        isLoading={isLoading}
+        isLoading={isSubmitting}
         error={formError}
         onSubmit={handleSubmit(onSubmit)}
       >
@@ -88,7 +79,7 @@ export default function SignupPage() {
             {...register("passwordConfirmation")}
           />
         </FieldItem>
-        <Button type="submit" size="xl" disabled={!isFormValid}>
+        <Button type="submit" size="xl" disabled={!isValid}>
           회원가입
         </Button>
       </Form>
diff --git a/src/pages/auth/components/schema.ts b/src/pages/auth/components/schema.ts
index 9c2bd1876..ee42c16ba 100644
--- a/src/pages/auth/components/schema.ts
+++ b/src/pages/auth/components/schema.ts
@@ -1,80 +1,29 @@
-import {
-  AUTH_VALIDATION_MESSAGES as MESSAGE,
-  AUTH_VALIDATION_REGEX as REGEX,
-} from "@util/validation";
+import { AUTH_VALIDATION_MESSAGES as MESSAGE } from "@util/validation";
+import { z } from "zod";
 
-export const signupFormSchema = {
-  email: {
-    value: "",
-    rule: {
-      required: MESSAGE.EMAIL_REQUIRED,
-      patterns: [
-        {
-          regex: REGEX.EMAIL,
-          message: MESSAGE.INVALID_EMAIL,
-        },
-      ],
-    },
-  },
-  nickname: {
-    value: "",
-    rule: {
-      required: MESSAGE.USERNAME_REQUIRED,
-    },
-  },
-  password: {
-    value: "",
-    rule: {
-      required: MESSAGE.PASSWORD_REQUIRED,
-      patterns: [
-        {
-          regex: REGEX.PASSWORD,
-          message: MESSAGE.PASSWORD_MIN_LENGTH,
-        },
-      ],
-    },
-  },
-  passwordConfirmation: {
-    value: "",
-    rule: {
-      required: MESSAGE.PASSWORD_REQUIRED,
-      patterns: [
-        {
-          regex: REGEX.PASSWORD,
-          message: MESSAGE.PASSWORD_MIN_LENGTH,
-        },
-      ],
-      match: {
-        field: "password",
-        message: MESSAGE.PASSWORD_MISMATCH,
-      },
-    },
-  },
-};
+export const signupFormSchema = z
+  .object({
+    email: z
+      .string({ required_error: MESSAGE.EMAIL_REQUIRED })
+      .email({ message: MESSAGE.INVALID_EMAIL }),
+    nickname: z.string({ required_error: MESSAGE.USERNAME_REQUIRED }),
+    password: z
+      .string({ required_error: MESSAGE.PASSWORD_REQUIRED })
+      .min(8, { message: MESSAGE.PASSWORD_MIN_LENGTH }),
+    passwordConfirmation: z
+      .string({ required_error: MESSAGE.PASSWORD_REQUIRED })
+      .min(8, { message: MESSAGE.PASSWORD_MIN_LENGTH }),
+  })
+  .refine((data) => data.password === data.passwordConfirmation, {
+    path: ["passwordConfirmation"],
+    message: MESSAGE.PASSWORD_MISMATCH,
+  });
 
-export const loginFormSchema = {
-  email: {
-    value: "",
-    rule: {
-      required: MESSAGE.EMAIL_REQUIRED,
-      patterns: [
-        {
-          regex: REGEX.EMAIL,
-          message: MESSAGE.INVALID_EMAIL,
-        },
-      ],
-    },
-  },
-  password: {
-    value: "",
-    rule: {
-      required: MESSAGE.PASSWORD_REQUIRED,
-      patterns: [
-        {
-          regex: REGEX.PASSWORD,
-          message: MESSAGE.PASSWORD_MIN_LENGTH,
-        },
-      ],
-    },
-  },
-};
+export const signinFormSchmea = z.object({
+  email: z
+    .string({ required_error: MESSAGE.EMAIL_REQUIRED })
+    .email({ message: MESSAGE.INVALID_EMAIL }),
+  password: z
+    .string({ required_error: MESSAGE.PASSWORD_REQUIRED })
+    .min(8, { message: MESSAGE.PASSWORD_MIN_LENGTH }),
+});
diff --git a/src/types/auth.ts b/src/types/auth.ts
index aaadca974..afd107968 100644
--- a/src/types/auth.ts
+++ b/src/types/auth.ts
@@ -1,25 +1,27 @@
-export type SigninFormData = {
-  email: string;
-  password: string;
-};
-
-export type SignupFormData = SigninFormData & {
-  nickname: string;
-  passwordConfirmation: string;
-};
+import {
+  signinFormSchmea,
+  signupFormSchema,
+} from "src/pages/auth/components/schema";
+import { z } from "zod";
 
 export type User = {
+  updatedAt: string;
+  createdAt: string;
   image: string;
   nickname: string;
   id: number;
 };
 
+export type SigninFormType = z.infer<typeof signinFormSchmea>;
+
 export type SigninResponse = {
   accessToken: string;
   refreshToken: string;
   user: User;
 };
 
+export type SignupFormType = z.infer<typeof signupFormSchema>;
+
 export type SignupResponse = {
   accessToken: string;
   refreshToken: string;

From 494fc023d37a05de974dff1a7e68e8180f9fadf3 Mon Sep 17 00:00:00 2001
From: "chanki.kim" <chanki.kim89@gmail.com>
Date: Tue, 31 Dec 2024 09:22:10 +0900
Subject: [PATCH 26/72] =?UTF-8?q?Chore:=20schema=ED=8F=B4=EB=8D=94=20alias?=
 =?UTF-8?q?=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 tsconfig.app.json  | 3 ++-
 tsconfig.node.json | 3 ++-
 vite.config.ts     | 1 +
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/tsconfig.app.json b/tsconfig.app.json
index b26c6f21f..8997916f0 100644
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -32,7 +32,8 @@
       "@service/*": ["src/service/*"],
       "@util/*": ["src/util/*"],
       "@assets/*": ["src/assets/*"],
-      "@type/*": ["src/types/*"]
+      "@type/*": ["src/types/*"],
+      "@schemas/*": ["src/schemas/*"]
     }
   },
   "include": ["src"]
diff --git a/tsconfig.node.json b/tsconfig.node.json
index ecd5c2549..88c3ddc23 100644
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@@ -30,7 +30,8 @@
       "@service/*": ["src/service/*"],
       "@util/*": ["src/util/*"],
       "@assets/*": ["src/assets/*"],
-      "@type/*": ["src/types/*"]
+      "@type/*": ["src/types/*"],
+      "@schemas/*": ["src/schemas/*"]
     }
   },
   "include": ["vite.config.ts"]
diff --git a/vite.config.ts b/vite.config.ts
index 363e4f3d3..d4719354c 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -16,6 +16,7 @@ export default defineConfig({
       { find: "@util", replacement: path.resolve(__dirname, "src/util") },
       { find: "@assets", replacement: path.resolve(__dirname, "src/assets") },
       { find: "@type", replacement: path.resolve(__dirname, "src/types") },
+      { find: "@schemas", replacement: path.resolve(__dirname, "src/schemas") },
     ],
   },
   css: {

From 1b7b01c3e48efa83ecb5c73d2828c21c4fa7c72c Mon Sep 17 00:00:00 2001
From: "chanki.kim" <chanki.kim89@gmail.com>
Date: Tue, 31 Dec 2024 09:25:23 +0900
Subject: [PATCH 27/72] =?UTF-8?q?Feat:=20auth,=20comment,=20product=20sche?=
 =?UTF-8?q?ma=20=EC=9D=B4=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/items/components/schema.ts          | 51 -------------------
 .../components/schema.ts => schemas/auth.ts}  |  4 ++
 src/schemas/comment.ts                        |  8 +++
 src/schemas/product.ts                        | 21 ++++++++
 src/types/auth.ts                             | 10 ----
 src/types/product.ts                          |  8 +--
 6 files changed, 35 insertions(+), 67 deletions(-)
 delete mode 100644 src/pages/items/components/schema.ts
 rename src/{pages/auth/components/schema.ts => schemas/auth.ts} (89%)
 create mode 100644 src/schemas/comment.ts
 create mode 100644 src/schemas/product.ts

diff --git a/src/pages/items/components/schema.ts b/src/pages/items/components/schema.ts
deleted file mode 100644
index 81de134db..000000000
--- a/src/pages/items/components/schema.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import { FieldValue } from "@hooks/useForm";
-import { PRODUCT_VALIDATION_MESSAGE as MESSAGE } from "@util/validation";
-
-export const addItemSchema = {
-  images: {
-    value: undefined,
-    rule: {
-      required: MESSAGE.PRODUCT_IMAGE_REQUIRED,
-    },
-  },
-  tags: {
-    value: [],
-    rule: {
-      required: MESSAGE.PRODUCT_TAGS_REQUIRED,
-      patterns: [
-        {
-          regex: /^[^!@#$%^&*(),.?":{}|<>_\-+=\[\]\\\/`~';]*$/,
-          message: MESSAGE.INVALID_STRING,
-        },
-      ],
-    },
-  },
-  name: {
-    value: "",
-    rule: {
-      required: MESSAGE.PRODUCT_NAME_REQUIRED,
-    },
-  },
-  description: {
-    value: "",
-    rule: {
-      required: MESSAGE.PRODUCT_DESCRIPTION_REQUIRED,
-    },
-  },
-  price: {
-    value: undefined,
-    rule: {
-      required: MESSAGE.PRODUCT_PRICE_REQUIRED,
-      patterns: [
-        {
-          regex: /^[0-9]*$/,
-          message: MESSAGE.INVALID_NUMBER,
-        },
-      ],
-      custom: {
-        validate: (value: FieldValue) => Number(value) >= 100,
-        message: "최소 100원이상 작성해주세요.",
-      },
-    },
-  },
-};
diff --git a/src/pages/auth/components/schema.ts b/src/schemas/auth.ts
similarity index 89%
rename from src/pages/auth/components/schema.ts
rename to src/schemas/auth.ts
index ee42c16ba..8c2db6db8 100644
--- a/src/pages/auth/components/schema.ts
+++ b/src/schemas/auth.ts
@@ -19,6 +19,8 @@ export const signupFormSchema = z
     message: MESSAGE.PASSWORD_MISMATCH,
   });
 
+export type SigninFormType = z.infer<typeof signinFormSchmea>;
+
 export const signinFormSchmea = z.object({
   email: z
     .string({ required_error: MESSAGE.EMAIL_REQUIRED })
@@ -27,3 +29,5 @@ export const signinFormSchmea = z.object({
     .string({ required_error: MESSAGE.PASSWORD_REQUIRED })
     .min(8, { message: MESSAGE.PASSWORD_MIN_LENGTH }),
 });
+
+export type SignupFormType = z.infer<typeof signupFormSchema>;
diff --git a/src/schemas/comment.ts b/src/schemas/comment.ts
new file mode 100644
index 000000000..4bbc3d142
--- /dev/null
+++ b/src/schemas/comment.ts
@@ -0,0 +1,8 @@
+import { z } from "zod";
+import { COMMENT_VALIDATION_MESSAGE as MESSAGE } from "@util/validation";
+
+export const CommentFormSchema = z.object({
+  content: z.string({ required_error: MESSAGE.COMMENT_REQUIRED }),
+});
+
+export type CommentFormType = z.infer<typeof CommentFormSchema>;
diff --git a/src/schemas/product.ts b/src/schemas/product.ts
new file mode 100644
index 000000000..8233937d1
--- /dev/null
+++ b/src/schemas/product.ts
@@ -0,0 +1,21 @@
+import { z } from "zod";
+import { PRODUCT_VALIDATION_MESSAGE as MESSAGE } from "@util/validation";
+
+export const ItemFormSchema = z.object({
+  images: z
+    .string()
+    .array()
+    .nonempty({ message: MESSAGE.PRODUCT_IMAGE_REQUIRED }),
+  tags: z
+    .string()
+    .regex(/^[^!@#$%^&*(),.?":{}|<>_\-+=\[\]\\\/`~';]*$/)
+    .array()
+    .nonempty({ message: MESSAGE.PRODUCT_TAGS_REQUIRED }),
+  name: z.string({ required_error: MESSAGE.PRODUCT_NAME_REQUIRED }),
+  description: z.string({
+    required_error: MESSAGE.PRODUCT_DESCRIPTION_REQUIRED,
+  }),
+  price: z.number().min(100).optional(),
+});
+
+export type ItemFormType = z.infer<typeof ItemFormSchema>;
diff --git a/src/types/auth.ts b/src/types/auth.ts
index afd107968..e06a44c18 100644
--- a/src/types/auth.ts
+++ b/src/types/auth.ts
@@ -1,9 +1,3 @@
-import {
-  signinFormSchmea,
-  signupFormSchema,
-} from "src/pages/auth/components/schema";
-import { z } from "zod";
-
 export type User = {
   updatedAt: string;
   createdAt: string;
@@ -12,16 +6,12 @@ export type User = {
   id: number;
 };
 
-export type SigninFormType = z.infer<typeof signinFormSchmea>;
-
 export type SigninResponse = {
   accessToken: string;
   refreshToken: string;
   user: User;
 };
 
-export type SignupFormType = z.infer<typeof signupFormSchema>;
-
 export type SignupResponse = {
   accessToken: string;
   refreshToken: string;
diff --git a/src/types/product.ts b/src/types/product.ts
index 839067f34..754e0e233 100644
--- a/src/types/product.ts
+++ b/src/types/product.ts
@@ -20,10 +20,6 @@ export type ProductList = {
   list: Product[];
 };
 
-export type ProductFormData = {
-  images: Blob | string[] | undefined;
-  tags: string[];
-  price: number | undefined;
-  description: string;
-  name: string;
+export type ImageUploadResponse = {
+  url: string;
 };

From 1ea06226ea2d04e662787301d962d3b8d6a4ddc2 Mon Sep 17 00:00:00 2001
From: "chanki.kim" <chanki.kim89@gmail.com>
Date: Tue, 31 Dec 2024 09:29:19 +0900
Subject: [PATCH 28/72] =?UTF-8?q?Fix:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8,=20?=
 =?UTF-8?q?=ED=9A=8C=EC=9B=90=EA=B0=80=EC=9E=85=20=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20type=20=EA=B2=BD=EB=A1=9C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/auth/LoginPage.tsx  | 3 +--
 src/pages/auth/SignupPage.tsx | 3 +--
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/pages/auth/LoginPage.tsx b/src/pages/auth/LoginPage.tsx
index a34adadd3..cb082af87 100644
--- a/src/pages/auth/LoginPage.tsx
+++ b/src/pages/auth/LoginPage.tsx
@@ -5,8 +5,7 @@ import { Button } from "@components/ui";
 import AuthContainer from "./components/AuthContainer";
 import useFormWithError from "@hooks/useFormWithError";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { signinFormSchmea } from "./components/schema";
-import { SigninFormType } from "@type/auth";
+import { signinFormSchmea, SigninFormType } from "@schemas/auth";
 
 export default function LoginPage() {
   const navigate = useNavigate();
diff --git a/src/pages/auth/SignupPage.tsx b/src/pages/auth/SignupPage.tsx
index 9e9392c08..c9a9c48f7 100644
--- a/src/pages/auth/SignupPage.tsx
+++ b/src/pages/auth/SignupPage.tsx
@@ -5,8 +5,7 @@ import { Button } from "@components/ui";
 import AuthContainer from "./components/AuthContainer";
 import { zodResolver } from "@hookform/resolvers/zod";
 import useFormWithError from "@hooks/useFormWithError";
-import { signupFormSchema } from "./components/schema";
-import { SignupFormType } from "@type/auth";
+import { signupFormSchema, SignupFormType } from "@schemas/auth";
 
 export default function SignupPage() {
   const navigate = useNavigate();

From 2e1c4302a8f1c918ba45bcd934947405ac6eac3d Mon Sep 17 00:00:00 2001
From: "chanki.kim" <chanki.kim89@gmail.com>
Date: Tue, 31 Dec 2024 09:29:45 +0900
Subject: [PATCH 29/72] =?UTF-8?q?Feat:=20=EC=83=81=ED=92=88=20schema,=20ty?=
 =?UTF-8?q?pe=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/service/product.ts | 31 ++++++++++++++++++++++---------
 src/types/product.ts   |  4 ++++
 2 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/src/service/product.ts b/src/service/product.ts
index b428343ec..bf015a373 100644
--- a/src/service/product.ts
+++ b/src/service/product.ts
@@ -1,31 +1,42 @@
+import { ItemFormType } from "@schemas/product";
 import { axiosInstance } from "@service/axios";
-import { ProductFormData } from "@type/product";
+import {
+  DeleteProductResponse,
+  ImageUploadResponse,
+  Product,
+  ProductList,
+} from "@type/product";
 
 export async function getProducts(
   { page = 1, pageSize = 10, orderBy = "recent", keyword = "" },
   signal: AbortSignal
 ) {
   const query = `page=${page}&pageSize=${pageSize}&orderBy=${orderBy}&keyword=${keyword}`;
-  const response = await axiosInstance.get(`/products?${query}`, { signal });
+  const response = await axiosInstance.get<ProductList>(`/products?${query}`, {
+    signal,
+  });
 
   return response.data;
 }
 
 export async function uploadProductImage(formData: FormData) {
-  const response = await axiosInstance.post("/images/upload", formData);
+  const response = await axiosInstance.post<ImageUploadResponse>(
+    "/images/upload",
+    formData
+  );
 
   return response.data;
 }
 
-export async function addProduct(productData: ProductFormData) {
-  const response = await axiosInstance.post("/products", productData);
+export async function addProduct(productData: ItemFormType) {
+  const response = await axiosInstance.post<Product>("/products", productData);
 
   return response.data;
 }
 
 export async function modifyProduct(
   productId: number,
-  productData: ProductFormData
+  productData: ItemFormType
 ) {
   const response = await axiosInstance.patch(
     `/products/${productId}`,
@@ -36,19 +47,21 @@ export async function modifyProduct(
 }
 
 export async function deleteProduct(productId: number) {
-  const response = await axiosInstance.delete(`/products/${productId}`);
+  const response = await axiosInstance.delete<DeleteProductResponse>(
+    `/products/${productId}`
+  );
 
   return response.data;
 }
 
 export async function getProduct(productId: number) {
-  const response = await axiosInstance.get(`/products/${productId}`);
+  const response = await axiosInstance.get<Product>(`/products/${productId}`);
 
   return response.data;
 }
 
 export async function toggleLike(productId: number, flag: boolean) {
-  const response = await axiosInstance({
+  const response = await axiosInstance<Product>({
     method: flag ? "POST" : "DELETE",
     url: `/products/${productId}/favorite`,
   });
diff --git a/src/types/product.ts b/src/types/product.ts
index 754e0e233..4449a4894 100644
--- a/src/types/product.ts
+++ b/src/types/product.ts
@@ -23,3 +23,7 @@ export type ProductList = {
 export type ImageUploadResponse = {
   url: string;
 };
+
+export type DeleteProductResponse = {
+  id: number;
+};

From 0156eea417837736a96ccc36bd69e079ecb2163b Mon Sep 17 00:00:00 2001
From: "chanki.kim" <chanki.kim89@gmail.com>
Date: Tue, 31 Dec 2024 18:00:36 +0900
Subject: [PATCH 30/72] =?UTF-8?q?Chore:=20validation=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/util/validation.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/util/validation.ts b/src/util/validation.ts
index a598d38c1..ae14d740c 100644
--- a/src/util/validation.ts
+++ b/src/util/validation.ts
@@ -19,6 +19,7 @@ export const PRODUCT_VALIDATION_MESSAGE = {
   PRODUCT_NAME_REQUIRED: "상품명을 입력해주세요",
   PRODUCT_DESCRIPTION_REQUIRED: "상품소개를 입력해주세요",
   PRODUCT_PRICE_REQUIRED: "판매 가격을 입력해주세요",
+  PRODUCT_PRICE_MIN: "원 이상 입력해주세요",
   INVALID_STRING: "특수문자는 사용할 수 없습니다.",
   INVALID_NUMBER: "숫자만 입력해주세요",
 };

From 8bc52b6ede45d6f8d2f5bb7887bcc6dede039858 Mon Sep 17 00:00:00 2001
From: "chanki.kim" <chanki.kim89@gmail.com>
Date: Tue, 31 Dec 2024 18:01:26 +0900
Subject: [PATCH 31/72] =?UTF-8?q?Chore:=20formatter=20ts=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/util/formatter.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/util/formatter.ts b/src/util/formatter.ts
index b7463b6f6..6be06ca37 100644
--- a/src/util/formatter.ts
+++ b/src/util/formatter.ts
@@ -1,6 +1,6 @@
 import dayjs from "dayjs";
 
-export function toWon(price: number | undefined) {
+export function toWon(price: string | number | undefined) {
   return Number(price).toLocaleString() + "원";
 }
 

From 79126fd8cb194256a47c2c760e0390db227cabf1 Mon Sep 17 00:00:00 2001
From: "chanki.kim" <chanki.kim89@gmail.com>
Date: Tue, 31 Dec 2024 18:03:34 +0900
Subject: [PATCH 32/72] =?UTF-8?q?Feat:=20useFormWithError=20=EA=B0=9C?=
 =?UTF-8?q?=EC=84=A0=20-=20register=EC=97=90=20=EB=8D=94=20=EB=A7=8E?=
 =?UTF-8?q?=EC=9D=80=20=EC=A0=95=EB=B3=B4=EB=A5=BC=20=EC=B6=94=EA=B0=80?=
 =?UTF-8?q?=ED=95=B4=EC=84=9C=20=EA=B0=80=EC=A0=B8=EA=B0=80=EB=8F=84?=
 =?UTF-8?q?=EB=A1=9D=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/useFormWithError.ts | 26 +++++++++++++++++++-------
 1 file changed, 19 insertions(+), 7 deletions(-)

diff --git a/src/hooks/useFormWithError.ts b/src/hooks/useFormWithError.ts
index 11d0691ed..fd2b1f0c1 100644
--- a/src/hooks/useFormWithError.ts
+++ b/src/hooks/useFormWithError.ts
@@ -1,23 +1,35 @@
 import { useState } from "react";
-import { FieldPath, FieldValues, useForm, UseFormProps } from "react-hook-form";
+import {
+  FieldPath,
+  FieldValues,
+  RegisterOptions,
+  useForm,
+  UseFormProps,
+} from "react-hook-form";
 
 export default function useFormWithError<TFieldValues extends FieldValues>(
   options: UseFormProps<TFieldValues>
 ) {
   const [formError, setFormError] = useState<Error | null>(null);
   const form = useForm<TFieldValues>(options);
-  const { handleSubmit, getFieldState, register, formState } = form;
+  const { handleSubmit, getFieldState, register, formState, watch } = form;
 
   function registerWithError<TFieldName extends FieldPath<TFieldValues>>(
-    name: TFieldName
+    name: TFieldName,
+    options?: RegisterOptions<TFieldValues, TFieldName>
   ) {
-    const { error, invalid, isTouched } = getFieldState(name, formState);
+    const { error, isDirty, isTouched, invalid } = getFieldState(
+      name,
+      formState
+    );
 
     return {
-      ...register(name),
-      error: error?.message,
-      isValid: !invalid,
+      ...register(name, options),
+      error,
+      isDirty,
       isTouched,
+      isValid: !invalid,
+      value: watch(name),
     };
   }
 

From 3fb8b92836bd2b78ea17a8239532d43341c4fab1 Mon Sep 17 00:00:00 2001
From: "chanki.kim" <chanki.kim89@gmail.com>
Date: Tue, 31 Dec 2024 18:18:02 +0900
Subject: [PATCH 33/72] =?UTF-8?q?Feat:=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20?=
 =?UTF-8?q?=EC=97=85=EB=A1=9C=EB=93=9C=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Field/ImageUpload.tsx | 94 +++++++++++++---------------
 src/hooks/useSingleFile.ts           | 44 ++++---------
 2 files changed, 58 insertions(+), 80 deletions(-)

diff --git a/src/components/Field/ImageUpload.tsx b/src/components/Field/ImageUpload.tsx
index 1e3f9d314..9545dff08 100644
--- a/src/components/Field/ImageUpload.tsx
+++ b/src/components/Field/ImageUpload.tsx
@@ -3,61 +3,57 @@ import { Thumbnail } from "@components/ui";
 import { Error } from "@components/Field";
 import iconPlus from "@assets/img/icon/icon_plus.svg";
 import styles from "./ImageUpload.module.scss";
+import { FieldError } from "react-hook-form";
+import { forwardRef } from "react";
 
 const LIMIT_SIZE_MB = 2;
 
 interface ImageUploadProps {
-  error: string | null;
-  value: Blob | File | string | string[] | undefined;
-  id: string;
+  value: (File | string)[];
   name: string;
-  onChange: (name: string, file: File | undefined) => void;
+  onChange: (file: (File | string)[]) => void;
+  error: FieldError | undefined;
   placeholder?: string;
 }
 
-export function ImageUpload({
-  error,
-  value,
-  id,
-  name,
-  onChange,
-  placeholder = "이미지 등록",
-}: ImageUploadProps) {
-  const { fileProps, fileError, handleRemove, preview } = useSingleFile({
-    value,
-    accept: "image/*",
-    limitSize: LIMIT_SIZE_MB,
-    onChange: (file) => onChange(name, file),
-    errorMessage: {
-      max: "이미지 등록은 최대 1개까지 가능합니다.",
-      accept: "이미지 파일만 업로드 가능합니다.",
-    },
-  });
-
-  // 두가지 에러 동시에 보내려고 문자열로 합침
-  const fileInputError = [fileError, error].filter((err) => err).join(" / ");
-
-  return (
-    <>
-      <div className={styles["thumbnail-list"]}>
-        <label className={styles["upload-button"]}>
-          <span className={styles["upload-label"]}>
-            <img src={iconPlus} alt="이미지 업로드" />
-            {placeholder}
-          </span>
-          <input id={id} name={name} className="a11y" {...fileProps} />
-        </label>
-        <div className={styles.preview}>
-          {preview && (
-            <Thumbnail
-              src={preview}
-              alt="상품 이미지 등록"
-              onRemove={handleRemove}
-            />
-          )}
+export const ImageUpload = forwardRef<HTMLInputElement, ImageUploadProps>(
+  ({ value, onChange, name, error, placeholder }: ImageUploadProps, ref) => {
+    const { fileProps, fileError, handleRemove, preview } = useSingleFile({
+      value,
+      accept: "image/*",
+      onChange,
+      limitSize: LIMIT_SIZE_MB,
+      errorMessage: {
+        max: "이미지 등록은 최대 1개까지 가능합니다.",
+        accept: "이미지 파일만 업로드 가능합니다.",
+      },
+    });
+    // 두가지 에러 동시에 보내려고 문자열로 합침
+    const fileInputError = [fileError, error?.message]
+      .filter((err) => err)
+      .join(" / ");
+    return (
+      <>
+        <div className={styles["thumbnail-list"]}>
+          <label className={styles["upload-button"]}>
+            <span className={styles["upload-label"]}>
+              <img src={iconPlus} alt="이미지 업로드" />
+              {placeholder}
+            </span>
+            <input name={name} className="a11y" {...fileProps} />
+          </label>
+          <div className={styles.preview}>
+            {preview && (
+              <Thumbnail
+                src={preview}
+                alt="상품 이미지 등록"
+                onRemove={handleRemove}
+              />
+            )}
+          </div>
         </div>
-      </div>
-      <Error error={fileInputError} />
-    </>
-  );
-}
+        {fileInputError && <Error error={fileInputError} />}
+      </>
+    );
+  }
+);
diff --git a/src/hooks/useSingleFile.ts b/src/hooks/useSingleFile.ts
index 072682cbd..993ef1af0 100644
--- a/src/hooks/useSingleFile.ts
+++ b/src/hooks/useSingleFile.ts
@@ -1,10 +1,10 @@
 import { ChangeEvent, useEffect, useRef, useState } from "react";
 
 interface SingleFileProps {
-  value: Blob | File | string | string[] | undefined;
-  onChange: (file: File | undefined) => void;
+  value: (File | string)[];
   accept: string;
   limitSize: number;
+  onChange: (file: (File | string)[]) => void;
   errorMessage?: {
     max?: string;
     accept?: string;
@@ -18,7 +18,8 @@ export default function useSingleFile({
   limitSize = 5,
   errorMessage = {},
 }: SingleFileProps) {
-  const [preview, setPreview] = useState<string | null>(null);
+  const preview =
+    value?.[0] instanceof File ? URL.createObjectURL(value[0]) : value?.[0];
   const [error, setError] = useState<string | null>(null);
   const fileRef = useRef<HTMLInputElement>(null);
 
@@ -31,31 +32,12 @@ export default function useSingleFile({
   const message = { ...defaultMessage, ...errorMessage };
 
   useEffect(() => {
-    if (!value) return;
-    if (Array.isArray(value)) {
-      setPreview(value[0]);
-
-      return () => {
-        setPreview(null);
-      };
-    }
-
-    if (typeof value === "string") {
-      setPreview(value);
-
-      return () => {
-        setPreview(null);
-      };
-    } else {
-      const objectURL = URL.createObjectURL(value);
-      setPreview(objectURL);
-
-      return () => {
-        setPreview(null);
-        URL.revokeObjectURL(objectURL);
-      };
-    }
-  }, [value]);
+    return () => {
+      if (preview && value?.[0] instanceof File) {
+        URL.revokeObjectURL(preview);
+      }
+    };
+  }, []);
 
   function handleChange(e: ChangeEvent<HTMLInputElement>) {
     if (!e.target.files) return;
@@ -63,7 +45,7 @@ export default function useSingleFile({
     const file = e.target.files[0];
     setError(null);
 
-    if (value) {
+    if (value.length) {
       return setError(message.max);
     }
 
@@ -78,7 +60,7 @@ export default function useSingleFile({
       fileRef.current.value = "";
     }
 
-    onChange(file);
+    onChange([file]);
   }
 
   function handleRemove() {
@@ -86,7 +68,7 @@ export default function useSingleFile({
 
     fileRef.current.value = "";
     setError(null);
-    onChange(undefined);
+    onChange([]);
   }
 
   return {

From 88c41525089ef678b36d53916d672394d4af38a8 Mon Sep 17 00:00:00 2001
From: "chanki.kim" <chanki.kim89@gmail.com>
Date: Tue, 31 Dec 2024 18:18:26 +0900
Subject: [PATCH 34/72] =?UTF-8?q?Feat:=20Textarea,=20input=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Field/Input.module.scss |  16 +++-
 src/components/Field/Input.tsx         |  11 ++-
 src/components/Field/NumberInput.tsx   | 115 ++++++++++++++++---------
 src/components/Field/Textarea.tsx      |  55 ++++++++----
 4 files changed, 132 insertions(+), 65 deletions(-)

diff --git a/src/components/Field/Input.module.scss b/src/components/Field/Input.module.scss
index 0eba4df99..70bc1608e 100644
--- a/src/components/Field/Input.module.scss
+++ b/src/components/Field/Input.module.scss
@@ -4,7 +4,8 @@
   position: relative;
 
   .field-box {
-    display: block;
+    display: flex;
+    align-items: center;
     width: 100%;
     height: 5.6rem;
     padding: 0 2.4rem;
@@ -68,3 +69,16 @@
 .visibility-btn.on .icon-visibility-off {
   display: block;
 }
+
+.formatted {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+.placeholder {
+  color: var(--color-secondary-400);
+}
diff --git a/src/components/Field/Input.tsx b/src/components/Field/Input.tsx
index 40624e3cf..ab2257162 100644
--- a/src/components/Field/Input.tsx
+++ b/src/components/Field/Input.tsx
@@ -4,20 +4,23 @@ import { Error } from "@components/Field";
 import iconViewOn from "@assets/img/icon/icon_view_on.svg";
 import iconViewOff from "@assets/img/icon/icon_view_off.svg";
 import styles from "./Input.module.scss";
+import { FieldError } from "react-hook-form";
 
 interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
   type?: string;
-  error: string | undefined;
+  error: FieldError | undefined;
   isValid: boolean;
   isTouched: boolean;
+  isDirty: boolean;
+  value: string;
 }
 
 export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
-  { type = "text", error, isValid, isTouched, ...props },
+  { type = "text", error, isValid, isTouched, isDirty, value, ...props },
   ref
 ) {
   const [currentType, setCurrentType] = useState(type);
-  const valid = isValid && isTouched;
+  const valid = isValid && !error && value;
   const css = clsx(
     styles["field-box"],
     valid && styles.valid,
@@ -48,7 +51,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
           </button>
         )}
       </div>
-      {error && <Error error={error} />}
+      {error && <Error error={error.message} />}
     </>
   );
 });
diff --git a/src/components/Field/NumberInput.tsx b/src/components/Field/NumberInput.tsx
index b9c0d2c06..a8e2b8560 100644
--- a/src/components/Field/NumberInput.tsx
+++ b/src/components/Field/NumberInput.tsx
@@ -1,49 +1,82 @@
-import { InputHTMLAttributes, useState } from "react";
+import { FocusEvent, forwardRef, InputHTMLAttributes, useState } from "react";
 import clsx from "clsx";
 import { Error } from "@components/Field";
 import styles from "./Input.module.scss";
+import { toWon } from "@util/formatter";
+import { FieldError } from "react-hook-form";
 
 interface NumberInputProps extends InputHTMLAttributes<HTMLInputElement> {
-  type?: string;
-  error: string | null;
-  value: number | undefined;
-  formatter: (value: number | undefined) => string;
+  error: FieldError | undefined;
+  isValid: boolean;
+  isTouched: boolean;
+  isDirty: boolean;
 }
 
-export function NumberInput({
-  type = "number",
-  error,
-  value,
-  formatter,
-  ...props
-}: NumberInputProps) {
-  const [currentType, setCurrentType] = useState(type);
-  const valid = value && !error;
-  const css = clsx(
-    styles["field-box"],
-    valid && styles.valid,
-    error && styles.error
-  );
-
-  let formattedValue = value || "";
-
-  if (formatter && formattedValue && currentType === "text") {
-    formattedValue = formatter(value);
-  }
+export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
+  (
+    {
+      error,
+      isValid,
+      isTouched,
+      isDirty,
+      placeholder,
+      onFocus,
+      onBlur,
+      value,
+      ...props
+    }: NumberInputProps,
+    ref
+  ) => {
+    const [isInput, setIsInput] = useState(false);
+    const valid = isValid && !error && value;
+    const css = clsx(
+      styles["field-box"],
+      valid && styles.valid,
+      error && styles.error
+    );
 
-  return (
-    <>
-      <div className={styles.field}>
-        <input
-          type={currentType}
-          className={css}
-          value={formattedValue}
-          onFocus={() => setCurrentType("number")}
-          onBlur={() => setCurrentType("text")}
-          {...props}
-        />
-      </div>
-      <Error error={error} />
-    </>
-  );
-}
+    const formattedCss = clsx(
+      css,
+      styles.formatted,
+      !value && styles.placeholder
+    );
+
+    function handleFocus(e: FocusEvent<HTMLInputElement>) {
+      setIsInput(true);
+
+      if (onFocus) {
+        onFocus(e);
+      }
+    }
+
+    function handleBlur(e: FocusEvent<HTMLInputElement>) {
+      setIsInput(false);
+
+      if (onBlur) {
+        onBlur(e);
+      }
+    }
+
+    return (
+      <>
+        <div className={styles.field}>
+          {!isInput && (
+            <div className={formattedCss}>
+              {(value && toWon(value as string)) || placeholder}
+            </div>
+          )}
+          <input
+            ref={ref}
+            type="number"
+            className={css}
+            placeholder={placeholder}
+            {...props}
+            onBlur={handleBlur}
+            onFocus={handleFocus}
+          />
+        </div>
+        {error && <Error error={error.message} />}
+      </>
+    );
+  }
+);
diff --git a/src/components/Field/Textarea.tsx b/src/components/Field/Textarea.tsx
index 4af2fff7f..4ff51844c 100644
--- a/src/components/Field/Textarea.tsx
+++ b/src/components/Field/Textarea.tsx
@@ -1,29 +1,46 @@
 import clsx from "clsx";
 import { Error } from "@components/Field";
 import styles from "./Input.module.scss";
-import { TextareaHTMLAttributes } from "react";
+import { forwardRef, TextareaHTMLAttributes } from "react";
+import { FieldError } from "react-hook-form";
 
 interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
-  error: string | null;
+  error: FieldError | undefined;
+  isValid: boolean;
+  isTouched: boolean;
+  isDirty: boolean;
   value: string;
   size?: "sm" | "lg";
 }
 
-export function Textarea({ error, value, size, ...props }: TextareaProps) {
-  const valid = value && !error;
-  const css = clsx(
-    styles["field-box"],
-    size && styles[size],
-    valid && styles.valid,
-    error && styles.error
-  );
+export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
+  (
+    {
+      error,
+      isValid,
+      isTouched,
+      isDirty,
+      value,
+      size,
+      ...props
+    }: TextareaProps,
+    ref
+  ) => {
+    const valid = isValid && !error && value;
+    const css = clsx(
+      styles["field-box"],
+      size && styles[size],
+      valid && styles.valid,
+      error && styles.error
+    );
 
-  return (
-    <>
-      <div className={styles.field}>
-        <textarea className={css} value={value} {...props} />
-      </div>
-      <Error error={error} />
-    </>
-  );
-}
+    return (
+      <>
+        <div className={styles.field}>
+          <textarea ref={ref} className={css} {...props} />
+        </div>
+        {error && <Error error={error.message} />}
+      </>
+    );
+  }
+);

From c865f4d2f9dfa0813db1a4b92807bf9ad5dbd5ec Mon Sep 17 00:00:00 2001
From: "chanki.kim" <chanki.kim89@gmail.com>
Date: Tue, 31 Dec 2024 18:18:57 +0900
Subject: [PATCH 35/72] =?UTF-8?q?Feat:=20TagsInput=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Field/TagsInput.tsx | 105 ++++++++++++++---------------
 1 file changed, 52 insertions(+), 53 deletions(-)

diff --git a/src/components/Field/TagsInput.tsx b/src/components/Field/TagsInput.tsx
index ecebb5d20..71e3f59cf 100644
--- a/src/components/Field/TagsInput.tsx
+++ b/src/components/Field/TagsInput.tsx
@@ -1,70 +1,69 @@
-import { KeyboardEvent, useRef } from "react";
+import { forwardRef, KeyboardEvent, useRef } from "react";
 import clsx from "clsx";
 import { Tags } from "@components/ui";
 import { Error } from "@components/Field";
 import styles from "./Input.module.scss";
+import { FieldError } from "react-hook-form";
 
 interface TagsInputProps {
-  error: string | null;
+  error: FieldError | FieldError[] | undefined;
+  isValid: boolean;
+  isTouched: boolean;
+  isDirty: boolean;
   value: string[];
-  id: string;
-  name: string;
-  onChange: (name: string, tags: string[]) => void;
+  onChange: (value: string[]) => void;
   placeholder: string;
 }
 
-export function TagsInput({
-  error,
-  value,
-  id,
-  name,
-  onChange,
-  placeholder,
-}: TagsInputProps) {
-  const inputRef = useRef<HTMLInputElement>(null);
-  const valid = value.length && !error;
-  const css = clsx(
-    styles["field-box"],
-    valid && styles.valid,
-    error && styles.error
-  );
+export const TagsInput = forwardRef<HTMLInputElement, TagsInputProps>(
+  ({ error, value, onChange, isValid, placeholder }: TagsInputProps, ref) => {
+    const inputRef = useRef<HTMLInputElement>(null);
+    const valid = isValid && !error && value.length;
+    const css = clsx(
+      styles["field-box"],
+      valid && styles.valid,
+      error && styles.error
+    );
 
-  function handleKeyDown(e: KeyboardEvent) {
-    if (e.nativeEvent.isComposing) return;
+    function handleKeyDown(e: KeyboardEvent) {
+      if (e.nativeEvent.isComposing) return;
 
-    if (e.key === "Enter") {
-      e.preventDefault();
-      if (!inputRef.current) return;
+      if (e.key === "Enter") {
+        e.preventDefault();
+        if (!inputRef.current) return;
 
-      const tag = inputRef.current.value.trim();
-      if (tag && !value.includes(tag)) {
-        const newTags = [...value, tag];
-        onChange(name, newTags);
+        const tag = inputRef.current.value.trim();
+        if (tag && !value.includes(tag)) {
+          const newTags = [...value, tag];
+          onChange(newTags);
+        }
+        inputRef.current.value = "";
       }
-      inputRef.current.value = "";
     }
-  }
 
-  function handleRemove(tag: string) {
-    const newTags = value.filter((item) => item !== tag);
-    onChange(name, newTags);
-  }
+    function handleRemove(tag: string) {
+      const newTags = value.filter((item) => item !== tag);
+      onChange(newTags);
+    }
 
-  return (
-    <>
-      <div className={styles.field}>
-        <input
-          ref={inputRef}
-          type="text"
-          className={css}
-          onKeyDown={handleKeyDown}
-          id={id}
-          name={name}
-          placeholder={placeholder}
-        />
-      </div>
-      <Tags tags={value} onRemoveItem={handleRemove} />
-      <Error error={error} />
-    </>
-  );
-}
+    const extractError = Array.isArray(error)
+      ? error?.find((err) => err && err.message)?.message ?? null
+      : error?.message;
+
+    return (
+      <>
+        <div className={styles.field}>
+          <input
+            ref={inputRef}
+            type="text"
+            className={css}
+            onKeyDown={handleKeyDown}
+            placeholder={placeholder}
+          />
+        </div>
+        <Tags tags={value} onRemoveItem={handleRemove} />
+        {extractError && <Error error={extractError} />}
+      </>
+    );
+  }
+);

From eca2c5cbea5d4aea12030e91d0cb31e81a128ec3 Mon Sep 17 00:00:00 2001
From: "chanki.kim" <chanki.kim89@gmail.com>
Date: Tue, 31 Dec 2024 18:19:22 +0900
Subject: [PATCH 36/72] =?UTF-8?q?Feat:=20=ED=95=84=EB=93=9C=EC=97=90?=
 =?UTF-8?q?=EB=9F=AC=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Field/Error.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/Field/Error.tsx b/src/components/Field/Error.tsx
index 974788447..e2c61942a 100644
--- a/src/components/Field/Error.tsx
+++ b/src/components/Field/Error.tsx
@@ -1,6 +1,9 @@
 import styles from "./Error.module.scss";
 
-export function Error({ error }: { error: string }) {
+export function Error({ error }: { error: string | undefined }) {
+  if (!error) {
+    return null;
+  }
   return (
     <div className={styles["item-error"]}>
       {error || "오류가 발생했습니다."}

From 1c442f8a64f721c261f24ebede9e00347a7c989c Mon Sep 17 00:00:00 2001
From: "chanki.kim" <chanki.kim89@gmail.com>
Date: Tue, 31 Dec 2024 18:20:12 +0900
Subject: [PATCH 37/72] =?UTF-8?q?Feat:=20=EC=83=81=ED=92=88=20=EC=9E=91?=
 =?UTF-8?q?=EC=84=B1,=20=EC=88=98=EC=A0=95=20=ED=8E=98=EC=9D=B4=EC=A7=80?=
 =?UTF-8?q?=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/items/ItemModifyPage.tsx            |  2 +-
 src/pages/items/components/ProductForm.tsx    | 57 ++++++++++++-------
 .../items/components/useProductActions.ts     | 14 ++---
 src/service/product.ts                        |  6 +-
 4 files changed, 47 insertions(+), 32 deletions(-)

diff --git a/src/pages/items/ItemModifyPage.tsx b/src/pages/items/ItemModifyPage.tsx
index a0ed82236..e4f898163 100644
--- a/src/pages/items/ItemModifyPage.tsx
+++ b/src/pages/items/ItemModifyPage.tsx
@@ -21,7 +21,7 @@ export default function ItemModifyPage() {
     <PageWrapper>
       <ProductForm
         initialData={detail}
-        onProductSubmit={(formData) => handleProductModify(formData)}
+        onProductSubmit={handleProductModify}
         isEdit
       />
     </PageWrapper>
diff --git a/src/pages/items/components/ProductForm.tsx b/src/pages/items/components/ProductForm.tsx
index 0ac0327ee..aa9242ae8 100644
--- a/src/pages/items/components/ProductForm.tsx
+++ b/src/pages/items/components/ProductForm.tsx
@@ -1,6 +1,4 @@
 import { useNavigate } from "react-router-dom";
-import useForm from "@hooks/useForm";
-import { toWon } from "@util/formatter";
 import { Button } from "@components/ui";
 import { Section } from "@components/Section";
 import {
@@ -12,12 +10,14 @@ import {
   ImageUpload,
   NumberInput,
 } from "@components/Field";
-import { addItemSchema } from "./schema";
-import { Product, ProductFormData } from "@type/product";
+import { Product } from "@type/product";
+import useFormWithError from "@hooks/useFormWithError";
+import { ProductFormSchema, ProductFormType } from "@schemas/product";
+import { zodResolver } from "@hookform/resolvers/zod";
 
 interface ProductFormProps {
-  initialData?: Partial<Product>;
-  onProductSubmit: (formData: ProductFormData) => void;
+  initialData?: Product;
+  onProductSubmit: (formData: ProductFormType) => Promise<void>;
   isEdit?: boolean;
 }
 
@@ -27,13 +27,21 @@ export default function ProductForm({
   isEdit = false,
 }: ProductFormProps) {
   const {
+    setValue,
     formError,
-    isFormValid,
-    isLoading,
-    handleChange,
-    handleSubmit,
     register,
-  } = useForm<ProductFormData>(addItemSchema, initialData);
+    handleSubmit,
+    formState: { isSubmitting, isValid },
+  } = useFormWithError<ProductFormType>({
+    mode: "onBlur",
+    resolver: zodResolver(ProductFormSchema),
+    defaultValues: {
+      images: [],
+      tags: [],
+      ...initialData,
+    },
+  });
+
   const navigate = useNavigate();
 
   const redirect =
@@ -42,7 +50,7 @@ export default function ProductForm({
     ? "성공적으로 수정했습니다."
     : "성공적으로 작성했습니다.";
 
-  async function onSubmit(data: ProductFormData) {
+  async function onSubmit(data: ProductFormType) {
     try {
       await onProductSubmit(data);
       alert(message);
@@ -55,19 +63,24 @@ export default function ProductForm({
   return (
     <Section>
       <Form
-        isLoading={isLoading}
+        isLoading={isSubmitting}
         error={formError}
         onSubmit={handleSubmit(onSubmit)}
       >
         <Section.Header title="상품 등록하기">
-          <Button type="submit" size="sm" disabled={!isFormValid}>
+          <Button type="submit" size="sm" disabled={!isValid}>
             등록
           </Button>
         </Section.Header>
         <Section.Content>
           <FieldItem>
             <FieldItem.Label htmlFor="images">상품 이미지</FieldItem.Label>
-            <ImageUpload {...register("images")} onChange={handleChange} />
+            <ImageUpload
+              {...register("images")}
+              onChange={(value) =>
+                setValue("images", value, { shouldValidate: true })
+              }
+            />
           </FieldItem>
           <FieldItem>
             <FieldItem.Label htmlFor="name">상품명</FieldItem.Label>
@@ -76,25 +89,27 @@ export default function ProductForm({
           <FieldItem>
             <FieldItem.Label htmlFor="description">상품 소개</FieldItem.Label>
             <Textarea
-              placeholder="상품 소개를  입력해주세요"
               {...register("description")}
+              placeholder="상품 소개를  입력해주세요"
             />
           </FieldItem>
           <FieldItem>
             <FieldItem.Label htmlFor="price">판매 가격</FieldItem.Label>
             <NumberInput
-              placeholder="판매 가격을 입력해주세요"
-              step="100"
-              formatter={toWon}
               {...register("price")}
+              placeholder="판매 가격을 입력해주세요"
             />
           </FieldItem>
           <FieldItem>
             <FieldItem.Label htmlFor="tags">태그</FieldItem.Label>
             <TagsInput
-              placeholder="태그를 입력해주세요"
               {...register("tags")}
-              onChange={handleChange}
+              placeholder="태그를 입력해주세요"
+              onChange={(value) =>
+                setValue("tags", value, {
+                  shouldValidate: true,
+                })
+              }
             />
           </FieldItem>
         </Section.Content>
diff --git a/src/pages/items/components/useProductActions.ts b/src/pages/items/components/useProductActions.ts
index a4773d208..0c17eac4f 100644
--- a/src/pages/items/components/useProductActions.ts
+++ b/src/pages/items/components/useProductActions.ts
@@ -1,3 +1,4 @@
+import { ProductFormType } from "@schemas/product";
 import {
   addProduct,
   deleteProduct,
@@ -5,7 +6,6 @@ import {
   toggleLike,
   uploadProductImage,
 } from "@service/product";
-import { ProductFormData } from "@type/product";
 
 export default function useProductActions(productId?: number) {
   async function handleLike(flag: boolean) {
@@ -14,11 +14,11 @@ export default function useProductActions(productId?: number) {
     return toggleLike(productId, flag);
   }
 
-  async function handleProductAdd(formData: ProductFormData) {
+  async function handleProductAdd(formData: ProductFormType) {
     try {
-      if (formData.images instanceof Blob) {
+      if (formData.images[0] instanceof File) {
         const imgFormData = new FormData();
-        imgFormData.append("image", formData.images);
+        imgFormData.append("image", formData.images[0]);
 
         const { url } = await uploadProductImage(imgFormData);
         formData.images = [url];
@@ -30,13 +30,13 @@ export default function useProductActions(productId?: number) {
     }
   }
 
-  async function handleProductModify(formData: ProductFormData) {
+  async function handleProductModify(formData: ProductFormType) {
     if (!productId) return;
 
     try {
-      if (formData.images instanceof Blob) {
+      if (formData.images[0] instanceof File) {
         const imgFormData = new FormData();
-        imgFormData.append("image", formData.images);
+        imgFormData.append("image", formData.images[0]);
 
         const { url } = await uploadProductImage(imgFormData);
         formData.images = [url];
diff --git a/src/service/product.ts b/src/service/product.ts
index bf015a373..237cddd84 100644
--- a/src/service/product.ts
+++ b/src/service/product.ts
@@ -1,4 +1,4 @@
-import { ItemFormType } from "@schemas/product";
+import { ProductFormType } from "@schemas/product";
 import { axiosInstance } from "@service/axios";
 import {
   DeleteProductResponse,
@@ -28,7 +28,7 @@ export async function uploadProductImage(formData: FormData) {
   return response.data;
 }
 
-export async function addProduct(productData: ItemFormType) {
+export async function addProduct(productData: ProductFormType) {
   const response = await axiosInstance.post<Product>("/products", productData);
 
   return response.data;
@@ -36,7 +36,7 @@ export async function addProduct(productData: ItemFormType) {
 
 export async function modifyProduct(
   productId: number,
-  productData: ItemFormType
+  productData: ProductFormType
 ) {
   const response = await axiosInstance.patch(
     `/products/${productId}`,

From 45fe412e58d846e425d267e282491a84bcec916f Mon Sep 17 00:00:00 2001
From: "chanki.kim" <chanki.kim89@gmail.com>
Date: Tue, 31 Dec 2024 18:20:58 +0900
Subject: [PATCH 38/72] =?UTF-8?q?Feat:=20=EC=BD=94=EB=A9=98=ED=8A=B8?=
 =?UTF-8?q?=ED=8F=BC=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Comment/CommentForm.tsx | 26 ++++++++++++++++++--------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/components/Comment/CommentForm.tsx b/src/components/Comment/CommentForm.tsx
index 577bebe06..ed7e18d75 100644
--- a/src/components/Comment/CommentForm.tsx
+++ b/src/components/Comment/CommentForm.tsx
@@ -1,13 +1,14 @@
-import useForm from "@hooks/useForm";
 import { FieldItem, Form, Textarea } from "@components/Field";
 import { Author, Button } from "@components/ui";
-import { commentSchema } from "./schema";
 import styles from "./CommentForm.module.scss";
 import { Comment, CommentFormData } from "@type/comment";
+import useFormWithError from "@hooks/useFormWithError";
+import { CommentFormSchema, CommentFormType } from "@schemas/comment";
+import { zodResolver } from "@hookform/resolvers/zod";
 
 interface CommentForm {
   initialData?: Comment;
-  onCommentSubmit: (data: CommentFormData) => void;
+  onCommentSubmit: (data: CommentFormData) => Promise<void>;
   onClose?: () => void;
   isEdit?: boolean;
 }
@@ -18,8 +19,17 @@ export function CommentForm({
   onClose,
   isEdit,
 }: CommentForm) {
-  const { formError, isFormValid, isLoading, handleSubmit, register, reset } =
-    useForm<CommentFormData>(commentSchema, initialData);
+  const {
+    formError,
+    register,
+    reset,
+    handleSubmit,
+    formState: { isSubmitting, isValid },
+  } = useFormWithError<CommentFormType>({
+    mode: "onBlur",
+    resolver: zodResolver(CommentFormSchema),
+    defaultValues: initialData,
+  });
 
   function handleClose() {
     reset();
@@ -42,7 +52,7 @@ export function CommentForm({
 
   return (
     <Form
-      isLoading={isLoading}
+      isLoading={isSubmitting}
       error={formError}
       onSubmit={handleSubmit(onSubmit)}
     >
@@ -75,13 +85,13 @@ export function CommentForm({
               >
                 취소
               </Button>
-              <Button type="submit" size="sm" disabled={!isFormValid}>
+              <Button type="submit" size="sm" disabled={!isValid}>
                 수정 완료
               </Button>
             </div>
           </div>
         ) : (
-          <Button type="submit" size="sm" disabled={!isFormValid}>
+          <Button type="submit" size="sm" disabled={!isValid}>
             등록
           </Button>
         )}

From 189d7f7f422328a9983b6e8d3e65d3e028e8dc79 Mon Sep 17 00:00:00 2001
From: "chanki.kim" <chanki.kim89@gmail.com>
Date: Tue, 31 Dec 2024 18:21:37 +0900
Subject: [PATCH 39/72] =?UTF-8?q?Feat:=20auth,=20comment,=20product=20?=
 =?UTF-8?q?=EC=8A=A4=ED=82=A4=EB=A7=88=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/schemas/auth.ts    | 17 +++++++++++------
 src/schemas/comment.ts |  2 +-
 src/schemas/product.ts | 33 +++++++++++++++++++--------------
 3 files changed, 31 insertions(+), 21 deletions(-)

diff --git a/src/schemas/auth.ts b/src/schemas/auth.ts
index 8c2db6db8..affbc0192 100644
--- a/src/schemas/auth.ts
+++ b/src/schemas/auth.ts
@@ -4,14 +4,17 @@ import { z } from "zod";
 export const signupFormSchema = z
   .object({
     email: z
-      .string({ required_error: MESSAGE.EMAIL_REQUIRED })
+      .string()
+      .nonempty({ message: MESSAGE.EMAIL_REQUIRED })
       .email({ message: MESSAGE.INVALID_EMAIL }),
-    nickname: z.string({ required_error: MESSAGE.USERNAME_REQUIRED }),
+    nickname: z.string().nonempty({ message: MESSAGE.USERNAME_REQUIRED }),
     password: z
-      .string({ required_error: MESSAGE.PASSWORD_REQUIRED })
+      .string()
+      .nonempty({ message: MESSAGE.PASSWORD_REQUIRED })
       .min(8, { message: MESSAGE.PASSWORD_MIN_LENGTH }),
     passwordConfirmation: z
-      .string({ required_error: MESSAGE.PASSWORD_REQUIRED })
+      .string()
+      .nonempty({ message: MESSAGE.PASSWORD_REQUIRED })
       .min(8, { message: MESSAGE.PASSWORD_MIN_LENGTH }),
   })
   .refine((data) => data.password === data.passwordConfirmation, {
@@ -23,10 +26,12 @@ export type SigninFormType = z.infer<typeof signinFormSchmea>;
 
 export const signinFormSchmea = z.object({
   email: z
-    .string({ required_error: MESSAGE.EMAIL_REQUIRED })
+    .string()
+    .nonempty({ message: MESSAGE.EMAIL_REQUIRED })
     .email({ message: MESSAGE.INVALID_EMAIL }),
   password: z
-    .string({ required_error: MESSAGE.PASSWORD_REQUIRED })
+    .string()
+    .nonempty({ message: MESSAGE.PASSWORD_REQUIRED })
     .min(8, { message: MESSAGE.PASSWORD_MIN_LENGTH }),
 });
 
diff --git a/src/schemas/comment.ts b/src/schemas/comment.ts
index 4bbc3d142..5e00aa553 100644
--- a/src/schemas/comment.ts
+++ b/src/schemas/comment.ts
@@ -2,7 +2,7 @@ import { z } from "zod";
 import { COMMENT_VALIDATION_MESSAGE as MESSAGE } from "@util/validation";
 
 export const CommentFormSchema = z.object({
-  content: z.string({ required_error: MESSAGE.COMMENT_REQUIRED }),
+  content: z.string().nonempty({ message: MESSAGE.COMMENT_REQUIRED }),
 });
 
 export type CommentFormType = z.infer<typeof CommentFormSchema>;
diff --git a/src/schemas/product.ts b/src/schemas/product.ts
index 8233937d1..0c8484e35 100644
--- a/src/schemas/product.ts
+++ b/src/schemas/product.ts
@@ -1,21 +1,26 @@
 import { z } from "zod";
 import { PRODUCT_VALIDATION_MESSAGE as MESSAGE } from "@util/validation";
 
-export const ItemFormSchema = z.object({
+export const ProductFormSchema = z.object({
   images: z
-    .string()
-    .array()
-    .nonempty({ message: MESSAGE.PRODUCT_IMAGE_REQUIRED }),
-  tags: z
-    .string()
-    .regex(/^[^!@#$%^&*(),.?":{}|<>_\-+=\[\]\\\/`~';]*$/)
-    .array()
-    .nonempty({ message: MESSAGE.PRODUCT_TAGS_REQUIRED }),
-  name: z.string({ required_error: MESSAGE.PRODUCT_NAME_REQUIRED }),
-  description: z.string({
-    required_error: MESSAGE.PRODUCT_DESCRIPTION_REQUIRED,
+    .array(z.union([z.instanceof(File), z.string()]))
+    .min(1, { message: MESSAGE.PRODUCT_IMAGE_REQUIRED }),
+  tags: z.array(
+    z
+      .string()
+      .regex(/^[^!@#$%^&*(),.?":{}|<>_\-+=\[\]\\\/`~';]*$/, {
+        message: MESSAGE.INVALID_STRING,
+      })
+      .nonempty({ message: MESSAGE.PRODUCT_TAGS_REQUIRED })
+  ),
+  name: z.string().nonempty({ message: MESSAGE.PRODUCT_NAME_REQUIRED }),
+  description: z.string().nonempty({
+    message: MESSAGE.PRODUCT_DESCRIPTION_REQUIRED,
   }),
-  price: z.number().min(100).optional(),
+  price: z.coerce
+    .number()
+    .min(100, { message: 100 + MESSAGE.PRODUCT_PRICE_MIN })
+    .optional(),
 });
 
-export type ItemFormType = z.infer<typeof ItemFormSchema>;
+export type ProductFormType = z.infer<typeof ProductFormSchema>;

From 749008b6c517b7b756609a811200333dea601896 Mon Sep 17 00:00:00 2001
From: "chanki.kim" <chanki.kim89@gmail.com>
Date: Tue, 31 Dec 2024 18:21:55 +0900
Subject: [PATCH 40/72] =?UTF-8?q?Feat:=20Auth=20=EA=B4=80=EB=A0=A8=20ts=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/context/AuthContext.tsx                 | 16 ++++++----------
 src/pages/auth/components/AuthContainer.tsx | 11 ++++++++++-
 src/service/auth.ts                         |  7 +++----
 3 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/src/context/AuthContext.tsx b/src/context/AuthContext.tsx
index ddf36cfa9..bd55a041f 100644
--- a/src/context/AuthContext.tsx
+++ b/src/context/AuthContext.tsx
@@ -8,12 +8,8 @@ import {
 import { getUser, login, refreshAccessToken, signUp } from "@service/auth";
 import { isTokenValid } from "@util/helper";
 import { axiosInstance } from "@service/axios";
-import {
-  SigninFormData,
-  SignupFormData,
-  SignupResponse,
-  User,
-} from "@type/auth";
+import { SignupResponse, User } from "@type/auth";
+import { SigninFormType, SignupFormType } from "@schemas/auth";
 
 type AuthContextProps = {
   auth: {
@@ -21,9 +17,9 @@ type AuthContextProps = {
     refreshToken: string | null;
     user: User | null;
   };
-  handleLogin: (formData: SigninFormData) => Promise<User>;
+  handleLogin: (formData: SigninFormType) => Promise<User>;
   handleLogout: () => void;
-  handleSignup: (formData: SignupFormData) => Promise<SignupResponse>;
+  handleSignup: (formData: SignupFormType) => Promise<SignupResponse>;
 };
 
 type AuthStateProps = {
@@ -126,7 +122,7 @@ export function AuthProvider({ children }: { children: ReactNode }) {
     }
   }
 
-  async function handleLogin({ email, password }: SigninFormData) {
+  async function handleLogin({ email, password }: SigninFormType) {
     try {
       const { user, accessToken, refreshToken } = await login({
         email,
@@ -145,7 +141,7 @@ export function AuthProvider({ children }: { children: ReactNode }) {
     }
   }
 
-  async function handleSignup(formData: SignupFormData) {
+  async function handleSignup(formData: SignupFormType) {
     return signUp(formData);
   }
 
diff --git a/src/pages/auth/components/AuthContainer.tsx b/src/pages/auth/components/AuthContainer.tsx
index 6c7e2338f..8f3618611 100644
--- a/src/pages/auth/components/AuthContainer.tsx
+++ b/src/pages/auth/components/AuthContainer.tsx
@@ -2,8 +2,17 @@ import { Link } from "react-router-dom";
 import logo from "@assets/img/common/logo_full.svg";
 import Oauth from "./Oauth";
 import styles from "./AuthContainer.module.scss";
+import { ReactNode } from "react";
 
-export default function AuthContainer({ children, mode = "login" }) {
+interface AuthContainerProps {
+  children: ReactNode;
+  mode?: "login" | "signup";
+}
+
+export default function AuthContainer({
+  children,
+  mode = "login",
+}: AuthContainerProps) {
   return (
     <>
       <div className={styles["auth-container"]}>
diff --git a/src/service/auth.ts b/src/service/auth.ts
index d3a361b4b..e9e626323 100644
--- a/src/service/auth.ts
+++ b/src/service/auth.ts
@@ -1,14 +1,13 @@
+import { SigninFormType, SignupFormType } from "@schemas/auth";
 import { axiosInstance } from "@service/axios";
 import {
   RefreshResponse,
-  SigninFormData,
   SigninResponse,
-  SignupFormData,
   SignupResponse,
   User,
 } from "@type/auth";
 
-export async function login({ email, password }: SigninFormData) {
+export async function login({ email, password }: SigninFormType) {
   const response = await axiosInstance.post<SigninResponse>("/auth/signIn", {
     email,
     password,
@@ -22,7 +21,7 @@ export async function signUp({
   nickname,
   password,
   passwordConfirmation,
-}: SignupFormData) {
+}: SignupFormType) {
   const response = await axiosInstance.post<SignupResponse>("/auth/signUp", {
     email,
     nickname,

From 38d5825d386c34bd51533f8a7fd10e5652f6834d Mon Sep 17 00:00:00 2001
From: "chanki.kim" <chanki.kim89@gmail.com>
Date: Tue, 31 Dec 2024 18:22:24 +0900
Subject: [PATCH 41/72] =?UTF-8?q?Fix:=20Temporary=20=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20=EC=88=98=EC=A0=95=20-=20=EC=98=B5=EC=85=94?=
 =?UTF-8?q?=EB=84=90=20=ED=94=84=EB=A1=AD=EC=8A=A4=EB=A1=9C=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ui/Temporary.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/ui/Temporary.tsx b/src/components/ui/Temporary.tsx
index d804d388c..2c12c4d3e 100644
--- a/src/components/ui/Temporary.tsx
+++ b/src/components/ui/Temporary.tsx
@@ -3,8 +3,8 @@ import { Button } from "@components/ui";
 import styles from "./Temporary.module.scss";
 
 interface TemporaryProps {
-  title: string;
-  description: string;
+  title?: string;
+  description?: string;
 }
 
 export function Temporary({

From 6c0b515119513be3f2c4792f1047e4859600e3bb Mon Sep 17 00:00:00 2001
From: "chanki.kim" <chanki.kim89@gmail.com>
Date: Tue, 31 Dec 2024 18:22:37 +0900
Subject: [PATCH 42/72] =?UTF-8?q?Feat:=20Debounce=20=ED=95=A8=EC=88=98=20t?=
 =?UTF-8?q?s=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/util/debounce.ts | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/util/debounce.ts b/src/util/debounce.ts
index 1f60927d1..62e5c3009 100644
--- a/src/util/debounce.ts
+++ b/src/util/debounce.ts
@@ -1,9 +1,14 @@
-export function debounce(func, timeout = 300) {
-  let timer;
-  return (...args) => {
+export function debounce<T extends unknown[]>(
+  func: (...args: T) => void,
+  timeout: number = 300
+) {
+  let timer: ReturnType<typeof setTimeout>;
+
+  return (...args: T) => {
     clearTimeout(timer);
+
     timer = setTimeout(() => {
-      func.apply(this, args);
+      func(...args);
     }, timeout);
   };
 }

From e7174551851b13a03965f8a49f090f7858dc9a55 Mon Sep 17 00:00:00 2001
From: "chanki.kim" <chanki.kim89@gmail.com>
Date: Tue, 31 Dec 2024 19:50:27 +0900
Subject: [PATCH 43/72] =?UTF-8?q?Refactor:=20=EC=BD=94=EB=A9=98=ED=8A=B8?=
 =?UTF-8?q?=20=EC=8A=A4=ED=82=A4=EB=A7=88,=20=ED=83=80=EC=9E=85=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Comment/CommentForm.tsx | 6 +++---
 src/components/Comment/useComment.ts   | 7 ++++---
 src/service/comments.ts                | 7 ++++---
 src/types/comment.ts                   | 4 ----
 4 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/src/components/Comment/CommentForm.tsx b/src/components/Comment/CommentForm.tsx
index ed7e18d75..880290ee7 100644
--- a/src/components/Comment/CommentForm.tsx
+++ b/src/components/Comment/CommentForm.tsx
@@ -1,14 +1,14 @@
 import { FieldItem, Form, Textarea } from "@components/Field";
 import { Author, Button } from "@components/ui";
 import styles from "./CommentForm.module.scss";
-import { Comment, CommentFormData } from "@type/comment";
+import { Comment } from "@type/comment";
 import useFormWithError from "@hooks/useFormWithError";
 import { CommentFormSchema, CommentFormType } from "@schemas/comment";
 import { zodResolver } from "@hookform/resolvers/zod";
 
 interface CommentForm {
   initialData?: Comment;
-  onCommentSubmit: (data: CommentFormData) => Promise<void>;
+  onCommentSubmit: (data: CommentFormType) => Promise<void>;
   onClose?: () => void;
   isEdit?: boolean;
 }
@@ -40,7 +40,7 @@ export function CommentForm({
     ? "성공적으로 수정했습니다."
     : "성공적으로 작성했습니다.";
 
-  async function onSubmit(data: CommentFormData) {
+  async function onSubmit(data: CommentFormType) {
     try {
       await onCommentSubmit(data);
       alert(message);
diff --git a/src/components/Comment/useComment.ts b/src/components/Comment/useComment.ts
index c8792cda9..58d1ba638 100644
--- a/src/components/Comment/useComment.ts
+++ b/src/components/Comment/useComment.ts
@@ -1,7 +1,8 @@
 import { useParams } from "react-router-dom";
 import { addComment, removeComment, updateComment } from "@service/comments";
 import { useAuth } from "@context/AuthContext";
-import { BoardName, Comment, CommentFormData } from "@type/comment";
+import { BoardName, Comment } from "@type/comment";
+import { CommentFormType } from "@schemas/comment";
 
 export default function useComment(
   name: BoardName,
@@ -14,7 +15,7 @@ export default function useComment(
   const productId = Number(id);
   const isOwner = user?.id === comment.writer?.id;
 
-  async function handleSubmit(data: CommentFormData) {
+  async function handleSubmit(data: CommentFormType) {
     try {
       await addComment(name, productId, data);
     } catch (err) {
@@ -22,7 +23,7 @@ export default function useComment(
     }
   }
 
-  async function handleUpdate(data: CommentFormData) {
+  async function handleUpdate(data: CommentFormType) {
     if (!comment.id) return;
     if (!isOwner) {
       return alert("작성자만 수정이 가능합니다.");
diff --git a/src/service/comments.ts b/src/service/comments.ts
index d7f6e486f..63a1bbb40 100644
--- a/src/service/comments.ts
+++ b/src/service/comments.ts
@@ -1,5 +1,6 @@
 import { axiosInstance } from "@service/axios";
-import { BoardName, CommentFormData } from "@type/comment";
+import { BoardName } from "@type/comment";
+import { CommentFormType } from "@schemas/comment";
 
 export async function getComments(
   name: BoardName,
@@ -20,7 +21,7 @@ export async function getComments(
 export async function addComment(
   name: BoardName,
   id: number,
-  formData: CommentFormData
+  formData: CommentFormType
 ) {
   const response = await axiosInstance.post(
     `/${name}/${id}/comments`,
@@ -38,7 +39,7 @@ export async function removeComment(commentId: number) {
 
 export async function updateComment(
   commentId: number,
-  formData: CommentFormData
+  formData: CommentFormType
 ) {
   const response = await axiosInstance.patch(
     `/comments/${commentId}`,
diff --git a/src/types/comment.ts b/src/types/comment.ts
index f584a0cdf..5f830e49b 100644
--- a/src/types/comment.ts
+++ b/src/types/comment.ts
@@ -14,7 +14,3 @@ export type Comment = {
   content: string;
   id: number;
 };
-
-export type CommentFormData = {
-  content: string;
-};

From 0fb56178c3c06729344054e925ef45b06504e15b Mon Sep 17 00:00:00 2001
From: "chanki.kim" <chanki.kim89@gmail.com>
Date: Tue, 31 Dec 2024 20:18:55 +0900
Subject: [PATCH 44/72] =?UTF-8?q?Refactor:=20=EC=83=81=ED=92=88=EB=A6=AC?=
 =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81=20(1?=
 =?UTF-8?q?=EC=B0=A8=ED=94=84=EB=A1=9C=EC=A0=9D=ED=8A=B8=ED=9B=84=20?=
 =?UTF-8?q?=EA=B0=9C=EC=84=A0=EC=A0=90)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/List/List.tsx                  | 49 ------------------
 src/components/List/index.ts                  |  1 -
 src/pages/items/AllItemsPage.tsx              | 17 ++-----
 src/pages/items/BestItemsPage.tsx             | 11 ++--
 .../items/components/ProductList.module.scss  | 42 ++++++++-------
 src/pages/items/components/ProductList.tsx    | 51 +++++++++----------
 6 files changed, 58 insertions(+), 113 deletions(-)
 delete mode 100644 src/components/List/List.tsx
 delete mode 100644 src/components/List/index.ts

diff --git a/src/components/List/List.tsx b/src/components/List/List.tsx
deleted file mode 100644
index 727041032..000000000
--- a/src/components/List/List.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import { HTMLAttributes, ReactNode } from "react";
-import { LoadingSpinner, Message } from "@components/ui";
-import { Product } from "@type/product";
-
-interface ListProps extends HTMLAttributes<HTMLUListElement> {
-  items: Product[];
-  renderItem: (item: Product) => ReactNode;
-  isLoading: boolean;
-  error: Error | null;
-  message: {
-    emptyMessage: string;
-    errorMessage: string;
-  };
-  itemClassName: string;
-}
-
-export function List({
-  items,
-  renderItem,
-  isLoading,
-  error,
-  message: {
-    emptyMessage = "항목이 없습니다.",
-    errorMessage = "문제가 생겨 정보를 가져오지 못했습니다.",
-  },
-  itemClassName = "",
-  ...props
-}: ListProps) {
-  if (error) {
-    return <Message>{errorMessage}</Message>;
-  }
-
-  if (!items.length && !isLoading) {
-    return <Message>{emptyMessage}</Message>;
-  }
-
-  return (
-    <>
-      {isLoading && <LoadingSpinner position="absolute" light />}
-      <ul {...props}>
-        {items.map((item, index) => (
-          <li key={item.id || index} className={itemClassName}>
-            {renderItem(item)}
-          </li>
-        ))}
-      </ul>
-    </>
-  );
-}
diff --git a/src/components/List/index.ts b/src/components/List/index.ts
deleted file mode 100644
index 870e1dcb4..000000000
--- a/src/components/List/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./List";
diff --git a/src/pages/items/AllItemsPage.tsx b/src/pages/items/AllItemsPage.tsx
index d740f8831..0b82d8fda 100644
--- a/src/pages/items/AllItemsPage.tsx
+++ b/src/pages/items/AllItemsPage.tsx
@@ -6,9 +6,10 @@ import { Select, Button } from "@components/ui";
 import { Search, Recent } from "@components/Search";
 import { Section } from "@components/Section";
 import { Pagination } from "@components/Pagination/";
-import ProductList from "./components/ProductList";
 import ProductFilter from "./components/ProductFilter";
 import useRecentSearch from "./components/useRecentSearch";
+import ProductList from "./components/ProductList";
+import ProductItem from "./components/ProductItem";
 
 export default function AllItemsPage() {
   const [params, setParams] = useSearchParams();
@@ -104,17 +105,9 @@ export default function AllItemsPage() {
         />
       </Section.Header>
       <Section.Content>
-        <ProductList
-          items={items}
-          keyword={keyword}
-          isLoading={isLoading}
-          error={error}
-          rspnCol={{
-            pc: 5,
-            tablet: 3,
-            mobile: 2,
-          }}
-        />
+        <ProductList items={items} isLoading={isLoading} error={error}>
+          {(item) => <ProductItem item={item} keyword={keyword} />}
+        </ProductList>
         <Pagination {...pagination} />
       </Section.Content>
     </Section>
diff --git a/src/pages/items/BestItemsPage.tsx b/src/pages/items/BestItemsPage.tsx
index d9c349a51..947ea6188 100644
--- a/src/pages/items/BestItemsPage.tsx
+++ b/src/pages/items/BestItemsPage.tsx
@@ -2,6 +2,7 @@ import useResponsive from "@hooks/useResponsive";
 import useProductList from "./components/useProductList";
 import { Section } from "@components/Section";
 import ProductList from "./components/ProductList";
+import ProductItem from "./components/ProductItem";
 
 export default function BestItemsPage() {
   const pageSize = useResponsive({
@@ -22,12 +23,10 @@ export default function BestItemsPage() {
           items={items}
           isLoading={isLoading}
           error={error}
-          rspnCol={{
-            pc: 4,
-            tablet: 2,
-            mobile: 1,
-          }}
-        />
+          mode="best"
+        >
+          {(item) => <ProductItem item={item} />}
+        </ProductList>
       </Section.Content>
     </Section>
   );
diff --git a/src/pages/items/components/ProductList.module.scss b/src/pages/items/components/ProductList.module.scss
index be7259150..614be914f 100644
--- a/src/pages/items/components/ProductList.module.scss
+++ b/src/pages/items/components/ProductList.module.scss
@@ -5,35 +5,41 @@
   gap: 4rem 2.4rem;
   flex-wrap: wrap;
 
+  .item {
+    width: calc(20% - 1.92rem);
+  }
+
   @include mixins.tablet {
     gap: 4rem 1.6rem;
+
+    .item {
+      width: calc(33.333% - 1.067rem);
+    }
   }
 
   @include mixins.mobile {
     gap: 3.2rem 0.8rem;
-  }
 
-  @for $i from 1 through 12 {
-    &.mobile-col-#{$i} {
-      .item {
-        width: calc(100% / #{$i} - (0.8rem * (#{$i} - 1)) / #{$i});
-      }
+    .item {
+      width: calc(50% - 0.4rem);
     }
+  }
+}
+
+.items.best {
+  .item {
+    width: calc(25% - 1.8rem);
+  }
 
-    @include mixins.tabletOnly {
-      &.tablet-col-#{$i} {
-        .item {
-          width: calc(100% / #{$i} - (1.6rem * (#{$i} - 1)) / #{$i});
-        }
-      }
+  @include mixins.tablet {
+    .item {
+      width: calc(50% - 0.8rem);
     }
+  }
 
-    @include mixins.pcOnly {
-      &.pc-col-#{$i} {
-        .item {
-          width: calc(100% / #{$i} - (2.4rem * (#{$i} - 1)) / #{$i});
-        }
-      }
+  @include mixins.mobile {
+    .item {
+      width: 100%;
     }
   }
 }
diff --git a/src/pages/items/components/ProductList.tsx b/src/pages/items/components/ProductList.tsx
index aac0da13f..08da8ffe4 100644
--- a/src/pages/items/components/ProductList.tsx
+++ b/src/pages/items/components/ProductList.tsx
@@ -1,46 +1,43 @@
+import { ReactNode } from "react";
 import clsx from "clsx";
-import { List } from "@components/List";
-import ProductItem from "./ProductItem";
-import styles from "./ProductList.module.scss";
 import { Product } from "@type/product";
+import { LoadingSpinner, Message } from "@components/ui";
+import styles from "./ProductList.module.scss";
 
 interface ProductListProps {
   items: Product[];
   keyword?: string;
   isLoading: boolean;
   error: Error | null;
-  rspnCol: {
-    pc: number;
-    tablet: number;
-    mobile: number;
-  };
+  mode?: "best" | "all";
+  children: (item: Product) => ReactNode;
 }
 
 export default function ProductList({
   items,
-  keyword,
   isLoading,
   error,
-  rspnCol = { pc: 5, tablet: 3, mobile: 2 },
+  mode = "all",
+  children,
 }: ProductListProps) {
-  const col = Object.entries(rspnCol).map(
-    ([key, value]) => styles[`${key}-col-${value}`]
-  );
+  if (error) {
+    return <Message>상품을 가져오는데 문제가 생겼습니다.</Message>;
+  }
+
+  if (!items.length && !isLoading) {
+    return <Message>검색된 상품이 없습니다</Message>;
+  }
 
   return (
-    <List
-      items={items}
-      isLoading={isLoading}
-      error={error}
-      message={{
-        errorMessage: "상품을 가져오는데 문제가 생겼습니다.",
-        emptyMessage: `${
-          keyword ? `'${keyword}'로 검색된` : ""
-        } 상품이 없습니다.`,
-      }}
-      className={clsx(styles.items, col)}
-      itemClassName={styles.item}
-      renderItem={(item) => <ProductItem item={item} keyword={keyword} />}
-    />
+    <>
+      {isLoading && <LoadingSpinner position="absolute" light />}
+      <ul className={clsx(styles.items, styles[mode])}>
+        {items.map((item) => (
+          <li key={item.id} className={styles.item}>
+            {children(item)}
+          </li>
+        ))}
+      </ul>
+    </>
   );
 }

From c4edf0cc23a6486fed9dbeb902706eaf433fe906 Mon Sep 17 00:00:00 2001
From: "chanki.kim" <chanki.kim89@gmail.com>
Date: Tue, 31 Dec 2024 20:27:47 +0900
Subject: [PATCH 45/72] =?UTF-8?q?Refactor:=20=EC=83=81=ED=92=88=20?=
 =?UTF-8?q?=EC=9E=91=EC=84=B1,=20=EC=88=98=EC=A0=95=20=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/items/ItemAddPage.tsx            |  97 ++++++++++++++++-
 src/pages/items/ItemModifyPage.tsx         |  99 +++++++++++++++--
 src/pages/items/components/ProductForm.tsx | 119 ---------------------
 3 files changed, 187 insertions(+), 128 deletions(-)
 delete mode 100644 src/pages/items/components/ProductForm.tsx

diff --git a/src/pages/items/ItemAddPage.tsx b/src/pages/items/ItemAddPage.tsx
index 756a04d00..cb34ab62f 100644
--- a/src/pages/items/ItemAddPage.tsx
+++ b/src/pages/items/ItemAddPage.tsx
@@ -1,13 +1,106 @@
 import { PageWrapper } from "@components/Page";
-import ProductForm from "./components/ProductForm";
 import useProductActions from "./components/useProductActions";
+import { Section } from "@components/Section";
+import {
+  FieldItem,
+  Form,
+  ImageUpload,
+  Input,
+  NumberInput,
+  TagsInput,
+  Textarea,
+} from "@components/Field";
+import { Button } from "@components/ui";
+import useFormWithError from "@hooks/useFormWithError";
+import { ProductFormSchema, ProductFormType } from "@schemas/product";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useNavigate } from "react-router-dom";
 
 export default function ItemAddPage() {
   const { handleProductAdd } = useProductActions();
+  const navigate = useNavigate();
+
+  const {
+    setValue,
+    formError,
+    register,
+    handleSubmit,
+    formState: { isSubmitting, isValid },
+  } = useFormWithError<ProductFormType>({
+    mode: "onBlur",
+    resolver: zodResolver(ProductFormSchema),
+    defaultValues: {
+      images: [],
+      tags: [],
+    },
+  });
+
+  async function onSubmit(data: ProductFormType) {
+    try {
+      await handleProductAdd(data);
+      alert("성공적으로 작성했습니다.");
+      navigate("/items");
+    } catch (err) {
+      throw err;
+    }
+  }
 
   return (
     <PageWrapper>
-      <ProductForm onProductSubmit={handleProductAdd} />
+      <Section>
+        <Form
+          isLoading={isSubmitting}
+          error={formError}
+          onSubmit={handleSubmit(onSubmit)}
+        >
+          <Section.Header title="상품 등록하기">
+            <Button type="submit" size="sm" disabled={!isValid}>
+              등록
+            </Button>
+          </Section.Header>
+          <Section.Content>
+            <FieldItem>
+              <FieldItem.Label htmlFor="images">상품 이미지</FieldItem.Label>
+              <ImageUpload
+                {...register("images")}
+                onChange={(value) =>
+                  setValue("images", value, { shouldValidate: true })
+                }
+              />
+            </FieldItem>
+            <FieldItem>
+              <FieldItem.Label htmlFor="name">상품명</FieldItem.Label>
+              <Input placeholder="상품명 입력해주세요" {...register("name")} />
+            </FieldItem>
+            <FieldItem>
+              <FieldItem.Label htmlFor="description">상품 소개</FieldItem.Label>
+              <Textarea
+                {...register("description")}
+                placeholder="상품 소개를  입력해주세요"
+              />
+            </FieldItem>
+            <FieldItem>
+              <FieldItem.Label htmlFor="price">판매 가격</FieldItem.Label>
+              <NumberInput
+                {...register("price")}
+                placeholder="판매 가격을 입력해주세요"
+              />
+            </FieldItem>
+            <FieldItem>
+              <FieldItem.Label htmlFor="tags">태그</FieldItem.Label>
+              <TagsInput
+                {...register("tags")}
+                placeholder="태그를 입력해주세요"
+                onChange={(value) =>
+                  setValue("tags", value, {
+                    shouldValidate: true,
+                  })
+                }
+              />
+            </FieldItem>
+          </Section.Content>
+        </Form>
+      </Section>
     </PageWrapper>
   );
 }
diff --git a/src/pages/items/ItemModifyPage.tsx b/src/pages/items/ItemModifyPage.tsx
index e4f898163..e1752d2be 100644
--- a/src/pages/items/ItemModifyPage.tsx
+++ b/src/pages/items/ItemModifyPage.tsx
@@ -1,8 +1,21 @@
-import { Navigate, useLoaderData } from "react-router-dom";
+import { Navigate, useLoaderData, useNavigate } from "react-router-dom";
 import { useAuth } from "@context/AuthContext";
 import { PageWrapper } from "@components/Page";
-import ProductForm from "./components/ProductForm";
 import useProductActions from "./components/useProductActions";
+import { Section } from "@components/Section";
+import {
+  FieldItem,
+  Form,
+  ImageUpload,
+  Input,
+  NumberInput,
+  TagsInput,
+  Textarea,
+} from "@components/Field";
+import { Button } from "@components/ui";
+import useFormWithError from "@hooks/useFormWithError";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { ProductFormSchema, ProductFormType } from "@schemas/product";
 import { Product } from "@type/product";
 
 export default function ItemModifyPage() {
@@ -11,19 +24,91 @@ export default function ItemModifyPage() {
     auth: { user },
   } = useAuth();
   const { handleProductModify } = useProductActions(detail.id);
+  const navigate = useNavigate();
 
   if (user && user.id !== detail.ownerId) {
     alert("권한이 없습니다.");
     return <Navigate to="/items" replace />;
   }
 
+  const {
+    setValue,
+    formError,
+    register,
+    handleSubmit,
+    formState: { isSubmitting, isValid },
+  } = useFormWithError<ProductFormType>({
+    mode: "onBlur",
+    resolver: zodResolver(ProductFormSchema),
+    defaultValues: detail,
+  });
+
+  async function onSubmit(data: ProductFormType) {
+    try {
+      await handleProductModify(data);
+      alert("성공적으로 수정했습니다.");
+      navigate(`/items/${detail.id}`);
+    } catch (err) {
+      throw err;
+    }
+  }
+
   return (
     <PageWrapper>
-      <ProductForm
-        initialData={detail}
-        onProductSubmit={handleProductModify}
-        isEdit
-      />
+      <Section>
+        <Form
+          isLoading={isSubmitting}
+          error={formError}
+          onSubmit={handleSubmit(onSubmit)}
+        >
+          <Section.Header title="상품 등록하기">
+            <Button type="submit" size="sm" disabled={!isValid}>
+              수정
+            </Button>
+          </Section.Header>
+          <Section.Content>
+            <FieldItem>
+              <FieldItem.Label htmlFor="images">상품 이미지</FieldItem.Label>
+              <ImageUpload
+                {...register("images")}
+                onChange={(value) =>
+                  setValue("images", value, { shouldValidate: true })
+                }
+              />
+            </FieldItem>
+            <FieldItem>
+              <FieldItem.Label htmlFor="name">상품명</FieldItem.Label>
+              <Input placeholder="상품명 입력해주세요" {...register("name")} />
+            </FieldItem>
+            <FieldItem>
+              <FieldItem.Label htmlFor="description">상품 소개</FieldItem.Label>
+              <Textarea
+                {...register("description")}
+                placeholder="상품 소개를  입력해주세요"
+              />
+            </FieldItem>
+            <FieldItem>
+              <FieldItem.Label htmlFor="price">판매 가격</FieldItem.Label>
+              <NumberInput
+                {...register("price")}
+                placeholder="판매 가격을 입력해주세요"
+              />
+            </FieldItem>
+            <FieldItem>
+              <FieldItem.Label htmlFor="tags">태그</FieldItem.Label>
+              <TagsInput
+                {...register("tags")}
+                placeholder="태그를 입력해주세요"
+                onChange={(value) =>
+                  setValue("tags", value, {
+                    shouldValidate: true,
+                  })
+                }
+              />
+            </FieldItem>
+          </Section.Content>
+        </Form>
+      </Section>
     </PageWrapper>
   );
 }
diff --git a/src/pages/items/components/ProductForm.tsx b/src/pages/items/components/ProductForm.tsx
deleted file mode 100644
index aa9242ae8..000000000
--- a/src/pages/items/components/ProductForm.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-import { useNavigate } from "react-router-dom";
-import { Button } from "@components/ui";
-import { Section } from "@components/Section";
-import {
-  Form,
-  FieldItem,
-  Input,
-  Textarea,
-  TagsInput,
-  ImageUpload,
-  NumberInput,
-} from "@components/Field";
-import { Product } from "@type/product";
-import useFormWithError from "@hooks/useFormWithError";
-import { ProductFormSchema, ProductFormType } from "@schemas/product";
-import { zodResolver } from "@hookform/resolvers/zod";
-
-interface ProductFormProps {
-  initialData?: Product;
-  onProductSubmit: (formData: ProductFormType) => Promise<void>;
-  isEdit?: boolean;
-}
-
-export default function ProductForm({
-  initialData,
-  onProductSubmit,
-  isEdit = false,
-}: ProductFormProps) {
-  const {
-    setValue,
-    formError,
-    register,
-    handleSubmit,
-    formState: { isSubmitting, isValid },
-  } = useFormWithError<ProductFormType>({
-    mode: "onBlur",
-    resolver: zodResolver(ProductFormSchema),
-    defaultValues: {
-      images: [],
-      tags: [],
-      ...initialData,
-    },
-  });
-
-  const navigate = useNavigate();
-
-  const redirect =
-    isEdit && initialData ? `/items/${initialData.id}` : "/items";
-  const message = isEdit
-    ? "성공적으로 수정했습니다."
-    : "성공적으로 작성했습니다.";
-
-  async function onSubmit(data: ProductFormType) {
-    try {
-      await onProductSubmit(data);
-      alert(message);
-      navigate(redirect);
-    } catch (err) {
-      throw err;
-    }
-  }
-
-  return (
-    <Section>
-      <Form
-        isLoading={isSubmitting}
-        error={formError}
-        onSubmit={handleSubmit(onSubmit)}
-      >
-        <Section.Header title="상품 등록하기">
-          <Button type="submit" size="sm" disabled={!isValid}>
-            등록
-          </Button>
-        </Section.Header>
-        <Section.Content>
-          <FieldItem>
-            <FieldItem.Label htmlFor="images">상품 이미지</FieldItem.Label>
-            <ImageUpload
-              {...register("images")}
-              onChange={(value) =>
-                setValue("images", value, { shouldValidate: true })
-              }
-            />
-          </FieldItem>
-          <FieldItem>
-            <FieldItem.Label htmlFor="name">상품명</FieldItem.Label>
-            <Input placeholder="상품명 입력해주세요" {...register("name")} />
-          </FieldItem>
-          <FieldItem>
-            <FieldItem.Label htmlFor="description">상품 소개</FieldItem.Label>
-            <Textarea
-              {...register("description")}
-              placeholder="상품 소개를  입력해주세요"
-            />
-          </FieldItem>
-          <FieldItem>
-            <FieldItem.Label htmlFor="price">판매 가격</FieldItem.Label>
-            <NumberInput
-              {...register("price")}
-              placeholder="판매 가격을 입력해주세요"
-            />
-          </FieldItem>
-          <FieldItem>
-            <FieldItem.Label htmlFor="tags">태그</FieldItem.Label>
-            <TagsInput
-              {...register("tags")}
-              placeholder="태그를 입력해주세요"
-              onChange={(value) =>
-                setValue("tags", value, {
-                  shouldValidate: true,
-                })
-              }
-            />
-          </FieldItem>
-        </Section.Content>
-      </Form>
-    </Section>
-  );
-}

From ec71d6e4c0e1d7b04c806679ce404a40715e75fb Mon Sep 17 00:00:00 2001
From: "chanki.kim" <chanki.kim89@gmail.com>
Date: Tue, 31 Dec 2024 20:46:57 +0900
Subject: [PATCH 46/72] =?UTF-8?q?Refactor:=20=EB=93=9C=EB=A1=AD=EB=8B=A4?=
 =?UTF-8?q?=EC=9A=B4(=EC=85=80=EB=A0=89=ED=8A=B8,=20=EB=AA=A8=EC=96=B4?=
 =?UTF-8?q?=EB=A9=94=EB=89=B4)=20=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ui/Dropdown.tsx | 19 +++----------------
 src/components/ui/Select.tsx   |  7 +++++--
 2 files changed, 8 insertions(+), 18 deletions(-)

diff --git a/src/components/ui/Dropdown.tsx b/src/components/ui/Dropdown.tsx
index 30234f980..16d485b3c 100644
--- a/src/components/ui/Dropdown.tsx
+++ b/src/components/ui/Dropdown.tsx
@@ -44,20 +44,13 @@ const useDropdownDispatch = () => {
   return context;
 };
 
-export function Dropdown({
-  onChange,
-  children,
-}: {
-  onChange?: (value: string) => void;
-  children: ReactNode;
-}) {
+export function Dropdown({ children }: { children: ReactNode }) {
   const [isOpen, setIsOpen] = useState(false);
   const dropdownRef = useRef<HTMLDivElement>(null);
 
   const state = { isOpen };
 
   const dispatch = {
-    onChange,
     setIsOpen,
   };
 
@@ -121,23 +114,17 @@ function Menu({ children }: { children: ReactNode }) {
 }
 
 function Item({
-  value,
   onClick,
   children,
 }: {
-  value?: string;
   onClick?: () => void;
   children: ReactNode;
 }) {
-  const { setIsOpen, onChange } = useDropdownDispatch();
+  const { setIsOpen } = useDropdownDispatch();
 
   function handleClick() {
     setIsOpen(false);
-    value && onChange && onChange(value);
-
-    if (onClick) {
-      onClick();
-    }
+    onClick && onClick();
   }
 
   return (
diff --git a/src/components/ui/Select.tsx b/src/components/ui/Select.tsx
index e7c2e979f..651e10b02 100644
--- a/src/components/ui/Select.tsx
+++ b/src/components/ui/Select.tsx
@@ -15,7 +15,7 @@ interface SelectProps {
 export function Select({ value, options = [], onChange }: SelectProps) {
   const selectedLabel = options.find((option) => option.value === value)?.label;
   return (
-    <Dropdown onChange={onChange}>
+    <Dropdown>
       <Dropdown.Toggle asChild>
         <button type="button" className={styles.button}>
           <span className={styles.label}>{selectedLabel}</span>
@@ -25,7 +25,10 @@ export function Select({ value, options = [], onChange }: SelectProps) {
       </Dropdown.Toggle>
       <Dropdown.Menu>
         {options.map((option) => (
-          <Dropdown.Item key={option.value} value={option.value}>
+          <Dropdown.Item
+            key={option.value}
+            onClick={() => onChange(option.value)}
+          >
             {option.label}
           </Dropdown.Item>
         ))}

From 4c3a5ec9dead61cf0da80ca125d29ca04a33edfd Mon Sep 17 00:00:00 2001
From: "chanki.kim" <chanki.kim89@gmail.com>
Date: Thu, 2 Jan 2025 12:35:31 +0900
Subject: [PATCH 47/72] =?UTF-8?q?Refactor:=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81=20-=20?=
 =?UTF-8?q?=ED=83=80=EC=9E=85=20=EC=A0=90=EA=B2=80=20-=20=ED=95=84?=
 =?UTF-8?q?=EC=9A=94=EC=97=86=EB=8A=94=20=EC=BD=94=EB=93=9C=20=EC=82=AD?=
 =?UTF-8?q?=EC=A0=9C=20-=20=EC=BD=94=EB=93=9C=20=EC=A0=95=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Field/Error.tsx         |  5 +---
 src/components/Field/ImageUpload.tsx   | 12 +++++----
 src/components/Field/Input.module.scss |  3 +++
 src/components/Field/Input.tsx         |  4 +--
 src/components/Field/NumberInput.tsx   | 36 +++++---------------------
 src/components/Field/TagsInput.tsx     | 30 ++++++++++++++-------
 src/components/Field/Textarea.tsx      |  2 +-
 src/components/Header/Header.tsx       | 14 +++-------
 src/components/Layout/Layout.tsx       |  8 ++++--
 src/components/Search/Search.tsx       | 10 +++++++
 src/components/ui/Avatar.tsx           |  4 +--
 src/components/ui/Chip.tsx             |  2 +-
 src/components/ui/Dropdown.tsx         | 11 +++-----
 src/components/ui/Fullscreen.tsx       |  4 +--
 src/components/ui/Thumbnail.tsx        | 10 +++----
 15 files changed, 74 insertions(+), 81 deletions(-)

diff --git a/src/components/Field/Error.tsx b/src/components/Field/Error.tsx
index e2c61942a..974788447 100644
--- a/src/components/Field/Error.tsx
+++ b/src/components/Field/Error.tsx
@@ -1,9 +1,6 @@
 import styles from "./Error.module.scss";
 
-export function Error({ error }: { error: string | undefined }) {
-  if (!error) {
-    return null;
-  }
+export function Error({ error }: { error: string }) {
   return (
     <div className={styles["item-error"]}>
       {error || "오류가 발생했습니다."}
diff --git a/src/components/Field/ImageUpload.tsx b/src/components/Field/ImageUpload.tsx
index 9545dff08..97c46f83a 100644
--- a/src/components/Field/ImageUpload.tsx
+++ b/src/components/Field/ImageUpload.tsx
@@ -9,29 +9,31 @@ import { forwardRef } from "react";
 const LIMIT_SIZE_MB = 2;
 
 interface ImageUploadProps {
-  value: (File | string)[];
   name: string;
+  value: (File | string)[];
   onChange: (file: (File | string)[]) => void;
   error: FieldError | undefined;
   placeholder?: string;
 }
 
-export const ImageUpload = forwardRef<HTMLInputElement, ImageUploadProps>(
-  ({ value, onChange, name, error, placeholder }: ImageUploadProps, ref) => {
+export const ImageUpload = forwardRef(
+  ({ name, value, onChange, error, placeholder }: ImageUploadProps) => {
     const { fileProps, fileError, handleRemove, preview } = useSingleFile({
       value,
-      accept: "image/*",
       onChange,
+      accept: "image/*",
       limitSize: LIMIT_SIZE_MB,
       errorMessage: {
         max: "이미지 등록은 최대 1개까지 가능합니다.",
         accept: "이미지 파일만 업로드 가능합니다.",
       },
     });
-    // 두가지 에러 동시에 보내려고 문자열로 합침
+
+    // react hook form error + useSingleFile hook error
     const fileInputError = [fileError, error?.message]
       .filter((err) => err)
       .join(" / ");
+
     return (
       <>
         <div className={styles["thumbnail-list"]}>
diff --git a/src/components/Field/Input.module.scss b/src/components/Field/Input.module.scss
index 70bc1608e..4c42bdd57 100644
--- a/src/components/Field/Input.module.scss
+++ b/src/components/Field/Input.module.scss
@@ -79,6 +79,9 @@
   pointer-events: none;
 }
 
+input[type="number"]:focus ~ .formatted {
+  display: none;
+}
 .placeholder {
   color: var(--color-secondary-400);
 }
diff --git a/src/components/Field/Input.tsx b/src/components/Field/Input.tsx
index ab2257162..755530041 100644
--- a/src/components/Field/Input.tsx
+++ b/src/components/Field/Input.tsx
@@ -20,7 +20,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
   ref
 ) {
   const [currentType, setCurrentType] = useState(type);
-  const valid = isValid && !error && value;
+  const valid = isValid && value;
   const css = clsx(
     styles["field-box"],
     valid && styles.valid,
@@ -51,7 +51,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
           </button>
         )}
       </div>
-      {error && <Error error={error.message} />}
+      {error?.message && <Error error={error.message} />}
     </>
   );
 });
diff --git a/src/components/Field/NumberInput.tsx b/src/components/Field/NumberInput.tsx
index a8e2b8560..2a8bc9cbc 100644
--- a/src/components/Field/NumberInput.tsx
+++ b/src/components/Field/NumberInput.tsx
@@ -1,4 +1,4 @@
-import { FocusEvent, forwardRef, InputHTMLAttributes, useState } from "react";
+import { forwardRef, InputHTMLAttributes } from "react";
 import clsx from "clsx";
 import { Error } from "@components/Field";
 import styles from "./Input.module.scss";
@@ -10,6 +10,7 @@ interface NumberInputProps extends InputHTMLAttributes<HTMLInputElement> {
   isValid: boolean;
   isTouched: boolean;
   isDirty: boolean;
+  value: number;
 }
 
 export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
@@ -20,15 +21,12 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
       isTouched,
       isDirty,
       placeholder,
-      onFocus,
-      onBlur,
       value,
       ...props
     }: NumberInputProps,
     ref
   ) => {
-    const [isInput, setIsInput] = useState(false);
-    const valid = isValid && !error && value;
+    const valid = isValid && value;
     const css = clsx(
       styles["field-box"],
       valid && styles.valid,
@@ -41,41 +39,21 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
       !value && styles.placeholder
     );
 
-    function handleFocus(e: FocusEvent<HTMLInputElement>) {
-      setIsInput(true);
-
-      if (onFocus) {
-        onFocus(e);
-      }
-    }
-
-    function handleBlur(e: FocusEvent<HTMLInputElement>) {
-      setIsInput(false);
-
-      if (onBlur) {
-        onBlur(e);
-      }
-    }
-
     return (
       <>
         <div className={styles.field}>
-          {!isInput && (
-            <div className={formattedCss}>
-              {(value && toWon(value as string)) || placeholder}
-            </div>
-          )}
           <input
             ref={ref}
             type="number"
             className={css}
             placeholder={placeholder}
             {...props}
-            onBlur={handleBlur}
-            onFocus={handleFocus}
           />
+          <div className={formattedCss}>
+            {value ? toWon(value) : placeholder}
+          </div>
         </div>
-        {error && <Error error={error.message} />}
+        {error?.message && <Error error={error.message} />}
       </>
     );
   }
diff --git a/src/components/Field/TagsInput.tsx b/src/components/Field/TagsInput.tsx
index 71e3f59cf..deae88b98 100644
--- a/src/components/Field/TagsInput.tsx
+++ b/src/components/Field/TagsInput.tsx
@@ -6,19 +6,19 @@ import styles from "./Input.module.scss";
 import { FieldError } from "react-hook-form";
 
 interface TagsInputProps {
+  value: string[];
+  onChange: (value: string[]) => void;
   error: FieldError | FieldError[] | undefined;
   isValid: boolean;
   isTouched: boolean;
   isDirty: boolean;
-  value: string[];
-  onChange: (value: string[]) => void;
-  placeholder: string;
+  placeholder?: string;
 }
 
-export const TagsInput = forwardRef<HTMLInputElement, TagsInputProps>(
-  ({ error, value, onChange, isValid, placeholder }: TagsInputProps, ref) => {
+export const TagsInput = forwardRef(
+  ({ value, onChange, error, isValid, placeholder = "" }: TagsInputProps) => {
     const inputRef = useRef<HTMLInputElement>(null);
-    const valid = isValid && !error && value.length;
+    const valid = isValid && value.length;
     const css = clsx(
       styles["field-box"],
       valid && styles.valid,
@@ -46,9 +46,19 @@ export const TagsInput = forwardRef<HTMLInputElement, TagsInputProps>(
       onChange(newTags);
     }
 
-    const extractError = Array.isArray(error)
-      ? error?.find((err) => err && err.message)?.message ?? null
-      : error?.message;
+    // 메세지가 string or string[] 일 수 있음 (zod schema 때문에)
+    let tagsError: string | undefined;
+    if (Array.isArray(error)) {
+      tagsError = error.reduce((acc: string, errorItem, index) => {
+        if (errorItem.message) {
+          const message = `<${value[index]}>: ${errorItem.message}`;
+          return acc ? acc + ", " + message : message;
+        }
+        return acc;
+      }, "");
+    } else {
+      tagsError = error?.message || undefined;
+    }
 
     return (
       <>
@@ -62,7 +72,7 @@ export const TagsInput = forwardRef<HTMLInputElement, TagsInputProps>(
           />
         </div>
         <Tags tags={value} onRemoveItem={handleRemove} />
-        {extractError && <Error error={extractError} />}
+        {tagsError && <Error error={tagsError} />}
       </>
     );
   }
diff --git a/src/components/Field/Textarea.tsx b/src/components/Field/Textarea.tsx
index 4ff51844c..e11c65f18 100644
--- a/src/components/Field/Textarea.tsx
+++ b/src/components/Field/Textarea.tsx
@@ -39,7 +39,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
         <div className={styles.field}>
           <textarea ref={ref} className={css} {...props} />
         </div>
-        {error && <Error error={error.message} />}
+        {error?.message && <Error error={error.message} />}
       </>
     );
   }
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index b5b6852aa..47d09105a 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -1,18 +1,10 @@
-import { Logo, Nav, Util } from "@components/Header";
+import { ReactNode } from "react";
 import styles from "./Header.module.scss";
 
-interface HeaderProps {
-  showNav?: boolean;
-}
-
-export function Header({ showNav = false }: HeaderProps) {
+export function Header({ children }: { children: ReactNode }) {
   return (
     <header className={styles.header}>
-      <nav className={styles.nav}>
-        <Logo />
-        {showNav && <Nav />}
-        <Util />
-      </nav>
+      <nav className={styles.nav}>{children}</nav>
     </header>
   );
 }
diff --git a/src/components/Layout/Layout.tsx b/src/components/Layout/Layout.tsx
index c14d30acc..7d5112da0 100644
--- a/src/components/Layout/Layout.tsx
+++ b/src/components/Layout/Layout.tsx
@@ -1,5 +1,5 @@
 import { Outlet, ScrollRestoration, useNavigation } from "react-router-dom";
-import { Header } from "@components/Header";
+import { Header, Logo, Nav, Util } from "@components/Header";
 import { Footer } from "@components/Footer";
 import styles from "./Layout.module.scss";
 import { LoadingSpinner } from "@components/ui";
@@ -15,7 +15,11 @@ export function Layout({ hasNav = false, hasFooter = false }: LayoutProps) {
   return (
     <>
       {navigation.state === "loading" && <LoadingSpinner />}
-      <Header showNav={hasNav} />
+      <Header>
+        <Logo />
+        {hasNav && <Nav />}
+        <Util />
+      </Header>
       <main className={styles.main}>
         <Outlet />
       </main>
diff --git a/src/components/Search/Search.tsx b/src/components/Search/Search.tsx
index cef57af39..58c4f3dc6 100644
--- a/src/components/Search/Search.tsx
+++ b/src/components/Search/Search.tsx
@@ -9,6 +9,8 @@ interface SearchProps {
   onSubmit: () => void;
   onClear: () => void;
   placeholder: string;
+  onOpenRecent?: () => void;
+  onCloseRecent?: () => void;
 }
 
 export function Search({
@@ -17,6 +19,8 @@ export function Search({
   onSubmit,
   onClear,
   placeholder,
+  onOpenRecent,
+  onCloseRecent,
 }: SearchProps) {
   const inputRef = useRef<HTMLInputElement>(null);
 
@@ -24,6 +28,7 @@ export function Search({
     e.preventDefault();
     onSubmit();
     inputRef.current && inputRef.current.blur();
+    onCloseRecent && onCloseRecent();
   }
 
   function handleClear() {
@@ -31,6 +36,10 @@ export function Search({
     inputRef.current && inputRef.current.blur();
   }
 
+  function handleFocus() {
+    onOpenRecent && onOpenRecent();
+  }
+
   return (
     <div className={styles.container}>
       <form className={styles.search} onSubmit={handleSubmit}>
@@ -42,6 +51,7 @@ export function Search({
           value={value}
           onChange={onChange}
           placeholder={placeholder}
+          onFocus={handleFocus}
         />
         {value && (
           <button type="button" className={styles.clear} onClick={handleClear}>
diff --git a/src/components/ui/Avatar.tsx b/src/components/ui/Avatar.tsx
index fb3b089e0..df28474ac 100644
--- a/src/components/ui/Avatar.tsx
+++ b/src/components/ui/Avatar.tsx
@@ -1,11 +1,11 @@
+import { SyntheticEvent } from "react";
 import clsx from "clsx";
 import defaultAvatar from "@assets/img/icon/icon_avatar.svg";
 import styles from "./Avatar.module.scss";
-import { SyntheticEvent } from "react";
 
 interface AvatarProps {
-  nickname: string;
   img: string | undefined;
+  nickname: string;
   hover?: boolean;
 }
 
diff --git a/src/components/ui/Chip.tsx b/src/components/ui/Chip.tsx
index c2b2ee5e2..1134ffa82 100644
--- a/src/components/ui/Chip.tsx
+++ b/src/components/ui/Chip.tsx
@@ -2,8 +2,8 @@ import clearIcon from "@assets/img/icon/icon_clear.svg";
 import styles from "./Chip.module.scss";
 
 interface ChipProps {
-  removable?: boolean;
   text: string;
+  removable?: boolean;
   onClick?: () => void;
 }
 
diff --git a/src/components/ui/Dropdown.tsx b/src/components/ui/Dropdown.tsx
index 16d485b3c..6f31ae235 100644
--- a/src/components/ui/Dropdown.tsx
+++ b/src/components/ui/Dropdown.tsx
@@ -20,13 +20,10 @@ type DropdownDispatchContext = {
 };
 
 /** compound pattern + context api 복습 (mui dropdown 참고) */
-const DropdownStateContext = createContext<DropdownStateContext>({
-  isOpen: false,
-});
-const DropdownDispatchContext = createContext<DropdownDispatchContext>({
-  onChange: () => {},
-  setIsOpen: () => {},
-});
+const DropdownStateContext = createContext<DropdownStateContext | null>(null);
+const DropdownDispatchContext = createContext<DropdownDispatchContext | null>(
+  null
+);
 
 const useDropdownState = () => {
   const context = useContext(DropdownStateContext);
diff --git a/src/components/ui/Fullscreen.tsx b/src/components/ui/Fullscreen.tsx
index 6d906ee54..32f3ae291 100644
--- a/src/components/ui/Fullscreen.tsx
+++ b/src/components/ui/Fullscreen.tsx
@@ -5,7 +5,7 @@ import styles from "./Fullscreen.module.scss";
 export function Fullscreen({
   children,
 }: {
-  children: ReactElement<{ onOpenScreen?: (src: string) => void }>;
+  children: ReactElement<{ onFullScreen?: (src: string) => void }>;
 }) {
   const [imgSrc, setImgSrc] = useState<string | null>(null);
 
@@ -19,7 +19,7 @@ export function Fullscreen({
 
   return (
     <>
-      {cloneElement(children, { onOpenScreen: handleOpenScreen })}
+      {cloneElement(children, { onFullScreen: handleOpenScreen })}
       {imgSrc && (
         <Modal>
           <ImgViewer src={imgSrc} onCloseScreen={handleCloseScreen} />
diff --git a/src/components/ui/Thumbnail.tsx b/src/components/ui/Thumbnail.tsx
index b1e43aa67..bb5885725 100644
--- a/src/components/ui/Thumbnail.tsx
+++ b/src/components/ui/Thumbnail.tsx
@@ -5,11 +5,11 @@ import clearIcon from "@assets/img/icon/icon_clear.svg";
 import styles from "./Thumbnail.module.scss";
 
 interface ThumbnailProps {
-  src: string;
+  src?: string;
   alt?: string;
   onRemove?: () => void;
   aspectRatio?: string;
-  onOpenScreen?: (src: string) => void;
+  onFullScreen?: (src: string) => void;
 }
 
 export function Thumbnail({
@@ -17,10 +17,10 @@ export function Thumbnail({
   alt = "",
   onRemove,
   aspectRatio = "1 / 1",
-  onOpenScreen,
+  onFullScreen,
 }: ThumbnailProps) {
   const [isDefault, setIsDefault] = useState(src === defaultImg);
-  const hasFullScreen = onOpenScreen && !isDefault;
+  const hasFullScreen = onFullScreen && !isDefault;
 
   const coverCss = clsx(styles.cover, hasFullScreen && styles.fullscreen);
   const imgCss = clsx(styles.img, isDefault && styles.default);
@@ -29,7 +29,7 @@ export function Thumbnail({
     <figure
       className={coverCss}
       style={{ aspectRatio }}
-      {...(hasFullScreen && { onClick: () => onOpenScreen(src) })}
+      {...(hasFullScreen && { onClick: () => onFullScreen(src) })}
     >
       {onRemove && (
         <button type="button" className={styles.button} onClick={onRemove}>

From dc166e809e970475243bbe74b9e10fa9d4537e23 Mon Sep 17 00:00:00 2001
From: "chanki.kim" <chanki.kim89@gmail.com>
Date: Thu, 2 Jan 2025 12:37:05 +0900
Subject: [PATCH 48/72] =?UTF-8?q?Refactor:=20hook=20=EB=A6=AC=ED=8C=A9?=
 =?UTF-8?q?=ED=86=A0=EB=A7=81=20-=20=ED=83=80=EC=9E=85=EC=A0=90=EA=B2=80?=
 =?UTF-8?q?=20-=20=EC=A0=9C=EB=84=88=EB=A6=AD=EC=97=90=20=ED=97=9D?=
 =?UTF-8?q?=EA=B0=80=EB=A6=AC=EC=95=88=ED=91=9C=EA=B8=B0=EB=B2=95=20?=
 =?UTF-8?q?=EC=9D=BC=EB=B0=98=20=ED=91=9C=EA=B8=B0=EB=B2=95=EC=9C=BC?=
 =?UTF-8?q?=EB=A1=9C=20=EA=B5=90=EC=B2=B4=20-=20=EC=BD=94=EB=93=9C=20?=
 =?UTF-8?q?=EC=A0=95=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/useFormWithError.ts | 16 +++++++---------
 src/hooks/useLocalStorage.ts  |  4 ++--
 src/hooks/useResponsive.ts    |  8 +++++++-
 src/hooks/useSingleFile.ts    |  6 +++---
 4 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/src/hooks/useFormWithError.ts b/src/hooks/useFormWithError.ts
index fd2b1f0c1..1cde2facb 100644
--- a/src/hooks/useFormWithError.ts
+++ b/src/hooks/useFormWithError.ts
@@ -7,16 +7,16 @@ import {
   UseFormProps,
 } from "react-hook-form";
 
-export default function useFormWithError<TFieldValues extends FieldValues>(
-  options: UseFormProps<TFieldValues>
+export default function useFormWithError<T extends FieldValues>(
+  options: UseFormProps<T>
 ) {
   const [formError, setFormError] = useState<Error | null>(null);
-  const form = useForm<TFieldValues>(options);
+  const form = useForm<T>(options);
   const { handleSubmit, getFieldState, register, formState, watch } = form;
 
-  function registerWithError<TFieldName extends FieldPath<TFieldValues>>(
-    name: TFieldName,
-    options?: RegisterOptions<TFieldValues, TFieldName>
+  function registerWithError<U extends FieldPath<T>>(
+    name: U,
+    options?: RegisterOptions<T, U>
   ) {
     const { error, isDirty, isTouched, invalid } = getFieldState(
       name,
@@ -33,9 +33,7 @@ export default function useFormWithError<TFieldValues extends FieldValues>(
     };
   }
 
-  function handleSumbitWithError(
-    submitFn: (data: TFieldValues) => Promise<void>
-  ) {
+  function handleSumbitWithError(submitFn: (data: T) => Promise<void>) {
     return handleSubmit(async function (data) {
       try {
         setFormError(null);
diff --git a/src/hooks/useLocalStorage.ts b/src/hooks/useLocalStorage.ts
index 5df1948b0..26d7e48eb 100644
--- a/src/hooks/useLocalStorage.ts
+++ b/src/hooks/useLocalStorage.ts
@@ -1,7 +1,7 @@
 import { useState } from "react";
 
 export default function useLocalStorage(key: string, initialValue: string[]) {
-  const [state, setState] = useState(() => {
+  const [state, setState] = useState<string[]>(() => {
     try {
       const value = window.localStorage.getItem(key);
       return value ? JSON.parse(value) : initialValue;
@@ -11,7 +11,7 @@ export default function useLocalStorage(key: string, initialValue: string[]) {
     }
   });
 
-  function setValue(value: string[] | ((value: string[]) => void)) {
+  function setValue(value: string[] | ((value: string[]) => string[])) {
     try {
       //useState의 setState에 callback을 넘기는 행동처럼 사용가능하도록
       const newValue = value instanceof Function ? value(state) : value;
diff --git a/src/hooks/useResponsive.ts b/src/hooks/useResponsive.ts
index ecbe87cbb..2ad6e33c0 100644
--- a/src/hooks/useResponsive.ts
+++ b/src/hooks/useResponsive.ts
@@ -2,8 +2,14 @@ import { useEffect, useState } from "react";
 import { getDeviceType } from "@util/breakpoints";
 import { debounce } from "@util/debounce";
 
+type ResponsiveNumber = {
+  pc: number;
+  tablet: number;
+  mobile: number;
+};
+
 export default function useResponsive(
-  initialOption = {
+  initialOption: ResponsiveNumber = {
     pc: 10,
     tablet: 6,
     mobile: 4,
diff --git a/src/hooks/useSingleFile.ts b/src/hooks/useSingleFile.ts
index 993ef1af0..008297604 100644
--- a/src/hooks/useSingleFile.ts
+++ b/src/hooks/useSingleFile.ts
@@ -2,9 +2,9 @@ import { ChangeEvent, useEffect, useRef, useState } from "react";
 
 interface SingleFileProps {
   value: (File | string)[];
-  accept: string;
-  limitSize: number;
   onChange: (file: (File | string)[]) => void;
+  accept?: string;
+  limitSize?: number;
   errorMessage?: {
     max?: string;
     accept?: string;
@@ -78,8 +78,8 @@ export default function useSingleFile({
       accept,
       onChange: handleChange,
     },
-    preview,
     fileError: error,
     handleRemove,
+    preview,
   };
 }

From d3e302bd526477e39400f695ef7959a72f52da54 Mon Sep 17 00:00:00 2001
From: "chanki.kim" <chanki.kim89@gmail.com>
Date: Thu, 2 Jan 2025 12:37:51 +0900
Subject: [PATCH 49/72] =?UTF-8?q?Refactor:=20=EB=A6=AC=EC=8A=A4=ED=8A=B8?=
 =?UTF-8?q?=20=EC=BF=BC=EB=A6=AC=ED=8C=8C=EB=9E=8C=EC=9D=84=20=EA=B3=B5?=
 =?UTF-8?q?=EC=9A=A9=20=ED=83=80=EC=9E=85=EC=9C=BC=EB=A1=9C=20=EB=A6=AC?=
 =?UTF-8?q?=ED=8C=A9=ED=86=A0=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/items/components/useProductList.ts | 8 ++------
 src/types/common.ts                          | 6 ++++++
 2 files changed, 8 insertions(+), 6 deletions(-)
 create mode 100644 src/types/common.ts

diff --git a/src/pages/items/components/useProductList.ts b/src/pages/items/components/useProductList.ts
index fab00eea2..4599da27c 100644
--- a/src/pages/items/components/useProductList.ts
+++ b/src/pages/items/components/useProductList.ts
@@ -1,13 +1,9 @@
 import { useEffect } from "react";
 import { getProducts } from "@service/product";
 import useAsync from "@hooks/useAsync";
+import { ListQueryParams } from "@type/common";
 
-interface useProductListProps {
-  page?: number;
-  pageSize: number;
-  keyword?: string;
-  orderBy: string;
-}
+type useProductListProps = Partial<ListQueryParams>;
 
 export default function useProductList({
   page,
diff --git a/src/types/common.ts b/src/types/common.ts
new file mode 100644
index 000000000..05926f6c1
--- /dev/null
+++ b/src/types/common.ts
@@ -0,0 +1,6 @@
+export type ListQueryParams = {
+  page: number;
+  pageSize: number;
+  keyword: string;
+  orderBy: string;
+};

From 2b42fa6922c6b0cd9c0d44f147c86785cf3e9635 Mon Sep 17 00:00:00 2001
From: "chanki.kim" <chanki.kim89@gmail.com>
Date: Thu, 2 Jan 2025 12:38:34 +0900
Subject: [PATCH 50/72] =?UTF-8?q?Refactor:=20=EC=84=9C=EB=B9=84=EC=8A=A4?=
 =?UTF-8?q?=20=ED=95=A8=EC=88=98=20=ED=83=80=EC=9E=85=20=EC=A0=90=EA=B2=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/service/comments.ts | 17 ++++++++++++-----
 src/service/product.ts  |  2 +-
 src/types/comment.ts    |  4 ++++
 3 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/service/comments.ts b/src/service/comments.ts
index 63a1bbb40..148cef02e 100644
--- a/src/service/comments.ts
+++ b/src/service/comments.ts
@@ -1,5 +1,10 @@
 import { axiosInstance } from "@service/axios";
-import { BoardName } from "@type/comment";
+import {
+  BoardName,
+  Comment,
+  DeleteCommentResponse,
+  CommentList,
+} from "@type/comment";
 import { CommentFormType } from "@schemas/comment";
 
 export async function getComments(
@@ -11,7 +16,7 @@ export async function getComments(
   }: { productId: number; limit: number; cursor?: number }
 ) {
   const query = `limit=${limit}${cursor ? `&cursor=${cursor}` : ""}`;
-  const response = await axiosInstance.get(
+  const response = await axiosInstance.get<CommentList>(
     `/${name}/${productId}/comments?${query}`
   );
 
@@ -23,7 +28,7 @@ export async function addComment(
   id: number,
   formData: CommentFormType
 ) {
-  const response = await axiosInstance.post(
+  const response = await axiosInstance.post<Comment>(
     `/${name}/${id}/comments`,
     formData
   );
@@ -32,7 +37,9 @@ export async function addComment(
 }
 
 export async function removeComment(commentId: number) {
-  const response = await axiosInstance.delete(`/comments/${commentId}`);
+  const response = await axiosInstance.delete<DeleteCommentResponse>(
+    `/comments/${commentId}`
+  );
 
   return response.data;
 }
@@ -41,7 +48,7 @@ export async function updateComment(
   commentId: number,
   formData: CommentFormType
 ) {
-  const response = await axiosInstance.patch(
+  const response = await axiosInstance.patch<Comment>(
     `/comments/${commentId}`,
     formData
   );
diff --git a/src/service/product.ts b/src/service/product.ts
index 237cddd84..17de97930 100644
--- a/src/service/product.ts
+++ b/src/service/product.ts
@@ -38,7 +38,7 @@ export async function modifyProduct(
   productId: number,
   productData: ProductFormType
 ) {
-  const response = await axiosInstance.patch(
+  const response = await axiosInstance.patch<Product>(
     `/products/${productId}`,
     productData
   );
diff --git a/src/types/comment.ts b/src/types/comment.ts
index 5f830e49b..f6b0107e6 100644
--- a/src/types/comment.ts
+++ b/src/types/comment.ts
@@ -14,3 +14,7 @@ export type Comment = {
   content: string;
   id: number;
 };
+
+export type DeleteCommentResponse = {
+  id: number;
+};

From ea9e9a331e2b91a304c47070c2d0dd6a3ce7a584 Mon Sep 17 00:00:00 2001
From: "chanki.kim" <chanki.kim89@gmail.com>
Date: Thu, 2 Jan 2025 12:39:28 +0900
Subject: [PATCH 51/72] =?UTF-8?q?Refactor:=20=EC=BD=94=EB=93=9C=20?=
 =?UTF-8?q?=EC=A0=95=EB=A6=AC=20-=20=ED=85=8C=EC=8A=A4=ED=8A=B8=EC=9A=A9?=
 =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EC=8D=BB=EB=8D=98=20=EC=8A=A4=ED=82=A4?=
 =?UTF-8?q?=EB=A7=88=20=EC=98=B5=EC=85=98=20=EC=A0=95=EB=A6=AC=20-=20?=
 =?UTF-8?q?=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81=ED=95=98=EB=A9=B4=EC=84=9C?=
 =?UTF-8?q?=20=EB=B6=88=ED=95=84=EC=9A=94=ED=95=B4=EC=A7=84=20=ED=94=84?=
 =?UTF-8?q?=EB=A1=AD=EC=8A=A4=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/items/components/ProductList.tsx | 1 -
 src/schemas/product.ts                     | 3 +--
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/pages/items/components/ProductList.tsx b/src/pages/items/components/ProductList.tsx
index 08da8ffe4..39435d91e 100644
--- a/src/pages/items/components/ProductList.tsx
+++ b/src/pages/items/components/ProductList.tsx
@@ -6,7 +6,6 @@ import styles from "./ProductList.module.scss";
 
 interface ProductListProps {
   items: Product[];
-  keyword?: string;
   isLoading: boolean;
   error: Error | null;
   mode?: "best" | "all";
diff --git a/src/schemas/product.ts b/src/schemas/product.ts
index 0c8484e35..b4350dc14 100644
--- a/src/schemas/product.ts
+++ b/src/schemas/product.ts
@@ -19,8 +19,7 @@ export const ProductFormSchema = z.object({
   }),
   price: z.coerce
     .number()
-    .min(100, { message: 100 + MESSAGE.PRODUCT_PRICE_MIN })
-    .optional(),
+    .min(100, { message: 100 + MESSAGE.PRODUCT_PRICE_MIN }),
 });
 
 export type ProductFormType = z.infer<typeof ProductFormSchema>;

From afa3d5081f56390b672ed0085e5ff49b89bc3325 Mon Sep 17 00:00:00 2001
From: "chanki.kim" <chanki.kim89@gmail.com>
Date: Thu, 2 Jan 2025 12:39:50 +0900
Subject: [PATCH 52/72] =?UTF-8?q?Refactor:=20=EB=9E=9C=EB=94=A9=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=BB=A8=ED=85=90=EC=B8=A0=20=ED=83=80?=
 =?UTF-8?q?=EC=9E=85=20=EC=A0=90=EA=B2=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/landing/components/Feature.tsx | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/pages/landing/components/Feature.tsx b/src/pages/landing/components/Feature.tsx
index 91086915b..11e3c46c8 100644
--- a/src/pages/landing/components/Feature.tsx
+++ b/src/pages/landing/components/Feature.tsx
@@ -8,16 +8,13 @@ type Featrue = {
     src: string;
     alt: string;
   };
+  reverse?: boolean;
 };
 
 interface FeatureProps {
   list: Featrue[];
 }
 
-type FetaureItemProps = Featrue & {
-  reverse: boolean;
-};
-
 export default function Feature({ list }: FeatureProps) {
   return (
     <section className={styles.features}>
@@ -39,7 +36,7 @@ function FeatureItem({
   title,
   featureImg,
   description,
-}: FetaureItemProps) {
+}: Featrue) {
   return (
     <div className={`${styles.feature} ${reverse ? styles.reverse : ""}`}>
       <div className={styles.inner}>

From 6c54f5448f017671205514e183695b1ca33d4e26 Mon Sep 17 00:00:00 2001
From: "chanki.kim" <chanki.kim89@gmail.com>
Date: Thu, 2 Jan 2025 12:40:19 +0900
Subject: [PATCH 53/72] =?UTF-8?q?Refactor:=20useComment=20hook=20=ED=83=80?=
 =?UTF-8?q?=EC=9E=85=20=EC=A0=90=EA=B2=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Comment/useComment.ts | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/components/Comment/useComment.ts b/src/components/Comment/useComment.ts
index 58d1ba638..2abd9837e 100644
--- a/src/components/Comment/useComment.ts
+++ b/src/components/Comment/useComment.ts
@@ -4,16 +4,13 @@ import { useAuth } from "@context/AuthContext";
 import { BoardName, Comment } from "@type/comment";
 import { CommentFormType } from "@schemas/comment";
 
-export default function useComment(
-  name: BoardName,
-  comment: Partial<Comment> = {}
-) {
+export default function useComment(name: BoardName, comment?: Comment) {
   const {
     auth: { user },
   } = useAuth();
   const { id } = useParams();
   const productId = Number(id);
-  const isOwner = user?.id === comment.writer?.id;
+  const isOwner = user && comment && user.id === comment.writer.id;
 
   async function handleSubmit(data: CommentFormType) {
     try {
@@ -24,7 +21,8 @@ export default function useComment(
   }
 
   async function handleUpdate(data: CommentFormType) {
-    if (!comment.id) return;
+    if (!comment) return;
+
     if (!isOwner) {
       return alert("작성자만 수정이 가능합니다.");
     }
@@ -37,7 +35,7 @@ export default function useComment(
   }
 
   async function handleDelete() {
-    if (!comment.id) return;
+    if (!comment) return;
 
     if (!isOwner) {
       return alert("작성자만 삭제가 가능합니다.");

From 391eebbcb85b7b60ffef2fc189b408db651ed97b Mon Sep 17 00:00:00 2001
From: "chanki.kim" <chanki.kim89@gmail.com>
Date: Thu, 2 Jan 2025 12:40:47 +0900
Subject: [PATCH 54/72] =?UTF-8?q?Refactor:=20react=20router=20Await=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=82=B4=EB=B6=80=20?=
 =?UTF-8?q?=ED=83=80=EC=9E=85=20=EC=A0=95=EC=9D=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/items/ItemDetailPage.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/pages/items/ItemDetailPage.tsx b/src/pages/items/ItemDetailPage.tsx
index 1ca90f71d..c97173774 100644
--- a/src/pages/items/ItemDetailPage.tsx
+++ b/src/pages/items/ItemDetailPage.tsx
@@ -25,7 +25,9 @@ export default function ItemDetailPage() {
       {/* non critical */}
       <Suspense fallback={<Loading>상품 문의를 가져오는 중입니다....</Loading>}>
         <Await resolve={comments}>
-          {(comments) => <CommentList name="products" comments={comments} />}
+          {(comments: CommentListType) => (
+            <CommentList name="products" comments={comments} />
+          )}
         </Await>
       </Suspense>
 

From 54de08a90605dd551ecec0f139e9bd60e4fa2221 Mon Sep 17 00:00:00 2001
From: "chanki.kim" <chanki.kim89@gmail.com>
Date: Thu, 2 Jan 2025 12:56:24 +0900
Subject: [PATCH 55/72] =?UTF-8?q?Refactor:=20forwardref=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95=20-=20ref=EB=A5=BC=20=EC=95=88=EC=93=B0=EB=8D=94?=
 =?UTF-8?q?=EB=9D=BC=EB=8F=84=20=EC=A0=81=EC=9C=BC=EB=9D=BC=EB=8A=94=20?=
 =?UTF-8?q?=EA=B2=BD=EA=B3=A0=20=EC=B2=98=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Field/ImageUpload.tsx | 2 +-
 src/components/Field/TagsInput.tsx   | 5 ++++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/Field/ImageUpload.tsx b/src/components/Field/ImageUpload.tsx
index 97c46f83a..58289ca22 100644
--- a/src/components/Field/ImageUpload.tsx
+++ b/src/components/Field/ImageUpload.tsx
@@ -17,7 +17,7 @@ interface ImageUploadProps {
 }
 
 export const ImageUpload = forwardRef(
-  ({ name, value, onChange, error, placeholder }: ImageUploadProps) => {
+  ({ name, value, onChange, error, placeholder }: ImageUploadProps, _) => {
     const { fileProps, fileError, handleRemove, preview } = useSingleFile({
       value,
       onChange,
diff --git a/src/components/Field/TagsInput.tsx b/src/components/Field/TagsInput.tsx
index deae88b98..0173a4bae 100644
--- a/src/components/Field/TagsInput.tsx
+++ b/src/components/Field/TagsInput.tsx
@@ -16,7 +16,10 @@ interface TagsInputProps {
 }
 
 export const TagsInput = forwardRef(
-  ({ value, onChange, error, isValid, placeholder = "" }: TagsInputProps) => {
+  (
+    { value, onChange, error, isValid, placeholder = "" }: TagsInputProps,
+    _
+  ) => {
     const inputRef = useRef<HTMLInputElement>(null);
     const valid = isValid && value.length;
     const css = clsx(

From f71ddd852d6072d1cd2dff2f35b5e963831a2ab2 Mon Sep 17 00:00:00 2001
From: "chanki.kim" <chanki.kim89@gmail.com>
Date: Thu, 2 Jan 2025 12:57:04 +0900
Subject: [PATCH 56/72] =?UTF-8?q?Fix:=20abort=20=EB=95=8C=EB=AC=B8?=
 =?UTF-8?q?=EC=97=90=20=EB=A1=9C=EB=94=A9=EC=A4=91=20=EC=83=81=ED=83=9C?=
 =?UTF-8?q?=EB=A5=BC=20=EB=AA=BB=EB=82=98=ED=83=80=EB=82=B4=EB=8A=94=20?=
 =?UTF-8?q?=EB=B6=80=EB=B6=84=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/useAsync.ts                      | 16 ++++++++++++----
 src/pages/items/components/ProductList.tsx |  6 +++++-
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/hooks/useAsync.ts b/src/hooks/useAsync.ts
index 67723d4d3..009a4adb1 100644
--- a/src/hooks/useAsync.ts
+++ b/src/hooks/useAsync.ts
@@ -6,6 +6,8 @@ export default function useAsync<T>(asyncFn: (...args: any[]) => Promise<T>) {
   const [error, setError] = useState<Error | null>(null);
 
   async function wrappedFn(...args: Parameters<typeof asyncFn>) {
+    let isAborted = false;
+
     try {
       setError(null);
       setIsLoading(true);
@@ -13,13 +15,19 @@ export default function useAsync<T>(asyncFn: (...args: any[]) => Promise<T>) {
       setResult(res);
       return res;
     } catch (err) {
-      if (err instanceof Error && err.name !== "CanceledError") {
-        setError(err);
+      if (err instanceof Error) {
+        if (err.name === "CanceledError") {
+          isAborted = true;
+        } else {
+          setError(err);
+        }
       }
     } finally {
-      setIsLoading(false);
+      if (!isAborted) {
+        setIsLoading(false);
+      }
     }
   }
 
-  return { isLoading, error, result, wrappedFn };
+  return { isLoading, setIsLoading, error, result, wrappedFn };
 }
diff --git a/src/pages/items/components/ProductList.tsx b/src/pages/items/components/ProductList.tsx
index 39435d91e..9036a8065 100644
--- a/src/pages/items/components/ProductList.tsx
+++ b/src/pages/items/components/ProductList.tsx
@@ -23,7 +23,11 @@ export default function ProductList({
     return <Message>상품을 가져오는데 문제가 생겼습니다.</Message>;
   }
 
-  if (!items.length && !isLoading) {
+  if (isLoading) {
+    return <Message>상품을 가져오는 중입니다.</Message>;
+  }
+
+  if (!items.length) {
     return <Message>검색된 상품이 없습니다</Message>;
   }
 

From f28f5639e560d7701ddcf00465828335a45b0376 Mon Sep 17 00:00:00 2001
From: "chanki.kim" <chanki.kim89@gmail.com>
Date: Thu, 2 Jan 2025 15:10:28 +0900
Subject: [PATCH 57/72] =?UTF-8?q?Refactor:=20auth=20types=20=EB=A6=AC?=
 =?UTF-8?q?=ED=8C=A9=ED=86=A0=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/context/AuthContext.tsx |  4 ++--
 src/service/auth.ts         | 11 +++--------
 src/types/auth.ts           | 11 +++--------
 3 files changed, 8 insertions(+), 18 deletions(-)

diff --git a/src/context/AuthContext.tsx b/src/context/AuthContext.tsx
index bd55a041f..1fb8ae57d 100644
--- a/src/context/AuthContext.tsx
+++ b/src/context/AuthContext.tsx
@@ -8,7 +8,7 @@ import {
 import { getUser, login, refreshAccessToken, signUp } from "@service/auth";
 import { isTokenValid } from "@util/helper";
 import { axiosInstance } from "@service/axios";
-import { SignupResponse, User } from "@type/auth";
+import { AuthResponse, User } from "@type/auth";
 import { SigninFormType, SignupFormType } from "@schemas/auth";
 
 type AuthContextProps = {
@@ -19,7 +19,7 @@ type AuthContextProps = {
   };
   handleLogin: (formData: SigninFormType) => Promise<User>;
   handleLogout: () => void;
-  handleSignup: (formData: SignupFormType) => Promise<SignupResponse>;
+  handleSignup: (formData: SignupFormType) => Promise<AuthResponse>;
 };
 
 type AuthStateProps = {
diff --git a/src/service/auth.ts b/src/service/auth.ts
index e9e626323..4a9242b88 100644
--- a/src/service/auth.ts
+++ b/src/service/auth.ts
@@ -1,14 +1,9 @@
 import { SigninFormType, SignupFormType } from "@schemas/auth";
 import { axiosInstance } from "@service/axios";
-import {
-  RefreshResponse,
-  SigninResponse,
-  SignupResponse,
-  User,
-} from "@type/auth";
+import { RefreshResponse, AuthResponse, User } from "@type/auth";
 
 export async function login({ email, password }: SigninFormType) {
-  const response = await axiosInstance.post<SigninResponse>("/auth/signIn", {
+  const response = await axiosInstance.post<AuthResponse>("/auth/signIn", {
     email,
     password,
   });
@@ -22,7 +17,7 @@ export async function signUp({
   password,
   passwordConfirmation,
 }: SignupFormType) {
-  const response = await axiosInstance.post<SignupResponse>("/auth/signUp", {
+  const response = await axiosInstance.post<AuthResponse>("/auth/signUp", {
     email,
     nickname,
     password,
diff --git a/src/types/auth.ts b/src/types/auth.ts
index e06a44c18..76a649d4e 100644
--- a/src/types/auth.ts
+++ b/src/types/auth.ts
@@ -6,18 +6,13 @@ export type User = {
   id: number;
 };
 
-export type SigninResponse = {
+export type Tokens = {
   accessToken: string;
   refreshToken: string;
-  user: User;
 };
 
-export type SignupResponse = {
-  accessToken: string;
-  refreshToken: string;
+export type AuthResponse = Tokens & {
   user: User;
 };
 
-export type RefreshResponse = {
-  accessToken: string;
-};
+export type RefreshResponse = Pick<Tokens, "accessToken">;

From 03d637c6b8612c0617f3b33bffba48cf72a4c8ee Mon Sep 17 00:00:00 2001
From: "chanki.kim" <chanki.kim89@gmail.com>
Date: Thu, 2 Jan 2025 15:25:30 +0900
Subject: [PATCH 58/72] =?UTF-8?q?Chore:=20vite=20typescript=20check=20plug?=
 =?UTF-8?q?in=20=EC=84=A4=EC=B9=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json | 644 +++++++++++++++++++++++++++++++++++++++++++++-
 package.json      |   3 +-
 vite.config.ts    |   3 +-
 3 files changed, 639 insertions(+), 11 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index a1d2ae90d..36c039506 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -27,7 +27,8 @@
         "@vitejs/plugin-react": "^4.3.3",
         "sass": "^1.81.0",
         "typescript": "^5.7.2",
-        "vite": "^5.4.11"
+        "vite": "^5.4.11",
+        "vite-plugin-checker": "^0.8.0"
       }
     },
     "node_modules/@ampproject/remapping": {
@@ -769,6 +770,44 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/@parcel/watcher": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.0.tgz",
@@ -1442,6 +1481,62 @@
         "vite": "^4.2.0 || ^5.0.0"
       }
     },
+    "node_modules/ansi-escapes": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz",
+      "integrity": "sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "type-fest": "^0.21.3"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
@@ -1459,13 +1554,43 @@
         "proxy-from-env": "^1.1.0"
       }
     },
+    "node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/binary-extensions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
     "node_modules/braces": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
       "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
       "dependencies": {
         "fill-range": "^7.1.1"
       },
@@ -1527,6 +1652,23 @@
       ],
       "license": "CC-BY-4.0"
     },
+    "node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
     "node_modules/chokidar": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.1.tgz",
@@ -1552,6 +1694,26 @@
         "node": ">=6"
       }
     },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/combined-stream": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -1564,6 +1726,23 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/commander": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
+      "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 12"
+      }
+    },
+    "node_modules/concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/convert-source-map": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
@@ -1681,13 +1860,39 @@
         "node": ">=6"
       }
     },
+    "node_modules/fast-glob": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
+      "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/fastq": {
+      "version": "1.18.0",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.18.0.tgz",
+      "integrity": "sha512-QKHXPW0hD8g4UET03SdOdunzSouc9N4AuHdsX8XNcTsuz+yYFILVNIX4l9yHABMhiEI9Db0JTTIpu0wB+Y1QQw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "reusify": "^1.0.4"
+      }
+    },
     "node_modules/fill-range": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
       "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
       "dependencies": {
         "to-regex-range": "^5.0.1"
       },
@@ -1729,6 +1934,21 @@
         "node": ">= 6"
       }
     },
+    "node_modules/fs-extra": {
+      "version": "11.2.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.2.0.tgz",
+      "integrity": "sha512-PmDi3uwK5nFuXh7XDTlVnS17xJS7vW36is2+w3xcv8SVxiB4NyATf4ctkVY5bkSjX0Y4nbvZCq1/EjtEyr9ktw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=14.14"
+      }
+    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -1754,6 +1974,19 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/globals": {
       "version": "11.12.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
@@ -1764,6 +1997,23 @@
         "node": ">=4"
       }
     },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/immutable": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.0.2.tgz",
@@ -1771,13 +2021,25 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
       "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -1788,7 +2050,6 @@
       "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
       "dependencies": {
         "is-extglob": "^2.1.1"
       },
@@ -1802,7 +2063,6 @@
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
       "engines": {
         "node": ">=0.12.0"
       }
@@ -1839,6 +2099,19 @@
         "node": ">=6"
       }
     },
+    "node_modules/jsonfile": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+      "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
     "node_modules/jwt-decode": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-4.0.0.tgz",
@@ -1876,13 +2149,22 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/micromatch": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
       "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
       "dependencies": {
         "braces": "^3.0.3",
         "picomatch": "^2.3.1"
@@ -1912,6 +2194,19 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -1953,6 +2248,39 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/npm-run-path": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
+      "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "path-key": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -1966,7 +2294,6 @@
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
       "engines": {
         "node": ">=8.6"
       },
@@ -2009,6 +2336,27 @@
       "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
       "license": "MIT"
     },
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/react": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
@@ -2106,6 +2454,17 @@
         "url": "https://paulmillr.com/funding/"
       }
     },
+    "node_modules/reusify": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
+      "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/rollup": {
       "version": "4.27.2",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.27.2.tgz",
@@ -2144,6 +2503,30 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
     "node_modules/sass": {
       "version": "1.81.0",
       "resolved": "https://registry.npmjs.org/sass/-/sass-1.81.0.tgz",
@@ -2194,13 +2577,45 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/tiny-invariant": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
+      "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
       "dependencies": {
         "is-number": "^7.0.0"
       },
@@ -2208,6 +2623,19 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/type-fest": {
+      "version": "0.21.3",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
+      "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==",
+      "dev": true,
+      "license": "(MIT OR CC0-1.0)",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/typescript": {
       "version": "5.7.2",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.7.2.tgz",
@@ -2229,6 +2657,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/universalify": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.1.tgz",
@@ -2320,6 +2758,194 @@
         }
       }
     },
+    "node_modules/vite-plugin-checker": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/vite-plugin-checker/-/vite-plugin-checker-0.8.0.tgz",
+      "integrity": "sha512-UA5uzOGm97UvZRTdZHiQVYFnd86AVn8EVaD4L3PoVzxH+IZSfaAw14WGFwX9QS23UW3lV/5bVKZn6l0w+q9P0g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.12.13",
+        "ansi-escapes": "^4.3.0",
+        "chalk": "^4.1.1",
+        "chokidar": "^3.5.1",
+        "commander": "^8.0.0",
+        "fast-glob": "^3.2.7",
+        "fs-extra": "^11.1.0",
+        "npm-run-path": "^4.0.1",
+        "strip-ansi": "^6.0.0",
+        "tiny-invariant": "^1.1.0",
+        "vscode-languageclient": "^7.0.0",
+        "vscode-languageserver": "^7.0.0",
+        "vscode-languageserver-textdocument": "^1.0.1",
+        "vscode-uri": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=14.16"
+      },
+      "peerDependencies": {
+        "@biomejs/biome": ">=1.7",
+        "eslint": ">=7",
+        "meow": "^9.0.0",
+        "optionator": "^0.9.1",
+        "stylelint": ">=13",
+        "typescript": "*",
+        "vite": ">=2.0.0",
+        "vls": "*",
+        "vti": "*",
+        "vue-tsc": "~2.1.6"
+      },
+      "peerDependenciesMeta": {
+        "@biomejs/biome": {
+          "optional": true
+        },
+        "eslint": {
+          "optional": true
+        },
+        "meow": {
+          "optional": true
+        },
+        "optionator": {
+          "optional": true
+        },
+        "stylelint": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        },
+        "vls": {
+          "optional": true
+        },
+        "vti": {
+          "optional": true
+        },
+        "vue-tsc": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vite-plugin-checker/node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/vite-plugin-checker/node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/vscode-jsonrpc": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/vscode-jsonrpc/-/vscode-jsonrpc-6.0.0.tgz",
+      "integrity": "sha512-wnJA4BnEjOSyFMvjZdpiOwhSq9uDoK8e/kpRJDTaMYzwlkrhG1fwDIZI94CLsLzlCK5cIbMMtFlJlfR57Lavmg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.0.0 || >=10.0.0"
+      }
+    },
+    "node_modules/vscode-languageclient": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/vscode-languageclient/-/vscode-languageclient-7.0.0.tgz",
+      "integrity": "sha512-P9AXdAPlsCgslpP9pRxYPqkNYV7Xq8300/aZDpO35j1fJm/ncize8iGswzYlcvFw5DQUx4eVk+KvfXdL0rehNg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "minimatch": "^3.0.4",
+        "semver": "^7.3.4",
+        "vscode-languageserver-protocol": "3.16.0"
+      },
+      "engines": {
+        "vscode": "^1.52.0"
+      }
+    },
+    "node_modules/vscode-languageclient/node_modules/semver": {
+      "version": "7.6.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
+      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/vscode-languageserver": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/vscode-languageserver/-/vscode-languageserver-7.0.0.tgz",
+      "integrity": "sha512-60HTx5ID+fLRcgdHfmz0LDZAXYEV68fzwG0JWwEPBode9NuMYTIxuYXPg4ngO8i8+Ou0lM7y6GzaYWbiDL0drw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "vscode-languageserver-protocol": "3.16.0"
+      },
+      "bin": {
+        "installServerIntoExtension": "bin/installServerIntoExtension"
+      }
+    },
+    "node_modules/vscode-languageserver-protocol": {
+      "version": "3.16.0",
+      "resolved": "https://registry.npmjs.org/vscode-languageserver-protocol/-/vscode-languageserver-protocol-3.16.0.tgz",
+      "integrity": "sha512-sdeUoAawceQdgIfTI+sdcwkiK2KU+2cbEYA0agzM2uqaUy2UpnnGHtWTHVEtS0ES4zHU0eMFRGN+oQgDxlD66A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "vscode-jsonrpc": "6.0.0",
+        "vscode-languageserver-types": "3.16.0"
+      }
+    },
+    "node_modules/vscode-languageserver-textdocument": {
+      "version": "1.0.12",
+      "resolved": "https://registry.npmjs.org/vscode-languageserver-textdocument/-/vscode-languageserver-textdocument-1.0.12.tgz",
+      "integrity": "sha512-cxWNPesCnQCcMPeenjKKsOCKQZ/L6Tv19DTRIGuLWe32lyzWhihGVJ/rcckZXJxfdKCFvRLS3fpBIsV/ZGX4zA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/vscode-languageserver-types": {
+      "version": "3.16.0",
+      "resolved": "https://registry.npmjs.org/vscode-languageserver-types/-/vscode-languageserver-types-3.16.0.tgz",
+      "integrity": "sha512-k8luDIWJWyenLc5ToFQQMaSrqCHiLwyKPHKPQZ5zz21vM+vIVUSvsRpcbiECH4WR88K2XZqc4ScRcZ7nk/jbeA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/vscode-uri": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-3.0.8.tgz",
+      "integrity": "sha512-AyFQ0EVmsOZOlAnxoFOGOq1SQDWAB7C6aqMGS23svWAllfOaxbuFvcT8D1i8z3Gyn8fraVeZNNmN6e9bxxXkKw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/yallist": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
diff --git a/package.json b/package.json
index 6a10967c6..530cb334a 100644
--- a/package.json
+++ b/package.json
@@ -39,6 +39,7 @@
     "@vitejs/plugin-react": "^4.3.3",
     "sass": "^1.81.0",
     "typescript": "^5.7.2",
-    "vite": "^5.4.11"
+    "vite": "^5.4.11",
+    "vite-plugin-checker": "^0.8.0"
   }
 }
diff --git a/vite.config.ts b/vite.config.ts
index d4719354c..6a32013d2 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,9 +1,10 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import path from "path";
+import checker from "vite-plugin-checker";
 
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), checker({ typescript: true })],
   resolve: {
     alias: [
       {

From cc45eacad0aeb9b627573490fa33d01f64453993 Mon Sep 17 00:00:00 2001
From: "chanki.kim" <chanki.kim89@gmail.com>
Date: Thu, 2 Jan 2025 15:26:01 +0900
Subject: [PATCH 59/72] =?UTF-8?q?Refactor:=20=EC=A4=91=EB=B3=B5=EB=90=98?=
 =?UTF-8?q?=EA=B1=B0=EB=82=98=20=EC=9E=AC=EC=82=AC=EC=9A=A9=EB=90=A0=20?=
 =?UTF-8?q?=ED=83=80=EC=9E=85=EB=93=A4=20=EB=A6=AC=ED=8C=A9=ED=86=A0?=
 =?UTF-8?q?=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Field/TagsInput.tsx |  5 +++--
 src/components/ui/Tags.tsx         |  7 ++++---
 src/service/product.ts             | 11 +++++++----
 src/types/comment.ts               | 10 +++-------
 src/types/common.ts                | 11 +++++++++++
 src/types/product.ts               | 20 ++++++--------------
 6 files changed, 34 insertions(+), 30 deletions(-)

diff --git a/src/components/Field/TagsInput.tsx b/src/components/Field/TagsInput.tsx
index 0173a4bae..181c56b21 100644
--- a/src/components/Field/TagsInput.tsx
+++ b/src/components/Field/TagsInput.tsx
@@ -4,10 +4,11 @@ import { Tags } from "@components/ui";
 import { Error } from "@components/Field";
 import styles from "./Input.module.scss";
 import { FieldError } from "react-hook-form";
+import { Tags as TagsType } from "@type/product";
 
 interface TagsInputProps {
-  value: string[];
-  onChange: (value: string[]) => void;
+  value: TagsType;
+  onChange: (value: TagsType) => void;
   error: FieldError | FieldError[] | undefined;
   isValid: boolean;
   isTouched: boolean;
diff --git a/src/components/ui/Tags.tsx b/src/components/ui/Tags.tsx
index 3c9f60e48..c5f0a9471 100644
--- a/src/components/ui/Tags.tsx
+++ b/src/components/ui/Tags.tsx
@@ -1,12 +1,13 @@
 import { Chip } from "@components/ui";
 import styles from "./Tags.module.scss";
+import { Tags as TagsType } from "@type/product";
 
-interface Tags {
-  tags: string[];
+interface TagsProps {
+  tags: TagsType;
   onRemoveItem?: (tag: string) => void;
 }
 
-export function Tags({ tags, onRemoveItem }: Tags) {
+export function Tags({ tags, onRemoveItem }: TagsProps) {
   return (
     <div className={styles["item-tags"]}>
       {tags?.map((tag) => (
diff --git a/src/service/product.ts b/src/service/product.ts
index 17de97930..edd81116e 100644
--- a/src/service/product.ts
+++ b/src/service/product.ts
@@ -1,10 +1,10 @@
 import { ProductFormType } from "@schemas/product";
 import { axiosInstance } from "@service/axios";
+import { PaginationResponse } from "@type/common";
 import {
   DeleteProductResponse,
   ImageUploadResponse,
   Product,
-  ProductList,
 } from "@type/product";
 
 export async function getProducts(
@@ -12,9 +12,12 @@ export async function getProducts(
   signal: AbortSignal
 ) {
   const query = `page=${page}&pageSize=${pageSize}&orderBy=${orderBy}&keyword=${keyword}`;
-  const response = await axiosInstance.get<ProductList>(`/products?${query}`, {
-    signal,
-  });
+  const response = await axiosInstance.get<PaginationResponse<Product>>(
+    `/products?${query}`,
+    {
+      signal,
+    }
+  );
 
   return response.data;
 }
diff --git a/src/types/comment.ts b/src/types/comment.ts
index f6b0107e6..d353c1adb 100644
--- a/src/types/comment.ts
+++ b/src/types/comment.ts
@@ -1,4 +1,5 @@
 import { User } from "./auth";
+import { BaseData } from "./common";
 
 export type BoardName = "articles" | "products";
 
@@ -7,14 +8,9 @@ export type CommentList = {
   list: Comment[];
 };
 
-export type Comment = {
+export type Comment = BaseData & {
   writer: User;
-  updatedAt: string;
-  createdAt: string;
   content: string;
-  id: number;
 };
 
-export type DeleteCommentResponse = {
-  id: number;
-};
+export type DeleteCommentResponse = Pick<BaseData, "id">;
diff --git a/src/types/common.ts b/src/types/common.ts
index 05926f6c1..fc3ff3ded 100644
--- a/src/types/common.ts
+++ b/src/types/common.ts
@@ -4,3 +4,14 @@ export type ListQueryParams = {
   keyword: string;
   orderBy: string;
 };
+
+export type PaginationResponse<T> = {
+  totalCount: number;
+  list: T[];
+};
+
+export type BaseData = {
+  updatedAt: string;
+  createdAt: string;
+  id: number;
+};
diff --git a/src/types/product.ts b/src/types/product.ts
index 4449a4894..66bda1c39 100644
--- a/src/types/product.ts
+++ b/src/types/product.ts
@@ -1,6 +1,8 @@
-export type Product = {
-  createdAt: string;
-  updatedAt: string;
+import { BaseData } from "./common";
+
+export type Tags = string[];
+
+export type Product = BaseData & {
   favoriteCount: number;
   ownerNickname: string;
   ownerId: number;
@@ -9,21 +11,11 @@ export type Product = {
   price: number;
   description: string;
   name: string;
-  id: number;
   isFavorite: boolean;
 };
 
-export type Tags = string[];
-
-export type ProductList = {
-  totalCount: number;
-  list: Product[];
-};
-
 export type ImageUploadResponse = {
   url: string;
 };
 
-export type DeleteProductResponse = {
-  id: number;
-};
+export type DeleteProductResponse = Pick<BaseData, "id">;

From b4dd43c18e642caedec437a6a97f6fa9b40ecd59 Mon Sep 17 00:00:00 2001
From: "chanki.kim" <chanki.kim89@gmail.com>
Date: Thu, 2 Jan 2025 21:18:58 +0900
Subject: [PATCH 60/72] =?UTF-8?q?Fix:=20=ED=9A=8C=EC=9B=90=EA=B0=80?=
 =?UTF-8?q?=EC=9E=85=ED=8F=BC=20validation=20mode=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/auth/SignupPage.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/auth/SignupPage.tsx b/src/pages/auth/SignupPage.tsx
index c9a9c48f7..1610b5cf3 100644
--- a/src/pages/auth/SignupPage.tsx
+++ b/src/pages/auth/SignupPage.tsx
@@ -24,6 +24,7 @@ export default function SignupPage() {
     handleSubmit,
     formState: { isSubmitting, isValid },
   } = useFormWithError<SignupFormType>({
+    mode: "onBlur",
     resolver: zodResolver(signupFormSchema),
   });
 

From 46b9ce1889c583551dfdc30a9ad45a7e0019daa5 Mon Sep 17 00:00:00 2001
From: "chanki.kim" <chanki.kim89@gmail.com>
Date: Thu, 2 Jan 2025 23:24:22 +0900
Subject: [PATCH 61/72] =?UTF-8?q?Refactor:=20react=20hook=20form=20?=
 =?UTF-8?q?=EA=B0=9C=EC=84=A0=20-=20=EA=B3=B5=ED=86=B5=20=ED=83=80?=
 =?UTF-8?q?=EC=9E=85=20=EB=B6=84=EB=A6=AC=20-=20controlled=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=EB=8A=94=20controller=EB=A5=BC=20?=
 =?UTF-8?q?=EC=8D=A8=EC=84=9C=20=EC=9E=91=EC=84=B1=ED=95=98=EB=8F=84?=
 =?UTF-8?q?=EB=A1=9D=20=EB=B3=80=EA=B2=BD=20-=20custom=20react=20hook=20fo?=
 =?UTF-8?q?rm=EC=97=90=EC=84=9C=20watch=EA=B0=92=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Field/ImageUpload.tsx       |   7 +-
 src/components/Field/Input.tsx             |  15 +--
 src/components/Field/NumberInput.tsx       |  16 +--
 src/components/Field/TagsInput.tsx         |  13 +--
 src/components/Field/Textarea.tsx          |  17 ++-
 src/hooks/useFormWithError.ts              |  13 +--
 src/pages/items/ItemAddPage.tsx            |  97 +---------------
 src/pages/items/ItemModifyPage.tsx         |  99 ++--------------
 src/pages/items/components/ProductForm.tsx | 126 +++++++++++++++++++++
 src/schemas/product.ts                     |  11 +-
 src/types/common.ts                        |  10 ++
 11 files changed, 181 insertions(+), 243 deletions(-)
 create mode 100644 src/pages/items/components/ProductForm.tsx

diff --git a/src/components/Field/ImageUpload.tsx b/src/components/Field/ImageUpload.tsx
index 58289ca22..92dca1285 100644
--- a/src/components/Field/ImageUpload.tsx
+++ b/src/components/Field/ImageUpload.tsx
@@ -9,15 +9,14 @@ import { forwardRef } from "react";
 const LIMIT_SIZE_MB = 2;
 
 interface ImageUploadProps {
-  name: string;
   value: (File | string)[];
   onChange: (file: (File | string)[]) => void;
-  error: FieldError | undefined;
+  error?: FieldError | undefined;
   placeholder?: string;
 }
 
 export const ImageUpload = forwardRef(
-  ({ name, value, onChange, error, placeholder }: ImageUploadProps, _) => {
+  ({ value, onChange, error, placeholder }: ImageUploadProps, _) => {
     const { fileProps, fileError, handleRemove, preview } = useSingleFile({
       value,
       onChange,
@@ -42,7 +41,7 @@ export const ImageUpload = forwardRef(
               <img src={iconPlus} alt="이미지 업로드" />
               {placeholder}
             </span>
-            <input name={name} className="a11y" {...fileProps} />
+            <input className="a11y" {...fileProps} />
           </label>
           <div className={styles.preview}>
             {preview && (
diff --git a/src/components/Field/Input.tsx b/src/components/Field/Input.tsx
index 755530041..ff9408fee 100644
--- a/src/components/Field/Input.tsx
+++ b/src/components/Field/Input.tsx
@@ -4,23 +4,20 @@ import { Error } from "@components/Field";
 import iconViewOn from "@assets/img/icon/icon_view_on.svg";
 import iconViewOff from "@assets/img/icon/icon_view_off.svg";
 import styles from "./Input.module.scss";
-import { FieldError } from "react-hook-form";
+import { DefaultFieldState } from "@type/common";
 
-interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+interface InputProps
+  extends InputHTMLAttributes<HTMLInputElement>,
+    DefaultFieldState {
   type?: string;
-  error: FieldError | undefined;
-  isValid: boolean;
-  isTouched: boolean;
-  isDirty: boolean;
-  value: string;
 }
 
 export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
-  { type = "text", error, isValid, isTouched, isDirty, value, ...props },
+  { type = "text", error, invalid, isTouched, isDirty, isValidating, ...props },
   ref
 ) {
   const [currentType, setCurrentType] = useState(type);
-  const valid = isValid && value;
+  const valid = !invalid && isDirty;
   const css = clsx(
     styles["field-box"],
     valid && styles.valid,
diff --git a/src/components/Field/NumberInput.tsx b/src/components/Field/NumberInput.tsx
index 2a8bc9cbc..7a9fb20d6 100644
--- a/src/components/Field/NumberInput.tsx
+++ b/src/components/Field/NumberInput.tsx
@@ -3,13 +3,11 @@ import clsx from "clsx";
 import { Error } from "@components/Field";
 import styles from "./Input.module.scss";
 import { toWon } from "@util/formatter";
-import { FieldError } from "react-hook-form";
+import { DefaultFieldState } from "@type/common";
 
-interface NumberInputProps extends InputHTMLAttributes<HTMLInputElement> {
-  error: FieldError | undefined;
-  isValid: boolean;
-  isTouched: boolean;
-  isDirty: boolean;
+interface NumberInputProps
+  extends InputHTMLAttributes<HTMLInputElement>,
+    DefaultFieldState {
   value: number;
 }
 
@@ -17,16 +15,17 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
   (
     {
       error,
-      isValid,
+      invalid,
       isTouched,
       isDirty,
+      isValidating,
       placeholder,
       value,
       ...props
     }: NumberInputProps,
     ref
   ) => {
-    const valid = isValid && value;
+    const valid = !invalid && isDirty;
     const css = clsx(
       styles["field-box"],
       valid && styles.valid,
@@ -47,6 +46,7 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
             type="number"
             className={css}
             placeholder={placeholder}
+            value={value}
             {...props}
           />
           <div className={formattedCss}>
diff --git a/src/components/Field/TagsInput.tsx b/src/components/Field/TagsInput.tsx
index 181c56b21..e3d50458b 100644
--- a/src/components/Field/TagsInput.tsx
+++ b/src/components/Field/TagsInput.tsx
@@ -3,26 +3,22 @@ import clsx from "clsx";
 import { Tags } from "@components/ui";
 import { Error } from "@components/Field";
 import styles from "./Input.module.scss";
-import { FieldError } from "react-hook-form";
 import { Tags as TagsType } from "@type/product";
+import { DefaultFieldState } from "@type/common";
 
-interface TagsInputProps {
+interface TagsInputProps extends DefaultFieldState {
   value: TagsType;
   onChange: (value: TagsType) => void;
-  error: FieldError | FieldError[] | undefined;
-  isValid: boolean;
-  isTouched: boolean;
-  isDirty: boolean;
   placeholder?: string;
 }
 
 export const TagsInput = forwardRef(
   (
-    { value, onChange, error, isValid, placeholder = "" }: TagsInputProps,
+    { value, onChange, error, invalid, placeholder = "" }: TagsInputProps,
     _
   ) => {
     const inputRef = useRef<HTMLInputElement>(null);
-    const valid = isValid && value.length;
+    const valid = !invalid && value.length;
     const css = clsx(
       styles["field-box"],
       valid && styles.valid,
@@ -52,6 +48,7 @@ export const TagsInput = forwardRef(
 
     // 메세지가 string or string[] 일 수 있음 (zod schema 때문에)
     let tagsError: string | undefined;
+
     if (Array.isArray(error)) {
       tagsError = error.reduce((acc: string, errorItem, index) => {
         if (errorItem.message) {
diff --git a/src/components/Field/Textarea.tsx b/src/components/Field/Textarea.tsx
index e11c65f18..3e36a61a7 100644
--- a/src/components/Field/Textarea.tsx
+++ b/src/components/Field/Textarea.tsx
@@ -2,14 +2,11 @@ import clsx from "clsx";
 import { Error } from "@components/Field";
 import styles from "./Input.module.scss";
 import { forwardRef, TextareaHTMLAttributes } from "react";
-import { FieldError } from "react-hook-form";
+import { DefaultFieldState } from "@type/common";
 
-interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
-  error: FieldError | undefined;
-  isValid: boolean;
-  isTouched: boolean;
-  isDirty: boolean;
-  value: string;
+interface TextareaProps
+  extends TextareaHTMLAttributes<HTMLTextAreaElement>,
+    DefaultFieldState {
   size?: "sm" | "lg";
 }
 
@@ -17,16 +14,16 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
   (
     {
       error,
-      isValid,
+      invalid,
       isTouched,
       isDirty,
-      value,
+      isValidating,
       size,
       ...props
     }: TextareaProps,
     ref
   ) => {
-    const valid = isValid && !error && value;
+    const valid = !invalid && isTouched;
     const css = clsx(
       styles["field-box"],
       size && styles[size],
diff --git a/src/hooks/useFormWithError.ts b/src/hooks/useFormWithError.ts
index 1cde2facb..f3a714734 100644
--- a/src/hooks/useFormWithError.ts
+++ b/src/hooks/useFormWithError.ts
@@ -12,24 +12,15 @@ export default function useFormWithError<T extends FieldValues>(
 ) {
   const [formError, setFormError] = useState<Error | null>(null);
   const form = useForm<T>(options);
-  const { handleSubmit, getFieldState, register, formState, watch } = form;
+  const { handleSubmit, getFieldState, register, formState } = form;
 
   function registerWithError<U extends FieldPath<T>>(
     name: U,
     options?: RegisterOptions<T, U>
   ) {
-    const { error, isDirty, isTouched, invalid } = getFieldState(
-      name,
-      formState
-    );
-
     return {
       ...register(name, options),
-      error,
-      isDirty,
-      isTouched,
-      isValid: !invalid,
-      value: watch(name),
+      ...getFieldState(name, formState),
     };
   }
 
diff --git a/src/pages/items/ItemAddPage.tsx b/src/pages/items/ItemAddPage.tsx
index cb34ab62f..51ab41cf6 100644
--- a/src/pages/items/ItemAddPage.tsx
+++ b/src/pages/items/ItemAddPage.tsx
@@ -1,106 +1,13 @@
 import { PageWrapper } from "@components/Page";
 import useProductActions from "./components/useProductActions";
-import { Section } from "@components/Section";
-import {
-  FieldItem,
-  Form,
-  ImageUpload,
-  Input,
-  NumberInput,
-  TagsInput,
-  Textarea,
-} from "@components/Field";
-import { Button } from "@components/ui";
-import useFormWithError from "@hooks/useFormWithError";
-import { ProductFormSchema, ProductFormType } from "@schemas/product";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useNavigate } from "react-router-dom";
+import ProductForm from "./components/ProductForm";
 
 export default function ItemAddPage() {
   const { handleProductAdd } = useProductActions();
-  const navigate = useNavigate();
-
-  const {
-    setValue,
-    formError,
-    register,
-    handleSubmit,
-    formState: { isSubmitting, isValid },
-  } = useFormWithError<ProductFormType>({
-    mode: "onBlur",
-    resolver: zodResolver(ProductFormSchema),
-    defaultValues: {
-      images: [],
-      tags: [],
-    },
-  });
-
-  async function onSubmit(data: ProductFormType) {
-    try {
-      await handleProductAdd(data);
-      alert("성공적으로 작성했습니다.");
-      navigate("/items");
-    } catch (err) {
-      throw err;
-    }
-  }
 
   return (
     <PageWrapper>
-      <Section>
-        <Form
-          isLoading={isSubmitting}
-          error={formError}
-          onSubmit={handleSubmit(onSubmit)}
-        >
-          <Section.Header title="상품 등록하기">
-            <Button type="submit" size="sm" disabled={!isValid}>
-              등록
-            </Button>
-          </Section.Header>
-          <Section.Content>
-            <FieldItem>
-              <FieldItem.Label htmlFor="images">상품 이미지</FieldItem.Label>
-              <ImageUpload
-                {...register("images")}
-                onChange={(value) =>
-                  setValue("images", value, { shouldValidate: true })
-                }
-              />
-            </FieldItem>
-            <FieldItem>
-              <FieldItem.Label htmlFor="name">상품명</FieldItem.Label>
-              <Input placeholder="상품명 입력해주세요" {...register("name")} />
-            </FieldItem>
-            <FieldItem>
-              <FieldItem.Label htmlFor="description">상품 소개</FieldItem.Label>
-              <Textarea
-                {...register("description")}
-                placeholder="상품 소개를  입력해주세요"
-              />
-            </FieldItem>
-            <FieldItem>
-              <FieldItem.Label htmlFor="price">판매 가격</FieldItem.Label>
-              <NumberInput
-                {...register("price")}
-                placeholder="판매 가격을 입력해주세요"
-              />
-            </FieldItem>
-            <FieldItem>
-              <FieldItem.Label htmlFor="tags">태그</FieldItem.Label>
-              <TagsInput
-                {...register("tags")}
-                placeholder="태그를 입력해주세요"
-                onChange={(value) =>
-                  setValue("tags", value, {
-                    shouldValidate: true,
-                  })
-                }
-              />
-            </FieldItem>
-          </Section.Content>
-        </Form>
-      </Section>
+      <ProductForm mode="add" onFormSubmit={handleProductAdd} />
     </PageWrapper>
   );
 }
diff --git a/src/pages/items/ItemModifyPage.tsx b/src/pages/items/ItemModifyPage.tsx
index e1752d2be..9b9b872d8 100644
--- a/src/pages/items/ItemModifyPage.tsx
+++ b/src/pages/items/ItemModifyPage.tsx
@@ -1,21 +1,8 @@
-import { Navigate, useLoaderData, useNavigate } from "react-router-dom";
+import { Navigate, useLoaderData } from "react-router-dom";
 import { useAuth } from "@context/AuthContext";
 import { PageWrapper } from "@components/Page";
 import useProductActions from "./components/useProductActions";
-import { Section } from "@components/Section";
-import {
-  FieldItem,
-  Form,
-  ImageUpload,
-  Input,
-  NumberInput,
-  TagsInput,
-  Textarea,
-} from "@components/Field";
-import { Button } from "@components/ui";
-import useFormWithError from "@hooks/useFormWithError";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { ProductFormSchema, ProductFormType } from "@schemas/product";
+import ProductForm from "./components/ProductForm";
 import { Product } from "@type/product";
 
 export default function ItemModifyPage() {
@@ -24,91 +11,19 @@ export default function ItemModifyPage() {
     auth: { user },
   } = useAuth();
   const { handleProductModify } = useProductActions(detail.id);
-  const navigate = useNavigate();
 
   if (user && user.id !== detail.ownerId) {
     alert("권한이 없습니다.");
     return <Navigate to="/items" replace />;
   }
 
-  const {
-    setValue,
-    formError,
-    register,
-    handleSubmit,
-    formState: { isSubmitting, isValid },
-  } = useFormWithError<ProductFormType>({
-    mode: "onBlur",
-    resolver: zodResolver(ProductFormSchema),
-    defaultValues: detail,
-  });
-
-  async function onSubmit(data: ProductFormType) {
-    try {
-      await handleProductModify(data);
-      alert("성공적으로 수정했습니다.");
-      navigate(`/items/${detail.id}`);
-    } catch (err) {
-      throw err;
-    }
-  }
-
   return (
     <PageWrapper>
-      <Section>
-        <Form
-          isLoading={isSubmitting}
-          error={formError}
-          onSubmit={handleSubmit(onSubmit)}
-        >
-          <Section.Header title="상품 등록하기">
-            <Button type="submit" size="sm" disabled={!isValid}>
-              수정
-            </Button>
-          </Section.Header>
-          <Section.Content>
-            <FieldItem>
-              <FieldItem.Label htmlFor="images">상품 이미지</FieldItem.Label>
-              <ImageUpload
-                {...register("images")}
-                onChange={(value) =>
-                  setValue("images", value, { shouldValidate: true })
-                }
-              />
-            </FieldItem>
-            <FieldItem>
-              <FieldItem.Label htmlFor="name">상품명</FieldItem.Label>
-              <Input placeholder="상품명 입력해주세요" {...register("name")} />
-            </FieldItem>
-            <FieldItem>
-              <FieldItem.Label htmlFor="description">상품 소개</FieldItem.Label>
-              <Textarea
-                {...register("description")}
-                placeholder="상품 소개를  입력해주세요"
-              />
-            </FieldItem>
-            <FieldItem>
-              <FieldItem.Label htmlFor="price">판매 가격</FieldItem.Label>
-              <NumberInput
-                {...register("price")}
-                placeholder="판매 가격을 입력해주세요"
-              />
-            </FieldItem>
-            <FieldItem>
-              <FieldItem.Label htmlFor="tags">태그</FieldItem.Label>
-              <TagsInput
-                {...register("tags")}
-                placeholder="태그를 입력해주세요"
-                onChange={(value) =>
-                  setValue("tags", value, {
-                    shouldValidate: true,
-                  })
-                }
-              />
-            </FieldItem>
-          </Section.Content>
-        </Form>
-      </Section>
+      <ProductForm
+        mode="edit"
+        initialData={detail}
+        onFormSubmit={handleProductModify}
+      />
     </PageWrapper>
   );
 }
diff --git a/src/pages/items/components/ProductForm.tsx b/src/pages/items/components/ProductForm.tsx
new file mode 100644
index 000000000..044effc95
--- /dev/null
+++ b/src/pages/items/components/ProductForm.tsx
@@ -0,0 +1,126 @@
+import { Section } from "@components/Section";
+import {
+  FieldItem,
+  Form,
+  ImageUpload,
+  Input,
+  NumberInput,
+  TagsInput,
+  Textarea,
+} from "@components/Field";
+import { Button } from "@components/ui";
+import useFormWithError from "@hooks/useFormWithError";
+import { ProductFormSchema, ProductFormType } from "@schemas/product";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useNavigate } from "react-router-dom";
+import { Controller } from "react-hook-form";
+import { Product } from "@type/product";
+
+interface ProductFormProps {
+  initialData?: Product;
+  mode?: "add" | "edit";
+  onFormSubmit: (formData: ProductFormType) => Promise<void>;
+}
+
+export default function ProductForm({
+  initialData,
+  mode = "add",
+  onFormSubmit,
+}: ProductFormProps) {
+  const navigate = useNavigate();
+
+  const {
+    control,
+    formError,
+    register,
+    handleSubmit,
+    formState: { isSubmitting, isValid },
+  } = useFormWithError<ProductFormType>({
+    mode: "onChange",
+    resolver: zodResolver(ProductFormSchema),
+    defaultValues: initialData || {
+      price: 0,
+      images: [],
+      tags: [],
+    },
+  });
+
+  async function onSubmit(data: ProductFormType) {
+    try {
+      await onFormSubmit(data);
+      alert(
+        mode === "add" ? "성공적으로 작성했습니다." : "성공적으로 수정했습니다."
+      );
+      navigate(mode === "add" ? "/items" : `/items/${initialData?.id}`);
+    } catch (err) {
+      throw err;
+    }
+  }
+
+  return (
+    <Section>
+      <Form
+        isLoading={isSubmitting}
+        error={formError}
+        onSubmit={handleSubmit(onSubmit)}
+      >
+        <Section.Header title="상품 등록하기">
+          <Button type="submit" size="sm" disabled={!isValid}>
+            {mode === "add" ? "등록" : "수정"}
+          </Button>
+        </Section.Header>
+        <Section.Content>
+          <FieldItem>
+            <FieldItem.Label htmlFor="images">상품 이미지</FieldItem.Label>
+            <Controller
+              name="images"
+              control={control}
+              render={({ field, fieldState }) => (
+                <ImageUpload {...field} {...fieldState} />
+              )}
+            />
+          </FieldItem>
+          <FieldItem>
+            <FieldItem.Label htmlFor="name">상품명</FieldItem.Label>
+            <Input placeholder="상품명 입력해주세요" {...register("name")} />
+          </FieldItem>
+          <FieldItem>
+            <FieldItem.Label htmlFor="description">상품 소개</FieldItem.Label>
+            <Textarea
+              {...register("description")}
+              placeholder="상품 소개를  입력해주세요"
+            />
+          </FieldItem>
+          <FieldItem>
+            <FieldItem.Label htmlFor="price">판매 가격</FieldItem.Label>
+            <Controller
+              name="price"
+              control={control}
+              render={({ field, fieldState }) => (
+                <NumberInput
+                  {...field}
+                  {...fieldState}
+                  placeholder="판매 가격을 입력해주세요"
+                />
+              )}
+            />
+          </FieldItem>
+          <FieldItem>
+            <FieldItem.Label htmlFor="tags">태그</FieldItem.Label>
+            <Controller
+              name="tags"
+              control={control}
+              render={({ field, fieldState }) => (
+                <TagsInput
+                  {...field}
+                  {...fieldState}
+                  placeholder="태그를 입력해주세요"
+                />
+              )}
+            />
+          </FieldItem>
+        </Section.Content>
+      </Form>
+    </Section>
+  );
+}
diff --git a/src/schemas/product.ts b/src/schemas/product.ts
index b4350dc14..7bd0e7831 100644
--- a/src/schemas/product.ts
+++ b/src/schemas/product.ts
@@ -5,14 +5,13 @@ export const ProductFormSchema = z.object({
   images: z
     .array(z.union([z.instanceof(File), z.string()]))
     .min(1, { message: MESSAGE.PRODUCT_IMAGE_REQUIRED }),
-  tags: z.array(
-    z
-      .string()
-      .regex(/^[^!@#$%^&*(),.?":{}|<>_\-+=\[\]\\\/`~';]*$/, {
+  tags: z
+    .array(
+      z.string().regex(/^[^!@#$%^&*(),.?":{}|<>_\-+=\[\]\\\/`~';]*$/, {
         message: MESSAGE.INVALID_STRING,
       })
-      .nonempty({ message: MESSAGE.PRODUCT_TAGS_REQUIRED })
-  ),
+    )
+    .min(1, { message: MESSAGE.PRODUCT_TAGS_REQUIRED }),
   name: z.string().nonempty({ message: MESSAGE.PRODUCT_NAME_REQUIRED }),
   description: z.string().nonempty({
     message: MESSAGE.PRODUCT_DESCRIPTION_REQUIRED,
diff --git a/src/types/common.ts b/src/types/common.ts
index fc3ff3ded..5259ff862 100644
--- a/src/types/common.ts
+++ b/src/types/common.ts
@@ -1,3 +1,5 @@
+import { FieldError } from "react-hook-form";
+
 export type ListQueryParams = {
   page: number;
   pageSize: number;
@@ -15,3 +17,11 @@ export type BaseData = {
   createdAt: string;
   id: number;
 };
+
+export type DefaultFieldState = {
+  error?: FieldError | undefined;
+  invalid: boolean;
+  isTouched: boolean;
+  isDirty: boolean;
+  isValidating: boolean;
+};

From d4a5dc273df10e17d8e278e915a12d69d23f1d0a Mon Sep 17 00:00:00 2001
From: "chanki.kim" <chanki.kim89@gmail.com>
Date: Fri, 3 Jan 2025 12:21:35 +0900
Subject: [PATCH 62/72] =?UTF-8?q?Refactor:=20Tagsinput=EB=82=B4=20?=
 =?UTF-8?q?=EC=97=90=EB=9F=AC=EB=A9=94=EC=84=B8=EC=A7=80=20=ED=95=A8?=
 =?UTF-8?q?=EC=88=98=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Field/TagsInput.tsx | 34 ++++++++++++++++++------------
 1 file changed, 21 insertions(+), 13 deletions(-)

diff --git a/src/components/Field/TagsInput.tsx b/src/components/Field/TagsInput.tsx
index e3d50458b..ae7528749 100644
--- a/src/components/Field/TagsInput.tsx
+++ b/src/components/Field/TagsInput.tsx
@@ -5,6 +5,7 @@ import { Error } from "@components/Field";
 import styles from "./Input.module.scss";
 import { Tags as TagsType } from "@type/product";
 import { DefaultFieldState } from "@type/common";
+import { FieldError } from "react-hook-form";
 
 interface TagsInputProps extends DefaultFieldState {
   value: TagsType;
@@ -12,6 +13,25 @@ interface TagsInputProps extends DefaultFieldState {
   placeholder?: string;
 }
 
+function formattedTagsError(
+  error: FieldError | FieldError[] | undefined,
+  value: TagsType
+) {
+  if (!error) return undefined;
+
+  if (Array.isArray(error)) {
+    return error.reduce((acc: string, errorItem, index) => {
+      if (errorItem.message) {
+        const message = `<${value[index]}>: ${errorItem.message}`;
+        return acc ? acc + ", " + message : message;
+      }
+      return acc;
+    }, "");
+  }
+
+  return error.message;
+}
+
 export const TagsInput = forwardRef(
   (
     { value, onChange, error, invalid, placeholder = "" }: TagsInputProps,
@@ -47,19 +67,7 @@ export const TagsInput = forwardRef(
     }
 
     // 메세지가 string or string[] 일 수 있음 (zod schema 때문에)
-    let tagsError: string | undefined;
-
-    if (Array.isArray(error)) {
-      tagsError = error.reduce((acc: string, errorItem, index) => {
-        if (errorItem.message) {
-          const message = `<${value[index]}>: ${errorItem.message}`;
-          return acc ? acc + ", " + message : message;
-        }
-        return acc;
-      }, "");
-    } else {
-      tagsError = error?.message || undefined;
-    }
+    const tagsError = formattedTagsError(error, value);
 
     return (
       <>

From f0196eb12b266ed13427f6617f4db38b9dafec23 Mon Sep 17 00:00:00 2001
From: "chanki.kim" <chanki.kim89@gmail.com>
Date: Fri, 3 Jan 2025 15:04:35 +0900
Subject: [PATCH 63/72] =?UTF-8?q?Refactor(mentor):=20=EC=9C=A0=ED=8B=B8?=
 =?UTF-8?q?=EB=A6=AC=ED=8B=B0=ED=83=80=EC=9E=85=20=ED=99=9C=EC=9A=A9=20-?=
 =?UTF-8?q?=20=EB=A9=98=ED=86=A0=EB=A7=81=EC=8B=9C=EA=B0=84=EC=97=90=20?=
 =?UTF-8?q?=EB=B0=B0=EC=9A=B4=20Record=20=ED=99=9C=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/useResponsive.ts | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/hooks/useResponsive.ts b/src/hooks/useResponsive.ts
index 2ad6e33c0..01fc9370e 100644
--- a/src/hooks/useResponsive.ts
+++ b/src/hooks/useResponsive.ts
@@ -2,11 +2,7 @@ import { useEffect, useState } from "react";
 import { getDeviceType } from "@util/breakpoints";
 import { debounce } from "@util/debounce";
 
-type ResponsiveNumber = {
-  pc: number;
-  tablet: number;
-  mobile: number;
-};
+type ResponsiveNumber = Record<"pc" | "tablet" | "mobile", number>;
 
 export default function useResponsive(
   initialOption: ResponsiveNumber = {

From ccd8e7583cd8b31bca2d2ab8a309500f31457abc Mon Sep 17 00:00:00 2001
From: "chanki.kim" <chanki.kim89@gmail.com>
Date: Fri, 3 Jan 2025 22:42:55 +0900
Subject: [PATCH 64/72] =?UTF-8?q?Refactor(mentor):=20react=20hook=20form?=
 =?UTF-8?q?=EA=B3=BC=20=ED=95=84=EB=93=9C=EB=A5=BC=20=EC=97=B0=EA=B2=B0?=
 =?UTF-8?q?=ED=95=B4=EC=A4=84=20=EC=96=B4=EB=8E=81=ED=84=B0=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Comment/CommentForm.tsx      | 19 ++++--
 src/components/Field/ImageUpload.tsx        |  7 +--
 src/components/Field/Input.tsx              | 24 +++++---
 src/components/Field/NumberInput.tsx        | 20 +++---
 src/components/Field/TagsInput.tsx          | 37 +++---------
 src/components/Field/Textarea.tsx           | 35 +++++------
 src/components/adaptor/rhf/FieldAdapter.tsx | 52 ++++++++++++++++
 src/components/adaptor/rhf/index.ts         |  1 +
 src/hooks/useFormWithError.ts               | 21 +------
 src/pages/auth/LoginPage.tsx                | 35 ++++++++---
 src/pages/auth/SignupPage.tsx               | 67 +++++++++++++++------
 src/pages/items/components/ProductForm.tsx  | 54 +++++++++--------
 src/schemas/product.ts                      | 15 +++--
 src/types/common.ts                         | 10 ---
 14 files changed, 231 insertions(+), 166 deletions(-)
 create mode 100644 src/components/adaptor/rhf/FieldAdapter.tsx
 create mode 100644 src/components/adaptor/rhf/index.ts

diff --git a/src/components/Comment/CommentForm.tsx b/src/components/Comment/CommentForm.tsx
index 880290ee7..c61b208d7 100644
--- a/src/components/Comment/CommentForm.tsx
+++ b/src/components/Comment/CommentForm.tsx
@@ -5,6 +5,7 @@ import { Comment } from "@type/comment";
 import useFormWithError from "@hooks/useFormWithError";
 import { CommentFormSchema, CommentFormType } from "@schemas/comment";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { FieldAdapter } from "@components/adaptor/rhf";
 
 interface CommentForm {
   initialData?: Comment;
@@ -20,13 +21,13 @@ export function CommentForm({
   isEdit,
 }: CommentForm) {
   const {
+    control,
     formError,
-    register,
     reset,
     handleSubmit,
     formState: { isSubmitting, isValid },
   } = useFormWithError<CommentFormType>({
-    mode: "onBlur",
+    mode: "onChange",
     resolver: zodResolver(CommentFormSchema),
     defaultValues: initialData,
   });
@@ -60,10 +61,16 @@ export function CommentForm({
         {!isEdit && (
           <FieldItem.Label htmlFor="content">문의하기</FieldItem.Label>
         )}
-        <Textarea
-          size="sm"
-          placeholder="개인정보를 공유 및 요청하거나, 명예 훼손, 무단 광고, 불법 정보 유포시 모니터링 후 삭제될 수 있으며, 이에 대한 민형사상 책임은 게시자에게 있습니다."
-          {...register("content")}
+        <FieldAdapter
+          name="content"
+          control={control}
+          render={(props) => (
+            <Textarea
+              size="sm"
+              placeholder="개인정보를 공유 및 요청하거나, 명예 훼손, 무단 광고, 불법 정보 유포시 모니터링 후 삭제될 수 있으며, 이에 대한 민형사상 책임은 게시자에게 있습니다."
+              {...props}
+            />
+          )}
         />
       </FieldItem>
       <div className={styles.footer}>
diff --git a/src/components/Field/ImageUpload.tsx b/src/components/Field/ImageUpload.tsx
index 92dca1285..be29e493a 100644
--- a/src/components/Field/ImageUpload.tsx
+++ b/src/components/Field/ImageUpload.tsx
@@ -3,7 +3,6 @@ import { Thumbnail } from "@components/ui";
 import { Error } from "@components/Field";
 import iconPlus from "@assets/img/icon/icon_plus.svg";
 import styles from "./ImageUpload.module.scss";
-import { FieldError } from "react-hook-form";
 import { forwardRef } from "react";
 
 const LIMIT_SIZE_MB = 2;
@@ -11,7 +10,7 @@ const LIMIT_SIZE_MB = 2;
 interface ImageUploadProps {
   value: (File | string)[];
   onChange: (file: (File | string)[]) => void;
-  error?: FieldError | undefined;
+  error?: string;
   placeholder?: string;
 }
 
@@ -29,9 +28,7 @@ export const ImageUpload = forwardRef(
     });
 
     // react hook form error + useSingleFile hook error
-    const fileInputError = [fileError, error?.message]
-      .filter((err) => err)
-      .join(" / ");
+    const fileInputError = [fileError, error].filter((err) => err).join(" / ");
 
     return (
       <>
diff --git a/src/components/Field/Input.tsx b/src/components/Field/Input.tsx
index ff9408fee..15c8514ab 100644
--- a/src/components/Field/Input.tsx
+++ b/src/components/Field/Input.tsx
@@ -4,20 +4,19 @@ import { Error } from "@components/Field";
 import iconViewOn from "@assets/img/icon/icon_view_on.svg";
 import iconViewOff from "@assets/img/icon/icon_view_off.svg";
 import styles from "./Input.module.scss";
-import { DefaultFieldState } from "@type/common";
 
-interface InputProps
-  extends InputHTMLAttributes<HTMLInputElement>,
-    DefaultFieldState {
-  type?: string;
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+  value: string;
+  isValid: boolean;
+  error?: string;
 }
 
 export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
-  { type = "text", error, invalid, isTouched, isDirty, isValidating, ...props },
+  { type = "text", value, onChange, isValid, error, ...props },
   ref
 ) {
   const [currentType, setCurrentType] = useState(type);
-  const valid = !invalid && isDirty;
+  const valid = isValid && value;
   const css = clsx(
     styles["field-box"],
     valid && styles.valid,
@@ -30,7 +29,14 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
   return (
     <>
       <div className={styles.field}>
-        <input ref={ref} type={currentType} className={css} {...props} />
+        <input
+          ref={ref}
+          type={currentType}
+          className={css}
+          value={value}
+          onChange={onChange}
+          {...props}
+        />
         {type === "password" && (
           <button
             type="button"
@@ -48,7 +54,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
           </button>
         )}
       </div>
-      {error?.message && <Error error={error.message} />}
+      {error && <Error error={error} />}
     </>
   );
 });
diff --git a/src/components/Field/NumberInput.tsx b/src/components/Field/NumberInput.tsx
index 7a9fb20d6..e5b4aed77 100644
--- a/src/components/Field/NumberInput.tsx
+++ b/src/components/Field/NumberInput.tsx
@@ -3,29 +3,26 @@ import clsx from "clsx";
 import { Error } from "@components/Field";
 import styles from "./Input.module.scss";
 import { toWon } from "@util/formatter";
-import { DefaultFieldState } from "@type/common";
 
-interface NumberInputProps
-  extends InputHTMLAttributes<HTMLInputElement>,
-    DefaultFieldState {
+interface NumberInputProps extends InputHTMLAttributes<HTMLInputElement> {
   value: number;
+  isValid: boolean;
+  error?: string;
 }
 
 export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
   (
     {
+      value,
+      onChange,
       error,
-      invalid,
-      isTouched,
-      isDirty,
-      isValidating,
+      isValid,
       placeholder,
-      value,
       ...props
     }: NumberInputProps,
     ref
   ) => {
-    const valid = !invalid && isDirty;
+    const valid = isValid && value;
     const css = clsx(
       styles["field-box"],
       valid && styles.valid,
@@ -47,13 +44,14 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
             className={css}
             placeholder={placeholder}
             value={value}
+            onChange={onChange}
             {...props}
           />
           <div className={formattedCss}>
             {value ? toWon(value) : placeholder}
           </div>
         </div>
-        {error?.message && <Error error={error.message} />}
+        {error && <Error error={error} />}
       </>
     );
   }
diff --git a/src/components/Field/TagsInput.tsx b/src/components/Field/TagsInput.tsx
index ae7528749..078052e56 100644
--- a/src/components/Field/TagsInput.tsx
+++ b/src/components/Field/TagsInput.tsx
@@ -4,41 +4,22 @@ import { Tags } from "@components/ui";
 import { Error } from "@components/Field";
 import styles from "./Input.module.scss";
 import { Tags as TagsType } from "@type/product";
-import { DefaultFieldState } from "@type/common";
-import { FieldError } from "react-hook-form";
 
-interface TagsInputProps extends DefaultFieldState {
+interface TagsInputProps {
   value: TagsType;
-  onChange: (value: TagsType) => void;
+  onChange: (tags: TagsType) => void;
   placeholder?: string;
-}
-
-function formattedTagsError(
-  error: FieldError | FieldError[] | undefined,
-  value: TagsType
-) {
-  if (!error) return undefined;
-
-  if (Array.isArray(error)) {
-    return error.reduce((acc: string, errorItem, index) => {
-      if (errorItem.message) {
-        const message = `<${value[index]}>: ${errorItem.message}`;
-        return acc ? acc + ", " + message : message;
-      }
-      return acc;
-    }, "");
-  }
-
-  return error.message;
+  isValid: boolean;
+  error?: string;
 }
 
 export const TagsInput = forwardRef(
   (
-    { value, onChange, error, invalid, placeholder = "" }: TagsInputProps,
+    { value, onChange, error, isValid, placeholder = "" }: TagsInputProps,
     _
   ) => {
     const inputRef = useRef<HTMLInputElement>(null);
-    const valid = !invalid && value.length;
+    const valid = isValid && value.length;
     const css = clsx(
       styles["field-box"],
       valid && styles.valid,
@@ -65,10 +46,6 @@ export const TagsInput = forwardRef(
       const newTags = value.filter((item) => item !== tag);
       onChange(newTags);
     }
-
-    // 메세지가 string or string[] 일 수 있음 (zod schema 때문에)
-    const tagsError = formattedTagsError(error, value);
-
     return (
       <>
         <div className={styles.field}>
@@ -81,7 +58,7 @@ export const TagsInput = forwardRef(
           />
         </div>
         <Tags tags={value} onRemoveItem={handleRemove} />
-        {tagsError && <Error error={tagsError} />}
+        {error && <Error error={error} />}
       </>
     );
   }
diff --git a/src/components/Field/Textarea.tsx b/src/components/Field/Textarea.tsx
index 3e36a61a7..a77306205 100644
--- a/src/components/Field/Textarea.tsx
+++ b/src/components/Field/Textarea.tsx
@@ -1,29 +1,18 @@
+import { forwardRef, TextareaHTMLAttributes } from "react";
 import clsx from "clsx";
 import { Error } from "@components/Field";
 import styles from "./Input.module.scss";
-import { forwardRef, TextareaHTMLAttributes } from "react";
-import { DefaultFieldState } from "@type/common";
 
-interface TextareaProps
-  extends TextareaHTMLAttributes<HTMLTextAreaElement>,
-    DefaultFieldState {
+interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+  value: string;
   size?: "sm" | "lg";
+  isValid: boolean;
+  error?: string;
 }
 
 export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
-  (
-    {
-      error,
-      invalid,
-      isTouched,
-      isDirty,
-      isValidating,
-      size,
-      ...props
-    }: TextareaProps,
-    ref
-  ) => {
-    const valid = !invalid && isTouched;
+  ({ error, isValid, value, onChange, size, ...props }: TextareaProps, ref) => {
+    const valid = isValid && value;
     const css = clsx(
       styles["field-box"],
       size && styles[size],
@@ -34,9 +23,15 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
     return (
       <>
         <div className={styles.field}>
-          <textarea ref={ref} className={css} {...props} />
+          <textarea
+            ref={ref}
+            className={css}
+            value={value}
+            onChange={onChange}
+            {...props}
+          />
         </div>
-        {error?.message && <Error error={error.message} />}
+        {error && <Error error={error} />}
       </>
     );
   }
diff --git a/src/components/adaptor/rhf/FieldAdapter.tsx b/src/components/adaptor/rhf/FieldAdapter.tsx
new file mode 100644
index 000000000..f3477c53e
--- /dev/null
+++ b/src/components/adaptor/rhf/FieldAdapter.tsx
@@ -0,0 +1,52 @@
+import { ReactElement } from "react";
+import {
+  Control,
+  Controller,
+  FieldPath,
+  FieldPathValue,
+  FieldValues,
+  Path,
+  RefCallBack,
+} from "react-hook-form";
+
+interface FieldAdapterProps<T extends FieldValues, U extends FieldPath<T>> {
+  name: U;
+  control: Control<T>;
+  render: (props: {
+    value: FieldPathValue<T, U>;
+    onChange: (...event: any[]) => void;
+    onBlur: () => void;
+    ref: RefCallBack;
+    name: Path<T>;
+    isValid: boolean;
+    error?: string;
+  }) => ReactElement;
+}
+
+export function FieldAdapter<T extends FieldValues, U extends FieldPath<T>>({
+  name,
+  control,
+  render,
+}: FieldAdapterProps<T, U>) {
+  return (
+    <Controller
+      name={name}
+      control={control}
+      render={({ field, fieldState }) =>
+        render({
+          ...field,
+          onChange: (e) => {
+            // rhf mode가 onBlur모드일때 벨리데이션하려면 필요 (trigger가 onblur에 되는듯함)
+            // 일반적으로 레스트파라미터로 각 input, textarea에 자동적으로 onblur가 들어가서 괜찮으나
+            // 특수하게 커스텀 컴포넌트를 이용해서 수동으로 업데이트할경우(onchange활용하여) onBlur를 해줘야 벨리데이션이 됨
+            // (useForm의 리턴값중에 setValue를 통해서 업데이트하면 벨리데이션이 됨)
+            field.onChange(e);
+            field.onBlur();
+          },
+          isValid: !fieldState.invalid,
+          error: fieldState.error?.message,
+        })
+      }
+    />
+  );
+}
diff --git a/src/components/adaptor/rhf/index.ts b/src/components/adaptor/rhf/index.ts
new file mode 100644
index 000000000..84b24eb7d
--- /dev/null
+++ b/src/components/adaptor/rhf/index.ts
@@ -0,0 +1 @@
+export * from "./FieldAdapter";
diff --git a/src/hooks/useFormWithError.ts b/src/hooks/useFormWithError.ts
index f3a714734..e86eab0ac 100644
--- a/src/hooks/useFormWithError.ts
+++ b/src/hooks/useFormWithError.ts
@@ -1,28 +1,12 @@
 import { useState } from "react";
-import {
-  FieldPath,
-  FieldValues,
-  RegisterOptions,
-  useForm,
-  UseFormProps,
-} from "react-hook-form";
+import { FieldValues, useForm, UseFormProps } from "react-hook-form";
 
 export default function useFormWithError<T extends FieldValues>(
   options: UseFormProps<T>
 ) {
   const [formError, setFormError] = useState<Error | null>(null);
   const form = useForm<T>(options);
-  const { handleSubmit, getFieldState, register, formState } = form;
-
-  function registerWithError<U extends FieldPath<T>>(
-    name: U,
-    options?: RegisterOptions<T, U>
-  ) {
-    return {
-      ...register(name, options),
-      ...getFieldState(name, formState),
-    };
-  }
+  const { handleSubmit } = form;
 
   function handleSumbitWithError(submitFn: (data: T) => Promise<void>) {
     return handleSubmit(async function (data) {
@@ -37,7 +21,6 @@ export default function useFormWithError<T extends FieldValues>(
 
   return {
     ...form,
-    register: registerWithError,
     formError,
     handleSubmit: handleSumbitWithError,
   };
diff --git a/src/pages/auth/LoginPage.tsx b/src/pages/auth/LoginPage.tsx
index cb082af87..f6c31d352 100644
--- a/src/pages/auth/LoginPage.tsx
+++ b/src/pages/auth/LoginPage.tsx
@@ -6,6 +6,7 @@ import AuthContainer from "./components/AuthContainer";
 import useFormWithError from "@hooks/useFormWithError";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { signinFormSchmea, SigninFormType } from "@schemas/auth";
+import { FieldAdapter } from "@components/adaptor/rhf";
 
 export default function LoginPage() {
   const navigate = useNavigate();
@@ -19,13 +20,17 @@ export default function LoginPage() {
   }
 
   const {
+    control,
     formError,
-    register,
     handleSubmit,
     formState: { isSubmitting, isValid },
   } = useFormWithError<SigninFormType>({
     mode: "onBlur",
     resolver: zodResolver(signinFormSchmea),
+    defaultValues: {
+      email: "",
+      password: "",
+    },
   });
 
   async function onSubmit(data: SigninFormType) {
@@ -47,18 +52,30 @@ export default function LoginPage() {
       >
         <FieldItem>
           <FieldItem.Label htmlFor="email">이메일</FieldItem.Label>
-          <Input
-            type="email"
-            placeholder="이메일을 입력해주세요"
-            {...register("email")}
+          <FieldAdapter
+            name="email"
+            control={control}
+            render={(props) => (
+              <Input
+                type="email"
+                placeholder="이메일을 입력해주세요"
+                {...props}
+              />
+            )}
           />
         </FieldItem>
         <FieldItem>
           <FieldItem.Label htmlFor="password">비밀번호</FieldItem.Label>
-          <Input
-            type="password"
-            placeholder="비밀번호를 입력해주세요"
-            {...register("password")}
+          <FieldAdapter
+            name="password"
+            control={control}
+            render={(props) => (
+              <Input
+                type="password"
+                placeholder="비밀번호를 입력해주세요"
+                {...props}
+              />
+            )}
           />
         </FieldItem>
         <Button type="submit" size="xl" disabled={!isValid}>
diff --git a/src/pages/auth/SignupPage.tsx b/src/pages/auth/SignupPage.tsx
index 1610b5cf3..674d12268 100644
--- a/src/pages/auth/SignupPage.tsx
+++ b/src/pages/auth/SignupPage.tsx
@@ -3,9 +3,10 @@ import { useAuth } from "@context/AuthContext";
 import { Form, FieldItem, Input } from "@components/Field";
 import { Button } from "@components/ui";
 import AuthContainer from "./components/AuthContainer";
-import { zodResolver } from "@hookform/resolvers/zod";
 import useFormWithError from "@hooks/useFormWithError";
+import { zodResolver } from "@hookform/resolvers/zod";
 import { signupFormSchema, SignupFormType } from "@schemas/auth";
+import { FieldAdapter } from "@components/adaptor/rhf";
 
 export default function SignupPage() {
   const navigate = useNavigate();
@@ -19,13 +20,19 @@ export default function SignupPage() {
   }
 
   const {
+    control,
     formError,
-    register,
     handleSubmit,
     formState: { isSubmitting, isValid },
   } = useFormWithError<SignupFormType>({
     mode: "onBlur",
     resolver: zodResolver(signupFormSchema),
+    defaultValues: {
+      email: "",
+      nickname: "",
+      password: "",
+      passwordConfirmation: "",
+    },
   });
 
   async function onSubmit(data: SignupFormType) {
@@ -47,36 +54,60 @@ export default function SignupPage() {
       >
         <FieldItem>
           <FieldItem.Label htmlFor="email">이메일</FieldItem.Label>
-          <Input
-            type="email"
-            placeholder="이메일을 입력해주세요"
-            {...register("email")}
+          <FieldAdapter
+            name="email"
+            control={control}
+            render={(props) => (
+              <Input
+                type="email"
+                placeholder="이메일을 입력해주세요"
+                {...props}
+              />
+            )}
           />
         </FieldItem>
         <FieldItem>
           <FieldItem.Label htmlFor="nickname">닉네임</FieldItem.Label>
-          <Input
-            type="text"
-            placeholder="닉네임을 입력해주세요"
-            {...register("nickname")}
+          <FieldAdapter
+            name="nickname"
+            control={control}
+            render={(props) => (
+              <Input
+                type="text"
+                placeholder="닉네임을 입력해주세요"
+                {...props}
+              />
+            )}
           />
         </FieldItem>
         <FieldItem>
           <FieldItem.Label htmlFor="password">비밀번호</FieldItem.Label>
-          <Input
-            type="password"
-            placeholder="비밀번호를 입력해주세요"
-            {...register("password")}
+          <FieldAdapter
+            name="password"
+            control={control}
+            render={(props) => (
+              <Input
+                type="password"
+                placeholder="비밀번호를 입력해주세요"
+                {...props}
+              />
+            )}
           />
         </FieldItem>
         <FieldItem>
           <FieldItem.Label htmlFor="passwordConfirmation">
             비밀번호 확인
           </FieldItem.Label>
-          <Input
-            type="password"
-            placeholder="비밀번호를 다시 한 번 입력해주세요"
-            {...register("passwordConfirmation")}
+          <FieldAdapter
+            name="passwordConfirmation"
+            control={control}
+            render={(props) => (
+              <Input
+                type="password"
+                placeholder="비밀번호를 다시 한 번 입력해주세요"
+                {...props}
+              />
+            )}
           />
         </FieldItem>
         <Button type="submit" size="xl" disabled={!isValid}>
diff --git a/src/pages/items/components/ProductForm.tsx b/src/pages/items/components/ProductForm.tsx
index 044effc95..5bc882b36 100644
--- a/src/pages/items/components/ProductForm.tsx
+++ b/src/pages/items/components/ProductForm.tsx
@@ -13,8 +13,8 @@ import useFormWithError from "@hooks/useFormWithError";
 import { ProductFormSchema, ProductFormType } from "@schemas/product";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useNavigate } from "react-router-dom";
-import { Controller } from "react-hook-form";
 import { Product } from "@type/product";
+import { FieldAdapter } from "@components/adaptor/rhf";
 
 interface ProductFormProps {
   initialData?: Product;
@@ -32,19 +32,19 @@ export default function ProductForm({
   const {
     control,
     formError,
-    register,
     handleSubmit,
     formState: { isSubmitting, isValid },
   } = useFormWithError<ProductFormType>({
-    mode: "onChange",
+    mode: "onBlur",
     resolver: zodResolver(ProductFormSchema),
     defaultValues: initialData || {
-      price: 0,
       images: [],
+      name: "",
+      description: "",
+      price: 0,
       tags: [],
     },
   });
-
   async function onSubmit(data: ProductFormType) {
     try {
       await onFormSubmit(data);
@@ -72,50 +72,56 @@ export default function ProductForm({
         <Section.Content>
           <FieldItem>
             <FieldItem.Label htmlFor="images">상품 이미지</FieldItem.Label>
-            <Controller
+            <FieldAdapter
               name="images"
               control={control}
-              render={({ field, fieldState }) => (
-                <ImageUpload {...field} {...fieldState} />
-              )}
+              render={(props) => <ImageUpload {...props} />}
             />
           </FieldItem>
           <FieldItem>
             <FieldItem.Label htmlFor="name">상품명</FieldItem.Label>
-            <Input placeholder="상품명 입력해주세요" {...register("name")} />
+            <FieldAdapter
+              name="name"
+              control={control}
+              render={(props) => (
+                <Input
+                  type="text"
+                  placeholder="상품명 입력해주세요"
+                  {...props}
+                />
+              )}
+            />
           </FieldItem>
           <FieldItem>
             <FieldItem.Label htmlFor="description">상품 소개</FieldItem.Label>
-            <Textarea
-              {...register("description")}
-              placeholder="상품 소개를  입력해주세요"
+            <FieldAdapter
+              name="description"
+              control={control}
+              render={(props) => (
+                <Textarea placeholder="상품 소개를  입력해주세요" {...props} />
+              )}
             />
           </FieldItem>
           <FieldItem>
             <FieldItem.Label htmlFor="price">판매 가격</FieldItem.Label>
-            <Controller
+            <FieldAdapter
               name="price"
               control={control}
-              render={({ field, fieldState }) => (
+              render={(props) => (
                 <NumberInput
-                  {...field}
-                  {...fieldState}
                   placeholder="판매 가격을 입력해주세요"
+                  {...props}
                 />
               )}
             />
           </FieldItem>
           <FieldItem>
             <FieldItem.Label htmlFor="tags">태그</FieldItem.Label>
-            <Controller
+            <FieldAdapter
               name="tags"
               control={control}
-              render={({ field, fieldState }) => (
-                <TagsInput
-                  {...field}
-                  {...fieldState}
-                  placeholder="태그를 입력해주세요"
-                />
+              render={(props) => (
+                <TagsInput placeholder="태그를 입력해주세요" {...props} />
               )}
             />
           </FieldItem>
diff --git a/src/schemas/product.ts b/src/schemas/product.ts
index 7bd0e7831..afb0ba4a2 100644
--- a/src/schemas/product.ts
+++ b/src/schemas/product.ts
@@ -6,12 +6,17 @@ export const ProductFormSchema = z.object({
     .array(z.union([z.instanceof(File), z.string()]))
     .min(1, { message: MESSAGE.PRODUCT_IMAGE_REQUIRED }),
   tags: z
-    .array(
-      z.string().regex(/^[^!@#$%^&*(),.?":{}|<>_\-+=\[\]\\\/`~';]*$/, {
+    .array(z.string())
+    .min(1, { message: MESSAGE.PRODUCT_TAGS_REQUIRED })
+    .refine(
+      (tags) =>
+        tags.every((tag) =>
+          /^[^!@#$%^&*(),.?":{}|<>_\-+=\[\]\\\/`~';]*$/.test(tag)
+        ),
+      {
         message: MESSAGE.INVALID_STRING,
-      })
-    )
-    .min(1, { message: MESSAGE.PRODUCT_TAGS_REQUIRED }),
+      }
+    ),
   name: z.string().nonempty({ message: MESSAGE.PRODUCT_NAME_REQUIRED }),
   description: z.string().nonempty({
     message: MESSAGE.PRODUCT_DESCRIPTION_REQUIRED,
diff --git a/src/types/common.ts b/src/types/common.ts
index 5259ff862..fc3ff3ded 100644
--- a/src/types/common.ts
+++ b/src/types/common.ts
@@ -1,5 +1,3 @@
-import { FieldError } from "react-hook-form";
-
 export type ListQueryParams = {
   page: number;
   pageSize: number;
@@ -17,11 +15,3 @@ export type BaseData = {
   createdAt: string;
   id: number;
 };
-
-export type DefaultFieldState = {
-  error?: FieldError | undefined;
-  invalid: boolean;
-  isTouched: boolean;
-  isDirty: boolean;
-  isValidating: boolean;
-};

From dd641b604b4d1235447e20ea5753065c3455c24c Mon Sep 17 00:00:00 2001
From: "chanki.kim" <chanki.kim89@gmail.com>
Date: Fri, 3 Jan 2025 22:43:08 +0900
Subject: [PATCH 65/72] =?UTF-8?q?Chore:=20react=20hook=20form=20=EA=B4=80?=
 =?UTF-8?q?=EB=A0=A8=20readme=20=EC=9E=91=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/README.md b/README.md
index 2970e4d20..70d0eb281 100644
--- a/README.md
+++ b/README.md
@@ -88,3 +88,11 @@ state 관리하고 있는 params과 usePageSize로 관리하는 pageSize의 변
 
 - React의 Suspense와 fallback, React router의 loader, hydrateFallback을 조사해보고 정리해보았습니다.
 - https://heavy-bear.tistory.com/13
+
+#### react hook form을 적용하면서 알게된 점
+
+- Controlled 필드를 사용할때는 defaultValue 설정을 꼭 해주어야한다. (초기값이 제대로 안잡히면 벨리데이션이 안됨)
+- useForm의 모드를 'onBlur'로 설정할때에는 필드에 전달된 props중 onBlur가 실행이 되어야 벨리데이션이 된다.
+- 직접 값을 업데이트해줄때는 (특수한 필드의 경우), useForm의 반환값중 setValue를 이용하면 값 업데이트와 벨리데이션이 작동한다.
+- react hook form에 컴포넌트를 연결할때에는 한겹의 어뎁터 레이어를 설정하여 컴포넌트 내부에서 react hook form의 의존성이 없도록 작성하는 방법을 사용하자.
+- watch를 통해 각 필드에 value값을 전달하면 하나의 필드가 업데이트 될때마다 전체가 리랜더링이 되어버린다. (Controller, useController 등을 통해서 전달해야함)

From 0e113519796db7a092cd08bfd51c4f8e2128f6ef Mon Sep 17 00:00:00 2001
From: "chanki.kim" <chanki.kim89@gmail.com>
Date: Sat, 4 Jan 2025 10:27:50 +0900
Subject: [PATCH 66/72] =?UTF-8?q?Refactor:=20=EC=83=81=EC=88=98=ED=8C=8C?=
 =?UTF-8?q?=EC=9D=BC=20=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/constants/file.ts                         |  7 +++++
 .../validation.ts => constants/message.ts}    | 27 +++++++++----------
 src/schemas/auth.ts                           |  2 +-
 src/schemas/comment.ts                        |  2 +-
 tsconfig.app.json                             |  3 ++-
 tsconfig.node.json                            |  3 ++-
 vite.config.ts                                |  4 +++
 7 files changed, 29 insertions(+), 19 deletions(-)
 create mode 100644 src/constants/file.ts
 rename src/{util/validation.ts => constants/message.ts} (84%)

diff --git a/src/constants/file.ts b/src/constants/file.ts
new file mode 100644
index 000000000..1dbad9813
--- /dev/null
+++ b/src/constants/file.ts
@@ -0,0 +1,7 @@
+export const MAX_FILE_SIZE = 2 * 1024 * 1024;
+export const ACCEPT_FILE_TYPES = [
+  "image/jpeg",
+  "image/png",
+  "image/gif",
+  "image/webp",
+];
diff --git a/src/util/validation.ts b/src/constants/message.ts
similarity index 84%
rename from src/util/validation.ts
rename to src/constants/message.ts
index ae14d740c..7a36bc814 100644
--- a/src/util/validation.ts
+++ b/src/constants/message.ts
@@ -1,18 +1,3 @@
-export const AUTH_VALIDATION_MESSAGES = {
-  EMAIL_REQUIRED: "이메일을 입력해주세요",
-  INVALID_EMAIL: "잘못된 이메일 형식입니다.",
-  PASSWORD_REQUIRED: "비밀번호를 입력해주세요.",
-  PASSWORD_MIN_LENGTH: "비밀번호를 8자 이상 입력해주세요.",
-  PASSWORD_MISMATCH: "비밀번호가 일치하지 않습니다.",
-  USERNAME_REQUIRED: "닉네임을 입력해주세요",
-};
-
-export const AUTH_VALIDATION_REGEX = {
-  EMAIL:
-    /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i,
-  PASSWORD: /^.{8,}$/,
-};
-
 export const PRODUCT_VALIDATION_MESSAGE = {
   PRODUCT_IMAGE_REQUIRED: "이미지를 업로드해주세요",
   PRODUCT_TAGS_REQUIRED: "태그를 입력해주세요",
@@ -22,8 +7,20 @@ export const PRODUCT_VALIDATION_MESSAGE = {
   PRODUCT_PRICE_MIN: "원 이상 입력해주세요",
   INVALID_STRING: "특수문자는 사용할 수 없습니다.",
   INVALID_NUMBER: "숫자만 입력해주세요",
+  INVALID_IMAGE_TYPE: "지원하지않는 이미지 형식입니다.",
+  INVALID_IMAGE_SIZE: "이미지 용량을 확인해주세요.",
+  INVALID_IMAGE_COUNT: "1개만 업로드 가능합니다.",
 };
 
 export const COMMENT_VALIDATION_MESSAGE = {
   COMMENT_REQUIRED: "내용을 적어주세요",
 };
+
+export const AUTH_VALIDATION_MESSAGES = {
+  EMAIL_REQUIRED: "이메일을 입력해주세요",
+  INVALID_EMAIL: "잘못된 이메일 형식입니다.",
+  PASSWORD_REQUIRED: "비밀번호를 입력해주세요.",
+  PASSWORD_MIN_LENGTH: "비밀번호를 8자 이상 입력해주세요.",
+  PASSWORD_MISMATCH: "비밀번호가 일치하지 않습니다.",
+  USERNAME_REQUIRED: "닉네임을 입력해주세요",
+};
diff --git a/src/schemas/auth.ts b/src/schemas/auth.ts
index affbc0192..faef054f5 100644
--- a/src/schemas/auth.ts
+++ b/src/schemas/auth.ts
@@ -1,4 +1,4 @@
-import { AUTH_VALIDATION_MESSAGES as MESSAGE } from "@util/validation";
+import { AUTH_VALIDATION_MESSAGES as MESSAGE } from "@constants/message";
 import { z } from "zod";
 
 export const signupFormSchema = z
diff --git a/src/schemas/comment.ts b/src/schemas/comment.ts
index 5e00aa553..9c6a20074 100644
--- a/src/schemas/comment.ts
+++ b/src/schemas/comment.ts
@@ -1,5 +1,5 @@
 import { z } from "zod";
-import { COMMENT_VALIDATION_MESSAGE as MESSAGE } from "@util/validation";
+import { COMMENT_VALIDATION_MESSAGE as MESSAGE } from "@constants/message";
 
 export const CommentFormSchema = z.object({
   content: z.string().nonempty({ message: MESSAGE.COMMENT_REQUIRED }),
diff --git a/tsconfig.app.json b/tsconfig.app.json
index 8997916f0..dcca1c71e 100644
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -33,7 +33,8 @@
       "@util/*": ["src/util/*"],
       "@assets/*": ["src/assets/*"],
       "@type/*": ["src/types/*"],
-      "@schemas/*": ["src/schemas/*"]
+      "@schemas/*": ["src/schemas/*"],
+      "@constants/*": ["src/constants/*"]
     }
   },
   "include": ["src"]
diff --git a/tsconfig.node.json b/tsconfig.node.json
index 88c3ddc23..f2b70aa40 100644
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@@ -31,7 +31,8 @@
       "@util/*": ["src/util/*"],
       "@assets/*": ["src/assets/*"],
       "@type/*": ["src/types/*"],
-      "@schemas/*": ["src/schemas/*"]
+      "@schemas/*": ["src/schemas/*"],
+      "@constants/*": ["src/constants/*"]
     }
   },
   "include": ["vite.config.ts"]
diff --git a/vite.config.ts b/vite.config.ts
index 6a32013d2..cfde56b38 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -18,6 +18,10 @@ export default defineConfig({
       { find: "@assets", replacement: path.resolve(__dirname, "src/assets") },
       { find: "@type", replacement: path.resolve(__dirname, "src/types") },
       { find: "@schemas", replacement: path.resolve(__dirname, "src/schemas") },
+      {
+        find: "@constants",
+        replacement: path.resolve(__dirname, "src/constants"),
+      },
     ],
   },
   css: {

From 04a9dc35bb2619500d4f699b9ede44a42cc5a728 Mon Sep 17 00:00:00 2001
From: "chanki.kim" <chanki.kim89@gmail.com>
Date: Sat, 4 Jan 2025 10:28:01 +0900
Subject: [PATCH 67/72] =?UTF-8?q?Refactor:=20=EC=9D=B4=EB=AF=B8=EC=A7=80?=
 =?UTF-8?q?=20=EC=97=85=EB=A1=9C=EB=93=9C=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81=20-=20zod?=
 =?UTF-8?q?=EB=A1=9C=20=EB=B2=A8=EB=A6=AC=EB=8D=B0=EC=9D=B4=EC=85=98=20?=
 =?UTF-8?q?=EC=98=AE=EA=B9=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Field/ImageUpload.tsx | 58 ++++++++++++-------
 src/hooks/useSingleFile.ts           | 85 ----------------------------
 src/schemas/product.ts               | 49 ++++++++++++----
 3 files changed, 76 insertions(+), 116 deletions(-)
 delete mode 100644 src/hooks/useSingleFile.ts

diff --git a/src/components/Field/ImageUpload.tsx b/src/components/Field/ImageUpload.tsx
index be29e493a..491f936af 100644
--- a/src/components/Field/ImageUpload.tsx
+++ b/src/components/Field/ImageUpload.tsx
@@ -1,11 +1,8 @@
-import useSingleFile from "@hooks/useSingleFile";
+import { ChangeEvent, forwardRef, useEffect, useRef } from "react";
 import { Thumbnail } from "@components/ui";
 import { Error } from "@components/Field";
 import iconPlus from "@assets/img/icon/icon_plus.svg";
 import styles from "./ImageUpload.module.scss";
-import { forwardRef } from "react";
-
-const LIMIT_SIZE_MB = 2;
 
 interface ImageUploadProps {
   value: (File | string)[];
@@ -16,19 +13,36 @@ interface ImageUploadProps {
 
 export const ImageUpload = forwardRef(
   ({ value, onChange, error, placeholder }: ImageUploadProps, _) => {
-    const { fileProps, fileError, handleRemove, preview } = useSingleFile({
-      value,
-      onChange,
-      accept: "image/*",
-      limitSize: LIMIT_SIZE_MB,
-      errorMessage: {
-        max: "이미지 등록은 최대 1개까지 가능합니다.",
-        accept: "이미지 파일만 업로드 가능합니다.",
-      },
-    });
-
-    // react hook form error + useSingleFile hook error
-    const fileInputError = [fileError, error].filter((err) => err).join(" / ");
+    const preview =
+      value?.[0] instanceof File ? URL.createObjectURL(value[0]) : value?.[0];
+    const fileRef = useRef<HTMLInputElement>(null);
+
+    useEffect(() => {
+      return () => {
+        if (preview && value?.[0] instanceof File) {
+          URL.revokeObjectURL(preview);
+        }
+      };
+    }, []);
+
+    function handleChange(e: ChangeEvent<HTMLInputElement>) {
+      if (!e.target.files) return;
+
+      const files = e.target.files;
+
+      onChange(Array.from(files));
+
+      if (fileRef.current) {
+        fileRef.current.value = "";
+      }
+    }
+
+    function handleRemove() {
+      if (!fileRef.current) return;
+
+      fileRef.current.value = "";
+      onChange([]);
+    }
 
     return (
       <>
@@ -38,7 +52,13 @@ export const ImageUpload = forwardRef(
               <img src={iconPlus} alt="이미지 업로드" />
               {placeholder}
             </span>
-            <input className="a11y" {...fileProps} />
+            <input
+              className="a11y"
+              type="file"
+              accept="image/*"
+              ref={fileRef}
+              onChange={handleChange}
+            />
           </label>
           <div className={styles.preview}>
             {preview && (
@@ -50,7 +70,7 @@ export const ImageUpload = forwardRef(
             )}
           </div>
         </div>
-        {fileInputError && <Error error={fileInputError} />}
+        {error && <Error error={error} />}
       </>
     );
   }
diff --git a/src/hooks/useSingleFile.ts b/src/hooks/useSingleFile.ts
deleted file mode 100644
index 008297604..000000000
--- a/src/hooks/useSingleFile.ts
+++ /dev/null
@@ -1,85 +0,0 @@
-import { ChangeEvent, useEffect, useRef, useState } from "react";
-
-interface SingleFileProps {
-  value: (File | string)[];
-  onChange: (file: (File | string)[]) => void;
-  accept?: string;
-  limitSize?: number;
-  errorMessage?: {
-    max?: string;
-    accept?: string;
-  };
-}
-
-export default function useSingleFile({
-  value,
-  onChange,
-  accept = "",
-  limitSize = 5,
-  errorMessage = {},
-}: SingleFileProps) {
-  const preview =
-    value?.[0] instanceof File ? URL.createObjectURL(value[0]) : value?.[0];
-  const [error, setError] = useState<string | null>(null);
-  const fileRef = useRef<HTMLInputElement>(null);
-
-  const defaultMessage = {
-    max: "등록은 최대 1개까지 가능합니다.",
-    size: `${limitSize}MB 이하로 올려주세요`,
-    accept: "지원하지 않는 형식입니다.",
-  };
-
-  const message = { ...defaultMessage, ...errorMessage };
-
-  useEffect(() => {
-    return () => {
-      if (preview && value?.[0] instanceof File) {
-        URL.revokeObjectURL(preview);
-      }
-    };
-  }, []);
-
-  function handleChange(e: ChangeEvent<HTMLInputElement>) {
-    if (!e.target.files) return;
-
-    const file = e.target.files[0];
-    setError(null);
-
-    if (value.length) {
-      return setError(message.max);
-    }
-
-    if (!file.type.match(accept)) {
-      return setError(message.accept);
-    }
-    if (file.size > limitSize * 1024 * 1024) {
-      return setError(message.size);
-    }
-
-    if (fileRef.current) {
-      fileRef.current.value = "";
-    }
-
-    onChange([file]);
-  }
-
-  function handleRemove() {
-    if (!fileRef.current) return;
-
-    fileRef.current.value = "";
-    setError(null);
-    onChange([]);
-  }
-
-  return {
-    fileProps: {
-      ref: fileRef,
-      type: "file",
-      accept,
-      onChange: handleChange,
-    },
-    fileError: error,
-    handleRemove,
-    preview,
-  };
-}
diff --git a/src/schemas/product.ts b/src/schemas/product.ts
index afb0ba4a2..fad4048e3 100644
--- a/src/schemas/product.ts
+++ b/src/schemas/product.ts
@@ -1,21 +1,36 @@
 import { z } from "zod";
-import { PRODUCT_VALIDATION_MESSAGE as MESSAGE } from "@util/validation";
+import { PRODUCT_VALIDATION_MESSAGE as MESSAGE } from "@constants/message";
+
+export const MAX_FILE_SIZE = 2 * 1024 * 1024;
+export const ACCEPT_FILE_TYPES = [
+  "image/jpeg",
+  "image/png",
+  "image/gif",
+  "image/webp",
+];
 
 export const ProductFormSchema = z.object({
   images: z
     .array(z.union([z.instanceof(File), z.string()]))
-    .min(1, { message: MESSAGE.PRODUCT_IMAGE_REQUIRED }),
-  tags: z
-    .array(z.string())
-    .min(1, { message: MESSAGE.PRODUCT_TAGS_REQUIRED })
+    .min(1, { message: MESSAGE.PRODUCT_IMAGE_REQUIRED })
+    .max(1, { message: MESSAGE.INVALID_IMAGE_COUNT })
     .refine(
-      (tags) =>
-        tags.every((tag) =>
-          /^[^!@#$%^&*(),.?":{}|<>_\-+=\[\]\\\/`~';]*$/.test(tag)
-        ),
-      {
-        message: MESSAGE.INVALID_STRING,
-      }
+      (files) => {
+        if (files[0] instanceof File) {
+          return files[0].size <= MAX_FILE_SIZE;
+        }
+        return true; // string일 경우는 size 체크 스킵
+      },
+      { message: `${MESSAGE.INVALID_IMAGE_SIZE}` }
+    )
+    .refine(
+      (files) => {
+        if (files[0] instanceof File) {
+          return ACCEPT_FILE_TYPES.includes(files[0].type);
+        }
+        return true; // string일 경우는 type 체크 스킵
+      },
+      { message: MESSAGE.INVALID_IMAGE_TYPE }
     ),
   name: z.string().nonempty({ message: MESSAGE.PRODUCT_NAME_REQUIRED }),
   description: z.string().nonempty({
@@ -24,6 +39,16 @@ export const ProductFormSchema = z.object({
   price: z.coerce
     .number()
     .min(100, { message: 100 + MESSAGE.PRODUCT_PRICE_MIN }),
+  tags: z
+    .array(z.string())
+    .min(1, { message: MESSAGE.PRODUCT_TAGS_REQUIRED })
+    .refine(
+      (tags) =>
+        tags.every((tag) =>
+          /^[^!@#$%^&*(),.?":{}|<>_\-+=\[\]\\\/`~';]*$/.test(tag)
+        ),
+      { message: MESSAGE.INVALID_STRING }
+    ),
 });
 
 export type ProductFormType = z.infer<typeof ProductFormSchema>;

From b2c23022787278cda03730a6b4cb3f6b46cfb610 Mon Sep 17 00:00:00 2001
From: "chanki.kim" <chanki.kim89@gmail.com>
Date: Sat, 4 Jan 2025 10:28:09 +0900
Subject: [PATCH 68/72] =?UTF-8?q?Chore:=20=EB=B6=88=ED=95=84=EC=9A=94?=
 =?UTF-8?q?=ED=95=9C=20=ED=8C=8C=EC=9D=BC=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Comment/schema.ts | 10 ----------
 1 file changed, 10 deletions(-)
 delete mode 100644 src/components/Comment/schema.ts

diff --git a/src/components/Comment/schema.ts b/src/components/Comment/schema.ts
deleted file mode 100644
index 000816141..000000000
--- a/src/components/Comment/schema.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { COMMENT_VALIDATION_MESSAGE as MESSAGE } from "@util/validation";
-
-export const commentSchema = {
-  content: {
-    value: "",
-    rule: {
-      required: MESSAGE.COMMENT_REQUIRED,
-    },
-  },
-};

From 7974d4d19e36a369c5937b6c7ee51a44cd6371c2 Mon Sep 17 00:00:00 2001
From: "chanki.kim" <chanki.kim89@gmail.com>
Date: Sat, 4 Jan 2025 10:49:53 +0900
Subject: [PATCH 69/72] =?UTF-8?q?Refactor:=20=EC=9D=B4=EB=AF=B8=EC=A7=80?=
 =?UTF-8?q?=20=EB=B2=A8=EB=A6=AC=EB=8D=B0=EC=9D=B4=EC=85=98=EC=97=90=20con?=
 =?UTF-8?q?stants=20=EC=97=B0=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/schemas/product.ts | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/src/schemas/product.ts b/src/schemas/product.ts
index fad4048e3..209a8586e 100644
--- a/src/schemas/product.ts
+++ b/src/schemas/product.ts
@@ -1,13 +1,6 @@
 import { z } from "zod";
 import { PRODUCT_VALIDATION_MESSAGE as MESSAGE } from "@constants/message";
-
-export const MAX_FILE_SIZE = 2 * 1024 * 1024;
-export const ACCEPT_FILE_TYPES = [
-  "image/jpeg",
-  "image/png",
-  "image/gif",
-  "image/webp",
-];
+import { ACCEPT_FILE_TYPES, MAX_FILE_SIZE } from "@constants/file";
 
 export const ProductFormSchema = z.object({
   images: z
@@ -21,7 +14,11 @@ export const ProductFormSchema = z.object({
         }
         return true; // string일 경우는 size 체크 스킵
       },
-      { message: `${MESSAGE.INVALID_IMAGE_SIZE}` }
+      {
+        message: `${MESSAGE.INVALID_IMAGE_SIZE} (${
+          MAX_FILE_SIZE / 1024 / 1024
+        }MB 초과)`,
+      }
     )
     .refine(
       (files) => {

From 03251eb3083d611df11e9dbeefc123a1f4019bf9 Mon Sep 17 00:00:00 2001
From: "chanki.kim" <chanki.kim89@gmail.com>
Date: Sat, 4 Jan 2025 10:50:05 +0900
Subject: [PATCH 70/72] =?UTF-8?q?Style:=20=ED=94=84=EB=A6=AC=EB=B7=B0=20cs?=
 =?UTF-8?q?s=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Field/ImageUpload.module.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Field/ImageUpload.module.scss b/src/components/Field/ImageUpload.module.scss
index c33f14dcd..a6040124e 100644
--- a/src/components/Field/ImageUpload.module.scss
+++ b/src/components/Field/ImageUpload.module.scss
@@ -38,4 +38,5 @@
 
 .preview {
   max-width: 28.2rem;
+  width: 100%;
 }

From 00abb36888a5a36bac17a9c527ce19657f96f4c9 Mon Sep 17 00:00:00 2001
From: "chanki.kim" <chanki.kim89@gmail.com>
Date: Sat, 4 Jan 2025 11:13:45 +0900
Subject: [PATCH 71/72] =?UTF-8?q?Refactor:=20=ED=83=80=EC=9E=85=EC=9D=B4?=
 =?UTF-8?q?=20=EC=B6=94=EB=A1=A0=EB=90=98=EC=96=B4=EC=84=9C=20=EB=B6=88?=
 =?UTF-8?q?=ED=95=84=EC=9A=94=ED=95=9C=20=EC=A0=9C=EB=84=88=EB=A6=AD?=
 =?UTF-8?q?=EC=BD=94=EB=93=9C=20=EC=A7=80=EC=9A=B0=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Comment/useComments.ts | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/components/Comment/useComments.ts b/src/components/Comment/useComments.ts
index 50ec8ee5e..d972bca5f 100644
--- a/src/components/Comment/useComments.ts
+++ b/src/components/Comment/useComments.ts
@@ -10,11 +10,7 @@ export default function useComments(
 ) {
   const { id: productId } = useParams();
   const [comments, setComments] = useState(initialComments);
-  const {
-    isLoading,
-    error,
-    wrappedFn: getData,
-  } = useAsync<CommentList>(getComments);
+  const { isLoading, error, wrappedFn: getData } = useAsync(getComments);
 
   async function handleLoad() {
     try {

From 32d97913f5c0c0358ed86dfab3f8f883fc51dab9 Mon Sep 17 00:00:00 2001
From: "chanki.kim" <chanki.kim89@gmail.com>
Date: Thu, 9 Jan 2025 00:52:19 +0900
Subject: [PATCH 72/72] =?UTF-8?q?Refactor:=20apdator=20=EC=BD=94=EB=93=9C?=
 =?UTF-8?q?=20=EC=A3=BC=EC=84=9D=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/adaptor/rhf/FieldAdapter.tsx | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/components/adaptor/rhf/FieldAdapter.tsx b/src/components/adaptor/rhf/FieldAdapter.tsx
index f3477c53e..a24b9694c 100644
--- a/src/components/adaptor/rhf/FieldAdapter.tsx
+++ b/src/components/adaptor/rhf/FieldAdapter.tsx
@@ -36,10 +36,18 @@ export function FieldAdapter<T extends FieldValues, U extends FieldPath<T>>({
         render({
           ...field,
           onChange: (e) => {
-            // rhf mode가 onBlur모드일때 벨리데이션하려면 필요 (trigger가 onblur에 되는듯함)
-            // 일반적으로 레스트파라미터로 각 input, textarea에 자동적으로 onblur가 들어가서 괜찮으나
-            // 특수하게 커스텀 컴포넌트를 이용해서 수동으로 업데이트할경우(onchange활용하여) onBlur를 해줘야 벨리데이션이 됨
-            // (useForm의 리턴값중에 setValue를 통해서 업데이트하면 벨리데이션이 됨)
+            // 기본 onChange 메서드에 onBlur 메세드를 같이 호출하도록 해두었습니다.
+            //
+            // field.onBlur()는 실제 blur 이벤트가 아닌 validation 트리거용 메서드입니다. (rhf의 mode가 blur일때)
+            //
+            // 일반 controlled input/textarea는
+            // value, onChange, onBlur가 정상적으로 연결이 가능하지만
+            //
+            // 태그인풋/이미지업로드 등의 커스텀 컴포넌트에서
+            // 특정한 행동에 onChange를 활용해 값을 업데이트할때에는
+            // onBlur를 실행하지 못해서, onChange가 호출될때 함께 onBlur가 호출되도록 개선했습니다.
+            //
+            // (정상적으로 연결되는 컴포넌트에서도 한번더 벨리데이션을 호출한다고 해서 문제가 되지 않을것 같아서)
             field.onChange(e);
             field.onBlur();
           },