From 2d55c806c5450fd325c193b04aa4cd1775b374c1 Mon Sep 17 00:00:00 2001 From: Taeil08 Date: Mon, 4 Aug 2025 20:54:50 +0900 Subject: [PATCH 1/2] =?UTF-8?q?=E2=99=BB=EF=B8=8F[#243]=20Refactor:=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=AA=A8=EC=85=98=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../activities/ActivitiesReview.tsx | 27 ++++++--- apps/what-today/src/pages/main/index.tsx | 60 ++++++++++++------- .../pages/mypage/manage-activities/index.tsx | 34 +++++++---- .../pages/mypage/reservations-list/index.tsx | 12 +++- 4 files changed, 87 insertions(+), 46 deletions(-) diff --git a/apps/what-today/src/components/activities/ActivitiesReview.tsx b/apps/what-today/src/components/activities/ActivitiesReview.tsx index 99b613dc..30907135 100644 --- a/apps/what-today/src/components/activities/ActivitiesReview.tsx +++ b/apps/what-today/src/components/activities/ActivitiesReview.tsx @@ -1,4 +1,5 @@ import { StarIcon } from '@what-today/design-system'; +import { motion } from 'motion/react'; import { type ActivityReview } from '@/schemas/activityReview'; interface ActivitiesReviewProps { @@ -20,16 +21,24 @@ export default function ActivitiesReview({ review }: ActivitiesReviewProps) { }); return ( -
-
-
{user.nickname}
-
{formattedDate}
+ +
+
+
{user.nickname}
+
{formattedDate}
+
+
+ +
+

{content}

-
- -
-

{content}

-
+ ); } diff --git a/apps/what-today/src/pages/main/index.tsx b/apps/what-today/src/pages/main/index.tsx index 848dd94f..d95d32ff 100644 --- a/apps/what-today/src/pages/main/index.tsx +++ b/apps/what-today/src/pages/main/index.tsx @@ -18,7 +18,8 @@ import { TourIcon, WellbeingIcon, } from '@what-today/design-system'; -import { useCallback, useEffect, useMemo, useState } from 'react'; +import { motion } from 'motion/react'; +import { useCallback, useEffect, useLayoutEffect, useMemo, useState } from 'react'; import React from 'react'; import { useNavigate } from 'react-router-dom'; @@ -55,6 +56,17 @@ export default function MainPage() { const [selectedCategory, setSelectedCategory] = useState(''); const navigate = useNavigate(); + useLayoutEffect(() => { + if ('scrollRestoration' in window.history) { + window.history.scrollRestoration = 'manual'; + } + }, []); + + // 페이지 마운트 시 무조건 맨 위로 + useLayoutEffect(() => { + window.scrollTo({ top: 0, left: 0, behavior: 'auto' }); + }, []); + // 반응형 카드 수 const handleResize = useCallback(() => { setItemsPerPage(getCount()); @@ -124,7 +136,9 @@ export default function MainPage() { // 이벤트 핸들러 const handlePageChange = useCallback( (page: number) => { - if (page !== currentPage) setCurrentPage(page); + if (page !== currentPage) { + setCurrentPage(page); + } }, [currentPage], ); @@ -148,25 +162,6 @@ export default function MainPage() { setCurrentPage(1); }, []); - // 카드 렌더링 최적화 - const renderCards = useCallback(() => { - return pagedItems.map((item, idx) => ( - navigate(`/activities/${item.id}`)} - > - - - - )); - }, [pagedItems, currentPage, navigate]); - return ( <>
@@ -252,7 +247,28 @@ export default function MainPage() {
) : ( - renderCards() + pagedItems.map((item, idx) => ( + + navigate(`/activities/${item.id}`)} + > + + + + + )) )}
diff --git a/apps/what-today/src/pages/mypage/manage-activities/index.tsx b/apps/what-today/src/pages/mypage/manage-activities/index.tsx index 9363ebd9..5f0c0af3 100644 --- a/apps/what-today/src/pages/mypage/manage-activities/index.tsx +++ b/apps/what-today/src/pages/mypage/manage-activities/index.tsx @@ -8,6 +8,7 @@ import { useToast, WarningLogo, } from '@what-today/design-system'; +import { motion } from 'motion/react'; import { useEffect, useRef, useState } from 'react'; import { useNavigate } from 'react-router-dom'; @@ -88,20 +89,27 @@ export default function ManageActivitiesPage() { content = ( <> {allActivities.map(({ id, title, price, bannerImageUrl, rating, reviewCount }) => ( - { - setDeleteTargetId(id); - setIsDeleteOpen(true); - }} - onEdit={() => navigate(`/experiences/create/${id}`)} - onNavigate={() => navigate(`/activities/${id}`)} - /> + initial={{ opacity: 0, y: 80 }} + transition={{ duration: 1 }} + viewport={{ once: true, amount: 0.2 }} + whileInView={{ opacity: 1, y: 0 }} + > + { + setDeleteTargetId(id); + setIsDeleteOpen(true); + }} + onEdit={() => navigate(`/experiences/create/${id}`)} + onNavigate={() => navigate(`/activities/${id}`)} + /> + ))}
{isFetchingNextPage &&
체험목록 불러오는 중...
} diff --git a/apps/what-today/src/pages/mypage/reservations-list/index.tsx b/apps/what-today/src/pages/mypage/reservations-list/index.tsx index b7898be7..f3d66075 100644 --- a/apps/what-today/src/pages/mypage/reservations-list/index.tsx +++ b/apps/what-today/src/pages/mypage/reservations-list/index.tsx @@ -12,6 +12,7 @@ import { } from '@what-today/design-system'; import { WarningLogo } from '@what-today/design-system'; import { useToast } from '@what-today/design-system'; +import { motion } from 'motion/react'; import { useRef, useState } from 'react'; import { useNavigate } from 'react-router-dom'; import { twJoin } from 'tailwind-merge'; @@ -143,7 +144,14 @@ export default function ReservationsListPage() { }); return sortedByDateDesc.map(([date, group], index) => ( -
+

{date}

    {group.map((res) => { @@ -197,7 +205,7 @@ export default function ReservationsListPage() { ); })}
-
+ )); }; From a2c1260f402961bcbbea9eb01b21ab39fdde10c2 Mon Sep 17 00:00:00 2001 From: Taeil08 Date: Tue, 5 Aug 2025 01:03:30 +0900 Subject: [PATCH 2/2] =?UTF-8?q?=E2=99=BB=EF=B8=8F[#243]=20Refactor:=20?= =?UTF-8?q?=EC=98=88=EC=95=BD=EB=82=B4=EC=97=AD=20=EB=AA=A8=EC=85=98=20?= =?UTF-8?q?=EC=82=AD=EC=A0=9C=20=EB=B0=8F=20=EC=98=A4=EB=B2=84=ED=94=8C?= =?UTF-8?q?=EB=A1=9C=EC=9A=B0=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/what-today/src/pages/main/index.tsx | 4 ++-- .../src/pages/mypage/manage-activities/index.tsx | 2 +- .../src/pages/mypage/reservations-list/index.tsx | 12 ++---------- 3 files changed, 5 insertions(+), 13 deletions(-) diff --git a/apps/what-today/src/pages/main/index.tsx b/apps/what-today/src/pages/main/index.tsx index eb0cd9a2..c75c5b24 100644 --- a/apps/what-today/src/pages/main/index.tsx +++ b/apps/what-today/src/pages/main/index.tsx @@ -248,9 +248,9 @@ export default function MainPage() {
) : ( - pagedItems.map((item, idx) => ( + pagedItems.map((item) => ( -
+
{content}
setIsDeleteOpen(false)}> diff --git a/apps/what-today/src/pages/mypage/reservations-list/index.tsx b/apps/what-today/src/pages/mypage/reservations-list/index.tsx index f1ef1fae..7dd3118c 100644 --- a/apps/what-today/src/pages/mypage/reservations-list/index.tsx +++ b/apps/what-today/src/pages/mypage/reservations-list/index.tsx @@ -11,7 +11,6 @@ import { } from '@what-today/design-system'; import { WarningLogo } from '@what-today/design-system'; import { useToast } from '@what-today/design-system'; -import { motion } from 'motion/react'; import { useCallback, useEffect, useRef, useState } from 'react'; import { useNavigate } from 'react-router-dom'; import { twJoin } from 'tailwind-merge'; @@ -208,14 +207,7 @@ export default function ReservationsListPage() { // 🎯 날짜별 그룹핑만 하고 정렬 제거 (자연스러운 순서 유지) return Object.entries(grouped).map(([date, group], index) => ( - +

{date}

    {group.map((res) => { @@ -269,7 +261,7 @@ export default function ReservationsListPage() { ); })}
- +
)); };