prgrms-web-devcourse-final-project · nirii00 · Mar 10, 2025 · Mar 9, 2025 · Mar 9, 2025 · Mar 10, 2025
diff --git a/index.html b/index.html
@@ -2,7 +2,7 @@
 <html lang="kr">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/public/favicon.ico" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>36.5</title>
     <link

diff --git a/src/components/HomeButton.tsx b/src/components/HomeButton.tsx
diff --git a/src/components/MenuButton.tsx b/src/components/MenuButton.tsx
@@ -0,0 +1,61 @@
+import MenuRoundedIcon from '@mui/icons-material/MenuRounded';
+import EditNoteRoundedIcon from '@mui/icons-material/EditNoteRounded';
+import MarkunreadOutlinedIcon from '@mui/icons-material/MarkunreadOutlined';
+import CalendarTodayOutlinedIcon from '@mui/icons-material/CalendarTodayOutlined';
+
+import { useState } from 'react';
+import { Link } from 'react-router';
+import { twMerge } from 'tailwind-merge';
+
+export default function MenuButton() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <>
+      <div className="flex w-full max-w-150 justify-end pr-5 text-center">
+        <Link
+          to="/letter/box"
+          className={twMerge(
+            'bg-primary-3 fixed bottom-[220px] z-50 h-12 w-12 rotate-360 content-center rounded-full text-white transition-all duration-200 hover:scale-105 active:scale-90',
+            isOpen
+              ? 'translate-y-0 rotate-0 opacity-100'
+              : 'translate-y-[120%] rotate-180 opacity-0',
+          )}
+        >
+          <MarkunreadOutlinedIcon fontSize="small" onClick={() => setIsOpen(false)} />
+        </Link>
+        <Link
+          to="/board/letter"
+          className={twMerge(
+            'bg-primary-3 fixed bottom-[160px] z-50 h-12 w-12 rotate-360 content-center rounded-full text-white transition-all duration-200 hover:scale-105 active:scale-90',
+            isOpen
+              ? 'translate-y-0 rotate-0 opacity-100'
+              : 'translate-y-[120%] rotate-180 opacity-0',
+          )}
+        >
+          <CalendarTodayOutlinedIcon fontSize="small" onClick={() => setIsOpen(false)} />
+        </Link>
+        <Link
+          to="/letter/write"
+          className={twMerge(
+            'bg-primary-3 fixed bottom-[100px] z-50 h-12 w-12 rotate-360 content-center rounded-full text-white transition-all duration-200 hover:scale-105 active:scale-90',
+            isOpen
+              ? 'translate-y-0 rotate-0 opacity-100'
+              : 'translate-y-[120%] rotate-180 opacity-0',
+          )}
+        >
+          <EditNoteRoundedIcon fontSize="medium" onClick={() => setIsOpen(false)} />
+        </Link>
+
+        <div
+          className={twMerge(
+            'bg-primary-3 fixed bottom-[30px] z-50 h-13 w-13 content-center rounded-full text-white transition-all duration-200 hover:scale-105 active:scale-90',
+            isOpen ? 'rotate-90' : 'rotate-0',
+          )}
+        >
+          <MenuRoundedIcon onClick={() => setIsOpen((state) => !state)} />
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/src/layouts/Header.tsx b/src/layouts/Header.tsx
@@ -3,8 +3,6 @@ import { Link, useNavigate } from 'react-router';
 import { AlarmIcon, ArrowLeftIcon, PersonIcon } from '@/assets/icons';
 
 const Header = () => {
-  // TODO: 뒤로 가기 버튼이 보이는 조건 추가
-  // TODO: 스크롤 발생 시, 어떻게 보여져야 하는지
   const navigate = useNavigate();
   return (
     <header className="fixed top-0 z-40 flex h-16 w-full max-w-150 items-center justify-between p-5">

diff --git a/src/pages/Auth/index.tsx b/src/pages/Auth/index.tsx
@@ -69,10 +69,12 @@ const AuthCallbackPage = () => {
 
   useEffect(() => {
     if (!stateToken) {
-      navigate('/notFound');
       if (error === 'deleted_member') {
-        alert('탈퇴한 회원입니다.');
+        navigate('/login');
+        alert('탈퇴한 회원입니다. 관리자에게 문의 부탁드립니다.');
+        return;
       }
+      navigate('/notFound');
       return;
     }
 

diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 import { useNavigate } from 'react-router';
 
-import HomeButton from '@/components/HomeButton';
+import MenuButton from '@/components/MenuButton';
 import NoticeRollingPaper from '@/components/NoticeRollingPaper';
 import useViewport from '@/hooks/useViewport';
 import useAuthStore from '@/stores/authStore';
@@ -46,7 +46,7 @@ const HomePage = () => {
         </section>
       </div>
 
-      <HomeButton />
+      <MenuButton />
     </div>
   );
 };

diff --git a/src/pages/LetterBoard/index.tsx b/src/pages/LetterBoard/index.tsx
@@ -9,6 +9,7 @@ import NoticeRollingPaper from '@/components/NoticeRollingPaper';
 import PageTitle from '@/components/PageTitle';
 
 import LetterPreview from './components/LetterPreview';
+import MenuButton from '@/components/MenuButton';
 
 const LetterBoardPage = () => {
   const navigate = useNavigate();
@@ -21,7 +22,7 @@ const LetterBoardPage = () => {
         console.error('게시글 목록을 불러오는데 실패했습니다.');
         return { content: [], currentPage: page, totalPages: 1 };
       }
-      console.log('page', response);
+      console.log('게시글 목록', response);
       return response as SharePostResponse;
     } catch (e) {
       console.error(e);
@@ -38,11 +39,15 @@ const LetterBoardPage = () => {
       getNextPageParam: (res) => {
         if (!res || !res?.content || res?.currentPage >= res?.totalPages) {
           return undefined;
+        } else if (res) {
+          return res.currentPage + 1;
         }
-        return res.currentPage + 1;
       },
       staleTime: 1000 * 60 * 5,
       gcTime: 1000 * 60 * 10,
+      refetchOnMount: true,
+      refetchOnReconnect: true,
+      refetchOnWindowFocus: true,
     });
 
   const postLists = data?.pages?.flatMap((page) => page?.content || []) || [];
@@ -95,6 +100,7 @@ const LetterBoardPage = () => {
           </p>
         )}
       </main>
+      <MenuButton />
       <BackgroundBottom />
     </>
   );

diff --git a/src/pages/LetterBoardDetail/components/Header.tsx b/src/pages/LetterBoardDetail/components/Header.tsx
@@ -1,4 +1,4 @@
-import { Link, useNavigate } from 'react-router';
+import { useNavigate } from 'react-router';
 
 import {
   ArrowLeftIcon,
@@ -30,16 +30,9 @@ const Header = ({
   return (
     <header className="fixed top-0 z-40 w-full max-w-150">
       <div className="flex h-16 items-center justify-between bg-white p-5">
-        {isShareLetterPreview ? (
-          <button onClick={() => navigate(-1)}>
-            <ArrowLeftIcon className="text-primary-1 h-6 w-6" />
-          </button>
-        ) : (
-          <Link to="/board/letter">
-            <ArrowLeftIcon className="text-primary-1 h-6 w-6" />
-          </Link>
-        )}
-
+        <button onClick={() => navigate(-1)}>
+          <ArrowLeftIcon className="text-primary-1 h-6 w-6" />
+        </button>
         {!isShareLetterPreview && (
           <div className="flex items-center gap-3">
             <div className="flex items-center gap-1">
@@ -53,6 +46,7 @@ const Header = ({
               <p className="body-l-m text-primary-1">{likeCount}</p>
             </div>
             {isWriter ? (
+              // TODO: 게시물 삭제
               <DeleteIcon className="text-primary-1 h-6 w-6" />
             ) : (
               <button type="button" onClick={onOpenReportModal}>

diff --git a/src/pages/LetterBoardDetail/index.tsx b/src/pages/LetterBoardDetail/index.tsx
@@ -1,38 +1,31 @@
 import { useEffect, useState } from 'react';
-import { useLocation, useNavigate } from 'react-router';
 import { twMerge } from 'tailwind-merge';
 
 import {
   getSharePostDetail,
-  postShareProposalApproval,
   SharePost,
   postSharePostLike,
   getSharePostLikeCount,
 } from '@/apis/share';
-import BlurImg from '@/assets/images/landing-blur.png';
 import ReportModal from '@/components/ReportModal';
 
 import Header from './components/Header';
 import Letter from './components/Letter';
+import { useParams } from 'react-router';
+import useAuthStore from '@/stores/authStore';
 
-interface ShareLetterPreviewProps {
-  confirmDisabled?: boolean;
-  children?: React.ReactNode;
-}
-
-const LetterBoardDetailPage = ({ confirmDisabled }: ShareLetterPreviewProps) => {
-  const [likeCount, setLikeCount] = useState(122);
+const LetterBoardDetailPage = () => {
+  const [likeCount, setLikeCount] = useState(0);
   const [isLike, setIsLike] = useState(false);
-  const isWriter = false;
-  const [activeReportModal, setActiveReportModal] = useState(false);
-  const sharePostId: string = location.pathname.split('/')[3];
-  // const location = useLocation();
-  const navigate = useNavigate();
-  // const isShareLetterPreview = location.state?.isShareLetterPreview || false;
-  const isShareLetterPreview = false;
+  const [isWriter, setIsWriter] = useState(false);
   const [postDetail, setPostDetail] = useState<SharePost>();
+  const [activeReportModal, setActiveReportModal] = useState(false);
+
+  const { id } = useParams();
+
+  const myZipCode = useAuthStore.getState().zipCode;
 
-  const postLike = async () => {
+  const postLike = async (sharePostId: string) => {
     try {
       const response = await postSharePostLike(sharePostId);
       if (!response) throw new Error('error while fetching like count');
@@ -43,24 +36,13 @@ const LetterBoardDetailPage = ({ confirmDisabled }: ShareLetterPreviewProps) =>
     }
   };
 
-  const handleToggleLike = () => {
+  const handleToggleLike = (sharePostId: string) => {
+    if (sharePostId === 'error') {
+      return;
+    }
     setLikeCount((prev) => prev + (isLike ? -1 : 1));
     setIsLike((prev) => !prev);
-    postLike();
-  };
-
-  const handleProposalApproval = async (
-    action: 'approve' | 'reject',
-    shareProposalId: number = location.state?.postDetail?.sharePostId,
-  ) => {
-    try {
-      const result = await postShareProposalApproval(shareProposalId, action);
-      console.log(`✅ 편지 공유 ${action === 'approve' ? '수락' : '거절'}됨:`, result);
-
-      navigate('/');
-    } catch (error) {
-      console.error(error);
-    }
+    postLike(sharePostId);
   };
 
   useEffect(() => {
@@ -80,27 +62,31 @@ const LetterBoardDetailPage = ({ confirmDisabled }: ShareLetterPreviewProps) =>
         console.log('✅ 편지 좋아요 갯수:', response);
         setLikeCount(response.likeCount);
         setIsLike(response.liked);
+        console.log('myZip', myZipCode);
+        console.log('responseZip', response.zipCode);
+        console.log('responseZip', response);
+
+        if (myZipCode === response.zipCode || !response.zipCode) {
+          setIsWriter(true);
+        }
       } catch (error) {
         console.error('❌ 편지 좋아요 갯수를 가져오는 중 에러가 발생했습니다', error);
         throw new Error('편지 좋아요 갯수 가져오기 실패');
       }
     };
 
-    // if (location.state?.postDetail) {
-    fetchPostDetail(sharePostId);
-    fetchLikeCounts(sharePostId);
-    // } else {
-    //   console.warn('postDetail not found in location.state');
-    // }
-    // }, [location.state]);
+    if (id) {
+      fetchPostDetail(id);
+      fetchLikeCounts(id);
+    }
   }, []);
 
   return (
     <>
       {activeReportModal && (
         <ReportModal
-          reportType="POST"
-          letterId={parseInt(sharePostId)}
+          reportType="SHARE_POST"
+          letterId={id ? parseInt(id) : 0}
           onClose={() => setActiveReportModal(false)}
         />
       )}
@@ -109,9 +95,8 @@ const LetterBoardDetailPage = ({ confirmDisabled }: ShareLetterPreviewProps) =>
           likeCount={likeCount}
           isLike={isLike}
           isWriter={isWriter}
-          onToggleLike={handleToggleLike}
+          onToggleLike={() => (id ? handleToggleLike(id) : handleToggleLike('error'))}
           onOpenReportModal={() => setActiveReportModal(true)}
-          isShareLetterPreview={isShareLetterPreview}
         />
         <main className="px-5 pt-18 pb-3">
           <p className="body-b mb-6 px-5">FROM. {postDetail?.zipCode}</p>
@@ -132,34 +117,6 @@ const LetterBoardDetailPage = ({ confirmDisabled }: ShareLetterPreviewProps) =>
               />
             ))}
           </section>
-
-          {isShareLetterPreview && (
-            <>
-              <img
-                src={BlurImg}
-                alt="landing blur"
-                className="fixed bottom-0 left-0 z-10 w-screen"
-              />
-              <section className="fixed bottom-[30px] left-1/2 z-20 flex w-73 translate-x-[-50%] gap-6">
-                <button
-                  type="button"
-                  className="body-m secondary-btn h-10 flex-1 basis-1/2"
-                  onClick={() => handleProposalApproval('reject', postDetail?.sharePostId)}
-                >
-                  거부하기
-                </button>
-
-                <button
-                  type="button"
-                  className="primary-btn body-m h-10 flex-1 basis-1/2"
-                  disabled={confirmDisabled}
-                  onClick={() => handleProposalApproval('approve', postDetail?.sharePostId)}
-                >
-                  승인하기
-                </button>
-              </section>
-            </>
-          )}
         </main>
       </div>
     </>