fix: 마이페이지 동작 버그 수정 및 내정보 편집 UX 개선

[jjjsun]

💡 개요

마이페이지 네비게이션/내정보 편집 flow의 동작 이슈들 수정하고 UX 안정화 진행

🔢 관련 이슈 링크

• Closes [fix] 마이페이지 기능오류 수정 #42

💻 작업내용

• 마이페이지 집입시 뒤로가기 동작하지 않아서 기능 수정
• 마이페이지 상단 잇츠파인 로고텍스트 클릭시 메인으로 이동하도록 수정
• 전화번호 입력값을 phoneNumber 유틸로 숫자만 입력되도록 처리 + 저장 시 유효성 검증 추가
• 내정보 수정시에 draft/original로 상태 분리해서 취소버튼 누르면 원래 값으로 롤백되도록 개선
• 프로필 이미지 변경을 file기반 프리뷰 방식으로 전환하여 저장 취소 동작 안정화진행 및 objectURL 정리 로직 적용
• 마이페이지내 UI 스타일 정리/통일 및 정렬 작업 진행

📌 변경사항PR

• FEAT: 새로운 기능 추가
• FIX: 버그/오류 수정
• CHORE: 코드/내부 파일/설정 수정
• DOCS: 문서 수정(README 등)
• REFACTOR: 코드 리팩토링 (기능 변경 없음)
• TEST: 테스트 코드 추가/수정
• STYLE: 스타일 변경(포맷, 세미콜론 등)

🤔 추가 논의하고 싶은 내용

이번 PR에서는 스타일 통일한 진행한거고, 디자인 나오면 디자인 다시 수정해야할것같습니다!
(결제수단 탭에서는 스크롤이 적용되지않기 때문에 살짝오른쪽으로 이동하는듯한 모션이 나타납니다. 이부분은 스크롤 적용시 다른 탭과 동일하게 적용되니 참고하시면 좋을것같습니다)

✅ 체크리스트

• 브랜치는 잘 맞게 올렸는지
• 관련 이슈를 맞게 연결했는지
• 로컬에서 정상 동작을 확있했는지
• 충돌이 없다(또는 브랜치에서 충돌 해결 후 PR 업데이트 완료)

Summary by CodeRabbit

릴리스 노트

• New Features

  • 마이페이지 사용자 정보 편집 시 초안 기반 관리 및 이미지 미리보기 기능 추가
  • 전화번호 유효성 검사 기능 추가

• Style

  • 마이페이지 전역 UI/UX 개선: 헤더 타이포그래피, 간격, 버튼 스타일링 통일
  • 예약 현황, 결제 관리, 가게 관리, 알림 설정 페이지 레이아웃 및 시각적 계층 구조 개선
  • 상태 배지, 텍스트 크기, 색상 스키마 일관성 향상

[coderabbitai]

📝 Walkthrough

워크스루

마이페이지 전반에 걸쳐 UI 스타일링 통일과 기능 개선을 수행했습니다. 특히 개인정보 수정 페이지에 초안 상태 패턴과 이미지 미리보기 기능을 추가했고, 각 페이지의 타이포그래피, 간격, 버튼 크기를 조정했습니다.

변경사항

Cohort / File(s)	Summary
레이아웃 및 라우팅 src/layouts/myPageLayout.tsx, src/pages/myPage/myPage.tsx	헤더 제목을 Link로 감싸 홈(/)으로 이동 가능하게 변경. Navigate의 replace 속성 추가로 "info" 경로 이동 시 히스토리 치환.
개인정보 수정 페이지 src/pages/myPage/myInfoPage.tsx	draft 상태 패턴 도입으로 편집 중 변경사항을 임시 저장. 이미지 미리보기(shownUrl)와 phoneNumber 유틸 기반 유효성 검사 추가. 저장 버튼 활성화 시에만 원본 데이터 업데이트.
결제수단 페이지 src/pages/myPage/paymentPage.tsx	PaymentMethod.type을 "간편결제"로 변경. UI 패딩/타이포그래피 업데이트. PaymentAddModal 조건부 렌더링.
예약 현황 페이지 src/pages/myPage/reservationPage.tsx	타이포그래피 및 간격 정렬(h2: text-lg → text-xl). 상태 배지에 "방문 완료" 케이스 추가. filteredReservations 사용.
설정 페이지 src/pages/myPage/settingPage.tsx	페이지 구조 재구성: 비밀번호/알림/계정탈퇴 블록을 더 견고한 레이아웃으로 배열. ToggleButton으로 알림 옵션 통합. 알림 수신 방법을 2열 그리드(이메일/SMS)로 변경.
가게 관리 페이지 src/pages/myPage/storePage.tsx	광범위한 타이포그래피 업데이트(h2: text-lg → text-xl 등). 버튼/배지/배너 스타일링 조정.
구독 페이지 src/pages/myPage/subscriptionPage.tsx	헤더 제목과 부제목 스타일 미세 조정(text-lg → text-xl).

