Skip to content

[Feat/#56] 사장님 스토어 계정 및 스토어 정보 수정 페이지 생성#72

Merged
skyblue1232 merged 3 commits intodevelopfrom
feat/#56/owner-my-page
Mar 29, 2026
Merged

[Feat/#56] 사장님 스토어 계정 및 스토어 정보 수정 페이지 생성#72
skyblue1232 merged 3 commits intodevelopfrom
feat/#56/owner-my-page

Conversation

@skyblue1232
Copy link
Copy Markdown
Contributor

@skyblue1232 skyblue1232 commented Mar 29, 2026

✅ 작업 내용

📝 Description

  • 마이페이지 > 설정 흐름 구현
  • 스토어 정보 수정 페이지 추가 (기존 등록 페이지 UI 재사용)
  • 내 스토어 계정 페이지 UI 구성 (프로필 + 3개 카드)
  • 공통 Header(back-title) 적용 및 라우팅 연결

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

  • 설정 화면 UI 및 이동 연결
  • 스토어 정보 수정 페이지 구현
  • 내 스토어 계정 페이지 구현
  • 공통 Header 적용

🚀 설계 의도 및 개선점

  • 기존 스토어 등록 UI를 그대로 재사용하여 빠른 구현
  • 디자인 시스템(Card, Header, Button) 기반으로 일관된 UI 유지
  • 페이지 단위로 우선 구현 후, 추후 공통 Form 구조로 리팩토링 예정

📸 스크린샷 (선택)

  • 사장님 설정 페이지, 사장님 스토어 계정 페이지, 사장님 스토어 정보 수정 페이지
image image image

📎 기타 참고사항

  • 현재는 UI 중심 구현, API 및 상태 분리는 추후 진행 예정

Fixes #56

Summary by CodeRabbit

릴리스 노트

  • New Features
    • 마이페이지 설정 화면 추가
    • 스토어 계정 관리 기능 (로그아웃, 회원탈퇴)
    • 스토어 정보 수정 페이지 추가 - 영업시간, 상품 박스, 사진 업로드, 태그 관리 기능 포함
    • 계좌 정보 및 사업자 등록번호 조회 기능 추가
    • 확인 모달 컴포넌트 추가로 사용자 액션 검증 기능 개선

@skyblue1232 skyblue1232 self-assigned this Mar 29, 2026
@skyblue1232 skyblue1232 added feat 기능 구현 및 생성 style 스타일 관련 적용 labels Mar 29, 2026
@vercel
Copy link
Copy Markdown

vercel bot commented Mar 29, 2026

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

Project Deployment Actions Updated (UTC)
compasser-customer Ready Ready Preview, Comment Mar 29, 2026 7:45am
compasser-owner Ready Ready Preview, Comment Mar 29, 2026 7:45am

@coderabbitai
Copy link
Copy Markdown

coderabbitai bot commented Mar 29, 2026

📝 Walkthrough

Walkthrough

오너 앱의 "마이페이지" 기능을 추가합니다. 설정 페이지에서 스토어 정보 수정과 스토어 계정 관리로 라우팅하는 네비게이션을 제공하며, 스토어 계정 페이지는 프로필, 계정 정보, 계좌 정보, 사업자 등록번호를 표시합니다. 스토어 정보 편집 페이지는 복잡한 폼 상태와 모달을 통한 업무시간 및 랜덤박스 관리 기능을 포함합니다.

Changes

Cohort / File(s) Summary
마이페이지 설정 라우팅
apps/owner/src/app/(tabs)/mypage/page.tsx
헤더와 함께 스토어 정보 수정 및 스토어 계정으로 네비게이팅하는 메뉴 항목 버튼을 렌더링하는 설정 페이지 구현
스토어 계정 페이지 및 컴포넌트
apps/owner/src/app/(tabs)/mypage/store-account/page.tsx, apps/owner/src/app/(tabs)/mypage/store-account/_components/OwnerProfileSection.tsx, apps/owner/src/app/(tabs)/mypage/store-account/_components/OwnerAccountCard.tsx, apps/owner/src/app/(tabs)/mypage/store-account/_components/OwnerStoreAccountInfoCard.tsx, apps/owner/src/app/(tabs)/mypage/store-account/_components/OwnerBusinessNumberCard.tsx
프로필 섹션, 로그아웃/회원탈퇴 모달, 계좌 정보 카드, 사업자 등록번호 카드를 조합한 스토어 계정 관리 페이지
확인 모달 컴포넌트 및 타입
apps/owner/src/app/(tabs)/mypage/store-account/_components/ConfirmActionModal.tsx, apps/owner/src/app/(tabs)/mypage/store-account/_types/confirmAction.ts
제목, 버튼 텍스트, 콜백 핸들러 및 버튼 순서 옵션을 지원하는 재사용 가능한 확인 모달 컴포넌트와 prop 타입 정의
스토어 정보 편집 페이지
apps/owner/src/app/(tabs)/mypage/store-info/page.tsx
계정 유형, 태그, 랜덤박스, 업무시간, 사진 업로드 상태를 관리하는 복잡한 폼 페이지로, BusinessHoursModal과 RandomBoxModal을 통해 서브 기능 제공

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

Poem

🐰 오너님의 스토어, 이제 관리하기 쉬워요
계정과 정보, 한눈에 담겨
랜덤박스 담기고, 시간표 정렬하고
마이페이지에서 모두 다루니
편한 오너, 행복한 스토어! ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (2 passed)
Check name Status Explanation
Title check ✅ Passed PR 제목은 주요 변경사항인 '사장님 스토어 계정 및 스토어 정보 수정 페이지 생성'을 명확하게 요약하고 있으며, 풀 리퀘스트의 핵심 목표와 완벽히 일치합니다.
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ 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/#56/owner-my-page

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.

Copy link
Copy Markdown

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 5

🧹 Nitpick comments (3)
apps/owner/src/app/(tabs)/mypage/store-account/_components/OwnerBusinessNumberCard.tsx (1)

5-15: 사업자등록번호를 컴포넌트 내부에 하드코딩하지 않는 편이 좋습니다.

Line 14 값이 고정되어 있어 실제 데이터 바인딩/테스트 재사용이 어렵습니다. props로 주입하고, 표시 시 마스킹 유틸을 거치는 구조로 바꾸는 것을 권장합니다.

제안 diff
+interface OwnerBusinessNumberCardProps {
+  businessNumber: string;
+}
+
+const maskBusinessNumber = (value: string) =>
+  value.replace(/^(\d{3})-(\d{2})-(\d{5})$/, "$1-$2-*****");
+
-export const OwnerBusinessNumberCard = () => {
+export const OwnerBusinessNumberCard = ({
+  businessNumber,
+}: OwnerBusinessNumberCardProps) => {
   return (
     <Card variant="gray-200-elevated">
       <div>
         <p className="body1-m text-primary">내 사업자 등록번호</p>
@@
-            <span className="body2-r text-gray-600">123-45-67890</span>
+            <span className="body2-r text-gray-600">
+              {maskBusinessNumber(businessNumber)}
+            </span>
           </div>
         </div>
       </div>
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In
`@apps/owner/src/app/`(tabs)/mypage/store-account/_components/OwnerBusinessNumberCard.tsx
around lines 5 - 15, OwnerBusinessNumberCard currently hardcodes the business
number string; change it to accept a prop (e.g., businessNumber: string) on
OwnerBusinessNumberCard and render that value instead of the hardcoded
"123-45-67890". Before rendering, run the input through the masking utility
(e.g., maskBusinessNumber or a new maskBusinessNumber function) and display the
masked result; handle empty/undefined by showing a sensible fallback (e.g., "-"
or "등록되지 않음"). Update the component signature and any parent usages to pass the
actual businessNumber prop, and ensure the displayed element (the second span)
uses the masked value.
apps/owner/src/app/(tabs)/mypage/store-account/_components/OwnerProfileSection.tsx (1)

18-21: 프로필 식별정보 하드코딩은 분리해 두는 것이 좋습니다.

Line 19~21 하드코딩 값은 화면 재사용/테스트를 어렵게 만듭니다. 상위 페이지에서 사용자 정보를 주입받는 구조로 바꾸는 것을 권장합니다.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In
`@apps/owner/src/app/`(tabs)/mypage/store-account/_components/OwnerProfileSection.tsx
around lines 18 - 21, OwnerProfileSection currently hardcodes profile strings
("홍길동", "루키사장", "owner@example.com") which prevents reuse and testing; change
the OwnerProfileSection component to accept a user prop (or use the existing
auth/user context) and render user.name, user.title (or role), and user.email
instead of the literals, updating the component signature (e.g.,
OwnerProfileSection({ user }: { user: User })) and all call sites to pass the
user object from the parent page so the view is driven by injected data rather
than hardcoded values.
apps/owner/src/app/(tabs)/mypage/store-account/_components/ConfirmActionModal.tsx (1)

17-39: 미래 비동기 작업 추가 시 중복 실행 방지 로직을 고려해 주세요.

현재 handleLogouthandleWithdraw는 동기 함수이며, 모달이 즉시 닫혀 자동으로 중복 클릭이 방지됩니다. 다만 향후 이 함수들이 API 호출 등 비동기 작업으로 확장될 경우 사용자의 연속 클릭으로 동일 액션(예: 로그아웃, 회원탈퇴)이 중복 실행될 수 있으므로, 그 시점에 클릭 중복 방지 가드(예: useRef를 이용한 pending 상태 관리) 추가를 권장합니다.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In
`@apps/owner/src/app/`(tabs)/mypage/store-account/_components/ConfirmActionModal.tsx
around lines 17 - 39, The confirm and cancel handlers (onConfirm/onClose used in
confirmButton and cancelButton) currently assume synchronous behavior; to
prevent duplicate execution when these handlers (e.g., handleLogout or
handleWithdraw) become asynchronous, add a click-guard: introduce a pending
ref/state (useRef or useState) checked at the start of the onConfirm wrapper to
early-return if already pending, set pending=true before awaiting the async
action and reset/keep true appropriately, and disable the confirmButton while
pending so repeat clicks are ignored; update the wrapper around onConfirm (and
similarly for onClose if needed) to use this guard and ensure the modal close
only happens after the async completes or when intended.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@apps/owner/src/app/`(tabs)/mypage/page.tsx:
- Around line 19-24: The Icon used for the settings menu right-side decoration
(Icon with name="NextButton") is currently set as ariaHidden={false} which
exposes a decorative icon to screen readers; change the prop to
ariaHidden={true} or remove the explicit ariaHidden prop so the Icon component's
default (true) is used, ensuring the icon is ignored by assistive technologies
while leaving the surrounding button label intact.

In
`@apps/owner/src/app/`(tabs)/mypage/store-account/_components/OwnerAccountCard.tsx:
- Around line 27-35: The confirm handlers currently only log and close the
modal; replace those no-op actions by invoking callbacks passed from the parent
(e.g., onLogout and onWithdraw props) and then close the modal. Update the
OwnerAccountCard component to accept two props (onLogout: () => void,
onWithdraw: () => void), call onLogout() inside handleLogout and onWithdraw()
inside handleWithdraw instead of console.log, and keep the existing
setIsLogoutModalOpen(false)/setIsWithdrawModalOpen(false) calls; also adjust any
modal-confirm handlers around lines 65-86 to call the same props so the actual
logout/withdraw logic runs in the parent.

In
`@apps/owner/src/app/`(tabs)/mypage/store-account/_components/OwnerStoreAccountInfoCard.tsx:
- Around line 37-45: OwnerStoreAccountInfoCard currently hardcodes and displays
the full bank name and account number (the two <span> elements showing "국민은행"
and "123-456-789012"); change the component to accept props (e.g., bankName and
accountNumber) instead of hardcoded values and render those props, and mask the
accountNumber in the UI (e.g., replace all but the last 4 digits with asterisks
or a standard mask like "***-***-7890") before rendering to avoid exposing
plaintext PII; keep the real accountNumber only in props/state for any backend
calls and ensure the displayed <span> uses the masked value.

In `@apps/owner/src/app/`(tabs)/mypage/store-info/page.tsx:
- Around line 96-103: The random box object is being created with price: 0 which
ignores user input; in the setRandomBoxes update (where you push an object with
id: nextId, name: data.name, quantity: data.quantity, price: 0, limit:
data.limit) replace the hard-coded 0 with the submitted value (e.g., data.price
or Number(data.price)) so the user's entered price is stored — ensure you
reference the same setRandomBoxes callback and nextId/data variables and coerce
the type if needed.
- Line 3: The uploaded file leaks Object URLs—update the photo-handling logic so
any previously created object URL is revoked before creating a new one and when
the component unmounts: in the handleChangePhoto function revoke the existing
URL (e.g., the state variable holding the preview URL) before calling
URL.createObjectURL, and add a useEffect cleanup that calls
URL.revokeObjectURL(currentPreviewUrl) whenever that preview URL changes or on
unmount; use URL.revokeObjectURL and the same state variable name used for the
preview to locate and clean up the URL.

---

Nitpick comments:
In
`@apps/owner/src/app/`(tabs)/mypage/store-account/_components/ConfirmActionModal.tsx:
- Around line 17-39: The confirm and cancel handlers (onConfirm/onClose used in
confirmButton and cancelButton) currently assume synchronous behavior; to
prevent duplicate execution when these handlers (e.g., handleLogout or
handleWithdraw) become asynchronous, add a click-guard: introduce a pending
ref/state (useRef or useState) checked at the start of the onConfirm wrapper to
early-return if already pending, set pending=true before awaiting the async
action and reset/keep true appropriately, and disable the confirmButton while
pending so repeat clicks are ignored; update the wrapper around onConfirm (and
similarly for onClose if needed) to use this guard and ensure the modal close
only happens after the async completes or when intended.

In
`@apps/owner/src/app/`(tabs)/mypage/store-account/_components/OwnerBusinessNumberCard.tsx:
- Around line 5-15: OwnerBusinessNumberCard currently hardcodes the business
number string; change it to accept a prop (e.g., businessNumber: string) on
OwnerBusinessNumberCard and render that value instead of the hardcoded
"123-45-67890". Before rendering, run the input through the masking utility
(e.g., maskBusinessNumber or a new maskBusinessNumber function) and display the
masked result; handle empty/undefined by showing a sensible fallback (e.g., "-"
or "등록되지 않음"). Update the component signature and any parent usages to pass the
actual businessNumber prop, and ensure the displayed element (the second span)
uses the masked value.

In
`@apps/owner/src/app/`(tabs)/mypage/store-account/_components/OwnerProfileSection.tsx:
- Around line 18-21: OwnerProfileSection currently hardcodes profile strings
("홍길동", "루키사장", "owner@example.com") which prevents reuse and testing; change
the OwnerProfileSection component to accept a user prop (or use the existing
auth/user context) and render user.name, user.title (or role), and user.email
instead of the literals, updating the component signature (e.g.,
OwnerProfileSection({ user }: { user: User })) and all call sites to pass the
user object from the parent page so the view is driven by injected data rather
than hardcoded values.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 37c9de4f-524d-40ab-906e-362bcf3de999

📥 Commits

Reviewing files that changed from the base of the PR and between 26fdefb and f172bb5.

📒 Files selected for processing (9)
  • apps/owner/src/app/(tabs)/mypage/page.tsx
  • apps/owner/src/app/(tabs)/mypage/store-account/_components/ConfirmActionModal.tsx
  • apps/owner/src/app/(tabs)/mypage/store-account/_components/OwnerAccountCard.tsx
  • apps/owner/src/app/(tabs)/mypage/store-account/_components/OwnerBusinessNumberCard.tsx
  • apps/owner/src/app/(tabs)/mypage/store-account/_components/OwnerProfileSection.tsx
  • apps/owner/src/app/(tabs)/mypage/store-account/_components/OwnerStoreAccountInfoCard.tsx
  • apps/owner/src/app/(tabs)/mypage/store-account/_types/confirmAction.ts
  • apps/owner/src/app/(tabs)/mypage/store-account/page.tsx
  • apps/owner/src/app/(tabs)/mypage/store-info/page.tsx

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

Labels

feat 기능 구현 및 생성 style 스타일 관련 적용

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feat] 사장님 마이 페이지 생성

1 participant