diff --git a/apps/what-today/src/components/activities/ActivitiesReview.tsx b/apps/what-today/src/components/activities/ActivitiesReview.tsx index b434df73..462cb407 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,25 @@ 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..c75c5b24 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,28 +162,10 @@ export default function MainPage() { setCurrentPage(1); }, []); - // 카드 렌더링 최적화 - const renderCards = useCallback(() => { - return pagedItems.map((item, idx) => ( - navigate(`/activities/${item.id}`)} - > - - - - )); - }, [pagedItems, currentPage, navigate]); - return ( <>
+
@@ -252,7 +248,28 @@ export default function MainPage() {
) : ( - renderCards() + pagedItems.map((item) => ( + + 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..e6e42502 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 &&
체험목록 불러오는 중...
} @@ -125,7 +133,7 @@ export default function ManageActivitiesPage() {
-
+
{content}
setIsDeleteOpen(false)}> diff --git a/packages/design-system/src/components/skeleton/index.tsx b/packages/design-system/src/components/skeleton/index.tsx index a9f05cea..22b4c25a 100644 --- a/packages/design-system/src/components/skeleton/index.tsx +++ b/packages/design-system/src/components/skeleton/index.tsx @@ -1,4 +1,4 @@ export { default as ExperienceCardSkeleton } from './ExperienceCardSkeleton'; +export { default as NotificationCardSkeleton } from './NotificationCardSkeleton'; export { default as OngoingExperienceCardSkeleton } from './OngoingExperienceCardSkeleton'; export { default as UpcomingScheduleItemSkeleton } from './UpcomingScheduleItemSkeleton'; -export { default as NotificationCardSkeleton } from './NotificationCardSkeleton'; diff --git a/packages/design-system/src/pages/OngoingExperienceCardDoc.tsx b/packages/design-system/src/pages/OngoingExperienceCardDoc.tsx index d4415456..4ccec72f 100644 --- a/packages/design-system/src/pages/OngoingExperienceCardDoc.tsx +++ b/packages/design-system/src/pages/OngoingExperienceCardDoc.tsx @@ -1,4 +1,4 @@ -import OngoingExperienceCard from '../components/OngoingExperienceCard'; +// import OngoingExperienceCard from '../components/OngoingExperienceCard'; import DocTemplate, { DocCode } from '../layouts/DocTemplate'; /* Playground는 편집 가능한 코드 블록입니다. */ @@ -26,9 +26,9 @@ export default function OngoingExperienceCardDoc() { Click me`} />
+ {/* {}} onClickActivity={() => {}} /> {}} onClickActivity={() => {}} /> - {}} onClickActivity={() => {}} /> - {}} onClickActivity={() => {}} /> + {}} onClickActivity={() => {}} /> */}
); diff --git a/packages/design-system/src/pages/UpcomingScheduleDoc.tsx b/packages/design-system/src/pages/UpcomingScheduleDoc.tsx index b205cf0b..f9db7e21 100644 --- a/packages/design-system/src/pages/UpcomingScheduleDoc.tsx +++ b/packages/design-system/src/pages/UpcomingScheduleDoc.tsx @@ -1,4 +1,4 @@ -import UpcomingSchedule from '@/components/UpcomingSchedule'; +// import UpcomingSchedule from '@/components/UpcomingSchedule'; import DocTemplate, { DocCode } from '../layouts/DocTemplate'; @@ -26,7 +26,7 @@ export default function UpcomingScheduleDoc() { {/* 예시 코드 */} Click me`} /> - {}} /> + {/* {}} /> */} ); }