From a16eb821d915fdace0e3a4ed483a430bd76aa644 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=82=A8=EC=A0=95=EC=9A=B1?=
 <113816822+HelloWook@users.noreply.github.com>
Date: Mon, 9 Dec 2024 16:35:10 +0900
Subject: [PATCH] =?UTF-8?q?feat=20:=20=EC=A7=80=EB=8F=84=20=ED=8E=B8?=
 =?UTF-8?q?=EC=A7=80=20=EC=9E=91=EC=84=B1=20(#395)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* chore : nav z-index 수정

* chore : 알람 수정

* feat : 지도 편지 생성

* feat : 지도 편지 작성 api 연동

* chore : 수정

* chore : 안 쓰는 error 수정
---
 .../Common/NavigationBar/NavigationBar.tsx    |   2 +-
 src/components/Common/TextArea/TextArea.tsx   |   2 +-
 .../LetterInputForm/LetterInputForm.tsx       |  15 +-
 .../PostLetterCotainer/PostLetterCotainer.tsx |   8 +-
 .../CreateMapLetterCotainer.tsx               | 132 ++++++++++++++++++
 src/hooks/useCreateMapLetter.ts               |  27 ++++
 src/hooks/usePushNotification .ts             |  13 +-
 src/pages/Map/Create/CreateMapLetterPage.tsx  |  10 ++
 src/pages/Map/Select/MapSelectItemPage.tsx    | 118 ++++++++++++++++
 src/router.tsx                                |   8 +-
 src/service/letter/create/createMapLetter.ts  |  44 ++++++
 11 files changed, 361 insertions(+), 18 deletions(-)
 create mode 100644 src/components/CreateMapLetter/CreateMapLetterCotainer/CreateMapLetterCotainer.tsx
 create mode 100644 src/hooks/useCreateMapLetter.ts
 create mode 100644 src/pages/Map/Create/CreateMapLetterPage.tsx
 create mode 100644 src/pages/Map/Select/MapSelectItemPage.tsx
 create mode 100644 src/service/letter/create/createMapLetter.ts

diff --git a/src/components/Common/NavigationBar/NavigationBar.tsx b/src/components/Common/NavigationBar/NavigationBar.tsx
index dad40f6c..2ece32ce 100644
--- a/src/components/Common/NavigationBar/NavigationBar.tsx
+++ b/src/components/Common/NavigationBar/NavigationBar.tsx
@@ -18,7 +18,7 @@ export const NavigationBar = () => {
     ];
 
     return (
-        <nav className="flex justify-around bg-white border-y p-3 max-w-[473px] fixed min-w-[375px] w-full bottom-0 z-10">
+        <nav className="flex justify-around bg-white border-y p-3 max-w-[473px] fixed min-w-[375px] w-full bottom-0 z-[9999]">
             {navItems.map((item) => (
                 <div className="flex justify-center flex-1" key={item.id}>
                     <NavigationItem
diff --git a/src/components/Common/TextArea/TextArea.tsx b/src/components/Common/TextArea/TextArea.tsx
index fb346dc7..1f913c38 100644
--- a/src/components/Common/TextArea/TextArea.tsx
+++ b/src/components/Common/TextArea/TextArea.tsx
@@ -110,7 +110,7 @@ export const TextArea = ({
                     lineHeight: lineHeight
                 }}
                 ref={textAreaRef}
-                placeholder="편지를 작성하세요..."
+                placeholder="편지를 작성하세요."
                 value={value}
                 onChange={handleInputChange}
                 readOnly={isReadonly}
diff --git a/src/components/CreatLetterPage/LetterInputForm/LetterInputForm.tsx b/src/components/CreatLetterPage/LetterInputForm/LetterInputForm.tsx
index 7f9777ee..3bbe41de 100644
--- a/src/components/CreatLetterPage/LetterInputForm/LetterInputForm.tsx
+++ b/src/components/CreatLetterPage/LetterInputForm/LetterInputForm.tsx
@@ -12,6 +12,8 @@ type LettetProps = {
     letter: string;
     setFont: React.Dispatch<React.SetStateAction<string>>;
     setLetter: React.Dispatch<React.SetStateAction<string>>;
+    description?: string;
+    setDescription?: React.Dispatch<React.SetStateAction<string>>;
 };
 
 export const LetterInputForm = ({
@@ -22,7 +24,9 @@ export const LetterInputForm = ({
     font,
     letter,
     setFont,
-    setLetter
+    setLetter,
+    description,
+    setDescription
 }: LettetProps) => {
     return (
         <>
@@ -45,6 +49,15 @@ export const LetterInputForm = ({
                         font={font}
                     />
                 </div>
+
+                {description && setDescription && (
+                    <input
+                        value={description}
+                        onChange={(e) => setDescription(e.target.value)}
+                        placeholder="힌트를 입력해주세요"
+                        className={`z-10 w-full bg-transparent border-none focus:border-none focus:outline-none text-wrap ${font ? font : 'font-sans'}`}
+                    />
+                )}
             </div>
             <SelectSlider
                 font={font}
diff --git a/src/components/CreatLetterPage/PostLetterCotainer/PostLetterCotainer.tsx b/src/components/CreatLetterPage/PostLetterCotainer/PostLetterCotainer.tsx
index c1bc9c6a..dadc2e81 100644
--- a/src/components/CreatLetterPage/PostLetterCotainer/PostLetterCotainer.tsx
+++ b/src/components/CreatLetterPage/PostLetterCotainer/PostLetterCotainer.tsx
@@ -25,10 +25,12 @@ export const PostLetterCotainer = () => {
 
     const { addToast } = useToastStore();
 
-    const [title, setTitle] = useState<string>(storedTitle || ' ');
+    const [title, setTitle] = useState<string>(
+        storedTitle || '제목을 입력해주세요'
+    );
     const [letter, setLetter] = useState<string>(storedLetter || '1');
     const [letterContent, setLetterContent] = useState<string>(
-        storedContent || ' '
+        storedContent || '내용을 입력해주세요'
     );
     const [font, setFont] = useState<string>(storedFont || 'initial');
 
@@ -55,7 +57,7 @@ export const PostLetterCotainer = () => {
                     navigate(-1);
                 }}
                 handleSuccesClick={() => {
-                    if (!title.trim() && !letterContent.trim()) {
+                    if (!title.trim() || !letterContent.trim()) {
                         addToast(
                             '공백을 제외한 제목과 내용을 입력해주세요',
                             'warning'
diff --git a/src/components/CreateMapLetter/CreateMapLetterCotainer/CreateMapLetterCotainer.tsx b/src/components/CreateMapLetter/CreateMapLetterCotainer/CreateMapLetterCotainer.tsx
new file mode 100644
index 00000000..489a9864
--- /dev/null
+++ b/src/components/CreateMapLetter/CreateMapLetterCotainer/CreateMapLetterCotainer.tsx
@@ -0,0 +1,132 @@
+import { Margin } from '@/components/Common/Margin/Margin';
+import { TextArea } from '@/components/Common/TextArea/TextArea';
+import { TopBar } from '@/components/Common/TopBar/TopBar';
+import { ThemeWrapper } from '@/components/CreatLetterPage/ThemeWrapper/ThemeWrapper';
+import { SelectSlider } from '@/components/SelectItemPage/SelectSlider/SelectSlider';
+import { useAutoSave, useToastStore } from '@/hooks';
+import React, { useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { useLocalStorage } from '@/hooks/useLocalStorage'; // 로컬 스토리지 훅 가져오기
+
+const CreateMapLetterCotainer = () => {
+    const { addToast } = useToastStore();
+
+    const { lat, lot } = useParams<{ lat: string; lot: string }>();
+
+    // useLocalStorage 훅을 사용하여 로컬 저장소에 값 저장 및 불러오기
+    const { setValue: saveTitle, storedValue: storedTitle } = useLocalStorage(
+        'maptitle',
+        ''
+    );
+    const { setValue: saveLetterContent, storedValue: storedContent } =
+        useLocalStorage('mapcontent', '');
+    const { setValue: saveFont, storedValue: storedFont } = useLocalStorage(
+        'mapfont',
+        'initial'
+    );
+    const { setValue: saveLetter, storedValue: storedLetter } = useLocalStorage(
+        'mapletter',
+        '1'
+    );
+    const { setValue: saveDescription, storedValue: storedDescription } =
+        useLocalStorage('mapdescription', '');
+
+    // 위도와 경도를 로컬 스토리지에 저장
+    localStorage.setItem('maplat', lat?.slice(1) || '');
+    localStorage.setItem('maplot', lat?.slice(1) || '');
+
+    // 상태 관리
+    const [title, setTitle] = useState<string>(storedTitle || '');
+    const [letter, setLetter] = useState<string>(storedLetter || '1');
+    const [letterContent, setLetterContent] = useState<string>(
+        storedContent || ''
+    );
+    const [font, setFont] = useState<string>(storedFont || 'initial');
+    const [description, setDescription] = useState<string>(
+        storedDescription || ''
+    );
+
+    const navigate = useNavigate();
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const inputValue = e.target.value;
+        setTitle(inputValue);
+    };
+
+    const saveLetterData = () => {
+        saveTitle(title);
+        saveLetterContent(letterContent);
+        saveFont(font);
+        saveLetter(letter);
+        saveDescription(description);
+    };
+
+    useAutoSave(saveLetterData, 50000);
+
+    return (
+        <>
+            <TopBar
+                handleBackClick={() => {
+                    navigate(-1);
+                }}
+                handleSuccesClick={() => {
+                    if (
+                        !title.trim() ||
+                        !letterContent.trim() ||
+                        !description.trim()
+                    ) {
+                        addToast(
+                            '공백을 제외한 제목과 내용을 입력해주세요',
+                            'warning'
+                        );
+                        return;
+                    }
+                    saveLetterData();
+                    navigate('/letter/map/select');
+                }}
+            />
+
+            <ThemeWrapper themeId={Number(letter)}>
+                <>
+                    <Margin top={20} />
+                    <div className="relative flex flex-col justify-center w-9/12 m-auto py-9">
+                        <input
+                            onChange={handleChange}
+                            value={title}
+                            type="text"
+                            placeholder="제목을 입력해주세요"
+                            className={`z-10 w-full bg-transparent border-none focus:border-none focus:outline-none text-wrap ${font ? font : 'font-sans'}`}
+                            maxLength={20}
+                        />
+                        <img src={'/to_line.f4c129e6.svg'} />
+
+                        <div className="relative z-10">
+                            <TextArea
+                                value={letterContent}
+                                setValue={setLetterContent}
+                                font={font}
+                            />
+                        </div>
+
+                        <input
+                            value={description}
+                            onChange={(e) => setDescription(e.target.value)}
+                            placeholder="힌트를 입력해주세요"
+                            className={`z-10 w-full bg-transparent border-none focus:border-none focus:outline-none text-wrap ${font ? font : 'font-sans'}`}
+                        />
+                        <img src={'/to_line.f4c129e6.svg'} />
+                    </div>
+
+                    <SelectSlider
+                        font={font}
+                        letter={letter}
+                        setFont={setFont}
+                        setLetter={setLetter}
+                    />
+                </>
+            </ThemeWrapper>
+        </>
+    );
+};
+
+export default CreateMapLetterCotainer;
diff --git a/src/hooks/useCreateMapLetter.ts b/src/hooks/useCreateMapLetter.ts
new file mode 100644
index 00000000..03896c14
--- /dev/null
+++ b/src/hooks/useCreateMapLetter.ts
@@ -0,0 +1,27 @@
+import { useMutation } from '@tanstack/react-query';
+import { createMapLetter } from '@/service/letter/create/createMapLetter';
+import { useToastStore } from './useToastStore';
+import { useNavigate } from 'react-router-dom';
+
+export const useCreateMapLetter = () => {
+    const { addToast } = useToastStore();
+    const navigate = useNavigate();
+    const mutation = useMutation({
+        mutationFn: createMapLetter,
+        onSuccess: () => {
+            addToast('지도 편지를 전송했습니다.', 'success');
+            navigate('/letter/success');
+            localStorage.removeItem('maptitle');
+            localStorage.removeItem('mapcontent');
+            localStorage.removeItem('mapdescription');
+            localStorage.removeItem('mapfont');
+            localStorage.removeItem('mapletter');
+            localStorage.removeItem('maplat');
+            localStorage.removeItem('maplot');
+        },
+        onError: () => {
+            addToast('지도 편지를 실패했습니다.', 'error');
+        }
+    });
+    return mutation;
+};
diff --git a/src/hooks/usePushNotification .ts b/src/hooks/usePushNotification .ts
index ed6e85b8..452fbfba 100644
--- a/src/hooks/usePushNotification .ts	
+++ b/src/hooks/usePushNotification .ts	
@@ -7,32 +7,23 @@ export const usePushNotification = () => {
     const { addToast } = useToastStore();
 
     useEffect(() => {
-        const isNotificationSet = localStorage.getItem('isNofication');
-
-        if (isNotificationSet === 'true') {
-            return;
-        }
-
-        // 알림 권한 요청
         Notification.requestPermission().then((permission) => {
             if (permission === 'granted') {
                 getToken(firebaseMessaging, {
                     vapidKey: import.meta.env.VITE_FCM_VAPID_KEY
                 })
                     .then((token) => {
-                        localStorage.setItem('isNofication', 'true');
+                        addToast('알람 설정을 성공했습니다.', 'success');
                         postToken({ token });
                     })
                     .catch((error) => {
-                        addToast('알람 설정에 실패했습니다.', 'error');
                         console.error(error);
                     });
             } else {
-                addToast('알람 설정을 거부했습니다.', 'success');
+                addToast('알람 설정을 거부했습니다.', 'warning');
             }
         });
 
-        // 알림 메시지를 받을 때마다 처리
         onMessage(firebaseMessaging, (payload) => {
             if (payload.notification) {
                 addToast(`${payload.notification.body}`, 'success');
diff --git a/src/pages/Map/Create/CreateMapLetterPage.tsx b/src/pages/Map/Create/CreateMapLetterPage.tsx
new file mode 100644
index 00000000..401f8a72
--- /dev/null
+++ b/src/pages/Map/Create/CreateMapLetterPage.tsx
@@ -0,0 +1,10 @@
+import CreateMapLetterCotainer from '@/components/CreateMapLetter/CreateMapLetterCotainer/CreateMapLetterCotainer';
+import React from 'react';
+
+export const CreateMapLetterPage = () => {
+    return (
+        <div className="w-full h-full">
+            <CreateMapLetterCotainer />
+        </div>
+    );
+};
diff --git a/src/pages/Map/Select/MapSelectItemPage.tsx b/src/pages/Map/Select/MapSelectItemPage.tsx
new file mode 100644
index 00000000..d258fdaf
--- /dev/null
+++ b/src/pages/Map/Select/MapSelectItemPage.tsx
@@ -0,0 +1,118 @@
+import { Margin } from '@/components/Common/Margin/Margin';
+import { SliderMenuContainer } from '@/components/Common/SliderMenuContainer/SliderMenuContainer';
+import { TopBar } from '@/components/Common/TopBar/TopBar';
+import { AnimationBottle } from '@/components/SelectItemPage/AnimationBottle/AnimationBottle';
+import { CreateButton } from '@/components/SelectItemPage/CreateButton/CreateButton';
+import React, { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { LabelProps } from '@/types/label';
+import { LabelList } from '@/components/SelectItemPage/LabelList/LabelList';
+import { useCreateMapLetter } from '@/hooks/useCreateMapLetter';
+import { useLocalStorage } from '@/hooks';
+
+const testLable: LabelProps[] = [
+    {
+        imgSrc: '/라벨_샘플_01.png'
+    },
+    {
+        imgSrc: '/라벨_샘플_02.png'
+    }
+];
+
+export const MapSelectItemPage = () => {
+    const navigate = useNavigate();
+
+    // 로컬스토리지에서 데이터 가져오기
+    const { storedValue: title } = useLocalStorage('maptitle', '');
+    const { storedValue: content } = useLocalStorage('mapcontent', '');
+    const { storedValue: description } = useLocalStorage('mapdescription', '');
+    const { storedValue: font } = useLocalStorage('mapfont', 'initial');
+    const { storedValue: letter } = useLocalStorage('mapletter', '1');
+    const { storedValue: latitude } = useLocalStorage('maplat', '0');
+    const { storedValue: longitude } = useLocalStorage('maplot', '0');
+
+    // latitude와 longitude를 숫자로 변환
+    const latitudeValue = Number(latitude);
+    const longitudeValue = Number(longitude);
+
+    const [selectedLabel, setSelectedLabel] = useState<number | null>(null);
+    const [isActive, setIsActive] = useState(false);
+
+    const { mutate } = useCreateMapLetter();
+
+    const handleClick = () => {
+        console.log('보내기 버튼 클릭됨!');
+        if (selectedLabel === null) {
+            return;
+        }
+        mutate({
+            title,
+            content,
+            description,
+            latitude: latitudeValue,
+            longitude: longitudeValue,
+            font,
+            paper: letter,
+            label: testLable[selectedLabel].imgSrc
+        });
+    };
+
+    useEffect(() => {
+        if (selectedLabel !== null) {
+            setIsActive(true);
+        } else {
+            setIsActive(false);
+        }
+    }, [selectedLabel]);
+
+    const onLabelSelect = (label: number) => {
+        setSelectedLabel(label);
+    };
+
+    return (
+        <div className="">
+            <TopBar
+                handleBackClick={() => {
+                    navigate(-1);
+                }}
+            />
+
+            <h2
+                className={`text-2xl text-center mt-[25%] transition-opacity duration-1000 ${
+                    isActive === true ? 'opacity-100' : 'opacity-0'
+                }`}
+                style={{ minHeight: '2.5rem' }}
+            >
+                이제 떠날 준비가 되셨나요
+            </h2>
+
+            <AnimationBottle />
+
+            <div className="relative">
+                <SliderMenuContainer
+                    snapPoints={() => [80, window.innerHeight * 0.6]}
+                    header={
+                        <CreateButton
+                            isActive={isActive}
+                            handleClickHandler={() => {
+                                if (isActive) {
+                                    handleClick();
+                                }
+                            }}
+                        >
+                            {'보내기'}
+                        </CreateButton>
+                    }
+                >
+                    <LabelList
+                        labels={testLable} // 라벨 리스트
+                        onLabelSelect={onLabelSelect} // 라벨 선택 시 호출될 함수
+                        selectedLabel={selectedLabel} // 선택된 라벨 정보 전달
+                    />
+
+                    <Margin bottom={30} />
+                </SliderMenuContainer>
+            </div>
+        </div>
+    );
+};
diff --git a/src/router.tsx b/src/router.tsx
index eb0c87d0..40925bae 100644
--- a/src/router.tsx
+++ b/src/router.tsx
@@ -28,6 +28,8 @@ import { tokenStorage } from './service/auth/tokenStorage';
 import { AuthProvider } from './AuthProvider';
 import { Container } from '@/components/Common/Container/Container';
 import { Margin } from './components/Common/Margin/Margin';
+import { CreateMapLetterPage } from './pages/Map/Create/CreateMapLetterPage';
+import { MapSelectItemPage } from './pages/Map/Select/MapSelectItemPage';
 
 type RouteProps = {
     children: ReactNode;
@@ -152,7 +154,7 @@ export const router = createBrowserRouter([
             </ProtectedRoute>
         ),
         children: [
-            { path: 'map/:lat/:lot/create', element: <CreateLetterPage /> },
+            { path: 'map/:lat/:lot/create', element: <CreateMapLetterPage /> },
             {
                 path: 'keyword/reply/create/:letterId',
                 element: <CreateLetterPage />
@@ -175,6 +177,10 @@ export const router = createBrowserRouter([
             {
                 path: '/letter/keyword/:letterType/:dataType/:letterId',
                 element: <KeywordLetterDetailPage />
+            },
+            {
+                path: '/letter/map/select',
+                element: <MapSelectItemPage />
             }
         ]
     },
diff --git a/src/service/letter/create/createMapLetter.ts b/src/service/letter/create/createMapLetter.ts
new file mode 100644
index 00000000..24cdf8a7
--- /dev/null
+++ b/src/service/letter/create/createMapLetter.ts
@@ -0,0 +1,44 @@
+import { defaultApi } from '@/service/api';
+
+type RequestBody = {
+    title: string;
+    content: string;
+    description: string;
+    latitude: number;
+    longitude: number;
+    font: string;
+    paper: string;
+    label: string;
+};
+
+type ResponseBody = {
+    isSuccess: boolean;
+    code: string;
+    message: string;
+    result: string;
+};
+
+export const createMapLetter = async ({
+    title,
+    content,
+    description,
+    latitude,
+    longitude,
+    font,
+    paper,
+    label
+}: RequestBody): Promise<ResponseBody> => {
+    const api = defaultApi();
+
+    const response = await api.post('/map/public', {
+        title,
+        content,
+        description,
+        latitude,
+        longitude,
+        font,
+        paper,
+        label
+    });
+    return response.data;
+};