Conversation
Walkthrough여러 UI 레이아웃/스타일 조정과 사소한 문법 오류 수정이 포함됨. 최근검색 제어 흐름을 일부 변경해 삭제 후 재조회 및 상태 전환(idle) 시 재조회가 이루어지도록 함. 헤더 최대 너비를 767px로 통일하고, 일부 컴포넌트의 높이/패딩/마진을 조정함. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor U as User
participant US as UserSearch Page
participant S as RecentSearchService(API)
U->>US: 페이지 진입 / 검색 해제 상태(isSearched=false)
alt isSearched=false
US->>S: fetchRecentSearches()
S-->>US: 최근검색 목록
end
U->>US: 최근검색 항목 삭제
US->>S: deleteRecentSearch(id)
S-->>US: 삭제 성공
US->>S: fetchRecentSearches() (await)
S-->>US: 최신 목록 반환
sequenceDiagram
autonumber
actor U as User
participant GS as GroupSearch Page
participant S as RecentSearchService(API)
U->>GS: 검색 종료/리셋으로 searchStatus='idle'
GS->>S: fetchRecentSearches()
S-->>GS: 최근검색 목록 업데이트
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Tip 🔌 Remote MCP (Model Context Protocol) integration is now available!Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats. ✨ Finishing Touches
🧪 Generate unit tests
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
![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
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
src/pages/groupSearch/GroupSearch.tsx (1)
64-71: fetchRecentSearches 안정화(useCallback) 및 초기 이펙트와 역할 통합 제안함수를 useCallback으로 감싸 deps에 안전하게 넣을 수 있게 하세요. 이후 46-55 초기 조회 이펙트는 제거하고 본 로직만 유지해도 초기 'idle'에서 한 번만 호출됩니다.
적용 예:
-const fetchRecentSearches = async () => { +const fetchRecentSearches = useCallback(async () => { try { const response = await getRecentSearch('ROOM'); setRecentSearches(response.isSuccess ? response.data.recentSearchList : []); } catch { setRecentSearches([]); } -}; +}, []);초기 이펙트 제거(권장):
- useEffect(() => { - (async () => { - try { - const response = await getRecentSearch('ROOM'); - setRecentSearches(response.isSuccess ? response.data.recentSearchList : []); - } catch { - setRecentSearches([]); - } - })(); - }, []);src/components/group/Modal.styles.ts (1)
4-19: Overlay padding(56px) + Modal height(100vh) 합으로 56px 오버플로우 발생현재 Overlay에 padding-top: 56px가 추가된 반면 Modal은 height: 100vh를 유지하고 있어, 실제 렌더 높이가 100vh + 56px이 되어 빈 화면에서도 세로 스크롤이 생길 수 있습니다. 또한 Overlay가 세로 중앙 정렬(center)이라 헤더 오프셋 의도와도 상충합니다.
권장 수정:
export const Overlay = styled.div<{ $whiteBg?: boolean }>` display: flex; justify-content: center; - align-items: center; + align-items: flex-start; position: fixed; top: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 767px; min-width: 320px; padding-top: 56px; min-height: 100vh; background: ${({ $whiteBg }) => ($whiteBg ? 'white' : colors.black.main)}; z-index: 110; `; export const Modal = styled.div` display: flex; flex-direction: column; background: ${colors.black.main}; width: 100%; max-width: 767px; - height: 100vh; + /* 헤더 오프셋을 고려한 높이 계산 */ + min-height: calc(100vh - 56px); + /* 지원 브라우저에서 동적 뷰포트 단위 사용 권장 */ + /* min-height: calc(100dvh - 56px); */ `;Also applies to: 21-28
🧹 Nitpick comments (15)
src/components/common/TitleHeader.tsx (1)
10-14: 매직 넘버(767px) 테마 토큰으로 추출 제안전체 코드베이스에서
max-width: 767px가 50여 곳 이상 사용되고 있어, 추후 변경 시 드리프트가 발생할 위험이 높습니다.theme/global에 단일 토큰으로 정의하여 일관되게 사용하는 것을 권장드립니다.
발견 위치 요약
src/pages/및src/components/하위.tsx,.styled.ts파일 다수- 예시:
src/components/common/TitleHeader.tsx:10src/components/common/Wrapper.tsx:10src/pages/Guide.tsx:218, 239, 308
(총 50여 건)제안하는 토큰 정의 (예시,
theme/global.ts또는theme/breakpoints.ts등)export const breakpoints = { tabletMax: '767px', // ...다른 브레이크포인트 };적용 예시 (TitleHeader.tsx)
/* before */max-width: 767px;
- max-width: ${theme.breakpoints.tabletMax};
margin: 0 auto;
padding: 16px 20px;
background-color: ${colors.black.main};</blockquote></details> <details> <summary>src/components/search/MostSearchedBooks.tsx (1)</summary><blockquote> `111-122`: **접근성 소소한 개선 제안(키보드 포커스 가능하도록)** 클릭 가능한 li에 role="button", tabIndex=0을 부여하면 키보드 접근성이 개선됩니다. 필요 시 적용 검토 부탁드립니다. </blockquote></details> <details> <summary>src/components/common/BookSearchBottomSheet/BookSearchBottomSheet.styled.ts (1)</summary><blockquote> `165-173`: **`background-color: none`는 유효하지 않습니다 → `transparent`로 교체** 현재 값은 무시되어 의도와 다를 수 있습니다. 다음으로 교체 제안: ```diff export const BookItem = styled.div` display: flex; align-items: center; padding: 12px 2px; - background-color: none; + background-color: transparent; cursor: pointer; transition: background-color 0.2s ease; border-bottom: 1px solid ${colors.grey[400]};src/components/search/SearchBar.tsx (1)
48-56: 중복 width 선언 제거 제안
width: 100%와width: calc(100% - 40px)가 중복입니다. 후자가 적용되므로 전자를 제거해 가독성 향상하세요.다음 변경 제안:
const SearchBarWrapper = styled.div` display: flex; align-items: center; - width: 100%; height: 40px; background-color: var(--color-darkgrey-main); border-radius: 12px; width: calc(100% - 40px); margin: 16px 20px;src/components/group/RecruitingGroupBox.tsx (3)
69-76:height: 100%필요성 재확인 요청상위 컨테이너가
min-height: 100vh(Group.tsx)인 상태에서, 여기height: 100%는 예상치 못한 스크롤/클리핑을 만들 수 있습니다. 의도대로면 제거하거나 레이아웃 문맥(부모 flex 등)에 따라flex: 1사용을 고려하세요.검증 포인트:
- 모바일(375/390px)에서 빈 상태(groups=[]): 헤더 제외 화면 높이 이내에 수렴하는지
- iOS 사파리에서 1px 잔여 스크롤 발생 여부
131-140: 빈 상태 높이 고정 → 최소 높이 권장
height: 133px+padding: 60px로 실제 점유가 커집니다. 콘텐츠 증감에 유연하도록min-height가 적합합니다.다음 변경 제안:
const EmptyContent = styled.div` display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px; - height: 133px; + min-height: 133px; padding: 60px 20px; grid-column: 1 / -1; `
22-25: 정수 변환 시 명시적 형태 사용 권장
parseInt는 진법 누락/공백에 민감합니다.Number()또는parseInt(..., 10)로 명시하는 편이 안전합니다.다음처럼 교체 제안:
- const roomId = typeof groupId === 'string' ? parseInt(groupId) : groupId; + const roomId = typeof groupId === 'string' ? Number(groupId) : groupId;src/components/group/RecruitingGroupCarousel.tsx (1)
110-116: 고정 높이 제거로 카드 간 높이 불일치 시 스냅/레イ아웃 점프 가능성콘텐츠 길이에 따라 카드 높이가 달라지면 scroll-snap 구간에서 시각적 점프가 생길 수 있습니다. 최소 높이나 비율을 고정해 일관성을 확보하는 것을 권장합니다.
예시:
const Item = styled.div` flex: 0 0 90%; max-width: 640px; scroll-snap-align: center; transition: transform 0.2s; - /* height: 800px; */ + /* 고정 높이 대신 일관된 세로 영역 보장 */ + /* 카드 비율에 맞게 조정하세요 */ + aspect-ratio: 8 / 11; + /* 또는 */ + /* min-height: 360px; */ `;src/pages/groupSearch/GroupSearch.tsx (2)
57-62: 초기 마운트 시 중복 조회 가능성 및 deps 누락기본 상태가 'idle'이라 46-55의 초기 조회와 본 이펙트가 동시에 실행되어 중복 호출될 수 있습니다. 또한 fetchRecentSearches가 deps에 없어 ESLint 경고/의도치 않은 재실행이 생길 수 있습니다.
적용 예:
-// searchStatus가 'idle'로 변경될 때 최근 검색어 새로고침 -useEffect(() => { - if (searchStatus === 'idle') { - fetchRecentSearches(); - } -}, [searchStatus]); +// searchStatus가 'idle'로 변경될 때 최근 검색어 새로고침 +useEffect(() => { + if (searchStatus !== 'idle') return; + fetchRecentSearches(); +}, [searchStatus, fetchRecentSearches]);그리고 fetchRecentSearches를 안정화하세요(아래 코멘트 참고).
40-41: 브라우저/Node 호환 setTimeout 타입 개선NodeJS.Timeout은 브라우저 환경에서 타입 충돌을 일으킬 수 있습니다. ReturnType으로 교체하세요.
-const [searchTimeoutId, setSearchTimeoutId] = useState<NodeJS.Timeout | null>(null); +const [searchTimeoutId, setSearchTimeoutId] = useState<ReturnType<typeof setTimeout> | null>(null);src/pages/search/Search.tsx (1)
338-347: 헤더/검색바 고정 높이 하드코딩으로 margin-top(132px) 유지보수 비용 증가Header 56px, SearchBarContainer top 56px은 명시되어 있으나, Content의 margin-top 132px은 이 값들과 연동되지 않아 향후 디자인 변경 시 겹침/여백 과다 위험이 있습니다. 상수화하거나 calc 조합으로 의존성을 드러내세요.
예시:
+const HEADER_H = 56; +const SEARCHBAR_BLOCK_H = 76; // SearchBar 실제 높이+여백에 맞게 조정 ... const Header = styled.div` ... - height: 56px; + height: ${HEADER_H}px; ... `; const SearchBarContainer = styled.div` position: fixed; - top: 56px; + top: ${HEADER_H}px; ... `; const Content = styled.div` - margin-top: 132px; + margin-top: ${HEADER_H + SEARCHBAR_BLOCK_H}px; `;변경 후 실제 SearchBar 높이에 맞게 SEARCHBAR_BLOCK_H를 조정해 겹침이 없는지 한 번만 확인해주세요.
Also applies to: 349-357
src/pages/group/Group.tsx (1)
107-113: 헤더 오버랩 방지와 스크롤 개선 의도는 적절합니다. 다만 56px 매직 넘버/모바일 100vh 보완을 권장합니다.flex-start 정렬, min-height 전환, padding-top으로 의도한 문제는 해소될 것으로 보입니다. 반복되는 56px은 전역 CSS 변수(또는 theme 토큰)로 통일하고, iOS Safari 100vh 이슈를 고려해 100dvh 사용을 제안드립니다.
다음과 같이 변경 검토 부탁드립니다(제안):
- min-height: 100vh; + min-height: 100dvh; - padding-top: 56px; + padding-top: var(--header-height, 56px);실단말(iOS Safari/Android Chrome)에서 “컨텐츠 없음” 상태로 스크롤 잔여 공간이 재발하지 않는지 확인 부탁드립니다.
src/pages/feed/UserSearch.tsx (3)
47-50: isSearched 전환 시점에만 최근검색 재조회 — 과호출 방지 의도는 적절합니다. hooks 의존성 경고 대비 보완 제안현재 흐름은 검색 종료(또는 초기 상태)에서만 재조회되어 효율적입니다. 다만 react-hooks/exhaustive-deps 경고를 피하려면 fetchRecentSearches를 useCallback으로 감싸고 의존성에 포함하는 방식을 권장합니다.
제안 변경:
- }, [isSearched]); + }, [isSearched, fetchRecentSearches]);컴포넌트 상단의 fetchRecentSearches 정의는 다음과 같이 감싸주세요(참고용, 범위 밖 코드):
const fetchRecentSearches = useCallback(async () => { try { const response = await getRecentSearch('USER'); setRecentSearches(response.isSuccess ? response.data.recentSearchList : []); } catch { setRecentSearches([]); } }, []);ESLint 실행 시 경고 유무 확인 부탁드립니다.
69-71: 삭제 후 즉시 반영 + 비동기 동기화로 UX 개선을 제안합니다삭제 성공 시 서버 재조회로 동기화하는 접근은 안전합니다. 사용자 체감 지연을 줄이기 위해 로컬 리스트를 먼저 낙관적으로 갱신하고, 서버 재조회는 기다리지 않고 비동기로 처리하는 방식을 권장합니다.
다음처럼 수정을 고려해 주세요:
- // 삭제 성공 후 최근 검색어 리스트를 다시 호출 - await fetchRecentSearches(); + // 1) 즉시 로컬 반영 + setRecentSearches(prev => prev.filter(v => v.recentSearchId !== recentSearchId)); + // 2) 서버와 비동기 동기화 + void fetchRecentSearches();동시 다중 삭제 시 중복 호출/경합이 없는지 한 번 더 확인 부탁드립니다.
170-170: 헤더 높이 56px 하드코딩 → 전역 상수/변수로 통일 관리 권장여러 페이지에서 56px이 반복됩니다. 전역 CSS 변수나 theme 토큰으로 치환해 유지보수성을 높이는 것을 권장합니다.
제안:
- top: 56px; + top: var(--header-height, 56px);(참고) Group.tsx의 padding-top, Search.tsx 등도 동일 변수로 정리하면 수정 범위를 줄일 수 있습니다.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (12)
src/components/common/BookSearchBottomSheet/BookSearchBottomSheet.styled.ts(1 hunks)src/components/common/TitleHeader.tsx(1 hunks)src/components/group/Modal.styles.ts(1 hunks)src/components/group/RecruitingGroupBox.tsx(2 hunks)src/components/group/RecruitingGroupCarousel.tsx(1 hunks)src/components/search/MostSearchedBooks.tsx(1 hunks)src/components/search/SearchBar.tsx(1 hunks)src/pages/Guide.tsx(1 hunks)src/pages/feed/UserSearch.tsx(3 hunks)src/pages/group/Group.tsx(1 hunks)src/pages/groupSearch/GroupSearch.tsx(1 hunks)src/pages/search/Search.tsx(2 hunks)
🔇 Additional comments (5)
src/components/common/TitleHeader.tsx (1)
10-14: 굿: max-width 767px로 정렬됨다른 화면(Guide·Search 등)과 일관성 확보. 부작용 없어 보입니다.
src/components/search/MostSearchedBooks.tsx (1)
81-84: 여백 조정 OK헤더 56px 체계와 시각적으로 맞습니다. 이 변경 자체로는 사이드이펙트 없어 보입니다.
src/components/common/BookSearchBottomSheet/BookSearchBottomSheet.styled.ts (1)
251-257: 문법 오류 수정 👍불필요한
};제거로 유효 CSS가 되었습니다.src/components/search/SearchBar.tsx (1)
55-56: 마진 축약 OK헤더·컨테이너 오프셋 체계와 충돌 없어 보입니다.
src/pages/Guide.tsx (1)
239-240: max-width 767px 정합성 맞춤 LGTM앱 전반의 컨테이너 max-width(767px)와 일치하도록 정리된 점 좋습니다.
1 participant
#️⃣연관된 이슈
없음
📝작업 내용
https://github.com/user-attachments/assets/3acc4336-e1f7-47ca-8c6e-d29e7bfcb7b7
💬리뷰 요구사항
없음
Summary by CodeRabbit
스타일
버그 수정