Style#235 responsive my page#247
Conversation
|
Caution Review failedThe pull request is closed. Walkthrough이번 변경사항은 주로 마이페이지 및 관련 컴포넌트의 반응형(Responsive) 스타일링을 강화하는 데 집중되어 있습니다. 다양한 컴포넌트와 레이아웃에서 모바일 및 데스크톱 환경에 맞는 CSS 유틸리티 클래스가 추가·수정되었으며, 일부 컴포넌트에서는 flex 레이아웃, 패딩, 폰트 크기, 배치 방식 등이 화면 크기에 따라 다르게 적용되도록 변경되었습니다. 추가적으로, 일부 버튼의 노출 조건이 변경되고, UI 메시지 및 알림 처리 방식이 개선되었습니다. 전체적으로 로직 변경 없이 스타일링과 접근성 개선에 초점을 맞춘 PR입니다. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant ResumeDetailField
participant NotiflixConfirm
participant Notify
User->>ResumeDetailField: Delete 버튼 클릭
ResumeDetailField->>NotiflixConfirm: showNotiflixConfirm 호출
NotiflixConfirm-->>ResumeDetailField: 사용자 응답 (확인/취소)
alt 확인 선택
ResumeDetailField->>ResumeDetailField: handleDeleteResume (mutateAsync)
alt 성공
ResumeDetailField->>Notify: Notify.success 호출
else 실패
ResumeDetailField->>Notify: Notify.failure 호출
end
else 취소 선택
ResumeDetailField-->>User: 아무 동작 없음
end
Assessment against linked issues
Possibly related PRs
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (15)
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (16)
src/app/(with-nav)/(with-header)/layout.tsx(1 hunks)src/app/(with-nav)/(with-header)/my-page/page.tsx(1 hunks)src/features/bookmark-selected/bookmark-tab.tsx(1 hunks)src/features/character/character-detail-modal.tsx(2 hunks)src/features/character/my-page-character-card.tsx(2 hunks)src/features/my-page/my-info-content.tsx(1 hunks)src/features/my-page/my-info.tsx(2 hunks)src/features/my-page/tab-buttons.tsx(1 hunks)src/features/my-page/tabs-field.tsx(2 hunks)src/features/my-page/viewing-field.tsx(1 hunks)src/features/resume-list/resume-detail-field.tsx(4 hunks)src/features/resume-list/resume-item.tsx(2 hunks)src/features/resume-list/resume-list.tsx(1 hunks)src/features/user-meta-data/user-meta-data-form.tsx(1 hunks)src/features/user-meta-data/user-meta-data-modal.tsx(1 hunks)tailwind.config.ts(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (4)
src/features/character/my-page-character-card.tsx (1)
src/utils/auth-option.ts (1)
session(65-73)
src/app/(with-nav)/(with-header)/my-page/page.tsx (1)
src/utils/auth-option.ts (2)
session(65-73)authOptions(16-83)
src/features/bookmark-selected/bookmark-tab.tsx (1)
src/components/icons/star.tsx (1)
Star(3-14)
src/features/resume-list/resume-detail-field.tsx (5)
src/constants/message-constants.ts (1)
RESUME_MESSAGE(57-81)src/features/resume-list/hooks/use-resume-query.ts (1)
useResumeQuery(9-15)src/features/resume/hooks/use-delete-resume-mutation.ts (1)
useDeleteResumeMutation(13-44)src/utils/show-notiflix-confirm.ts (1)
showNotiflixConfirm(24-120)src/utils/get-error-message.ts (1)
getErrorMessage(1-2)
🪛 Biome (1.9.4)
src/features/character/my-page-character-card.tsx
[error] 68-69: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: build
🔇 Additional comments (37)
src/features/resume-list/resume-list.tsx (2)
31-31: 오버플로우 스크롤 처리 개선오버플로우 속성을
overflow-scroll에서overflow-y-auto로 변경하여 필요한 경우에만 스크롤바가 표시되도록 개선했습니다. 또한 flex 레이아웃을 제거하여 반응형 디자인에 더 적합한 구조로 변경되었습니다.
32-41: Resume 항목 사이 구분선 처리 개선각 항목 사이에 구분선을 표시하는 방식을 개선했습니다. 인덱스를 활용하여 마지막 항목을 제외한 모든 항목에
hrOption속성을 적용함으로써 더 깔끔한 UI를 구현했습니다. 이는 다양한 화면 크기에서 일관된 레이아웃을 유지하는 데 도움이 됩니다.src/features/resume-list/resume-item.tsx (2)
4-4: clsx 라이브러리 추가조건부 클래스 적용을 위해
clsx라이브러리를 추가했습니다. 이는 반응형 디자인에서 조건부 스타일링을 더 효과적으로 관리할 수 있게 해줍니다.
17-33: ResumeItem 컴포넌트 구조 개선컴포넌트 구조를 단일
<li>요소로 단순화하고,clsx를 활용하여 조건부로 하단 테두리를 적용했습니다. 이전에 별도의<hr>요소를 사용하던 방식보다 더 깔끔하고 효율적입니다. 또한 Typography 컴포넌트에as='span'속성을 명시적으로 지정하여 인라인 요소로 올바르게 렌더링되도록 했습니다.이러한 개선사항은 다양한 화면 크기에서 일관된 레이아웃을 유지하는 반응형 디자인에 기여합니다.
src/features/resume-list/resume-detail-field.tsx (6)
20-23: 모달 및 알림 기능을 위한 유틸리티 추가사용자 경험 개선을 위한 모달 및 알림 관련 유틸리티를 추가했습니다. 이는 특히 모바일 기기에서 더 나은 사용자 경험을 제공합니다.
32-35: 메시지 상수 구조화메시지 상수를 명확하게 구조화하여 코드 가독성을 향상시켰습니다. 이는 유지보수성을 높이는 데 도움이 됩니다.
38-38: 비동기 뮤테이션 처리 개선
mutate대신mutateAsync를 사용하여 비동기 작업을 더 효과적으로 처리할 수 있도록 개선했습니다. 이는 특히 네트워크 지연이 발생할 수 있는 모바일 환경에서 중요합니다.
56-61: 사용자 친화적인 삭제 확인 모달 추가기본 브라우저 확인 대화상자 대신
showNotiflixConfirm을 사용한 커스텀 모달을 구현했습니다. 이는 모바일 및 태블릿 환경에서 더 나은 사용자 경험을 제공하며, 반응형 디자인 목표에 부합합니다.
63-70: 오류 처리 및 사용자 피드백 개선삭제 작업을 비동기 함수로 변경하고 try/catch 구문을 사용하여 오류 처리를 개선했습니다. 또한 Notify를 통해 성공 및 실패 메시지를 표시하여 사용자에게 명확한 피드백을 제공합니다. 이는 모든 디바이스 환경에서 일관된 사용자 경험을 보장합니다.
72-75: 핸들러 함수 및 버튼 클릭 이벤트 개선핸들러 함수를 단순화하고 버튼 클릭 이벤트를 업데이트하여 코드 가독성과 유지보수성이 향상되었습니다. 이러한 개선사항은 반응형 웹 애플리케이션의 성능 최적화에 기여합니다.
Also applies to: 98-99, 101-102
src/features/user-meta-data/user-meta-data-modal.tsx (1)
7-8: 타이포그래피 컴포넌트의 반응형 스타일링이 적용되었습니다.기존의
size,align,weight속성 대신 Tailwind CSS 클래스(mobile:text-xl text-center text-2xl font-bold)를 사용하여 반응형 디자인을 구현하셨습니다. 모바일 화면에서는 더 작은 텍스트 크기(text-xl)가 적용되어 화면 크기에 맞게 조정되는 것이 좋네요.또한 헤딩 텍스트가 "주요 이력 작성하기"에서 "내 정보 등록하기"로 변경되어 사용자에게 더 명확한 의미를 전달할 수 있게 되었습니다.
src/features/character/character-detail-modal.tsx (2)
49-54: 반응형 타이포그래피 스타일링이 개선되었습니다.기존에 사용하던
size='2xl',weight='bold'속성 대신className='text-2xl font-bold mobile:text-lg'를 사용하여 반응형 스타일링을 적용하셨습니다. 이를 통해 모바일 화면에서는 더 작은 텍스트 크기(text-lg)로 표시되어 가독성이 향상됩니다.프로젝트 전반에 걸쳐 일관된 반응형 스타일 패턴을 적용한 것이 좋습니다.
65-70: History 탭의 타이포그래피도 반응형으로 적용되었습니다.첫 번째 탭과 마찬가지로 History 탭에도 반응형 텍스트 스타일링이 일관되게 적용되었습니다.
className='text-2xl font-bold mobile:text-lg'를 추가하여 모바일 화면에서 적절한 크기로 표시됩니다.
color속성의 위치가 조정되었는데, 이는 JSX 속성의 순서 변경일 뿐 기능에는 영향이 없습니다.tailwind.config.ts (1)
17-21: 반응형 브레이크포인트 정의가 개선되었습니다.Tailwind 설정에서 반응형 브레이크포인트 정의 방식이 개선되었습니다:
desktop스크린 정의에서 상한값(max: '1919px')을 제거하고 최소값만 정의하여 더 유연한 구조를 만들었습니다.- 이전
wide스크린 정의를 제거하고 대신maxWidth속성에max: '1920px'를 추가하여 일관된 최대 너비 제한을 적용했습니다.이러한 변경은 UI 전반에 걸쳐 일관된 최대 너비 제약을 적용하기 쉽게 만들며, 전체적인 반응형 디자인 개선에 기여합니다.
src/features/my-page/tab-buttons.tsx (3)
55-55: 탭 버튼의 텍스트 크기가 반응형으로 조정되었습니다.탭 버튼의 텍스트에
mobile:text-sm클래스를 추가하여 모바일 화면에서 더 작은 텍스트 크기로 표시되도록 개선했습니다. 이를 통해 모바일 화면에서도 모든 탭 텍스트가 잘 보이고 넘치지 않게 됩니다.
59-59: 버튼 레이아웃이 플렉스 컨테이너로 개선되었습니다.버튼 클래스를 단순
w-full에서 플렉스 컨테이너(flex w-full items-center justify-center)로 변경하여 버튼 내용이 중앙에 더 잘 정렬되도록 개선했습니다. 이는 버튼 내부 요소들의 배치가 더 일관되고 깔끔하게 보이도록 합니다.
61-67: 모바일 환경에서 배지의 접근성이 향상되었습니다.탭 카운트 배지를
mobile:sr-only클래스를 가진<div>로 감싸서 모바일 화면에서는 배지가 시각적으로 숨겨지지만 스크린 리더에서는 계속 접근 가능하도록 개선했습니다. 이는 모바일 화면에서 공간을 절약하면서도 접근성을 유지하는 좋은 방법입니다.기존의 조건부 렌더링(탭 카운트가 0이 아닐 때만 배지 표시)도 유지되었습니다.
src/app/(with-nav)/(with-header)/layout.tsx (1)
7-7: 반응형 레이아웃 개선이 잘 적용되었습니다.
max-w-screen-desktop에서max-w-max로 변경하고mobile:px-6클래스를 추가하여 모바일 화면에서는 더 작은 패딩을 적용하는 방식이 적절합니다. 이 변경으로 다양한 화면 크기에서 컨텐츠가 적절히 표시될 수 있습니다.src/features/user-meta-data/user-meta-data-form.tsx (1)
28-28: 모바일 환경에 적합한 마진 값 적용이 좋습니다.모바일 환경에서는 더 작은 마진(mt-4)을 적용하고 데스크톱에서는 기존의 큰 마진(mt-10)을 유지하도록 한 접근이 사용자 경험 측면에서 적절합니다.
isFirstTime조건부 스타일링도 잘 유지되었습니다.src/features/my-page/viewing-field.tsx (1)
25-30: 반응형 레이아웃 구현이 적절합니다.고정 너비 클래스를 반응형 유틸리티 클래스로 교체한 접근이 좋습니다:
- 모바일에서는 전체 너비(
w-full)를 사용하고 데스크톱에서는 절반 너비(desktop:w-1/2)로 전환- 최소 너비 제약 조건을 데스크톱에만 적용(
desktop:min-width-[634px])clsx에서 조건부 높이 클래스를 명확하게 분리한 것도 가독성을 높입니다이러한 변경으로 다양한 화면 크기에서 레이아웃이 자연스럽게 적응할 수 있습니다.
src/features/my-page/tabs-field.tsx (2)
2-7: 임포트 정리가 잘 되었습니다.임포트 문이 논리적으로 재정렬되어 코드의 가독성이 향상되었습니다.
42-42: 모바일 환경에 적합한 패딩 적용이 잘 되었습니다.모바일 기기에서는 더 작은 패딩(
mobile:p-4)을 적용하고 데스크톱에서는 기존의 큰 패딩(p-8)을 유지하는 방식이 적절합니다. 이로써 화면 크기에 따라 컨텐츠 영역이 자연스럽게 조정됩니다.src/features/character/my-page-character-card.tsx (3)
50-50: 반응형 스타일을 적절히 적용하였습니다!캐릭터 이미지를 담는 컨테이너에
mobile:w-[25vh]클래스를 추가하여 모바일 화면에서 적절한 크기로 조정되도록 하였습니다. 이는 작은 화면에서도 캐릭터가 적절한 비율로 표시되도록 합니다.
64-66: 사용자 이름 표시에 대한 반응형 처리가 잘 되었습니다.사용자 이름 Typography에
mobile:text-lg mobile:whitespace-nowrap mobile:max-w-[150px] mobile:truncate클래스를 추가하여 모바일 화면에서:
- 텍스트 크기를 줄이고
- 줄바꿈을 방지하며
- 최대 너비를 제한하고
- 길이가 긴 이름을 자동으로 생략(...)하도록 처리하였습니다.
이는 모바일 화면에서 레이아웃이 깨지는 것을 방지하며 사용자 경험을 향상시킵니다.
72-76: 카드 에셋 이미지의 반응형 처리가 적절합니다.카드 에셋 이미지에
mobile:w-[120px] w-[175px]클래스를 추가하여 모바일 화면에서는 작은 크기로, 데스크톱에서는 원래 크기로 표시되도록 조정하였습니다. 이미지 크기의 적절한 조정은 모바일 화면에서의 레이아웃 개선에 도움이 됩니다.src/app/(with-nav)/(with-header)/my-page/page.tsx (1)
12-12: 반응형 레이아웃 구조가 잘 적용되었습니다.article 요소에 적용된 클래스 변경은 다음과 같은 반응형 레이아웃을 구현합니다:
- 기본적으로
flex-col로 세로 배치- 모바일 화면에서
mobile:h-[calc(100%-65px)] mobile:gap-2로 높이와 간격 조정- 데스크톱 화면에서
desktop:flex-row로 가로 배치 전환이러한 변경은 다양한 화면 크기에서 My Page 레이아웃이 적절하게 표시되도록 합니다. 이는 PR 목표에 잘 부합합니다.
src/features/my-page/my-info.tsx (3)
41-41: 컨테이너 너비 설정이 적절합니다.섹션 요소에
w-full클래스를 추가하여 전체 너비를 활용하도록 설정하였습니다. 이는 반응형 레이아웃에서 컨테이너가 제공된 공간을 최대한 활용할 수 있도록 합니다.
42-49: 제목과 설정 아이콘의 반응형 처리가 잘 되었습니다.Typography 컴포넌트를 클래스 기반 스타일링으로 리팩토링하고 반응형 텍스트 크기를 적용한 것은 좋은 접근입니다. 또한, 모바일 화면에서 설정 아이콘을 표시하는 UI 패턴 변경은 작은 화면에서의 사용성을 향상시킵니다.
50-64: 모바일 화면 최적화를 위한 조건부 렌더링이 적절합니다.
mobile:hidden클래스를 사용하여 모바일 화면에서 상세 내용을 숨기고, 대신 상단에 설정 아이콘을 통해 모달에 접근할 수 있도록 처리한 방식은 모바일 화면의 공간 활용에 효과적입니다. 이러한 패턴은 제한된 모바일 화면에서 사용자 경험을 향상시킵니다.src/features/bookmark-selected/bookmark-tab.tsx (4)
50-50: 직무명 Typography 스타일링이 개선되었습니다.직무명 Typography를 명시적 props 대신 클래스 기반 스타일링으로 변경하고, 반응형 텍스트 크기를 적용하였습니다.
line-clamp-1을 통한 텍스트 생략 처리는 UI의 일관성을 유지하는 데 도움이 됩니다.
57-57: 경험 및 날짜 정보의 반응형 레이아웃이 적절합니다.경험 및 날짜 정보를 담는 컨테이너에
mobile:flex-col mobile:gap-2클래스를 추가하여 모바일 화면에서 세로 배치로 전환하고 간격을 조정하였습니다. 이는 모바일 화면에서 정보를 보다 명확하게 표시하는 데 효과적입니다.
65-65: 남은 일수 및 링크 버튼의 반응형 레이아웃이 적절합니다.남은 일수 및 링크 버튼을 담는 컨테이너에
mobile:flex-col mobile:gap-1클래스를 추가하여 모바일 화면에서 세로 배치로 전환하고 간격을 조정하였습니다. 이러한 변경은 모바일 화면에서의 레이아웃을 최적화합니다.
69-69: 날짜 오류 메시지의 스타일 변경이 적절합니다.날짜 오류 메시지의 색상을 파란색에서 주황색으로 변경하고, 모바일 화면에서 더 작은 텍스트 크기를 적용한 것은 시각적 일관성과 가독성을 향상시킵니다.
src/features/my-page/my-info-content.tsx (4)
30-30: 컴포넌트의 전체 너비 적용이 적절합니다.
w-full클래스를 추가하여 컴포넌트가 화면 너비에 맞게 확장되도록 한 것은 반응형 디자인에 적합합니다. 다양한 기기 크기에서 일관된 레이아웃을 유지하는 데 도움이 됩니다.
31-31: 반응형 목록 스타일링이 잘 구현되었습니다.모바일과 태블릿에서는 가로 스크롤 목록으로, 데스크톱에서는 세로 레이아웃으로 전환되는 반응형 디자인이 잘 구현되었습니다.
scrollbar-hidden클래스를 사용해 스크롤바를 숨긴 것은 모바일 UI에서 좋은 사용자 경험을 제공합니다.
34-34: 빈 필드 필터링 처리가 적절합니다.데이터가 없는 필드를 렌더링하지 않도록 조건부 처리한 것은 좋은 최적화입니다. 특히 작은 화면에서 공간을 절약하고 사용자 경험을 향상시킵니다.
47-51: 수정 버튼의 반응형 처리가 적절합니다.데스크톱에서만 수정 버튼을 표시하는 디자인 선택은 모바일 인터페이스를 단순화하는 데 도움이 됩니다. PR 목표에서 언급된 대로 모달이 모바일에서도 올바르게 작동하는지 확인하세요.
모바일에서 사용자가 정보를 수정할 수 있는 대체 방법(예: 설정 아이콘, 드롭다운 메뉴 등)이 있는지 확인해 보세요.
choichangyeon
left a comment
choichangyeon
left a comment
There was a problem hiding this comment.
마이페이지도 아주 잘 작동합니다!
hye410
force-pushed
the
Style#235-responsive-my-page
branch
from
a211695 to
c0eab17
Compare
4 participants
💡 관련이슈
#235
🍀 작업 요약
💬 리뷰 요구 사항
💛 미리보기
✔️ 이슈 닫기
Closes #235
Ref #이슈번호 // 해당 이슈에 대한 작업이 완전히 끝나지 않은 경우
Summary by CodeRabbit