From 7ab6cd2ef5181adc37547818769e63ba90652680 Mon Sep 17 00:00:00 2001
From: genTe <128919388+wdgWon@users.noreply.github.com>
Date: Fri, 8 Mar 2024 11:03:07 +0900
Subject: [PATCH 01/58] =?UTF-8?q?[Feat=20=E2=9C=8F=EF=B8=8F]=20input?=
 =?UTF-8?q?=EC=9D=98=20=EA=B0=81=EC=A2=85=20=EC=83=81=ED=98=B8=EC=9E=91?=
 =?UTF-8?q?=EC=9A=A9=EC=9D=84=20=EB=8B=B4=EB=8B=B9=ED=95=98=EB=8A=94=20?=
 =?UTF-8?q?=EC=BB=A8=ED=8A=B8=EB=A1=A4=EB=9F=AC=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../InputController/InputController.tsx       | 50 +++++++++++++++++++
 1 file changed, 50 insertions(+)
 create mode 100644 src/components/InputController/InputController.tsx

diff --git a/src/components/InputController/InputController.tsx b/src/components/InputController/InputController.tsx
new file mode 100644
index 00000000..5c7075af
--- /dev/null
+++ b/src/components/InputController/InputController.tsx
@@ -0,0 +1,50 @@
+import { ReactNode } from "react"
+import { UseFormRegisterReturn } from "react-hook-form"
+
+import {
+  Flex,
+  FormControl,
+  FormErrorMessage,
+  FormLabel,
+  Input,
+  InputProps,
+  Spacer,
+} from "@chakra-ui/react"
+
+interface InputControllerProps extends InputProps {
+  children?: ReactNode
+  label?: string
+  registerOptions: UseFormRegisterReturn
+  isInvalid?: boolean
+  errorMessage?: string
+}
+
+const InputController = ({
+  children,
+  isInvalid,
+  label,
+  registerOptions,
+  errorMessage,
+  ...props
+}: InputControllerProps) => {
+  return (
+    <FormControl isInvalid={isInvalid}>
+      <Flex alignItems="center">
+        <FormLabel display="inline-block">{label}</FormLabel>
+        <Spacer />
+        <FormErrorMessage>{errorMessage}</FormErrorMessage>
+      </Flex>
+      <Flex alignItems="center">
+        <Input
+          height="5rem"
+          fontSize="2rem"
+          {...registerOptions}
+          {...props}
+        />
+        {children}
+      </Flex>
+    </FormControl>
+  )
+}
+
+export default InputController

From dabd0b73f2cb55a79ff05bd87b94313c14e7dfbd Mon Sep 17 00:00:00 2001
From: genTe <128919388+wdgWon@users.noreply.github.com>
Date: Fri, 8 Mar 2024 11:06:18 +0900
Subject: [PATCH 02/58] =?UTF-8?q?[Refactoring=20=E2=9A=99=EF=B8=8F]=20api?=
 =?UTF-8?q?=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

---
 tsconfig.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tsconfig.json b/tsconfig.json
index 7d9d9d65..30f6d0f0 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -24,7 +24,7 @@
     "baseUrl": ".",
     "paths": {
       "@components/*": ["src/components/*"],
-      "@apis/*": ["src/apis/*"],
+      "@apis/*": ["src/api/*"],
       "@assets/*": ["src/assets/*"],
       "@hooks/*": ["src/hooks/*"],
       "@pages/*": ["src/pages/*"],

From f1489ad237401aae5b81831a7ab83574b306a0a8 Mon Sep 17 00:00:00 2001
From: genTe <128919388+wdgWon@users.noreply.github.com>
Date: Fri, 8 Mar 2024 11:07:17 +0900
Subject: [PATCH 03/58] =?UTF-8?q?[Refactoring=20=E2=9A=99=EF=B8=8F]=20?=
 =?UTF-8?q?=EC=9E=AC=EC=82=AC=EC=9A=A9=EC=9D=84=20=EC=9C=84=ED=95=B4=20?=
 =?UTF-8?q?=EA=B3=B5=ED=86=B5=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8?=
 =?UTF-8?q?=EB=A1=9C=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../LoginPage/components => components/BackButton}/BackButton.tsx | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/{pages/LoginPage/components => components/BackButton}/BackButton.tsx (100%)

diff --git a/src/pages/LoginPage/components/BackButton.tsx b/src/components/BackButton/BackButton.tsx
similarity index 100%
rename from src/pages/LoginPage/components/BackButton.tsx
rename to src/components/BackButton/BackButton.tsx

From e40f68b9cbea36f91dcb5890730a50629e6d8394 Mon Sep 17 00:00:00 2001
From: genTe <128919388+wdgWon@users.noreply.github.com>
Date: Fri, 8 Mar 2024 11:08:31 +0900
Subject: [PATCH 04/58] =?UTF-8?q?[Refactoring=20=E2=9A=99=EF=B8=8F]=20Inpu?=
 =?UTF-8?q?tController=20=EC=9E=AC=EC=82=AC=EC=9A=A9=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=82=AC=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/LoginPage/LoginPage.tsx             |  2 +-
 .../components/LoginForm/LoginForm.tsx        | 41 ++++++++++---------
 .../LoginForm/components/LoginFormLabel.tsx   | 33 ---------------
 src/pages/SignUpPage/components/LoginHref.tsx | 27 ++++++++++++
 4 files changed, 49 insertions(+), 54 deletions(-)
 delete mode 100644 src/pages/LoginPage/components/LoginForm/components/LoginFormLabel.tsx
 create mode 100644 src/pages/SignUpPage/components/LoginHref.tsx

diff --git a/src/pages/LoginPage/LoginPage.tsx b/src/pages/LoginPage/LoginPage.tsx
index 1d883247..55619cfa 100644
--- a/src/pages/LoginPage/LoginPage.tsx
+++ b/src/pages/LoginPage/LoginPage.tsx
@@ -1,8 +1,8 @@
 import { Box, Center, Divider, Flex } from "@chakra-ui/react"
 
+import BackButton from "@components/BackButton/BackButton"
 import LogoLink from "@components/LogoLink/LogoLink"
 
-import BackButton from "./components/BackButton"
 import CreateAccount from "./components/CreateAccount"
 import LoginForm from "./components/LoginForm/LoginForm"
 import SocialLogin from "./components/SocialLogin"
diff --git a/src/pages/LoginPage/components/LoginForm/LoginForm.tsx b/src/pages/LoginPage/components/LoginForm/LoginForm.tsx
index 5cf63213..c5721eb1 100644
--- a/src/pages/LoginPage/components/LoginForm/LoginForm.tsx
+++ b/src/pages/LoginPage/components/LoginForm/LoginForm.tsx
@@ -1,9 +1,10 @@
 import { SubmitHandler, useForm } from "react-hook-form"
 
-import { Flex, FormControl, Input } from "@chakra-ui/react"
+import { Flex } from "@chakra-ui/react"
+
+import InputController from "@components/InputController/InputController"
 
 import LoginButton from "./components/LoginButton"
