diff --git a/index.html b/index.html index 3c08226..ceebe3f 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,7 @@ - + 36.5 -
- - - -
- - ); -} diff --git a/src/components/MenuButton.tsx b/src/components/MenuButton.tsx new file mode 100644 index 0000000..681e59a --- /dev/null +++ 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 ( + <> +
+ + setIsOpen(false)} /> + + + setIsOpen(false)} /> + + + setIsOpen(false)} /> + + +
+ setIsOpen((state) => !state)} /> +
+
+ + ); +} diff --git a/src/layouts/Header.tsx b/src/layouts/Header.tsx index 8efa549..d4bdf90 100644 --- 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 (
diff --git a/src/pages/Auth/index.tsx b/src/pages/Auth/index.tsx index cd892d5..20c691d 100644 --- 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 index 68f528f..2b3224b 100644 --- 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 = () => { - + ); }; diff --git a/src/pages/LetterBoard/index.tsx b/src/pages/LetterBoard/index.tsx index b6d4511..423afc3 100644 --- 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 = () => {

)} + ); diff --git a/src/pages/LetterBoardDetail/components/Header.tsx b/src/pages/LetterBoardDetail/components/Header.tsx index f1e15f9..26c306e 100644 --- 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 (
- {isShareLetterPreview ? ( - - ) : ( - - - - )} - + {!isShareLetterPreview && (
@@ -53,6 +46,7 @@ const Header = ({

{likeCount}

{isWriter ? ( + // TODO: 게시물 삭제 ) : ( - - - - - )}
diff --git a/src/pages/LetterBox/components/LetterBoxItem.tsx b/src/pages/LetterBox/components/LetterBoxItem.tsx index f493ffb..7d5f9f9 100644 --- a/src/pages/LetterBox/components/LetterBoxItem.tsx +++ b/src/pages/LetterBox/components/LetterBoxItem.tsx @@ -1,12 +1,5 @@ import { useNavigate } from 'react-router'; import { twMerge } from 'tailwind-merge'; -interface LetterBoxItemProps { - boxId: number; - zipCode: string; - letterCount: number; - isChecked?: boolean; - isClosed?: boolean; -} const LetterBoxItem = ({ boxId, @@ -14,6 +7,7 @@ const LetterBoxItem = ({ letterCount, isChecked = false, isClosed = false, + oppositeId, }: LetterBoxItemProps) => { const navigate = useNavigate(); const handleClickItem = (id: number) => { @@ -22,6 +16,7 @@ const LetterBoxItem = ({ id, zipCode, isClosed, + oppositeId, }, }); }; diff --git a/src/pages/LetterBox/index.tsx b/src/pages/LetterBox/index.tsx index 5f173f1..df65f7d 100644 --- a/src/pages/LetterBox/index.tsx +++ b/src/pages/LetterBox/index.tsx @@ -8,21 +8,13 @@ import PageTitle from '@/components/PageTitle'; import { chunkBox } from '@/utils/chunkBox'; import LetterBoxItem from './components/LetterBoxItem'; - -interface LetterBoxData { - letterMatchingId: number; - oppositeZipCode: string; - active: boolean; - oppositeRead: boolean; - letterCount: number; -} +import MenuButton from '@/components/MenuButton'; const fetchMailLists = async () => { const response = await getMailbox(); if (!response) throw new Error(); const data: LetterBoxData[] = response.data; console.log(data); - // 정렬? return data; }; @@ -34,8 +26,10 @@ const LetterBoxPage = () => { } = useQuery({ queryKey: ['mailBox'], queryFn: fetchMailLists, - staleTime: 1000 * 60 * 5, - gcTime: 1000 * 60 * 10, + staleTime: 0, + refetchOnMount: true, + refetchOnReconnect: true, + refetchOnWindowFocus: true, }); const navigate = useNavigate(); @@ -45,55 +39,59 @@ const LetterBoxPage = () => { } return ( -
- 내 편지함 -
-

- 나와 연락한 사람들 {letterBox?.length} -

-
-
- {isLoading ? ( -

로딩중..

- ) : letterBox.length > 0 ? ( - chunkBox( - letterBox.map((data: LetterBoxData, index) => ( - - )), - ).map((row, index) => - row.length === 3 ? ( -
- {row} -
- ) : ( -
- {row} - 닫힌 문 이미지 - {row.length === 1 && ( + <> +
+ 내 편지함 +
+

+ 나와 연락한 사람들 {letterBox?.length} +

+
+
+ {isLoading ? ( +

로딩중..

+ ) : letterBox.length > 0 ? ( + chunkBox( + letterBox.map((data: LetterBoxData, index) => ( + + )), + ).map((row, index) => + row.length === 3 ? ( +
+ {row} +
+ ) : ( +
+ {row} 닫힌 문 이미지 - )} -
- ), - ) - ) : ( -

아직 주고 받은 편지가 없어요

- )} -
- 닫힌 문 이미지 - 출입문 이미지 - 닫힌 문 이미지 + {row.length === 1 && ( + 닫힌 문 이미지 + )} +
+ ), + ) + ) : ( +

아직 주고 받은 편지가 없어요

+ )} +
+ 닫힌 문 이미지 + 출입문 이미지 + 닫힌 문 이미지 +
-
-
-
-
+ +
+ + + ); }; diff --git a/src/pages/LetterBoxDetail/index.tsx b/src/pages/LetterBoxDetail/index.tsx index ee02012..d0523b0 100644 --- a/src/pages/LetterBoxDetail/index.tsx +++ b/src/pages/LetterBoxDetail/index.tsx @@ -8,6 +8,7 @@ import { postShareProposals } from '@/apis/share'; import ConfirmModal from '@/components/ConfirmModal'; import MessageModal from '@/components/MessageModal'; import PageTitle from '@/components/PageTitle'; +import MenuButton from '@/components/MenuButton'; import InformationTooltip from './components/InformationTooltip'; import LetterPreview from './components/LetterPreview'; @@ -50,8 +51,10 @@ const LetterBoxDetailPage = () => { getNextPageParam: (lastPage, allPages) => { return lastPage.currentPage >= lastPage.totalPages ? undefined : allPages.length + 1; }, - staleTime: 1000 * 60 * 5, - gcTime: 1000 * 60 * 10, + staleTime: 0, + refetchOnMount: true, + refetchOnReconnect: true, + refetchOnWindowFocus: true, }); const mailLists: MailBoxDetailProps[] = data?.pages.flatMap((page) => page.content) || []; @@ -65,7 +68,7 @@ const LetterBoxDetailPage = () => { }, [inView, hasNextPage, isFetchingNextPage, fetchNextPage]); const disconnectMutation = useMutation({ - mutationFn: async () => await postMailboxDisconnect(userInfo.id), + mutationFn: async () => await postMailboxDisconnect(userInfo.oppositeId), onSuccess: () => { navigate(-1); setToastActive({ @@ -86,7 +89,7 @@ const LetterBoxDetailPage = () => { }); const shareMutation = useMutation({ - mutationFn: () => postShareProposals(selected, userInfo.id, shareComment), + mutationFn: () => postShareProposals(selected, userInfo.oppositeId, shareComment), onSuccess: () => { toggleShareMode(); setShareComment(''); @@ -223,6 +226,7 @@ const LetterBoxDetailPage = () => { )} + ); }; diff --git a/src/pages/MyPage/components/MyBoardPage.tsx b/src/pages/MyPage/components/MyBoardPage.tsx index a4c3759..03e5588 100644 --- a/src/pages/MyPage/components/MyBoardPage.tsx +++ b/src/pages/MyPage/components/MyBoardPage.tsx @@ -30,11 +30,14 @@ const MyBoardPage = () => { isLoading, isError, } = useQuery({ - queryKey: ['sharePostList'], + queryKey: ['sharMyPostList'], queryFn: () => fetchMyPostList(), enabled: true, staleTime: 1000 * 60 * 5, gcTime: 1000 * 60 * 10, + refetchOnMount: true, + refetchOnReconnect: true, + refetchOnWindowFocus: true, }); if (isError) { diff --git a/src/pages/RandomLetters/index.tsx b/src/pages/RandomLetters/index.tsx index 04a4263..c1b12d9 100644 --- a/src/pages/RandomLetters/index.tsx +++ b/src/pages/RandomLetters/index.tsx @@ -3,6 +3,7 @@ import { useEffect, useState } from 'react'; import { getRandomLetterCoolTime, getRandomLetterMatched } from '@/apis/randomLetter'; import BackgroundBottom from '@/components/BackgroundBottom'; import PageTitle from '@/components/PageTitle'; +import MenuButton from '@/components/MenuButton'; import CoolTime from './components/CoolTime'; import Matched from './components/Matched'; @@ -115,6 +116,7 @@ const RandomLettersPage = () => { )} + ); }; diff --git a/src/pages/RollingPaper/index.tsx b/src/pages/RollingPaper/index.tsx index 37ded0f..6b883d6 100644 --- a/src/pages/RollingPaper/index.tsx +++ b/src/pages/RollingPaper/index.tsx @@ -8,6 +8,7 @@ import BackgroundBottom from '@/components/BackgroundBottom'; import ConfirmModal from '@/components/ConfirmModal'; import PageTitle from '@/components/PageTitle'; import Header from '@/layouts/Header'; +import MenuButton from '@/components/MenuButton'; import Comment from './components/Comment'; import CommentDetailModal from './components/CommentDetailModal'; @@ -116,6 +117,7 @@ const RollingPaperPage = () => { + ); diff --git a/src/styles/utilities.css b/src/styles/utilities.css index 48b5315..0657ca2 100644 --- a/src/styles/utilities.css +++ b/src/styles/utilities.css @@ -108,4 +108,9 @@ .window-bottom-unChecked { background: linear-gradient(to bottom, #fff4f2, #ffe6e3) !important; } + + /* Menu */ + .submenu-btn { + @apply bg-primary-3 flex h-12 w-12 items-center justify-center rounded-full text-white transition-all duration-300 hover:scale-105 active:scale-90; + } } diff --git a/src/types/mailbox.d.ts b/src/types/mailbox.d.ts new file mode 100644 index 0000000..c32ee4f --- /dev/null +++ b/src/types/mailbox.d.ts @@ -0,0 +1,17 @@ +interface LetterBoxData { + letterMatchingId: number; + oppositeZipCode: string; + active: boolean; + oppositeRead: boolean; + letterCount: number; + oppositeId: number; +} + +interface LetterBoxItemProps { + boxId: number; + zipCode: string; + letterCount: number; + isChecked?: boolean; + isClosed?: boolean; + oppositeId: number; +}