코드 리뷰 포인트

🎯 myInfoPage.tsx - 세심한 검토 권장

좋은 점:

• Draft 상태 패턴이 변경사항을 안전하게 분리하고 Cancel 기능을 명확하게 구현했습니다.
• phoneNumber 유틸을 활용한 유효성 검사가 좋은데, 에러 상태를 UI에 표시하는지 확인이 필요합니다.

체크 항목:

1. 이미지 URL 메모리 누수 - URL.revokeObjectURL()이 정말 모든 cleanup 시나리오에서 호출되나요?

   // 현재 예상 패턴 (확인 필요)
   useEffect(() => {
     return () => {
       if (draftImageFile && shownUrl) {
         URL.revokeObjectURL(shownUrl);
       }
     };
   }, []);

2. Phone 유효성 검사 - isValidPhone 호출 시점이 Save 버튼 클릭 시에만 발생하는데, 리얼타임 피드백이 없어도 괜찮을까요? 사용자 경험상 입력 후 바로 에러 메시지가 표시되면 더 좋을 것 같습니다.

3. Draft 상태 초기화 - handleEditStart에서 draft를 원본에서 복사하는데, 중첩된 객체는 깊은 복사가 필요할 수도 있습니다.

---

paymentPage.tsx - 데이터 모델 변경 확인

체크 항목:

• PaymentMethod.type: "간편결제"로 변경했는데, 백엔드 API와의 데이터 형식 호환성을 확인했나요? 현재는 목 데이터로 보이지만, 나중에 API 연동 시 실제 응답 포맷과 일치하는지 확인이 필수입니다.
• 하드코딩된 "간편결제" 문자열을 상수로 분리하면 유지보수가 더 편할 것 같습니다.

---

settingPage.tsx - 구조 재구성

개선 사항:

• 알림 설정이 더 명확하게 구성되어 좋습니다.
• ToggleButton 컴포넌트가 재사용 가능한지 확인 - 다른 페이지에서도 필요한지 체크하면 좋을 것 같습니다.

---

전반적 접근성 검토 사항

1. 타이포그래피 스케일 - 여러 페이지에서 text-lg → text-xl로 통일했는데, 모바일 반응형에서도 적절한 크기인가요?
2. 색상 대비 - text-gray-600, text-gray-500 변경 시 배경색과의 명도 대비가 WCAG 기준을 만족하나요?
3. 버튼 클릭 영역 - 버튼 패딩을 증가시켰는데, 모바일에서 최소 44px×44px는 보장되나요?

---

🎯 3 (Moderate) | ⏱️ ~25 분

제안 레이블

chore

제안 리뷰어

• yooseolhee
• dew102938

축하 시

마이페이지가 단장했네요! 🎨

깔끔한 스타일에 초안 상태까지,

사용자 경험을 한층 업그레이드! ✨

(API 연동은 다음 편에서 🚀)

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 20.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	PR 제목이 마이페이지의 주요 변경사항인 버그 수정과 내정보 편집 UX 개선을 명확하게 요약하고 있습니다.
Description check	✅ Passed	PR 설명이 리포지토리의 템플릿 구조를 따르고 있으며, 주요 작업내용, 관련 이슈, 변경사항 체크리스트, 추가 논의사항이 모두 포함되어 있습니다.
Linked Issues check	✅ Passed	PR 변경사항들이 #42 이슈의 주요 목표인 마이페이지 UI 완성 및 라우팅 연결 안정화를 모두 충족하고 있습니다.
Out of Scope Changes check	✅ Passed	모든 변경사항이 마이페이지 관련 버그 수정과 UX 개선이라는 명확한 범위 내에 있으며, 범위를 벗어난 변경은 없습니다.

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

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/myPagePath

---

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

[yooseolhee]

코드 확인했습니다! 처음 마이페이지 개발할 때 놓친 디테일들이 엄청 많았네요.. 깔끔하게 다듬어주셔서 감사합니다 수고하셨습니다!