feat : 작성 페이지 api 연동 (#255)

* feat : axios 전역 핸들러 처리

* feat : api 호출 로직 작성

* env : yarn 버전 업그레이드

* chore : 서버에서 오는 에러에 맞게 수정

* feat : 편지 작성 훅 개발

* env : 리엑트 쿼리 설치

* feat : api 커스텀 에러 설정 및 에러 반환 로직 구현

* feat : 편지 전송

* chore : 사용하지 않는 의존성 제거

* chore : 훅 index 경로 수정

* feat : 쿼리 프로바이더 추가

* env : tanksquery 버전 업그레이드

* feat : 전송 로직 수정

.yarnrc.yml

@@ -1,3 +1,3 @@
 nodeLinker: pnp
 
-yarnPath: .yarn/releases/yarn-4.5.2.cjs
+yarnPath: .yarn/releases/yarn-4.5.3.cjs

package.json

@@ -16,7 +16,8 @@
         "gen-pwa": "vite build && vite preview"
     },
     "dependencies": {
-        "@tanstack/react-query": "^5.60.2",
+        "@tanstack/react-query": "^5.62.2",
+        "@tanstack/react-query-devtools": "^5.62.2",
         "@turf/turf": "^7.1.0",
         "axios": "^1.7.7",
         "canvas-confetti": "^1.9.3",
@@ -29,6 +30,7 @@
         "react-dom": "^18.3.1",
         "react-icons": "^5.3.0",
         "react-map-gl": "^7.1.7",
+        "react-query": "^3.39.3",
         "react-router-dom": "^7.0.1",
         "react-spring": "^9.7.4",
         "react-spring-bottom-sheet": "3.5.0-alpha.0",
@@ -90,7 +92,7 @@
         "vite-plugin-pwa": "^0.21.0",
         "vite-plugin-svgr": "^4.3.0"
     },