-import LoginFormLabel from "./components/LoginFormLabel"
 
 type FormType = {
   email: string
@@ -30,25 +31,25 @@ const LoginForm = () => {
         alignItems="stretch">
         {/* 로그인 입력 양식 */}
         {/* email */}
-        <FormControl isInvalid={Boolean(errors.email)}>
-          <LoginFormLabel error={errors.email}>이메일</LoginFormLabel>
-          <Input
-            type="email"
-            height="5rem"
-            fontSize="2rem"
-            {...register("email", { required: "이메일을 입력해주세요" })}
-          />
-        </FormControl>
+        <InputController
+          type="email"
+          label="이메일"
+          isInvalid={Boolean(errors.email)}
+          errorMessage={errors.email?.message}
+          registerOptions={register("email", {
+            required: "이메일을 입력해주세요",
+          })}
+        />
         {/* paasword */}
-        <FormControl isInvalid={Boolean(errors.password)}>
-          <LoginFormLabel error={errors.password}>비밀번호</LoginFormLabel>
-          <Input
-            type="password"
-            height="5rem"
-            fontSize="2rem"
-            {...register("password", { required: "비밀번호를 입력해주세요" })}
-          />
-        </FormControl>
+        <InputController
+          type="password"
+          label="비밀번호"
+          isInvalid={Boolean(errors.password)}
+          errorMessage={errors.password?.message}
+          registerOptions={register("password", {
+            required: "비밀번호를 입력해주세요",
+          })}
+        />
         <LoginButton />
       </Flex>
     </form>
diff --git a/src/pages/LoginPage/components/LoginForm/components/LoginFormLabel.tsx b/src/pages/LoginPage/components/LoginForm/components/LoginFormLabel.tsx
deleted file mode 100644
index c4c9de17..00000000
--- a/src/pages/LoginPage/components/LoginForm/components/LoginFormLabel.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { PropsWithChildren } from "react"
-import { FieldError } from "react-hook-form"
-
-import {
-  Flex,
-  FormErrorMessage,
-  FormLabel,
-  Spacer,
-  Text,
-} from "@chakra-ui/react"
-
-interface LoginFormLabelProps extends PropsWithChildren {
-  error?: FieldError
-}
-
-const LoginFormLabel = ({ children, error }: LoginFormLabelProps) => {
-  return (
-    <FormLabel>
-      <Flex align="center">
-        <Text
-          px="0.8rem"
-          fontSize="1.2rem"
-          fontWeight="bold">
-          {children}
-        </Text>
-        <Spacer />
-        <FormErrorMessage>{error && error.message}</FormErrorMessage>
-      </Flex>
-    </FormLabel>
-  )
-}
-
-export default LoginFormLabel
diff --git a/src/pages/SignUpPage/components/LoginHref.tsx b/src/pages/SignUpPage/components/LoginHref.tsx
new file mode 100644
index 00000000..cb263188
--- /dev/null
+++ b/src/pages/SignUpPage/components/LoginHref.tsx
@@ -0,0 +1,27 @@
+import { Link } from "react-router-dom"
+
+import { Box, Flex, Text } from "@chakra-ui/react"
+
+const LoginHref = () => {
+  return (
+    <Flex
+      pt="1.4rem"
+      justifyContent="flex-end">
+      <Box
+        fontSize="1.2rem"
+        color="blue">
+        회원이신가요?
+        <Link to="/signup">
+          <Text
+            px="0.4rem"
+            display="inline"
+            decoration="underline">
+            로그인하기
+          </Text>
+        </Link>
+      </Box>
+    </Flex>
+  )
+}
+
+export default LoginHref

From f8909d244139b1f6e954bdc6176439fde901c6a8 Mon Sep 17 00:00:00 2001
From: genTe <128919388+wdgWon@users.noreply.github.com>
Date: Fri, 8 Mar 2024 11:10:16 +0900
Subject: [PATCH 05/58] =?UTF-8?q?[Feat=20=E2=9C=8F=EF=B8=8F]=20=EC=A4=91?=
 =?UTF-8?q?=EB=B3=B5=ED=99=95=EC=9D=B8=20api=20=ED=95=A8=EC=88=98=20?=
 =?UTF-8?q?=EC=9E=91=EC=84=B1=20=EB=B0=8F=20msw=20=ED=95=B8=EB=93=A4?=
 =?UTF-8?q?=EB=9F=AC=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/user/postDoubleCheckEmail.ts              | 15 +++++++++++++--
 src/mocks/handlers.ts                             |  4 ++++
 .../SignUpPage/mocks/postDoubleCheckEmail.mock.ts | 14 ++++++++++++++
 .../mocks/postDoubleCheckNickname.mock.ts         | 13 +++++++++++++
 src/types/domain/apiDomain.d.ts                   |  4 ++++
 5 files changed, 48 insertions(+), 2 deletions(-)
 create mode 100644 src/pages/SignUpPage/mocks/postDoubleCheckEmail.mock.ts
 create mode 100644 src/pages/SignUpPage/mocks/postDoubleCheckNickname.mock.ts

diff --git a/src/api/user/postDoubleCheckEmail.ts b/src/api/user/postDoubleCheckEmail.ts
index 527488b6..071b947a 100644
--- a/src/api/user/postDoubleCheckEmail.ts
+++ b/src/api/user/postDoubleCheckEmail.ts
@@ -1,4 +1,7 @@
-import { postDoubleCheckEmailPayload } from "api-models"
+import {
+  postDoubleCheckEmailPayload,
+  postDoubleCheckEmailResponseType,
+} from "api-models"
 import { AxiosRequestConfig } from "axios"
 
 import { ENDPOINTS } from "@constants/endPoints"
@@ -9,5 +12,13 @@ export const postDoubleCheckEmail = async (
   body: postDoubleCheckEmailPayload,
   config: AxiosRequestConfig = {},
 ) => {
-  await baseInstance.post(ENDPOINTS.EMAIL_DOUBLE_CHECK, body, { ...config })
+  const { data } = await baseInstance.post<postDoubleCheckEmailResponseType>(
+    ENDPOINTS.EMAIL_DOUBLE_CHECK,
+    body,
+    {
+      ...config,
+    },
+  )
+
+  return data
 }
diff --git a/src/mocks/handlers.ts b/src/mocks/handlers.ts
index 0ae77820..22456d71 100644
--- a/src/mocks/handlers.ts
+++ b/src/mocks/handlers.ts
@@ -5,6 +5,8 @@ import { searchHandlers } from "@components/Search/mocks"
 import allProjectHandlers from "@pages/HomePage/mocks"
 import { projectsHandlers, userInfoHandlers } from "@pages/ProfilePage/mocks"
 import { projectDetailHandlers } from "@pages/ProjectDetailPage/mocks"
+import { postDoubleCheckEmail } from "@pages/SignUpPage/mocks/postDoubleCheckEmail.mock"
+import { postDoubleCheckNickname } from "@pages/SignUpPage/mocks/postDoubleCheckNickname.mock"
 
 import { postEmailLogin } from "./auth/postEmailLogin.mock"
 import { postEmailRefresh } from "./auth/postEmailRefresh.mock"
@@ -34,6 +36,8 @@ export const handlers = [
   ...allProjectHandlers,
   postEmailRefresh,
   postEmailLogin,
+  postDoubleCheckEmail,
+  postDoubleCheckNickname,
   ...userInfoHandlers,
   ...projectsHandlers,
 ]
diff --git a/src/pages/SignUpPage/mocks/postDoubleCheckEmail.mock.ts b/src/pages/SignUpPage/mocks/postDoubleCheckEmail.mock.ts
new file mode 100644
index 00000000..33171fe0
--- /dev/null
+++ b/src/pages/SignUpPage/mocks/postDoubleCheckEmail.mock.ts
@@ -0,0 +1,14 @@
+import { postDoubleCheckEmailPayload } from "api-models"
+import { rest } from "msw"
+
+import { ENDPOINTS } from "@constants/endPoints"
+
+export const postDoubleCheckEmail = rest.post(
+  ENDPOINTS.EMAIL_DOUBLE_CHECK,
+  async (req, res, ctx) => {
+    const payload: postDoubleCheckEmailPayload = await req.json()
+    const isDuplicated = payload.email === "admin@admin.com"
+
+    return res(ctx.delay(1000), ctx.status(200), ctx.json({ isDuplicated }))
+  },
+)
diff --git a/src/pages/SignUpPage/mocks/postDoubleCheckNickname.mock.ts b/src/pages/SignUpPage/mocks/postDoubleCheckNickname.mock.ts
new file mode 100644
index 00000000..0cc32188
--- /dev/null
+++ b/src/pages/SignUpPage/mocks/postDoubleCheckNickname.mock.ts
@@ -0,0 +1,13 @@
+import { postDoubleCheckNicknamePayload } from "api-models"
+import { rest } from "msw"
+
+import { ENDPOINTS } from "@constants/endPoints"
+
+export const postDoubleCheckNickname = rest.post(
+  ENDPOINTS.NICKNAME_DOUBLE_CHECK,
+  async (req, res, ctx) => {
+    const payload: postDoubleCheckNicknamePayload = await req.json()
+    const isDuplicated = payload.nickname === "sidepeek"
+    return res(ctx.status(isDuplicated ? 400 : 200))
+  },
+)
diff --git a/src/types/domain/apiDomain.d.ts b/src/types/domain/apiDomain.d.ts
index 9f339b23..81557cd9 100644
--- a/src/types/domain/apiDomain.d.ts
+++ b/src/types/domain/apiDomain.d.ts
@@ -207,6 +207,10 @@ declare module "api-models" {
     email: string
   }
 
+  export type postDoubleCheckEmailResponseType = {
+    isDuplicated: boolean
+  }
+
   export type postDoubleCheckNicknamePayload = {
     nickname: string
   }

From 0ea84d1e206e015a3dc42f98dd960083ff98a472 Mon Sep 17 00:00:00 2001
From: genTe <128919388+wdgWon@users.noreply.github.com>
Date: Sat, 9 Mar 2024 17:05:53 +0900
Subject: [PATCH 06/58] =?UTF-8?q?[Refactoring=20=E2=9A=99=EF=B8=8F]=20name?=
 =?UTF-8?q?=20=EC=86=8D=EC=84=B1=EC=9C=BC=EB=A1=9C=20validation=EC=9D=84?=
 =?UTF-8?q?=20=EC=88=98=ED=96=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../InputController/InputController.tsx       | 22 +++++++++++--------
 .../InputController/types/formKeys.ts         |  1 +
 2 files changed, 14 insertions(+), 9 deletions(-)
 create mode 100644 src/components/InputController/types/formKeys.ts

diff --git a/src/components/InputController/InputController.tsx b/src/components/InputController/InputController.tsx
index 5c7075af..37f3b8d2 100644
--- a/src/components/InputController/InputController.tsx
+++ b/src/components/InputController/InputController.tsx
@@ -1,5 +1,5 @@
 import { ReactNode } from "react"
-import { UseFormRegisterReturn } from "react-hook-form"
+import { RegisterOptions, useFormContext } from "react-hook-form"
 
 import {
   Flex,
@@ -11,34 +11,38 @@ import {
   Spacer,
 } from "@chakra-ui/react"
 
+import { FormKeys } from "./types/formKeys"
+
 interface InputControllerProps extends InputProps {
+  name: FormKeys
   children?: ReactNode
   label?: string
-  registerOptions: UseFormRegisterReturn
-  isInvalid?: boolean
-  errorMessage?: string
+  registerOptions: RegisterOptions
 }
 
 const InputController = ({
   children,
-  isInvalid,
+  name,
   label,
   registerOptions,
-  errorMessage,
   ...props
 }: InputControllerProps) => {
+  const {
+    register,
+    formState: { errors },
+  } = useFormContext()
   return (
-    <FormControl isInvalid={isInvalid}>
+    <FormControl isInvalid={Boolean(errors[name])}>
       <Flex alignItems="center">
         <FormLabel display="inline-block">{label}</FormLabel>
         <Spacer />
-        <FormErrorMessage>{errorMessage}</FormErrorMessage>
+        <FormErrorMessage>{errors[name]?.message as string}</FormErrorMessage>
       </Flex>
       <Flex alignItems="center">
         <Input
           height="5rem"
           fontSize="2rem"
-          {...registerOptions}
+          {...register(name, registerOptions)}
           {...props}
         />
         {children}
diff --git a/src/components/InputController/types/formKeys.ts b/src/components/InputController/types/formKeys.ts
new file mode 100644
index 00000000..245616ff
--- /dev/null
+++ b/src/components/InputController/types/formKeys.ts
@@ -0,0 +1 @@
+export type FormKeys = "email" | "password" | "nickname" | "confirmNickname"

From a8091a8fc2ec489761fcbbb81ab1e72f7013fd60 Mon Sep 17 00:00:00 2001
From: Whoknow77 <gnsdh86166@gmail.com>
Date: Wed, 13 Mar 2024 17:49:58 +0900
Subject: [PATCH 07/58] =?UTF-8?q?[Refactoring=20=E2=9A=99=EF=B8=8F]=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95=EB=B2=84=ED=8A=BC=EA=B3=BC=20form=20?=
 =?UTF-8?q?=EC=A2=85=EC=86=8D=EC=84=B1=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Comments/CommentsItem/CommentsItem.tsx    |  5 +-
 .../CommentsItem/components/CommentTitle.tsx  | 48 +++++++++++++------
 2 files changed, 34 insertions(+), 19 deletions(-)

diff --git a/src/pages/ProjectDetailPage/components/Comments/CommentsItem/CommentsItem.tsx b/src/pages/ProjectDetailPage/components/Comments/CommentsItem/CommentsItem.tsx
index c0bef87f..12d3bada 100644
--- a/src/pages/ProjectDetailPage/components/Comments/CommentsItem/CommentsItem.tsx
+++ b/src/pages/ProjectDetailPage/components/Comments/CommentsItem/CommentsItem.tsx
@@ -52,10 +52,7 @@ const CommentsItem = ({ comment, register }: CommentsItemProps) => {
               w="100%"
               gap="1rem"
               align="flex-start">
-              <CommentTitle
-                user={comment.user}
-                createdAt={comment.createdAt}
-              />
+              <CommentTitle comment={comment} />
               <CommentsEditFormText
                 {...{
                   comment,
diff --git a/src/pages/ProjectDetailPage/components/Comments/CommentsItem/components/CommentTitle.tsx b/src/pages/ProjectDetailPage/components/Comments/CommentsItem/components/CommentTitle.tsx
index b16d5adb..29cca55e 100644
--- a/src/pages/ProjectDetailPage/components/Comments/CommentsItem/components/CommentTitle.tsx
+++ b/src/pages/ProjectDetailPage/components/Comments/CommentsItem/components/CommentTitle.tsx
@@ -1,28 +1,46 @@
 import { HStack, Text } from "@chakra-ui/react"
-import { UserSummary } from "api-models"
+import { Comment } from "api-models"
 
+import { useCommentContext } from "@pages/ProjectDetailPage/store/CommentContext"
 import dateToTimeago from "@pages/ProjectDetailPage/utils/datetoTimeago"
 
+import BeforeEditingButton from "./BeforeEditingButton"
+import OnEditingButton from "./OnEditingButton"
+
 interface CommentTitleProps {
-  user: UserSummary
-  createdAt: string
+  comment: Comment
 }
 
-const CommentTitle = ({ user, createdAt }: CommentTitleProps) => {
+const CommentTitle = ({ comment }: CommentTitleProps) => {
+  const { isEditing, editTargetCommentId } = useCommentContext()
   return (
     <HStack
-      gap="1rem"
+      justifyContent="space-between"
+      w="100%"
       align="center">
-      <Text
-        fontFamily="SCDream_Bold"
-        fontSize="xl">
-        {user ? user.nickname : "익명"}
-      </Text>
-      <Text
-        color="grey.500"
-        fontSize="md">
-        {dateToTimeago(createdAt)}
-      </Text>
+      <HStack
+        gap="1rem"
+        align="center">
+        <Text
+          fontFamily="SCDream_Bold"
+          fontSize="xl">
+          {comment.user ? comment.user.nickname : "익명"}
+        </Text>
+        <Text
+          color="grey.500"
+          fontSize="md">
+          {dateToTimeago(comment.createdAt)}
+        </Text>
+      </HStack>
+      <HStack gap="1rem">
+        {comment.isOwner ? (
+          editTargetCommentId === comment.id && isEditing ? (
+            <OnEditingButton />
+          ) : (
+            <BeforeEditingButton comment={comment} />
+          )
+        ) : null}
+      </HStack>
     </HStack>
   )
 }

From 9969b6c6c87d84574bdb247239cfbb66b35fd12e Mon Sep 17 00:00:00 2001
From: Whoknow77 <gnsdh86166@gmail.com>
Date: Wed, 13 Mar 2024 17:51:14 +0900
Subject: [PATCH 08/58] =?UTF-8?q?[Refactoring=20=E2=9A=99=EF=B8=8F]=20trou?=
 =?UTF-8?q?bleshooting=20null=EA=B0=92=EC=97=90=20=EB=8C=80=ED=95=9C=20?=
 =?UTF-8?q?=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../CommentsItem/components/CommentsEditFormText.tsx | 12 ------------
 .../Content/Explanation/ExplanationItem.tsx          |  2 +-
 2 files changed, 1 insertion(+), 13 deletions(-)

diff --git a/src/pages/ProjectDetailPage/components/Comments/CommentsItem/components/CommentsEditFormText.tsx b/src/pages/ProjectDetailPage/components/Comments/CommentsItem/components/CommentsEditFormText.tsx
index 27fbfb6b..dba33433 100644
--- a/src/pages/ProjectDetailPage/components/Comments/CommentsItem/components/CommentsEditFormText.tsx
+++ b/src/pages/ProjectDetailPage/components/Comments/CommentsItem/components/CommentsEditFormText.tsx
@@ -6,9 +6,6 @@ import { Comment } from "api-models"
 
 import { useCommentContext } from "@pages/ProjectDetailPage/store/CommentContext"
 
-import BeforeEditingButton from "./BeforeEditingButton"
-import OnEditingButton from "./OnEditingButton"
-
 interface CommentsEditFormTextProps {
   comment: Comment
   register: UseFormRegisterReturn
@@ -48,15 +45,6 @@ const CommentsEditFormText = ({
               {comment.content}
             </Text>
           )}
-          <HStack gap="1rem">
-            {comment.isOwner ? (
-              editTargetCommentId === comment.id && isEditing ? (
-                <OnEditingButton />
-              ) : (
-                <BeforeEditingButton comment={comment} />
-              )
-            ) : null}
-          </HStack>
         </HStack>
       </form>
     </Box>
diff --git a/src/pages/ProjectDetailPage/components/Content/Explanation/ExplanationItem.tsx b/src/pages/ProjectDetailPage/components/Content/Explanation/ExplanationItem.tsx
index 83c34f9b..91caa66b 100644
--- a/src/pages/ProjectDetailPage/components/Content/Explanation/ExplanationItem.tsx
+++ b/src/pages/ProjectDetailPage/components/Content/Explanation/ExplanationItem.tsx
@@ -13,7 +13,7 @@ interface ExplanationItemProps {
 }
 
 const ExplanationItem = ({ content }: ExplanationItemProps) => {
-  const processedText = content.replace(/\\n/g, "\n")
+  const processedText = content?.replace(/\\n/g, "\n")
   return (
     <Box data-color-mode="light">
       <MDEditor.Markdown

From 7480db2ff6c5a7fa7b510c36bb482eb82715fd99 Mon Sep 17 00:00:00 2001
From: Whoknow77 <gnsdh86166@gmail.com>
Date: Wed, 13 Mar 2024 18:37:25 +0900
Subject: [PATCH 09/58] =?UTF-8?q?[Design=20=F0=9F=8E=A8]=20=EB=8C=93?=
 =?UTF-8?q?=EA=B8=80=20Time=20media=20query=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Comments/CommentsForm/CommentsForm.tsx     | 10 +++++-----
 .../Comments/CommentsItem/CommentsItem.tsx     | 18 +++++++++++++++++-
 .../CommentsItem/components/CommentTitle.tsx   | 16 ++++++++++------
 .../CommentsItem/components/ReplyComment.tsx   |  2 +-
 4 files changed, 33 insertions(+), 13 deletions(-)

diff --git a/src/pages/ProjectDetailPage/components/Comments/CommentsForm/CommentsForm.tsx b/src/pages/ProjectDetailPage/components/Comments/CommentsForm/CommentsForm.tsx
index 0bd42567..2c69d1d3 100644
--- a/src/pages/ProjectDetailPage/components/Comments/CommentsForm/CommentsForm.tsx
+++ b/src/pages/ProjectDetailPage/components/Comments/CommentsForm/CommentsForm.tsx
@@ -43,14 +43,14 @@ const CommentsForm = ({
             <Textarea
               size="xs"
               rows={1}
-              minH="2rem"
-              maxH="15rem"
+              minH="1rem"
+              maxH="10rem"
               borderTopLeftRadius="0.9rem"
               borderBottomRadius={isReplyComment ? "0.9rem" : 0}
-              fontSize="xl"
-              p="2.5rem"
+              fontSize="lg"
+              p={isReplyComment ? "1rem" : "2rem"}
               as={ResizeTextarea}
-              placeholder={"댓글을 입력하세요"}
+              placeholder={isReplyComment ? "" : "댓글을 입력하세요"}
               isRequired={false}
               resize="none"
               _hover={{ boxShadow: "none", borderColor: "grey.400" }}
diff --git a/src/pages/ProjectDetailPage/components/Comments/CommentsItem/CommentsItem.tsx b/src/pages/ProjectDetailPage/components/Comments/CommentsItem/CommentsItem.tsx
index 12d3bada..b2b6725b 100644
--- a/src/pages/ProjectDetailPage/components/Comments/CommentsItem/CommentsItem.tsx
+++ b/src/pages/ProjectDetailPage/components/Comments/CommentsItem/CommentsItem.tsx
@@ -2,10 +2,18 @@
 import { UseFormRegisterReturn } from "react-hook-form"
 import { useNavigate } from "react-router-dom"
 
-import { Box, Button, HStack, Stack } from "@chakra-ui/react"
+import {
+  Box,
+  Button,
+  HStack,
+  Stack,
+  Text,
+  useMediaQuery,
+} from "@chakra-ui/react"
 import { Comment } from "api-models"
 
 import { useCommentContext } from "@pages/ProjectDetailPage/store/CommentContext"
+import dateToTimeago from "@pages/ProjectDetailPage/utils/datetoTimeago"
 
 import CommentsForm from "../CommentsForm/CommentsForm"
 import CommentTitle from "./components/CommentTitle"
@@ -19,6 +27,7 @@ interface CommentsItemProps {
 }
 
 const CommentsItem = ({ comment, register }: CommentsItemProps) => {
+  const [isLargerThan768] = useMediaQuery(["(min-width: 768px)"])
   const navigate = useNavigate()
 
   const handleNavigateProfile = (userId: number) => {
@@ -53,6 +62,13 @@ const CommentsItem = ({ comment, register }: CommentsItemProps) => {
               gap="1rem"
               align="flex-start">
               <CommentTitle comment={comment} />
+              {!isLargerThan768 && (
+                <Text
+                  color="grey.500"
+                  fontSize="md">
+                  {dateToTimeago(comment.createdAt)}
+                </Text>
+              )}
               <CommentsEditFormText
                 {...{
                   comment,
diff --git a/src/pages/ProjectDetailPage/components/Comments/CommentsItem/components/CommentTitle.tsx b/src/pages/ProjectDetailPage/components/Comments/CommentsItem/components/CommentTitle.tsx
index 29cca55e..510ec04d 100644
--- a/src/pages/ProjectDetailPage/components/Comments/CommentsItem/components/CommentTitle.tsx
+++ b/src/pages/ProjectDetailPage/components/Comments/CommentsItem/components/CommentTitle.tsx
@@ -1,4 +1,4 @@
-import { HStack, Text } from "@chakra-ui/react"
+import { HStack, Text, useMediaQuery } from "@chakra-ui/react"
 import { Comment } from "api-models"
 
 import { useCommentContext } from "@pages/ProjectDetailPage/store/CommentContext"
@@ -13,6 +13,8 @@ interface CommentTitleProps {
 
 const CommentTitle = ({ comment }: CommentTitleProps) => {
   const { isEditing, editTargetCommentId } = useCommentContext()
+  const [isLargerThan768] = useMediaQuery(["(min-width: 768px)"])
+
   return (
     <HStack
       justifyContent="space-between"
@@ -26,11 +28,13 @@ const CommentTitle = ({ comment }: CommentTitleProps) => {
           fontSize="xl">
           {comment.user ? comment.user.nickname : "익명"}
         </Text>
-        <Text
-          color="grey.500"
-          fontSize="md">
-          {dateToTimeago(comment.createdAt)}
-        </Text>
+        {isLargerThan768 && (
+          <Text
+            color="grey.500"
+            fontSize="md">
+            {dateToTimeago(comment.createdAt)}
+          </Text>
+        )}
       </HStack>
       <HStack gap="1rem">
         {comment.isOwner ? (
diff --git a/src/pages/ProjectDetailPage/components/Comments/CommentsItem/components/ReplyComment.tsx b/src/pages/ProjectDetailPage/components/Comments/CommentsItem/components/ReplyComment.tsx
index 6c25a38e..b23fe54f 100644
--- a/src/pages/ProjectDetailPage/components/Comments/CommentsItem/components/ReplyComment.tsx
+++ b/src/pages/ProjectDetailPage/components/Comments/CommentsItem/components/ReplyComment.tsx
@@ -14,7 +14,7 @@ const ReplyComment = ({ comment, register }: ReplyCommentProps) => {
   return comment.map((reply) => {
     return (
       <Flex
-        pl="3rem"
+        pl="1.3rem"
         gap="2rem"
         w="100%"
         key={reply.id}>

From af8a197839a9493fe2de2b46deae935c512867ef Mon Sep 17 00:00:00 2001
From: Whoknow77 <gnsdh86166@gmail.com>
Date: Wed, 13 Mar 2024 19:11:43 +0900
Subject: [PATCH 10/58] =?UTF-8?q?[Feat=20=E2=9C=8F=EF=B8=8F]=20=EC=97=94?=
 =?UTF-8?q?=ED=84=B0=EB=A1=9C=20=EB=8C=93=EA=B8=80=20=EC=88=98=EC=A0=95=20?=
 =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/CommentsEditFormText.tsx             | 13 +++++++++++++
 .../CommentsItem/components/OnEditingButton.tsx     |  3 ++-
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/pages/ProjectDetailPage/components/Comments/CommentsItem/components/CommentsEditFormText.tsx b/src/pages/ProjectDetailPage/components/Comments/CommentsItem/components/CommentsEditFormText.tsx
index dba33433..e35e7ae8 100644
--- a/src/pages/ProjectDetailPage/components/Comments/CommentsItem/components/CommentsEditFormText.tsx
+++ b/src/pages/ProjectDetailPage/components/Comments/CommentsItem/components/CommentsEditFormText.tsx
@@ -1,3 +1,4 @@
+import { useCallback } from "react"
 import { UseFormRegisterReturn } from "react-hook-form"
 import ResizeTextarea from "react-textarea-autosize"
 
@@ -17,6 +18,17 @@ const CommentsEditFormText = ({
 }: CommentsEditFormTextProps) => {
   const { handleSubmit, onSubmitEdit, editTargetCommentId, isEditing } =
     useCommentContext()
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+      if (e.key === "Enter" && !e.shiftKey && handleSubmit) {
+        e.preventDefault()
+        handleSubmit(onSubmitEdit)()
+      }
+    },
+    [handleSubmit, onSubmitEdit],
+  )
+
   if (!handleSubmit) {
     return
   }
@@ -36,6 +48,7 @@ const CommentsEditFormText = ({
               as={ResizeTextarea}
               isRequired={false}
               resize="none"
+              onKeyDown={handleKeyDown}
               {...register}
             />
           ) : (
diff --git a/src/pages/ProjectDetailPage/components/Comments/CommentsItem/components/OnEditingButton.tsx b/src/pages/ProjectDetailPage/components/Comments/CommentsItem/components/OnEditingButton.tsx
index f5689f4d..cbae3e28 100644
--- a/src/pages/ProjectDetailPage/components/Comments/CommentsItem/components/OnEditingButton.tsx
+++ b/src/pages/ProjectDetailPage/components/Comments/CommentsItem/components/OnEditingButton.tsx
@@ -6,13 +6,14 @@ import { IconButton } from "@chakra-ui/react"
 import { useCommentContext } from "@pages/ProjectDetailPage/store/CommentContext"
 
 const OnEditingButton = () => {
-  const { handleOffEdit } = useCommentContext()
+  const { handleOffEdit, handleSubmit, onSubmitEdit } = useCommentContext()
   return (
     <>
       <IconButton
         type="submit"
         aria-label="submit"
         icon={<FaRegCheckCircle />}
+        onClick={handleSubmit(onSubmitEdit)}
         fontSize="2xl"
       />
       <IconButton

From 38d2870762c5de1ded22f22e8e297b2a5d0f4659 Mon Sep 17 00:00:00 2001
From: genTe <128919388+wdgWon@users.noreply.github.com>
Date: Wed, 13 Mar 2024 19:38:24 +0900
Subject: [PATCH 11/58] =?UTF-8?q?[Rename=20=F0=9F=8F=B7=EF=B8=8F]=20FieldN?=
 =?UTF-8?q?ames=EB=A1=9C=20=EC=9D=B4=EB=A6=84=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/InputController/types/formKeys.ts | 1 -
 1 file changed, 1 deletion(-)
 delete mode 100644 src/components/InputController/types/formKeys.ts

diff --git a/src/components/InputController/types/formKeys.ts b/src/components/InputController/types/formKeys.ts
deleted file mode 100644
index 245616ff..00000000
--- a/src/components/InputController/types/formKeys.ts
+++ /dev/null
@@ -1 +0,0 @@
-export type FormKeys = "email" | "password" | "nickname" | "confirmNickname"

From 0b03f0512672d5d500129faac898fe28b7c36216 Mon Sep 17 00:00:00 2001
From: genTe <128919388+wdgWon@users.noreply.github.com>
Date: Wed, 13 Mar 2024 19:39:52 +0900
Subject: [PATCH 12/58] =?UTF-8?q?[Feat=20=E2=9C=8F=EF=B8=8F]=20=ED=9A=8C?=
 =?UTF-8?q?=EC=9B=90=EA=B0=80=EC=9E=85=20=EA=B4=80=EB=A0=A8=20api=20?=
 =?UTF-8?q?=ED=95=A8=EC=88=98=20=EB=B0=8F=20msw=20=ED=95=B8=EB=93=A4?=
 =?UTF-8?q?=EB=9F=AC=20=ED=95=A8=EC=88=98=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/user/postDoubleCheckNickname.ts             | 13 +++++++++++--
 src/api/user/postEmailSignUp.ts                     |  2 +-
 src/mocks/auth/postEmailAuth.mock.ts                |  2 +-
 .../mocks/postDoubleCheckNickname.mock.ts           |  5 +++--
 src/pages/SignUpPage/mocks/postEmailSignUp.mock.ts  | 10 ++++++++++
 src/services/queries/userInfoOptions.ts             |  4 ++--
 src/types/domain/apiDomain.d.ts                     |  4 ++++
 7 files changed, 32 insertions(+), 8 deletions(-)
 create mode 100644 src/pages/SignUpPage/mocks/postEmailSignUp.mock.ts

diff --git a/src/api/user/postDoubleCheckNickname.ts b/src/api/user/postDoubleCheckNickname.ts
index 377e6c25..ae79655a 100644
--- a/src/api/user/postDoubleCheckNickname.ts
+++ b/src/api/user/postDoubleCheckNickname.ts
@@ -1,4 +1,7 @@
-import { postDoubleCheckNicknamePayload } from "api-models"
+import {
+  postDoubleCheckNicknamePayload,
+  postDoubleCheckNicknameResponseType,
+} from "api-models"
 import { AxiosRequestConfig } from "axios"
 
 import { ENDPOINTS } from "@constants/endPoints"
@@ -9,5 +12,11 @@ export const postDoubleCheckNickname = async (
   body: postDoubleCheckNicknamePayload,
   config: AxiosRequestConfig = {},
 ) => {
-  await baseInstance.post(ENDPOINTS.NICKNAME_DOUBLE_CHECK, body, { ...config })
+  const { data } = await baseInstance.post<postDoubleCheckNicknameResponseType>(
+    ENDPOINTS.NICKNAME_DOUBLE_CHECK,
+    body,
+    { ...config },
+  )
+
+  return data
 }
diff --git a/src/api/user/postEmailSignUp.ts b/src/api/user/postEmailSignUp.ts
index e304df63..746bec71 100644
--- a/src/api/user/postEmailSignUp.ts
+++ b/src/api/user/postEmailSignUp.ts
@@ -5,7 +5,7 @@ import { ENDPOINTS } from "@constants/endPoints"
 
 import { baseInstance } from "../axiosInstance"
 
-export const postSignUp = async (
+export const postEmailSignUp = async (
   body: postEmailSignUpPayload,
   config: AxiosRequestConfig = {},
 ) => {
diff --git a/src/mocks/auth/postEmailAuth.mock.ts b/src/mocks/auth/postEmailAuth.mock.ts
index eab1b493..877a8a9d 100644
--- a/src/mocks/auth/postEmailAuth.mock.ts
+++ b/src/mocks/auth/postEmailAuth.mock.ts
@@ -10,5 +10,5 @@ export const postEmailAuth = rest.post(ENDPOINTS.EMAIL_AUTH, (_, res, ctx) => {
     profileImageUrl: null,
     isSocialLogin: false,
   }
-  return res(ctx.delay(1000), ctx.status(200), ctx.json(response))
+  return res(ctx.status(200), ctx.json(response))
 })
diff --git a/src/pages/SignUpPage/mocks/postDoubleCheckNickname.mock.ts b/src/pages/SignUpPage/mocks/postDoubleCheckNickname.mock.ts
index 0cc32188..94c0d4c3 100644
--- a/src/pages/SignUpPage/mocks/postDoubleCheckNickname.mock.ts
+++ b/src/pages/SignUpPage/mocks/postDoubleCheckNickname.mock.ts
@@ -7,7 +7,8 @@ export const postDoubleCheckNickname = rest.post(
   ENDPOINTS.NICKNAME_DOUBLE_CHECK,
   async (req, res, ctx) => {
     const payload: postDoubleCheckNicknamePayload = await req.json()
-    const isDuplicated = payload.nickname === "sidepeek"
-    return res(ctx.status(isDuplicated ? 400 : 200))
+    const isDuplicated = payload.nickname === "admin"
+
+    return res(ctx.delay(1000), ctx.status(200), ctx.json({ isDuplicated }))
   },
 )
diff --git a/src/pages/SignUpPage/mocks/postEmailSignUp.mock.ts b/src/pages/SignUpPage/mocks/postEmailSignUp.mock.ts
new file mode 100644
index 00000000..e3c4bcd9
--- /dev/null
+++ b/src/pages/SignUpPage/mocks/postEmailSignUp.mock.ts
@@ -0,0 +1,10 @@
+import { rest } from "msw"
+
+import { ENDPOINTS } from "@constants/endPoints"
+
+export const postEmailSignUp = rest.post(
+  ENDPOINTS.EMAIL_SIGNUP,
+  async (_, res, ctx) => {
+    return res(ctx.delay(1000), ctx.status(200))
+  },
+)
diff --git a/src/services/queries/userInfoOptions.ts b/src/services/queries/userInfoOptions.ts
index 8cc39d78..0ff8a35d 100644
--- a/src/services/queries/userInfoOptions.ts
+++ b/src/services/queries/userInfoOptions.ts
@@ -1,7 +1,7 @@
-import { postEmailAuth } from "@api/auth/postEmailAuth"
-
 import { UseQueryOptions } from "@tanstack/react-query"
 
+import { postEmailAuth } from "@apis/auth/postEmailAuth"
+
 import authToken from "@stores/authToken"
 
 import { QUERYKEY } from "@constants/queryKey"
diff --git a/src/types/domain/apiDomain.d.ts b/src/types/domain/apiDomain.d.ts
index c3054fe2..33cb460f 100644
--- a/src/types/domain/apiDomain.d.ts
+++ b/src/types/domain/apiDomain.d.ts
@@ -221,6 +221,10 @@ declare module "api-models" {
     nickname: string
   }
 
+  export type postDoubleCheckNicknameResponseType = {
+    isDuplicated: boolean
+  }
+
   /* 기술 스택 */
   export type getTechStacksPayload = {
     keyword?: string

From 8c65a2cdda700ef552eb52bfc99f14ae3339a677 Mon Sep 17 00:00:00 2001
From: genTe <128919388+wdgWon@users.noreply.github.com>
Date: Wed, 13 Mar 2024 19:41:08 +0900
Subject: [PATCH 13/58] =?UTF-8?q?[Feat=20=E2=9C=8F=EF=B8=8F]=20=EC=83=88?=
 =?UTF-8?q?=EB=A1=9C=EC=9A=B4=20msw=20=ED=95=B8=EB=93=A4=EB=9F=AC=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/mocks/handlers.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/mocks/handlers.ts b/src/mocks/handlers.ts
index 36b2c258..7b611837 100644
--- a/src/mocks/handlers.ts
+++ b/src/mocks/handlers.ts
@@ -5,6 +5,7 @@ import { projectsHandlers, userInfoHandlers } from "@pages/ProfilePage/mocks"
 import { projectDetailHandlers } from "@pages/ProjectDetailPage/mocks"
 import { postDoubleCheckEmail } from "@pages/SignUpPage/mocks/postDoubleCheckEmail.mock"
 import { postDoubleCheckNickname } from "@pages/SignUpPage/mocks/postDoubleCheckNickname.mock"
+import { postEmailSignUp } from "@pages/SignUpPage/mocks/postEmailSignUp.mock"
 
 import { postEmailAuth } from "./auth/postEmailAuth.mock"
 import { postEmailLogin } from "./auth/postEmailLogin.mock"
@@ -21,4 +22,5 @@ export const handlers = [
   postEmailAuth,
   ...userInfoHandlers,
   ...projectsHandlers,
+  postEmailSignUp,
 ]

From 106fb4b81cbe138b8c4d1fa1688dbc24c90a8607 Mon Sep 17 00:00:00 2001
From: genTe <128919388+wdgWon@users.noreply.github.com>
Date: Wed, 13 Mar 2024 19:42:04 +0900
Subject: [PATCH 14/58] =?UTF-8?q?[Feat=20=E2=9C=8F=EF=B8=8F]=20Input?=
 =?UTF-8?q?=EC=9D=98=20=EC=BB=A8=ED=8A=B8=EB=A1=A4=EC=9D=84=20=EB=8B=B4?=
 =?UTF-8?q?=EB=8B=B9=ED=95=98=EB=8A=94=20=EA=B3=B5=ED=86=B5=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=83=9D=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../InputController/InputController.tsx       | 46 +++++++++----------
 .../InputController/types/FieldNames.ts       |  1 +
 .../types/InputControllerProps.ts             | 13 ++++++
 3 files changed, 36 insertions(+), 24 deletions(-)
 create mode 100644 src/components/InputController/types/FieldNames.ts
 create mode 100644 src/components/InputController/types/InputControllerProps.ts

diff --git a/src/components/InputController/InputController.tsx b/src/components/InputController/InputController.tsx
index 37f3b8d2..becc4b48 100644
--- a/src/components/InputController/InputController.tsx
+++ b/src/components/InputController/InputController.tsx
@@ -1,52 +1,50 @@
-import { ReactNode } from "react"
-import { RegisterOptions, useFormContext } from "react-hook-form"
+import { cloneElement, isValidElement } from "react"
+import { useFormContext } from "react-hook-form"
 
 import {
   Flex,
   FormControl,
   FormErrorMessage,
   FormLabel,
-  Input,
   InputProps,
   Spacer,
 } from "@chakra-ui/react"
+import { isFunction } from "lodash"
 
-import { FormKeys } from "./types/formKeys"
-
-interface InputControllerProps extends InputProps {
-  name: FormKeys
-  children?: ReactNode
-  label?: string
-  registerOptions: RegisterOptions
-}
+import { InputControllerProps } from "./types/InputControllerProps"
 
 const InputController = ({
   children,
-  name,
+  fieldName,
   label,
   registerOptions,
-  ...props
 }: InputControllerProps) => {
   const {
     register,
+    getFieldState,
     formState: { errors },
   } = useFormContext()
+
+  const renderPorps = {
+    height: "5rem",
+    fontSize: "2rem",
+    ...register(fieldName, registerOptions),
+  } as InputProps
+
   return (
-    <FormControl isInvalid={Boolean(errors[name])}>
+    <FormControl isInvalid={getFieldState(fieldName).invalid}>
       <Flex alignItems="center">
         <FormLabel display="inline-block">{label}</FormLabel>
         <Spacer />
-        <FormErrorMessage>{errors[name]?.message as string}</FormErrorMessage>
-      </Flex>
-      <Flex alignItems="center">
-        <Input
-          height="5rem"
-          fontSize="2rem"
-          {...register(name, registerOptions)}
-          {...props}
-        />
-        {children}
+        <FormErrorMessage>
+          {errors[fieldName]?.message as string}
+        </FormErrorMessage>
       </Flex>
+      {isValidElement(children)
+        ? cloneElement(children, renderPorps)
+        : isFunction(children)
+          ? children(renderPorps)
+          : null}
     </FormControl>
   )
 }
diff --git a/src/components/InputController/types/FieldNames.ts b/src/components/InputController/types/FieldNames.ts
new file mode 100644
index 00000000..f4ff2e9a
--- /dev/null
+++ b/src/components/InputController/types/FieldNames.ts
@@ -0,0 +1 @@
+export type FieldNames = "email" | "password" | "nickname" | "confirmPassword"
diff --git a/src/components/InputController/types/InputControllerProps.ts b/src/components/InputController/types/InputControllerProps.ts
new file mode 100644
index 00000000..1c8cfc51
--- /dev/null
+++ b/src/components/InputController/types/InputControllerProps.ts
@@ -0,0 +1,13 @@
+import { ReactNode } from "react"
+import { FieldValues, RegisterOptions } from "react-hook-form"
+
+import { InputProps } from "@chakra-ui/input"
+
+import { FieldNames } from "./FieldNames"
+
+export interface InputControllerProps {
+  fieldName: FieldNames
+  children: ReactNode | ((renderProps: InputProps) => ReactNode)
+  label?: string
+  registerOptions: RegisterOptions<FieldValues>
+}

From 8ba1bf1a850a8eccd77814fe3545b2d06a539ad6 Mon Sep 17 00:00:00 2001
From: genTe <128919388+wdgWon@users.noreply.github.com>
Date: Wed, 13 Mar 2024 19:43:09 +0900
Subject: [PATCH 15/58] =?UTF-8?q?[Refactoring=20=E2=9A=99=EF=B8=8F]=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=EC=99=80=20=EA=B3=B5=ED=86=B5=EB=90=9C=20=EC=BD=94?=
 =?UTF-8?q?=EB=93=9C=20=EB=B6=84=EB=A6=AC=EB=A5=BC=20=EC=9C=84=ED=95=9C=20?=
 =?UTF-8?q?=EB=A6=AC=ED=8E=99=ED=86=A0=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/BackButton/BackButton.tsx      |  4 +-
 src/pages/LoginPage/LoginPage.tsx             |  5 +-
 .../components/LoginForm/LoginForm.tsx        | 79 +++++++++----------
 src/pages/LoginPage/types/LoginFormType.ts    |  4 +
 .../{LoginHref.tsx => LoginLink.tsx}          |  6 +-
 5 files changed, 47 insertions(+), 51 deletions(-)
 create mode 100644 src/pages/LoginPage/types/LoginFormType.ts
 rename src/pages/SignUpPage/components/{LoginHref.tsx => LoginLink.tsx} (85%)

diff --git a/src/components/BackButton/BackButton.tsx b/src/components/BackButton/BackButton.tsx
index 6ea8658a..303c207a 100644
--- a/src/components/BackButton/BackButton.tsx
+++ b/src/components/BackButton/BackButton.tsx
@@ -8,8 +8,8 @@ const BackButton = () => {
   return (
     <Button
       position="absolute"
-      top="3%"
-      left="3%"
+      top="0"
+      left="0"
       w="3rem"
       h="2rem"
       p="0"
diff --git a/src/pages/LoginPage/LoginPage.tsx b/src/pages/LoginPage/LoginPage.tsx
index 55619cfa..834a61ad 100644
--- a/src/pages/LoginPage/LoginPage.tsx
+++ b/src/pages/LoginPage/LoginPage.tsx
@@ -12,10 +12,9 @@ const LoginPage = () => {
     <Center height="100vh">
       <Box
         aria-label="login container"
-        position="relative"
         width="50rem">
-        <BackButton />
-        <Center>
+        <Center position="relative">
+          <BackButton />
           <LogoLink logoHeight="6rem" />
         </Center>
         <Flex
diff --git a/src/pages/LoginPage/components/LoginForm/LoginForm.tsx b/src/pages/LoginPage/components/LoginForm/LoginForm.tsx
index c5721eb1..02f5a14d 100644
--- a/src/pages/LoginPage/components/LoginForm/LoginForm.tsx
+++ b/src/pages/LoginPage/components/LoginForm/LoginForm.tsx
@@ -1,58 +1,51 @@
-import { SubmitHandler, useForm } from "react-hook-form"
+import { FormProvider, SubmitHandler, useForm } from "react-hook-form"
 
-import { Flex } from "@chakra-ui/react"
+import { Flex, Input } from "@chakra-ui/react"
 
 import InputController from "@components/InputController/InputController"
 
-import LoginButton from "./components/LoginButton"
+import {
+  emailOptions,
+  passwordOptions,
+} from "@pages/LoginPage/constants/registerOptions"
+import { LoginFormType } from "@pages/LoginPage/types/LoginFormType"
 
-type FormType = {
-  email: string
-  password: string
-}
+import LoginButton from "./components/LoginButton"
 
 const LoginForm = () => {
-  const {
-    register,
-    handleSubmit,
-    formState: { errors },
-  } = useForm<FormType>()
+  const method = useForm<LoginFormType>()
 
-  const onSubmit: SubmitHandler<FormType> = (values) => {
+  const onSubmit: SubmitHandler<LoginFormType> = (values) => {
     console.log(values)
   }
 
   return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <Flex
-        direction="column"
-        gap="1.6rem"
-        justifyContent="center"
-        alignItems="stretch">
-        {/* 로그인 입력 양식 */}
-        {/* email */}
-        <InputController
-          type="email"
-          label="이메일"
-          isInvalid={Boolean(errors.email)}
-          errorMessage={errors.email?.message}
-          registerOptions={register("email", {
-            required: "이메일을 입력해주세요",
-          })}
-        />
-        {/* paasword */}
-        <InputController
-          type="password"
-          label="비밀번호"
-          isInvalid={Boolean(errors.password)}
-          errorMessage={errors.password?.message}
-          registerOptions={register("password", {
-            required: "비밀번호를 입력해주세요",
-          })}
-        />
-        <LoginButton />
-      </Flex>
-    </form>
+    <FormProvider {...method}>
+      <form onSubmit={method.handleSubmit(onSubmit)}>
+        <Flex
+          direction="column"
+          gap="1.6rem"
+          justifyContent="center"
+          alignItems="stretch">
+          {/* 로그인 입력 양식 */}
+          {/* email */}
+          <InputController
+            fieldName="email"
+            label="이메일"
+            registerOptions={emailOptions}>
+            <Input type="email" />
+          </InputController>
+          {/* paasword */}
+          <InputController
+            fieldName="password"
+            label="비밀번호"
+            registerOptions={passwordOptions}>
+            <Input type="password" />
+          </InputController>
+          <LoginButton />
+        </Flex>
+      </form>
+    </FormProvider>
   )
 }
 
diff --git a/src/pages/LoginPage/types/LoginFormType.ts b/src/pages/LoginPage/types/LoginFormType.ts
new file mode 100644
index 00000000..f0a1f586
--- /dev/null
+++ b/src/pages/LoginPage/types/LoginFormType.ts
@@ -0,0 +1,4 @@
+export type LoginFormType = {
+  email: string
+  password: string
+}
diff --git a/src/pages/SignUpPage/components/LoginHref.tsx b/src/pages/SignUpPage/components/LoginLink.tsx
similarity index 85%
rename from src/pages/SignUpPage/components/LoginHref.tsx
rename to src/pages/SignUpPage/components/LoginLink.tsx
index cb263188..18d4986f 100644
--- a/src/pages/SignUpPage/components/LoginHref.tsx
+++ b/src/pages/SignUpPage/components/LoginLink.tsx
@@ -2,7 +2,7 @@ import { Link } from "react-router-dom"
 
 import { Box, Flex, Text } from "@chakra-ui/react"
 
-const LoginHref = () => {
+const LoginLink = () => {
   return (
     <Flex
       pt="1.4rem"
@@ -11,7 +11,7 @@ const LoginHref = () => {
         fontSize="1.2rem"
         color="blue">
         회원이신가요?
-        <Link to="/signup">
+        <Link to="/login">
           <Text
             px="0.4rem"
             display="inline"
@@ -24,4 +24,4 @@ const LoginHref = () => {
   )
 }
 
-export default LoginHref
+export default LoginLink

From d68654603e2404d7bd7d84c87bfe2f39050e4905 Mon Sep 17 00:00:00 2001
From: genTe <128919388+wdgWon@users.noreply.github.com>
Date: Wed, 13 Mar 2024 19:44:09 +0900
Subject: [PATCH 16/58] =?UTF-8?q?[Remove=20=F0=9F=97=91=EF=B8=8F]=20?=
 =?UTF-8?q?=EC=A4=91=EB=B3=B5=20=ED=99=95=EC=9D=B8=20api=EB=8A=94=20mutati?=
 =?UTF-8?q?on=EC=9D=B4=EB=AF=80=EB=A1=9C=20queryKey=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/constants/queryKey.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/constants/queryKey.ts b/src/constants/queryKey.ts
index bf66b2be..812fb538 100644
--- a/src/constants/queryKey.ts
+++ b/src/constants/queryKey.ts
@@ -1,6 +1,4 @@
 export const QUERYKEY = {
-  EMAIL_DOUBLE_CHECK: "emailDoubleCheck",
-  NICKNAME_DOUBLE_CHECK: "nicknameDoubleCheck",
   USER_INFO: "userInfo",
   TECH_STACKS: "techStacks",
 }

From 5acccbee9df55610fa4e66f3e0631ebcdc0b4b23 Mon Sep 17 00:00:00 2001
From: genTe <128919388+wdgWon@users.noreply.github.com>
Date: Wed, 13 Mar 2024 19:46:05 +0900
Subject: [PATCH 17/58] =?UTF-8?q?[Feat=20=E2=9C=8F=EF=B8=8F]=20=EC=98=B5?=
 =?UTF-8?q?=EC=85=98=EA=B3=BC=20=EB=A9=94=EC=84=B8=EC=A7=80=EB=93=A4=20?=
 =?UTF-8?q?=EC=83=81=EC=88=98=EB=A1=9C=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../SignUpPage/constants/errorOptions.ts      | 36 +++++++++++++++++++
 .../SignUpPage/constants/toastMessages.ts     | 17 +++++++++
 .../SignUpPage/constants/toastOptions.ts      | 10 ++++++
 3 files changed, 63 insertions(+)
 create mode 100644 src/pages/SignUpPage/constants/errorOptions.ts
 create mode 100644 src/pages/SignUpPage/constants/toastMessages.ts
 create mode 100644 src/pages/SignUpPage/constants/toastOptions.ts

diff --git a/src/pages/SignUpPage/constants/errorOptions.ts b/src/pages/SignUpPage/constants/errorOptions.ts
new file mode 100644
index 00000000..370b472f
--- /dev/null
+++ b/src/pages/SignUpPage/constants/errorOptions.ts
@@ -0,0 +1,36 @@
+import { ErrorOption } from "react-hook-form"
+
+import { SignUpFormValues } from "../types/SignUpFormValues"
+
+interface DoubleCheckErrors
+  extends Pick<
+    Record<keyof SignUpFormValues, ErrorOption>,
+    "email" | "nickname"
+  > {}
+
+export const duplicatedErrors: DoubleCheckErrors = {
+  email: {
+    type: "validate",
+    message: "이미 존재하는 이메일입니다.",
+  },
+  nickname: {
+    type: "validate",
+    message: "이미 존재하는 닉네임입니다.",
+  },
+}
+
+export const requiredDoubleCheckErrors: DoubleCheckErrors = {
+  email: {
+    type: "requried",
+    message: "이메일 중복 확인이 필요합니다.",
+  },
+  nickname: {
+    type: "requried",
+    message: "닉네임 중북 확인이 필요합니다.",
+  },
+}
+
+export const differentPasswordError: ErrorOption = {
+  type: "validate",
+  message: "비밀번호가 일치하지 않습니다.",
+}
diff --git a/src/pages/SignUpPage/constants/toastMessages.ts b/src/pages/SignUpPage/constants/toastMessages.ts
new file mode 100644
index 00000000..8276e3d1
--- /dev/null
+++ b/src/pages/SignUpPage/constants/toastMessages.ts
@@ -0,0 +1,17 @@
+export const DOUBLE_CHECK_MESSAGE = {
+  EMAIL: {
+    ERROR: "이미 존재하는 이메일입니다.",
+    SUCCESS: "사용 가능한 이메일입니다.",
+  },
+  NICKNAME: {
+    ERROR: "이미 존재하는 닉네임입니다.",
+    SUCCESS: "사용 가능한 닉네임입니다.",
+  },
+}
+
+export const SUBMIT_MESSAGE = {
+  ERROR: {
+    EMAIL_CHECK: "이메일 중복 확인이 필요합니다.",
+    NICKNAME_CHECK: "닉네임 중복 확인이 필요합니다.",
+  },
+}
diff --git a/src/pages/SignUpPage/constants/toastOptions.ts b/src/pages/SignUpPage/constants/toastOptions.ts
new file mode 100644
index 00000000..2a47b616
--- /dev/null
+++ b/src/pages/SignUpPage/constants/toastOptions.ts
@@ -0,0 +1,10 @@
+import { UseToastOptions } from "@chakra-ui/toast"
+
+export const errorToastOptions: UseToastOptions = {
+  position: "top-right",
+  containerStyle: {
+    maxWidth: "100%",
+    fontSize: "1.2rem",
+    fontFamily: "SCDream_Regular",
+  },
+}

From 6e587c0d584f35862f988e8778cb42fa1564d964 Mon Sep 17 00:00:00 2001
From: genTe <128919388+wdgWon@users.noreply.github.com>
Date: Wed, 13 Mar 2024 19:47:50 +0900
Subject: [PATCH 18/58] =?UTF-8?q?[Feat=20=E2=9C=8F=EF=B8=8F]=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?=
 =?UTF-8?q?=EC=9D=98=20=EB=A0=88=EC=A7=80=EC=8A=A4=ED=84=B0=20=EC=98=B5?=
 =?UTF-8?q?=EC=85=98=20=EC=83=81=EC=88=98=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../LoginPage/constants/registerOptions.ts    |  9 ++++
 .../SignUpPage/constants/registerOptions.ts   | 48 +++++++++++++++++++
 2 files changed, 57 insertions(+)
 create mode 100644 src/pages/LoginPage/constants/registerOptions.ts
 create mode 100644 src/pages/SignUpPage/constants/registerOptions.ts

diff --git a/src/pages/LoginPage/constants/registerOptions.ts b/src/pages/LoginPage/constants/registerOptions.ts
new file mode 100644
index 00000000..a597cb23
--- /dev/null
+++ b/src/pages/LoginPage/constants/registerOptions.ts
@@ -0,0 +1,9 @@
+import { RegisterOptions } from "react-hook-form"
+
+export const emailOptions: RegisterOptions = {
+  required: "이메일을 입력해주세요",
+}
+
+export const passwordOptions: RegisterOptions = {
+  required: "비밀번호를 입력해주세요",
+}
diff --git a/src/pages/SignUpPage/constants/registerOptions.ts b/src/pages/SignUpPage/constants/registerOptions.ts
new file mode 100644
index 00000000..1633da83
--- /dev/null
+++ b/src/pages/SignUpPage/constants/registerOptions.ts
@@ -0,0 +1,48 @@
+import { RegisterOptions } from "react-hook-form"
+
+export const emailOptions: RegisterOptions = {
+  required: "이메일을 입력해주세요",
+  pattern: {
+    value: /[a-z0-9]+@[a-z]+.[a-z]{2,3}/,
+    message: "이메일 형식에 맞지 않습니다.",
+  },
+  max: {
+    value: 15,
+    message: "이메일은 최대 25자까지 입력 가능합니다.",
+  },
+  shouldUnregister: true,
+}
+
+export const nicknameOptions: RegisterOptions = {
+  required: "사용할 닉네임을 입력해주세요.",
+  pattern: {
+    value: /^[a-zA-Z0-9가-힣]+$/,
+    message: "닉네임은 특수문자를 사용할 수 없습니다.",
+  },
+  maxLength: {
+    value: 12,
+    message: "닉네임은 최대 12글자까지 가능합니다.",
+  },
+  minLength: {
+    value: 2,
+    message: "닉네임은 최소 2글자 이상 입력하여야 합니다.",
+  },
+  shouldUnregister: true,
+}
+
+export const passwordOptions: RegisterOptions = {
+  required: "비밀번호를 입력해주세요.",
+  pattern: {
+    value: /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]+$/,
+    message:
+      "문자, 숫자, 특수 문자를 포함하는 8글자 이상의 비밀번호여야 합니다.",
+  },
+  minLength: {
+    value: 8,
+    message: "8글자 이상 입력하여야 합니다.",
+  },
+}
+
+export const confirmPasswordOptions: RegisterOptions = {
+  required: "비밀번호 확인이 필요합니다.",
+}

From 715b1a246a3837a4f3db0221040c13a71dc33a6b Mon Sep 17 00:00:00 2001
From: genTe <128919388+wdgWon@users.noreply.github.com>
Date: Wed, 13 Mar 2024 19:48:48 +0900
Subject: [PATCH 19/58] =?UTF-8?q?[Feat=20=E2=9C=8F=EF=B8=8F]=20=ED=9A=8C?=
 =?UTF-8?q?=EC=9B=90=EA=B0=80=EC=9E=85=20=ED=8F=BC=20=EA=B8=B0=EB=8A=A5=20?=
 =?UTF-8?q?=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/SignUpForm/SignUpForm.tsx      | 95 +++++++++++++++++++
 .../hooks/mutaitions/useSignUpMutation.ts     | 15 +++
 src/pages/SignUpPage/hooks/useSignUpForm.ts   | 90 ++++++++++++++++++
 .../SignUpPage/types/SignUpFormValues.ts      |  3 +
 4 files changed, 203 insertions(+)
 create mode 100644 src/pages/SignUpPage/components/SignUpForm/SignUpForm.tsx
 create mode 100644 src/pages/SignUpPage/hooks/mutaitions/useSignUpMutation.ts
 create mode 100644 src/pages/SignUpPage/hooks/useSignUpForm.ts
 create mode 100644 src/pages/SignUpPage/types/SignUpFormValues.ts

diff --git a/src/pages/SignUpPage/components/SignUpForm/SignUpForm.tsx b/src/pages/SignUpPage/components/SignUpForm/SignUpForm.tsx
new file mode 100644
index 00000000..64d3aba3
--- /dev/null
+++ b/src/pages/SignUpPage/components/SignUpForm/SignUpForm.tsx
@@ -0,0 +1,95 @@
+import { FormProvider } from "react-hook-form"
+
+import { Flex, Input } from "@chakra-ui/react"
+
+import InputController from "@components/InputController/InputController"
+
+import {
+  confirmPasswordOptions,
+  emailOptions,
+  nicknameOptions,
+  passwordOptions,
+} from "@pages/SignUpPage/constants/registerOptions"
+import { DOUBLE_CHECK_MESSAGE } from "@pages/SignUpPage/constants/toastMessages"
+import { useSignUpForm } from "@pages/SignUpPage/hooks/useSignUpForm"
+
+import DoubleCheckButton from "./components/DoubleCheckButton"
+import SignUpButton from "./components/SignUpButton"
+
+const SignUpForm = () => {
+  const { method, emailCheck, nicknameCheck, onSubmit, handleDoubleCheck } =
+    useSignUpForm()
+
+  return (
+    <FormProvider {...method}>
+      <form onSubmit={method.handleSubmit(onSubmit)}>
+        <Flex
+          direction="column"
+          gap="1.6rem"
+          justifyContent="center"
+          alignItems="stretch">
+          {/* 회원가입 입력 양식 */}
+          {/* email */}
+          <InputController
+            fieldName="email"
+            label="이메일"
+            registerOptions={emailOptions}>
+            {(renderProps) => (
+              <Flex alignItems="center">
+                <Input
+                  type="email"
+                  {...renderProps}
+                />
+                <DoubleCheckButton
+                  isDuplicated={emailCheck.data?.isDuplicated}
+                  isLoading={emailCheck.isPending}
+                  onClick={() => handleDoubleCheck("email")}
+                  errorMessage={DOUBLE_CHECK_MESSAGE.EMAIL.ERROR}
+                  successMessage={DOUBLE_CHECK_MESSAGE.EMAIL.SUCCESS}
+                />
+              </Flex>
+            )}
+          </InputController>
+          {/* nickname */}
+          <InputController
+            fieldName="nickname"
+            label="닉네임"
+            registerOptions={nicknameOptions}>
+            {(renderProps) => (
+              <Flex alignItems="center">
+                <Input
+                  type="text"
+                  {...renderProps}
+                />
+                <DoubleCheckButton
+                  isDuplicated={nicknameCheck.data?.isDuplicated}
+                  isLoading={nicknameCheck.isPending}
+                  onClick={() => handleDoubleCheck("nickname")}
+                  errorMessage={DOUBLE_CHECK_MESSAGE.NICKNAME.ERROR}
+                  successMessage={DOUBLE_CHECK_MESSAGE.NICKNAME.SUCCESS}
+                />
+              </Flex>
+            )}
+          </InputController>
+          {/* paasword */}
+          <InputController
+            fieldName="password"
+            label="비밀번호"
+            registerOptions={passwordOptions}>
+            <Input type="password" />
+          </InputController>
+          {/* double check password */}
+          <InputController
+            fieldName="confirmPassword"
+            label="비밀번호 확인"
+            registerOptions={confirmPasswordOptions}>
+            <Input type="password" />
+          </InputController>
+          <SignUpButton />
+        </Flex>
+      </form>
+    </FormProvider>
+  )
+}
+
+export default SignUpForm
diff --git a/src/pages/SignUpPage/hooks/mutaitions/useSignUpMutation.ts b/src/pages/SignUpPage/hooks/mutaitions/useSignUpMutation.ts
new file mode 100644
index 00000000..2d196e7d
--- /dev/null
+++ b/src/pages/SignUpPage/hooks/mutaitions/useSignUpMutation.ts
@@ -0,0 +1,15 @@
+import { useNavigate } from "react-router-dom"
+
+import { postEmailSignUpPayload } from "api-models"
+
+import { useMutation } from "@tanstack/react-query"
+
+import { postEmailSignUp } from "@apis/user/postEmailSignUp"
+
+export const useSignUpMutation = () => {
+  const navigate = useNavigate()
+  return useMutation({
+    mutationFn: (body: postEmailSignUpPayload) => postEmailSignUp(body),
+    onSuccess: () => navigate("/login", { replace: true }),
+  })
+}
diff --git a/src/pages/SignUpPage/hooks/useSignUpForm.ts b/src/pages/SignUpPage/hooks/useSignUpForm.ts
new file mode 100644
index 00000000..7051dbcc
--- /dev/null
+++ b/src/pages/SignUpPage/hooks/useSignUpForm.ts
@@ -0,0 +1,90 @@
+import { useState } from "react"
+import { SubmitHandler, useForm } from "react-hook-form"
+
+import { useToast } from "@chakra-ui/toast"
+
+import {
+  differentPasswordError,
+  duplicatedErrors,
+} from "../constants/errorOptions"
+import { SUBMIT_MESSAGE } from "../constants/toastMessages"
+import { errorToastOptions } from "../constants/toastOptions"
+import { SignUpFormValues } from "../types/SignUpFormValues"
+import useDoubleCheckEmailMutation from "./mutaitions/useDoubleCheckEmailMutation"
+import useDoubleCheckNicknameMutation from "./mutaitions/useDoubleCheckNicknameMutation"
+import { useSignUpMutation } from "./mutaitions/useSignUpMutation"
+
+export const useSignUpForm = () => {
+  const toast = useToast(errorToastOptions)
+
+  const [checkedEmail, setCheckedEmail] = useState("")
+  const [checkedNickname, setCheckedNickname] = useState("")
+  const method = useForm<SignUpFormValues>()
+
+  const emailCheck = useDoubleCheckEmailMutation({
+    setError: () => {
+      setCheckedEmail(() => "")
+      method.setError("email", duplicatedErrors.email)
+    },
+    trigger: () => method.trigger(),
+  })
+
+  const nicknameCheck = useDoubleCheckNicknameMutation({
+    setError: () => {
+      setCheckedNickname(() => "")
+      method.setError("nickname", duplicatedErrors.nickname)
+    },
+    trigger: () => method.trigger(),
+  })
+
+  const signUp = useSignUpMutation()
+
+  const onSubmit: SubmitHandler<SignUpFormValues> = ({
+    email,
+    nickname,
+    password,
+    confirmPassword,
+  }) => {
+    if (password !== confirmPassword) {
+      return method.setError("confirmPassword", differentPasswordError)
+    }
+
+    if (checkedEmail !== email) {
+      method.setFocus("email")
+      return toast({
+        status: "error",
+        title: SUBMIT_MESSAGE.ERROR.EMAIL_CHECK,
+      })
+    }
+
+    if (checkedNickname !== nickname) {
+      method.setFocus("nickname")
+      return toast({
+        status: "error",
+        title: SUBMIT_MESSAGE.ERROR.NICKNAME_CHECK,
+      })
+    }
+
+    signUp.mutate({ email, password, nickname })
+  }
+
+  const handleDoubleCheck = async (fieldName: keyof SignUpFormValues) => {
+    await method.trigger(fieldName)
+
+    if (method.getFieldState(fieldName, method.formState).invalid) {
+      return
+    }
+
+    const value = method.getValues()[fieldName]
+
+    if (fieldName === "email") {
+      setCheckedEmail(value)
+      emailCheck.mutate(value)
+    } else {
+      setCheckedNickname(value)
+      nicknameCheck.mutate(value)
+    }
+  }
+
+  return { method, emailCheck, nicknameCheck, onSubmit, handleDoubleCheck }
+}
diff --git a/src/pages/SignUpPage/types/SignUpFormValues.ts b/src/pages/SignUpPage/types/SignUpFormValues.ts
new file mode 100644
index 00000000..aaaef996
--- /dev/null
+++ b/src/pages/SignUpPage/types/SignUpFormValues.ts
@@ -0,0 +1,3 @@
+import { FieldNames } from "@components/InputController/types/FieldNames"
+
+export interface SignUpFormValues extends Record<FieldNames, string> {}

From 43a6b3a0bf4051f2f9ef09585d71497ab41825a4 Mon Sep 17 00:00:00 2001
From: genTe <128919388+wdgWon@users.noreply.github.com>
Date: Wed, 13 Mar 2024 19:49:23 +0900
Subject: [PATCH 20/58] =?UTF-8?q?[Feat=20=E2=9C=8F=EF=B8=8F]=20=EC=A4=91?=
 =?UTF-8?q?=EB=B3=B5=20=ED=99=95=EC=9D=B8=20=EB=B2=84=ED=8A=BC=20=EA=B8=B0?=
 =?UTF-8?q?=EB=8A=A5=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/DoubleCheckButton.tsx          | 56 +++++++++++++++++++
 .../mutaitions/useDoubleCheckEmailMutation.ts | 23 ++++++++
 .../useDoubleCheckNicknameMutation.ts         | 23 ++++++++
 .../SignUpPage/types/DoubleCheckProps.ts      |  4 ++
 4 files changed, 106 insertions(+)
 create mode 100644 src/pages/SignUpPage/components/SignUpForm/components/DoubleCheckButton.tsx
 create mode 100644 src/pages/SignUpPage/hooks/mutaitions/useDoubleCheckEmailMutation.ts
 create mode 100644 src/pages/SignUpPage/hooks/mutaitions/useDoubleCheckNicknameMutation.ts
 create mode 100644 src/pages/SignUpPage/types/DoubleCheckProps.ts

diff --git a/src/pages/SignUpPage/components/SignUpForm/components/DoubleCheckButton.tsx b/src/pages/SignUpPage/components/SignUpForm/components/DoubleCheckButton.tsx
new file mode 100644
index 00000000..48b02957
--- /dev/null
+++ b/src/pages/SignUpPage/components/SignUpForm/components/DoubleCheckButton.tsx
@@ -0,0 +1,56 @@
+import { useEffect } from "react"
+import { IoMdCheckmarkCircle } from "react-icons/io"
+
+import { Button, ButtonProps, Icon, Text, useToast } from "@chakra-ui/react"
+
+import { errorToastOptions } from "@pages/SignUpPage/constants/toastOptions"
+
+interface DoubleCheckButtonProps extends ButtonProps {
+  isDuplicated?: boolean
+  errorMessage: string
+  successMessage: string
+}
+
+const DoubleCheckButton = ({
+  isDuplicated,
+  errorMessage,
+  successMessage,
+  ...props
+}: DoubleCheckButtonProps) => {
+  const toast = useToast(errorToastOptions)
+
+  useEffect(() => {
+    if (isDuplicated === true) {
+      toast({
+        status: "error",
+        title: errorMessage,
+      })
+    } else if (isDuplicated === false) {
+      toast({
+        status: "success",
+        title: successMessage,
+      })
+    }
+  }, [isDuplicated])
+
+  return (
+    <Button
+      width="9rem"
+      height="5rem"
+      variant="outline"
+      borderRadius="0.8rem"
+      {...props}>
+      {isDuplicated === false ? (
+        <Icon
+          as={IoMdCheckmarkCircle}
+          color="green"
+          boxSize="2rem"
+        />
+      ) : (
+        <Text>중복 확인</Text>
+      )}
+    </Button>
+  )
+}
+
+export default DoubleCheckButton
diff --git a/src/pages/SignUpPage/hooks/mutaitions/useDoubleCheckEmailMutation.ts b/src/pages/SignUpPage/hooks/mutaitions/useDoubleCheckEmailMutation.ts
new file mode 100644
index 00000000..c944151d
--- /dev/null
+++ b/src/pages/SignUpPage/hooks/mutaitions/useDoubleCheckEmailMutation.ts
@@ -0,0 +1,23 @@
+import { useMutation } from "@tanstack/react-query"
+
+import { postDoubleCheckEmail } from "@/api/user/postDoubleCheckEmail"
+
+import { DoubleCheckProps } from "@pages/SignUpPage/types/DoubleCheckProps"
+
+const useDoubleCheckEmailMutaion = ({
+  setError,
+  trigger,
+}: DoubleCheckProps) => {
+  return useMutation({
+    mutationFn: (email: string) => postDoubleCheckEmail({ email }),
+    onSuccess: (response) => {
+      if (response.isDuplicated) {
+        setError()
+      } else {
+        trigger()
+      }
+    },
+  })
+}
+
+export default useDoubleCheckEmailMutaion
diff --git a/src/pages/SignUpPage/hooks/mutaitions/useDoubleCheckNicknameMutation.ts b/src/pages/SignUpPage/hooks/mutaitions/useDoubleCheckNicknameMutation.ts
new file mode 100644
index 00000000..10860c67
--- /dev/null
+++ b/src/pages/SignUpPage/hooks/mutaitions/useDoubleCheckNicknameMutation.ts
@@ -0,0 +1,23 @@
+import { useMutation } from "@tanstack/react-query"
+
+import { postDoubleCheckNickname } from "@apis/user/postDoubleCheckNickname"
+
+import { DoubleCheckProps } from "@pages/SignUpPage/types/DoubleCheckProps"
+
+const useDoubleCheckNicknameMutation = ({
+  setError,
+  trigger,
+}: DoubleCheckProps) => {
+  return useMutation({
+    mutationFn: (nickname: string) => postDoubleCheckNickname({ nickname }),
+    onSuccess: (response) => {
+      if (response.isDuplicated) {
+        setError()
+      } else {
+        trigger()
+      }
+    },
+  })
+}
+
+export default useDoubleCheckNicknameMutation
diff --git a/src/pages/SignUpPage/types/DoubleCheckProps.ts b/src/pages/SignUpPage/types/DoubleCheckProps.ts
new file mode 100644
index 00000000..6f8391e8
--- /dev/null
+++ b/src/pages/SignUpPage/types/DoubleCheckProps.ts
@@ -0,0 +1,4 @@
+export interface DoubleCheckProps {
+  setError: () => void
+  trigger: () => void
+}

From 9496f2b2b4c7c7b43654cd9b8ab6df6053eae63a Mon Sep 17 00:00:00 2001
From: genTe <128919388+wdgWon@users.noreply.github.com>
Date: Wed, 13 Mar 2024 19:50:04 +0900
Subject: [PATCH 21/58] =?UTF-8?q?[Feat=20=E2=9C=8F=EF=B8=8F]=20=ED=9A=8C?=
 =?UTF-8?q?=EC=9B=90=EA=B0=80=EC=9E=85=20=ED=8E=98=EC=9D=B4=EC=A7=80=20UI?=
 =?UTF-8?q?=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/SignUpPage/SignUpPage.tsx           | 36 ++++++++++++++++++-
 .../SignUpForm/components/SignUpButton.tsx    | 16 +++++++++
 .../SignUpPage/components/SocialSignUp.tsx    | 36 +++++++++++++++++++
 3 files changed, 87 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/SignUpPage/components/SignUpForm/components/SignUpButton.tsx
 create mode 100644 src/pages/SignUpPage/components/SocialSignUp.tsx

diff --git a/src/pages/SignUpPage/SignUpPage.tsx b/src/pages/SignUpPage/SignUpPage.tsx
index 77b9705c..c840cb70 100644
--- a/src/pages/SignUpPage/SignUpPage.tsx
+++ b/src/pages/SignUpPage/SignUpPage.tsx
@@ -1,5 +1,39 @@
+import { Box, Center, Divider, Fade, Flex } from "@chakra-ui/react"
+
+import BackButton from "@components/BackButton/BackButton"
+import LogoLink from "@components/LogoLink/LogoLink"
+
+import LoginLink from "./components/LoginLink"
+import SignUpForm from "./components/SignUpForm/SignUpForm"
+import SocialSignUp from "./components/SocialSignUp"
+
 const SignUpPage = () => {
-  return <div>SignUpPage</div>
+  return (
+    <Fade in={true}>
+      <Center minHeight="100vh">
+        <Box
+          aria-label="signup container"
+          width="50rem"
+          py="5rem">
+          <Center position="relative">
+            <BackButton />
+            <LogoLink logoHeight="6rem" />
+          </Center>
+          <Flex
+            direction="column"
+            gap="1.6rem"
+            justifyContent="center"
+            alignItems="stretch"
+            padding="2rem">
+            <SignUpForm />
+            <Divider />
+            <SocialSignUp />
+            <LoginLink />
+          </Flex>
+        </Box>
+      </Center>
+    </Fade>
+  )
 }
 
 export default SignUpPage
diff --git a/src/pages/SignUpPage/components/SignUpForm/components/SignUpButton.tsx b/src/pages/SignUpPage/components/SignUpForm/components/SignUpButton.tsx
new file mode 100644
index 00000000..98d9b33c
--- /dev/null
+++ b/src/pages/SignUpPage/components/SignUpForm/components/SignUpButton.tsx
@@ -0,0 +1,16 @@
+import { Button } from "@chakra-ui/react"
+
+const SignUpButton = () => {
+  return (
+    <Button
+      type="submit"
+      p="3rem"
+      backgroundColor="blue.100"
+      color="white"
+      fontSize="2.4rem">
+      회원가입
+    </Button>
+  )
+}
+
+export default SignUpButton
diff --git a/src/pages/SignUpPage/components/SocialSignUp.tsx b/src/pages/SignUpPage/components/SocialSignUp.tsx
new file mode 100644
index 00000000..0e413f26
--- /dev/null
+++ b/src/pages/SignUpPage/components/SocialSignUp.tsx
@@ -0,0 +1,36 @@
+import { FaGithub } from "react-icons/fa"
+
+import { Box, Button, Heading, Icon } from "@chakra-ui/react"
+
+const SocialSignUp = () => {
+  return (
+    <>
+      <Box>
+        <Heading
+          as="h3"
+          fontFamily="SCDream_Bold"
+          fontSize="1.2rem">
+          소셜 계정으로 회원가입
+        </Heading>
+      </Box>
+      <Button
+        p="3rem"
+        fontSize="2.4rem"
+        fontWeight="medium"
+        color="white"
+        backgroundColor="#000"
+        borderRadius="full"
+        leftIcon={
+          <Icon
+            as={FaGithub}
+            width="3rem"
+            height="3rem"
+          />
+        }>
+        깃허브로 회원가입
+      </Button>
+    </>
+  )
+}
+
+export default SocialSignUp

From ee8b55ae98cc6e463bb26316d4a97b28fd33d1c6 Mon Sep 17 00:00:00 2001
From: hellosonic-r <hellommmh@gmail.com>
Date: Wed, 13 Mar 2024 23:41:50 +0900
Subject: [PATCH 22/58] =?UTF-8?q?[Feat=20=E2=9C=8F=EF=B8=8F]=20=ED=94=84?=
 =?UTF-8?q?=EB=A1=9C=ED=95=84=20=EC=A0=95=EB=B3=B4=20=EB=82=B4=20=ED=94=84?=
 =?UTF-8?q?=EB=A1=9C=EC=A0=9D=ED=8A=B8=20=EC=A1=B0=ED=9A=8C=20api=20?=
 =?UTF-8?q?=EC=83=9D=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/user/getUserProjects.ts | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)
 create mode 100644 src/api/user/getUserProjects.ts

diff --git a/src/api/user/getUserProjects.ts b/src/api/user/getUserProjects.ts
new file mode 100644
index 00000000..9737b07f
--- /dev/null
+++ b/src/api/user/getUserProjects.ts
@@ -0,0 +1,22 @@
+import { baseInstance } from "@api/axiosInstance"
+import { getUserProjectsPayload } from "api-models"
+
+import { ENDPOINTS } from "@constants/endPoints"
+
+interface PaginationQueryStringProps {
+  page: number
+  size: number
+}
+
+export const getUserProjects = async ({
+  userId,
+  type,
+  page,
+  size,
+}: getUserProjectsPayload & PaginationQueryStringProps) => {
+  const { data } = await baseInstance.get(
+    ENDPOINTS.GET_USER_PROJECTS(userId, type, page, size),
+  )
+
+  return data
+}

From 1890d322b963358a20e6c60410be276e92a3dbc5 Mon Sep 17 00:00:00 2001
From: hellosonic-r <hellommmh@gmail.com>
Date: Wed, 13 Mar 2024 23:42:22 +0900
Subject: [PATCH 23/58] =?UTF-8?q?[Feat=20=E2=9C=8F=EF=B8=8F]=20=ED=94=84?=
 =?UTF-8?q?=EB=A1=9C=ED=95=84=20=EC=A0=95=EB=B3=B4=20=EB=82=B4=20=ED=94=84?=
 =?UTF-8?q?=EB=A1=9C=EC=A0=9D=ED=8A=B8=20=EC=A1=B0=ED=9A=8C=20api=20?=
 =?UTF-8?q?=EC=83=9D=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/constants/endPoints.ts      | 7 +++++++
 src/types/domain/apiDomain.d.ts | 5 +++++
 2 files changed, 12 insertions(+)

diff --git a/src/constants/endPoints.ts b/src/constants/endPoints.ts
index b4440f2b..52cf015e 100644
--- a/src/constants/endPoints.ts
+++ b/src/constants/endPoints.ts
@@ -23,6 +23,13 @@ export const ENDPOINTS = {
   GET_PROJECT_DETAILS: (projectId: number) =>
     `${VARIABLE_URL}/projects/${projectId}`,
   GET_ALL_PROJECTS: `${VARIABLE_URL}/projects`,
+  GET_USER_PROJECTS: (
+    userId: number,
+    type: string,
+    page: number,
+    size: number,
+  ) =>
+    `${VARIABLE_URL}/users/${userId}/projects?type=${type}&page=${page}&size=${size}`,
   UPLOAD_LIKE: `${VARIABLE_URL}/likes`,
   POST_COMMENT: () => `${VARIABLE_URL}/comments`,
   DELETE_COMMENT: (commentId: number) =>
diff --git a/src/types/domain/apiDomain.d.ts b/src/types/domain/apiDomain.d.ts
index 4d27ddc3..1aeb4b2c 100644
--- a/src/types/domain/apiDomain.d.ts
+++ b/src/types/domain/apiDomain.d.ts
@@ -217,6 +217,11 @@ declare module "api-models" {
     nickname: string
   }
 
+  export type getUserProjectsPayload = {
+    userId: number
+    type: string
+  }
+
   /* 기술 스택 */
   export type getTechStacksPayload = {
     keyword?: string

From 8a275e5d6cacb9a19e2d79e618cd0381c46f75db Mon Sep 17 00:00:00 2001
From: hellosonic-r <hellommmh@gmail.com>
Date: Wed, 13 Mar 2024 23:45:58 +0900
Subject: [PATCH 24/58] =?UTF-8?q?[Refactor=20=E2=9A=99=EF=B8=8F]=20Paginat?=
 =?UTF-8?q?ion=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EC=97=90=EC=84=9C=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=B3=80=EA=B2=BD=20=EC=9D=B4?=
 =?UTF-8?q?=EB=B2=A4=ED=8A=B8=20=ED=95=B8=EB=93=A4=EB=9F=AC=20=EB=8F=99?=
 =?UTF-8?q?=EC=9E=91=EC=8B=9C=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD=20=EB=A1=9C=EC=A7=81=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Pagination/Pagination.tsx      | 14 ++++++++++----
 src/components/Pagination/stores/contexts.tsx |  2 +-
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx
index 00a4352e..88256c6b 100644
--- a/src/components/Pagination/Pagination.tsx
+++ b/src/components/Pagination/Pagination.tsx
@@ -5,14 +5,20 @@ import PageButtons from "./components/PageButtons/PageButtons"
 import PrevButton from "./components/PrevButton/PrevButton"
 import PaginationProvider from "./stores/contexts"
 
-const Pagination = () => {
+interface PaginationProps {
+  totalProjectsCount: number
+  setPage: React.Dispatch<React.SetStateAction<number>>
+}
+
+const Pagination = ({ totalProjectsCount, setPage }: PaginationProps) => {
   const handlePageChange = (page: number) => {
-    console.log(`${page}렌더`)
+    // console.log(`${page}렌더`)
+    setPage(page)
   }
   return (
     <PaginationProvider
-      limit={24}
-      total={400}
+      limit={12}
+      total={totalProjectsCount}
       onPageChange={handlePageChange}>
       <HStack>
         <PrevButton />
diff --git a/src/components/Pagination/stores/contexts.tsx b/src/components/Pagination/stores/contexts.tsx
index 2199452c..c7cbbbe8 100644
--- a/src/components/Pagination/stores/contexts.tsx
+++ b/src/components/Pagination/stores/contexts.tsx
@@ -19,7 +19,7 @@ const PaginationProvider = ({
   onPageChange,
   children,
 }: PaginationProviderProps) => {
-  const [currentPage, setCurrentPage] = useState(12)
+  const [currentPage, setCurrentPage] = useState(1)
   const totalPages = Math.ceil(total / limit)
 
   const handleSelectPage = (page: number) => {

From e6a357996afeb0d402463cfce5e96a44861988da Mon Sep 17 00:00:00 2001
From: hellosonic-r <hellommmh@gmail.com>
Date: Wed, 13 Mar 2024 23:48:03 +0900
Subject: [PATCH 25/58] =?UTF-8?q?[Refactor=20=E2=9A=99=EF=B8=8F]=20?=
 =?UTF-8?q?=EB=82=B4=20=ED=94=84=EB=A1=9C=EC=A0=9D=ED=8A=B8=20Pagination?=
 =?UTF-8?q?=20api=20=EC=97=B0=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Projects/Projects.view.tsx     | 76 +++++++++++++++++--
 1 file changed, 68 insertions(+), 8 deletions(-)

diff --git a/src/pages/ProfilePage/components/Projects/Projects.view.tsx b/src/pages/ProfilePage/components/Projects/Projects.view.tsx
index 51c9e95f..798e4a42 100644
--- a/src/pages/ProfilePage/components/Projects/Projects.view.tsx
+++ b/src/pages/ProfilePage/components/Projects/Projects.view.tsx
@@ -1,5 +1,9 @@
+import { useState } from "react"
+
 import {
   Box,
+  Grid,
+  GridItem,
   TabList,
   TabPanel,
   TabPanels,
@@ -7,14 +11,38 @@ import {
   useMediaQuery,
 } from "@chakra-ui/react"
 
+import Pagination from "@components/Pagination/Pagination"
+import ProjectCard from "@components/ProjectCard/ProjectCard"
+
 import StyledTab from "@pages/ProfilePage/styles/StyledTab"
 
-import ProjectsCommented from "./ProjectsCommented"
-import ProjectsLiked from "./ProjectsLiked"
-import ProjectsOwned from "./ProjectsOwned"
+import { useUserProjects } from "./Projects.model"
+
+interface ProjectProperties {
+  id: number
+  name: string
+  subName: string
+  isLiked: boolean
+  thumbnailUrl: string
+  viewCount: number
+  likeCount: number
+}
 
 const ProjectsView = () => {
   const [isLargerThan500] = useMediaQuery("(min-width: 500px)")
+  const [page, setPage] = useState(0)
+  console.log(page)
+
+  const { data } = useUserProjects({
+    userId: 1,
+    type: "JOINED",
+    page: page - 1,
+    size: 12,
+  })
+
+  const totalProjectsCount = data?.totalElements
+  const projects = data?.data
+
   return (
     <Box
       height="100%"
@@ -31,19 +59,51 @@ const ProjectsView = () => {
             },
           }}>
           <StyledTab>내 프로젝트</StyledTab>
-          <StyledTab>좋아요한 프로젝트</StyledTab>
-          <StyledTab>댓글단 프로젝트</StyledTab>
+          {/* <StyledTab>좋아요한 프로젝트</StyledTab>
+          <StyledTab>댓글단 프로젝트</StyledTab> */}
         </TabList>
         <TabPanels>
           <TabPanel>
-            <ProjectsOwned />
+            {/* <ProjectsOwned /> */}
+            <Grid
+              mt="0.5rem"
+              templateColumns="repeat(auto-fill, minmax(24rem, 1fr))"
+              gap={0}>
+              {projects &&
+                projects.map(
+                  ({
+                    id,
+                    name,
+                    subName,
+                    isLiked,
+                    thumbnailUrl,
+                    viewCount,
+                    likeCount,
+                  }: ProjectProperties) => (
+                    <GridItem key={id}>
+                      <ProjectCard
+                        imgUrl={thumbnailUrl}
+                        viewCount={viewCount}
+                        heartCount={likeCount}
+                        isFullHeart={isLiked}
+                        title={name}
+                        content={subName}
+                      />
+                    </GridItem>
+                  ),
+                )}
+            </Grid>
           </TabPanel>
-          <TabPanel>
+          {/* <TabPanel>
             <ProjectsLiked />
           </TabPanel>
           <TabPanel>
             <ProjectsCommented />
-          </TabPanel>
+          </TabPanel> */}
+          <Pagination
+            totalProjectsCount={totalProjectsCount}
+            setPage={setPage}
+          />
         </TabPanels>
       </Tabs>
     </Box>

From b6045d612d3e4c95b86722ca001b15aa49ecdd35 Mon Sep 17 00:00:00 2001
From: hellosonic-r <hellommmh@gmail.com>
Date: Thu, 14 Mar 2024 00:16:08 +0900
Subject: [PATCH 26/58] =?UTF-8?q?[Refactor=20=E2=9A=99=EF=B8=8F]=20?=
 =?UTF-8?q?=ED=83=AD=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EB=A1=9C=20?=
 =?UTF-8?q?=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Projects/Projects.view.tsx     | 89 ++++---------------
 .../components/Projects/ProjectsGrid.tsx      | 76 ++++++++++++++++
 2 files changed, 91 insertions(+), 74 deletions(-)
 create mode 100644 src/pages/ProfilePage/components/Projects/ProjectsGrid.tsx

diff --git a/src/pages/ProfilePage/components/Projects/Projects.view.tsx b/src/pages/ProfilePage/components/Projects/Projects.view.tsx
index 798e4a42..10de4c9c 100644
--- a/src/pages/ProfilePage/components/Projects/Projects.view.tsx
+++ b/src/pages/ProfilePage/components/Projects/Projects.view.tsx
@@ -1,9 +1,5 @@
-import { useState } from "react"
-
 import {
   Box,
-  Grid,
-  GridItem,
   TabList,
   TabPanel,
   TabPanels,
@@ -11,37 +7,15 @@ import {
   useMediaQuery,
 } from "@chakra-ui/react"
 
-import Pagination from "@components/Pagination/Pagination"
-import ProjectCard from "@components/ProjectCard/ProjectCard"
-
 import StyledTab from "@pages/ProfilePage/styles/StyledTab"
 
-import { useUserProjects } from "./Projects.model"
+import withUserId, { UserIdProps } from "../HOC/withUserId"
+import ProjectsGrid from "./ProjectsGrid"
 
-interface ProjectProperties {
-  id: number
-  name: string
-  subName: string
-  isLiked: boolean
-  thumbnailUrl: string
-  viewCount: number
-  likeCount: number
-}
-
-const ProjectsView = () => {
+const ProjectsView = ({ userId }: UserIdProps) => {
   const [isLargerThan500] = useMediaQuery("(min-width: 500px)")
-  const [page, setPage] = useState(0)
-  console.log(page)
-
-  const { data } = useUserProjects({
-    userId: 1,
-    type: "JOINED",
-    page: page - 1,
-    size: 12,
-  })
 
-  const totalProjectsCount = data?.totalElements
-  const projects = data?.data
+  const tabs = ["JOINED", "LIKED", "COMMENTED"]
 
   return (
     <Box
@@ -59,55 +33,22 @@ const ProjectsView = () => {
             },
           }}>
           <StyledTab>내 프로젝트</StyledTab>
-          {/* <StyledTab>좋아요한 프로젝트</StyledTab>
-          <StyledTab>댓글단 프로젝트</StyledTab> */}
+          <StyledTab>좋아요한 프로젝트</StyledTab>
+          <StyledTab>댓글단 프로젝트</StyledTab>
         </TabList>
         <TabPanels>
-          <TabPanel>
-            {/* <ProjectsOwned /> */}
-            <Grid
-              mt="0.5rem"
-              templateColumns="repeat(auto-fill, minmax(24rem, 1fr))"
-              gap={0}>
-              {projects &&
-                projects.map(
-                  ({
-                    id,
-                    name,
-                    subName,
-                    isLiked,
-                    thumbnailUrl,
-                    viewCount,
-                    likeCount,
-                  }: ProjectProperties) => (
-                    <GridItem key={id}>
-                      <ProjectCard
-                        imgUrl={thumbnailUrl}
-                        viewCount={viewCount}
-                        heartCount={likeCount}
-                        isFullHeart={isLiked}
-                        title={name}
-                        content={subName}
-                      />
-                    </GridItem>
-                  ),
-                )}
-            </Grid>
-          </TabPanel>
-          {/* <TabPanel>
-            <ProjectsLiked />
-          </TabPanel>
-          <TabPanel>
-            <ProjectsCommented />
-          </TabPanel> */}
-          <Pagination
-            totalProjectsCount={totalProjectsCount}
-            setPage={setPage}
-          />
+          {tabs.map((tab) => (
+            <TabPanel key={tab}>
+              <ProjectsGrid
+                userId={userId}
+                tab={tab}
+              />
+            </TabPanel>
+          ))}
         </TabPanels>
       </Tabs>
     </Box>
   )
 }
 
-export default ProjectsView
+export default withUserId(ProjectsView)
diff --git a/src/pages/ProfilePage/components/Projects/ProjectsGrid.tsx b/src/pages/ProfilePage/components/Projects/ProjectsGrid.tsx
new file mode 100644
index 00000000..1962e80f
--- /dev/null
+++ b/src/pages/ProfilePage/components/Projects/ProjectsGrid.tsx
@@ -0,0 +1,76 @@
+import { useState } from "react"
+
+import { Center, Grid, GridItem } from "@chakra-ui/react"
+
+import Pagination from "@components/Pagination/Pagination"
+import ProjectCard from "@components/ProjectCard/ProjectCard"
+
+import { useUserProjects } from "./Projects.model"
+
+interface ProjectProperties {
+  id: number
+  name: string
+  subName: string
+  isLiked: boolean
+  thumbnailUrl: string
+  viewCount: number
+  likeCount: number
+}
+
+interface ProjectsGridProps {
+  userId: string
+  tab: string
+}
+const ProjectsGrid = ({ userId, tab }: ProjectsGridProps) => {
+  const [page, setPage] = useState(0)
+  const { data } = useUserProjects({
+    userId: Number(userId),
+    type: tab,
+    page: page - 1,
+    size: 12,
+  })
+
+  const totalProjectsCount = data?.totalElements
+  const projects = data?.data
+
+  return (
+    <>
+      <Grid
+        mt="0.5rem"
+        templateColumns="repeat(auto-fill, minmax(24rem, 1fr))"
+        gap={0}>
+        {projects &&
+          projects.map(
+            ({
+              id,
+              name,
+              subName,
+              isLiked,
+              thumbnailUrl,
+              viewCount,
+              likeCount,
+            }: ProjectProperties) => (
+              <GridItem key={id}>
+                <ProjectCard
+                  imgUrl={thumbnailUrl}
+                  viewCount={viewCount}
+                  heartCount={likeCount}
+                  isFullHeart={isLiked}
+                  title={name}
+                  content={subName}
+                />
+              </GridItem>
+            ),
+          )}
+      </Grid>
+      <Center my="2rem">
+        <Pagination
+          totalProjectsCount={totalProjectsCount}
+          setPage={setPage}
+        />
+      </Center>
+    </>
+  )
+}
+
+export default ProjectsGrid

From df3028c2f25012a3b4b1111e6bc9101876a0b055 Mon Sep 17 00:00:00 2001
From: hellosonic-r <hellommmh@gmail.com>
Date: Thu, 14 Mar 2024 00:21:38 +0900
Subject: [PATCH 27/58] =?UTF-8?q?[Feat=20=E2=9C=8F=EF=B8=8F]=20=ED=94=84?=
 =?UTF-8?q?=EB=A1=9C=EC=A0=9D=ED=8A=B8=20=ED=8E=98=EC=9D=B4=EC=A7=80?=
 =?UTF-8?q?=EB=84=A4=EC=9D=B4=EC=85=98=20api=20=EC=BF=BC=EB=A6=AC=20?=
 =?UTF-8?q?=EC=83=9D=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Projects/Projects.model.ts     | 24 ++++++++++++-------
 1 file changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/pages/ProfilePage/components/Projects/Projects.model.ts b/src/pages/ProfilePage/components/Projects/Projects.model.ts
index 4ded384d..2c631f9f 100644
--- a/src/pages/ProfilePage/components/Projects/Projects.model.ts
+++ b/src/pages/ProfilePage/components/Projects/Projects.model.ts
@@ -1,15 +1,23 @@
+import { getUserProjects } from "@api/user/getUserProjects"
+
 import { useQuery } from "@tanstack/react-query"
 
-import { getAllProjects } from "@/api/project/getAllProjects"
+interface UserProjectsProps {
+  userId: number
+  type: string
+  page: number
+  size: number
+}
 
-export const useMyProjects = () => {}
-export const useLikedProjects = () => {
+export const useUserProjects = ({
+  userId,
+  type,
+  page,
+  size,
+}: UserProjectsProps) => {
   const { data } = useQuery({
-    queryKey: ["projects"],
-    queryFn: () => getAllProjects(),
-    gcTime: 0,
+    queryKey: ["projects", userId, type, page, size],
+    queryFn: () => getUserProjects({ userId, type, page, size }),
   })
-
   return { data }
 }
-export const useCommentedProjects = () => {}

From dd453696c17b1e21cac915daee6005dec99ec14b Mon Sep 17 00:00:00 2001
From: genTe <128919388+wdgWon@users.noreply.github.com>
Date: Thu, 14 Mar 2024 01:29:12 +0900
Subject: [PATCH 28/58] =?UTF-8?q?[Rename=20=F0=9F=8F=B7=EF=B8=8F]=20?=
 =?UTF-8?q?=ED=8F=B4=EB=8D=94=EB=AA=85=20=EC=8A=A4=ED=8E=A0=EB=A7=81=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

---
 .../{mutaitions => mutations}/useDoubleCheckEmailMutation.ts      | 0
 .../{mutaitions => mutations}/useDoubleCheckNicknameMutation.ts   | 0
 .../hooks/{mutaitions => mutations}/useSignUpMutation.ts          | 0
 3 files changed, 0 insertions(+), 0 deletions(-)
 rename src/pages/SignUpPage/hooks/{mutaitions => mutations}/useDoubleCheckEmailMutation.ts (100%)
 rename src/pages/SignUpPage/hooks/{mutaitions => mutations}/useDoubleCheckNicknameMutation.ts (100%)
 rename src/pages/SignUpPage/hooks/{mutaitions => mutations}/useSignUpMutation.ts (100%)

diff --git a/src/pages/SignUpPage/hooks/mutaitions/useDoubleCheckEmailMutation.ts b/src/pages/SignUpPage/hooks/mutations/useDoubleCheckEmailMutation.ts
similarity index 100%
rename from src/pages/SignUpPage/hooks/mutaitions/useDoubleCheckEmailMutation.ts
rename to src/pages/SignUpPage/hooks/mutations/useDoubleCheckEmailMutation.ts
diff --git a/src/pages/SignUpPage/hooks/mutaitions/useDoubleCheckNicknameMutation.ts b/src/pages/SignUpPage/hooks/mutations/useDoubleCheckNicknameMutation.ts
similarity index 100%
rename from src/pages/SignUpPage/hooks/mutaitions/useDoubleCheckNicknameMutation.ts
rename to src/pages/SignUpPage/hooks/mutations/useDoubleCheckNicknameMutation.ts
diff --git a/src/pages/SignUpPage/hooks/mutaitions/useSignUpMutation.ts b/src/pages/SignUpPage/hooks/mutations/useSignUpMutation.ts
similarity index 100%
rename from src/pages/SignUpPage/hooks/mutaitions/useSignUpMutation.ts
rename to src/pages/SignUpPage/hooks/mutations/useSignUpMutation.ts

From c2c7e2889d7ad49b2775f0eab19d43cc0a9b45ce Mon Sep 17 00:00:00 2001
From: genTe <128919388+wdgWon@users.noreply.github.com>
Date: Thu, 14 Mar 2024 01:30:06 +0900
Subject: [PATCH 29/58] =?UTF-8?q?[Feat=20=E2=9C=8F=EF=B8=8F]=20=ED=86=A0?=
 =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=EC=97=90=EB=9F=AC=20=EB=A9=94=EC=84=B8?=
 =?UTF-8?q?=EC=A7=80=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/SignUpPage/constants/toastMessages.ts | 5 +++++
 src/pages/SignUpPage/constants/toastOptions.ts  | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/pages/SignUpPage/constants/toastMessages.ts b/src/pages/SignUpPage/constants/toastMessages.ts
index 8276e3d1..b2fa4506 100644
--- a/src/pages/SignUpPage/constants/toastMessages.ts
+++ b/src/pages/SignUpPage/constants/toastMessages.ts
@@ -11,7 +11,12 @@ export const DOUBLE_CHECK_MESSAGE = {
 
 export const SUBMIT_MESSAGE = {
   ERROR: {
+    SERVER:
+      "현재 서비스에 문제가 발생했습니다. 잠시 후에 다시 시도해 주시기 바랍니다.",
+    INVALID: "잘못된 요청입니다.",
+    UNCAUGHT: "예기치 못한 에러가 발생했습니다. 잠시 후 다시 시도해 주세요.",
     EMAIL_CHECK: "이메일 중복 확인이 필요합니다.",
     NICKNAME_CHECK: "닉네임 중복 확인이 필요합니다.",
   },
+  SUCCESS: "축하드려요! 회원가입에 성공했습니다!",
 }
diff --git a/src/pages/SignUpPage/constants/toastOptions.ts b/src/pages/SignUpPage/constants/toastOptions.ts
index 2a47b616..13b5a7b9 100644
--- a/src/pages/SignUpPage/constants/toastOptions.ts
+++ b/src/pages/SignUpPage/constants/toastOptions.ts
@@ -1,6 +1,6 @@
 import { UseToastOptions } from "@chakra-ui/toast"
 
-export const errorToastOptions: UseToastOptions = {
+export const toastOptions: UseToastOptions = {
   position: "top-right",
   containerStyle: {
     maxWidth: "100%",

From 7e8cf63695f415942ef3c94c810f53f87334b157 Mon Sep 17 00:00:00 2001
From: genTe <128919388+wdgWon@users.noreply.github.com>
Date: Thu, 14 Mar 2024 01:30:40 +0900
Subject: [PATCH 30/58] =?UTF-8?q?[Refactoring=20=E2=9A=99=EF=B8=8F]=20?=
 =?UTF-8?q?=EC=97=90=EB=9F=AC=20=ED=86=A0=EC=8A=A4=ED=8A=B8=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80=20=EB=B0=8F=20=EB=A1=9C=EB=94=A9=20UX=20=EA=B0=9C?=
 =?UTF-8?q?=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/SignUpForm/SignUpForm.tsx      | 12 +++--
 .../components/DoubleCheckButton.tsx          |  4 +-
 .../SignUpForm/components/SignUpButton.tsx    |  8 ++--
 src/pages/SignUpPage/hooks/useSignUpForm.ts   | 45 ++++++++++++++++---
 4 files changed, 54 insertions(+), 15 deletions(-)

diff --git a/src/pages/SignUpPage/components/SignUpForm/SignUpForm.tsx b/src/pages/SignUpPage/components/SignUpForm/SignUpForm.tsx
index 64d3aba3..0417a632 100644
--- a/src/pages/SignUpPage/components/SignUpForm/SignUpForm.tsx
+++ b/src/pages/SignUpPage/components/SignUpForm/SignUpForm.tsx
@@ -17,8 +17,14 @@ import DoubleCheckButton from "./components/DoubleCheckButton"
 import SignUpButton from "./components/SignUpButton"
 
 const SignUpForm = () => {
-  const { method, emailCheck, nicknameCheck, onSubmit, handleDoubleCheck } =
-    useSignUpForm()
+  const {
+    method,
+    emailCheck,
+    nicknameCheck,
+    onSubmit,
+    handleDoubleCheck,
+    isLoading,
+  } = useSignUpForm()
 
   return (
     <FormProvider {...method}>
@@ -85,7 +91,7 @@ const SignUpForm = () => {
             registerOptions={confirmPasswordOptions}>
             <Input type="password" />
           </InputController>
-          <SignUpButton />
+          <SignUpButton isLoading={isLoading} />
         </Flex>
       </form>
     </FormProvider>
diff --git a/src/pages/SignUpPage/components/SignUpForm/components/DoubleCheckButton.tsx b/src/pages/SignUpPage/components/SignUpForm/components/DoubleCheckButton.tsx
index 48b02957..08175bcb 100644
--- a/src/pages/SignUpPage/components/SignUpForm/components/DoubleCheckButton.tsx
+++ b/src/pages/SignUpPage/components/SignUpForm/components/DoubleCheckButton.tsx
@@ -3,7 +3,7 @@ import { IoMdCheckmarkCircle } from "react-icons/io"
 
 import { Button, ButtonProps, Icon, Text, useToast } from "@chakra-ui/react"
 
-import { errorToastOptions } from "@pages/SignUpPage/constants/toastOptions"
+import { toastOptions } from "@pages/SignUpPage/constants/toastOptions"
 
 interface DoubleCheckButtonProps extends ButtonProps {
   isDuplicated?: boolean
@@ -17,7 +17,7 @@ const DoubleCheckButton = ({
   successMessage,
   ...props
 }: DoubleCheckButtonProps) => {
-  const toast = useToast(errorToastOptions)
+  const toast = useToast(toastOptions)
 
   useEffect(() => {
     if (isDuplicated === true) {
diff --git a/src/pages/SignUpPage/components/SignUpForm/components/SignUpButton.tsx b/src/pages/SignUpPage/components/SignUpForm/components/SignUpButton.tsx
index 98d9b33c..0917fac1 100644
--- a/src/pages/SignUpPage/components/SignUpForm/components/SignUpButton.tsx
+++ b/src/pages/SignUpPage/components/SignUpForm/components/SignUpButton.tsx
@@ -1,13 +1,15 @@
-import { Button } from "@chakra-ui/react"
+import { Button, ButtonProps } from "@chakra-ui/react"
 
-const SignUpButton = () => {
+const SignUpButton = (props: ButtonProps) => {
   return (
     <Button
       type="submit"
       p="3rem"
       backgroundColor="blue.100"
       color="white"
-      fontSize="2.4rem">
+      fontSize="2.4rem"
+      _hover={{}}
+      {...props}>
       회원가입
     </Button>
   )
diff --git a/src/pages/SignUpPage/hooks/useSignUpForm.ts b/src/pages/SignUpPage/hooks/useSignUpForm.ts
index 7051dbcc..2356935a 100644
--- a/src/pages/SignUpPage/hooks/useSignUpForm.ts
+++ b/src/pages/SignUpPage/hooks/useSignUpForm.ts
@@ -1,21 +1,22 @@
-import { useState } from "react"
+import { useEffect, useState } from "react"
 import { SubmitHandler, useForm } from "react-hook-form"
 
 import { useToast } from "@chakra-ui/toast"
+import { isAxiosError } from "axios"
 
 import {
   differentPasswordError,
   duplicatedErrors,
 } from "../constants/errorOptions"
 import { SUBMIT_MESSAGE } from "../constants/toastMessages"
-import { errorToastOptions } from "../constants/toastOptions"
+import { toastOptions } from "../constants/toastOptions"
 import { SignUpFormValues } from "../types/SignUpFormValues"
-import useDoubleCheckEmailMutation from "./mutaitions/useDoubleCheckEmailMutation"
-import useDoubleCheckNicknameMutation from "./mutaitions/useDoubleCheckNicknameMutation"
-import { useSignUpMutation } from "./mutaitions/useSignUpMutation"
+import useDoubleCheckEmailMutation from "./mutations/useDoubleCheckEmailMutation"
+import useDoubleCheckNicknameMutation from "./mutations/useDoubleCheckNicknameMutation"
+import { useSignUpMutation } from "./mutations/useSignUpMutation"
 
 export const useSignUpForm = () => {
-  const toast = useToast(errorToastOptions)
+  const toast = useToast(toastOptions)
 
   const [checkedEmail, setCheckedEmail] = useState("")
   const [checkedNickname, setCheckedNickname] = useState("")
@@ -86,5 +87,35 @@ export const useSignUpForm = () => {
     }
   }
 
-  return { method, emailCheck, nicknameCheck, onSubmit, handleDoubleCheck }
+  useEffect(() => {
+    if (isAxiosError(signUp.error)) {
+      let message = ""
+      switch (signUp.error.response?.status) {
+        case 500: {
+          message = SUBMIT_MESSAGE.ERROR.SERVER
+          break
+        }
+        case 404: {
+          message = SUBMIT_MESSAGE.ERROR.INVALID
+          break
+        }
+        default: {
+          message = SUBMIT_MESSAGE.ERROR.UNCAUGHT
+        }
+      }
+      toast({
+        status: "error",
+        title: message,
+      })
+    }
+  }, [signUp.error])
+
+  return {
+    method,
+    emailCheck,
+    nicknameCheck,
+    onSubmit,
+    handleDoubleCheck,
+    isLoading: signUp.isPending,
+  }
 }

From 9d2935fa6b8d875ef94f64c4494f37c5cd9b024e Mon Sep 17 00:00:00 2001
From: hellosonic-r <hellommmh@gmail.com>
Date: Thu, 14 Mar 2024 09:22:54 +0900
Subject: [PATCH 31/58] =?UTF-8?q?[Refactor=20=E2=9A=99=EF=B8=8F]=20api=20?=
 =?UTF-8?q?=EC=BF=BC=EB=A6=AC=EC=8A=A4=ED=8A=B8=EB=A7=81=20type=20?=
 =?UTF-8?q?=ED=83=80=EC=9E=85=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/ProfilePage/components/Projects/Projects.view.tsx | 3 ++-
 src/pages/ProfilePage/types/types.ts                        | 2 ++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/pages/ProfilePage/components/Projects/Projects.view.tsx b/src/pages/ProfilePage/components/Projects/Projects.view.tsx
index 10de4c9c..4a28d50d 100644
--- a/src/pages/ProfilePage/components/Projects/Projects.view.tsx
+++ b/src/pages/ProfilePage/components/Projects/Projects.view.tsx
@@ -8,6 +8,7 @@ import {
 } from "@chakra-ui/react"
 
 import StyledTab from "@pages/ProfilePage/styles/StyledTab"
+import { TabsType } from "@pages/ProfilePage/types/types"
 
 import withUserId, { UserIdProps } from "../HOC/withUserId"
 import ProjectsGrid from "./ProjectsGrid"
@@ -15,7 +16,7 @@ import ProjectsGrid from "./ProjectsGrid"
 const ProjectsView = ({ userId }: UserIdProps) => {
   const [isLargerThan500] = useMediaQuery("(min-width: 500px)")
 
-  const tabs = ["JOINED", "LIKED", "COMMENTED"]
+  const tabs: TabsType[] = ["JOINED", "LIKED", "COMMENTED"]
 
   return (
     <Box
diff --git a/src/pages/ProfilePage/types/types.ts b/src/pages/ProfilePage/types/types.ts
index 16477798..82f7b472 100644
--- a/src/pages/ProfilePage/types/types.ts
+++ b/src/pages/ProfilePage/types/types.ts
@@ -2,3 +2,5 @@ export interface ProfileActionsButtonsProps {
   handleNewProject: React.MouseEventHandler<HTMLButtonElement>
   handleEditProfile: React.MouseEventHandler<HTMLButtonElement>
 }
+
+export type TabsType = "JOINED" | "LIKED" | "COMMENTED"

From 34b9fb2fd71e746aae91663c6179fafe384370e6 Mon Sep 17 00:00:00 2001
From: hellosonic-r <hellommmh@gmail.com>
Date: Thu, 14 Mar 2024 09:30:49 +0900
Subject: [PATCH 32/58] =?UTF-8?q?[Refactor=20=E2=9A=99=EF=B8=8F]=20?=
 =?UTF-8?q?=ED=83=AD=20=EC=83=81=EC=88=98=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Projects/Projects.view.tsx       | 17 +++++++++--------
 .../components/Projects/ProjectsGrid.tsx        |  6 +++---
 src/pages/ProfilePage/constants/constants.ts    |  5 +++++
 src/pages/ProfilePage/types/types.ts            |  2 +-
 4 files changed, 18 insertions(+), 12 deletions(-)
 create mode 100644 src/pages/ProfilePage/constants/constants.ts

diff --git a/src/pages/ProfilePage/components/Projects/Projects.view.tsx b/src/pages/ProfilePage/components/Projects/Projects.view.tsx
index 4a28d50d..93297ead 100644
--- a/src/pages/ProfilePage/components/Projects/Projects.view.tsx
+++ b/src/pages/ProfilePage/components/Projects/Projects.view.tsx
@@ -7,8 +7,9 @@ import {
   useMediaQuery,
 } from "@chakra-ui/react"
 
+import { tabsType } from "@pages/ProfilePage/constants/constants"
 import StyledTab from "@pages/ProfilePage/styles/StyledTab"
-import { TabsType } from "@pages/ProfilePage/types/types"
+import { ProjectsType } from "@pages/ProfilePage/types/types"
 
 import withUserId, { UserIdProps } from "../HOC/withUserId"
 import ProjectsGrid from "./ProjectsGrid"
@@ -16,7 +17,7 @@ import ProjectsGrid from "./ProjectsGrid"
 const ProjectsView = ({ userId }: UserIdProps) => {
   const [isLargerThan500] = useMediaQuery("(min-width: 500px)")
 
-  const tabs: TabsType[] = ["JOINED", "LIKED", "COMMENTED"]
+  const projectsType: ProjectsType[] = ["JOINED", "LIKED", "COMMENTED"]
 
   return (
     <Box
@@ -33,16 +34,16 @@ const ProjectsView = ({ userId }: UserIdProps) => {
               _selected: { fontFamily: "SCDream_Bold", color: "#000000" },
             },
           }}>
-          <StyledTab>내 프로젝트</StyledTab>
-          <StyledTab>좋아요한 프로젝트</StyledTab>
-          <StyledTab>댓글단 프로젝트</StyledTab>
+          <StyledTab>{tabsType.JOINED}</StyledTab>
+          <StyledTab>{tabsType.LIKED}</StyledTab>
+          <StyledTab>{tabsType.COMMENTED}</StyledTab>
         </TabList>
         <TabPanels>
-          {tabs.map((tab) => (
-            <TabPanel key={tab}>
+          {projectsType.map((type) => (
+            <TabPanel key={type}>
               <ProjectsGrid
                 userId={userId}
-                tab={tab}
+                type={type}
               />
             </TabPanel>
           ))}
diff --git a/src/pages/ProfilePage/components/Projects/ProjectsGrid.tsx b/src/pages/ProfilePage/components/Projects/ProjectsGrid.tsx
index 1962e80f..a8893bbc 100644
--- a/src/pages/ProfilePage/components/Projects/ProjectsGrid.tsx
+++ b/src/pages/ProfilePage/components/Projects/ProjectsGrid.tsx
@@ -19,13 +19,13 @@ interface ProjectProperties {
 
 interface ProjectsGridProps {
   userId: string
-  tab: string
+  type: string
 }
-const ProjectsGrid = ({ userId, tab }: ProjectsGridProps) => {
+const ProjectsGrid = ({ userId, type }: ProjectsGridProps) => {
   const [page, setPage] = useState(0)
   const { data } = useUserProjects({
     userId: Number(userId),
-    type: tab,
+    type: type,
     page: page - 1,
     size: 12,
   })
diff --git a/src/pages/ProfilePage/constants/constants.ts b/src/pages/ProfilePage/constants/constants.ts
new file mode 100644
index 00000000..e85e6dd3
--- /dev/null
+++ b/src/pages/ProfilePage/constants/constants.ts
@@ -0,0 +1,5 @@
+export const tabsType = {
+  JOINED: "내 프로젝트",
+  LIKED: "좋아요한 프로젝트",
+  COMMENTED: "댓글단 프로젝트",
+}
diff --git a/src/pages/ProfilePage/types/types.ts b/src/pages/ProfilePage/types/types.ts
index 82f7b472..ee33592a 100644
--- a/src/pages/ProfilePage/types/types.ts
+++ b/src/pages/ProfilePage/types/types.ts
@@ -3,4 +3,4 @@ export interface ProfileActionsButtonsProps {
   handleEditProfile: React.MouseEventHandler<HTMLButtonElement>
 }
 
-export type TabsType = "JOINED" | "LIKED" | "COMMENTED"
+export type ProjectsType = "JOINED" | "LIKED" | "COMMENTED"

From 5633607c6d78a595a25f14e81b755e451cad07f3 Mon Sep 17 00:00:00 2001
From: genTe <128919388+wdgWon@users.noreply.github.com>
Date: Thu, 14 Mar 2024 09:49:13 +0900
Subject: [PATCH 33/58] =?UTF-8?q?[Feat=20=E2=9C=8F=EF=B8=8F]=20=EC=84=B1?=
 =?UTF-8?q?=EA=B3=B5=20=ED=86=A0=EC=8A=A4=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/pages/SignUpPage/constants/toastOptions.ts     |  2 +-
 .../hooks/mutations/useSignUpMutation.ts           | 14 +++++++++++++-
 src/pages/SignUpPage/hooks/useSignUpForm.ts        |  4 ++--
 3 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/pages/SignUpPage/constants/toastOptions.ts b/src/pages/SignUpPage/constants/toastOptions.ts
index 13b5a7b9..b99d22e7 100644
--- a/src/pages/SignUpPage/constants/toastOptions.ts
+++ b/src/pages/SignUpPage/constants/toastOptions.ts
@@ -1,7 +1,7 @@
 import { UseToastOptions } from "@chakra-ui/toast"
 
 export const toastOptions: UseToastOptions = {
-  position: "top-right",
+  position: "top",
   containerStyle: {
     maxWidth: "100%",
     fontSize: "1.2rem",
diff --git a/src/pages/SignUpPage/hooks/mutations/useSignUpMutation.ts b/src/pages/SignUpPage/hooks/mutations/useSignUpMutation.ts
index 2d196e7d..6769c77a 100644
--- a/src/pages/SignUpPage/hooks/mutations/useSignUpMutation.ts
+++ b/src/pages/SignUpPage/hooks/mutations/useSignUpMutation.ts
@@ -1,15 +1,27 @@
 import { useNavigate } from "react-router-dom"
 
+import { useToast } from "@chakra-ui/react"
 import { postEmailSignUpPayload } from "api-models"
 
 import { useMutation } from "@tanstack/react-query"
 
 import { postEmailSignUp } from "@apis/user/postEmailSignUp"
 
+import { SUBMIT_MESSAGE } from "@pages/SignUpPage/constants/toastMessages"
+import { toastOptions } from "@pages/SignUpPage/constants/toastOptions"
+
 export const useSignUpMutation = () => {
+  const toast = useToast(toastOptions)
   const navigate = useNavigate()
+
   return useMutation({
     mutationFn: (body: postEmailSignUpPayload) => postEmailSignUp(body),
-    onSuccess: () => navigate("/login", { replace: true }),
+    onSuccess: () => {
+      toast({
+        status: "success",
+        title: SUBMIT_MESSAGE.SUCCESS,
+      })
+      navigate("/login", { replace: true })
+    },
   })
 }
diff --git a/src/pages/SignUpPage/hooks/useSignUpForm.ts b/src/pages/SignUpPage/hooks/useSignUpForm.ts
index 2356935a..c8ff9ae5 100644
--- a/src/pages/SignUpPage/hooks/useSignUpForm.ts
+++ b/src/pages/SignUpPage/hooks/useSignUpForm.ts
@@ -27,7 +27,7 @@ export const useSignUpForm = () => {
       setCheckedEmail(() => "")
       method.setError("email", duplicatedErrors.email)
     },
-    trigger: () => method.trigger(),
+    trigger: () => method.trigger("email"),
   })
 
   const nicknameCheck = useDoubleCheckNicknameMutation({
@@ -35,7 +35,7 @@ export const useSignUpForm = () => {
       setCheckedNickname(() => "")
       method.setError("nickname", duplicatedErrors.nickname)
     },
-    trigger: () => method.trigger(),
+    trigger: () => method.trigger("nickname"),
   })
 
   const signUp = useSignUpMutation()

From d5260d52d0bb4eb3d021de0fdbb574a39eb376c2 Mon Sep 17 00:00:00 2001
From: Whoknow77 <gnsdh86166@gmail.com>
Date: Thu, 14 Mar 2024 10:44:59 +0900
Subject: [PATCH 34/58] =?UTF-8?q?[Design=20=F0=9F=8E=A8]=20=EB=8C=93?=
 =?UTF-8?q?=EA=B8=80=20=EB=B0=98=EC=9D=91=ED=98=95=20=EB=94=94=EC=9E=90?=
 =?UTF-8?q?=EC=9D=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ProjectDetailPage/ProjectDetailPage.tsx   |  5 +++--
 .../Comments/CommentsItem/CommentsItem.tsx    | 21 ++++---------------
 .../components/OnEditingButton.tsx            |  4 ++++
 .../Content/Explanation/ExplanationItem.tsx   |  1 +
 4 files changed, 12 insertions(+), 19 deletions(-)

diff --git a/src/pages/ProjectDetailPage/ProjectDetailPage.tsx b/src/pages/ProjectDetailPage/ProjectDetailPage.tsx
index 5f4a87a9..f2b3f7d9 100644
--- a/src/pages/ProjectDetailPage/ProjectDetailPage.tsx
+++ b/src/pages/ProjectDetailPage/ProjectDetailPage.tsx
@@ -1,4 +1,4 @@
-import { Box, Center, Flex } from "@chakra-ui/react"
+import { Box, Center, Flex, useMediaQuery } from "@chakra-ui/react"
 
 import Comments from "./components/Comments/Comments"
 import { withProjectId } from "./components/Comments/Hoc/withProjectId"
@@ -9,6 +9,7 @@ import { useProjectDetailQuery } from "./hooks/queries/useProjectDetailQuery"
 
 const ProjectDetailPage = ({ projectId }: ProjectIdProps) => {
   const { projectDetailInfo } = useProjectDetailQuery(Number(projectId))
+  const [isLargerThan768] = useMediaQuery(["(min-width: 768px)"])
 
   if (!projectDetailInfo) {
     return <Center>Loading...</Center>
@@ -21,7 +22,7 @@ const ProjectDetailPage = ({ projectId }: ProjectIdProps) => {
         maxW="128rem"
         w="100%"
         margin="0 auto"
-        p="5rem"
+        p={isLargerThan768 ? "5rem" : "1.5rem"}
         gap="10rem"
         direction="column">
         <Content projectDetailInfo={projectDetailInfo} />
diff --git a/src/pages/ProjectDetailPage/components/Comments/CommentsItem/CommentsItem.tsx b/src/pages/ProjectDetailPage/components/Comments/CommentsItem/CommentsItem.tsx
index b2b6725b..ca5e9575 100644
--- a/src/pages/ProjectDetailPage/components/Comments/CommentsItem/CommentsItem.tsx
+++ b/src/pages/ProjectDetailPage/components/Comments/CommentsItem/CommentsItem.tsx
@@ -2,18 +2,10 @@
 import { UseFormRegisterReturn } from "react-hook-form"
 import { useNavigate } from "react-router-dom"
 
-import {
-  Box,
-  Button,
-  HStack,
-  Stack,
-  Text,
-  useMediaQuery,
-} from "@chakra-ui/react"
+import { Box, Button, HStack, Stack, useMediaQuery } from "@chakra-ui/react"
 import { Comment } from "api-models"
 
 import { useCommentContext } from "@pages/ProjectDetailPage/store/CommentContext"
-import dateToTimeago from "@pages/ProjectDetailPage/utils/datetoTimeago"
 
 import CommentsForm from "../CommentsForm/CommentsForm"
 import CommentTitle from "./components/CommentTitle"
@@ -43,7 +35,7 @@ const CommentsItem = ({ comment, register }: CommentsItemProps) => {
       gap="3rem">
       <HStack
         w="100%"
-        gap="2rem"
+        gap={isLargerThan768 ? "2rem" : "1.3rem"}
         align="flex-start">
         <CommentsAvatar
           onClick={() => {
@@ -62,13 +54,6 @@ const CommentsItem = ({ comment, register }: CommentsItemProps) => {
               gap="1rem"
               align="flex-start">
               <CommentTitle comment={comment} />
-              {!isLargerThan768 && (
-                <Text
-                  color="grey.500"
-                  fontSize="md">
-                  {dateToTimeago(comment.createdAt)}
-                </Text>
-              )}
               <CommentsEditFormText
                 {...{
                   comment,
@@ -86,6 +71,7 @@ const CommentsItem = ({ comment, register }: CommentsItemProps) => {
                       <Button
                         p="0"
                         _hover={{ opacity: "0.5" }}
+                        fontSize={isLargerThan768 ? "md" : "sm"}
                         onClick={handleOffReply}>
                         취소
                       </Button>
@@ -93,6 +79,7 @@ const CommentsItem = ({ comment, register }: CommentsItemProps) => {
                   )
                 ) : (
                   <Button
+                    size={isLargerThan768 ? "md" : "sm"}
                     onClick={() => handleOnReply(comment.id)}
                     p="0">
                     답글달기
diff --git a/src/pages/ProjectDetailPage/components/Comments/CommentsItem/components/OnEditingButton.tsx b/src/pages/ProjectDetailPage/components/Comments/CommentsItem/components/OnEditingButton.tsx
index cbae3e28..30b96c74 100644
--- a/src/pages/ProjectDetailPage/components/Comments/CommentsItem/components/OnEditingButton.tsx
+++ b/src/pages/ProjectDetailPage/components/Comments/CommentsItem/components/OnEditingButton.tsx
@@ -7,6 +7,10 @@ import { useCommentContext } from "@pages/ProjectDetailPage/store/CommentContext
 
 const OnEditingButton = () => {
   const { handleOffEdit, handleSubmit, onSubmitEdit } = useCommentContext()
+  if (!handleSubmit) {
+    return
+  }
+
   return (
     <>
       <IconButton
diff --git a/src/pages/ProjectDetailPage/components/Content/Explanation/ExplanationItem.tsx b/src/pages/ProjectDetailPage/components/Content/Explanation/ExplanationItem.tsx
index 91caa66b..8f2435b4 100644
--- a/src/pages/ProjectDetailPage/components/Content/Explanation/ExplanationItem.tsx
+++ b/src/pages/ProjectDetailPage/components/Content/Explanation/ExplanationItem.tsx
@@ -6,6 +6,7 @@ const ViewStyleParams = {
   padding: "2rem",
   lineHeight: "1.5",
   fontFamily: "SCDream_Regular",
+  fontSize: "1rem",
 }
 
 interface ExplanationItemProps {

From e5adfd5af76c536336c238321908954ce759efe9 Mon Sep 17 00:00:00 2001
From: Whoknow77 <gnsdh86166@gmail.com>
Date: Thu, 14 Mar 2024 10:48:45 +0900
Subject: [PATCH 35/58] =?UTF-8?q?[Design=20=F0=9F=8E=A8]=20=EB=8C=93?=
 =?UTF-8?q?=EA=B8=80=20=EB=B2=84=ED=8A=BC=20=EB=94=94=EC=9E=90=EC=9D=B8=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

---
 .../CommentsItem/components/BeforeEditingButton.tsx       | 7 ++++---
 .../Comments/CommentsItem/components/CommentTitle.tsx     | 2 +-
 .../Comments/CommentsItem/components/OnEditingButton.tsx  | 8 +++++---
 3 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/pages/ProjectDetailPage/components/Comments/CommentsItem/components/BeforeEditingButton.tsx b/src/pages/ProjectDetailPage/components/Comments/CommentsItem/components/BeforeEditingButton.tsx
index c49cb8a8..819a15c9 100644
--- a/src/pages/ProjectDetailPage/components/Comments/CommentsItem/components/BeforeEditingButton.tsx
+++ b/src/pages/ProjectDetailPage/components/Comments/CommentsItem/components/BeforeEditingButton.tsx
@@ -1,7 +1,7 @@
 import { MdDelete } from "react-icons/md"
 import { TiPencil } from "react-icons/ti"
 
-import { IconButton } from "@chakra-ui/react"
+import { IconButton, useMediaQuery } from "@chakra-ui/react"
 import { Comment } from "api-models"
 
 import { useCommentContext } from "@pages/ProjectDetailPage/store/CommentContext"
@@ -12,6 +12,7 @@ interface BeforeEditingButtonProps {
 
 const BeforeEditingButton = ({ comment }: BeforeEditingButtonProps) => {
   const { handleOnEdit, handleDelete } = useCommentContext()
+  const [isLargerThan768] = useMediaQuery(["(min-width: 768px)"])
 
   return (
     <>
@@ -25,13 +26,13 @@ const BeforeEditingButton = ({ comment }: BeforeEditingButtonProps) => {
             content: comment.content,
           })
         }}
-        fontSize="2xl"
+        fontSize={isLargerThan768 ? "2xl" : "lg"}
       />
       <IconButton
         aria-label="delete"
         icon={<MdDelete />}
         onClick={() => handleDelete(comment.id)}
-        fontSize="2xl"
+        fontSize={isLargerThan768 ? "2xl" : "lg"}
       />
     </>
   )
diff --git a/src/pages/ProjectDetailPage/components/Comments/CommentsItem/components/CommentTitle.tsx b/src/pages/ProjectDetailPage/components/Comments/CommentsItem/components/CommentTitle.tsx
index 510ec04d..2f2da197 100644
--- a/src/pages/ProjectDetailPage/components/Comments/CommentsItem/components/CommentTitle.tsx
+++ b/src/pages/ProjectDetailPage/components/Comments/CommentsItem/components/CommentTitle.tsx
@@ -36,7 +36,7 @@ const CommentTitle = ({ comment }: CommentTitleProps) => {
           </Text>
         )}
       </HStack>
-      <HStack gap="1rem">
+      <HStack gap={isLargerThan768 ? "0.5rem" : "0"}>
         {comment.isOwner ? (
           editTargetCommentId === comment.id && isEditing ? (
             <OnEditingButton />
diff --git a/src/pages/ProjectDetailPage/components/Comments/CommentsItem/components/OnEditingButton.tsx b/src/pages/ProjectDetailPage/components/Comments/CommentsItem/components/OnEditingButton.tsx
index 30b96c74..c765eab1 100644
--- a/src/pages/ProjectDetailPage/components/Comments/CommentsItem/components/OnEditingButton.tsx
+++ b/src/pages/ProjectDetailPage/components/Comments/CommentsItem/components/OnEditingButton.tsx
@@ -1,12 +1,14 @@
 import { FaRegCheckCircle } from "react-icons/fa"
 import { MdCancel } from "react-icons/md"
 
-import { IconButton } from "@chakra-ui/react"
+import { IconButton, useMediaQuery } from "@chakra-ui/react"
 
 import { useCommentContext } from "@pages/ProjectDetailPage/store/CommentContext"
 
 const OnEditingButton = () => {
   const { handleOffEdit, handleSubmit, onSubmitEdit } = useCommentContext()
+  const [isLargerThan768] = useMediaQuery(["(min-width: 768px)"])
+
   if (!handleSubmit) {
     return
   }
@@ -18,13 +20,13 @@ const OnEditingButton = () => {
         aria-label="submit"
         icon={<FaRegCheckCircle />}
         onClick={handleSubmit(onSubmitEdit)}
-        fontSize="2xl"
+        fontSize={isLargerThan768 ? "2xl" : "lg"}
       />
       <IconButton
         aria-label="cancel"
         icon={<MdCancel />}
         onClick={handleOffEdit}
-        fontSize="2xl"
+        fontSize={isLargerThan768 ? "2xl" : "lg"}
       />
     </>
   )

From 9dcd5535bdd85fa1b594a9f3042a569d56d2f47a Mon Sep 17 00:00:00 2001
From: hellosonic-r <hellommmh@gmail.com>
Date: Thu, 14 Mar 2024 12:50:00 +0900
Subject: [PATCH 36/58] =?UTF-8?q?[Refactor=20=E2=9A=99=EF=B8=8F]=20getUser?=
 =?UTF-8?q?Projects=20api=20TODO=20=EC=9E=91=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/user/getUserProjects.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/api/user/getUserProjects.ts b/src/api/user/getUserProjects.ts
index 9737b07f..634e5303 100644
--- a/src/api/user/getUserProjects.ts
+++ b/src/api/user/getUserProjects.ts
@@ -14,9 +14,9 @@ export const getUserProjects = async ({
   page,
   size,
 }: getUserProjectsPayload & PaginationQueryStringProps) => {
+  // TODO: type이 LIKED, COMMENT일 경우 분기처리(authInstance 사용)
   const { data } = await baseInstance.get(
     ENDPOINTS.GET_USER_PROJECTS(userId, type, page, size),
   )
-
   return data
 }

From 55be91adb3a5f8e76ee1a13ef18236c913518fed Mon Sep 17 00:00:00 2001
From: hellosonic-r <hellommmh@gmail.com>
Date: Thu, 14 Mar 2024 12:51:50 +0900
Subject: [PATCH 37/58] =?UTF-8?q?[Refactor=20=E2=9A=99=EF=B8=8F]=20HOC?=
 =?UTF-8?q?=EC=97=90=20params=EC=9D=98=20id=EA=B0=80=20=EB=B3=B8=EC=9D=B8?=
 =?UTF-8?q?=EC=9D=B8=EC=A7=80=20=EC=95=84=EB=8B=8C=EC=A7=80=20=EC=B2=B4?=
 =?UTF-8?q?=ED=81=AC=ED=95=98=EB=8A=94=20=EB=A1=9C=EC=A7=81=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/ProfilePage/components/HOC/withUserId.tsx | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/pages/ProfilePage/components/HOC/withUserId.tsx b/src/pages/ProfilePage/components/HOC/withUserId.tsx
index 500b27e1..a01f2f0c 100644
--- a/src/pages/ProfilePage/components/HOC/withUserId.tsx
+++ b/src/pages/ProfilePage/components/HOC/withUserId.tsx
@@ -1,22 +1,29 @@
 import { ComponentType } from "react"
 import { useParams } from "react-router-dom"
 
+import { useUserInfoData } from "@services/caches/useUserInfoData"
+
 export interface UserIdProps {
   userId: string
+  isMe: boolean
 }
 const withUserId = <P extends UserIdProps>(
   WrappedComponent: ComponentType<P>,
 ) => {
   const ComponentWithUserId = (props: Omit<P, keyof UserIdProps>) => {
     const { userId } = useParams()
+    const data = useUserInfoData()
+    const isMe = Number(userId) === data?.id
 
     if (!userId) {
       return null
     }
+
     return (
       <WrappedComponent
         {...(props as P)}
         userId={userId}
+        isMe={isMe}
       />
     )
   }

From 15b9bbc2df29223980b61a127576954627cd08b8 Mon Sep 17 00:00:00 2001
From: genTe <128919388+wdgWon@users.noreply.github.com>
Date: Thu, 14 Mar 2024 12:51:51 +0900
Subject: [PATCH 38/58] =?UTF-8?q?[Chore=20=F0=9F=9A=80]=20=EB=B9=8C?=
 =?UTF-8?q?=EB=93=9C=20=EC=8B=A4=ED=8C=A8=ED=95=9C=20=EA=B2=BD=EB=A1=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/services/caches/useUserInfoData.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/services/caches/useUserInfoData.ts b/src/services/caches/useUserInfoData.ts
index 6114d475..25df4eae 100644
--- a/src/services/caches/useUserInfoData.ts
+++ b/src/services/caches/useUserInfoData.ts
@@ -1,7 +1,7 @@
-import { postEmailAuth } from "@api/auth/postEmailAuth"
-
 import { useQuery } from "@tanstack/react-query"
 
+import { postEmailAuth } from "@apis/auth/postEmailAuth"
+
 import { QUERYKEY } from "@constants/queryKey"
 
 export const useUserInfoData = () => {

From cb490d914fe0d1ae6cead3ae368e720d3aea7c5e Mon Sep 17 00:00:00 2001
From: hellosonic-r <hellommmh@gmail.com>
Date: Thu, 14 Mar 2024 12:52:40 +0900
Subject: [PATCH 39/58] =?UTF-8?q?[Refactor=20=E2=9A=99=EF=B8=8F]=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=EB=84=A4=EC=9D=B4=EC=85=98=20?=
 =?UTF-8?q?=EC=B4=88=EA=B8=B0=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/ProfilePage/components/Projects/ProjectsGrid.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/ProfilePage/components/Projects/ProjectsGrid.tsx b/src/pages/ProfilePage/components/Projects/ProjectsGrid.tsx
index a8893bbc..ef6038b0 100644
--- a/src/pages/ProfilePage/components/Projects/ProjectsGrid.tsx
+++ b/src/pages/ProfilePage/components/Projects/ProjectsGrid.tsx
@@ -22,7 +22,7 @@ interface ProjectsGridProps {
   type: string
 }
 const ProjectsGrid = ({ userId, type }: ProjectsGridProps) => {
-  const [page, setPage] = useState(0)
+  const [page, setPage] = useState(1)
   const { data } = useUserProjects({
     userId: Number(userId),
     type: type,

From 14c986ae5b2755978b8956d33ccf6deb1116ca8f Mon Sep 17 00:00:00 2001
From: hellosonic-r <hellommmh@gmail.com>
Date: Thu, 14 Mar 2024 12:52:52 +0900
Subject: [PATCH 40/58] =?UTF-8?q?[Refactor=20=E2=9A=99=EF=B8=8F]=20?=
 =?UTF-8?q?=EB=B6=88=ED=95=84=EC=9A=94=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Projects/ProjectsLiked.tsx     | 46 -------------------
 1 file changed, 46 deletions(-)
 delete mode 100644 src/pages/ProfilePage/components/Projects/ProjectsLiked.tsx

diff --git a/src/pages/ProfilePage/components/Projects/ProjectsLiked.tsx b/src/pages/ProfilePage/components/Projects/ProjectsLiked.tsx
deleted file mode 100644
index a5e43976..00000000
--- a/src/pages/ProfilePage/components/Projects/ProjectsLiked.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { Grid, GridItem } from "@chakra-ui/react"
-
-import ProjectCard from "@components/ProjectCard/ProjectCard"
-
-import { useLikedProjects } from "./Projects.model"
-
-const ProjectsLiked = () => {
-  const { data } = useLikedProjects()
-
-  const { projects } = data || {}
-
-  return (
-    <Grid
-      mt="0.5rem"
-      templateColumns="repeat(auto-fill, minmax(24rem, 1fr))"
-      gap={0}>
-      {projects &&
-        projects
-          .filter((project) => project.isLiked === true)
-          .map(
-            ({
-              id,
-              thumbnailUrl,
-              viewCount,
-              likeCount,
-              isLiked,
-              name,
-              subName,
-            }) => (
-              <GridItem key={id}>
-                <ProjectCard
-                  imgUrl={thumbnailUrl}
-                  viewCount={viewCount}
-                  heartCount={likeCount}
-                  isFullHeart={isLiked}
-                  title={name}
-                  content={subName}
-                />
-              </GridItem>
-            ),
-          )}
-    </Grid>
-  )
-}
-
-export default ProjectsLiked

From 77e1b4372b6086152affad27eca347eeec4e07bb Mon Sep 17 00:00:00 2001
From: hellosonic-r <hellommmh@gmail.com>
Date: Thu, 14 Mar 2024 12:55:39 +0900
Subject: [PATCH 41/58] =?UTF-8?q?[Refactor=20=E2=9A=99=EF=B8=8F]=20?=
 =?UTF-8?q?=EB=B3=B8=EC=9D=B8=20=ED=94=84=EB=A1=9C=ED=95=84=20=EC=97=AC?=
 =?UTF-8?q?=EB=B6=80=EC=97=90=20=EB=94=B0=EB=9D=BC=20=EB=B3=B4=EC=97=AC?=
 =?UTF-8?q?=EC=A7=80=EB=8A=94=20=ED=83=AD=20=EC=A1=B0=EA=B1=B4=EB=B6=80=20?=
 =?UTF-8?q?=EB=A0=8C=EB=8D=94=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Projects/Projects.view.tsx           | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/pages/ProfilePage/components/Projects/Projects.view.tsx b/src/pages/ProfilePage/components/Projects/Projects.view.tsx
index 93297ead..aa70a7f3 100644
--- a/src/pages/ProfilePage/components/Projects/Projects.view.tsx
+++ b/src/pages/ProfilePage/components/Projects/Projects.view.tsx
@@ -9,15 +9,14 @@ import {
 
 import { tabsType } from "@pages/ProfilePage/constants/constants"
 import StyledTab from "@pages/ProfilePage/styles/StyledTab"
-import { ProjectsType } from "@pages/ProfilePage/types/types"
 
 import withUserId, { UserIdProps } from "../HOC/withUserId"
 import ProjectsGrid from "./ProjectsGrid"
 
-const ProjectsView = ({ userId }: UserIdProps) => {
+const ProjectsView = ({ userId, isMe }: UserIdProps) => {
   const [isLargerThan500] = useMediaQuery("(min-width: 500px)")
 
-  const projectsType: ProjectsType[] = ["JOINED", "LIKED", "COMMENTED"]
+  const projectsType = isMe ? ["JOINED", "LIKED", "COMMENTED"] : ["JOINED"]
 
   return (
     <Box
@@ -35,8 +34,12 @@ const ProjectsView = ({ userId }: UserIdProps) => {
             },
           }}>
           <StyledTab>{tabsType.JOINED}</StyledTab>
-          <StyledTab>{tabsType.LIKED}</StyledTab>
-          <StyledTab>{tabsType.COMMENTED}</StyledTab>
+          {isMe && (
+            <>
+              <StyledTab>{tabsType.LIKED}</StyledTab>
+              <StyledTab>{tabsType.COMMENTED}</StyledTab>
+            </>
+          )}
         </TabList>
         <TabPanels>
           {projectsType.map((type) => (

From f05c456dca4aa8a607b0f108dadf20a03eded051 Mon Sep 17 00:00:00 2001
From: hellosonic-r <hellommmh@gmail.com>
Date: Thu, 14 Mar 2024 12:55:55 +0900
Subject: [PATCH 42/58] =?UTF-8?q?[Refactor=20=E2=9A=99=EF=B8=8F]=20?=
 =?UTF-8?q?=EB=B3=B8=EC=9D=B8=20=ED=94=84=EB=A1=9C=ED=95=84=20=EC=97=AC?=
 =?UTF-8?q?=EB=B6=80=EC=97=90=20=EB=94=B0=EB=9D=BC=20=EB=B3=B4=EC=97=AC?=
 =?UTF-8?q?=EC=A7=80=EB=8A=94=20=EB=B2=84=ED=8A=BC=20=EC=A1=B0=EA=B1=B4?=
 =?UTF-8?q?=EB=B6=80=20=EB=A0=8C=EB=8D=94=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ProfilePage/components/Profile/ProfileCard.tsx     | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/pages/ProfilePage/components/Profile/ProfileCard.tsx b/src/pages/ProfilePage/components/Profile/ProfileCard.tsx
index 96aee331..1e529593 100644
--- a/src/pages/ProfilePage/components/Profile/ProfileCard.tsx
+++ b/src/pages/ProfilePage/components/Profile/ProfileCard.tsx
@@ -2,9 +2,10 @@ import { Avatar, Text, VStack } from "@chakra-ui/react"
 
 import { ProfileActionsButtonsProps } from "@pages/ProfilePage/types/types"
 
+import withUserId, { UserIdProps } from "../HOC/withUserId"
 import ProfileActionsButtons from "./ProfileActionsButtons"
 
-interface ProfileCardProps extends ProfileActionsButtonsProps {
+interface ProfileCardProps extends ProfileActionsButtonsProps, UserIdProps {
   profileImageUrl?: string
   nickname?: string
   career?: string | null
@@ -16,6 +17,7 @@ const ProfileCard = ({
   career,
   handleNewProject,
   handleEditProfile,
+  isMe,
 }: ProfileCardProps) => {
   return (
     <VStack>
@@ -36,9 +38,11 @@ const ProfileCard = ({
           {career} 개발자
         </Text>
       )}
-      <ProfileActionsButtons {...{ handleNewProject, handleEditProfile }} />
+      {isMe && (
+        <ProfileActionsButtons {...{ handleNewProject, handleEditProfile }} />
+      )}
     </VStack>
   )
 }
 
-export default ProfileCard
+export default withUserId(ProfileCard)

From 5b91b51165807028cee12755baa821268315965d Mon Sep 17 00:00:00 2001
From: hellosonic-r <hellommmh@gmail.com>
Date: Thu, 14 Mar 2024 12:57:06 +0900
Subject: [PATCH 43/58] =?UTF-8?q?[Refactor=20=E2=9A=99=EF=B8=8F]=20?=
 =?UTF-8?q?=EB=B6=88=ED=95=84=EC=9A=94=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Projects/ProjectsOwned.tsx     | 26 -------------------
 1 file changed, 26 deletions(-)
 delete mode 100644 src/pages/ProfilePage/components/Projects/ProjectsOwned.tsx

diff --git a/src/pages/ProfilePage/components/Projects/ProjectsOwned.tsx b/src/pages/ProfilePage/components/Projects/ProjectsOwned.tsx
deleted file mode 100644
index df1a86d4..00000000
--- a/src/pages/ProfilePage/components/Projects/ProjectsOwned.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { Grid, GridItem } from "@chakra-ui/react"
-
-import ProjectCard from "@components/ProjectCard/ProjectCard"
-
-const ProjectsOwned = () => {
-  return (
-    <Grid
-      mt="0.5rem"
-      templateColumns="repeat(auto-fill, minmax(24rem, 1fr))"
-      gap={0}>
-      {Array.from({ length: 30 }, (_, idx) => idx + 1).map((idx) => (
-        <GridItem key={idx}>
-          <ProjectCard
-            imgUrl="https://picsum.photos/200"
-            viewCount={idx}
-            heartCount={idx}
-            isFullHeart={true}
-            title="테스트입니다"
-            content="테스트입니다"
-          />
-        </GridItem>
-      ))}
-    </Grid>
-  )
-}
-export default ProjectsOwned

From bb737ed2e7198f4ee14c4abf28d3597aa06fb2a3 Mon Sep 17 00:00:00 2001
From: hellosonic-r <hellommmh@gmail.com>
Date: Thu, 14 Mar 2024 12:57:29 +0900
Subject: [PATCH 44/58] =?UTF-8?q?[Refactor=20=E2=9A=99=EF=B8=8F]=20?=
 =?UTF-8?q?=EB=B6=88=ED=95=84=EC=9A=94=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ProfilePage/components/Projects/ProjectsCommented.tsx    | 5 -----
 1 file changed, 5 deletions(-)
 delete mode 100644 src/pages/ProfilePage/components/Projects/ProjectsCommented.tsx

diff --git a/src/pages/ProfilePage/components/Projects/ProjectsCommented.tsx b/src/pages/ProfilePage/components/Projects/ProjectsCommented.tsx
deleted file mode 100644
index b47b545e..00000000
--- a/src/pages/ProfilePage/components/Projects/ProjectsCommented.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-const ProjectsCommented = () => {
-  return <div>내가 댓글단 프로젝트들</div>
-}
-
-export default ProjectsCommented

From 88d6609407e7b2675ab66831a413acb5aae6f00a Mon Sep 17 00:00:00 2001
From: hellosonic-r <hellommmh@gmail.com>
Date: Thu, 14 Mar 2024 12:58:33 +0900
Subject: [PATCH 45/58] =?UTF-8?q?[Refactor=20=E2=9A=99=EF=B8=8F]=20theme?=
 =?UTF-8?q?=20=ED=8F=B0=ED=8A=B8=20=EC=BB=AC=EB=9F=AC=20=EC=82=AC=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/ProfilePage/components/Projects/Projects.view.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/ProfilePage/components/Projects/Projects.view.tsx b/src/pages/ProfilePage/components/Projects/Projects.view.tsx
index aa70a7f3..1e6fedbe 100644
--- a/src/pages/ProfilePage/components/Projects/Projects.view.tsx
+++ b/src/pages/ProfilePage/components/Projects/Projects.view.tsx
@@ -30,7 +30,7 @@ const ProjectsView = ({ userId, isMe }: UserIdProps) => {
           h="6rem"
           sx={{
             "& > *": {
-              _selected: { fontFamily: "SCDream_Bold", color: "#000000" },
+              _selected: { fontFamily: "SCDream_Bold", color: "black.100" },
             },
           }}>
           <StyledTab>{tabsType.JOINED}</StyledTab>

From dac468b13cbe91381d8c7598045c4386c4a2a943 Mon Sep 17 00:00:00 2001
From: hellosonic-r <hellommmh@gmail.com>
Date: Thu, 14 Mar 2024 13:03:25 +0900
Subject: [PATCH 46/58] =?UTF-8?q?[Refactor=20=E2=9A=99=EF=B8=8F]=20Profile?=
 =?UTF-8?q?Card=20minH=20=EB=8C=80=EC=8B=A0=20margin=EC=9C=BC=EB=A1=9C=20?=
 =?UTF-8?q?=EB=86=92=EC=9D=B4=20=EC=A1=B0=EC=A0=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/ProfilePage/styles/StyledProfileCardBox.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/pages/ProfilePage/styles/StyledProfileCardBox.tsx b/src/pages/ProfilePage/styles/StyledProfileCardBox.tsx
index cfb54d92..7a493bef 100644
--- a/src/pages/ProfilePage/styles/StyledProfileCardBox.tsx
+++ b/src/pages/ProfilePage/styles/StyledProfileCardBox.tsx
@@ -5,7 +5,8 @@ import { Flex } from "@chakra-ui/react"
 const StyledProfileCardBox = ({ children }: React.PropsWithChildren) => {
   return (
     <Flex
-      minH="36rem"
+      mt="5rem"
+      mb="3rem"
       alignItems="center"
       justifyContent="center"
       direction="column">

From ebd2657952b24bb627c55afcd3ce5e934a2dd929 Mon Sep 17 00:00:00 2001
From: genTe <128919388+wdgWon@users.noreply.github.com>
Date: Thu, 14 Mar 2024 13:40:04 +0900
Subject: [PATCH 47/58] =?UTF-8?q?[Chore=20=F0=9F=9A=80]=20api=20=ED=8F=B4?=
 =?UTF-8?q?=EB=8D=94=20=EA=B2=BD=EB=A1=9C=20=EC=88=98=EC=A0=95=EC=9C=BC?=
 =?UTF-8?q?=EB=A1=9C=20=EC=9D=B8=ED=95=9C=20import=20=EC=97=90=EB=9F=AC=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/ProjectEditPage/hooks/usePostFileMutation.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/pages/ProjectEditPage/hooks/usePostFileMutation.ts b/src/pages/ProjectEditPage/hooks/usePostFileMutation.ts
index 8bdcc13f..4727fde6 100644
--- a/src/pages/ProjectEditPage/hooks/usePostFileMutation.ts
+++ b/src/pages/ProjectEditPage/hooks/usePostFileMutation.ts
@@ -1,9 +1,10 @@
-import { postProjectFiles } from "@api/projectFile/postProjectFiles"
 import { postProjectFilesResponseType } from "api-models"
 import { AxiosError } from "axios"
 
 import { UseMutationOptions, useMutation } from "@tanstack/react-query"
 
+import { postProjectFiles } from "@apis/projectFile/postProjectFiles"
+
 import { PostFormDataType } from "../types/PostFormDataType"
 import { TypedFormData } from "../types/TypedFormDataValue"
 

From c20dd5f68b7380bb18362ce92489f7253d93837a Mon Sep 17 00:00:00 2001
From: genTe <128919388+wdgWon@users.noreply.github.com>
Date: Thu, 14 Mar 2024 13:48:49 +0900
Subject: [PATCH 48/58] =?UTF-8?q?[Chore=20=F0=9F=9A=80]=20import=20?=
 =?UTF-8?q?=EC=97=90=EB=9F=AC=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/src/mocks/handlers.ts b/src/mocks/handlers.ts
index c05010ec..47217bba 100644
--- a/src/mocks/handlers.ts
+++ b/src/mocks/handlers.ts
@@ -3,10 +3,10 @@ import { searchHandlers } from "@components/Search/mocks"
 import allProjectHandlers from "@pages/HomePage/mocks"
 import { projectsHandlers, userInfoHandlers } from "@pages/ProfilePage/mocks"
 import { projectDetailHandlers } from "@pages/ProjectDetailPage/mocks"
+import { projectEditHandler } from "@pages/ProjectEditPage/mocks"
 import { postDoubleCheckEmail } from "@pages/SignUpPage/mocks/postDoubleCheckEmail.mock"
 import { postDoubleCheckNickname } from "@pages/SignUpPage/mocks/postDoubleCheckNickname.mock"
 import { postEmailSignUp } from "@pages/SignUpPage/mocks/postEmailSignUp.mock"
-import { projectEditHandler } from "@pages/ProjectEditPage/mocks"
 
 import { postEmailAuth } from "./auth/postEmailAuth.mock"
 import { postEmailLogin } from "./auth/postEmailLogin.mock"

From 41b281e3912fb81d6f045841d019e8bc4789b865 Mon Sep 17 00:00:00 2001
From: hellosonic-r <hellommmh@gmail.com>
Date: Thu, 14 Mar 2024 13:53:44 +0900
Subject: [PATCH 49/58] =?UTF-8?q?[Refactor=20=E2=9A=99=EF=B8=8F]=20?=
 =?UTF-8?q?=EC=BD=98=EC=86=94=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Pagination/Pagination.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx
index 88256c6b..17a161d4 100644
--- a/src/components/Pagination/Pagination.tsx
+++ b/src/components/Pagination/Pagination.tsx
@@ -12,7 +12,6 @@ interface PaginationProps {
 
 const Pagination = ({ totalProjectsCount, setPage }: PaginationProps) => {
   const handlePageChange = (page: number) => {
-    // console.log(`${page}렌더`)
     setPage(page)
   }
   return (

From 29bab670765d47d19daf32cd56863933972f6685 Mon Sep 17 00:00:00 2001
From: genTe <128919388+wdgWon@users.noreply.github.com>
Date: Thu, 14 Mar 2024 13:54:25 +0900
Subject: [PATCH 50/58] =?UTF-8?q?[Chore=20=F0=9F=9A=80]=20useEffect?=
 =?UTF-8?q?=EC=97=90=EC=84=9C=20=EB=B6=88=ED=95=84=EC=9A=94=ED=95=9C=20?=
 =?UTF-8?q?=EC=A2=85=EC=86=8D=EC=84=B1=20=EC=B6=94=EA=B0=80=20=EB=B0=A9?=
 =?UTF-8?q?=EC=A7=80=EB=A5=BC=20=EC=9C=84=ED=95=9C=20=EB=A6=B0=ED=8A=B8=20?=
 =?UTF-8?q?=EB=AC=B4=EC=8B=9C=20=EC=BD=94=EB=93=9C=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/SignUpForm/components/DoubleCheckButton.tsx       | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/SignUpPage/components/SignUpForm/components/DoubleCheckButton.tsx b/src/pages/SignUpPage/components/SignUpForm/components/DoubleCheckButton.tsx
index 08175bcb..139732a2 100644
--- a/src/pages/SignUpPage/components/SignUpForm/components/DoubleCheckButton.tsx
+++ b/src/pages/SignUpPage/components/SignUpForm/components/DoubleCheckButton.tsx
@@ -31,6 +31,7 @@ const DoubleCheckButton = ({
         title: successMessage,
       })
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isDuplicated])
 
   return (

From afd14ae461c2eac4b40e3779f62aac07214d52e7 Mon Sep 17 00:00:00 2001
From: genTe <128919388+wdgWon@users.noreply.github.com>
Date: Thu, 14 Mar 2024 14:06:53 +0900
Subject: [PATCH 51/58] =?UTF-8?q?[Chore=20=F0=9F=9A=80]=20useEffect?=
 =?UTF-8?q?=EC=97=90=EC=84=9C=20=EB=A6=B0=ED=8A=B8=20=EB=AC=B4=EC=8B=9C=20?=
 =?UTF-8?q?=EC=BD=94=EB=93=9C=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/SignUpPage/hooks/useSignUpForm.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/SignUpPage/hooks/useSignUpForm.ts b/src/pages/SignUpPage/hooks/useSignUpForm.ts
index c8ff9ae5..03fda7db 100644
--- a/src/pages/SignUpPage/hooks/useSignUpForm.ts
+++ b/src/pages/SignUpPage/hooks/useSignUpForm.ts
@@ -108,6 +108,7 @@ export const useSignUpForm = () => {
         title: message,
       })
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [signUp.error])
 
   return {

From 8bf957443e513b105c1ea70db9ed08fecf1aad4f Mon Sep 17 00:00:00 2001
From: Whoknow77 <gnsdh86166@gmail.com>
Date: Thu, 14 Mar 2024 14:46:35 +0900
Subject: [PATCH 52/58] =?UTF-8?q?[Feat=20=E2=9C=8F=EF=B8=8F]=20=EC=A2=8B?=
 =?UTF-8?q?=EC=95=84=EC=9A=94=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/like/deleteLike.ts                    |  7 +++++
 src/api/like/postLike.ts                      | 13 +++++++--
 src/constants/endPoints.ts                    |  5 ++--
 .../components/Hoc/withProjectId.tsx          | 25 +++++++++++++++++
 .../Summary/SummaryTop/SummaryTop.tsx         |  2 +-
 .../Summary/SummaryTop/SummaryTopIcon.tsx     | 28 +++++++++++++++----
 .../hooks/mutations/useDeleteLikeMutation.ts  |  0
 .../hooks/mutations/usePostLikeMutation.ts    | 24 ++++++++++++++++
 src/types/domain/apiDomain.d.ts               |  1 -
 9 files changed, 93 insertions(+), 12 deletions(-)
 create mode 100644 src/api/like/deleteLike.ts
 create mode 100644 src/pages/ProjectDetailPage/components/Hoc/withProjectId.tsx
 create mode 100644 src/pages/ProjectDetailPage/hooks/mutations/useDeleteLikeMutation.ts
 create mode 100644 src/pages/ProjectDetailPage/hooks/mutations/usePostLikeMutation.ts

diff --git a/src/api/like/deleteLike.ts b/src/api/like/deleteLike.ts
new file mode 100644
index 00000000..b85aaf3b
--- /dev/null
+++ b/src/api/like/deleteLike.ts
@@ -0,0 +1,7 @@
+import { authInstance } from "@api/axiosInstance"
+
+import { ENDPOINTS } from "@constants/endPoints"
+
+export const deleteLike = async () => {
+  await authInstance.post(ENDPOINTS.UPLOAD_LIKE)
+}
diff --git a/src/api/like/postLike.ts b/src/api/like/postLike.ts
index c784d4af..c7646321 100644
--- a/src/api/like/postLike.ts
+++ b/src/api/like/postLike.ts
@@ -1,8 +1,15 @@
+import { postLikePayload } from "api-models"
+import { AxiosRequestConfig } from "axios"
+
 import { ENDPOINTS } from "@constants/endPoints"
 
 import { authInstance } from "../axiosInstance"
 
-//FIXME: 미완성 api
-export const postLike = async () => {
-  await authInstance.post(ENDPOINTS.UPLOAD_LIKE)
+export const postLike = async (
+  { ...data }: postLikePayload,
+  config: AxiosRequestConfig = {},
+) => {
+  await authInstance.post(ENDPOINTS.POST_LIKE, data, {
+    ...config,
+  })
 }
diff --git a/src/constants/endPoints.ts b/src/constants/endPoints.ts
index b4440f2b..2e3839ef 100644
--- a/src/constants/endPoints.ts
+++ b/src/constants/endPoints.ts
@@ -23,8 +23,9 @@ export const ENDPOINTS = {
   GET_PROJECT_DETAILS: (projectId: number) =>
     `${VARIABLE_URL}/projects/${projectId}`,
   GET_ALL_PROJECTS: `${VARIABLE_URL}/projects`,
-  UPLOAD_LIKE: `${VARIABLE_URL}/likes`,
-  POST_COMMENT: () => `${VARIABLE_URL}/comments`,
+  POST_LIKE: `${VARIABLE_URL}/likes`,
+  DELETE_LIKE: (likeId: number) => `${VARIABLE_URL}/likes/${likeId}`,
+  POST_COMMENT: `${VARIABLE_URL}/comments`,
   DELETE_COMMENT: (commentId: number) =>
     `${VARIABLE_URL}/comments/${commentId}`,
   EDIT_COMMENT: (commentId: number) => `${VARIABLE_URL}/comments/${commentId}`,
diff --git a/src/pages/ProjectDetailPage/components/Hoc/withProjectId.tsx b/src/pages/ProjectDetailPage/components/Hoc/withProjectId.tsx
new file mode 100644
index 00000000..46ad3764
--- /dev/null
+++ b/src/pages/ProjectDetailPage/components/Hoc/withProjectId.tsx
@@ -0,0 +1,25 @@
+import { ComponentType } from "react"
+import { useParams } from "react-router-dom"
+
+export interface ProjectIdProps {
+  projectId: string
+}
+
+export const withProjectId = <P extends ProjectIdProps>(
+  WrappedComponent: ComponentType<P>,
+) => {
+  const ComponentWithProjectId = (props: Omit<P, keyof ProjectIdProps>) => {
+    const { projectId } = useParams()
+
+    if (!projectId) {
+      return null
+    }
+    return (
+      <WrappedComponent
+        {...(props as P)}
+        projectId={projectId}
+      />
+    )
+  }
+  return ComponentWithProjectId
+}
diff --git a/src/pages/ProjectDetailPage/components/Summary/SummaryTop/SummaryTop.tsx b/src/pages/ProjectDetailPage/components/Summary/SummaryTop/SummaryTop.tsx
index 126e07a5..af6373b3 100644
--- a/src/pages/ProjectDetailPage/components/Summary/SummaryTop/SummaryTop.tsx
+++ b/src/pages/ProjectDetailPage/components/Summary/SummaryTop/SummaryTop.tsx
@@ -48,7 +48,7 @@ const SummaryTop = ({
       <SummaryTopIcon
         count={likeCount}
         icon={<IoMdHeartEmpty />}
-        aria-label="goodButton"
+        aria-label="likeButton"
         fontSize={isLargerThan1200 ? "2.7rem" : "2rem"}
       />
       <Link
diff --git a/src/pages/ProjectDetailPage/components/Summary/SummaryTop/SummaryTopIcon.tsx b/src/pages/ProjectDetailPage/components/Summary/SummaryTop/SummaryTopIcon.tsx
index fc3a16bb..9f849038 100644
--- a/src/pages/ProjectDetailPage/components/Summary/SummaryTop/SummaryTopIcon.tsx
+++ b/src/pages/ProjectDetailPage/components/Summary/SummaryTop/SummaryTopIcon.tsx
@@ -6,23 +6,41 @@ import {
   useMediaQuery,
 } from "@chakra-ui/react"
 
-interface SummaryTopIconProps extends IconButtonProps {
+import { usePostLikeMutation } from "../../../hooks/mutations/usePostLikeMutation"
+import { ProjectIdProps, withProjectId } from "../../Hoc/withProjectId"
+
+interface SummaryTopIconProps extends IconButtonProps, ProjectIdProps {
   count?: number
 }
 
-const SummaryTopIcon = ({ count, ...props }: SummaryTopIconProps) => {
+const SummaryTopIcon = ({
+  count,
+  projectId,
+  ...props
+}: SummaryTopIconProps) => {
+  const { postLikeMutation } = usePostLikeMutation()
   const [isLargerThan1200] = useMediaQuery(["(min-width: 1200px)"])
   const isButton = props["aria-label"].toLowerCase().includes("button")
-
+  const isLike = props["aria-label"].toLowerCase().includes("like")
+  console.log(isLike)
   return (
     <Flex
       gap="0.7rem"
       alignItems="center"
       cursor={isButton ? "pointer" : ""}
       _hover={isButton ? { opacity: "0.5" } : {}}>
-      <IconButton {...props} />
+      {isLike ? (
+        <IconButton
+          onClick={() => {
+            postLikeMutation.mutate({ projectId: Number(projectId) })
+          }}
+          {...props}
+        />
+      ) : (
+        <IconButton {...props} />
+      )}
       <Text fontSize={isLargerThan1200 ? "xl" : "md"}>{count}</Text>
     </Flex>
   )
 }
-export default SummaryTopIcon
+export default withProjectId(SummaryTopIcon)
diff --git a/src/pages/ProjectDetailPage/hooks/mutations/useDeleteLikeMutation.ts b/src/pages/ProjectDetailPage/hooks/mutations/useDeleteLikeMutation.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/src/pages/ProjectDetailPage/hooks/mutations/usePostLikeMutation.ts b/src/pages/ProjectDetailPage/hooks/mutations/usePostLikeMutation.ts
new file mode 100644
index 00000000..71c4cf1b
--- /dev/null
+++ b/src/pages/ProjectDetailPage/hooks/mutations/usePostLikeMutation.ts
@@ -0,0 +1,24 @@
+import { postLike } from "@api/like/postLike"
+import { postLikePayload } from "api-models"
+
+import { useMutation, useQueryClient } from "@tanstack/react-query"
+
+import { QUERY_KEY_GET_PROJECT_DETAIL } from "../queries/useProjectDetailQuery"
+
+const QUERY_KEY_POST_LIKE = "POST_LIKE_234893204832"
+
+export const usePostLikeMutation = () => {
+  const queryClient = useQueryClient()
+
+  const postLikeMutation = useMutation({
+    mutationKey: [QUERY_KEY_POST_LIKE],
+    mutationFn: (data: postLikePayload) => postLike(data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: [QUERY_KEY_GET_PROJECT_DETAIL],
+      })
+    },
+  })
+
+  return { postLikeMutation }
+}
diff --git a/src/types/domain/apiDomain.d.ts b/src/types/domain/apiDomain.d.ts
index 4d27ddc3..efcc0c77 100644
--- a/src/types/domain/apiDomain.d.ts
+++ b/src/types/domain/apiDomain.d.ts
@@ -263,7 +263,6 @@ declare module "api-models" {
   }
 
   /* 좋아요 */
-  //FIXME: 미완성 api
   export type postLikePayload = {
     projectId: number
   }

From 162ef053bcbb4c54ac707b049ac526130e4cc3d3 Mon Sep 17 00:00:00 2001
From: Whoknow77 <gnsdh86166@gmail.com>
Date: Thu, 14 Mar 2024 16:23:54 +0900
Subject: [PATCH 53/58] =?UTF-8?q?[Feat=20=E2=9C=8F=EF=B8=8F]=20=EC=A2=8B?=
 =?UTF-8?q?=EC=95=84=EC=9A=94=20=EC=B7=A8=EC=86=8C=20=EC=9A=94=EC=B2=AD=20?=
 =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/like/deleteLike.ts                    | 12 ++++++++--
 .../Summary/SummaryTop/SummaryTopIcon.tsx     |  8 +++++--
 .../hooks/mutations/useDeleteLikeMutation.ts  | 23 +++++++++++++++++++
 src/types/domain/apiDomain.d.ts               | 11 +++++++--
 4 files changed, 48 insertions(+), 6 deletions(-)

diff --git a/src/api/like/deleteLike.ts b/src/api/like/deleteLike.ts
index b85aaf3b..42fcf88d 100644
--- a/src/api/like/deleteLike.ts
+++ b/src/api/like/deleteLike.ts
@@ -1,7 +1,15 @@
 import { authInstance } from "@api/axiosInstance"
+import { deleteLikePayload } from "api-models"
+import { AxiosRequestConfig } from "axios"
 
 import { ENDPOINTS } from "@constants/endPoints"
 
-export const deleteLike = async () => {
-  await authInstance.post(ENDPOINTS.UPLOAD_LIKE)
+export const deleteLike = async (
+  { likeId }: deleteLikePayload,
+  config: AxiosRequestConfig = {},
+) => {
+  await authInstance.delete(ENDPOINTS.DELETE_LIKE(likeId)),
+    {
+      ...config,
+    }
 }
diff --git a/src/pages/ProjectDetailPage/components/Summary/SummaryTop/SummaryTopIcon.tsx b/src/pages/ProjectDetailPage/components/Summary/SummaryTop/SummaryTopIcon.tsx
index 9f849038..3edcac84 100644
--- a/src/pages/ProjectDetailPage/components/Summary/SummaryTop/SummaryTopIcon.tsx
+++ b/src/pages/ProjectDetailPage/components/Summary/SummaryTop/SummaryTopIcon.tsx
@@ -6,7 +6,9 @@ import {
   useMediaQuery,
 } from "@chakra-ui/react"
 
-import { usePostLikeMutation } from "../../../hooks/mutations/usePostLikeMutation"
+import { useDeleteLikeMutation } from "@pages/ProjectDetailPage/hooks/mutations/useDeleteLikeMutation"
+import { usePostLikeMutation } from "@pages/ProjectDetailPage/hooks/mutations/usePostLikeMutation"
+
 import { ProjectIdProps, withProjectId } from "../../Hoc/withProjectId"
 
 interface SummaryTopIconProps extends IconButtonProps, ProjectIdProps {
@@ -19,10 +21,11 @@ const SummaryTopIcon = ({
   ...props
 }: SummaryTopIconProps) => {
   const { postLikeMutation } = usePostLikeMutation()
+  const { deleteLikeMutation } = useDeleteLikeMutation()
+
   const [isLargerThan1200] = useMediaQuery(["(min-width: 1200px)"])
   const isButton = props["aria-label"].toLowerCase().includes("button")
   const isLike = props["aria-label"].toLowerCase().includes("like")
-  console.log(isLike)
   return (
     <Flex
       gap="0.7rem"
@@ -33,6 +36,7 @@ const SummaryTopIcon = ({
         <IconButton
           onClick={() => {
             postLikeMutation.mutate({ projectId: Number(projectId) })
+            deleteLikeMutation.mutate({ likeId: 12 })
           }}
           {...props}
         />
diff --git a/src/pages/ProjectDetailPage/hooks/mutations/useDeleteLikeMutation.ts b/src/pages/ProjectDetailPage/hooks/mutations/useDeleteLikeMutation.ts
index e69de29b..100e7da8 100644
--- a/src/pages/ProjectDetailPage/hooks/mutations/useDeleteLikeMutation.ts
+++ b/src/pages/ProjectDetailPage/hooks/mutations/useDeleteLikeMutation.ts
@@ -0,0 +1,23 @@
+import { deleteLike } from "@api/like/deleteLike"
+import { deleteLikePayload } from "api-models"
+
+import { useMutation, useQueryClient } from "@tanstack/react-query"
+
+import { QUERY_KEY_GET_PROJECT_DETAIL } from "../queries/useProjectDetailQuery"
+
+const QUERY_KEY_POST_LIKE = "DELETE_LIKE_1328940382182"
+
+export const useDeleteLikeMutation = () => {
+  const queryClient = useQueryClient()
+
+  const deleteLikeMutation = useMutation({
+    mutationKey: [QUERY_KEY_POST_LIKE],
+    mutationFn: (data: deleteLikePayload) => deleteLike(data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: [QUERY_KEY_GET_PROJECT_DETAIL],
+      })
+    },
+  })
+  return { deleteLikeMutation }
+}
diff --git a/src/types/domain/apiDomain.d.ts b/src/types/domain/apiDomain.d.ts
index efcc0c77..27187753 100644
--- a/src/types/domain/apiDomain.d.ts
+++ b/src/types/domain/apiDomain.d.ts
@@ -134,10 +134,9 @@ declare module "api-models" {
 
   export type Like = {
     id: number
-    userId: string
     projectId: string
+    userId: string
     createdAt: string
-    updatedAt: string
   }
 
   export type TechStack = {
@@ -263,10 +262,18 @@ declare module "api-models" {
   }
 
   /* 좋아요 */
+  export type getLikePayload = {
+    likes: Like[]
+  }
+
   export type postLikePayload = {
     projectId: number
   }
 
+  export type deleteLikePayload = {
+    likeId: number
+  }
+
   /* 댓글 */
 
   export type postCommentPayload = {

From 6e0a09c7cb44709b5d232759e01408dbcfad70b2 Mon Sep 17 00:00:00 2001
From: genTe <128919388+wdgWon@users.noreply.github.com>
Date: Thu, 14 Mar 2024 17:50:41 +0900
Subject: [PATCH 54/58] =?UTF-8?q?[Fix=20=F0=9F=AA=9B]=20=EB=8B=A4=EB=A5=B8?=
 =?UTF-8?q?=20=EC=9A=94=EC=B2=AD=EC=97=90=EC=84=9C=20401=EC=97=90=EB=9F=AC?=
 =?UTF-8?q?=EB=A5=BC=20=EB=B0=9B=EB=8A=94=20=EA=B2=BD=EC=9A=B0=20=EA=B6=8C?=
 =?UTF-8?q?=ED=95=9C=20=EC=97=90=EB=9F=AC=EB=A5=BC=20=EC=83=9D=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/axiosInstance.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/api/axiosInstance.ts b/src/api/axiosInstance.ts
index c48a7545..8c9f4ef9 100644
--- a/src/api/axiosInstance.ts
+++ b/src/api/axiosInstance.ts
@@ -40,7 +40,7 @@ authInstance.interceptors.request.use(
           return Promise.reject(new LogoutError())
         }
 
-        throw refreshError
+        return Promise.reject(refreshError)
       }
     }
 
@@ -64,7 +64,7 @@ authInstance.interceptors.response.use(
       if (originalRequest && !originalRequest?._retry) {
         originalRequest._retry = true
       } else {
-        return Promise.reject(new LogoutError())
+        return Promise.reject(new PermissionError())
       }
 
       const refreshToken = authToken.getRefreshToken()

From a5d48280b56c17d1295e0953cd9ec8cbc748421c Mon Sep 17 00:00:00 2001
From: Whoknow77 <gnsdh86166@gmail.com>
Date: Thu, 14 Mar 2024 19:44:04 +0900
Subject: [PATCH 55/58] =?UTF-8?q?[Fix=20=F0=9F=AA=9B]=20=ED=83=80=EC=9E=85?=
 =?UTF-8?q?=EC=98=A4=EB=A5=98=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/comment/postComment.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/api/comment/postComment.ts b/src/api/comment/postComment.ts
index d2f09804..030e59b6 100644
--- a/src/api/comment/postComment.ts
+++ b/src/api/comment/postComment.ts
@@ -9,7 +9,7 @@ export const postComment = async (
   { ...data }: postCommentPayload,
   config: AxiosRequestConfig = {},
 ) => {
-  await authInstance.post(ENDPOINTS.POST_COMMENT(), data, {
+  await authInstance.post(ENDPOINTS.POST_COMMENT, data, {
     ...config,
   })
 }

From a4451a3470f8e5251844cd4916f97f5d7d1bfbaf Mon Sep 17 00:00:00 2001
From: genTe <128919388+wdgWon@users.noreply.github.com>
Date: Thu, 14 Mar 2024 23:37:41 +0900
Subject: [PATCH 56/58] =?UTF-8?q?[Refactoring=20=E2=9A=99=EF=B8=8F]=20?=
 =?UTF-8?q?=ED=9B=88=EC=98=A4=EB=8B=98=20=EB=A6=AC=EB=B7=B0=20=EB=B0=98?=
 =?UTF-8?q?=EC=98=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../InputController/types/InputControllerProps.ts      |  2 +-
 .../SignUpPage/components/SignUpForm/SignUpForm.tsx    | 10 ++--------
 .../SignUpForm/components/DoubleCheckButton.tsx        |  3 +--
 .../hooks/mutations/useDoubleCheckEmailMutation.ts     |  7 +------
 .../hooks/mutations/useDoubleCheckNicknameMutation.ts  |  7 +------
 src/pages/SignUpPage/hooks/useSignUpForm.ts            |  5 +----
 src/pages/SignUpPage/types/DoubleCheckProps.ts         |  1 -
 src/pages/SignUpPage/types/SignUpFormValues.ts         |  2 +-
 8 files changed, 8 insertions(+), 29 deletions(-)

diff --git a/src/components/InputController/types/InputControllerProps.ts b/src/components/InputController/types/InputControllerProps.ts
index 1c8cfc51..b8543d98 100644
--- a/src/components/InputController/types/InputControllerProps.ts
+++ b/src/components/InputController/types/InputControllerProps.ts
@@ -3,7 +3,7 @@ import { FieldValues, RegisterOptions } from "react-hook-form"
 
 import { InputProps } from "@chakra-ui/input"
 
-import { FieldNames } from "./FieldNames"
+import { FieldNames } from "./fieldNames"
 
 export interface InputControllerProps {
   fieldName: FieldNames
diff --git a/src/pages/SignUpPage/components/SignUpForm/SignUpForm.tsx b/src/pages/SignUpPage/components/SignUpForm/SignUpForm.tsx
index 0417a632..65fde37a 100644
--- a/src/pages/SignUpPage/components/SignUpForm/SignUpForm.tsx
+++ b/src/pages/SignUpPage/components/SignUpForm/SignUpForm.tsx
@@ -42,10 +42,7 @@ const SignUpForm = () => {
             registerOptions={emailOptions}>
             {(renderProps) => (
               <Flex alignItems="center">
-                <Input
-                  type="email"
-                  {...renderProps}
-                />
+                <Input {...renderProps} />
                 <DoubleCheckButton
                   isDuplicated={emailCheck.data?.isDuplicated}
                   isLoading={emailCheck.isPending}
@@ -63,10 +60,7 @@ const SignUpForm = () => {
             registerOptions={nicknameOptions}>
             {(renderProps) => (
               <Flex alignItems="center">
-                <Input
-                  type="text"
-                  {...renderProps}
-                />
+                <Input {...renderProps} />
                 <DoubleCheckButton
                   isDuplicated={nicknameCheck.data?.isDuplicated}
                   isLoading={nicknameCheck.isPending}
diff --git a/src/pages/SignUpPage/components/SignUpForm/components/DoubleCheckButton.tsx b/src/pages/SignUpPage/components/SignUpForm/components/DoubleCheckButton.tsx
index 139732a2..0887b093 100644
--- a/src/pages/SignUpPage/components/SignUpForm/components/DoubleCheckButton.tsx
+++ b/src/pages/SignUpPage/components/SignUpForm/components/DoubleCheckButton.tsx
@@ -31,8 +31,7 @@ const DoubleCheckButton = ({
         title: successMessage,
       })
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isDuplicated])
+  }, [errorMessage, isDuplicated, successMessage, toast])
 
   return (
     <Button
diff --git a/src/pages/SignUpPage/hooks/mutations/useDoubleCheckEmailMutation.ts b/src/pages/SignUpPage/hooks/mutations/useDoubleCheckEmailMutation.ts
index c944151d..0c0bd84c 100644
--- a/src/pages/SignUpPage/hooks/mutations/useDoubleCheckEmailMutation.ts
+++ b/src/pages/SignUpPage/hooks/mutations/useDoubleCheckEmailMutation.ts
@@ -4,17 +4,12 @@ import { postDoubleCheckEmail } from "@/api/user/postDoubleCheckEmail"
 
 import { DoubleCheckProps } from "@pages/SignUpPage/types/DoubleCheckProps"
 
-const useDoubleCheckEmailMutaion = ({
-  setError,
-  trigger,
-}: DoubleCheckProps) => {
+const useDoubleCheckEmailMutaion = ({ setError }: DoubleCheckProps) => {
   return useMutation({
     mutationFn: (email: string) => postDoubleCheckEmail({ email }),
     onSuccess: (response) => {
       if (response.isDuplicated) {
         setError()
-      } else {
-        trigger()
       }
     },
   })
diff --git a/src/pages/SignUpPage/hooks/mutations/useDoubleCheckNicknameMutation.ts b/src/pages/SignUpPage/hooks/mutations/useDoubleCheckNicknameMutation.ts
index 10860c67..75a10879 100644
--- a/src/pages/SignUpPage/hooks/mutations/useDoubleCheckNicknameMutation.ts
+++ b/src/pages/SignUpPage/hooks/mutations/useDoubleCheckNicknameMutation.ts
@@ -4,17 +4,12 @@ import { postDoubleCheckNickname } from "@apis/user/postDoubleCheckNickname"
 
 import { DoubleCheckProps } from "@pages/SignUpPage/types/DoubleCheckProps"
 
-const useDoubleCheckNicknameMutation = ({
-  setError,
-  trigger,
-}: DoubleCheckProps) => {
+const useDoubleCheckNicknameMutation = ({ setError }: DoubleCheckProps) => {
   return useMutation({
     mutationFn: (nickname: string) => postDoubleCheckNickname({ nickname }),
     onSuccess: (response) => {
       if (response.isDuplicated) {
         setError()
-      } else {
-        trigger()
       }
     },
   })
diff --git a/src/pages/SignUpPage/hooks/useSignUpForm.ts b/src/pages/SignUpPage/hooks/useSignUpForm.ts
index 03fda7db..1efabec0 100644
--- a/src/pages/SignUpPage/hooks/useSignUpForm.ts
+++ b/src/pages/SignUpPage/hooks/useSignUpForm.ts
@@ -27,7 +27,6 @@ export const useSignUpForm = () => {
       setCheckedEmail(() => "")
       method.setError("email", duplicatedErrors.email)
     },
-    trigger: () => method.trigger("email"),
   })
 
   const nicknameCheck = useDoubleCheckNicknameMutation({
@@ -35,7 +34,6 @@ export const useSignUpForm = () => {
       setCheckedNickname(() => "")
       method.setError("nickname", duplicatedErrors.nickname)
     },
-    trigger: () => method.trigger("nickname"),
   })
 
   const signUp = useSignUpMutation()
@@ -108,8 +106,7 @@ export const useSignUpForm = () => {
         title: message,
       })
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [signUp.error])
+  }, [signUp.error, toast])
 
   return {
     method,
diff --git a/src/pages/SignUpPage/types/DoubleCheckProps.ts b/src/pages/SignUpPage/types/DoubleCheckProps.ts
index 6f8391e8..afc44c1d 100644
--- a/src/pages/SignUpPage/types/DoubleCheckProps.ts
+++ b/src/pages/SignUpPage/types/DoubleCheckProps.ts
@@ -1,4 +1,3 @@
 export interface DoubleCheckProps {
   setError: () => void
-  trigger: () => void
 }
diff --git a/src/pages/SignUpPage/types/SignUpFormValues.ts b/src/pages/SignUpPage/types/SignUpFormValues.ts
index aaaef996..8ddbc9e4 100644
--- a/src/pages/SignUpPage/types/SignUpFormValues.ts
+++ b/src/pages/SignUpPage/types/SignUpFormValues.ts
@@ -1,3 +1,3 @@
-import { FieldNames } from "@components/InputController/types/FieldNames"
+import { FieldNames } from "@components/InputController/types/fieldNames"
 
 export interface SignUpFormValues extends Record<FieldNames, string> {}

From cd2f33b8dc897d741c3ff975f4e37edab27b26b4 Mon Sep 17 00:00:00 2001
From: genTe <128919388+wdgWon@users.noreply.github.com>
Date: Fri, 15 Mar 2024 09:36:03 +0900
Subject: [PATCH 57/58] =?UTF-8?q?[Rename=20=F0=9F=8F=B7=EF=B8=8F]=20?=
 =?UTF-8?q?=EB=B9=8C=EB=93=9C=20=EC=8B=A4=ED=8C=A8=ED=96=88=EB=8D=98=20?=
 =?UTF-8?q?=EA=B2=BD=EB=A1=9C=EB=AA=85=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/like/deleteLike.ts                                     | 3 ++-
 .../ProjectDetailPage/hooks/mutations/useDeleteLikeMutation.ts | 3 ++-
 .../ProjectDetailPage/hooks/mutations/usePostLikeMutation.ts   | 3 ++-
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/api/like/deleteLike.ts b/src/api/like/deleteLike.ts
index 42fcf88d..e88f0e84 100644
--- a/src/api/like/deleteLike.ts
+++ b/src/api/like/deleteLike.ts
@@ -1,7 +1,8 @@
-import { authInstance } from "@api/axiosInstance"
 import { deleteLikePayload } from "api-models"
 import { AxiosRequestConfig } from "axios"
 
+import { authInstance } from "@apis/axiosInstance"
+
 import { ENDPOINTS } from "@constants/endPoints"
 
 export const deleteLike = async (
diff --git a/src/pages/ProjectDetailPage/hooks/mutations/useDeleteLikeMutation.ts b/src/pages/ProjectDetailPage/hooks/mutations/useDeleteLikeMutation.ts
index 100e7da8..981065b0 100644
--- a/src/pages/ProjectDetailPage/hooks/mutations/useDeleteLikeMutation.ts
+++ b/src/pages/ProjectDetailPage/hooks/mutations/useDeleteLikeMutation.ts
@@ -1,8 +1,9 @@
-import { deleteLike } from "@api/like/deleteLike"
 import { deleteLikePayload } from "api-models"
 
 import { useMutation, useQueryClient } from "@tanstack/react-query"
 
+import { deleteLike } from "@apis/like/deleteLike"
+
 import { QUERY_KEY_GET_PROJECT_DETAIL } from "../queries/useProjectDetailQuery"
 
 const QUERY_KEY_POST_LIKE = "DELETE_LIKE_1328940382182"
diff --git a/src/pages/ProjectDetailPage/hooks/mutations/usePostLikeMutation.ts b/src/pages/ProjectDetailPage/hooks/mutations/usePostLikeMutation.ts
index 71c4cf1b..cb59ed53 100644
--- a/src/pages/ProjectDetailPage/hooks/mutations/usePostLikeMutation.ts
+++ b/src/pages/ProjectDetailPage/hooks/mutations/usePostLikeMutation.ts
@@ -1,8 +1,9 @@
-import { postLike } from "@api/like/postLike"
 import { postLikePayload } from "api-models"
 
 import { useMutation, useQueryClient } from "@tanstack/react-query"
 
+import { postLike } from "@apis/like/postLike"
+
 import { QUERY_KEY_GET_PROJECT_DETAIL } from "../queries/useProjectDetailQuery"
 
 const QUERY_KEY_POST_LIKE = "POST_LIKE_234893204832"

From c57cbaf05bf84ba5ea2a27a4f2ce81dcb716c338 Mon Sep 17 00:00:00 2001
From: genTe <128919388+wdgWon@users.noreply.github.com>
Date: Fri, 15 Mar 2024 09:50:17 +0900
Subject: [PATCH 58/58] =?UTF-8?q?[Rename]=20FieldNames.ts=20=EC=9D=84=20fi?=
 =?UTF-8?q?eldNames.ts=20=EC=9C=BC=EB=A1=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../InputController/types/{FieldNames.ts => fieldNames.ts}        | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/components/InputController/types/{FieldNames.ts => fieldNames.ts} (100%)

diff --git a/src/components/InputController/types/FieldNames.ts b/src/components/InputController/types/fieldNames.ts
similarity index 100%
rename from src/components/InputController/types/FieldNames.ts
rename to src/components/InputController/types/fieldNames.ts