Conversation
일부 컴포넌트에서 ColorKey를 이용헤서 배경색을 적용하던 것이 원인이었음. useTheme를 이용해서 직접 color를 넣어주는 식으로 통일함
- 로그인 유저 정보를 위한 User 타입 추가 - 정보 조회 함수 추가 - msw 모킹 추가 - useGetUserInfo 훅 추가
📝 관련 이슈 |
Contributor
Author
|
@coderabbitai full review |
✅ Actions performedFull review triggered. |
|
No actionable comments were generated in the recent review. 🎉 📝 Walkthrough개요라우터의 지연 로딩 컴포넌트들을 재명명하고 새로운 사용자 정보 API, MyPage/MyEditPage 페이지와 MyProfile 기능 컴포넌트를 추가했으며 여러 페이지의 테마 색상 참조를 업데이트했습니다. 변경 사항
관련된 가능성 있는 PR
제안된 레이블
시
🚥 Pre-merge checks | ✅ 1✅ Passed checks (1 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
🧪 Generate unit tests (beta)
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: 7
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/pages/characterShare/CharacterSharePage.tsx (1)
63-90:⚠️ Potential issue | 🟠 Major
Header의bgColorprop이 두 가지 형식으로 불일치합니다.Header 컴포넌트의
bgColor는string타입이며, 스타일 컴포넌트에서 직접 CSSbackground-color속성에 삽입됩니다(background-color: ${$bgColor || 'inherit'}).
- 63번째 줄:
bgColor={color.semantic.background.normal.alternative}→ 테마에서 resolve된 실제 색상 값 전달 (정상 작동)- 90번째 줄:
bgColor="semantic.background.normal.alternative"→ CSS 색상으로 인식되지 않는 문자열 리터럴 전달 (배경색 미적용)PR 목표인 bgColor 사용 방식 통일을 위해 90번째 줄도 resolve된 색상 값으로 수정해야 합니다.
🛠️ 제안 수정
bgColor={color.semantic.background.normal.alternative} /> ... - bgColor="semantic.background.normal.alternative" + bgColor={color.semantic.background.normal.alternative}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/pages/characterShare/CharacterSharePage.tsx` around lines 63 - 90, The Header's bgColor prop is being passed a string literal in the return block; replace the literal "semantic.background.normal.alternative" with the resolved theme value used earlier (color.semantic.background.normal.alternative) so Header receives an actual CSS color string; locate the Header usage (component named Header with prop bgColor) and swap the string to use the existing color variable (ensure color is in scope where Header is rendered).
🧹 Nitpick comments (3)
src/entities/auth/api/useGetUserInfo.ts (1)
5-8:queryKey가 너무 단순하고,staleTime미설정으로 인한 과도한 재요청 가능성두 가지를 고려해 주세요.
['userInfo']는 단일 flat key입니다.['user', 'info']처럼 계층형 키를 사용하면 추후queryClient.invalidateQueries({ queryKey: ['user'] })형태로 사용자 관련 쿼리를 일괄 무효화하기 용이합니다.
staleTime이 설정되어 있지 않아 기본값(0)이 적용됩니다. 사용자 프로필 정보는 자주 바뀌지 않으므로, 적절한staleTime설정으로 불필요한 재요청을 줄이는 것을 고려해 보세요.♻️ 제안 수정
export const useGetUserInfo = () => { return useSuspenseQuery({ - queryKey: ['userInfo'], + queryKey: ['user', 'info'], queryFn: getUserInfo, + staleTime: 1000 * 60 * 5, // 5분 }); };🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/entities/auth/api/useGetUserInfo.ts` around lines 5 - 8, Change the query key and add a staleTime in useGetUserInfo: replace the flat queryKey ['userInfo'] used in useSuspenseQuery with a hierarchical key like ['user','info'] so user-related queries can be invalidated with queryClient.invalidateQueries({ queryKey: ['user'] }), and set an appropriate staleTime (e.g., several minutes) on the same useSuspenseQuery call to prevent unnecessary refetches for relatively static profile data; update the call site in useGetUserInfo to pass these options to useSuspenseQuery.src/entities/auth/ui/MyProfile/index.styles.ts (1)
8-8:min-height: 45px하드코딩
padding과gap은theme.unit토큰을 사용하지만min-height만 픽셀 값으로 하드코딩되어 있습니다. 디자인 시스템에 해당하는 토큰이 있다면 동일하게 적용하는 것이 일관성에 좋습니다. 없다면 주석으로 이유를 명시해 두는 것도 좋습니다.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/entities/auth/ui/MyProfile/index.styles.ts` at line 8, Replace the hardcoded CSS rule "min-height: 45px" in MyProfile's styles with the design token used elsewhere (e.g., compute via theme.unit such as min-height: ${props => props.theme.unit * N}px or use the appropriate theme.spacing/size token) so padding/gap and min-height are consistent; if no suitable token exists in the theme, add a brief comment above the "min-height" line in index.styles.ts explaining why a fixed pixel value is required.src/shared/ui/Header/index.styles.ts (1)
8-8: Line 8의background-color:#fff`` 선언은 데드 코드입니다.Line 17에서 항상 재선언되므로 Line 8의 값은 CSS에서 절대 적용되지 않습니다. 불필요한 선언 제거를 권장합니다.
♻️ 데드 코드 제거 제안
export const HeaderArea = styled.header<{ $bgColor?: string }>` display: flex; align-items: center; position: sticky; - background-color: `#fff`; top: 0; left: 0; z-index: 998; padding: 1.75rem 1.375rem; // 28px 22px width: 100%; min-width: 320px; max-height: 64px; height: 100%; background-color: ${({ $bgColor }) => $bgColor || 'inherit'}; `;🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/shared/ui/Header/index.styles.ts` at line 8, 상단에 선언된 background-color: `#fff가` 이후 같은 스타일 블록에서 항상 재선언되어 실제로 적용되지 않는 데드 코드입니다; 해당 파일의 Header 스타일에서 최상단에 있는 background-color: `#fff` 선언을 삭제하고, 필요한 경우 이미 존재하는 하위/후속 선언(현재 적용되는 background-color 재선언)을 유지하도록 정리하세요.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/entities/auth/api/auth.ts`:
- Around line 26-32: getUserInfo currently hardcodes useMock: true causing it to
always hit mock data; remove that hardcoded option (and do the same for getAuth)
and make mock usage conditional instead—either remove the option so
axiosInstance uses its default behavior, or wire it to a
configuration/environment flag (e.g. process.env.USE_MOCK or a shared config
value) or accept an optional parameter on getUserInfo/getAuth to control
mocking; update both getUserInfo and getAuth to read that single source of truth
so real API calls work once the backend is ready.
In `@src/entities/auth/ui/MyProfile/index.tsx`:
- Line 15: Suspense의 fallback에서 사용 중인 영어 텍스트 "Loading..."을 한국어로 변경하세요: locate
the Suspense fallback JSX that renders
<S.ProfileContainer>Loading...</S.ProfileContainer> and replace the inner string
with a Korean message such as "로딩 중..." (or "불러오는 중...") so the UI language is
consistent; ensure only the text literal is changed and no other JSX structure
around Suspense or S.ProfileContainer is modified.
- Around line 30-37: The "정보수정" Button lacks an onClick navigation handler so it
does nothing; update the Button in MyProfile (the Button component instance) to
navigate to ROUTE.myEdit when clicked — e.g., use react-router-dom's useNavigate
inside the MyProfile component (or wrap the Button with a Link to ROUTE.myEdit)
and call navigate(ROUTE.myEdit) from the Button's onClick; ensure you import
useNavigate/Link and keep LazyMyEditPage/ROUTE.myEdit as the target route.
- Around line 11-39: The Suspense boundary in MyProfile is misplaced and never
shows its fallback because useGetUserInfo (which uses useSuspenseQuery) throws
during the MyProfile component render; remove the Suspense wrapper from the
MyProfile component (file: MyProfile/index.tsx) so the component directly calls
useGetUserInfo and returns JSX, and instead wrap the parent component that
renders <MyProfile /> (e.g., MyPage) with a Suspense that uses the desired
fallback (e.g., <S.ProfileContainer>Loading...</S.ProfileContainer>); ensure
references to Suspense, useGetUserInfo, MyProfile and the fallback
S.ProfileContainer are updated accordingly.
In `@src/mocks/handlers/auth.ts`:
- Around line 31-36: mockUserInfo 객체의 profileImageUrl에 빈 문자열을 할당하면 UI가 <img
src="">로 잘못된 요청을 보낼 수 있으니, 목 데이터에서 이미 이미지를 사용하지 않으려면 mockUserInfo에서
profileImageUrl 필드를 삭제하거나 값을 undefined로 바꿔 User 타입의 optional을 활용하도록 수정하세요; 해당
변경은 src/mocks/handlers/auth.ts 파일의 mockUserInfo 선언을 찾아 적용하면 됩니다.
In `@src/pages/my/MyPage.tsx`:
- Around line 18-19: The rightButtonContent currently uses the Menu icon while
rightButtonOnClick navigates to ROUTE.myEdit, which is semantically confusing;
update the MyPage component to replace Menu with an appropriate edit/settings
icon (e.g., an Edit or Settings icon component) passed to rightButtonContent, or
adjust rightButtonOnClick to open a menu if you intend to keep Menu; locate the
props where rightButtonContent={<Menu width={24} />} and rightButtonOnClick={()
=> navigate(ROUTE.myEdit)} are set and swap the icon to one matching the action
(or change the navigation behavior) so icon and action are consistent.
In `@src/shared/ui/Header/index.styles.ts`:
- Line 17: The Header background default was changed causing visual regressions;
restore the original default white by updating the styled rule in
src/shared/ui/Header/index.styles.ts so $bgColor falls back to '#fff' (e.g. use
$bgColor ?? '#fff' or similar) rather than 'inherit', ensuring the Header
component (styled prop $bgColor) keeps the previous white background for
consumers that don't pass a bgColor; alternatively, if the change was intended,
add explicit bgColor values to all Header usages listed instead of changing the
default.
---
Outside diff comments:
In `@src/pages/characterShare/CharacterSharePage.tsx`:
- Around line 63-90: The Header's bgColor prop is being passed a string literal
in the return block; replace the literal
"semantic.background.normal.alternative" with the resolved theme value used
earlier (color.semantic.background.normal.alternative) so Header receives an
actual CSS color string; locate the Header usage (component named Header with
prop bgColor) and swap the string to use the existing color variable (ensure
color is in scope where Header is rendered).
---
Duplicate comments:
In `@src/pages/myLinks/MyLinksPage.tsx`:
- Around line 25-51: The Header bgColor prop is inconsistent between the loading
branch (uses resolved value color.semantic.background.normal.alternative) and
the success branch (uses the string "semantic.background.normal.alternative");
update the success branch in MyLinksPage.tsx so Header's bgColor uses the
resolved color object (remove the quoted string) to match the loading branch and
ensure Header always receives the same color value type.
---
Nitpick comments:
In `@src/entities/auth/api/useGetUserInfo.ts`:
- Around line 5-8: Change the query key and add a staleTime in useGetUserInfo:
replace the flat queryKey ['userInfo'] used in useSuspenseQuery with a
hierarchical key like ['user','info'] so user-related queries can be invalidated
with queryClient.invalidateQueries({ queryKey: ['user'] }), and set an
appropriate staleTime (e.g., several minutes) on the same useSuspenseQuery call
to prevent unnecessary refetches for relatively static profile data; update the
call site in useGetUserInfo to pass these options to useSuspenseQuery.
In `@src/entities/auth/ui/MyProfile/index.styles.ts`:
- Line 8: Replace the hardcoded CSS rule "min-height: 45px" in MyProfile's
styles with the design token used elsewhere (e.g., compute via theme.unit such
as min-height: ${props => props.theme.unit * N}px or use the appropriate
theme.spacing/size token) so padding/gap and min-height are consistent; if no
suitable token exists in the theme, add a brief comment above the "min-height"
line in index.styles.ts explaining why a fixed pixel value is required.
In `@src/shared/ui/Header/index.styles.ts`:
- Line 8: 상단에 선언된 background-color: `#fff가` 이후 같은 스타일 블록에서 항상 재선언되어 실제로 적용되지 않는 데드
코드입니다; 해당 파일의 Header 스타일에서 최상단에 있는 background-color: `#fff` 선언을 삭제하고, 필요한 경우 이미
존재하는 하위/후속 선언(현재 적용되는 background-color 재선언)을 유지하도록 정리하세요.
타입 의도에 맞게 profile image url을 빈 문자열 대신 undefined로 변경 #23 (comment)
의도하지 않은 배경색 변경이 생길 수 있어 나중에 헤더 컴포넌트 작업 시 다시 확인하는 게 좋을 듯함 #23 (comment)
Contributor
Author
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
There was a problem hiding this comment.
🧹 Nitpick comments (2)
src/entities/auth/ui/MyProfile/index.tsx (1)
18-18:profile?.profileImageUrl—profile에 대한 불필요한 옵셔널 체이닝
useSuspenseQuery는 TypeScript 레벨에서data가 항상 정의되어 있음을 보장합니다. 따라서profile자체에 대한?.은 불필요하며, 20번과 27번 라인의profile.name,profile.email직접 접근 방식과도 일관성이 없습니다.profileImageUrl이User타입에서 옵셔널 필드이기 때문에 값 자체는undefined일 수 있지만,profile객체에 접근하는 것 자체는 안전합니다.🛠️ 수정 제안
- <MemberProfileImage size="sm" src={profile?.profileImageUrl} /> + <MemberProfileImage size="sm" src={profile.profileImageUrl} />🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/entities/auth/ui/MyProfile/index.tsx` at line 18, Remove the unnecessary optional chaining on the profile object when passing the image URL to MemberProfileImage: replace profile?.profileImageUrl with profile.profileImageUrl (keep the value itself optional since User.profileImageUrl can be undefined). Update the call site using MemberProfileImage and ensure usage is consistent with other accesses like profile.name and profile.email; this aligns with the guarantee from useSuspenseQuery that profile is defined while still allowing profile.profileImageUrl to be undefined per the User type.src/pages/my/MyPage.styles.ts (1)
8-8:min-height: 45px— 하드코딩된 매직 넘버설계 시스템에 이 높이에 대응하는 토큰이 존재한다면, 직접
45px을 박는 대신 해당 토큰을 사용하는 것이 일관성에 좋습니다.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/pages/my/MyPage.styles.ts` at line 8, Replace the hardcoded "min-height: 45px" in MyPage.styles.ts with the corresponding design token from your theme/tokens (do not leave a magic number); import and use the token (e.g., theme.sizes.<appropriateToken> or tokens.sizes.<name>) in the styled rule that currently contains "min-height: 45px" so the height comes from the design system rather than a literal pixel value.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@src/entities/auth/ui/MyProfile/index.tsx`:
- Line 18: Remove the unnecessary optional chaining on the profile object when
passing the image URL to MemberProfileImage: replace profile?.profileImageUrl
with profile.profileImageUrl (keep the value itself optional since
User.profileImageUrl can be undefined). Update the call site using
MemberProfileImage and ensure usage is consistent with other accesses like
profile.name and profile.email; this aligns with the guarantee from
useSuspenseQuery that profile is defined while still allowing
profile.profileImageUrl to be undefined per the User type.
In `@src/pages/my/MyPage.styles.ts`:
- Line 8: Replace the hardcoded "min-height: 45px" in MyPage.styles.ts with the
corresponding design token from your theme/tokens (do not leave a magic number);
import and use the token (e.g., theme.sizes.<appropriateToken> or
tokens.sizes.<name>) in the styled rule that currently contains "min-height:
45px" so the height comes from the design system rather than a literal pixel
value.
✅ Actions performedComments resolved and changes approved. |
Merged
이전 값의 경우 padding을 고려하지 않아 내용이 넘치는 문제가 있었음
ongheong
approved these changes
Feb 22, 2026
Contributor
ongheong
left a comment
ongheong
left a comment
There was a problem hiding this comment.
코드 확인했습니다! Chip이 Button 처럼 사용되고 있는 곳이 많아 컴포넌트를 수정했는데, 이에 대한 정연님의 의견이 궁금하여 간단한 코멘트 남겨두었습니다. 확인해주시면 감사하곘습니다!
Comment on lines
+30
to
+39
| {/* TODO: 현 피그마 디자인은 Chip이 Button으로 쓰이고 있는 상황이라 우선 button 컴포넌트 기준으로 구현했습니다. 디자인시스템 정리 후 다시 확인이 필요합니다! */} | ||
| <Button | ||
| size="sm" | ||
| onClick={() => navigate(ROUTE.myEdit)} | ||
| style={{ | ||
| backgroundColor: theme.color.semantic.background.normal.inverse, | ||
| }} | ||
| > | ||
| 정보수정 | ||
| </Button> |
Contributor
There was a problem hiding this comment.
현재 Chip이 버튼처럼 쓰이고 있는 부분이 많아서(홈 화면에서도 버튼처럼 쓰이고 있습니다), 홈페이지 디자인 반영 PR에서 Chip에 onClick props를 추가했습니다!
해당 수정에 대한 정연님의 의견이 궁금합니다 👀
Contributor
Author
There was a problem hiding this comment.
Chip에 onClick props를 추가할 수도 있지만 클릭 가능한 칩을 별도의 컴포넌트로 분리하는 것도 방법이 될 수 있을 것 같아요!
아직 수진님이 디자인 시스템을 정리중이시라 확정된 컴포넌트는 아니지만 지금까지 정리된 것을 봤을 땐 클릭 가능한 칩 형태의 컴포넌트는(홈 화면에 쓰이는 것!) tab 컴포넌트로 따로 분류되어 있더라구요. 이 부분에서 컴포넌트 정리하실 때 일반 칩이랑 클릭 가능한 칩을 분리하려는 의도가 아닐까 하는 생각을 했거든요.
제가 구현할 때 여길 TODO 로 남겨뒀던 이유는 클릭 가능한 컴포넌트는 button으로 정의하는 것이 역할이나 접근성 측면에서 더 좋지 않을까? 하는 생각에서였는데요.
만약에 홈 화면 tab 말고 다른 곳에서도 칩이 버튼처럼 사용되고 있는 부분이 있다면 좀 더 생각해봐야겠지만,,,
저는 클릭할 수 있는 칩이라면 따로 버튼 칩으로 만드는 것도 좋겠다는 의견입니다! (근데 이 부분은 컴포넌트 정리된거 보고 생각해봐도 좋을 것 같아요...!)
Contributor
There was a problem hiding this comment.
아하 이 부분은 수진님과 논의가 더 필요하겠네요.
그럼 우선 props가 추가된 상태로 두고, 해당 props는 추후 디자인시스템 정리 후에 역할이 명확해지면 구조를 재검토하겠습니다!
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.
💻 작업 내용
마이페이지를 추가하고, 상단 로그인 유저 프로필 컴포넌트를 추가했습니다.
아직 디자인 시스템이 정리되지 않아서 우선 기능 위주로 구현했습니다! (피그마 디자인과 다른 부분은 주석으로 달아두었어요)
아직 마이페이지로 이동할 수 있는 방법이 결정되지 않아서 (🥹) 링크로 바로 접근만 가능합니다! (http://localhost:3000/my)
헤더 배경 bgColor props 사용법이 통일되지 않던 부분이 있어서 함께 수정했습니다.
📸 스크린샷
Summary by CodeRabbit
릴리스 노트
새로운 기능
스타일
리팩토링