-    "packageManager": "[email protected].2",
+    "packageManager": "[email protected].3",
     "eslintConfig": {
         "extends": [
             "plugin:storybook/recommended"

src/App.tsx

@@ -1,12 +1,17 @@
 import ToastContainer from './components/Common/ToastContainer/ToastContainer';
 import { RouterProvider } from 'react-router-dom';
 import { router } from '@/router';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 
 export const App = () => {
+    const queryClient = new QueryClient();
+
     return (
-        <>
+        <QueryClientProvider client={queryClient}>
             <ToastContainer />
             <RouterProvider router={router} />
-        </>
+            <ReactQueryDevtools initialIsOpen={false} />
+        </QueryClientProvider>
     );
 };

src/components/CreatLetterPage/PostLetterCotainer/PostLetterCotainer.tsx

@@ -26,8 +26,8 @@ export const PostLetterCotainer = () => {
 
     const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         const inputValue = e.target.value;
-        if (inputValue.length > 100) {
-            addToast('제목은 100자 이상 쓸 수 없습니다.', 'warning');
+        if (inputValue.length > 20) {
+            addToast('제목은 20자 이상 쓸 수 없습니다.', 'warning');
         } else {
             setTitle(inputValue);
         }

src/components/SelectItemPage/ItemGroup/ItemGroup.tsx

@@ -7,7 +7,7 @@ type ItemGroupProps = {
     isLabel: boolean;
     labels: LabelProps[];
     onLabelSelect: (label: number) => void;
-    selectedLabels: number | null;
+    selectedLabel: number | null;
     keywordProps: {
         title: string;
         subTitle: string;
@@ -21,7 +21,7 @@ export const ItemGroup: React.FC<ItemGroupProps> = ({
     isLabel,
     labels,
     onLabelSelect,
-    selectedLabels,
+    selectedLabel,
     keywordProps,
     onKeywordSelect,
     selectedKeywords
@@ -30,7 +30,7 @@ export const ItemGroup: React.FC<ItemGroupProps> = ({
         <LabelList
             labels={labels}
             onLabelSelect={onLabelSelect}
-            selectedLabels={selectedLabels}
+            selectedLabel={selectedLabel}
         />
     ) : (
         <KeywordList

src/components/SelectItemPage/LabelList/LabelList.tsx

@@ -4,13 +4,13 @@ import { Label } from '@/components/Common/BottleLetter/Label/Label';
 
 type LableListProps = {
     labels: LabelProps[];
-    selectedLabels: number | null;
+    selectedLabel: number | null;
     onLabelSelect: (index: number) => void;
 };
 
 export const LabelList = ({
     labels,
-    selectedLabels,
+    selectedLabel,
     onLabelSelect
 }: LableListProps) => {
     return (
@@ -23,7 +23,7 @@ export const LabelList = ({
                 >
                     <Label
                         imgSrc={label.imgSrc}
-                        isActive={selectedLabels === idx}
+                        isActive={selectedLabel === idx}
                     />
                 </div>
             ))}

src/components/SelectItemPage/SelectItem/SelectItem.tsx

@@ -3,32 +3,96 @@ import { SelectToggle } from '../SelectToggle/SelectToggle';
 import { Margin } from '@/components/Common/Margin/Margin';
 import { SliderMenuContainer } from '@/components/Common/SliderMenuContainer/SliderMenuContainer';
 import { CreateButton } from '../CreateButton/CreateButton';
-import { useNavigate } from 'react-router-dom';
 import { LabelProps } from '@/types/label';
 import { ItemGroup } from '../ItemGroup/ItemGroup';
+import { useCreateLetter } from '@/hooks/useCreateLetter';
+import { useLocalStorage, useToastStore } from '@/hooks';
 
 type SelectItemProps = {
     isActive: boolean;
     setIsActive: (isActive: boolean) => void;
 };
 
+const testLable: LabelProps[] = [
+    {
+        imgSrc: 'public/라벨_샘플.png'
+    },
+    {
+        imgSrc: 'public/라벨_샘플.png'
+    },
+    {
+        imgSrc: 'public/라벨_샘플.png'
+    },
+    {
+        imgSrc: 'public/라벨_샘플.png'
+    },
+    {
+        imgSrc: 'public/라벨_샘플.png'
+    }
+];
+
+const testKeywordListProps = {
+    title: 'Frontend Technologies',
+    subTitle: 'Trending Tools',
+    keywordGroup: [
+        { content: 'React' },
+        { content: 'TypeScript' },
+        { content: 'Tailwind CSS' },
+        { content: 'Next.js' },
+        { content: 'jquey' },
+        { content: 'docker' },
+        { content: 'xocde' },
+        { content: 'Next.js' }
+    ]
+};
+
 export const SelectItem = ({ isActive, setIsActive }: SelectItemProps) => {
     const [isLabel, setIsLabel] = useState(true);
-    const [selectedLabels, setSelectedLabels] = useState<number | null>(null);
+    const [selectedLabel, setSelectedLabel] = useState<number | null>(null);
     const [selectedKeywords, setSelectedKeywords] = useState<number[]>([]);
 
-    const navigate = useNavigate();
+    const { mutate } = useCreateLetter();
+
+    const { storedValue: title } = useLocalStorage<string>('title', '');
+    const { storedValue: letter } = useLocalStorage<string>('letter', '');
+    const { storedValue: letterContent } = useLocalStorage<string>(
+        'letterContent',
+        ''
+    );
+    const { storedValue: font } = useLocalStorage<string>('font', '');
+
+    const keywords = selectedKeywords
+        .map((x) => testKeywordListProps.keywordGroup[x]?.content)
+        .filter((content): content is string => content !== undefined);
+
+    const { addToast } = useToastStore();
+
+    const handdleClick = () => {
+        if (!selectedLabel || selectedKeywords.length === 0) {
+            addToast('라벨과 키워드를 선택해주세요.', 'error');
+            return;
+        }
+
+        mutate({
+            title: title,
+            content: letterContent,
+            font: font,
+            paper: letter,
+            keywords: keywords,
+            label: testLable[selectedLabel].imgSrc
+        });
+    };
 
     useEffect(() => {
-        if (selectedLabels && selectedKeywords.length > 0) {
+        if (selectedLabel && selectedKeywords.length > 0) {
             setIsActive(true);
         } else {
             setIsActive(false);
         }
-    }, [selectedLabels, selectedKeywords]);
+    }, [selectedLabel, selectedKeywords]);
 
     const handleLabelSelection = (label: number) => {
-        setSelectedLabels(label);
+        setSelectedLabel(label);
     };
 
     const handleKeywordSelection = (keyword: number) => {
@@ -39,39 +103,6 @@ export const SelectItem = ({ isActive, setIsActive }: SelectItemProps) => {
         );
     };
 
-    const testLable: LabelProps[] = [
-        {
-            imgSrc: 'public/라벨_샘플.png'
-        },
-        {
-            imgSrc: 'public/라벨_샘플.png'
-        },
-        {
-            imgSrc: 'public/라벨_샘플.png'
-        },
-        {
-            imgSrc: 'public/라벨_샘플.png'
-        },
-        {
-            imgSrc: 'public/라벨_샘플.png'
-        }
-    ];
-
-    const testKeywordListProps = {
-        title: 'Frontend Technologies',
-        subTitle: 'Trending Tools',
-        keywordGroup: [
-            { content: 'React' },
-            { content: 'TypeScript' },
-            { content: 'Tailwind CSS' },
-            { content: 'Next.js' },
-            { content: 'React' },
-            { content: 'TypeScript' },
-            { content: 'Tailwind CSS' },
-            { content: 'Next.js' }
-        ]
-    };
-
     return (
         <div className="relative">
             <SliderMenuContainer
@@ -81,7 +112,7 @@ export const SelectItem = ({ isActive, setIsActive }: SelectItemProps) => {
                         isActive={isActive}
                         handleClickHandler={() => {
                             if (isActive) {
-                                navigate('/letter/success');
+                                handdleClick();
                             }
                         }}
                     >
@@ -96,7 +127,7 @@ export const SelectItem = ({ isActive, setIsActive }: SelectItemProps) => {
                     isLabel={isLabel}
                     labels={testLable}
                     onLabelSelect={handleLabelSelection}
-                    selectedLabels={selectedLabels}
+                    selectedLabel={selectedLabel}
                     keywordProps={testKeywordListProps}
                     onKeywordSelect={handleKeywordSelection}
                     selectedKeywords={selectedKeywords}

src/hooks/useCreateLetter.ts

@@ -0,0 +1,23 @@
+import { useMutation } from '@tanstack/react-query';
+import { createLetter } from '@/service/letter/create/createLetter';
+import { useToastStore } from '@/hooks/useToastStore';
+import { LetterType } from '@/types/letter';
+import { ApiErrorType } from './../types/apiError';
+import { useNavigate } from 'react-router-dom';
+
+export const useCreateLetter = () => {
+    const { addToast } = useToastStore();
+    const navigate = useNavigate();
+
+    return useMutation({
+        mutationKey: ['createLetter'],
+        mutationFn: (letterData: LetterType) => createLetter(letterData),
+
+        onSuccess: () => {
+            navigate('/letter/success');
+        },
+        onError: (error: ApiErrorType) => {
+            addToast(`${error.message}`, 'warning');
+        }
+    });
+};

src/hooks/useLocalStorage.ts

@@ -1,14 +1,14 @@
 import { useState } from 'react';
 import { useToastStore } from './useToastStore';
 
-export function useLocalStorage<T>(key: string, initialValue: T) {
+export function useLocalStorage<T>(key: string, initialValue?: T) {
     const { addToast } = useToastStore();
     const [storedValue, setStoredValue] = useState<T>(() => {
         try {
             const item = localStorage.getItem(key);
             return item ? JSON.parse(item) : initialValue;
         } catch (error) {
-            addToast('정보를 불러오는데 실패했습니다.', 'success');
+            addToast('정보를 불러오는데 실패했습니다.', 'error');
             console.error(error);
             return initialValue;
         }

src/main.tsx

@@ -1,16 +1,10 @@
-import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import './index.css';
 import { App } from '@/App';
 import './mocks';
 
-const queryClient = new QueryClient();
-
 createRoot(document.getElementById('root')!).render(
-    <StrictMode>
-        <QueryClientProvider client={queryClient}>
-            <App />
-        </QueryClientProvider>
-    </StrictMode>
+    <div>
+        <App />
+    </div>
 );

src/service/api.ts

@@ -1,6 +1,7 @@
 import axios, { AxiosRequestConfig, AxiosInstance } from 'axios';
 import { tokenStorage } from './auth/tokenStorage';
 import { refreshAccessToken } from '@/service/auth/refreshAccessToken';
+import { formatApiError } from '@/util/formatApiError';
 
 const baseUrl = import.meta.env.VITE_API_URL as string;
 
@@ -50,5 +51,18 @@ export const defaultApi = (option?: AxiosRequestConfig): AxiosInstance => {
         }
     );
 
+    //에러처리
+    instance.interceptors.response.use(
+        (response) => {
+            if (response.data.isSuccess === false) {
+                throw formatApiError(response.data.code, response.data.message);
+            }
+            return response;
+        },
+        (error) => {
+            throw formatApiError('ERROR500', '네트워크 요청에 실패했습니다.');
+        }
+    );
+
     return instance;
 };

src/service/letter/create/createLetter.ts

@@ -0,0 +1,23 @@
+import { LetterType, CreateLetterResponseType } from '@/types/letter';
+import { defaultApi } from '@/service/api';
+
+export const createLetter = async ({
+    title,
+    content,
+    keywords,
+    font,
+    paper,
+    label
+}: LetterType): Promise<CreateLetterResponseType> => {
+    const api = defaultApi();
+
+    const response = await api.post('/letters', {
+        title,
+        content,
+        keywords,
+        font,
+        paper,
+        label
+    });
+    return response.data;
+};

src/types/apiError.ts

@@ -0,0 +1,5 @@
+export type ApiErrorType = {
+    isSuccess: boolean;
+    code: string;
+    message: string;
+};