Conversation
- CountingBar.styled.ts 파일 생성 - styled 컴포넌트를 별도 파일로 분리하여 코드 구조 개선
This reverts commit bf9cc68. - 담당 task 변경
- AIWrite.styled.ts 파일 생성 - styled 컴포넌트를 별도 파일로 분리하여 코드 구조 개선
- Feed.styled.ts 파일 생성 - styled 컴포넌트를 별도 파일로 분리하여 코드 구조 개선
- FeedDetailPage.styled.ts 파일 생성 - styled 컴포넌트를 별도 파일로 분리하여 코드 구조 개선
- FollowerListPage.styled.ts 파일 생성 - styled 컴포넌트를 별도 파일로 분리하여 코드 구조 개선
- MyFeedPage.styled.ts 파일 생성 - OtherFeedPage의 중복된 스타일을 재활용 - styled 컴포넌트를 별도 파일로 분리하여 코드 구조 개선
- UserSearch.styled.ts 파일 생성 - styled 컴포넌트를 별도 파일로 분리하여 코드 구조 개선
- Group.styled.ts 파일 생성 - styled 컴포넌트를 별도 파일로 분리하여 코드 구조 개선
- ParticipatedGroupDetail.styled.ts 파일 생성 - styled 컴포넌트를 별도 파일로 분리하여 코드 구조 개선
- GroupSearch.styled.ts 파일 생성 - styled 컴포넌트를 별도 파일로 분리하여 코드 구조 개선
- Login.styled.ts 파일 생성 - 불필요한 import 제거 - styled 컴포넌트를 별도 파일로 분리하여 코드 구조 개선
- Mypage.styled.ts 파일 생성 - styled 컴포넌트를 별도 파일로 분리하여 코드 구조 개선
- WithdrawPage.styled.ts 파일 생성 - WithdrawDonePage.styled.ts 파일 생성 - styled 컴포넌트를 별도 파일로 분리하여 코드 구조 개선
- AlertPage.styled.ts 파일 생성 - styled 컴포넌트를 별도 파일로 분리하여 코드 구조 개선
- SavePage.styled.ts 파일 생성 - styled 컴포넌트를 별도 파일로 분리하여 코드 구조 개선
- Notice.styled.ts 파일 생성 - styled 컴포넌트를 별도 파일로 분리하여 코드 구조 개선
- Search.styled.ts 파일 생성 - ApplyBook.styled.ts 파일 생성 - styled 컴포넌트를 별도 파일로 분리하여 코드 구조 개선
- SearchBook.styled.ts 파일 생성 - SearchBookGroup.styled.ts 파일 생성 - styled 컴포넌트를 별도 파일로 분리하여 코드 구조 개선
- Guide.styled.ts 파일 생성 - 일관성을 위해 Guide 폴더안으로 위치 이동 - styled 컴포넌트를 별도 파일로 분리하여 코드 구조 개선
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Walkthrough이 PR은 여러 페이지 컴포넌트에서 Emotion 기반의 인라인 styled 컴포넌트들을 분리해 각 페이지별 Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (2 warnings, 1 inconclusive)
✅ Passed checks (2 passed)
✨ Finishing touches
Warning Review ran into problems🔥 ProblemsErrors were encountered while retrieving linked issues. Errors (1)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/pages/mypage/Mypage.tsx (1)
119-132: 이미지에 alt 속성을 추가해주세요.프로필 이미지에 alt 속성이 누락되어 있어 스크린 리더 사용자의 접근성이 저하됩니다.
profile.nickname을 활용하여 의미 있는 대체 텍스트를 제공해주세요.🔎 접근성 개선을 위한 수정 제안
- <img src={profile.profileImageUrl} /> + <img src={profile.profileImageUrl} alt={`${profile.nickname}의 프로필 이미지`} />
🧹 Nitpick comments (22)
src/pages/group/Group.styled.ts (1)
18-35: AllRoomsButton 스타일링이 적절합니다.버튼의 기본 스타일이 잘 구성되어 있고 디자인 토큰을 올바르게 사용하고 있습니다.
선택적 개선사항으로, hover 및 focus 상태 스타일을 추가하면 사용자 경험을 더욱 향상시킬 수 있습니다:
🔎 호버/포커스 상태 추가 제안
export const AllRoomsButton = styled.div` display: flex; + align-items: center; position: relative; font-size: ${typography.fontSize.sm}; font-weight: ${typography.fontWeight.medium}; width: 83%; border-radius: 12px; padding: 14px 12px; margin-bottom: 12px; color: ${colors.white}; background-color: ${colors.darkgrey.main}; cursor: pointer; + transition: background-color 0.2s ease; + + &:hover { + background-color: ${colors.darkgrey.dark}; + } + > img { position: absolute; right: 5%; top: -2px; } `;src/pages/searchBook/SearchBookGroup.styled.ts (1)
51-62: 코드 중복을 공통 모듈로 추출하는 것을 고려해보세요.
EmptyTitle과EmptySubText컴포넌트가SearchBook.styled.ts에도 동일하게 정의되어 있습니다. 이를 공통 스타일 모듈(예:src/pages/searchBook/common.styled.ts)로 추출하면 중복을 제거하고 일관성을 유지할 수 있습니다.🔎 제안: 공통 스타일 컴포넌트 추출
새 파일
src/pages/searchBook/common.styled.ts를 생성:import styled from '@emotion/styled'; import { colors, typography } from '@/styles/global/global'; export const EmptyTitle = styled.p` font-size: ${typography.fontSize.lg}; font-weight: ${typography.fontWeight.semibold}; margin-bottom: 8px; color: ${colors.white}; `; export const EmptySubText = styled.p` font-size: ${typography.fontSize.sm}; font-weight: ${typography.fontWeight.regular}; color: ${colors.grey[100]}; `;그런 다음 두 파일에서 import:
+import { EmptyTitle, EmptySubText } from './common.styled'; -export const EmptyTitle = styled.p`...`; -export const EmptySubText = styled.p`...`;src/pages/search/Search.styled.ts (1)
44-46: Content 컴포넌트가 적절한 여백과 함께 정의되었습니다.고정된 헤더와 검색바 아래에 컨텐츠가 표시되도록 margin-top이 설정되어 있습니다.
💡 선택적 개선 제안: 매직 넘버 대신 계산된 값 사용
현재
margin-top: 132px는 헤더 높이(56px)와 검색바 높이의 합으로 보입니다. 향후 유지보수를 위해 상수로 분리하거나 주석을 추가하는 것을 고려해볼 수 있습니다:+// 56px (header) + 76px (search bar) export const Content = styled.div` margin-top: 132px; `;다만 현재 코드도 충분히 명확하므로 선택적입니다.
src/pages/feed/UserSearchResult.styled.ts (1)
29-42: 스타일 토큰 사용 방식을 통일하세요.
EmptyWrapper는 CSS 커스텀 프로퍼티(var(--color-text-primary_white, ...))를 사용하고 있지만, 같은 파일의 다른 컴포넌트들(ResultHeader등)은 import된 토큰(colors.white,typography.fontSize.*)을 사용하고 있습니다. 일관성을 위해 import된 토큰을 사용하는 것을 권장합니다.🔎 제안하는 수정안
export const EmptyWrapper = styled.div` display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; padding-top: 40%; - color: var(--color-text-primary_white, #fefefe); + color: ${colors.white}; text-align: center; - font-size: var(--string-size-large01, 18px); - font-weight: var(--string-weight-semibold, 600); - line-height: var(--string-lineheight-height24, 24px); + font-size: ${typography.fontSize.lg}; + font-weight: ${typography.fontWeight.semibold}; + line-height: 24px; `;src/pages/feed/Feed.styled.ts (1)
3-9: LGTM!Feed 페이지에 필요한 전체 높이와 배경색이 포함된 Container입니다.
여러 페이지에서 유사한 Container 패턴이 반복됩니다 (예:
min-width,max-width,margin: 0 auto). 향후 공통 레이아웃 컴포넌트로 추출하여 재사용성을 높이는 것을 고려해 보세요.src/pages/feed/Feed.tsx (1)
172-186: 불필요한 Fragment 제거 권장단일 자식 요소를 감싸는 Fragment(
<>...</>)는 불필요합니다.🔎 제안된 수정
{activeTab === '피드' ? ( - <> - <TotalFeed - showHeader={true} - posts={totalFeedPosts} - isMyFeed={false} - isLast={totalIsLast} - /> - </> + <TotalFeed + showHeader={true} + posts={totalFeedPosts} + isMyFeed={false} + isLast={totalIsLast} + /> ) : ( - <> - <MyFeed showHeader={false} posts={myFeedPosts} isMyFeed={true} isLast={myIsLast} /> - </> + <MyFeed showHeader={false} posts={myFeedPosts} isMyFeed={true} isLast={myIsLast} /> )}src/pages/aiwrite/AIWrite.tsx (1)
50-61: 에러 타입 처리 개선 권장현재 Axios 에러를 수동으로 타입 단언하고 있습니다.
axios의isAxiosError타입 가드를 사용하면 더 안전합니다.🔎 제안된 수정
import axios from 'axios'; // catch 블록 내에서: if (axios.isAxiosError(error) && error.response?.data?.message) { errorMessage = error.response.data.message; }src/pages/notice/Notice.tsx (1)
94-94: 불필요한 변수 할당
filteredNotifications가notifications를 그대로 할당하고 있습니다. 필터링 로직이 제거되었다면 이 변수를 제거하고notifications를 직접 사용하는 것이 좋습니다.🔎 제안된 수정
- const filteredNotifications = notifications; - const tabs = ['피드', '모임']; // ... 이후 코드에서 filteredNotifications를 notifications로 변경src/pages/feed/OtherFeedPage.tsx (1)
55-61: 사용자 경험 개선 고려로딩 및 에러 상태에서 빈 Fragment를 반환하면 사용자에게 아무런 피드백이 제공되지 않습니다. 이 PR의 범위 밖이지만, 향후 개선을 위해 로딩 스피너나 에러 메시지 표시를 고려해 보세요.
🔎 제안된 수정
if (loading) { - return <></>; + return ( + <Container> + <LoadingSpinner size="large" fullHeight={true} /> + </Container> + ); } if (error) { - return <></>; + return ( + <Container> + <ErrorMessage>{error}</ErrorMessage> + </Container> + ); }src/pages/feed/FeedDetailPage.styled.ts (1)
1-14: 테마 색상 시스템 사용을 권장합니다.하드코딩된 색상값
#121212대신 글로벌 테마의colors.black.main을 사용하면 일관성과 유지보수성이 향상됩니다. 같은 PR의 다른 styled 파일들(예:UserSearch.styled.ts)도 이 패턴을 따르고 있습니다.🔎 제안하는 수정 사항
import styled from '@emotion/styled'; +import { colors } from '@/styles/global/global'; export const Wrapper = styled.div` display: flex; position: relative; flex-direction: column; align-items: center; min-width: 320px; max-width: 767px; min-height: 100vh; padding-top: 56px; margin: 0 auto; - background-color: #121212; + background-color: ${colors.black.main}; `;src/pages/mypage/SavePage.styled.ts (2)
4-15: 디자인 토큰을 사용하여 일관성을 개선하세요.Line 14에서 하드코딩된 색상 값
#121212대신 이미 임포트된colors.black.main을 사용하는 것이 좋습니다. 동일한 파일의 다른 컴포넌트들도 디자인 토큰을 사용하고 있습니다.🔎 제안하는 수정
export const Wrapper = styled.div` display: flex; position: relative; flex-direction: column; align-items: center; padding-top: 130px; min-width: 320px; max-width: 767px; min-height: 100vh; margin: 0 auto; - background-color: #121212; + background-color: ${colors.black.main}; `;
55-64: 중복된 속성을 제거하세요.Line 58과 63에
width: 100%이 중복 선언되어 있습니다.🔎 제안하는 수정
export const BookList = styled.div` display: flex; flex-direction: column; width: 100%; min-width: 320px; max-width: 767px; padding-top: 32px; margin: 0 auto; - width: 100%; `;src/pages/notice/Notice.styled.ts (1)
118-126: 디자인 토큰을 사용하여 일관성을 유지하세요.Line 124에서 하드코딩된 색상 값
#ff9496대신 이미 임포트된colors.red를 사용하는 것이 좋습니다. 디자인 시스템에 정의된 동일한 색상 값이 존재합니다.🔎 제안하는 수정
export const UnreadDot = styled.div` position: absolute; top: 12px; right: 12px; width: 6px; height: 6px; - background-color: #ff9496; + background-color: ${colors.red}; border-radius: 50%; `;src/pages/mypage/AlertPage.styled.ts (1)
14-14: 디자인 토큰 사용을 권장합니다.하드코딩된 색상 값
#121212대신colors.black.main을 사용하여 디자인 시스템과의 일관성을 유지하세요.🔎 제안하는 수정
- background-color: #121212; + background-color: ${colors.black.main};src/pages/guide/Guide.styled.ts (1)
19-48: Header의activeprop이 사용되지 않습니다.
Header컴포넌트에active: booleanprop이 선언되어 있지만, 실제 스타일링에서는 사용되지 않고 있습니다. 불필요한 경우 제거하거나, 의도된 기능이 있다면 구현을 완료하세요.🔎 제안하는 수정
-export const Header = styled.div<{ active: boolean }>` +export const Header = styled.div`src/pages/mypage/WithdrawPage.styled.ts (3)
14-14: 디자인 토큰 사용을 권장합니다.하드코딩된 색상 값
#121212대신colors.black.main을 사용하여 디자인 시스템과의 일관성을 유지하세요.🔎 제안하는 수정
- background-color: #121212; + background-color: ${colors.black.main};
49-51: 디자인 토큰 사용을 권장합니다.
.danger클래스의 하드코딩된 색상 값#ff9496대신colors.red를 사용하여 디자인 시스템과의 일관성을 유지하세요.🔎 제안하는 수정
.danger { - color: #ff9496; + color: ${colors.red}; }
69-79: Checkbox의checkedprop이 사용되지 않습니다.
Checkbox컴포넌트에checked: booleanprop이 선언되어 있지만, 실제 스타일링에서는 사용되지 않고 있습니다. 체크 상태에 따른 스타일 변경이 필요한 경우 구현을 완료하거나, 불필요한 경우 prop을 제거하세요.🔎 제안하는 수정 (prop이 불필요한 경우)
-export const Checkbox = styled.div<{ checked: boolean }>` +export const Checkbox = styled.div`또는 체크 상태 스타일링이 필요한 경우:
export const Checkbox = styled.div<{ checked: boolean }>` width: 30px; height: 30px; - border: 2px solid ${colors.grey[200]}; + border: 2px solid ${props => (props.checked ? colors.purple.main : colors.grey[200])}; + background-color: ${props => (props.checked ? colors.purple.main : 'transparent')}; border-radius: 8px; - background-color: transparent; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; `;src/pages/feed/FollowerListPage.syled.ts (1)
15-29: width 계산 방식 개선을 고려해보세요.TotalBar의
width: 94.8%는 매직 넘버로, 유지보수성을 저해할 수 있습니다. 부모 요소의 padding을 고려한 계산으로 보이지만, CSS 변수나calc()함수를 사용하면 의도가 더 명확해집니다.🔎 개선 제안
export const TotalBar = styled.div` position: fixed; top: 0; - width: 94.8%; + width: calc(100% - 40px); /* 좌우 padding 20px * 2 */ max-width: 727px; min-width: 320px; padding: 76px 0px 4px 0px; border-bottom: 1px solid var(--color-darkgrey-dark); background-color: var(--color-black-main); color: var(--color-grey-100); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); line-height: 24px; `;src/pages/mypage/Mypage.tsx (1)
145-152: 버전 정보를 상수로 관리하는 것을 고려해보세요.버전 번호가 하드코딩되어 있어 매 릴리스마다 수동으로 업데이트해야 합니다. 별도 상수로 추출하거나
package.json의 version을 활용하면 유지보수가 용이합니다.🔎 상수 추출 예시
파일 상단에 상수 정의:
const APP_VERSION = '1.3.0';사용:
- <MenuButton src={ver} name="버젼 1.3.0" isButton onClick={handleVersion} /> + <MenuButton src={ver} name={`버젼 ${APP_VERSION}`} isButton onClick={handleVersion} />src/pages/mypage/Mypage.styled.ts (2)
4-14: 디자인 토큰 사용을 권장합니다.Line 13에서 배경색이 하드코딩되어 있습니다. 이미 import된
colors.black.main을 사용하면 디자인 시스템의 일관성을 유지할 수 있습니다.🔎 디자인 토큰 적용 제안
- background-color: #121212; + background-color: ${colors.black.main};
36-89: 디자인 토큰 사용을 일관되게 통일해주세요.이 컴포넌트에서 CSS 커스텀 프로퍼티(
var(--color-...,var(--string-...))와 import된 디자인 토큰(colors,typography)이 혼재되어 있습니다. 파일 내 다른 컴포넌트들은 import된 토큰을 사용하고 있으므로, 일관성을 위해 이 컴포넌트도 동일한 방식으로 통일하는 것을 권장합니다.특히 Line 81의 하드코딩된
#888은colors.grey[300]으로 대체 가능합니다.🔎 일관된 토큰 사용 제안
주요 변경 예시:
img { width: 54px; height: 54px; border-radius: 54px; - border: 0.5px solid var(--color-white); + border: 0.5px solid ${colors.white}; } .user { display: flex; flex-direction: column; gap: 4px; .username { - color: var(--color-text-primary_white, #fefefe); - font-size: var(--string-size-large01, 18px); - font-weight: var(--string-weight-semibold, 600); - line-height: var(--string-lineheight-height24, 24px); + color: ${colors.white}; + font-size: ${typography.fontSize.lg}; + font-weight: ${typography.fontWeight.semibold}; + line-height: 24px; letter-spacing: 0.018px; } .usertitle { - font-size: var(--string-size-medium01, 14px); - font-weight: var(--string-weight-regular, 400); - line-height: var(--string-lineheight-feedcontent_height20, 20px); + font-size: ${typography.fontSize.sm}; + font-weight: ${typography.fontWeight.regular}; + line-height: 20px; } } } .edit { padding: 8px 12px; border-radius: 20px; - border: 1px solid #888; + border: 1px solid ${colors.grey[300]}; - color: var(--color-text-secondary_grey00, #dadada); - font-size: var(--string-size-medium01, 14px); - font-weight: var(--string-weight-medium, 500); + color: ${colors.grey[100]}; + font-size: ${typography.fontSize.sm}; + font-weight: ${typography.fontWeight.medium}; line-height: normal; cursor: pointer; }
📜 Review details
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Jira integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (46)
src/pages/aiwrite/AIWrite.styled.tssrc/pages/aiwrite/AIWrite.tsxsrc/pages/feed/Feed.styled.tssrc/pages/feed/Feed.tsxsrc/pages/feed/FeedDetailPage.styled.tssrc/pages/feed/FeedDetailPage.tsxsrc/pages/feed/FollowerListPage.syled.tssrc/pages/feed/FollowerListPage.tsxsrc/pages/feed/MyFeedPage.styled.tssrc/pages/feed/MyFeedPage.tsxsrc/pages/feed/OtherFeedPage.tsxsrc/pages/feed/UserSearch.styled.tssrc/pages/feed/UserSearch.tsxsrc/pages/feed/UserSearchResult.styled.tssrc/pages/feed/UserSearchResult.tsxsrc/pages/group/Group.styled.tssrc/pages/group/Group.tsxsrc/pages/groupDetail/ParticipatedGroupDetail.styled.tssrc/pages/groupDetail/ParticipatedGroupDetail.tsxsrc/pages/groupSearch/GroupSearch.styled.tssrc/pages/groupSearch/GroupSearch.tsxsrc/pages/guide/Guide.styled.tssrc/pages/guide/Guide.tsxsrc/pages/index.tsxsrc/pages/login/Login.styled.tssrc/pages/login/Login.tsxsrc/pages/mypage/AlertPage.styled.tssrc/pages/mypage/AlertPage.tsxsrc/pages/mypage/Mypage.styled.tssrc/pages/mypage/Mypage.tsxsrc/pages/mypage/SavePage.styled.tssrc/pages/mypage/SavePage.tsxsrc/pages/mypage/WithdrawDonePage.styled.tssrc/pages/mypage/WithdrawDonePage.tsxsrc/pages/mypage/WithdrawPage.styled.tssrc/pages/mypage/WithdrawPage.tsxsrc/pages/notice/Notice.styled.tssrc/pages/notice/Notice.tsxsrc/pages/search/ApplyBook.styled.tssrc/pages/search/ApplyBook.tsxsrc/pages/search/Search.styled.tssrc/pages/search/Search.tsxsrc/pages/searchBook/SearchBook.styled.tssrc/pages/searchBook/SearchBook.tsxsrc/pages/searchBook/SearchBookGroup.styled.tssrc/pages/searchBook/SearchBookGroup.tsx
🧰 Additional context used
🧬 Code graph analysis (16)
src/pages/feed/UserSearch.styled.ts (2)
src/pages/feed/UserSearchResult.styled.ts (1)
Wrapper(4-10)src/styles/global/global.ts (1)
colors(4-53)
src/pages/groupSearch/GroupSearch.styled.ts (1)
src/styles/global/global.ts (2)
colors(4-53)typography(56-77)
src/pages/mypage/WithdrawDonePage.styled.ts (2)
src/pages/mypage/WithdrawPage.styled.ts (1)
Container(17-25)src/styles/global/global.ts (2)
colors(4-53)typography(56-77)
src/pages/feed/Feed.styled.ts (1)
src/pages/signup/Signup.styled.ts (1)
Container(3-177)
src/pages/group/Group.styled.ts (1)
src/styles/global/global.ts (2)
colors(4-53)typography(56-77)
src/pages/searchBook/SearchBook.styled.ts (1)
src/styles/global/global.ts (2)
colors(4-53)typography(56-77)
src/pages/search/ApplyBook.styled.ts (1)
src/styles/global/global.ts (2)
colors(4-53)typography(56-77)
src/pages/notice/Notice.styled.ts (1)
src/styles/global/global.ts (2)
colors(4-53)typography(56-77)
src/pages/searchBook/SearchBookGroup.styled.ts (2)
src/pages/searchBook/SearchBook.styled.ts (4)
Wrapper(4-16)EmptyState(198-207)EmptyTitle(209-214)EmptySubText(216-220)src/styles/global/global.ts (2)
colors(4-53)typography(56-77)
src/pages/feed/UserSearchResult.styled.ts (1)
src/styles/global/global.ts (2)
typography(56-77)colors(4-53)
src/pages/aiwrite/AIWrite.styled.ts (1)
src/styles/global/global.ts (2)
colors(4-53)typography(56-77)
src/pages/mypage/Mypage.styled.ts (1)
src/styles/global/global.ts (2)
colors(4-53)typography(56-77)
src/pages/mypage/AlertPage.styled.ts (1)
src/styles/global/global.ts (2)
colors(4-53)typography(56-77)
src/pages/guide/Guide.styled.ts (1)
src/styles/global/global.ts (2)
colors(4-53)typography(56-77)
src/pages/mypage/SavePage.styled.ts (1)
src/styles/global/global.ts (2)
colors(4-53)typography(56-77)
src/pages/mypage/WithdrawPage.styled.ts (2)
src/pages/mypage/WithdrawDonePage.styled.ts (1)
Container(4-9)src/styles/global/global.ts (2)
colors(4-53)typography(56-77)
🔇 Additional comments (50)
src/pages/search/ApplyBook.tsx (1)
5-5: 스타일 분리가 올바르게 적용되었습니다.스타일 컴포넌트를 별도 파일로 분리하는 import가 정확하며, 컴포넌트 로직에는 영향을 주지 않습니다. 코드 가독성과 유지보수성이 향상되었습니다.
src/pages/search/ApplyBook.styled.ts (3)
1-2: LGTM!중앙 집중식 디자인 토큰을 사용하는 올바른 import 구조입니다.
4-10: LGTM!레이아웃 구조가 명확하고 flex를 활용한 중앙 정렬이 적절합니다.
12-24: LGTM!타이포그래피 계층 구조가 명확하고, 디자인 토큰을 일관되게 사용하여 유지보수성이 우수합니다. 색상 대비와 여백 설정도 적절합니다.
src/pages/groupSearch/GroupSearch.styled.ts (2)
4-11: LGTM!로딩 메시지 스타일이 적절하게 정의되어 있으며, 테마 토큰을 올바르게 사용하고 있습니다.
13-22: LGTM!버튼 스타일이 잘 정의되어 있으며, 클릭 가능한 요소임을 나타내는 cursor pointer도 적절히 설정되어 있습니다.
src/pages/groupSearch/GroupSearch.tsx (1)
13-13: 스타일 분리 리팩토링 완료!스타일 컴포넌트를 별도 파일로 성공적으로 분리했습니다. 임포트 경로가 정확하고, 컴포넌트들이 코드 전반에서 올바르게 사용되고 있습니다. PR 목표에 부합하는 깔끔한 리팩토링입니다.
src/pages/searchBook/SearchBook.styled.ts (1)
222-229: LGTM! 로딩 상태 표시용 컴포넌트가 적절하게 구현되었습니다.
LoadingBox컴포넌트가 디자인 토큰을 올바르게 사용하고 있으며, 중앙 정렬 레이아웃과 적절한 패딩으로 로딩 메시지를 표시하기에 적합합니다. 스타일 분리 리팩토링의 목적에 부합합니다.src/pages/searchBook/SearchBook.tsx (1)
24-24: LGTM! 스타일 컴포넌트 import가 올바르게 추가되었습니다.
LoadingBox가 별도의 styled 파일에서 정상적으로 import되어 코드 구조가 개선되었습니다. 런타임 동작에는 영향이 없으며 PR의 리팩토링 목표에 부합합니다.src/pages/group/Group.tsx (1)
14-14: 스타일 분리 잘 완료되었습니다!스타일 컴포넌트를 별도 파일로 분리하는 리팩토링이 깔끔하게 적용되었습니다. 컴포넌트의 기능 로직은 그대로 유지되면서 스타일만 외부 모듈로 이동하여 코드 가독성과 유지보수성이 개선되었습니다.
src/pages/group/Group.styled.ts (2)
1-2: 글로벌 디자인 토큰 사용이 적절합니다.전역 스타일 토큰(colors, typography)을 올바르게 import하여 디자인 시스템의 일관성을 유지하고 있습니다.
4-16: Wrapper 컴포넌트가 올바르게 구성되었습니다.페이지 레이아웃을 위한 표준적인 Wrapper 패턴이 잘 적용되었고, 디자인 토큰을 사용하여 일관된 스타일을 유지하고 있습니다.
src/pages/searchBook/SearchBookGroup.styled.ts (1)
1-16: 스타일 파일 분리가 올바르게 수행되었습니다.스타일 컴포넌트를 별도 파일로 분리하여 코드 가독성과 유지보수성이 향상되었습니다. 디자인 토큰도 적절히 사용되고 있습니다.
src/pages/searchBook/SearchBookGroup.tsx (1)
6-14: 스타일 컴포넌트 import가 올바르게 수행되었습니다.분리된 스타일 파일에서 필요한 모든 컴포넌트를 정확히 import하고 있으며, 컴포넌트 로직에는 변경사항이 없어 안전한 리팩토링입니다.
src/pages/groupDetail/ParticipatedGroupDetail.tsx (1)
24-25: 스타일 분리 작업이 잘 이루어졌습니다.스타일 컴포넌트를 별도 파일로 분리하여 임포트하는 리팩토링이 깔끔하게 적용되었습니다. 런타임 로직의 변경 없이 코드 구조만 개선되었습니다.
src/pages/search/Search.tsx (1)
13-13: 스타일 분리 리팩토링이 깔끔하게 적용되었습니다.모든 styled 컴포넌트가 올바르게 import되었으며, 코드 가독성과 유지보수성이 개선되었습니다.
src/pages/search/Search.styled.ts (5)
1-2: 필요한 의존성이 올바르게 import되었습니다.Emotion과 전역 스타일 토큰을 적절히 사용하고 있습니다.
4-14: Wrapper 컴포넌트가 적절하게 정의되었습니다.반응형 레이아웃과 전역 디자인 토큰을 올바르게 사용하고 있습니다.
16-32: Header 컴포넌트가 올바르게 구현되었습니다.고정 헤더의 위치와 스타일이 적절하게 설정되어 있습니다.
34-42: SearchBarContainer 컴포넌트가 적절하게 배치되었습니다.헤더 아래 올바른 위치(56px)에 고정되어 있습니다.
48-55: LoadingMessage 컴포넌트가 올바르게 구현되었습니다.중앙 정렬된 로딩 메시지가 전역 디자인 토큰을 사용하여 일관성 있게 스타일링되었습니다.
src/pages/feed/UserSearchResult.tsx (1)
4-4: 스타일 분리 리팩토링이 깔끔하게 적용되었습니다.스타일 컴포넌트를 별도 파일로 분리하여 코드 가독성이 향상되었습니다.
src/pages/index.tsx (1)
41-41: LGTM!Guide 컴포넌트의 디렉토리 이동에 맞춰 import 경로가 올바르게 업데이트되었습니다.
src/pages/feed/FeedDetailPage.tsx (1)
15-15: 스타일 분리가 올바르게 적용되었습니다.
Wrapper컴포넌트를 외부 스타일 모듈로 분리하여 관심사 분리가 잘 이루어졌습니다.src/pages/feed/MyFeedPage.tsx (1)
11-11: 스타일 분리 리팩토링이 적절합니다.
Container를 외부 모듈로 분리하여 코드 구조가 개선되었습니다.src/pages/login/Login.tsx (1)
5-5: LGTM!스타일 컴포넌트를 외부 모듈로 분리하여 깔끔하게 import하고 있습니다. 컴포넌트 로직과 스타일링 관심사가 잘 분리되었습니다.
src/pages/feed/MyFeedPage.styled.ts (1)
1-7: LGTM!공통 Container 컴포넌트가 MyFeedPage와 OtherFeedPage에서 재사용되어 DRY 원칙을 잘 준수하고 있습니다. 반응형 너비 제약이 적절하게 설정되었습니다.
src/pages/feed/Feed.tsx (1)
13-13: LGTM!스타일 컴포넌트가 외부 모듈에서 올바르게 import되었습니다. 기존 로직은 변경 없이 유지됩니다.
src/pages/aiwrite/AIWrite.tsx (1)
9-19: LGTM!스타일 컴포넌트들이 외부 모듈에서 명확하게 import되어 컴포넌트 파일의 가독성이 향상되었습니다.
src/pages/notice/Notice.tsx (1)
7-21: LGTM!다수의 스타일 컴포넌트가 외부 모듈로 잘 분리되어 import되었습니다. Notice 컴포넌트의 복잡한 로직과 스타일링이 명확하게 분리되었습니다.
src/pages/feed/OtherFeedPage.tsx (1)
11-11: LGTM!MyFeedPage.styled의 Container를 재사용하여 중복 코드를 방지했습니다. 동일한 레이아웃 요구사항을 가진 페이지 간에 스타일을 공유하는 좋은 패턴입니다.
src/pages/mypage/WithdrawPage.tsx (1)
9-21: LGTM! 스타일 분리가 올바르게 수행되었습니다.스타일 컴포넌트들을 별도의
.styled.ts파일로 성공적으로 분리했습니다. import 구문이 정확하고 컴포넌트 로직에는 변경이 없습니다.src/pages/mypage/SavePage.tsx (1)
13-25: LGTM! 스타일 분리가 올바르게 수행되었습니다.스타일 컴포넌트들을 별도의
.styled.ts파일로 성공적으로 분리했습니다. import 구문이 정확하고 컴포넌트 로직에는 변경이 없습니다.src/pages/feed/UserSearch.tsx (1)
12-12: LGTM! 스타일 분리가 올바르게 수행되었습니다.스타일 컴포넌트들을 별도의
.styled.ts파일로 성공적으로 분리했습니다. import 구문이 정확하고 컴포넌트 로직에는 변경이 없습니다.src/pages/feed/UserSearch.styled.ts (1)
1-27: LGTM! 테마 시스템을 올바르게 사용하고 있습니다.글로벌 테마의
colors.black.main을 사용하여 일관성 있는 스타일링을 구현했습니다. 반응형 디자인과 레이아웃 구조도 적절합니다.src/pages/guide/Guide.tsx (1)
11-23: 스타일 분리 리팩토링이 적절합니다.스타일 컴포넌트를 외부 모듈로 분리하여 코드 가독성과 유지보수성을 개선했습니다. 런타임 동작에 영향을 주지 않으며 PR의 목표와 일치합니다.
src/pages/login/Login.styled.ts (1)
1-32: 스타일 컴포넌트 구현이 올바릅니다.Emotion의 styled API를 올바르게 사용했으며, CSS 변수를 통해 디자인 토큰을 적절히 적용했습니다.
SocialButton의 동적bgprop도 타입 안전하게 구현되었습니다.src/pages/mypage/AlertPage.tsx (1)
6-16: 스타일 분리가 올바르게 수행되었습니다.컴포넌트 로직과 스타일을 성공적으로 분리했으며, 기능은 그대로 유지됩니다. PR의 리팩토링 목표와 일치합니다.
src/pages/mypage/AlertPage.styled.ts (1)
1-78: 전반적으로 잘 구조화된 스타일 분리입니다.스타일 컴포넌트를 별도 파일로 분리하여 가독성과 유지보수성이 개선되었습니다. Toggle과 ToggleSlider의 동적 prop 처리도 적절합니다.
src/pages/guide/Guide.styled.ts (1)
1-123: 스타일 분리가 잘 완료되었습니다.Container의 드래그 상태 처리와 Indicator의 활성 상태 표시가 적절하게 구현되어 있으며, 디자인 토큰을 일관되게 사용하고 있습니다.
src/pages/aiwrite/AIWrite.styled.ts (1)
1-100: 깔끔하게 구조화된 스타일 파일입니다.모든 컴포넌트가 디자인 토큰을 일관되게 사용하고 있으며, 로딩 상태와 결과 표시를 위한 레이아웃이 적절하게 분리되어 있습니다.
src/pages/mypage/WithdrawPage.styled.ts (1)
1-113: 스타일 분리가 적절하게 수행되었습니다.탈퇴 페이지의 레이아웃과 상호작용 요소들이 잘 구조화되어 있으며, WithdrawButton의 활성/비활성 상태 처리가 적절합니다.
src/pages/feed/FollowerListPage.syled.ts (2)
3-13: LGTM!Wrapper 컴포넌트의 스타일 정의가 적절합니다. 반응형 width 제약과 flex 레이아웃이 올바르게 설정되어 있습니다.
31-37: LGTM!UserProfileList 컴포넌트의 스타일 정의가 적절합니다. 고정 헤더를 위한 padding-top이 올바르게 설정되어 있습니다.
src/pages/mypage/Mypage.tsx (1)
16-25: 스타일 컴포넌트 분리가 올바르게 적용되었습니다.별도 파일로 분리된 스타일 컴포넌트를 정확하게 import하고 있으며, 코드 구조가 개선되었습니다.
src/pages/mypage/Mypage.styled.ts (2)
113-123: 반응형 그리드 레이아웃이 잘 구현되었습니다.미디어 쿼리를 활용한 반응형 디자인이 깔끔하게 적용되어 있습니다.
125-138: 디자인 토큰이 올바르게 적용되었습니다.import된 디자인 토큰을 일관되게 사용하고 있어 코드 품질이 우수합니다.
src/pages/mypage/WithdrawDonePage.tsx (1)
6-6: LGTM! 스타일 분리가 올바르게 수행되었습니다.스타일드 컴포넌트를 별도 파일에서 import하도록 변경이 잘 되었으며, 컴포넌트 로직에는 영향이 없습니다.
src/pages/mypage/WithdrawDonePage.styled.ts (2)
4-9: LGTM! Container 스타일이 깔끔하게 정의되었습니다.수직 정렬과 간격 설정이 적절하며, 스타일 분리가 잘 수행되었습니다.
24-38: LGTM! 중첩된 스타일이 명확하게 정의되었습니다.
.title과.sub-title클래스의 타이포그래피 및 색상 설정이 전역 디자인 시스템을 올바르게 활용하고 있으며, 가독성이 좋습니다.
| import { getFollowingList } from '@/api/users/getFollowingList'; | ||
| import type { FollowData } from '@/types/follow'; | ||
| import LoadingSpinner from '@/components/common/LoadingSpinner'; | ||
| import { TotalBar, UserProfileList, Wrapper } from './FollowerListPage.syled'; |
There was a problem hiding this comment.
파일명 오타를 수정해주세요.
import 경로에 FollowerListPage.syled로 되어 있는데, 이는 FollowerListPage.styled로 수정되어야 합니다. PR 내 다른 페이지들(Feed.styled, MyFeedPage.styled 등)과의 네이밍 일관성을 위해 .styled.ts 패턴을 사용해야 합니다.
🔎 수정 제안
파일명과 import 경로를 모두 수정해주세요:
-import { TotalBar, UserProfileList, Wrapper } from './FollowerListPage.syled';
+import { TotalBar, UserProfileList, Wrapper } from './FollowerListPage.styled';그리고 파일명도 변경:
src/pages/feed/FollowerListPage.syled.ts→src/pages/feed/FollowerListPage.styled.ts
Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In src/pages/feed/FollowerListPage.tsx around line 11, the import path has a
typo: it imports from 'FollowerListPage.syled' but the correct module is
'FollowerListPage.styled'; rename the actual file from
src/pages/feed/FollowerListPage.syled.ts to
src/pages/feed/FollowerListPage.styled.ts and update the import to use
'./FollowerListPage.styled' (ensure the filename and import extension/casing
match project conventions and update any other references to the old name).
| export const LoadingContainer = styled.div` | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| height: 200px; | ||
| color: var(--color-grey-200); | ||
| font-size: var(--string-size-base, 16px); | ||
| `; | ||
|
|
||
| export const ErrorContainer = styled.div` | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| height: 200px; | ||
| color: var(--color-red); | ||
| font-size: var(--string-size-base, 16px); | ||
| text-align: center; | ||
| padding: 20px; | ||
| `; |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
스타일 정의 방식의 일관성을 맞춰주세요.
새로 추가된 LoadingContainer와 ErrorContainer는 CSS 커스텀 프로퍼티(var(--color-grey-200), var(--color-red))를 사용하는 반면, 같은 파일의 기존 컴포넌트들(lines 1-57)은 임포트된 colors와 typography 객체를 사용하고 있습니다. 코드 유지보수성을 위해 동일한 파일 내에서는 일관된 스타일 정의 방식을 사용하는 것이 좋습니다.
🔎 기존 패턴을 따르는 리팩토링 제안
export const LoadingContainer = styled.div`
display: flex;
align-items: center;
justify-content: center;
height: 200px;
- color: var(--color-grey-200);
- font-size: var(--string-size-base, 16px);
+ color: ${colors.grey[200]};
+ font-size: ${typography.fontSize.base};
`;
export const ErrorContainer = styled.div`
display: flex;
align-items: center;
justify-content: center;
height: 200px;
- color: var(--color-red);
- font-size: var(--string-size-base, 16px);
+ color: ${colors.red.main};
+ font-size: ${typography.fontSize.base};
text-align: center;
padding: 20px;
`;참고: colors.grey[200], colors.red.main, typography.fontSize.base 등의 정확한 경로는 @/styles/global/global에 정의된 구조에 맞게 조정이 필요할 수 있습니다.
🤖 Prompt for AI Agents
In src/pages/groupDetail/ParticipatedGroupDetail.styled.ts around lines 59 to
77, the new LoadingContainer and ErrorContainer use CSS custom properties
whereas existing components in this file use the imported colors and typography
objects; update these two components to follow the existing pattern by replacing
var(...) with the corresponding values from the imported colors and typography
(e.g., colors.grey[200] for the grey, colors.red.main for the red,
typography.fontSize.base for font-size), keep the same layout properties
(display, align-items, justify-content, height, text-align/padding), and add any
missing imports for colors and typography at the top of the file if they aren’t
already imported.
| export const Text = styled.div` | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| justify-content: center; | ||
| width: 100%; | ||
| min-width: 360px; | ||
| max-width: 540px; | ||
| padding: 40px 20px; | ||
| margin: 0 auto; | ||
| margin-bottom: 56px; | ||
| gap: 20px; |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
cat -n src/pages/mypage/WithdrawDonePage.styled.tsRepository: THIP-TextHip/THIP-Web
Length of output: 1195
🏁 Script executed:
rg "export const Wrapper\s*=" src/pages/mypage/Repository: THIP-TextHip/THIP-Web
Length of output: 422
🏁 Script executed:
rg "const Wrapper\s*=" src/pages/mypage/Repository: THIP-TextHip/THIP-Web
Length of output: 422
🏁 Script executed:
fd -e "styled.ts" -e "styled.tsx" src/pages/mypage/ | head -20Repository: THIP-TextHip/THIP-Web
Length of output: 438
🏁 Script executed:
rg "WithdrawDone" --type ts --type tsxRepository: THIP-TextHip/THIP-Web
Length of output: 92
🏁 Script executed:
rg "export const Wrapper" src/pages/mypage/WithdrawDonePage.styled.tsRepository: THIP-TextHip/THIP-Web
Length of output: 47
🏁 Script executed:
find src -name "*WithdrawDone*" -o -name "*withdraw*done*"Repository: THIP-TextHip/THIP-Web
Length of output: 146
🏁 Script executed:
cat -n src/pages/mypage/WithdrawDonePage.tsxRepository: THIP-TextHip/THIP-Web
Length of output: 1113
🏁 Script executed:
find src/components/common -name "*Wrapper*"Repository: THIP-TextHip/THIP-Web
Length of output: 98
🏁 Script executed:
cat src/components/common/Wrapper.tsx src/components/common/Wrapper.ts src/components/common/Wrapper.styled.ts 2>/dev/nullRepository: THIP-TextHip/THIP-Web
Length of output: 360
Text 컴포넌트의 min-width 값을 360px에서 320px로 수정해주세요.
Line 17의 min-width: 360px이 상위 Wrapper 컴포넌트의 min-width: 320px보다 커서, 320px~359px 범위의 작은 화면에서 가로 스크롤이 발생합니다.
권장 수정사항
width: 100%;
- min-width: 360px;
+ min-width: 320px;
max-width: 540px;📝 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.
| export const Text = styled.div` | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| width: 100%; | |
| min-width: 360px; | |
| max-width: 540px; | |
| padding: 40px 20px; | |
| margin: 0 auto; | |
| margin-bottom: 56px; | |
| gap: 20px; | |
| export const Text = styled.div` | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| width: 100%; | |
| min-width: 320px; | |
| max-width: 540px; | |
| padding: 40px 20px; | |
| margin: 0 auto; | |
| margin-bottom: 56px; | |
| gap: 20px; |
🤖 Prompt for AI Agents
In src/pages/mypage/WithdrawDonePage.styled.ts around lines 11 to 22, the Text
styled component sets min-width: 360px which is larger than the parent Wrapper's
min-width: 320px causing horizontal scroll on viewports 320–359px; change the
Text component's min-width to 320px so it matches the Wrapper and removes the
unwanted horizontal scrolling.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/pages/searchBook/SearchBook.tsx (1)
248-248: 일관성을 위해 인라인 스타일 추출을 고려해보세요.에러 상태 표시를 위한 인라인 스타일이 남아있습니다. 다른 스타일과의 일관성을 위해
ErrorMessage같은 styled 컴포넌트로 추출할 수 있습니다.🔎 제안하는 리팩토링
SearchBook.styled.ts에 다음을 추가:export const ErrorMessage = styled.div` padding: 100px 20px; text-align: center; color: white; `;그리고 이 파일에서:
- <div style={{ padding: '100px 20px', textAlign: 'center', color: 'white' }}> + <ErrorMessage> {isLoading ? '로딩 중...' : error || '책 정보를 찾을 수 없습니다.'} - </div> + </ErrorMessage>
📜 Review details
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Jira integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (2)
src/pages/feed/FeedDetailPage.tsxsrc/pages/searchBook/SearchBook.tsx
🔇 Additional comments (2)
src/pages/searchBook/SearchBook.tsx (1)
1-25: 스타일 분리 리팩토링이 올바르게 적용되었습니다!
LoadingBox를 포함한 모든 styled 컴포넌트가 별도 파일로 잘 분리되었습니다. 코드 가독성과 유지보수성이 개선되었습니다.src/pages/feed/FeedDetailPage.tsx (1)
14-14: 스타일 분리 리팩토링이 올바르게 적용되었습니다.
Wrapper컴포넌트의 분리와 import, 그리고 사용처가 모두 일관되게 구현되어 있습니다. styled 파일이 올바르게 export하고 있으며, 코드의 가독성과 유지보수성 개선이 잘 이루어졌습니다.
2 participants
#️⃣연관된 이슈
https://thip2025.atlassian.net/browse/THIP2025-402
📝작업 내용
페이지 컴포넌트의 스타일 코드를 별도 styled 파일로 분리해 코드 가독성과 유지 보수성을 개선했습니다.
스타일 파일 분리 (20개 페이지)
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.