Merge branch 'dev' of https://github.com/side-peek/sidepeek_frontend …

…into feature/#47/team

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()

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,
   })
 }

src/api/like/deleteLike.ts

@@ -0,0 +1,16 @@
+import { deleteLikePayload } from "api-models"
+import { AxiosRequestConfig } from "axios"
+
+import { authInstance } from "@apis/axiosInstance"
+
+import { ENDPOINTS } from "@constants/endPoints"
+
+export const deleteLike = async (
+  { likeId }: deleteLikePayload,
+  config: AxiosRequestConfig = {},
+) => {
+  await authInstance.delete(ENDPOINTS.DELETE_LIKE(likeId)),
+    {
+      ...config,
+    }
+}

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,
+  })
 }

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) => {
+  // TODO: type이 LIKED, COMMENT일 경우 분기처리(authInstance 사용)
+  const { data } = await baseInstance.get(
+    ENDPOINTS.GET_USER_PROJECTS(userId, type, page, size),
+  )
+  return data
+}

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
 }

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
 }

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 = {},
 ) => {

src/pages/LoginPage/components/BackButton.tsx → 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"

src/components/InputController/InputController.tsx

@@ -0,0 +1,52 @@
+import { cloneElement, isValidElement } from "react"
+import { useFormContext } from "react-hook-form"
+
+import {
+  Flex,
+  FormControl,
+  FormErrorMessage,
+  FormLabel,
+  InputProps,
+  Spacer,
+} from "@chakra-ui/react"
+import { isFunction } from "lodash"
+
+import { InputControllerProps } from "./types/InputControllerProps"
+
+const InputController = ({
+  children,
+  fieldName,
+  label,
+  registerOptions,
+}: InputControllerProps) => {
+  const {
+    register,
+    getFieldState,
+    formState: { errors },
+  } = useFormContext()
+
+  const renderPorps = {
+    height: "5rem",
+    fontSize: "2rem",
+    ...register(fieldName, registerOptions),
+  } as InputProps
+
+  return (
+    <FormControl isInvalid={getFieldState(fieldName).invalid}>
+      <Flex alignItems="center">
+        <FormLabel display="inline-block">{label}</FormLabel>
+        <Spacer />
+        <FormErrorMessage>
+          {errors[fieldName]?.message as string}
+        </FormErrorMessage>
+      </Flex>
+      {isValidElement(children)
+        ? cloneElement(children, renderPorps)
+        : isFunction(children)
+          ? children(renderPorps)
+          : null}
+    </FormControl>
+  )
+}
+
+export default InputController

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>
+}

src/components/InputController/types/fieldNames.ts

@@ -0,0 +1 @@
+export type FieldNames = "email" | "password" | "nickname" | "confirmPassword"

src/components/Pagination/Pagination.tsx

@@ -5,14 +5,19 @@ 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}렌더`)
+    setPage(page)
   }
   return (
     <PaginationProvider
-      limit={24}
-      total={400}
+      limit={12}
+      total={totalProjectsCount}
       onPageChange={handlePageChange}>
       <HStack>
         <PrevButton />

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) => {

src/constants/endPoints.ts

@@ -23,8 +23,16 @@ 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`,
+  GET_USER_PROJECTS: (
+    userId: number,
+    type: string,
+    page: number,
+    size: number,
+  ) =>
+    `${VARIABLE_URL}/users/${userId}/projects?type=${type}&page=${page}&size=${size}`,
+  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}`,

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",
 }

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))
 })

src/mocks/handlers.ts

@@ -4,6 +4,9 @@ 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 { postEmailAuth } from "./auth/postEmailAuth.mock"
 import { postEmailLogin } from "./auth/postEmailLogin.mock"
@@ -15,8 +18,11 @@ export const handlers = [
   ...allProjectHandlers,
   postEmailRefresh,
   postEmailLogin,
+  postDoubleCheckEmail,
+  postDoubleCheckNickname,
   postEmailAuth,
   ...userInfoHandlers,
   ...projectsHandlers,
+  postEmailSignUp,
   ...projectEditHandler,
 ]

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"
@@ -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