feat(login): 로그인 퍼널 구현

package.json

@@ -75,6 +75,7 @@
     "lowlight": "^3.1.0",
     "lucide-react": "^0.411.0",
     "next": "14.2.4",
+    "next-auth": "beta",
     "react": "^18",
     "react-colorful": "^5.6.1",
     "react-day-picker": "8.10.1",

src/apis/http.ts

@@ -10,6 +10,7 @@ import type {
 import axios from 'axios';
 import { deleteCookie, getCookie, setCookie } from 'cookies-next';
 import { postRefresh } from './refresh';
+import { ACCESS_TOKEN, REFRESH_TOKEN } from '@/app/login/constants/token';
 
 const axiosInstance: AxiosInstance = axios.create({
   baseURL: process.env.NEXT_PUBLIC_API_URL,
@@ -24,8 +25,7 @@ axiosInstance.interceptors.request.use(async (requestConfig: InternalAxiosReques
   if (typeof window === 'undefined') {
     return requestConfig;
   }
-
-  const token = getCookie('accessToken');
+  const token = getCookie(ACCESS_TOKEN);
   const config = { ...requestConfig };
 
   if (token) {
@@ -48,15 +48,17 @@ axiosInstance.interceptors.response.use(
   async (error: AxiosError) => {
     if (axios.isAxiosError(error)) {
       const status = error.response?.status;
-      const refreshToken = getCookie('refreshToken');
+      const refreshToken = getCookie(REFRESH_TOKEN);
+
       if (status === 401) {
         if (refreshToken) {
-          deleteCookie('accessToken');
-          deleteCookie('refreshToken');
+          deleteCookie(ACCESS_TOKEN);
+          deleteCookie(REFRESH_TOKEN);
+
           try {
             const response = await postRefresh({ refreshToken });
-            setCookie('accessToken', response.data.accessToken);
-            setCookie('refreshToken', response.data.refreshToken);
+            setCookie(ACCESS_TOKEN, response.data.accessToken);
+            setCookie(REFRESH_TOKEN, response.data.refreshToken);
           } catch (refreshError) {
             window.location.href = '/login';
           }

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

@@ -2,7 +2,6 @@
 
 import { Dropdown, Icon } from '@/system/components';
 import { InfoCardList } from './components/InfoCardList';
-// import { Onboarding } from './containers/Onboarding/Onboarding';
 import { useRef, useState } from 'react';
 import { AddInfoCardDialog } from './components/AddInfoCardDialog';
 import { TouchButton } from '@/components/TouchButton';
@@ -114,8 +113,6 @@ export default function MyInfo() {
           <InfoCardList cardType={currentCardType} />
         </AsyncBoundaryWithQuery>
       </div>
-
-      {/* <Onboarding /> */}
     </div>
   );
 }

src/app/(sidebar)/write/[id]/api/useGetCardDetail/useGetCardDetail.ts

@@ -2,13 +2,15 @@ import { http } from '@/apis/http';
 import { useSuspenseQuery } from '@tanstack/react-query';
 import { JSONContent } from '@tiptap/react';
 import { TagType } from '@/types';
+import { CardGroup, InfoType } from '@/types/info';
 
 export interface GetCardDetailResponse {
   title: string;
   content: JSONContent;
   updatedDate: `${string} ${string}`;
-  cardTypeValueList: string[];
+  cardTypeValueList: Array<InfoType>;
   tagList: Array<TagType>;
+  cardTypeValueGroup: CardGroup;
 }
 
 const getCardDetail = (cardId: number) =>

src/app/(sidebar)/write/[id]/api/usePutCardType/usePutCardType.ts

@@ -0,0 +1,24 @@
+import { useMutation } from '@tanstack/react-query';
+import { http } from '@/apis/http';
+import { CardGroup, InfoType } from '@/types/info';
+
+export interface PutCardTypeRequest {
+  cardTypeValueList: Array<InfoType>;
+  cardTypeValueGroup: CardGroup;
+  cardId: number;
+}
+
+const putCardType = ({ cardId, cardTypeValueList, cardTypeValueGroup }: PutCardTypeRequest) =>
+  http.put({
+    url: `/cards/${cardId}/card-type`,
+    data: {
+      cardTypeValueList,
+      cardTypeValueGroup,
+    },
+  });
+
+export const usePutCardType = (cardId: number) =>
+  useMutation({
+    mutationKey: ['put-card-type'],
+    mutationFn: (cardInfo: Omit<PutCardTypeRequest, 'cardId'>) => putCardType({ ...cardInfo, cardId }),
+  });

src/app/(sidebar)/write/[id]/fetcher/CardTagFetcher.tsx

@@ -7,7 +7,14 @@ import { GetCardDetailResponse } from '@/app/(sidebar)/write/[id]/api/useGetCard
 
 const [CardDetailTagsProvider, useCardDetailTagsContext] = generateContext<GetCardDetailResponse>({
   name: 'card-detail-tag-fetcher',
-  defaultValue: { title: '', cardTypeValueList: [], content: {}, tagList: [], updatedDate: ' ' },
+  defaultValue: {
+    title: '',
+    cardTypeValueList: [],
+    content: {},
+    tagList: [],
+    updatedDate: ' ',
+    cardTypeValueGroup: '내_정보',
+  },
 });
 
 function CardTagFetcher({ children, cardId }: StrictPropsWithChildren<{ cardId: number }>) {

src/app/(sidebar)/write/[id]/hooks/index.ts

@@ -5,62 +5,86 @@ import { useDeleteCardTag } from '../api/useDeleteCardTag/useDeleteCardTag';
 import { useCardDetailTagsContext } from '../fetcher/CardTagFetcher';
 import { GetCardDetailResponse } from '@/app/(sidebar)/write/[id]/api/useGetCardDetail/useGetCardDetail';
 import { useTagsContext } from '../fetcher/TagsFetcher';
+import { usePutCardType, PutCardTypeRequest } from '@/app/(sidebar)/write/[id]/api/usePutCardType/usePutCardType';
+import { InfoType } from '@/types';
 
 export function useWrite(id: number) {
-  const { title: prevTitle, updatedDate, tagList, content, cardTypeValueList } = useCardDetailTagsContext();
+  const {
+    title: prevTitle,
+    updatedDate,
+    tagList,
+    content,
+    cardTypeValueList,
+    cardTypeValueGroup,
+  } = useCardDetailTagsContext();
   const { tags } = useTagsContext();
+  const disabledCount = cardTypeValueGroup === '내_정보' ? 3 : 1;
 
   const personalityTags = useMemo(() => tags.filter((tag) => tag.type === '인성'), [id]);
   const abilityTags = useMemo(() => tags.filter((tag) => tag.type === '역량'), [id]);
   const categoryTags = cardTypeValueList;
 
   const [title, setTitle] = useState<string>(prevTitle || '');
   const [selectedTags, setSelectedTags] = useState<GetCardDetailResponse['tagList']>(tagList);
-  const [selectedCategories, setSelectedCategories] = useState<any[]>(categoryTags);
+  const [selectedCategories, setSelectedCategories] = useState<PutCardTypeRequest['cardTypeValueList']>(categoryTags);
 
   const { mutate: mutatePutCardTitle } = usePutCardTitle(id);
   const { mutate: mutatePostCardTag } = usePostCardTag(id);
   const { mutate: mutateDeleteCardTag } = useDeleteCardTag(id);
+  const { mutate: mutatePutCardType } = usePutCardType(id);
 
   const handlePutCardTitle = useCallback((value: string) => {
     setTitle(value);
     mutatePutCardTitle(value);
   }, []);
 
-  const handlePostCardTag = useCallback(
-    (tag: GetCardDetailResponse['tagList'][number], type: 'category' | 'tag') => {
-      mutatePostCardTag(tag.id, {
-        onSuccess: () => {
-          if (type === 'category') {
-            setSelectedCategories((prev) => [...prev, tag]);
-            return;
-          }
-          setSelectedTags((prev) => [...prev, tag]);
-        },
-      });
-    },
-    [...selectedCategories, ...selectedTags],
-  );
+  const handlePutCardType = useCallback(
+    (tag: InfoType, method: 'put' | 'delete') => {
+      if (method === 'put') {
+        mutatePutCardType(
+          { cardTypeValueList: [...selectedCategories, tag], cardTypeValueGroup },
+          {
+            onSuccess: () => {
+              setSelectedCategories([...selectedCategories, tag]);
+            },
+          },
+        );
+        return;
+      }
 
-  const handleDeleteCardTag = useCallback(
-    (tag: GetCardDetailResponse['tagList'][0], type: 'category' | 'tag') => {
-      mutateDeleteCardTag(tag.id, {
-        onSuccess: () => {
-          if (type === 'category') {
-            setSelectedCategories((prev) => prev.filter((value) => value.id !== tag.id));
-            return;
-          }
-          setSelectedTags((prev) => prev.filter((value) => value.id !== tag.id));
+      mutatePutCardType(
+        { cardTypeValueList: selectedCategories.filter((value) => value !== tag), cardTypeValueGroup },
+        {
+          onSuccess: () => {
+            setSelectedCategories((prev) => prev.filter((value) => value !== tag));
+          },
         },
-      });
+      );
     },
-    [...selectedCategories, ...selectedTags],
+    [selectedCategories],
   );
 
+  const handlePostCardTag = useCallback((tag: GetCardDetailResponse['tagList'][number]) => {
+    mutatePostCardTag(tag.id, {
+      onSuccess: () => {
+        setSelectedTags((prev) => [...prev, tag]);
+      },
+    });
+  }, []);
+
+  const handleDeleteCardTag = useCallback((tag: GetCardDetailResponse['tagList'][number]) => {
+    mutateDeleteCardTag(tag.id, {
+      onSuccess: () => {
+        setSelectedTags((prev) => prev.filter((value) => value.id !== tag.id));
+      },
+    });
+  }, []);
+
   return {
     handlePutCardTitle,
     handlePostCardTag,
     handleDeleteCardTag,
+    handlePutCardType,
     title,
     selectedTags,
     selectedCategories,
@@ -69,5 +93,6 @@ export function useWrite(id: number) {
     categoryTags,
     updatedDate: updatedDate.split(' ')[0].replaceAll(/-/g, '.'),
     content,
+    disabledCount,
   };
 }