refactor: 검색 결과 페이지 리팩토링 #265
Conversation
…ntend into refactor/260-search-result
areumH
added
✔︎pull requests
개요워크스루이 풀 리퀘스트는 검색 결과 페이지와 관련된 여러 컴포넌트의 리팩토링을 포함합니다. 주요 변경 사항은 검색 바의 엔터 키 핸들링, 톡픽 및 게임 검색 결과 아이템의 타입 변경, 페이지네이션 로직 업데이트, 그리고 일부 컴포넌트의 스타일 및 네비게이션 로직 개선을 포함합니다. 변경 사항
평가 (연결된 이슈 대비)
가능성 있는 관련 PR
제안된 라벨
제안된 리뷰어
시퀀스 다이어그램sequenceDiagram
participant User
participant SearchBar
participant SearchResultPage
participant NavigationService
User->>SearchBar: 검색어 입력
User->>SearchBar: Enter 키 누름
SearchBar->>SearchResultPage: 검색 요청
SearchResultPage->>NavigationService: 결과 페이지로 이동
SearchResultPage->>User: 검색 결과 표시
시 (토끼의 노래)
Tip CodeRabbit's docstrings feature is now available as part of our Early Access Program! Simply use the command Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 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: 0
🧹 Nitpick comments (4)
src/components/molecules/VotePrototype/VotePrototype.tsx (1)
Line range hint
28-143: 컴포넌트 구조 개선을 위한 제안현재 컴포넌트가 다음과 같은 여러 책임을 가지고 있습니다:
- 로그인/비로그인 상태 관리
- 투표 상태 관리
- 로컬 스토리지 관리
- UI 렌더링
다음과 같은 리팩토링을 제안드립니다:
- 투표 로직을 별도의 커스텀 훅으로 분리
- 로그인 상태 관련 로직을 별도의 컴포넌트로 분리
- UI 렌더링 부분만 남기는 방향으로 개선
예시 코드를 생성해드릴까요?
src/components/atoms/SearchBar/SearchBar.tsx (1)
27-34: 검색 중 상태 처리를 고려해보세요.검색 실행 시 로딩 상태를 표시하면 사용자 경험을 더욱 개선할 수 있습니다.
다음과 같은 개선을 제안합니다:
interface SearchBarProps extends ComponentPropsWithoutRef<'input'> { onSearchClick: () => void; onInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void; + isSearching?: boolean; } const SearchBar = ( - { onSearchClick, onInputChange, ...props }: SearchBarProps, + { onSearchClick, onInputChange, isSearching = false, ...props }: SearchBarProps, ref: ForwardedRef<HTMLInputElement>, ) => {<input ref={ref} css={S.inputStyling} placeholder="궁금한 키워드를 입력해주세요!" onChange={onInputChange} onKeyDown={handleInputKeyDown} + disabled={isSearching} {...props} /> - <Button size="large" variant="circle" onClick={onSearchClick}> + <Button size="large" variant="circle" onClick={onSearchClick} disabled={isSearching}> <Search /> </Button>src/components/atoms/SearchTalkPickItem/SearchTalkPickItem.tsx (1)
26-26: 접근성과 사용자 경험이 개선되었습니다.다음과 같은 개선사항들이 있습니다:
div에서button으로 변경하여 접근성이 향상됨- 이미지가 있을 때만 렌더링하도록 최적화됨
하나 제안드리고 싶은 점이 있습니다:
버튼에 aria-label을 추가하여 스크린 리더 사용자를 위한 접근성을 더욱 향상시킬 수 있습니다:
- <button type="button" css={S.searchTalkPickItemStyle} onClick={onClick}> + <button + type="button" + css={S.searchTalkPickItemStyle} + onClick={onClick} + aria-label={`${title} 토픽 열기`} + >Also applies to: 53-53
src/components/organisms/TalkPickSection/TalkPickSection.style.ts (1)
76-82: 텍스트 스타일링 구조가 개선되었습니다!컨테이너와 텍스트 스타일링을 분리하고,
whiteSpace: 'pre-wrap'을 추가하여 줄바꿈이 올바르게 적용되도록 개선한 것이 좋습니다. 다만, 다음과 같은 개선사항을 고려해보시면 좋겠습니다:export const talkPickContent = css({ width: '100%', paddingTop: '40px', - paddingLeft: '173px', - paddingRight: '173px', + padding: '40px 173px 0', borderTop: '1px solid #F4F4F4', });Also applies to: 84-88
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (15)
src/components/atoms/SearchBar/SearchBar.tsx(1 hunks)src/components/atoms/SearchTalkPickItem/SearchTalkPickItem.style.ts(2 hunks)src/components/atoms/SearchTalkPickItem/SearchTalkPickItem.tsx(3 hunks)src/components/molecules/SearchGameList/SearchGameList.tsx(4 hunks)src/components/molecules/SearchTalkPickList/SearchTalkPickList.tsx(2 hunks)src/components/molecules/VotePrototype/VotePrototype.style.ts(1 hunks)src/components/molecules/VotePrototype/VotePrototype.tsx(2 hunks)src/components/organisms/TalkPickSection/TalkPickSection.style.ts(1 hunks)src/components/organisms/TalkPickSection/TalkPickSection.tsx(1 hunks)src/constants/api.ts(1 hunks)src/hooks/search/usePagination.ts(2 hunks)src/pages/SearchResultsPage/SearchGamePage.tsx(2 hunks)src/pages/SearchResultsPage/SearchTalkPickPage.tsx(2 hunks)src/pages/TalkPickPlacePage/TalkPickPlacePage.tsx(3 hunks)src/types/search.ts(2 hunks)
🔇 Additional comments (22)
src/components/molecules/VotePrototype/VotePrototype.style.ts (1)
42-43: 스타일 변경이 적절히 이루어졌습니다.
컨테이너의 중앙 정렬이 transform을 사용하여 올바르게 구현되었습니다. zIndex 값의 타입을 문자열로 통일한 것도 좋은 변경입니다.
Also applies to: 48-48
src/components/molecules/VotePrototype/VotePrototype.tsx (1)
4-4: 경로 상수 사용으로 코드 품질이 향상되었습니다.
하드코딩된 문자열 대신 PATH 상수를 사용함으로써 유지보수성이 향상되었습니다. 이는 라우팅 관리에 있어 일관성을 제공합니다.
Also applies to: 75-75
src/constants/api.ts (1)
65-65: 엔드포인트 변경이 적절해 보입니다.
게임 검색 엔드포인트를 /search/game에서 /search/game-sets로 변경한 것이 다음과 같은 이유로 적절해 보입니다:
- 기존
BOOKMARK_GAME_DONE,BOOKMARK_GAME등의 엔드포인트에서 사용하는 패턴과 일관성이 있습니다 - 게임 세트 ID를 사용하는 방식으로의 전환이 자연스럽습니다
다음 스크립트를 실행하여 게임 세트 관련 엔드포인트들의 일관성을 확인해보겠습니다:
✅ Verification successful
엔드포인트 변경이 코드베이스 전반에 걸쳐 일관되게 적용되었습니다.
검증 결과 다음과 같은 사항들이 확인되었습니다:
/search/game-sets엔드포인트가 다른 게임 세트 관련 엔드포인트들(/bookmarks/game-sets,/games/${gameSetId}등)과 일관된 패턴을 따르고 있습니다- 타입 정의와 컴포넌트 인터페이스에서
gameSetId가 일관되게 사용되고 있습니다 - 레거시
/games/${gameId}패턴은 더 이상 검색 관련 기능에서 사용되지 않습니다
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 설명: 게임 세트 관련 엔드포인트들의 일관성 확인
# 게임 세트 관련 엔드포인트 검색
echo "게임 세트 관련 엔드포인트 패턴 확인:"
rg "game-sets?" src/
# 이전 게임 ID 사용 패턴 검색
echo "\n레거시 게임 ID 사용 패턴 확인:"
rg "/games/\$\{gameId\}" src/
Length of output: 537
Script:
#!/bin/bash
# 게임 관련 모든 엔드포인트 패턴을 확인하기 위한 더 넓은 검색
echo "모든 게임 관련 엔드포인트 패턴:"
rg -i "(/games?|/game-sets?)" src/constants/api.ts -A 1 -B 1
echo "\n타입 정의에서 gameSetId 사용 확인:"
rg "gameSetId" src/ -A 1 -B 1
echo "\n게임 ID 관련 타입 정의 확인:"
ast-grep --pattern 'interface $_ {
$$$
gameSetId: $_
$$$
}'
Length of output: 25779
src/types/search.ts (2)
4-4: 식별자 이름이 더 명확해졌습니다!
id에서 gameSetId로의 변경은 해당 필드의 목적을 더 명확하게 표현합니다.
Line range hint 13-19: SearchTalkPickItem 인터페이스가 잘 구성되었습니다.
필요한 모든 필드가 포함되어 있으며, 각 필드의 타입이 명확하게 정의되어 있습니다.
src/hooks/search/usePagination.ts (2)
19-19: 페이지 설정 로직이 단순화되었습니다.
페이지 설정 로직이 더 간단하고 직관적으로 변경되었습니다.
4-8: 페이지네이션 기본값 변경이 적절합니다.
0 기반에서 1 기반으로의 변경은 사용자 경험 측면에서 더 직관적입니다.
기존 페이지네이션 구현에 미치는 영향을 확인하기 위해 다음 스크립트를 실행하세요:
✅ Verification successful
페이지네이션 기본값 변경이 안전하게 적용되었습니다.
코드베이스 분석 결과, usePagination 훅의 기본값 변경(0 → 1)은 다음과 같은 이유로 안전합니다:
- 모든 페이지네이션 구현이 이 훅을 일관되게 사용하고 있습니다
- 페이지 파라미터를 API로 전달할 때 자동으로 0-based로 변환됩니다 (예:
page: currentPage - 1) - 검색 파라미터와 UI 표시는 1-based로 일관되게 처리됩니다
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 페이지네이션 관련 컴포넌트들에서 페이지 번호 처리 방식 확인
rg -A 3 "page(=|\s*:)" --type ts --type tsx
Length of output: 73
Script:
#!/bin/bash
# Search for pagination-related code patterns
rg -t ts "page" -A 3
# Also search for usePagination hook usage
rg -t ts "usePagination" -A 3
Length of output: 76534
Script:
#!/bin/bash
# Search for usePagination hook usage and implementation
rg -t ts "usePagination" -A 3
# Also search for pagination-related state changes
ast-grep --pattern 'const [page, setPage] = useState'
Length of output: 3096
src/components/atoms/SearchBar/SearchBar.tsx (1)
19-23: Enter 키 지원 추가는 좋은 UX 개선입니다.
검색 기능에 Enter 키 지원을 추가한 것은 사용자 경험을 크게 향상시킵니다.
src/components/atoms/SearchTalkPickItem/SearchTalkPickItem.style.ts (2)
6-6: 스타일 리셋 속성이 적절히 추가되었습니다.
버튼 요소의 기본 스타일을 초기화하는 all: 'unset' 속성이 잘 적용되었습니다.
40-42: 콘텐츠 표시 방식 검토 필요
현재 구현된 스타일링에 대해 다음 사항들을 고려해주세요:
display: inline으로 변경하면 레이아웃 흐름에 영향을 줄 수 있습니다.- 고정된 높이(45px)와
overflow: hidden설정으로 인해 긴 콘텐츠가 잘릴 수 있습니다.
다음 스크립트로 콘텐츠 길이가 긴 케이스를 확인해보세요:
✅ Verification successful
스타일링 구현이 적절합니다
현재 구현된 스타일링이 다음과 같은 이유로 적절한 것으로 확인됩니다:
-
display: inline과 고정 높이는 의도적인 디자인 선택입니다:- 컴포넌트는
searchTalkPickItemStyle에서 flex 레이아웃으로 전체 구조가 잘 정의되어 있습니다 contentWrapStyle은 콘텐츠 영역의 2줄 제한을 위한 것으로 보입니다
- 컴포넌트는
-
콘텐츠 길이 제한은 디자인 요구사항에 맞습니다:
- 스토리북 예제에서도 짧은 콘텐츠로 테스트되고 있습니다
- 검색 결과 미리보기 용도로 적절한 구현입니다
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 콘텐츠 길이가 긴 케이스 검색
rg -l "SearchTalkPickItem.*content.*"
Length of output: 39
Script:
#!/bin/bash
# SearchTalkPickItem 컴포넌트의 사용 사례 검색
rg -A 5 "SearchTalkPickItem"
# SearchTalkPickItem 스타일 파일의 전체 내용 확인
fd "SearchTalkPickItem.style" --exec cat {}
Length of output: 12481
src/components/molecules/SearchGameList/SearchGameList.tsx (2)
15-15: 타입 정의가 명확하게 개선되었습니다.
id에서 gameSetId로의 변경은 의미론적으로 더 명확합니다.
27-27: 라우팅 로직이 개선되었으나 검증이 필요합니다.
PATH 상수를 사용한 라우팅 처리와 gameSetId 사용이 적절하게 구현되었습니다. 다만, 이 변경사항이 다른 컴포넌트들과 일관성있게 적용되었는지 확인이 필요합니다.
다음 스크립트로 gameSetId 사용의 일관성을 확인해보세요:
Also applies to: 42-42
✅ Verification successful
Let me analyze the results and generate a final response in Korean.
라우팅 및 게임 ID 처리가 일관되게 구현되었습니다.
검증 결과, gameSetId와 PATH.BALANCEGAME의 사용이 전체 코드베이스에서 일관성있게 구현되어 있습니다:
PATH.BALANCEGAME은 App.tsx의 라우트 정의와 SearchGameList 컴포넌트에서 동일한 패턴으로 사용됩니다.gameSetId는 타입 정의, API 엔드포인트, 훅, 컴포넌트 등 전반적으로 일관된 방식으로 사용되고 있습니다.- 관련 컴포넌트들(BalanceGameBox, BalanceGameSection 등)이 모두 동일한 패턴으로
gameSetId를 props로 받아 처리하고 있습니다.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# gameSetId 사용 패턴 검색
rg "gameSetId|game\.id"
# PATH.BALANCEGAME 사용 검색
rg "PATH\.BALANCEGAME"
Length of output: 8760
src/components/molecules/SearchTalkPickList/SearchTalkPickList.tsx (2)
19-23: 네비게이션 기능이 적절히 구현되었습니다.
useNavigate 훅과 PATH 상수를 활용한 라우팅 처리가 잘 구현되었습니다.
30-37: 🛠️ Refactor suggestion
중복된 key prop 제거 필요
key prop이 중복 사용되고 있습니다:
- div 요소의 key prop (line 29)
- SearchTalkPickItem 컴포넌트의 key prop (line 30)
다음과 같이 수정해주세요:
- <SearchTalkPickItem
- key={searchItem.title}
+ <SearchTalkPickItem
id={searchItem.id}
title={searchItem.title}Likely invalid or redundant comment.
src/components/atoms/SearchTalkPickItem/SearchTalkPickItem.tsx (1)
8-8: Props 인터페이스가 적절하게 확장되었습니다.
컴포넌트의 재사용성과 타입 안정성이 향상되었습니다. id와 onClick props의 추가는 컴포넌트의 기능성을 높이는 좋은 변경사항입니다.
Also applies to: 14-14
src/pages/TalkPickPlacePage/TalkPickPlacePage.tsx (3)
11-11: 페이지네이션 로직이 개선되었습니다.
커스텀 훅을 사용하여 페이지네이션 로직을 중앙화했고, 페이지 계산 방식이 더 직관적으로 변경되었습니다. API 호출 시 page - 1로 조정하는 것이 올바른 접근입니다.
Also applies to: 19-19
25-26: useEffect의 의존성이 적절히 업데이트되었습니다.
페이지 변경과 정렬 값 변경 시 스크롤이 상단으로 이동하도록 처리된 것이 사용자 경험 측면에서 좋습니다.
43-44: 페이지네이션 props 전달이 일관성 있게 수정되었습니다.
선택된 페이지와 페이지 변경 핸들러가 적절히 전달되고 있습니다.
src/pages/SearchResultsPage/SearchGamePage.tsx (2)
23-23: 페이지 인덱스 계산이 일관되게 수정되었습니다.
API 호출 시 페이지 인덱스를 0부터 시작하도록 page - 1로 조정한 것이 적절합니다.
39-39: 페이지네이션 props가 일관성 있게 업데이트되었습니다.
다른 컴포넌트들과 동일한 방식으로 페이지네이션이 처리되도록 수정되었습니다.
src/pages/SearchResultsPage/SearchTalkPickPage.tsx (1)
23-23: 페이지네이션 로직이 개선되었습니다!
페이지 번호를 1부터 시작하도록 수정한 변경이 적절합니다. API 호출 시에는 0-based index로 변환하고, UI에는 1-based index를 사용하는 것이 사용자 경험 측면에서 더 자연스럽습니다.
Also applies to: 39-39
src/components/organisms/TalkPickSection/TalkPickSection.tsx (1)
195-197: 컨텐츠 렌더링 방식이 개선되었습니다!
p 태그에서 div 태그로 변경하고 새로운 스타일링을 적용하여 줄바꿈이 올바르게 표시되도록 수정한 것이 적절합니다. 이는 장문의 컨텐츠를 더 읽기 좋게 표시할 수 있게 해줍니다.
| const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => { | ||
| if (e.key === 'Enter') { | ||
| onSearchClick(); | ||
| } | ||
| }; |
There was a problem hiding this comment.
검색 시 엔터 키로 실행하도록 수정한 부분은 사용자 편의성에 좋은거 같네용ㅎㅎ
| width: '1215px', | ||
| height: '260px', | ||
| backdropFilter: 'blur(11px)', | ||
| backgroundColor: 'rgba(255, 255, 255, 0.01)', | ||
| zIndex: 1, | ||
| zIndex: '1', |
There was a problem hiding this comment.
보통 zIndex는 숫자로 사용하는데 string으로 변경하신 이유가 있을까용?
There was a problem hiding this comment.
다른 스타일들과의 통일을 위해 문자열로 수정해주었습니다,, ㅎㅎ 🫢
| @@ -3,6 +3,7 @@ import color from '@/styles/color'; | |||
| import typo from '@/styles/typo'; | |||
|
|
|||
| export const searchTalkPickItemStyle = css({ | |||
| all: 'unset', | |||
There was a problem hiding this comment.
버튼과 관련된 부분에 기본 속성을 제거해주신 부분 좋습니다!
| interface GameItem { | ||
| id: number; | ||
| export interface GameListItem { | ||
| gameSetId: number; |
There was a problem hiding this comment.
밸런스 게임 쪽에서는 제가 이 부분 똑같이 바꿔놨는데 생각이 통했군요...! 직관적이고 이해하기 편리한 수정사항인거 같아요 ㅎㅎ
| const searchTalkPickSample: SearchTalkPickListItem[] = Array.from( | ||
| { length: 10 }, | ||
| (_, index) => ({ |
There was a problem hiding this comment.
Array로 불필요한 코드량을 줄일 부분 좋은 거 같아요!!
| keyword: string; | ||
| } | ||
|
|
||
| const SearchGameList = ({ gameList, keyword }: SearchGameListProps) => { | ||
| const navigate = useNavigate(); | ||
|
|
||
| const handleItemClick = (gameId: number) => { | ||
| navigate(`/balancegame/${gameId}`); | ||
| navigate(`/${PATH.BALANCEGAME(gameId)}`); |
| @@ -1,11 +1,11 @@ | |||
| import { useState, useEffect } from 'react'; | |||
| import { useSearchParams } from 'react-router-dom'; | |||
|
|
|||
| const usePagination = (defaultPage = 0) => { | |||
| const usePagination = (defaultPage = 1) => { | |||
There was a problem hiding this comment.
사실 이 부분이 0으로 처리되고, 해당 훅 호출 부에서 +1을 해서 사용하는 방식이 많길래 건들면 파장이 클까바 냅두고 있었어요!
시작 페이지가 1이기 때문에 수정된 방식이 더 직관적인거 같네요~ 아주 좋습니다
src/components/molecules/SearchTalkPickList/SearchTalkPickList.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 0
🔭 Outside diff range comments (1)
src/stories/organisms/SearchTalkPickResult.stories.tsx (1)
Line range hint
8-17: 샘플 데이터의 개선이 필요합니다.현재 모든 아이템의
id가 0으로 고정되어 있습니다. 실제 사용 사례를 더 잘 반영하기 위해 다음과 같이 개선하는 것이 좋겠습니다.const SearchTalkPickItems: SearchTalkPickListItem[] = Array.from( { length: 4 }, (_, index) => ({ - id: 0, + id: index + 1, title: `톡픽 ${index + 1} - 월클 정국 VS 존잘 차은우`, createdAt: '2024.08.26', content: '우하하우하하 내용입니다.', firstImgUrl: SampleWhole, keyword: '정국', isLoading: false, }), );
🧹 Nitpick comments (5)
src/components/molecules/SearchTalkPickList/SearchTalkPickList.tsx (1)
20-22: 클릭 핸들러 구현이 깔끔합니다.톡픽 아이템 클릭 시 해당 상세 페이지로 이동하는 로직이 명확하게 구현되어 있습니다. 다만, 다음 사항들을 고려해보시면 좋을 것 같습니다:
- 잘못된 talkPickId가 전달될 경우에 대한 방어 로직 추가
- 페이지 이동 전 사용자 입력 데이터 저장 여부 확인
Also applies to: 34-34
src/components/organisms/SearchGameResult/SearchGameResult.tsx (1)
Line range hint
31-40: 로딩 상태 처리가 적절합니다.스켈레톤 UI를 사용한 로딩 상태 처리가 사용자 경험을 향상시키는데 도움이 될 것 같습니다. 다만, 스켈레톤 카운트(9개)를 상수로 분리하는 것을 고려해보시면 좋을 것 같습니다.
+ const SKELETON_COUNT = 9; if (isLoading) { return ( <div css={S.container}> <div css={S.titleWrapper}> <div>밸런스게임</div> <MoreButton onClick={handleButtonClick} /> </div> <div css={S.contentWRapper}> - <SearchResultCardSkeleton count={9} /> + <SearchResultCardSkeleton count={SKELETON_COUNT} /> </div> </div> ); }src/stories/organisms/SearchTalkPickListSection.stories.tsx (1)
31-34: 샘플 데이터의 id 값 개선이 필요합니다현재 모든 샘플 데이터의
id가 0으로 설정되어 있습니다. 실제 사용 사례를 더 잘 반영하기 위해 고유한 id 값을 사용하는 것이 좋습니다.const searchTalkPickSample: SearchTalkPickListItem[] = Array.from( { length: 20 }, (_, index) => ({ - id: 0, + id: index + 1, title: `톡픽 ${index + 1} - 인기 순위`,src/components/organisms/SearchTalkPickListSection/SearchTalkPickListSection.tsx (1)
Line range hint
31-45: 로딩 상태의 사용자 경험을 개선할 수 있습니다.현재 스켈레톤 UI가 고정된 길이(10)로 구현되어 있습니다. 실제 데이터의 예상 길이나 이전 페이지의 데이터 길이를 기반으로 동적으로 조정하는 것이 더 자연스러울 수 있습니다.
- <SearchResultListSkeleton length={10} /> + <SearchResultListSkeleton length={Math.min(searchTalkPickList.length || 10, 10)} />src/stories/molecules/SearchTalkPickList.stories.tsx (1)
58-67: 테스트 케이스를 더 다양화하면 좋을 것 같습니다.현재 스토리는 기본적인 케이스들을 잘 커버하고 있지만, 다음과 같은 엣지 케이스들을 추가하면 좋을 것 같습니다:
- 매우 긴 제목이나 내용
- 이미지가 없는 경우
- 키워드가 없는 경우
Also applies to: 77-80, 90-90
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (14)
src/components/atoms/SearchTalkPickItem/SearchTalkPickItem.tsx(3 hunks)src/components/molecules/SearchGameList/SearchGameList.tsx(2 hunks)src/components/molecules/SearchTalkPickList/SearchTalkPickList.tsx(2 hunks)src/components/organisms/SearchGameListSection/SearchGameListSection.tsx(1 hunks)src/components/organisms/SearchGameResult/SearchGameResult.tsx(1 hunks)src/components/organisms/SearchTalkPickListSection/SearchTalkPickListSection.tsx(2 hunks)src/components/organisms/SearchTalkPickResult/SearchTalkPickResult.tsx(2 hunks)src/components/organisms/TalkPickSection/TalkPickSection.tsx(3 hunks)src/stories/molecules/ActionBox.stories.tsx(2 hunks)src/stories/molecules/SearchTalkPickList.stories.tsx(4 hunks)src/stories/organisms/SearchTalkPickListSection.stories.tsx(4 hunks)src/stories/organisms/SearchTalkPickResult.stories.tsx(1 hunks)src/stories/organisms/SideBar.stories.tsx(2 hunks)src/types/search.ts(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (3)
- src/components/organisms/TalkPickSection/TalkPickSection.tsx
- src/components/atoms/SearchTalkPickItem/SearchTalkPickItem.tsx
- src/components/molecules/SearchGameList/SearchGameList.tsx
🔇 Additional comments (16)
src/types/search.ts (3)
3-4: GameItem에서 GameListItem으로의 인터페이스 이름 변경과 id를 gameSetId로 변경한 것이 적절해 보입니다.
이름이 더 명확해졌고, PR 목표에 언급된 게임 ID 관련 문제를 해결하는데 도움이 될 것 같습니다.
Line range hint 12-18: 인터페이스 이름이 더 명확해졌습니다.
SearchTalkPickItem에서 SearchTalkPickListItem으로의 변경이 컴포넌트의 용도를 더 잘 반영합니다.
22-22: Result 인터페이스들의 content 타입이 새로운 인터페이스명과 일관성있게 업데이트되었습니다.
TalkPickResult와 GameResult 인터페이스의 변경사항이 전체적인 타입 시스템의 일관성을 잘 유지하고 있습니다.
Also applies to: 27-27
src/stories/molecules/ActionBox.stories.tsx (1)
14-20: Storybook 데코레이터에 라우팅 컨텍스트가 적절히 추가되었습니다.
BrowserRouter 데코레이터 추가로 스토리북 환경에서 라우팅 기능을 테스트할 수 있게 되었습니다.
src/stories/organisms/SearchTalkPickResult.stories.tsx (1)
3-3: 타입 정의가 새로운 인터페이스와 일치하도록 잘 수정되었습니다.
SearchTalkPickListItem 타입으로의 변경이 일관성있게 적용되었습니다.
Also applies to: 8-8
src/components/molecules/SearchTalkPickList/SearchTalkPickList.tsx (1)
2-5: 타입 변경 및 라우팅 구현이 적절합니다.
SearchTalkPickListItem 타입으로의 변경과 라우터 관련 의존성 추가가 검색 결과 페이지 리팩토링의 목적에 잘 부합합니다.
Also applies to: 10-10
src/components/organisms/SearchGameResult/SearchGameResult.tsx (1)
2-2: 타입 변경이 일관성 있게 적용되었습니다.
GameItem에서 GameListItem으로의 타입 변경이 검색 결과 페이지 전반의 리팩토링 방향과 일치합니다.
Also applies to: 12-12
src/components/organisms/SearchTalkPickResult/SearchTalkPickResult.tsx (2)
3-3: 타입 변경이 일관되게 적용되었습니다.
SearchTalkPickItemProps에서 SearchTalkPickListItem으로의 타입 변경이 다른 컴포넌트들과 일관성 있게 적용되었습니다.
Also applies to: 12-12
Line range hint 31-39: 로딩 상태 처리의 일관성 검토가 필요합니다.
SearchGameResult 컴포넌트와 유사하게 스켈레톤 UI를 사용하고 있으나, 스켈레톤의 길이가 다릅니다(4개 vs 9개). 두 컴포넌트 간의 로딩 상태 표시 방식을 일관되게 가져가는 것이 좋을 것 같습니다.
src/stories/organisms/SideBar.stories.tsx (1)
2-2: 라우팅 컨텍스트 추가 구현이 적절합니다
스토리북 컴포넌트에 라우팅 기능을 제공하기 위한 BrowserRouter 데코레이터 추가가 올바르게 구현되었습니다.
Also applies to: 16-22
src/components/organisms/SearchGameListSection/SearchGameListSection.tsx (1)
2-2: 타입 변경의 영향도 확인이 필요합니다
GameItem에서 GameListItem으로의 타입 변경이 적절해 보입니다. 다만, 이 변경이 다른 컴포넌트들에도 영향을 미칠 수 있으므로 확인이 필요합니다.
Also applies to: 13-13
src/stories/organisms/SearchTalkPickListSection.stories.tsx (2)
3-3: 라우팅 컨텍스트 추가가 적절합니다
스토리북 컴포넌트에 BrowserRouter 데코레이터 추가가 올바르게 구현되었습니다.
Also applies to: 15-21
47-47: 키워드 변경이 적절합니다
'예시 키워드'에서 '인기'로의 키워드 변경이 샘플 데이터의 내용과 일관성 있게 구현되었습니다.
src/components/organisms/SearchTalkPickListSection/SearchTalkPickListSection.tsx (1)
3-3: 타입 변경이 일관성 있게 적용되었습니다!
SearchTalkPickItemProps에서 SearchTalkPickListItem으로의 타입 변경이 다른 컴포넌트들과 잘 통일되어 있습니다.
Also applies to: 13-13
src/stories/molecules/SearchTalkPickList.stories.tsx (2)
11-22: 샘플 데이터 생성 방식이 효율적으로 개선되었습니다!
Array.from을 사용한 샘플 데이터 생성 방식이 코드의 간결성과 유지보수성을 높였습니다.
28-34: 스토리 설정이 실제 사용 환경과 잘 통합되었습니다.
BrowserRouter의 추가로 실제 라우팅 동작을 테스트할 수 있게 되었고, 기본 args 설정도 실제 사용 사례를 잘 반영하고 있습니다.
Also applies to: 39-40
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (1)
src/components/molecules/ContentsButton/ContentsButton.style.ts (1)
Line range hint
72-75: 키보드 접근성 개선이 잘 되었습니다!
:focus-visible추가로 키보드 사용자의 접근성이 향상되었습니다. 다만, 더 나은 시각적 피드백을 위해 다음과 같은 개선을 고려해보시는 건 어떨까요?&:focus-visible { - outline: 1px solid ${color.BK}; + outline: 2px solid ${color.MAIN}; outline-offset: 1px; }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
src/components/atoms/CategoryButton/CategoryButton.style.ts(1 hunks)src/components/atoms/SearchBar/SearchBar.tsx(1 hunks)src/components/molecules/ContentsButton/ContentsButton.style.ts(1 hunks)src/stories/organisms/SideBar.stories.tsx(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/components/atoms/SearchBar/SearchBar.tsx
🧰 Additional context used
🪛 eslint
src/stories/organisms/SideBar.stories.tsx
[error] 2-2: 'react-router-dom' imported multiple times.
(import/no-duplicates)
🔇 Additional comments (1)
src/components/molecules/ContentsButton/ContentsButton.style.ts (1)
70-70: 모바일 뷰의 border-radius 조정이 적절합니다!
작은 화면에서 더 세련된 UI를 제공할 수 있는 좋은 변경사항입니다.
| import { BrowserRouter } from 'react-router-dom'; | ||
| import type { Meta, StoryObj } from '@storybook/react'; | ||
| import { MemoryRouter } from 'react-router-dom'; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
중복 import 문을 통합해주세요
react-router-dom에서 가져오는 import를 하나의 구문으로 통합하는 것이 좋습니다.
다음과 같이 수정해주세요:
-import { BrowserRouter } from 'react-router-dom';
import type { Meta, StoryObj } from '@storybook/react';
-import { MemoryRouter } from 'react-router-dom';
+import { BrowserRouter, MemoryRouter } from 'react-router-dom';📝 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.
| import { BrowserRouter } from 'react-router-dom'; | |
| import type { Meta, StoryObj } from '@storybook/react'; | |
| import { MemoryRouter } from 'react-router-dom'; | |
| import { BrowserRouter, MemoryRouter } from 'react-router-dom'; | |
| import type { Meta, StoryObj } from '@storybook/react'; |
🧰 Tools
🪛 eslint
[error] 2-2: 'react-router-dom' imported multiple times.
(import/no-duplicates)
[error] 4-4: 'react-router-dom' imported multiple times.
(import/no-duplicates)
| decorators: [ | ||
| (Story) => ( | ||
| <BrowserRouter> | ||
| <Story /> | ||
| </BrowserRouter> | ||
| ), | ||
| ], |
There was a problem hiding this comment.
라우터 중복 사용 문제를 해결해주세요
현재 BrowserRouter와 MemoryRouter가 동시에 사용되고 있습니다. Storybook에서는 브라우저 히스토리와 독립적으로 동작하는 MemoryRouter를 사용하는 것이 더 적절합니다.
다음 두 가지 해결 방안 중 하나를 선택해주세요:
- BrowserRouter decorator를 제거하고 현재처럼 각 스토리에서 MemoryRouter를 사용:
- decorators: [
- (Story) => (
- <BrowserRouter>
- <Story />
- </BrowserRouter>
- ),
- ],- 또는 decorator를 MemoryRouter로 변경하고 개별 스토리의 MemoryRouter를 제거:
decorators: [
(Story) => (
- <BrowserRouter>
+ <MemoryRouter>
<Story />
- </BrowserRouter>
+ </MemoryRouter>
),
],첫 번째 방안을 추천드립니다. 각 스토리가 자체적으로 라우팅 컨텍스트를 제어하는 것이 테스트와 디버깅에 더 용이합니다.
| padding: '5px 45px 14px 45px', | ||
| borderRadius: '7px', | ||
| border: '0.35px solid #dedede', |
There was a problem hiding this comment.
💡 Codebase verification
디자인 시스템 변수 도입 권장
현재 테마 파일에 border-radius에 대한 디자인 토큰이 정의되어 있지 않습니다. 모바일 뷰의 스타일 변경은 적절해 보이나, 다음과 같은 개선사항을 제안드립니다:
- border-radius 값(7px)을 포함한 디자인 토큰을 Theme 객체에 추가하여 일관된 스타일 관리
- 현재 하드코딩된 값들(padding, border width 등)도 디자인 시스템 변수로 관리 권장
🔗 Analysis chain
모바일 뷰의 스타일 변경사항 검토 필요
모바일 화면에서의 카테고리 버튼 스타일 변경이 적절해 보입니다. 다만, 다음 사항들을 확인해 주시면 좋겠습니다:
- 다양한 모바일 기기에서 시각적 일관성 확인
- 디자인 시스템과의 정렬성 검토
다음 스크립트를 실행하여 디자인 시스템 변수 사용 여부를 확인해 주세요:
Let's first try to find any design system related files and their content to make a more informed decision about the usage of design tokens or theme variables.
Let's check the theme file content to see if there are any predefined border-radius values that should be used instead of magic numbers.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: 디자인 시스템에서 정의된 border-radius 값들을 검색합니다.
# styles 디렉토리에서 border-radius 관련 상수 검색
rg -i "border.*radius|radius" src/styles/
Length of output: 43
Script:
#!/bin/bash
# Search for any design system or theme related files
fd -e ts -e js "theme|styles|constants" src/
# Then search for border-radius or design tokens in the found files
rg -i "border.*radius|radius|theme" src/ -A 2 -B 2
Length of output: 79331
Script:
#!/bin/bash
# Let's check if there are any design tokens or theme variables for border-radius
cat src/styles/theme.ts
Length of output: 1596
|
💡 작업 내용
💡 자세한 설명
✅ SearchTalkPickItem
display: flex스타일 때문에 톡픽의 내용이 한 줄로 출력되지 않던 문제를display: inline으로 수정하여 해결했습니다.✅ 게임 검색 관련
✅ TalkPickSection
✅ usePagination
-.Clipchamp.4.mp4
📗 참고 자료 (선택)
📢 리뷰 요구 사항 (선택)
🚩 후속 작업 (선택)
✅ 셀프 체크리스트
closes #260
Summary by CodeRabbit
신규 기능
SearchTalkPickItem컴포넌트.SearchTalkPickList와SearchGameList의 데이터 구조 변경 및 상호작용 개선.버그 수정
스타일
CategoryButton의 패딩 및 테두리 반경 조정.문서화