Repository navigation
Conversation
- 기존 useCurrentPath + 정규식 기반 활성 상태 추적 제거 - Remix의 NavLink로 교체하여 라우트 변경 시 자동으로 active 상태 반영 - 로고 <a> → <Link> 변경 (전체 페이지 리로드 방지) - 검색, 기록하기 메뉴는 end 옵션으로 정확히 일치 시만 활성화 - 설정 및 프로필 카드는 하위 경로 포함 활성화 유지 - 활성 배경이 고정되는 버그 해결
- 파일 선택 시 이전 blob URL을 revoke하여 메모리 누수 방지 - useRef로 마지막 생성된 blob URL을 추적하도록 구현 - 컴포넌트 언마운트 시 blob URL 자동 해제 처리 - loaderData.avatarUrl 변경 시 남은 blob URL도 정리 - 미리보기 동작은 기존과 동일하게 유지하되, 안정성 개선
Collaborator
Author
|
commit message도 봐주세요. ui만 개선하려다 설정 부분을 전반적으로 손 봤습니다. |
dongcheolpark
approved these changes
Oct 28, 2025
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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.
📌 개요 (Overview)
프로필 데스크톱 레이아웃에 설정(Settings) 버튼을 새로 추가하여 접근성을 개선함.
기존
계정 설정(SettingsPage)UI를 시각적으로 직관적인 디자인으로 리뉴얼함.로그아웃 버튼을 기존 상단 네비게이션에서 제거하고, 설정 페이지 내부로 이동시킴.
✨ 주요 변경 사항 (Changes)
1.
DesktopLayout개선app/features/profile/pages/profile.module.scss내비게이션 영역에 설정 메뉴 항목 추가기존에는
UserNavCard를 클릭해야만 설정으로 진입 가능했음이제 “설정” 아이콘 및 라벨이 명시적으로 추가되어 접근성이 향상됨
2.
SettingsPage리뉴얼 (app/features/profile/pages/settings.tsx)전체 구조를 카드형 섹션(Card Layout)으로 재구성
프로필 사진, 핸들 변경, 로그아웃 영역을 독립된 섹션으로 구분
파일 선택 시 미리보기 기능 추가
버튼 스타일을
Primary / Secondary / Danger세 가지 계열로 통일입력값 변경 시에만 “저장” 버튼이 활성화되도록 UX 개선
로그아웃 버튼을 설정 페이지 하단의 ‘Danger Zone’ 섹션에 배치
모든 폼에
replace옵션 추가하여 히스토리 관리 개선3. 스타일 개선 (
setting.module.scss)카드 단위 그림자(
box-shadow) 및 라운드(border-radius: 16px) 적용폰트 크기, 간격, 컬러 팔레트 등을 Tailwind Neutral 기반으로 통일
반응형 대응 (
@media (max-width: 640px))전체 톤을 밝고 미니멀한 화이트/그레이 베이스로 리디자인
📸 변경된 화면 (Desktop View)
프로필 클릭 시만 설정 접근 가능 👉 내비게이션 내 “설정” 버튼 추가
단조로운 폼 형태 👉 카드형 UI + 구분선 + 버튼 색상 개선
로그아웃 버튼 상단 고정 👉 설정 페이지 내부 Danger Zone 배치