design: 마이페이지 퍼블리싱 #211
Merged
design: 마이페이지 퍼블리싱 #211
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Closed
2 tasks
## Walkthrough
이번 변경에서는 디자인 시스템의 버튼과 입력 필드에 새로운 옵션이 추가되고, 마이페이지(MyPage) 관련 UI가 대폭 리팩토링되었습니다. 여러 신규 컴포넌트가 도입되었으며, Tailwind 설정 및 패키지 의존성도 일부 추가되었습니다.
## Changes
| 파일/경로 요약 | 변경 내용 요약 |
|---|---|
| design-system/stories/buttons/TertiaryButton.stories.tsx, design-system/ui/buttons/TertiaryButton.tsx | TertiaryButton에 'full' 사이즈 옵션 및 관련 스토리 추가 |
| design-system/ui/textFields/DefaultTextField.tsx | errorPosition prop 추가 및 에러 메시지 위치/스타일 개선 |
| package.json | @types/classnames 의존성 추가 |
| src/app/Layout.tsx | 내부 컨테이너에 border 스타일 추가 |
| src/entities/user/ui/BookmarkList.tsx, src/entities/user/ui/EventInfo.tsx, src/entities/user/ui/ProfileInfo.tsx | BookmarkList, EventInfo, ProfileInfo 신규 컴포넌트 도입 |
| src/features/event/ui/ShareEventModal.tsx | 이미지/타이틀 렌더링을 EventInfo 컴포넌트로 대체 |
| src/pages/event/ui/EventDetailsPage.tsx | JSX 인덴트 및 key 변경, 로직 변화 없음 |
| src/pages/menu/ui/MyPage.tsx | MyPage 대규모 리팩토링: 데이터 fetch/폼 제거, ProfileInfo·BookmarkList·정적 UI로 대체 |
| src/shared/ui/FloatingButton.tsx | 파라미터 구조 단일화 및 불필요한 콤마 제거 (동작 변화 없음) |
| tailwind.config.js | myPageBg 색상 추가 (#F9FAFB) |
| src/pages/event/ui/AllEventsPage.tsx, src/pages/event/ui/CategoryPage.tsx, src/pages/home/ui/MainPage.tsx, src/shared/lib/formatProfileName.ts | 사용자 이름 표시를 위한 formatProfilName 유틸 함수 도입 및 적용 |
## Sequence Diagram(s)
```mermaid
sequenceDiagram
participant User
participant MyPage
participant ProfileInfo
participant BookmarkList
User->>MyPage: 마이페이지 접속
MyPage->>ProfileInfo: 사용자 정보 표시/수정 컴포넌트 렌더링
MyPage->>BookmarkList: 북마크 이벤트 리스트 컴포넌트 렌더링
User->>ProfileInfo: 정보 수정 시도
ProfileInfo->>ProfileInfo: 폼 제출 및 유효성 검사, 업데이트
User->>BookmarkList: 북마크 클릭
BookmarkList->>User: 이벤트 상세 페이지로 이동Possibly related PRs
Suggested labels
Poem
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 9
🧹 Nitpick comments (7)
tailwind.config.js (1)
70-71: 색상 네이밍 충돌 여부 확인
myPageBg컬러가 추가됐습니다. 다른 곳에서 동일한 키로 이미 확장한 적이 없다면 문제 없으나, 전역 테마 충돌 위험이 있으니 확인 바랍니다.src/entities/user/ui/EventInfo.tsx (1)
10-10:cursor-pointer조건부 적용 고려
onClick이 전달되지 않아도 커서가 포인터로 표시됩니다. UX 혼란을 방지하려면onClick존재 여부에 따라 포인터 적용을 분기하세요.design-system/ui/buttons/TertiaryButton.tsx (1)
5-5: 전체 너비 버튼 구현 승인새로운
'full'사이즈 옵션이 적절히 구현되었습니다.w-full클래스로 전체 너비를 제공하고 적절한 패딩과 텍스트 크기를 설정했습니다.패딩 일관성 고려사항
full사이즈의py-1패딩이 다른 사이즈들과 비교해서 적절한지 확인해보세요.medium사이즈도py-1을 사용하는데, 전체 너비 버튼에는 조금 더 큰 패딩이 적합할 수 있습니다.Also applies to: 19-19
src/entities/user/ui/BookmarkList.tsx (1)
7-13: 데이터 처리 로직 개선 제안현재 구현은 잘 작동하지만, 다음과 같은 개선사항을 고려해보세요:
- 로딩 및 에러 상태 처리:
useBookmarks훅에서isLoading,error상태를 구조 분해하여 사용자 경험을 개선할 수 있습니다.- 메모이제이션: 정렬 로직을
useMemo로 메모이제이션하여 성능을 최적화할 수 있습니다.- const { data } = useBookmarks(); + const { data, isLoading, error } = useBookmarks(); const navigate = useNavigate(); - const sortedData = data ? [...data].sort((a, b) => a.id - b.id) : []; - const visibleEvents = sortedData.slice(0, 2); + const visibleEvents = useMemo(() => { + if (!data) return []; + return [...data].sort((a, b) => a.id - b.id).slice(0, 2); + }, [data]);src/pages/menu/ui/MyPage.tsx (3)
54-63: 이메일 링크 구현이 잘 되었습니다만, 개선사항이 있습니다.이메일 링크에 미리 설정된 제목과 내용이 포함되어 있어 사용자 경험이 좋습니다. 다만 몇 가지 개선사항을 제안드립니다:
- 이메일 주소가 하드코딩되어 있습니다
- 긴 이메일 내용으로 인해 URL이 매우 길어질 수 있습니다
+// 상수로 분리 +const CONTACT_EMAIL = 'gotogether@gmail.com'; +const EMAIL_SUBJECT = '같이가요 서비스 문의'; +const EMAIL_BODY = `안녕하세요, 같이가요 서비스 개발팀입니다. 서비스 이용 중 발생한 오류나 불편 사항을 공유해주시면, 더 나은 서비스 제공에 큰 도움이 됩니다. 정확한 확인을 위해 [화면 캡처, 페이지 위치, 에러 내용] 등을 함께 작성해주시면 감사하겠습니다.`; <a - href={`mailto:gotogether@gmail.com?subject=${encodeURIComponent( - '같이가요 서비스 문의' - )}&body=${encodeURIComponent(`안녕하세요, 같이가요 서비스 개발팀입니다. - -서비스 이용 중 발생한 오류나 불편 사항을 공유해주시면, 더 나은 서비스 제공에 큰 도움이 됩니다. -정확한 확인을 위해 [화면 캡처, 페이지 위치, 에러 내용] 등을 함께 작성해주시면 감사하겠습니다.`)}`} + href={`mailto:${CONTACT_EMAIL}?subject=${encodeURIComponent(EMAIL_SUBJECT)}&body=${encodeURIComponent(EMAIL_BODY)}`} className="text-sm md:text-medium font-semibold underline text-blue-600" > - gotogether@gmail.com + {CONTACT_EMAIL} </a>
26-32: 중복된 onClick 핸들러를 제거하세요.티켓 정보 섹션에서 div와 IconButton 모두에 동일한 onClick 핸들러가 설정되어 있습니다. 이는 중복 호출을 발생시킬 수 있습니다.
<div onClick={() => navigate('/menu/myTicket')} className="flex items-center justify-between cursor-pointer"> <span className="text-medium md:text-lg font-semibold">구매한 티켓 정보</span> <IconButton iconPath={<img src={arrow} alt="화살표" className="w-2" />} - onClick={() => navigate('/menu/myTicket')} /> </div>
69-72: 로그아웃 섹션도 동일한 중복 문제가 있습니다.티켓 정보 섹션과 마찬가지로 중복된 onClick 핸들러가 있습니다.
<div onClick={handleLogout} className="flex items-center justify-between cursor-pointer"> <span className="text-medium md:text-lg text-red-500 font-semibold">로그아웃</span> - <IconButton iconPath={<img src={logout} alt="로그아웃" className="w-4" />} onClick={handleLogout} /> + <IconButton iconPath={<img src={logout} alt="로그아웃" className="w-4" />} /> </div>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (4)
public/assets/bottomBar/Arrow.svgis excluded by!**/*.svgpublic/assets/bottomBar/Bookmark.svgis excluded by!**/*.svgpublic/assets/bottomBar/Logout.svgis excluded by!**/*.svgyarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (13)
design-system/stories/buttons/TertiaryButton.stories.tsx(2 hunks)design-system/ui/buttons/TertiaryButton.tsx(2 hunks)design-system/ui/textFields/DefaultTextField.tsx(3 hunks)package.json(3 hunks)src/app/Layout.tsx(1 hunks)src/entities/user/ui/BookmarkList.tsx(1 hunks)src/entities/user/ui/EventInfo.tsx(1 hunks)src/entities/user/ui/ProfileInfo.tsx(1 hunks)src/features/event/ui/ShareEventModal.tsx(2 hunks)src/pages/event/ui/EventDetailsPage.tsx(1 hunks)src/pages/menu/ui/MyPage.tsx(1 hunks)src/shared/ui/FloatingButton.tsx(2 hunks)tailwind.config.js(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
src/entities/user/ui/BookmarkList.tsx (2)
src/features/bookmark/hook/useBookmarkHook.ts (1)
useBookmarks(6-11)src/shared/lib/date.ts (1)
formatDate(1-9)
🔇 Additional comments (9)
src/shared/ui/FloatingButton.tsx (1)
19-20:right-100Tailwind 유틸리티가 실제로 동작하는지 확인 필요Tailwind 기본 spacing scale에는
100값이 없으며,extend.spacing에도100이 정의돼 있지 않습니다.
정의가 없다면right-100클래스는 빌드 시 CSS가 생성되지 않아 절대 위치가 적용되지 않습니다.
right-24(6rem) 같이 존재하는 spacing 값으로 교체하거나, 임의 픽셀 값을 사용할 경우right-[100px]형태로 지정하세요.src/app/Layout.tsx (1)
4-4: UI 개선 반영 확인테두리(
border border-gray-200) 추가로 콘텐츠 영역 구분이 명확해졌습니다. 의도한 디자인 변화라면 문제 없습니다.package.json (1)
23-23: 새로운 종속성 추가 승인추가된 종속성들은 UI 개선과 컴포넌트 기능 향상에 적합한 선택입니다:
classnames: 조건부 CSS 클래스 관리에 널리 사용되는 라이브러리react-virtuoso: 북마크 목록 같은 큰 리스트의 효율적인 렌더링 지원@types/classnames: TypeScript 타입 안전성 제공버전들도 안정적이고 최신 상태입니다.
Also applies to: 38-38, 58-58
src/features/event/ui/ShareEventModal.tsx (1)
5-5: 컴포넌트 재사용성 향상
EventInfo컴포넌트를 도입하여 이벤트 정보 표시를 일관성 있게 개선했습니다. 이는 UI 컴포넌트의 재사용성을 높이고 전체 애플리케이션의 일관성을 보장하는 좋은 리팩토링입니다.Also applies to: 75-75
design-system/stories/buttons/TertiaryButton.stories.tsx (1)
34-34: 디자인 시스템 확장 승인새로운
"full"사이즈 옵션과 해당 스토리가 적절히 추가되었습니다. 전체 너비 버튼 옵션은 마이페이지 같은 폼 인터페이스에서 유용할 것입니다.Also applies to: 92-99
src/entities/user/ui/BookmarkList.tsx (2)
21-33: 접근성과 사용자 경험 향상렌더링 로직이 잘 구현되었습니다. 빈 상태 메시지도 적절하고, 접근성을 고려한 alt 텍스트도 훌륭합니다.
34-39: 네비게이션 링크 구현 우수"전체 관심 이벤트 보기" 링크가 적절히 구현되었습니다. 스타일링과 인터랙션이 잘 처리되어 있습니다.
design-system/ui/textFields/DefaultTextField.tsx (2)
17-17: 타입 정의가 완벽합니다.
errorPosition속성에 대한 타입 정의가 명확하고 적절합니다. 기본값 설정도 잘 되어 있습니다.
71-81: 에러 메시지 반복 렌더링 문제가 있습니다.
errorPosition이 'right'일 때 모바일에서는 두 번의 에러 메시지가 렌더링될 수 있습니다 (78번째 줄과 86번째 줄).{errorMessage && errorPosition === 'right' && ( <> {/* 데스크탑일 때만 오른쪽에 보이기 */} <p className="hidden md:block absolute left-full top-1/2 -translate-y-1/2 ml-2 text-xs text-red-500 whitespace-nowrap"> {errorMessage} </p> - {/* 모바일에서는 아래에 표시 */} - <p className="md:hidden mt-1 text-xs text-red-500">{errorMessage}</p> </> )}그리고 86번째 줄도 수정해주세요:
- {errorMessage && errorPosition !== 'right' && <p className="mt-1 text-xs text-red-500">{errorMessage}</p>} + {errorMessage && errorPosition !== 'right' && ( + <p className="mt-1 text-xs text-red-500">{errorMessage}</p> + )} + {errorMessage && errorPosition === 'right' && ( + <p className="md:hidden mt-1 text-xs text-red-500">{errorMessage}</p> + )}Likely an incorrect or invalid review comment.
Comment on lines
+40
to
47
| <img | ||
| src={arrow} | ||
| alt="화살표" | ||
| className={`w-2 transition-transform duration-300 ${open ? 'rotate-90' : ''}`} | ||
| /> | ||
| } | ||
| onClick={handleToggle} | ||
| /> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
접근성 개선을 위해 키보드 네비게이션을 지원하세요.
현재 토글 기능이 클릭에만 반응합니다. 키보드 사용자를 위한 접근성을 개선해주세요.
- <div onClick={handleToggle} className="flex items-center justify-between cursor-pointer">
+ <div
+ onClick={handleToggle}
+ onKeyDown={(e) => {
+ if (e.key === 'Enter' || e.key === ' ') {
+ e.preventDefault();
+ handleToggle();
+ }
+ }}
+ tabIndex={0}
+ role="button"
+ aria-expanded={open}
+ aria-controls="inquiry-content"
+ className="flex items-center justify-between cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-500 focus:rounded"
+ >그리고 콘텐츠 영역에도 적절한 id를 추가해주세요:
- {open && (
- <div className="mt-3">
+ {open && (
+ <div id="inquiry-content" className="mt-3">Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In src/pages/menu/ui/MyPage.tsx around lines 40 to 47, the toggle element only
responds to mouse clicks, lacking keyboard accessibility. To fix this, add
keyboard event handlers such as onKeyDown to support toggling via keyboard keys
like Enter or Space. Also, ensure the toggle element is focusable by adding
tabIndex if necessary. Additionally, assign a proper id attribute to the content
area associated with the toggle for better accessibility and ARIA support.
Comment on lines
+61
to
+73
| if (isLoading) { | ||
| return <div>로딩 중...</div>; | ||
| } | ||
| if (error) { | ||
| return <div>정보를 불러오는데 실패했습니다. 다시 시도해주세요.</div>; | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
로딩 및 에러 상태 UI가 너무 단순합니다.
현재 로딩과 에러 상태가 단순한 텍스트로만 표시되어 있어 사용자 경험이 좋지 않습니다. 디자인 시스템의 컴포넌트를 활용하여 개선해주세요.
if (isLoading) {
- return <div>로딩 중...</div>;
+ return (
+ <div className="relative w-full h-52 md:h-56">
+ <div className="absolute inset-0 bg-main rounded-[10px]" />
+ <div className="relative z-10 bg-dashboardBg rounded-[10px] p-5 ml-2 h-full flex items-center justify-center">
+ <div className="text-center">
+ <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-main mx-auto mb-2"></div>
+ <p className="text-sm text-gray-600">프로필 정보를 불러오는 중...</p>
+ </div>
+ </div>
+ </div>
+ );
}
if (error) {
- return <div>정보를 불러오는데 실패했습니다. 다시 시도해주세요.</div>;
+ return (
+ <div className="relative w-full h-52 md:h-56">
+ <div className="absolute inset-0 bg-main rounded-[10px]" />
+ <div className="relative z-10 bg-dashboardBg rounded-[10px] p-5 ml-2 h-full flex items-center justify-center">
+ <div className="text-center">
+ <p className="text-sm text-red-500 mb-2">프로필 정보를 불러오는데 실패했습니다.</p>
+ <TertiaryButton
+ label="다시 시도"
+ type="button"
+ color="pink"
+ size="small"
+ onClick={() => refetch()}
+ />
+ </div>
+ </div>
+ </div>
+ );
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| if (isLoading) { | |
| return <div>로딩 중...</div>; | |
| } | |
| if (error) { | |
| return <div>정보를 불러오는데 실패했습니다. 다시 시도해주세요.</div>; | |
| } | |
| if (isLoading) { | |
| return ( | |
| <div className="relative w-full h-52 md:h-56"> | |
| <div className="absolute inset-0 bg-main rounded-[10px]" /> | |
| <div className="relative z-10 bg-dashboardBg rounded-[10px] p-5 ml-2 h-full flex items-center justify-center"> | |
| <div className="text-center"> | |
| <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-main mx-auto mb-2"></div> | |
| <p className="text-sm text-gray-600">프로필 정보를 불러오는 중...</p> | |
| </div> | |
| </div> | |
| </div> | |
| ); | |
| } | |
| if (error) { | |
| return ( | |
| <div className="relative w-full h-52 md:h-56"> | |
| <div className="absolute inset-0 bg-main rounded-[10px]" /> | |
| <div className="relative z-10 bg-dashboardBg rounded-[10px] p-5 ml-2 h-full flex items-center justify-center"> | |
| <div className="text-center"> | |
| <p className="text-sm text-red-500 mb-2">프로필 정보를 불러오는데 실패했습니다.</p> | |
| <TertiaryButton | |
| label="다시 시도" | |
| type="button" | |
| color="pink" | |
| size="small" | |
| onClick={() => refetch()} | |
| /> | |
| </div> | |
| </div> | |
| </div> | |
| ); | |
| } |
🤖 Prompt for AI Agents
In src/entities/user/ui/ProfileInfo.tsx around lines 61 to 66, the loading and
error UI states are currently rendered as simple text, which results in poor
user experience. Replace these plain div elements with appropriate components
from the design system, such as a spinner or loader component for the loading
state and a styled alert or error message component for the error state, to
enhance visual feedback and consistency.
Comment on lines
+74
to
+78
| <p className="hidden md:block absolute left-full top-1/2 -translate-y-1/2 ml-2 text-xs text-red-500 whitespace-nowrap"> | ||
| {errorMessage} | ||
| </p> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
오른쪽 에러 메시지 위치 조정이 필요합니다.
현재 left-full과 ml-2 조합은 에러 메시지가 입력 필드를 벗어나 화면 밖으로 나갈 수 있습니다.
- <p className="hidden md:block absolute left-full top-1/2 -translate-y-1/2 ml-2 text-xs text-red-500 whitespace-nowrap">
+ <p className="hidden md:block absolute left-full top-1/2 -translate-y-1/2 ml-2 text-xs text-red-500 whitespace-nowrap z-10 bg-white px-1 rounded shadow-sm">
{errorMessage}
</p>또한 컨테이너에 오버플로우 처리를 추가해주세요:
- <div className="relative w-full">
+ <div className="relative w-full overflow-visible">📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| <p className="hidden md:block absolute left-full top-1/2 -translate-y-1/2 ml-2 text-xs text-red-500 whitespace-nowrap"> | |
| {errorMessage} | |
| </p> | |
| <div className="relative w-full overflow-visible"> | |
| {/* ...your input markup... */} | |
| {errorMessage && ( | |
| <p className="hidden md:block absolute left-full top-1/2 -translate-y-1/2 ml-2 text-xs text-red-500 whitespace-nowrap z-10 bg-white px-1 rounded shadow-sm"> | |
| {errorMessage} | |
| </p> | |
| )} | |
| </div> |
🤖 Prompt for AI Agents
In design-system/ui/textFields/DefaultTextField.tsx around lines 74 to 76, the
error message positioning uses 'left-full' and 'ml-2', which can cause the
message to overflow outside the viewport. Adjust the positioning to keep the
error message visible within the container, for example by using relative
positioning or adjusting left/right values. Additionally, add overflow handling
(like 'overflow-auto' or 'overflow-hidden') to the container element to prevent
content from spilling out visually.
Yejiin21
force-pushed
the
design/#205/publishing-mypage
branch
from
99ef6ba to
25c41e1
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (1)
src/pages/menu/ui/MyPage.tsx (1)
36-48: 키보드 접근성 개선이 여전히 필요합니다.과거 리뷰에서 지적된 키보드 접근성 문제가 여전히 존재합니다. 키보드 사용자를 위한 접근성을 개선해주세요.
- <div onClick={handleToggle} className="flex items-center justify-between cursor-pointer"> + <div + onClick={handleToggle} + onKeyDown={(e) => { + if (e.key === 'Enter' || e.key === ' ') { + e.preventDefault(); + handleToggle(); + } + }} + tabIndex={0} + role="button" + aria-expanded={open} + aria-controls="inquiry-content" + className="flex items-center justify-between cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-500 focus:rounded" + >그리고 콘텐츠 영역에도 적절한 id를 추가해주세요:
- {open && ( - <div className="mt-3"> + {open && ( + <div id="inquiry-content" className="mt-3">
🧹 Nitpick comments (3)
src/pages/menu/ui/MyPage.tsx (3)
53-63: 이메일 본문을 상수로 분리하여 가독성을 개선하세요.인라인으로 작성된 긴 이메일 본문이 코드 가독성을 해칩니다.
컴포넌트 상단에 상수를 정의하여 개선할 수 있습니다:
+const EMAIL_TEMPLATE = { + subject: '같이가요 서비스 문의', + body: `안녕하세요, 같이가요 서비스 개발팀입니다. + +서비스 이용 중 발생한 오류나 불편 사항을 공유해주시면, 더 나은 서비스 제공에 큰 도움이 됩니다. +정확한 확인을 위해 [화면 캡처, 페이지 위치, 에러 내용] 등을 함께 작성해주시면 감사하겠습니다.` +}; + const MyPage = () => { // ... - <a - href={`mailto:gotogether@gmail.com?subject=${encodeURIComponent( - '같이가요 서비스 문의' - )}&body=${encodeURIComponent(`안녕하세요, 같이가요 서비스 개발팀입니다. - -서비스 이용 중 발생한 오류나 불편 사항을 공유해주시면, 더 나은 서비스 제공에 큰 도움이 됩니다. -정확한 확인을 위해 [화면 캡처, 페이지 위치, 에러 내용] 등을 함께 작성해주시면 감사하겠습니다.`)}`} + <a + href={`mailto:gotogether@gmail.com?subject=${encodeURIComponent( + EMAIL_TEMPLATE.subject + )}&body=${encodeURIComponent(EMAIL_TEMPLATE.body)}`}
26-31: 중복된 이벤트 핸들러를 정리하세요.div와 IconButton 모두에 동일한 onClick 핸들러가 있어 중복 호출될 수 있습니다.
IconButton에서 onClick을 제거하거나 div에서 onClick을 제거하세요:
- <div onClick={() => navigate('/menu/myTicket')} className="flex items-center justify-between cursor-pointer"> + <div className="flex items-center justify-between cursor-pointer"> <span className="text-medium md:text-lg font-semibold">구매한 티켓 정보</span> <IconButton iconPath={<img src={arrow} alt="화살표" className="w-2" />} onClick={() => navigate('/menu/myTicket')} />또는 전체 div에만 핸들러를 유지하고 IconButton에서 제거:
<div onClick={() => navigate('/menu/myTicket')} className="flex items-center justify-between cursor-pointer"> <span className="text-medium md:text-lg font-semibold">구매한 티켓 정보</span> <IconButton iconPath={<img src={arrow} alt="화살표" className="w-2" />} - onClick={() => navigate('/menu/myTicket')} />
69-72: 로그아웃 섹션에서도 중복된 이벤트 핸들러를 정리하세요.여기서도 동일한 중복 이벤트 핸들러 문제가 있습니다.
- <div onClick={handleLogout} className="flex items-center justify-between cursor-pointer"> + <div className="flex items-center justify-between cursor-pointer"> <span className="text-medium md:text-lg text-red-500 font-semibold">로그아웃</span> <IconButton iconPath={<img src={logout} alt="로그아웃" className="w-4" />} onClick={handleLogout} />
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (4)
public/assets/bottomBar/Arrow.svgis excluded by!**/*.svgpublic/assets/bottomBar/Bookmark.svgis excluded by!**/*.svgpublic/assets/bottomBar/Logout.svgis excluded by!**/*.svgyarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (17)
design-system/stories/buttons/TertiaryButton.stories.tsx(2 hunks)design-system/ui/buttons/TertiaryButton.tsx(2 hunks)design-system/ui/textFields/DefaultTextField.tsx(3 hunks)package.json(1 hunks)src/app/Layout.tsx(1 hunks)src/entities/user/ui/BookmarkList.tsx(1 hunks)src/entities/user/ui/EventInfo.tsx(1 hunks)src/entities/user/ui/ProfileInfo.tsx(1 hunks)src/features/event/ui/ShareEventModal.tsx(2 hunks)src/pages/event/ui/AllEventsPage.tsx(2 hunks)src/pages/event/ui/CategoryPage.tsx(2 hunks)src/pages/event/ui/EventDetailsPage.tsx(1 hunks)src/pages/home/ui/MainPage.tsx(4 hunks)src/pages/menu/ui/MyPage.tsx(1 hunks)src/shared/lib/formatProfileName.ts(1 hunks)src/shared/ui/FloatingButton.tsx(2 hunks)tailwind.config.js(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (16)
- package.json
- src/app/Layout.tsx
- src/shared/lib/formatProfileName.ts
- src/shared/ui/FloatingButton.tsx
- tailwind.config.js
- src/pages/event/ui/CategoryPage.tsx
- src/pages/event/ui/EventDetailsPage.tsx
- src/pages/event/ui/AllEventsPage.tsx
- src/pages/home/ui/MainPage.tsx
- design-system/stories/buttons/TertiaryButton.stories.tsx
- src/entities/user/ui/BookmarkList.tsx
- design-system/ui/buttons/TertiaryButton.tsx
- src/entities/user/ui/EventInfo.tsx
- src/features/event/ui/ShareEventModal.tsx
- src/entities/user/ui/ProfileInfo.tsx
- design-system/ui/textFields/DefaultTextField.tsx
🔇 Additional comments (3)
src/pages/menu/ui/MyPage.tsx (3)
1-9: 컴포넌트 import 구조가 개선되었습니다.리팩토링으로 인해 import 구조가 깔끔해졌고, 필요한 의존성들이 명확하게 분리되었습니다.
12-16: 상태 관리 로직이 적절합니다.toggle 상태와 네비게이션 핸들러가 깔끔하게 구현되었습니다.
19-23: 컴포넌트 분리를 통한 깔끔한 구조.ProfileInfo와 BookmarkList 컴포넌트로 분리하여 코드 가독성과 유지보수성이 크게 향상되었습니다.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
마이페이지
마이페이지 - 문의하기
메일 클릭시 자동으로 이메일 링크로 연결
Summary by CodeRabbit
New Features
UI/스타일
버그 수정 및 개선
기타