Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull request overview
이 PR은 검색 기능의 UX/UI 개선과 로컬 스토리지 관리 방식을 개선합니다. 기존에 각 컴포넌트에서 독립적으로 로컬 스토리지를 관리하던 방식에서 Zustand를 활용한 중앙 집중식 상태 관리로 전환하여 일관성 문제를 해결했습니다.
Changes:
- 검색 히스토리를 관리하는 커스텀 훅(useSearchHistory)을 Zustand store(useSearchHistoryStore)로 마이그레이션
- 검색 결과 카드 UI 디자인 개선 및 아티스트 클릭 기능 추가
- 다른 store들의 initialState 패턴 통일
Reviewed changes
Copilot reviewed 11 out of 12 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| apps/web/src/stores/useSearchHistoryStore.ts | localStorage 기반 검색 히스토리를 Zustand persist 미들웨어로 구현한 새로운 store 추가 |
| apps/web/src/stores/useModalStore.ts | initialState 패턴 적용 및 closeMessage 시 초기 상태로 완전히 리셋하도록 개선 |
| apps/web/src/stores/useAuthStore.ts | initialState 패턴 적용 및 logout 시 초기 상태로 완전히 리셋하도록 개선 |
| apps/web/src/hooks/useSearchSong.ts | useSearchHistory hook에서 useSearchHistoryStore로 마이그레이션 |
| apps/web/src/hooks/useSearchHistory.ts | Zustand store로 대체되어 삭제됨 |
| apps/web/src/app/search/SearchResultCard.tsx | 카드 레이아웃 개선, absolute 포지셔닝 제거, 아티스트 클릭 기능 추가 |
| apps/web/src/app/search/HomePage.tsx | ScrollArea를 일반 div로 변경, useEffect 위치 이동, 아티스트 클릭 핸들러 추가 |
| apps/web/public/changelog.json | 버전 2.0.1 변경사항 추가 |
| apps/web/package.json | 버전을 1.9.1에서 2.0.1로 업데이트 |
| apps/web/GEMINI.md | 웹 앱의 기술 스택 및 컨벤션 문서 추가 |
| GEMINI.md | 프로젝트 전체 구조 및 기술 스택 문서 추가 |
| .gitignore | temp/ 디렉토리 추가 |
| )} | ||
| </div> | ||
| <ScrollArea className="h-[calc(100vh-24rem)]"> | ||
| <div className="h-[calc(100vh-24rem)] overflow-x-hidden overflow-y-auto"> |
There was a problem hiding this comment.
ScrollArea를 일반 div로 변경했습니다. 프로젝트 전반에서 ScrollArea 컴포넌트를 사용하고 있는 패턴(apps/web/src/app/info/like/page.tsx:46, apps/web/src/app/info/save/page.tsx:194, apps/web/src/app/popular/page.tsx:22, apps/web/src/app/tosing/page.tsx:29)과 일관성이 떨어집니다. 특별한 이유가 없다면 ScrollArea 컴포넌트를 계속 사용하는 것을 권장합니다.
| <span | ||
| className="text-muted-foreground cursor-pointer truncate text-sm hover:underline" | ||
| onClick={onClickArtist} | ||
| > | ||
| {artist} | ||
| </span> |
There was a problem hiding this comment.
가수명을 클릭할 수 있는 기능을 추가했습니다. button 또는 role="button"을 사용하고 키보드 접근성(onKeyDown 또는 onKeyPress)을 추가하는 것을 권장합니다. 현재는 마우스 클릭만 가능하여 키보드 사용자가 이 기능을 사용할 수 없습니다.
| } | ||
|
|
||
| if (parsedSearch) { | ||
| console.log('parsedSearch ', parsedSearch); |
There was a problem hiding this comment.
디버깅용 console.log가 남아있습니다. 프로덕션 코드에서는 제거해주세요.
| console.log('parsedSearch ', parsedSearch); |
| searchHistory: [] as string[], | ||
| }; | ||
|
|
||
| export const useSearchHistoryStore = create( |
There was a problem hiding this comment.
useSearchHistoryStore는 다른 store들(useAuthStore, useModalStore)과 달리 default export가 아닌 named export로 되어있습니다. 코드베이스의 일관성을 위해 'export default useSearchHistoryStore'로 변경하는 것을 권장합니다. 다른 store 파일들(useAuthStore.ts:264, useModalStore.ts:56)을 참고해주세요.
📌 PR 제목
Fix : 검색 곡 카드 디자인 개선, 로컬 스토리지 검색어 저장 기능 개선
📌 변경 사항
💬 추가 참고 사항