Feat: TRI-83 결제 서비스 구현 #74

DreamPaste · 2025-09-13T15:42:07Z

📦 Pull Request

📝 요약(Summary)

토스페이먼츠 SDK를 활용한 결제 시스템을 구현했습니다.
/mypage/reservation-list 마이페이지 예약 내역에서 확인 가능합니다.

결제하기 버튼을 누르면 Payments.Modal 모달이 열립니다.

결제를 성공할 경우와 실패할 경우 모달로 확인 할 수 있습니다.(카카오페이가 제일 확인하기 쉬워요)

💬 공유사항 to 리뷰어

✨ 새로운 기능

토스페이먼츠 결제 모달 구현 (Payments.Modal.tsx)
- 결제 위젯 렌더링 및 금액 설정
- 결제 성공/실패 처리
- 에러 바운더리 및 상태 관리
결제 에러 처리 컴포넌트 (Payments.Error.tsx)
- 미니멀한 에러 모달 디자인
- 사용자 친화적 에러 메시지

🔧 기술적 개선사항

결제 위젯 중복 렌더링 방지
- DOM 정리 로직 구현
- 위젯 상태 관리 최적화
- React Fast Refresh 호환성 개선
비동기 에러 처리 강화
- 상태 기반 에러 관리
- 결제 실패 시 사용자 피드백 개선

🎨 UI/UX 개선

드롭다운 애니메이션 최적화
- Framer Motion oklab 색상 경고 해결
- 중복 hover 효과 제거

…/TRI-77-activities-page

linear · 2025-09-13T15:42:09Z

TRI-83 결제 서비스 구현

Copilot

Pull Request Overview

This PR implements a payment system using Toss Payments SDK and includes various performance optimizations and UI/UX improvements.

Toss Payments integration with payment modal and error handling
Image loading performance improvements with blur placeholders and LQIP generation
UI enhancements including animations, dropdown improvements, and booking interface refinements

Reviewed Changes

Copilot reviewed 28 out of 29 changed files in this pull request and generated 8 comments.

Show a summary per file

File	Description
src/components/pages/activities/payments/Payments.Modal.tsx	Payment modal implementation with Toss Payments SDK integration
src/components/pages/activities/payments/Payments.Error.tsx	Error handling component for payment failures
src/lib/utils/blur.ts	Utility for generating blur placeholder images
src/components/pages/activities/ActivityImageViewer.tsx	Image viewer with blur placeholder integration
src/components/pages/myPage/ReservationListCard.tsx	Payment button integration in reservation cards
src/hooks/useScrollPosition.ts	Enhanced scroll position management for various elements
package.json	Added payment SDK and image processing dependencies

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

Copilot · 2025-09-13T15:43:35Z

src/components/pages/activities/payments/Payments.Modal.tsx

+  totalPrice: number;
+}
+
+const CLIENT_KEY = 'test_gck_docs_Ovk5rk1EwkEbP0W43n07xlzm';


The Toss Payments client key is hardcoded in the component. This test key should be moved to environment variables to prevent accidental exposure in production builds.

Suggested change

const CLIENT_KEY = 'test_gck_docs_Ovk5rk1EwkEbP0W43n07xlzm';

const CLIENT_KEY = process.env.REACT_APP_TOSS_PAYMENTS_CLIENT_KEY as string;

Copilot · 2025-09-13T15:43:35Z

src/components/pages/activities/payments/Payments.Modal.tsx

+        customerEmail: 'customer123@gmail.com',
+        customerName: user?.nickname || '홍길동',
+        customerMobilePhone: '01012341234',


Customer email and phone number are hardcoded with dummy values. These should use actual user data from the user store or props to ensure proper payment processing.

Suggested change

customerEmail: 'customer123@gmail.com',

customerName: user?.nickname || '홍길동',

customerMobilePhone: '01012341234',

customerEmail: user?.email || 'noemail@unknown.com',

customerName: user?.nickname || '홍길동',

customerMobilePhone: user?.phone || '00000000000',

Copilot · 2025-09-13T15:43:36Z

src/components/pages/activities/payments/Payments.Modal.tsx

+        customerEmail: 'customer123@gmail.com',
+        customerName: user?.nickname || '홍길동',
+        customerMobilePhone: '01012341234',


Customer email and phone number are hardcoded with dummy values. These should use actual user data from the user store or props to ensure proper payment processing.

Suggested change

customerEmail: 'customer123@gmail.com',

