From e751d3b57dcde979d9cbef7bca624b9da37469ba Mon Sep 17 00:00:00 2001 From: AAminha Date: Wed, 5 Mar 2025 23:27:02 +0900 Subject: [PATCH 1/8] =?UTF-8?q?style:=EB=A1=A4=EB=A7=81=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=ED=8D=BC=20=EA=B3=B5=EC=A7=80=20=EC=95=A0=EB=8B=88=EB=A9=94?= =?UTF-8?q?=EC=9D=B4=EC=85=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/NoticeRollingPaper.tsx | 34 +++++++++++++++++++++++++-- src/styles/animations.css | 4 ++-- src/styles/preflight.css | 1 + 3 files changed, 35 insertions(+), 4 deletions(-) diff --git a/src/components/NoticeRollingPaper.tsx b/src/components/NoticeRollingPaper.tsx index b495b0e..1040576 100644 --- a/src/components/NoticeRollingPaper.tsx +++ b/src/components/NoticeRollingPaper.tsx @@ -1,4 +1,5 @@ import { useQuery } from '@tanstack/react-query'; +import { useEffect, useRef, useState } from 'react'; import { Link } from 'react-router'; import { twMerge } from 'tailwind-merge'; @@ -11,6 +12,30 @@ const NoticeRollingPaper = () => { queryFn: () => getCurrentRollingPaper(), }); + const [activeAnimate, setActiveAnimate] = useState(false); + const containerRef = useRef(null); + const textRef = useRef(null); + + useEffect(() => { + const containerElement = containerRef.current; + const element = textRef.current; + + if (containerElement && element) { + const textWidth = element.scrollWidth; + const containerWidth = containerElement.offsetWidth; + + if (textWidth > containerWidth) { + const animationDuration = (textWidth / 10) * 0.3; + const totalDuration = Math.max(animationDuration, 10); + document.documentElement.style.setProperty('--marquee-duration', `${totalDuration}s`); + + setActiveAnimate(true); + } else { + setActiveAnimate(false); + } + } + }, [data?.title]); + const noticeText = data?.title; return ( @@ -23,8 +48,13 @@ const NoticeRollingPaper = () => { )} > -
-

{noticeText}

+
+

+ {noticeText} +

