fix

package.json

@@ -17,6 +17,7 @@
     "node": "20.2.0"
   },
   "dependencies": {
+    "@dnd-kit/core": "^6.1.0",
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-popover": "^1.1.1",

src/apis/http.ts

@@ -1,7 +1,16 @@
+import { serverErrorType } from '@/types/api';
 import { isProductionEnv } from '@/utils/common';
+import type {
+  AxiosError,
+  AxiosInstance,
+  AxiosRequestConfig,
+  AxiosResponse,
+  InternalAxiosRequestConfig,
+  Method,
+} from 'axios';
 import axios from 'axios';
-import { getCookie } from 'cookies-next';
-import type { AxiosInstance, AxiosRequestConfig, AxiosResponse, InternalAxiosRequestConfig, Method } from 'axios';
+import { deleteCookie, getCookie, setCookie } from 'cookies-next';
+import { postRefresh } from './refresh';
 
 const axiosInstance: AxiosInstance = axios.create({
   baseURL: process.env.NEXT_PUBLIC_API_URL,
@@ -27,17 +36,42 @@ axiosInstance.interceptors.request.use(async (requestConfig: InternalAxiosReques
   return config;
 });
 
-axiosInstance.interceptors.response.use(async (response: AxiosResponse) => {
-  if (!isProductionEnv) {
-    // eslint-disable-next-line no-console
-    console.log(response);
-  }
-  return response;
-});
+axiosInstance.interceptors.response.use(
+  (response: AxiosResponse) => {
+    if (!isProductionEnv) {
+      // eslint-disable-next-line no-console
+      console.log(response);
+    }
+
+    return response;
+  },
+
+  async (error: AxiosError) => {
+    if (axios.isAxiosError(error)) {
+      const data = error.response?.data as serverErrorType;
+      const refreshToken = getCookie('refreshToken');
+      if (refreshToken) {
+        if (data?.status === 'UNAUTHORIZED') {
+          deleteCookie('accessToken');
+          deleteCookie('refreshToken');
+          try {
+            const response = await postRefresh({ refreshToken });
+            setCookie('accessToken', response.data.accessToken);
+            setCookie('refreshToken', response.data.refreshToken);
+          } catch (refreshError) {
+            window.location.href = '/login';
+          }
+        }
+      }
+    }
+
+    return Promise.reject(error);
+  },
+);
 
 const createApiMethod =
   (instance: AxiosInstance, method: Method) =>
-  <T>(config: AxiosRequestConfig): Promise<AxiosResponse<T>> =>
+  <T>(config: AxiosRequestConfig): Promise<AxiosResponse> =>
     instance({ ...config, method });
 
 export const http = {

src/apis/login.ts

@@ -0,0 +1,31 @@
+import type { PostLoginRequest, PostLoginResponse } from '@/types/login';
+import { useMutation } from '@tanstack/react-query';
+import { AxiosResponse } from 'axios';
+import { setCookie } from 'cookies-next';
+import { http } from './http';
+
+export const postLogin = async ({ loginId, password }: PostLoginRequest): Promise<PostLoginResponse> => {
+  const response: AxiosResponse<PostLoginResponse> = await http.post<PostLoginResponse>({
+    url: '/users/test/login',
+    data: {
+      loginId,
+      password,
+    },
+  });
+
+  return response.data;
+};
+
+export const loginMutation = () =>
+  useMutation({
+    mutationFn: postLogin,
+    onSuccess: (data) => {
+      setCookie('accessToken', data.accessToken);
+      setCookie('refreshToken', data.refreshToken);
+      window.location.href = '/';
+      alert('로그인 성공');
+    },
+    onError: () => {
+      alert('로그인 실패');
+    },
+  });

src/apis/logout.ts

@@ -0,0 +1,19 @@
+import { useMutation } from '@tanstack/react-query';
+import { deleteCookie } from 'cookies-next';
+import { http } from './http';
+
+export const getLogout = async () => {
+  return await http.get({
+    url: '/users/logout',
+  });
+};
+
+export const logoutMutation = () =>
+  useMutation({
+    mutationFn: getLogout,
+    onSuccess: () => {
+      deleteCookie('accessToken');
+      deleteCookie('refreshToken');
+      window.location.href = '/';
+    },
+  });

src/apis/refresh.ts

@@ -0,0 +1,11 @@
+import type { PostLoginResponse, PostRefreshRequest } from '@/types/login';
+import { http } from './http';
+
+export const postRefresh = ({ refreshToken }: PostRefreshRequest) => {
+  return http.post<PostLoginResponse>({
+    url: '/users/refreshToken',
+    data: {
+      refreshToken,
+    },
+  });
+};

src/app/(sidebar)/(my-info)/components/InfoCardList.tsx

@@ -4,7 +4,7 @@ import { useState } from 'react';
 import { mockInfoCount, mockInfoList } from '../mock';
 import { cn } from '@/utils/tailwind-util';
 import { Icon } from '@/system/components';
-import { InfoCardItem } from './InfoCardItem';
+import { InfoCard } from '@/components/InfoCard';
 
 const INFO_OPTIONS = ['경험 정리', '자기소개서', '면접 질문'] as const;
 
@@ -46,11 +46,13 @@ export function InfoCardList() {
           <Icon name="add" color="#08F29B" />
         </button>
       </div>
-      <div className="grid grid-cols-[repeat(auto-fill,minmax(343px,1fr))] gap-[16px]">
+      <ul className="grid grid-cols-[repeat(auto-fill,minmax(343px,1fr))] gap-[16px]">
         {infoList.map((info) => (
-          <InfoCardItem key={info.id} {...info} />
+          <li className="min-w-[343px]">
+            <InfoCard key={info.id} {...info} />
+          </li>
         ))}
-      </div>
+      </ul>
     </section>
   );
 }

src/app/(sidebar)/(my-info)/mock.ts

@@ -1,12 +1,12 @@
-import { InfoCard } from '@/types/info';
+import { InfoCardType } from '@/types/info';
 
 export const mockInfoCount = {
   '경험 정리': 1,
   자기소개서: 3,
   '면접 질문': 2,
 };
 
-export const mockInfoList: InfoCard[] = [
+export const mockInfoList: InfoCardType[] = [
   {
     id: 1,
     title: '제목',

src/app/(sidebar)/(my-info)/page.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { Icon } from '@/system/components';
 import { InfoCardList } from './components/InfoCardList';
 

src/app/(sidebar)/login/page.tsx

@@ -0,0 +1,80 @@
+'use client';
+
+import { loginMutation } from '@/apis/login';
+import { logoutMutation } from '@/apis/logout';
+import { SSRSafeSuspense } from '@/lib';
+import { Button } from '@/system/components';
+import { getCookie } from 'cookies-next';
+import { useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { InputField } from '../my-recruit/components/NewRecruitDialogContent/InputField';
+
+export default function Page() {
+  const router = useRouter();
+
+  const [loginId, setLoginId] = useState<string>('');
+  const [password, setPassword] = useState<string>('');
+  const [isLogin, setIsLogin] = useState<boolean>(false);
+
+  const { mutate: loginMutate } = loginMutation();
+  const { mutate: logoutMutate } = logoutMutation();
+
+  useEffect(() => {
+    const token = getCookie('accessToken');
+    setIsLogin(token != null);
+  }, []);
+
+  const handleLogin = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    loginMutate({ loginId, password });
+  };
+
+  return (
+    <SSRSafeSuspense
+      fallback={
+        <div className="w-full h-full flex justify-center items-center">
+          <div>로딩 중...</div>
+        </div>
+      }>
+      <div className="w-full h-full flex justify-center items-center">
+        {isLogin ? (
+          <div className="flex flex-col gap-4">
+            <div>이미 로그인 되어있습니다.</div>
+            <Button
+              className="bg-neutral-95 flex items-center gap-[4px] py-[8px] px-[16px] rounded-[6px]"
+              onClick={() => {
+                router.replace('/');
+              }}>
+              <span className="w-full text-label1 text-white font-semibold">홈으로</span>
+            </Button>
+            <Button
+              className="bg-neutral-95 flex items-center gap-[4px] py-[8px] px-[16px] rounded-[6px]"
+              onClick={() => {
+                logoutMutate();
+              }}>
+              <span className="w-full text-label1 text-white font-semibold">로그아웃</span>
+            </Button>
+          </div>
+        ) : (
+          <form onSubmit={handleLogin}>
+            <div className="flex flex-col justify-center gap-10 mb-15">
+              <InputField value={loginId} onChange={(e) => setLoginId(e.target.value)} placeholder="이메일" />
+              <InputField
+                type="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                placeholder="비밀번호"
+                className="mb-4"
+              />
+            </div>
+            <div className="flex gap-2 flex-col">
+              <Button className="bg-neutral-95 flex items-center gap-[4px] py-[8px] px-[16px] rounded-[6px]">
+                <span className="w-full text-label1 text-white font-semibold">로그인</span>
+              </Button>
+            </div>
+          </form>
+        )}
+      </div>
+    </SSRSafeSuspense>
+  );
+}

src/app/(sidebar)/my-recruit/components/NewRecruitDialogContent/InputField.tsx

@@ -1,4 +1,4 @@
-import { If } from '@/components/If';
+import { If } from '@/system/utils/If';
 import { ComponentProps, ReactNode } from 'react';
 
 interface Props extends ComponentProps<'input'> {

src/app/(sidebar)/my-recruit/components/NewRecruitDialogContent/NewRecruitDialogContent.tsx

@@ -1,4 +1,8 @@
+<<<<<<< HEAD
 import { Spacing } from '@/components/Spacing';
+=======
+import { Spacing } from '@/system/utils/Spacing';
+>>>>>>> main
 import { TouchButton } from '@/components/TouchButton';
 import { Dialog } from '@/system/components/Dialog/ShadcnDialog';
 import { color } from '@/system/token/color';
@@ -17,7 +21,7 @@ import { motion } from 'framer-motion';
 import { Popover, PopoverContent, PopoverTrigger } from '@/system/components/Popover/Popover';
 import { Calendar } from '@/system/components/Calendar/Calendar';
 import { format } from 'date-fns/format';
-import { If } from '@/components/If';
+import { If } from '@/system/utils/If';
 
 interface Props {
   onSubmit: () => void;