Skip to content

[Chore/#88] 구매 관련 페이지 스타일 수정#89

Merged
skyblue1232 merged 1 commit intodevelopfrom
feat/#88/customer-random-box-apis
Apr 5, 2026
Merged

[Chore/#88] 구매 관련 페이지 스타일 수정#89
skyblue1232 merged 1 commit intodevelopfrom
feat/#88/customer-random-box-apis

Conversation

@skyblue1232
Copy link
Copy Markdown
Contributor

@skyblue1232 skyblue1232 commented Apr 5, 2026

✅ 작업 내용

📝 Description

무엇을 변경했는지 설명해주세요.

작업한 내용을 체크해주세요.

  • [ ]

🚀 설계 의도 및 개선점

구조 변경 이유 + 고민 + 해결 과정

📸 스크린샷 (선택)

  • ex) UI 관련 영상

📎 기타 참고사항

  • ex. 테스트 방식
  • ex. 환경 변수 변경 여부

Fixes #88

Summary by CodeRabbit

릴리스 노트

  • 개선 사항
    • 상점 및 메뉴 데이터가 API에서 실시간으로 조회됩니다.
    • 픽업 시간 정보가 더 명확하게 표시됩니다.
    • 상품 정보 표시 업데이트 (재고 정보 포함).
    • 구매 페이지의 데이터 검증 로직 강화.

@skyblue1232 skyblue1232 self-assigned this Apr 5, 2026
@skyblue1232 skyblue1232 added chore 자잘한 수정 style 스타일 관련 적용 labels Apr 5, 2026
@vercel
Copy link
Copy Markdown

vercel bot commented Apr 5, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
compasser-customer Ready Ready Preview, Comment Apr 5, 2026 4:30am
compasser-owner Ready Ready Preview, Comment Apr 5, 2026 4:30am

@github-actions github-actions bot added the feat 기능 구현 및 생성 label Apr 5, 2026
@coderabbitai
Copy link
Copy Markdown

coderabbitai bot commented Apr 5, 2026

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 230b60c7-4659-405f-b8f7-b1b0027b0669

📥 Commits

Reviewing files that changed from the base of the PR and between 7df0816 and 79deb6e.

📒 Files selected for processing (12)
  • apps/customer/src/app/(tabs)/main/store/[id]/purchase/_components/PurchaseCompleteModal.tsx
  • apps/customer/src/app/(tabs)/main/store/[id]/purchase/_components/PurchaseContent.tsx
  • apps/customer/src/app/(tabs)/main/store/[id]/purchase/_components/PurchaseItemCard.tsx
  • apps/customer/src/app/(tabs)/main/store/[id]/purchase/_components/PurchaseOrderCard.tsx
  • apps/customer/src/app/(tabs)/main/store/[id]/purchase/page.tsx
  • apps/customer/src/app/(tabs)/main/store/[id]/purchase/utils/business-hours.ts
  • apps/customer/src/app/(tabs)/main/store/_components/StoreDetailContent.tsx
  • apps/customer/src/app/(tabs)/main/store/_components/StoreMenuCard.tsx
  • apps/customer/src/app/(tabs)/main/store/_constants/mockStoreDetail.ts
  • apps/customer/tsconfig.json
  • apps/owner/tsconfig.json
  • packages/api/tsconfig.json

📝 Walkthrough

Walkthrough

구매 페이지의 mock 데이터를 API 호출로 전환하고, 데이터 타입을 StoreRespDTO/StoreRandomBoxRespDTO로 업데이트했습니다. 영업시간 파싱 유틸리티를 추가하고, 필드명(name → boxName)과 속성(remainingCount → stock)을 변경하며, 픽업시간 렌더링 로직을 통합했습니다.

Changes

Cohort / File(s) Summary
Purchase 컴포넌트 타입 및 props 업데이트
PurchaseCompleteModal.tsx, PurchaseOrderCard.tsx, PurchaseContent.tsx
StoreDetailItem/StoreMenuItem에서 StoreRespDTO/StoreRandomBoxRespDTO로 타입 변경. pickupTimeText prop 추가. 표시 필드를 nameboxName, remainingCountstock으로 변경. 픽업시간 렌더링을 props 기반으로 통합.
구매 페이지 API 통합 및 로직 업데이트
page.tsx, PurchaseContent.tsx
Mock 데이터(MOCK_MAIN_STORE_DETAIL_MAP) 제거 및 storeModule.requests.getStoreDetail() API 호출 추가. 메뉴 선택 로직을 store.menus에서 store.randomBoxes로 변경. 숫자 유효성 검증(Number.isFinite()) 추가.
영업시간 파싱 유틸리티
business-hours.ts
새로운 유틸리티 모듈. BusinessHoursValue 타입과 parseBusinessHours() 함수 추가. 요일별 영업시간 데이터 파싱 및 검증 로직 제공.
Store 컴포넌트 타입 및 props 업데이트
StoreMenuCard.tsx, StoreDetailContent.tsx
StoreMenuCarditem 타입을 StoreMenuItem에서 StoreRandomBoxRespDTO로 변경. boxId 필드 추가 및 pickupTimeText props 선택적 추가.
Mock 데이터 파일 제거
mockStoreDetail.ts
MOCK_MAIN_STORE_DETAIL_LIST, MOCK_MAIN_STORE_DETAIL_MAP, createWeeklyHours 완전 삭제 (360줄 제거).
TypeScript 설정 업데이트
apps/customer/tsconfig.json, apps/owner/tsconfig.json, packages/api/tsconfig.json
baseUrl: "." 제거. @/* paths alias를 ["src/*"]에서 ["./src/*"]로 업데이트.

Sequence Diagram

sequenceDiagram
    participant User
    participant PurchasePage as Purchase Page
    participant API as Store API
    participant StoreModule as Store Module
    participant PurchaseContent as Purchase Content
    participant BusinessHours as Business Hours Utils

    User->>PurchasePage: Navigate to purchase (storeId, selectedMenuId)
    PurchasePage->>PurchasePage: Validate storeId & selectedMenuId (isFinite)
    
    alt Validation Fails
        PurchasePage->>User: notFound()
    else Validation Passes
        PurchasePage->>StoreModule: getStoreDetail(storeId)
        StoreModule->>API: GET /store/{storeId}
        API-->>StoreModule: StoreRespDTO (with businessHours, randomBoxes)
        StoreModule-->>PurchasePage: response.data
        
        PurchasePage->>PurchasePage: Search randomBoxes by boxId === selectedMenuId
        
        alt Menu Found
            PurchasePage->>PurchaseContent: Pass store (StoreRespDTO) & menu (StoreRandomBoxRespDTO)
            
            PurchaseContent->>BusinessHours: parseBusinessHours(store.businessHours)
            BusinessHours-->>PurchaseContent: BusinessHoursValue (day → timeString)
            
            PurchaseContent->>PurchaseContent: useMemo: getTodayPickupTimeText(businessHours)
            PurchaseContent->>PurchaseContent: Compute pickupTimeText
            
            PurchaseContent->>PurchaseContent: Render PurchaseOrderCard & PurchaseCompleteModal
            PurchaseContent->>PurchaseContent: Pass pickupTimeText to both components
            
            PurchaseOrderCard->>User: Display boxName, stock, pickupTimeText
            PurchaseCompleteModal->>User: Display boxName, pickup info with pickupTimeText
            
        else Menu Not Found
            PurchasePage->>User: notFound()
        end
    end
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

  • PR #77: 동일한 구매 컴포넌트들(PurchaseContent, PurchaseOrderCard, PurchaseCompleteModal)을 도입했던 PR로, 본 PR에서 이들 컴포넌트의 props 타입 변경, 필드명 변경(name → boxName), 픽업타임 처리 로직 개선, mock 데이터를 API 호출로 전환하는 작업과 직결됨.

  • PR #75: 스토어 상세 흐름을 API DTO(StoreRespDTO/StoreRandomBoxRespDTO)로 업데이트하는 PR로, 동일한 컴포넌트들(StoreMenuCard, StoreDetailContent, mockStoreDetail)을 수정하는 작업이 겹침.

  • PR #8: 공유 TypeScript 설정(@compasser/typescript-config) 추출 및 tsconfig 파일 업데이트와 관련되어 있으며, 본 PR의 baseUrl 제거 및 paths alias 변경과 연관됨.

Poem

🐰 어제의 목 데이터는 안녕,
오늘은 API에서 신선한 정보를 받지!
boxNamestock, 영업시간까지 다듬어서,
장바구니는 더 똑똑하고 유연해졌다네.
TypeScript 설정도 깔끔하게 정리되었으니,
우리의 구매 시스템, 한 단계 성장했으니까! 🎉

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feat/#88/customer-random-box-apis

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@skyblue1232 skyblue1232 merged commit 6f0aa1c into develop Apr 5, 2026
5 of 6 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

chore 자잘한 수정 feat 기능 구현 및 생성 style 스타일 관련 적용

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feat] 사용자 랜덤박스 및 구매 API 연동

1 participant