diff --git a/src/styles/animations.css b/src/styles/animations.css index 7217bbd..702eca7 100644 --- a/src/styles/animations.css +++ b/src/styles/animations.css @@ -6,7 +6,7 @@ --animate-rotate-show: rotate-show 1s ease-in-out forwards; --animate-blink: showing 0.3s forwards; --animate-login-move-up-down: move-up-down 3s ease-in-out infinite; - --animate-marquee: marquee 10s linear infinite; + --animate-marquee: marquee var(--marquee-duration) linear infinite; @keyframes down { 0% { @@ -70,7 +70,7 @@ /* SpecialLetterBanner 애니메이션 */ @keyframes marquee { 0% { - transform: translateX(10%); + transform: translateX(100%); } 100% { transform: translateX(-100%); diff --git a/src/styles/preflight.css b/src/styles/preflight.css index c74f27a..c23d658 100644 --- a/src/styles/preflight.css +++ b/src/styles/preflight.css @@ -4,6 +4,7 @@ :root { --vh: 1vh; --vw: 1vw; + --marquee-duration: 10s; } * { From 663830f0b7b41da036eb15fda29b74579a5f7937 Mon Sep 17 00:00:00 2001 From: AAminha Date: Wed, 5 Mar 2025 23:37:45 +0900 Subject: [PATCH 2/8] =?UTF-8?q?fix:=20=EB=A1=A4=EB=A7=81=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=ED=8D=BC=EA=B0=80=20=EC=A7=84=ED=96=89=EB=90=98=EC=A7=80=20?= =?UTF-8?q?=EC=95=8A=EC=9D=84=20=EB=95=8C=20=ED=99=94=EB=A9=B4=EC=97=90=20?= =?UTF-8?q?=EB=B3=B4=EC=97=AC=EC=A7=80=EC=A7=80=20=EC=95=8A=EB=8F=84?= =?UTF-8?q?=EB=A1=9D=20=EC=B2=98=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/NoticeRollingPaper.tsx | 30 +++++++++++++++------------ 1 file changed, 17 insertions(+), 13 deletions(-) diff --git a/src/components/NoticeRollingPaper.tsx b/src/components/NoticeRollingPaper.tsx index 1040576..7c80fe3 100644 --- a/src/components/NoticeRollingPaper.tsx +++ b/src/components/NoticeRollingPaper.tsx @@ -7,7 +7,7 @@ import { getCurrentRollingPaper } from '@/apis/rolling'; import { NoticeIcon } from '@/assets/icons'; const NoticeRollingPaper = () => { - const { data } = useQuery({ + const { data, error } = useQuery({ queryKey: ['notice-rolling-paper'], queryFn: () => getCurrentRollingPaper(), }); @@ -17,27 +17,31 @@ const NoticeRollingPaper = () => { const textRef = useRef(null); useEffect(() => { - const containerElement = containerRef.current; - const element = textRef.current; + if (data?.title) { + const containerElement = containerRef.current; + const element = textRef.current; - if (containerElement && element) { - const textWidth = element.scrollWidth; - const containerWidth = containerElement.offsetWidth; + if (containerElement && element) { + const textWidth = element.scrollWidth; + const containerWidth = containerElement.offsetWidth; - if (textWidth > containerWidth) { - const animationDuration = (textWidth / 10) * 0.3; - const totalDuration = Math.max(animationDuration, 10); - document.documentElement.style.setProperty('--marquee-duration', `${totalDuration}s`); + if (textWidth > containerWidth) { + const animationDuration = (textWidth / 10) * 0.3; + const totalDuration = Math.max(animationDuration, 10); + document.documentElement.style.setProperty('--marquee-duration', `${totalDuration}s`); - setActiveAnimate(true); - } else { - setActiveAnimate(false); + setActiveAnimate(true); + } else { + setActiveAnimate(false); + } } } }, [data?.title]); const noticeText = data?.title; + if (error || !noticeText) return null; + return (
Date: Fri, 7 Mar 2025 00:31:12 +0900 Subject: [PATCH 3/8] =?UTF-8?q?feat:=20=EC=83=88=EB=A1=9C=EC=9A=B4=20?= =?UTF-8?q?=EB=A1=A4=EB=A7=81=ED=8E=98=EC=9D=B4=ED=8D=BC=20=EC=83=9D?= =?UTF-8?q?=EC=84=B1=20api=20=EC=97=B0=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 2 ++ src/apis/rolling.ts | 12 ++++++++++++ .../Admin/components/AddRollingPaperModal.tsx | 16 +++++++++++++++- 3 files changed, 29 insertions(+), 1 deletion(-) diff --git a/src/App.tsx b/src/App.tsx index 29e7dfa..6e334f5 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -8,6 +8,7 @@ import AdminPage from './pages/Admin'; import FilteredLetterManage from './pages/Admin/FilteredLetter'; import FilteringManage from './pages/Admin/Filtering'; import ReportManage from './pages/Admin/Report'; +import AdminRollingPaper from './pages/Admin/RollingPaper'; import AuthCallbackPage from './pages/Auth'; import Home from './pages/Home'; import Landing from './pages/Landing'; @@ -69,6 +70,7 @@ const App = () => { } /> } /> } /> + } /> diff --git a/src/apis/rolling.ts b/src/apis/rolling.ts index 8930c0d..c55b41c 100644 --- a/src/apis/rolling.ts +++ b/src/apis/rolling.ts @@ -36,3 +36,15 @@ export const deleteRollingPaperComment = async (commentId: string | number) => { throw error; } }; + +export const postNewRollingPaper = async (title: string) => { + try { + const { + data: { data }, + } = await client.post('/api/admin/event-posts', { title }); + return data; + } catch (error) { + console.error(error); + throw error; + } +}; diff --git a/src/pages/Admin/components/AddRollingPaperModal.tsx b/src/pages/Admin/components/AddRollingPaperModal.tsx index 2df17c3..bae3f7d 100644 --- a/src/pages/Admin/components/AddRollingPaperModal.tsx +++ b/src/pages/Admin/components/AddRollingPaperModal.tsx @@ -1,5 +1,7 @@ +import { useMutation } from '@tanstack/react-query'; import { ChangeEvent, FormEvent, useState } from 'react'; +import { postNewRollingPaper } from '@/apis/rolling'; import ModalOverlay from '@/components/ModalOverlay'; interface AddRollingPaperModalProps { @@ -10,6 +12,18 @@ export default function AddRollingPaperModal({ onClose }: AddRollingPaperModalPr const [title, setTitle] = useState(''); const [error, setError] = useState(''); + const { mutate } = useMutation({ + mutationFn: () => postNewRollingPaper(title), + onSuccess: () => { + setTitle(''); + setError(''); + onClose(); + }, + onError: () => { + setError('편지 작성에 실패했어요. 다시 시도해주세요.'); + }, + }); + const handleChange = (e: ChangeEvent) => { setTitle(e.target.value); }; @@ -21,7 +35,7 @@ export default function AddRollingPaperModal({ onClose }: AddRollingPaperModalPr return; } - console.log(title); + mutate(); }; return ( From 92adecd5b2a332d22cfa2026c7c548de40e8c189 Mon Sep 17 00:00:00 2001 From: AAminha Date: Fri, 7 Mar 2025 00:49:51 +0900 Subject: [PATCH 4/8] =?UTF-8?q?feat:=20=EB=A1=A4=EB=A7=81=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=ED=8D=BC=20=EB=AA=A9=EB=A1=9D=20=EC=A1=B0=ED=9A=8C=20?= =?UTF-8?q?api=20=EC=97=B0=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/rolling.ts | 12 +++ src/pages/Admin/RollingPaper.tsx | 78 +++++++------------ .../Admin/components/RollingPaperItem.tsx | 64 +++++++++++++++ src/types/rolling.d.ts | 22 +++++- 4 files changed, 125 insertions(+), 51 deletions(-) create mode 100644 src/pages/Admin/components/RollingPaperItem.tsx diff --git a/src/apis/rolling.ts b/src/apis/rolling.ts index c55b41c..d6a8e38 100644 --- a/src/apis/rolling.ts +++ b/src/apis/rolling.ts @@ -48,3 +48,15 @@ export const postNewRollingPaper = async (title: string) => { throw error; } }; + +export const getRollingPaperList = async (): Promise => { + try { + const { + data: { data }, + } = await client.get('/api/admin/event-posts'); + return data; + } catch (error) { + console.error(error); + throw error; + } +}; diff --git a/src/pages/Admin/RollingPaper.tsx b/src/pages/Admin/RollingPaper.tsx index a855c2b..056bf82 100644 --- a/src/pages/Admin/RollingPaper.tsx +++ b/src/pages/Admin/RollingPaper.tsx @@ -1,14 +1,22 @@ +import { useQuery } from '@tanstack/react-query'; import { useState } from 'react'; -import { AddIcon, AlarmIcon, DeleteIcon } from '@/assets/icons'; +import { getRollingPaperList } from '@/apis/rolling'; +import { AddIcon, AlarmIcon } from '@/assets/icons'; import AddRollingPaperModal from './components/AddRollingPaperModal'; import PageTitle from './components/AdminPageTitle'; +import RollingPaperItem from './components/RollingPaperItem'; import WrapperFrame from './components/WrapperFrame'; import WrapperTitle from './components/WrapperTitle'; export default function AdminRollingPaper() { const [activeModal, setActiveModal] = useState(false); + const { data, isLoading, isSuccess } = useQuery({ + queryKey: ['admin-rolling-paper'], + queryFn: getRollingPaperList, + }); + console.log(data); return ( <> @@ -26,55 +34,25 @@ export default function AdminRollingPaper() { 롤링페이퍼 생성 - - - - - - - - - - - - - - - - - - - - - - - - - - -
ID제목쌓인 편지 수상태
1 - 침수 피해를 복구중인 포스코 임직원 분들에게 응원의 메시지를 보내주세요! - 12 - - 진행 중 - -
2 - 침수 피해를 복구중인 포스코 임직원 분들에게 응원의 메시지를 보내주세요! - 12 - - - -
+ {isLoading &&

Loading...

} + {isSuccess && ( + + + + + + + + + + + {data.content.map((rollingPaper) => ( + + ))} + +
ID제목상태
+ )} + {/* TODO: 페이지네이션 적용 */} ); diff --git a/src/pages/Admin/components/RollingPaperItem.tsx b/src/pages/Admin/components/RollingPaperItem.tsx new file mode 100644 index 0000000..1f1336a --- /dev/null +++ b/src/pages/Admin/components/RollingPaperItem.tsx @@ -0,0 +1,64 @@ +import { DeleteIcon } from '@/assets/icons'; + +interface RollingPaperItemProps { + information: AdminRollingPaperInformation; +} + +export default function RollingPaperItem({ information }: RollingPaperItemProps) { + return ( + + {information.eventPostId} + {information.title} + + {information.used ? ( + + 진행 중 + + ) : ( + + )} + + + {!information.used && ( + + )} + + + ); +} + +{ + /* + 2 + + 침수 피해를 복구중인 포스코 임직원 분들에게 응원의 메시지를 보내주세요! + + 12 + + + + + + +; */ +} diff --git a/src/types/rolling.d.ts b/src/types/rolling.d.ts index af75fe6..642e73b 100644 --- a/src/types/rolling.d.ts +++ b/src/types/rolling.d.ts @@ -3,6 +3,10 @@ interface RollingPaperInformation { title: string; } +interface AdminRollingPaperInformation extends RollingPaperInformation { + used: boolean; +} + interface RollingPaperComment { commentId: number; zipCode: string; @@ -10,5 +14,21 @@ interface RollingPaperComment { } interface RollingPaper extends RollingPaperInformation { - eventPostComments: RollingPaperComment[]; + eventPostComments: { + content: RollingPaperComment[]; + currentPage: number; + size: number; + totalElements: number; + totalPages: number; + }; } + +interface PaginationData { + content: T[]; + currentPage: number; + size: number; + totalElements: number; + totalPages: number; +} + +type RollingPaperList = PaginationData; From dfea40294250816712439b429b2fb005d529137b Mon Sep 17 00:00:00 2001 From: AAminha Date: Fri, 7 Mar 2025 01:07:46 +0900 Subject: [PATCH 5/8] =?UTF-8?q?feat:=20=EB=A1=A4=EB=A7=81=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=ED=8D=BC=20=EC=82=AD=EC=A0=9C=20api=20=EC=97=B0?= =?UTF-8?q?=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/rolling.ts | 10 +++++ src/pages/Admin/RollingPaper.tsx | 38 +++++++++++-------- .../Admin/components/AddRollingPaperModal.tsx | 5 ++- .../Admin/components/RollingPaperItem.tsx | 19 +++++++++- 4 files changed, 54 insertions(+), 18 deletions(-) diff --git a/src/apis/rolling.ts b/src/apis/rolling.ts index d6a8e38..b68d325 100644 --- a/src/apis/rolling.ts +++ b/src/apis/rolling.ts @@ -60,3 +60,13 @@ export const getRollingPaperList = async (): Promise => { throw error; } }; + +export const deleteRollingPaper = async (eventPostId: number | string) => { + try { + const { data } = await client.delete(`/api/admin/event-posts/${eventPostId}`); + return data; + } catch (error) { + console.error(error); + throw error; + } +}; diff --git a/src/pages/Admin/RollingPaper.tsx b/src/pages/Admin/RollingPaper.tsx index 056bf82..6feb8ff 100644 --- a/src/pages/Admin/RollingPaper.tsx +++ b/src/pages/Admin/RollingPaper.tsx @@ -16,7 +16,6 @@ export default function AdminRollingPaper() { queryKey: ['admin-rolling-paper'], queryFn: getRollingPaperList, }); - console.log(data); return ( <> @@ -36,21 +35,28 @@ export default function AdminRollingPaper() { {isLoading &&

Loading...

} {isSuccess && ( - - - - - - - - - - - {data.content.map((rollingPaper) => ( - - ))} - -
ID제목상태
+ <> + + + + + + + + + + + {data.content.map((rollingPaper) => ( + + ))} + +
ID제목상태
+ {data.content.length === 0 && ( + + 아직 생성된 롤링페이퍼가 없어요 + + )} + )} {/* TODO: 페이지네이션 적용 */} diff --git a/src/pages/Admin/components/AddRollingPaperModal.tsx b/src/pages/Admin/components/AddRollingPaperModal.tsx index bae3f7d..0e336be 100644 --- a/src/pages/Admin/components/AddRollingPaperModal.tsx +++ b/src/pages/Admin/components/AddRollingPaperModal.tsx @@ -1,4 +1,4 @@ -import { useMutation } from '@tanstack/react-query'; +import { useMutation, useQueryClient } from '@tanstack/react-query'; import { ChangeEvent, FormEvent, useState } from 'react'; import { postNewRollingPaper } from '@/apis/rolling'; @@ -11,6 +11,7 @@ interface AddRollingPaperModalProps { export default function AddRollingPaperModal({ onClose }: AddRollingPaperModalProps) { const [title, setTitle] = useState(''); const [error, setError] = useState(''); + const queryClient = useQueryClient(); const { mutate } = useMutation({ mutationFn: () => postNewRollingPaper(title), @@ -18,6 +19,8 @@ export default function AddRollingPaperModal({ onClose }: AddRollingPaperModalPr setTitle(''); setError(''); onClose(); + // TODO: 페이지네이션 적용 후, 현재 page에 대한 캐싱 날리는 방식으로 변경 + queryClient.invalidateQueries({ queryKey: ['admin-rolling-paper'] }); }, onError: () => { setError('편지 작성에 실패했어요. 다시 시도해주세요.'); diff --git a/src/pages/Admin/components/RollingPaperItem.tsx b/src/pages/Admin/components/RollingPaperItem.tsx index 1f1336a..089d80f 100644 --- a/src/pages/Admin/components/RollingPaperItem.tsx +++ b/src/pages/Admin/components/RollingPaperItem.tsx @@ -1,3 +1,6 @@ +import { useMutation, useQueryClient } from '@tanstack/react-query'; + +import { deleteRollingPaper } from '@/apis/rolling'; import { DeleteIcon } from '@/assets/icons'; interface RollingPaperItemProps { @@ -5,6 +8,19 @@ interface RollingPaperItemProps { } export default function RollingPaperItem({ information }: RollingPaperItemProps) { + const queryClient = useQueryClient(); + + const { mutate: deleteMutate } = useMutation({ + mutationFn: () => deleteRollingPaper(information.eventPostId), + onSuccess: () => { + // TODO: 페이지네이션 적용 후, 현재 page에 대한 캐싱 날리는 방식으로 변경 + queryClient.invalidateQueries({ queryKey: ['admin-rolling-paper'] }); + }, + onError: (err) => { + console.error(err); + }, + }); + return ( {information.eventPostId} @@ -23,11 +39,12 @@ export default function RollingPaperItem({ information }: RollingPaperItemProps) )} - + {!information.used && ( From 00d4526d001fd56d1b1bcb581d48a802719a167f Mon Sep 17 00:00:00 2001 From: AAminha Date: Fri, 7 Mar 2025 02:17:45 +0900 Subject: [PATCH 6/8] =?UTF-8?q?feat:=20=EB=A1=A4=EB=A7=81=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=ED=8D=BC=20=EC=82=AC=EC=9A=A9=EC=97=AC=EB=B6=80=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD=20api=20=EC=97=B0=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/rolling.ts | 13 ++++ .../Admin/components/RollingPaperItem.tsx | 75 +++++++++---------- 2 files changed, 48 insertions(+), 40 deletions(-) diff --git a/src/apis/rolling.ts b/src/apis/rolling.ts index b68d325..a8cb25d 100644 --- a/src/apis/rolling.ts +++ b/src/apis/rolling.ts @@ -70,3 +70,16 @@ export const deleteRollingPaper = async (eventPostId: number | string) => { throw error; } }; + +export const patchRollingPaper = async (eventPostId: number | string) => { + try { + const { + data: { data }, + } = await client.patch(`/api/admin/event-posts/${eventPostId}/status`); + console.log(data); + return data; + } catch (error) { + console.error(error); + throw error; + } +}; diff --git a/src/pages/Admin/components/RollingPaperItem.tsx b/src/pages/Admin/components/RollingPaperItem.tsx index 089d80f..c4e0a18 100644 --- a/src/pages/Admin/components/RollingPaperItem.tsx +++ b/src/pages/Admin/components/RollingPaperItem.tsx @@ -1,6 +1,7 @@ import { useMutation, useQueryClient } from '@tanstack/react-query'; +import { AxiosError } from 'axios'; -import { deleteRollingPaper } from '@/apis/rolling'; +import { deleteRollingPaper, patchRollingPaper } from '@/apis/rolling'; import { DeleteIcon } from '@/assets/icons'; interface RollingPaperItemProps { @@ -21,23 +22,43 @@ export default function RollingPaperItem({ information }: RollingPaperItemProps) }, }); + const { mutate: toggleStatus } = useMutation({ + mutationFn: () => patchRollingPaper(information.eventPostId), + onSuccess: () => { + // TODO: 기존 데이터 수정하는 방식으로 ㄱㄱㄱㄱㄱㄱㄱ + // 일단 임시로 캐싱 날리기 + queryClient.invalidateQueries({ queryKey: ['admin-rolling-paper'] }); + }, + onError: (err: AxiosError<{ code: string; message: string }>) => { + if (err.response?.data.code === 'EVENT-004') { + alert(err.response.data.message); + } + console.error(err); + }, + }); + + // TODO: 진짜 삭제하겠냐고 물어보기 return ( {information.eventPostId} - {information.title} + +
+ {information.used && ( + + 진행 중 + + )} + {information.title} +
+ - {information.used ? ( - - 진행 중 - - ) : ( - - )} + {!information.used && ( @@ -53,29 +74,3 @@ export default function RollingPaperItem({ information }: RollingPaperItemProps) ); } - -{ - /* - 2 - - 침수 피해를 복구중인 포스코 임직원 분들에게 응원의 메시지를 보내주세요! - - 12 - - - - - - -; */ -} From 383a97c6756fe6fd6be5b9ce46025c453c15c903 Mon Sep 17 00:00:00 2001 From: AAminha Date: Fri, 7 Mar 2025 09:47:37 +0900 Subject: [PATCH 7/8] =?UTF-8?q?feat:=20=EB=A1=A4=EB=A7=81=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=ED=8D=BC=20=EC=BD=94=EB=A9=98=ED=8A=B8=20=EB=AA=A9?= =?UTF-8?q?=EB=A1=9D=20=EC=A1=B0=ED=9A=8C=20api=20=EC=97=B0=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- eslint.config.js | 1 + src/pages/RollingPaper/index.tsx | 32 +++++++++++++++++--------------- src/types/rolling.d.ts | 16 +++++----------- 3 files changed, 23 insertions(+), 26 deletions(-) diff --git a/eslint.config.js b/eslint.config.js index 3cc2bdc..567dc87 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -31,6 +31,7 @@ export default tseslint.config( ...reactHooks.configs.recommended.rules, 'react-refresh/only-export-components': ['warn', { allowConstantExport: true }], '@tanstack/query/exhaustive-deps': 'error', + '@typescript-eslint/no-empty-object-type': off, 'import/order': [ 'error', { diff --git a/src/pages/RollingPaper/index.tsx b/src/pages/RollingPaper/index.tsx index 6bcc9e6..7ef656f 100644 --- a/src/pages/RollingPaper/index.tsx +++ b/src/pages/RollingPaper/index.tsx @@ -12,19 +12,17 @@ import Header from '@/layouts/Header'; import Comment from './components/Comment'; import CommentDetailModal from './components/CommentDetailModal'; import WriteCommentButton from './components/WriteCommentButton'; - -// TODO: 로그인 구현 완료 시, 더미 완전히 제거 -const DUMMY_USER_ZIP_CODE = '1DR41'; -const DUMMY_MESSAGE_COUNT = 20; +import useAuthStore from '@/stores/authStore'; const RollingPaperPage = () => { const id = useParams().id ?? ''; const [activeComment, setActiveComment] = useState(null); const [activeDetailModal, setActiveDetailModal] = useState(false); const [activeDeleteModal, setActiveDeleteModal] = useState(false); + const zipCode = useAuthStore((props) => props.zipCode); const queryClient = useQueryClient(); - const { data } = useQuery({ + const { data, isSuccess } = useQuery({ queryKey: ['rolling-paper', id], queryFn: () => getRollingPaperDetail(id), }); @@ -35,12 +33,14 @@ const RollingPaperPage = () => { queryClient.setQueryData(['rolling-paper', id], (oldData: RollingPaper) => { if (!oldData) return oldData; - return { - ...oldData, - eventPostComments: oldData.eventPostComments.filter( - (comment: RollingPaperComment) => comment.commentId !== data.commentId, - ), - }; + // return { + // ...oldData, + // eventPostComments: oldData.eventPostComments.filter( + // (comment: RollingPaperComment) => comment.commentId !== data.commentId, + // ), + // }; + console.log(data, oldData); + return oldData; }); setActiveDeleteModal(false); @@ -56,7 +56,7 @@ const RollingPaperPage = () => { {activeDetailModal && activeComment && ( { setActiveDetailModal(false); setActiveComment(null); @@ -85,11 +85,13 @@ const RollingPaperPage = () => {
{data?.title} -

등록된 편지 {DUMMY_MESSAGE_COUNT}

+

+ 등록된 편지 {data ? data.eventPostComments.content.length : 0} +

- {data && - data.eventPostComments.map((comment) => ( + {isSuccess && + data.eventPostComments.content.map((comment) => ( { content: T[]; currentPage: number; @@ -31,4 +21,8 @@ interface PaginationData { totalPages: number; } -type RollingPaperList = PaginationData; +interface RollingPaperList extends PaginationData {} + +interface RollingPaper extends RollingPaperInformation { + eventPostComments: PaginationData; +} From 4df72367b764d2bfeae37595a4d3e540c44e5f75 Mon Sep 17 00:00:00 2001 From: AAminha Date: Fri, 7 Mar 2025 10:05:01 +0900 Subject: [PATCH 8/8] =?UTF-8?q?feat:=20=EB=A1=A4=EB=A7=81=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=ED=8D=BC=20=EB=93=B1=EB=A1=9D=20=EB=B0=8F=20=EC=82=AD?= =?UTF-8?q?=EC=A0=9C=20api=20=EC=97=B0=EB=8F=99=20-=20api=20=EC=9D=91?= =?UTF-8?q?=EB=8B=B5=20=EA=B5=AC=EC=A1=B0=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/CommentDetailModal.tsx | 2 +- src/pages/RollingPaper/index.tsx | 23 ++++++++++++------- 2 files changed, 16 insertions(+), 9 deletions(-) diff --git a/src/pages/RollingPaper/components/CommentDetailModal.tsx b/src/pages/RollingPaper/components/CommentDetailModal.tsx index 4769892..cbabb52 100644 --- a/src/pages/RollingPaper/components/CommentDetailModal.tsx +++ b/src/pages/RollingPaper/components/CommentDetailModal.tsx @@ -20,7 +20,7 @@ const CommentDetailModal = ({ comment, isWriter, onClose, onDelete }: CommentDet
-

{comment.content}

+

{comment.content}

From. {comment.zipCode}

 diff --git a/src/pages/RollingPaper/index.tsx b/src/pages/RollingPaper/index.tsx index 7ef656f..71b4d70 100644 --- a/src/pages/RollingPaper/index.tsx +++ b/src/pages/RollingPaper/index.tsx @@ -33,14 +33,14 @@ const RollingPaperPage = () => { queryClient.setQueryData(['rolling-paper', id], (oldData: RollingPaper) => { if (!oldData) return oldData; - // return { - // ...oldData, - // eventPostComments: oldData.eventPostComments.filter( - // (comment: RollingPaperComment) => comment.commentId !== data.commentId, - // ), - // }; - console.log(data, oldData); - return oldData; + return { + ...oldData, + eventPostComments: { + content: oldData.eventPostComments.content.filter( + (comment: RollingPaperComment) => comment.commentId !== data.commentId, + ), + }, + }; }); setActiveDeleteModal(false); @@ -102,6 +102,13 @@ const RollingPaperPage = () => { /> ))} + {isSuccess && data.eventPostComments.content.length === 0 && ( +

+ 아직 등록된 편지가 없어요. +
+ 첫번째로 편지를 남겨볼까요? +

+ )}