customerName: user?.nickname || '홍길동',

customerMobilePhone: '01012341234',

customerEmail: user?.email || '',

customerName: user?.nickname || '홍길동',

customerMobilePhone: user?.phone || '',

Copilot · 2025-09-13T15:43:36Z

src/hooks/useInfiniteReviews.ts

+  // 로딩 중일 때는 5점을 기본값으로 표시
+  const averageRating = isLoading ? 5 : firstPage?.averageRating || 0;


Showing a 5-star rating while loading is misleading to users. Consider showing a loading state or no rating instead of defaulting to the highest possible rating.

Suggested change

// 로딩 중일 때는 5점을 기본값으로 표시

const averageRating = isLoading ? 5 : firstPage?.averageRating || 0;

// 로딩 중일 때는 평점을 표시하지 않음

const averageRating = isLoading ? null : firstPage?.averageRating || 0;

Copilot · 2025-09-13T15:43:36Z

src/components/pages/activities/ReviewHero.tsx

+const LABELS = ['평점 없음', '보통', '다소 만족', '만족', '매우 만족'] as const;

 export function ReviewHero({ reviewCount = 1000, rating = 5 }: ReviewHeroProps) {
  const level = Math.max(0, Math.min(4, Math.floor(rating))) as Level;
  const summary = LABELS[level];


The label mapping is inconsistent with the rating calculation. A rating of 0 would show '평점 없음' but ratings 0-1 should both map to the first meaningful rating level.

Suggested change

const LABELS = ['평점 없음', '보통', '다소 만족', '만족', '매우 만족'] as const;

export function ReviewHero({ reviewCount = 1000, rating = 5 }: ReviewHeroProps) {

const level = Math.max(0, Math.min(4, Math.floor(rating))) as Level;

const summary = LABELS[level];

const LABELS = ['보통', '다소 만족', '만족', '매우 만족', '최고'] as const;

export function ReviewHero({ reviewCount = 1000, rating = 5 }: ReviewHeroProps) {

const level = rating == null ? null : Math.max(0, Math.min(4, Math.floor(rating === 0 ? 0 : rating - 1))) as Level | null;

const summary = level === null ? '평점 없음' : LABELS[level];

Copilot · 2025-09-13T15:43:36Z

src/components/pages/activities/bookingCard/BookingDateInput.tsx

+    if (year && month && day) {
+      const dateString = `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')}`;


The padStart method is called on the month and day parameters, but these are strings from input values that might not need padding or could be invalid. Consider validating the input values first or using parseInt to ensure they are numbers.

Suggested change

if (year && month && day) {

const dateString = `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')}`;

// Validate year, month, and day are numeric and in valid ranges

const yearNum = parseInt(year, 10);

const monthNum = parseInt(month, 10);

const dayNum = parseInt(day, 10);

if (

!isNaN(yearNum) &&

!isNaN(monthNum) &&

!isNaN(dayNum) &&

year.length === 4 &&

monthNum >= 1 && monthNum <= 12 &&

dayNum >= 1 && dayNum <= 31

) {

const dateString = `${yearNum}-${monthNum.toString().padStart(2, '0')}-${dayNum.toString().padStart(2, '0')}`;

Copilot · 2025-09-13T15:43:37Z

src/app/activities/[activityId]/ActivityClientPage.tsx

+  // 1. 정적 데이터 (이미지, 주소, 제목, 설명) - 긴 캐시
+  const { data: staticInfo } = useSuspenseQuery({
+    queryKey: [...activityQueryKeys.detail(activityId), 'static'],
+    queryFn: () => getActivityDetail(Number(activityId)),
+    select: (data) => ({
+      id: data.id,
+      title: data.title,
+      description: data.description,
+      address: data.address,
+      bannerImageUrl: data.bannerImageUrl,
+      subImages: data.subImages,
+      category: data.category,
+      userId: data.userId,
+      createdAt: data.createdAt,
+      updatedAt: data.updatedAt,
+    }),
+    staleTime: 30 * 60 * 1000, // 30분 캐시 (정적 정보)
+    gcTime: 60 * 60 * 1000, // 1시간 메모리 보관
+  });
+


Making two separate API calls to the same endpoint with different query keys creates unnecessary network requests. Consider restructuring to use a single query with proper cache management or implement data splitting at the API level.

Suggested change

// 1. 정적 데이터 (이미지, 주소, 제목, 설명) - 긴 캐시

const { data: staticInfo } = useSuspenseQuery({

queryKey: [...activityQueryKeys.detail(activityId), 'static'],

queryFn: () => getActivityDetail(Number(activityId)),

select: (data) => ({

id: data.id,

title: data.title,

description: data.description,

address: data.address,

bannerImageUrl: data.bannerImageUrl,

subImages: data.subImages,

category: data.category,

userId: data.userId,

createdAt: data.createdAt,

updatedAt: data.updatedAt,

}),

staleTime: 30 * 60 * 1000, // 30분 캐시 (정적 정보)

gcTime: 60 * 60 * 1000, // 1시간 메모리 보관

});

// 1. 활동 상세 데이터 (정적 + 동적) - 캐시 관리 필요

const { data: activityDetail } = useSuspenseQuery({

queryKey: activityQueryKeys.detail(activityId),

queryFn: () => getActivityDetail(Number(activityId)),

staleTime: 5 * 60 * 1000, // 5분 캐시 (동적 정보 포함)

gcTime: 30 * 60 * 1000, // 30분 메모리 보관

});

// 정적 데이터 분리

const staticInfo = useMemo(() => activityDetail && {

id: activityDetail.id,

title: activityDetail.title,

description: activityDetail.description,

address: activityDetail.address,

bannerImageUrl: activityDetail.bannerImageUrl,

subImages: activityDetail.subImages,

category: activityDetail.category,

userId: activityDetail.userId,

createdAt: activityDetail.createdAt,

updatedAt: activityDetail.updatedAt,

}, [activityDetail]);

Copilot · 2025-09-13T15:43:37Z

src/app/activities/[activityId]/ActivityClientPage.tsx

+  // 1. 정적 데이터 (이미지, 주소, 제목, 설명) - 긴 캐시
+  const { data: staticInfo } = useSuspenseQuery({
+    queryKey: [...activityQueryKeys.detail(activityId), 'static'],
+    queryFn: () => getActivityDetail(Number(activityId)),
+    select: (data) => ({
+      id: data.id,
+      title: data.title,
+      description: data.description,
+      address: data.address,
+      bannerImageUrl: data.bannerImageUrl,
+      subImages: data.subImages,
+      category: data.category,
+      userId: data.userId,
+      createdAt: data.createdAt,
+      updatedAt: data.updatedAt,
+    }),
+    staleTime: 30 * 60 * 1000, // 30분 캐시 (정적 정보)
+    gcTime: 60 * 60 * 1000, // 1시간 메모리 보관
+  });
+
+  // 2. 동적 데이터 (가격, 스케줄, 평점) - 짧은 캐시
+  const { data: dynamicInfo } = useSuspenseQuery({
+    queryKey: [...activityQueryKeys.detail(activityId), 'dynamic'],
    queryFn: () => getActivityDetail(Number(activityId)),
-    staleTime: 5 * 60 * 1000, // 5분 캐시 (기본 정보)
-    gcTime: 30 * 60 * 1000, // 30분 메모리 보관
+    select: (data) => ({
+      price: data.price,
+      schedules: data.schedules,
+      rating: data.rating,
+      reviewCount: data.reviewCount,
+    }),
+    staleTime: 1 * 60 * 1000, // 1분 캐시 (동적 정보)
+    gcTime: 5 * 60 * 1000, // 5분 메모리 보관
+    refetchInterval: 2 * 60 * 1000, // 2분마다 자동 갱신
  });

+  // 3. 합성된 activity 객체 (useMemo로 불필요한 리렌더링 방지)


Making two separate API calls to the same endpoint with different query keys creates unnecessary network requests. Consider restructuring to use a single query with proper cache management or implement data splitting at the API level.

summerDev96 · 2025-09-14T07:46:51Z

src/components/common/InfinityScroll.tsx

+  // 스크롤 위치 저장 훅 사용 - parentRef를 스크롤 대상으로 전달
+  const { restoreScrollPosition } = useScrollPosition(scrollKey, enableScrollPosition, parentRef);

  useEffect(() => {
-    // 최대 아이템의 길이가 초과되면 잘라냅니다.(최적화)
+    // 최대 아이템의 길이가 초과되면 잘라냅니다.
    if (items.length > maxItems) {
      setDisplayItems(items.slice(items.length - maxItems));
    } else {


머지된 후 무한스크롤 리스트에서 스크롤 위치 복원되는지 확인해보겠습니다!
(프리뷰 링크 테스트) 예약내역 리스트에서 확인해보았는데 위치가 살짝 달라지는 것 같아요

스크롤 위치 복원은 약간 문제가 있었던거 같아요 수정하겠습니다!

summerDev96 · 2025-09-14T08:04:21Z

src/components/pages/activities/bookingCard/BookingConfirm.Modal.tsx

+    onSuccess: async (data) => {
      console.log('🎫 [BookingConfirmModal] 예약 성공:', data);
      onClose();
      successToast.run('예약이 완료되었습니다!');
+      router.push('/mypage/reservation-list');


예약완료 후 예약내역으로 이동 후 예약한 내역 반영되는 점 확인하였습니다.

DreamPaste added 12 commits September 11, 2025 20:33

fix: 로딩 중 5점을 표시하도록 수정

19a7d72

Merge branch 'main' of https://github.com/3rdflr/part4-team2 into fix…

8305789

…/TRI-77-activities-page

fix: 640px 이하일때 컨테이너 사이즈가 0이 되던 문제 수정

d273fdc

fix: 스크롤 복원 로직 수정 (useScrollPostition이 스크롤 대상 요소를 확인할 수 있도록 수정)

09d913f

Merge branch 'main' of https://github.com/3rdflr/part4-team2 into fix…

62e5b36

…/TRI-77-activities-page

refactor: 데스크톱 부킹 카드 디자인 개선

5669ab6

fix: 드롭다운 수정 및 삭제 기능 추가"

887fbf4

refactor(ImageViewer):스켈레톤을 제거하고, 이미지 로드 방식을 blur를 사용해 불러오도록 수정했습니다.

b235b70

fix: 쿼리키 정리

7061920

feat: 결제 서비스 구현

e00ef08

fix: 결제 서비스 수정

51c983e

fix: 드롭다운 경고 수정

4474605

DreamPaste requested review from 3rdflr, Copilot, pyeonh8 and summerDev96 September 13, 2025 15:42

DreamPaste added feat ✨ 새로운 기능 추가 휘건 labels Sep 13, 2025

Copilot AI reviewed Sep 13, 2025

View reviewed changes

summerDev96 approved these changes Sep 14, 2025

View reviewed changes

fix: 날짜 선택 카드의 placeholder를 오늘 날짜로 수정했습니다.

d8de130

vercel bot deployed to Preview September 14, 2025 10:24 View deployment

DreamPaste merged commit e18760e into main Sep 14, 2025
2 checks passed

	const CLIENT_KEY = 'test_gck_docs_Ovk5rk1EwkEbP0W43n07xlzm';
	const CLIENT_KEY = process.env.REACT_APP_TOSS_PAYMENTS_CLIENT_KEY as string;

		// 로딩 중일 때는 5점을 기본값으로 표시
		const averageRating = isLoading ? 5 : firstPage?.averageRating \|\| 0;

		if (year && month && day) {
		const dateString = `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')}`;

-    if (year && month && day) {
-      const dateString = `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')}`;
+    // Validate year, month, and day are numeric and in valid ranges
+    const yearNum = parseInt(year, 10);
+    const monthNum = parseInt(month, 10);
+    const dayNum = parseInt(day, 10);
+    if (
+      !isNaN(yearNum) &&
+      !isNaN(monthNum) &&
+      !isNaN(dayNum) &&
+      year.length === 4 &&
+      monthNum >= 1 && monthNum <= 12 &&
+      dayNum >= 1 && dayNum <= 31
+    ) {
+      const dateString = `${yearNum}-${monthNum.toString().padStart(2, '0')}-${dayNum.toString().padStart(2, '0')}`;

Feat: TRI-83 결제 서비스 구현 #74

Feat: TRI-83 결제 서비스 구현 #74

Uh oh!

Conversation

DreamPaste commented Sep 13, 2025

📦 Pull Request

📝 요약(Summary)

💬 공유사항 to 리뷰어

✨ 새로운 기능

🔧 기술적 개선사항

🎨 UI/UX 개선

Uh oh!

linear bot commented Sep 13, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Sep 13, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 13, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 13, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 13, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 13, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 13, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 13, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 13, 2025

Choose a reason for hiding this comment

Uh oh!

summerDev96 Sep 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

DreamPaste Sep 14, 2025

Choose a reason for hiding this comment

Uh oh!

summerDev96 Sep 14, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

summerDev96 Sep 14, 2025 •

edited

Loading