feat : fcm 연동 (#335)

* chore : 이미지 경로 수정 * chore : 필요 없는 상태 제거 * feat : 빌송 시 로컬스토리지 값 삭제 * style : 스타일 수정 * chore : 성공시 삭제하도록 변경 * style : nav 및 메인 헤더 수정 * feat : 필요 의존성 설치 * feat : 알람 설정 구현 * chore : 이미지 경로 수정 * chore : 필요 없는 상태 제거 * feat : 빌송 시 로컬스토리지 값 삭제 * style : 스타일 수정 * chore : 성공시 삭제하도록 변경 * style : nav 및 메인 헤더 수정 * feat : 필요 의존성 설치 * feat : 알람 설정 구현 * ci : ci 빌드 메시지 강조
prgrms-web-devcourse-final-project · Dec 8, 2024 · 161fbd8 · 161fbd8
1 parent 4c48b94
commit 161fbd8
Show file tree

Hide file tree

Showing 22 changed files with 2,275 additions and 90 deletions.
diff --git a/.github/workflows/check.yml b/.github/workflows/check.yml
@@ -25,4 +25,4 @@ jobs:
               env:
                   GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
               with:
-                  message: '✅ Build 성공!'
+                  message: '**✅ Build 성공!**'
diff --git a/.pnp.cjs b/.pnp.cjs
diff --git a/package.json b/package.json
@@ -24,6 +24,7 @@
         "classnames": "^2.5.1",
         "clsx": "^2.1.1",
         "file-saver": "^2.0.5",
+        "firebase": "^11.0.2",
         "html2canvas": "^1.4.1",
         "maplibre-gl": "^4.7.1",
         "postcss-custom-properties-fallback": "^1.0.2",

diff --git a/public/firebase-messaging-sw.js b/public/firebase-messaging-sw.js
@@ -0,0 +1,11 @@
+importScripts('https://www.gstatic.com/firebasejs/8.7.1/firebase-app.js');
+importScripts('https://www.gstatic.com/firebasejs/8.7.1/firebase-messaging.js');
+
+firebase.initializeApp({
+    apiKey: 'AIzaSyBodJm9QErZvWuaOdM6Af1H82LA-8ZcmhE',
+    projectId: 'fcm-test-51b74',
+    messagingSenderId: '10805910843',
+    appId: '1:10805910843:web:e88131c7c1ef503822eb1e'
+});
+
+const messaging = firebase.messaging();
diff --git a/src/components/Common/ItemSlider/ItemSlider.tsx b/src/components/Common/ItemSlider/ItemSlider.tsx
@@ -23,7 +23,6 @@ type ItemSliderProps = {
     spaceBetween?: number;
     value: string;
     setValue: (value: string) => void;
-    setTheme: (themeId: number) => void;
 };
 
 export const ItemSlider = ({
@@ -33,8 +32,7 @@ export const ItemSlider = ({
     height,
     spaceBetween = 10,
     value,
-    setValue,
-    setTheme
+    setValue
 }: ItemSliderProps) => {
     const [clickedItemId, setClickedItemId] = useState<string | null>(null);
 
@@ -68,7 +66,6 @@ export const ItemSlider = ({
                         onClick={() => {
                             setClickedItemId(item.id);
                             setValue(item.id);
-                            setTheme(Number(item.id));
                         }}
                     >
                         <img

diff --git 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]">
+        <nav className="flex justify-around bg-white border-y p-3 max-w-[473px] fixed min-w-[375px] w-full bottom-0 z-10">
             {navItems.map((item) => (
                 <div className="flex justify-center flex-1" key={item.id}>
                     <NavigationItem

diff --git a/src/components/CreatLetterPage/LetterInputForm/LetterInputForm.tsx b/src/components/CreatLetterPage/LetterInputForm/LetterInputForm.tsx
@@ -12,7 +12,6 @@ type LettetProps = {
     letter: string;
     setFont: React.Dispatch<React.SetStateAction<string>>;
     setLetter: React.Dispatch<React.SetStateAction<string>>;
-    setTheme: (theme: number) => void;
 };
 
 export const LetterInputForm = ({
@@ -23,8 +22,7 @@ export const LetterInputForm = ({
     font,
     letter,
     setFont,
-    setLetter,
-    setTheme
+    setLetter
 }: LettetProps) => {
     return (
         <>
@@ -53,7 +51,6 @@ export const LetterInputForm = ({
                 letter={letter}
                 setFont={setFont}
                 setLetter={setLetter}
-                setTheme={setTheme}
             />
         </>
     );

diff --git a/src/components/CreatLetterPage/PostLetterCotainer/PostLetterCotainer.tsx b/src/components/CreatLetterPage/PostLetterCotainer/PostLetterCotainer.tsx
@@ -3,26 +3,36 @@ import { useState } from 'react';
 import { TopBar } from '@/components/Common/TopBar/TopBar';
 import { useNavigate } from 'react-router-dom';
 import { useLocalStorage } from '@/hooks/useLocalStorage';
-import { useAutoSave } from '@/hooks/useAutoSave';
 import { ThemeWrapper } from '../ThemeWrapper/ThemeWrapper';
 import { LetterInputForm } from '../LetterInputForm/LetterInputForm';
+import { useAutoSave, useToastStore } from '@/hooks';
 
 export const PostLetterCotainer = () => {
-    const [title, setTitle] = useState<string>('');
-    const [letter, setLetter] = useState<string>('1');
-    const [letterContent, setLetterContent] = useState<string>('');
-    const [font, setFont] = useState<string>('initial');
-    const [theme, setTheme] = useState<number>(1);
+    const { setValue: saveTitle, storedValue: storedTitle } = useLocalStorage(
+        'title',
+        ''
+    );
+    const { setValue: saveLetterContent, storedValue: storedContent } =
+        useLocalStorage('letterContent', '');
+    const { setValue: saveFont, storedValue: storedFont } = useLocalStorage(
+        'font',
+        ''
+    );
+    const { setValue: saveLetter, storedValue: storedLetter } = useLocalStorage(
+        'letter',
+        ''
+    );
 
-    const navigate = useNavigate();
+    const { addToast } = useToastStore();
 
-    const { setValue: saveTitle } = useLocalStorage('title', '');
-    const { setValue: saveLetterContent } = useLocalStorage(
-        'letterContent',
-        ''
+    const [title, setTitle] = useState<string>(storedTitle || ' ');
+    const [letter, setLetter] = useState<string>(storedLetter || '1');
+    const [letterContent, setLetterContent] = useState<string>(
+        storedContent || ' '
     );
-    const { setValue: saveFont } = useLocalStorage('font', '');
-    const { setValue: saveLetter } = useLocalStorage('letter', '');
+    const [font, setFont] = useState<string>(storedFont || 'initial');
+
+    const navigate = useNavigate();
 
     const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         const inputValue = e.target.value;
@@ -36,7 +46,7 @@ export const PostLetterCotainer = () => {
         saveLetter(letter);
     };
 
-    useAutoSave(saveLetterData, 20000);
+    useAutoSave(saveLetterData, 10000);
 
     return (
         <>
@@ -45,11 +55,18 @@ export const PostLetterCotainer = () => {
                     navigate(-1);
                 }}
                 handleSuccesClick={() => {
+                    if (!title.trim() && !letterContent.trim()) {
+                        addToast(
+                            '공백을 제외한 제목과 내용을 입력해주세요',
+                            'warning'
+                        );
+                        return;
+                    }
                     saveLetterData();
                     navigate('/letter/select');
                 }}
             />
-            <ThemeWrapper themeId={theme}>
+            <ThemeWrapper themeId={Number(letter)}>
                 <LetterInputForm
                     title={title}
                     handleChange={handleChange}
@@ -59,7 +76,6 @@ export const PostLetterCotainer = () => {
                     letter={letter}
                     setFont={setFont}
                     setLetter={setLetter}
-                    setTheme={setTheme}
                 />
             </ThemeWrapper>
         </>

diff --git a/src/components/HomePage/TopButtonContainer/TopButtonContainer.tsx b/src/components/HomePage/TopButtonContainer/TopButtonContainer.tsx
@@ -4,7 +4,7 @@ import { IoIosNotifications } from 'react-icons/io';
 
 export const TopButtonContainer = () => {
     return (
-        <div className="flex justify-between px-6 py-4">
+        <div className="flex justify-between pb-8">
             <NavLink to={'/'}>
                 <Logo h={34} />
             </NavLink>

diff --git a/src/components/SelectItemPage/AnimationBottle/AnimationBottle.tsx b/src/components/SelectItemPage/AnimationBottle/AnimationBottle.tsx
@@ -4,8 +4,8 @@ export const AnimationBottle = () => {
     return (
         <div className="flex justify-center w-full">
             <img
-                src="/유리병_샘플.png"
-                className="object-contain w-24 h-52 animate-wiggle animate-infinite animate-ease-linear"
+                src="/유리병.svg"
+                className="object-contain w-[35%] h-[35%] animate-wiggle animate-infinite animate-ease-linear"
             />
         </div>
     );

diff --git a/src/components/SelectItemPage/SelectItem/SelectItem.tsx b/src/components/SelectItemPage/SelectItem/SelectItem.tsx
@@ -20,15 +20,6 @@ const testLable: LabelProps[] = [
     },
     {
         imgSrc: '/라벨_샘플_02.png'
-    },
-    {
-        imgSrc: '/라벨_샘플.png'
-    },
-    {
-        imgSrc: '/라벨_샘플.png'
-    },
-    {
-        imgSrc: '/라벨_샘플.png'
     }
 ];
 

diff --git a/src/components/SelectItemPage/SelectSlider/SelectSlider.tsx b/src/components/SelectItemPage/SelectSlider/SelectSlider.tsx
@@ -8,15 +8,13 @@ type SelectSliderProps = {
     setFont: (font: string) => void;
     letter: string;
     setLetter: (letter: string) => void;
-    setTheme: (themeId: number) => void;
 };
 
 export const SelectSlider = ({
     font,
     setFont,
     letter,
-    setLetter,
-    setTheme
+    setLetter
 }: SelectSliderProps) => {
     const [isFont, setIsFont] = useState(false);
 
@@ -46,7 +44,6 @@ export const SelectSlider = ({
                     value={isFont ? font : letter}
                     setValue={isFont ? setFont : setLetter}
                     spaceBetween={isFont ? 10 : 20}
-                    setTheme={setTheme}
                 />
             </div>
             <Margin bottom={20} />

diff --git a/src/components/SuccessLetterPage/SuccessModal/SuccessModal.tsx b/src/components/SuccessLetterPage/SuccessModal/SuccessModal.tsx
@@ -4,7 +4,7 @@ import React from 'react';
 export const SuccessModal = () => {
     return (
         <div className="flex flex-col items-center justify-center w-[50%] h-[20%] m-auto text-xl rounded-3xl animate-fade-up bg-slate-200 mt-[55%]">
-            <img src="/public/폭죽.png" className="w-12 h-12" />
+            <img src="/폭죽.png" className="w-12 h-12" />
             <Margin top={10} />
             <span>성공적으로</span>
             <span>발송되었습니다</span>

diff --git a/src/hooks/useCreateLetter.ts b/src/hooks/useCreateLetter.ts
@@ -15,6 +15,10 @@ export const useCreateLetter = () => {
 
         onSuccess: () => {
             navigate('/letter/success');
+            localStorage.removeItem('title');
+            localStorage.removeItem('letterContent');
+            localStorage.removeItem('letter');
+            localStorage.removeItem('font');
         },
         onError: (error: ApiErrorType) => {
             addToast(`${error.message}`, 'warning');

diff --git a/src/hooks/usePushNotification .ts b/src/hooks/usePushNotification .ts
@@ -0,0 +1,33 @@
+import { firebaseMessaging, getToken, onMessage } from '@/util/firebase';
+import { useEffect } from 'react';
+import { useToastStore } from './useToastStore';
+import { postToken } from '@/service/nofication/postToken';
+
+export const usePushNotification = () => {
+    const { addToast } = useToastStore();
+
+    useEffect(() => {
+        Notification.requestPermission().then((permission) => {
+            if (permission === 'granted') {
+                getToken(firebaseMessaging, {
+                    vapidKey: import.meta.env.VITE_FCM_VAPID_KEY
+                })
+                    .then((token) => {
+                        postToken({ token });
+                    })
+                    .catch((error) => {
+                        addToast('알람 설정에 실패했습니다.', 'error');
+                        console.error(error);
+                    });
+            } else {
+                addToast('알람 설정을 거부했습니다.', 'success');
+            }
+        });
+
+        onMessage(firebaseMessaging, (payload) => {
+            if (payload.notification) {
+                addToast(`${payload.notification.body}`, 'success');
+            }
+        });
+    }, []);
+};