Conversation
📝 관련 이슈 |
|
No actionable comments were generated in the recent review. 🎉 📝 WalkthroughWalkthrough새로운 지연 로딩 결제 관리 페이지와 라우트가 추가되었고, HomePage가 MainHeader·SettlementBanner·SettlementList로 분리·컴포넌트화되었으며 Chip에 선택적 onClick과 커서 스타일이 추가되고 일부 홈 스타일 컴포넌트의 내보내기가 제거되었습니다. Changes
Possibly related PRs
Suggested labels
Poem
🚥 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 |
ongheong
changed the title
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (5)
src/pages/paymentManagement/index.ts (1)
1-1: Prettier 오류: 중괄호 내부 공백 및 파일 끝 개행 누락ESLint
prettier/prettier규칙에 따라 중괄호 내부 공백과 파일 끝 개행을 추가해야 합니다.♻️ 수정 제안
-export {default as PaymentManagementPage} from './PaymentManagementPage'; +export { default as PaymentManagementPage } from './PaymentManagementPage';🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/pages/paymentManagement/index.ts` at line 1, 파일 끝에 줄바꿈을 추가하고 중괄호 내부 공백을 Prettier 스타일에 맞게 고치세요: export 구문 "export {default as PaymentManagementPage} from './PaymentManagementPage';"에서 중괄호 안을 "export { default as PaymentManagementPage } from './PaymentManagementPage';"로 변경하고 파일 끝에 단일 개행 문자를 추가하여 prettier/prettier 오류를 해소하세요.src/pages/paymentManagement/PaymentManagementPage.tsx (1)
1-7: 플레이스홀더 구현입니다 — 이후 구현 시 디자인 시스템 컴포넌트 활용을 권장합니다.현재 raw
<div>/<h1>및 영어 텍스트("Payment Management")로 구성된 스텁 구현입니다. 실제 페이지 개발 시Text,Flex등 프로젝트 디자인 시스템 컴포넌트로 대체하고 한국어 텍스트를 적용해 주세요.실제 입금 관리 페이지 레이아웃 구현이 필요하시면 이슈를 열어드릴 수 있습니다.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/pages/paymentManagement/PaymentManagementPage.tsx` around lines 1 - 7, Replace the placeholder raw HTML in the PaymentManagementPage function with project design-system components: use Text (or Heading) instead of <h1> and Flex/Box wrappers instead of <div>, and swap the English label "Payment Management" for the Korean equivalent (e.g., "입금 관리"); update PaymentManagementPage to import and use the design-system components (Text/Heading, Flex/Box) so the page matches the app's styling conventions.src/pages/home/HomePage.tsx (2)
69-92: Prettier 포맷팅 오류:MainHeader컴포넌트 내부 과도한 들여쓰기
Header컴포넌트 props 전체(lines 69–92)에 2칸 추가 들여쓰기가 적용되어 있어 ESLintprettier/prettier에러가 다수 발생합니다.prettier --write실행으로 일괄 수정 가능합니다.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/pages/home/HomePage.tsx` around lines 69 - 92, The MainHeader (Header) JSX props block (the leftButtonContent/rightButtonContent and bgColor props around the MainHeader usage) has extra indentation causing prettier/prettier lint errors; fix by reformatting that JSX so props are indented consistently (e.g., align props under the opening tag) and run prettier --write (or apply your editor's autoformat) to normalize spacing for the MainHeader and its leftButtonContent/rightButtonContent prop values.
192-205: 정렬 버튼이 SEND 탭에서도 표시되나 동작하지 않습니다.
sortToggle은 RECEIVE 탭의 목록에만 적용되지만, 정렬 버튼은 두 탭 모두에서 표시됩니다. SEND 탭 활성 시 버튼이 동작하지 않아 혼란을 줄 수 있습니다. Select 컴포넌트로 교체 예정(TODO)이지만, 현재도settlementType === 'RECEIVE'일 때만 버튼을 렌더링하는 것을 권장합니다.💡 수정 제안
- {/** `@Todo` Select 컴포넌트 개발 후 변경 */} - <Button variant="text" onClick={handleSortOptionClick}> + {settlementType === 'RECEIVE' && ( + <Button variant="text" onClick={handleSortOptionClick}> <Text variant="body2R" color="semantic.text.subtle"> {sortToggle ? '오래된순' : '최신순'} </Text> <Next ... /> </Button> + )}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/pages/home/HomePage.tsx` around lines 192 - 205, The sort button (Button with onClick={handleSortOptionClick} rendering Text, Next and using sortToggle) is shown for both SEND and RECEIVE but only affects RECEIVE; update the render to conditionally show this block only when settlementType === 'RECEIVE' (i.e., wrap or gate the Button/Next/Text JSX with a check against settlementType) so the control is hidden for SEND until you replace it with the Select component per the TODO; keep existing handlers (handleSortOptionClick, sortToggle) and styles unchanged.src/app/Router.tsx (1)
126-126: Prettier 오류: 빈 줄에 공백이 포함되어 있습니다.ESLint
prettier/prettier에러가 발생합니다. 해당 줄의 공백을 제거해 주세요.♻️ 수정 제안
- + { path: '*',🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/app/Router.tsx` at line 126, 빈 줄에 불필요한 공백이 있어 Prettier(ESLint prettier/prettier) 에러가 발생합니다; Router.tsx 파일의 Router 컴포넌트(또는 해당 파일 내 빈 줄 위치)를 열어 문제의 빈 줄(대략 파일 중간, 주석/구성 사이의 빈 줄)을 찾아 trailing whitespace를 삭제하고 빈 줄을 완전히 비워 저장하여 Prettier 오류를 해결하세요.
🤖 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/pages/home/HomePage.tsx`:
- Around line 16-17: Reorder the import statements in HomePage.tsx so they
follow the project's import/order rule: move the absolute aliased imports
(Button and Header from '@/shared/ui/Button' and '@/shared/ui/Header') above the
relative import './ui/HomeExpenseItem'; specifically, ensure imports for Button
and Header appear before the import of HomeExpenseItem to satisfy ESLint
import/order.
- Around line 207-220: The RECEIVE branch currently renders nothing when
settlementType === 'RECEIVE' and settlementList.length === 0; update the
conditional around SettlementListWrapper (the block using settlementType,
settlementList and HomeExpenseItem) to render a RECEIVE-specific empty state UI
(reuse the same EmptyState component or the SEND empty-state markup) whenever
settlementList.length === 0 for the RECEIVE case, ensuring the UI shows a
helpful message/icon instead of a blank screen; keep the existing mapping for
non-empty lists and place the empty-state rendering inside the same conditional
that now guards S.SettlementListWrapper.
- Around line 56-59: ESLint flags using components before they are defined; move
the declarations of the subcomponents MainHeader, SettlementBanner, and
SettlementList so they appear before the HomePage component definition (exported
HomePage function) in the file; locate the functions or const components named
MainHeader, SettlementBanner, and SettlementList and cut/paste their full
declarations to above the HomePage declaration so the identifiers are defined
prior to use.
- Line 71: The logo Button in HomePage currently calls navigate(ROUTE.login)
which likely redirects authenticated users to the login page; either change the
click target to navigate(ROUTE.home) if the intended behavior is to return to
home, or implement an auth guard inside the Button's onClick that checks the
current auth state (e.g., isAuthenticated) and navigates to ROUTE.login only
when unauthenticated otherwise navigate(ROUTE.home); update the Button's onClick
handler (the element using navigate and ROUTE in HomePage) accordingly.
---
Nitpick comments:
In `@src/app/Router.tsx`:
- Line 126: 빈 줄에 불필요한 공백이 있어 Prettier(ESLint prettier/prettier) 에러가 발생합니다;
Router.tsx 파일의 Router 컴포넌트(또는 해당 파일 내 빈 줄 위치)를 열어 문제의 빈 줄(대략 파일 중간, 주석/구성 사이의 빈
줄)을 찾아 trailing whitespace를 삭제하고 빈 줄을 완전히 비워 저장하여 Prettier 오류를 해결하세요.
In `@src/pages/home/HomePage.tsx`:
- Around line 69-92: The MainHeader (Header) JSX props block (the
leftButtonContent/rightButtonContent and bgColor props around the MainHeader
usage) has extra indentation causing prettier/prettier lint errors; fix by
reformatting that JSX so props are indented consistently (e.g., align props
under the opening tag) and run prettier --write (or apply your editor's
autoformat) to normalize spacing for the MainHeader and its
leftButtonContent/rightButtonContent prop values.
- Around line 192-205: The sort button (Button with
onClick={handleSortOptionClick} rendering Text, Next and using sortToggle) is
shown for both SEND and RECEIVE but only affects RECEIVE; update the render to
conditionally show this block only when settlementType === 'RECEIVE' (i.e., wrap
or gate the Button/Next/Text JSX with a check against settlementType) so the
control is hidden for SEND until you replace it with the Select component per
the TODO; keep existing handlers (handleSortOptionClick, sortToggle) and styles
unchanged.
In `@src/pages/paymentManagement/index.ts`:
- Line 1: 파일 끝에 줄바꿈을 추가하고 중괄호 내부 공백을 Prettier 스타일에 맞게 고치세요: export 구문 "export
{default as PaymentManagementPage} from './PaymentManagementPage';"에서 중괄호 안을
"export { default as PaymentManagementPage } from './PaymentManagementPage';"로
변경하고 파일 끝에 단일 개행 문자를 추가하여 prettier/prettier 오류를 해소하세요.
In `@src/pages/paymentManagement/PaymentManagementPage.tsx`:
- Around line 1-7: Replace the placeholder raw HTML in the PaymentManagementPage
function with project design-system components: use Text (or Heading) instead of
<h1> and Flex/Box wrappers instead of <div>, and swap the English label "Payment
Management" for the Korean equivalent (e.g., "입금 관리"); update
PaymentManagementPage to import and use the design-system components
(Text/Heading, Flex/Box) so the page matches the app's styling conventions.
src/pages/home/HomePage.tsx
Outdated
Comment on lines
207
to
220
| {settlementList.length > 0 && settlementType === 'RECEIVE' && ( | ||
| <S.SettlementListWrapper> | ||
| {settlementList.map((data) => ( | ||
| <HomeExpenseItem | ||
| key={data.id} | ||
| date={data.date} | ||
| groupName={data.groupName} | ||
| totalAmount={data.totalAmount} | ||
| paidMember={data.paidMember} | ||
| totalMember={data.totalMember} | ||
| /> | ||
| ))} | ||
| </S.SettlementListWrapper> | ||
| )} |
There was a problem hiding this comment.
RECEIVE 탭의 빈 목록 상태(empty state)가 없습니다.
settlementType === 'RECEIVE'이면서 settlementList.length === 0인 경우 아무것도 렌더링되지 않아 사용자는 빈 화면만 보게 됩니다. SEND 탭과 같이 empty state UI를 추가하는 것을 권장합니다.
💡 수정 제안
{settlementList.length > 0 && settlementType === 'RECEIVE' && (
<S.SettlementListWrapper>
{settlementList.map((data) => (
<HomeExpenseItem ... />
))}
</S.SettlementListWrapper>
)}
+{settlementList.length === 0 && settlementType === 'RECEIVE' && (
+ <Flex
+ direction="column"
+ py={20}
+ justifyContent="center"
+ alignItems="center"
+ flexGrow={1}
+ gap={20}
+ >
+ <Text variant="body2R" color="semantic.text.subtle">
+ 아직 진행중인 정산이 없어요.
+ </Text>
+ </Flex>
+)}📝 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.
Suggested change
| {settlementList.length > 0 && settlementType === 'RECEIVE' && ( | |
| <S.SettlementListWrapper> | |
| {settlementList.map((data) => ( | |
| <HomeExpenseItem | |
| key={data.id} | |
| date={data.date} | |
| groupName={data.groupName} | |
| totalAmount={data.totalAmount} | |
| paidMember={data.paidMember} | |
| totalMember={data.totalMember} | |
| /> | |
| ))} | |
| </S.SettlementListWrapper> | |
| )} | |
| {settlementList.length > 0 && settlementType === 'RECEIVE' && ( | |
| <S.SettlementListWrapper> | |
| {settlementList.map((data) => ( | |
| <HomeExpenseItem | |
| key={data.id} | |
| date={data.date} | |
| groupName={data.groupName} | |
| totalAmount={data.totalAmount} | |
| paidMember={data.paidMember} | |
| totalMember={data.totalMember} | |
| /> | |
| ))} | |
| </S.SettlementListWrapper> | |
| )} | |
| {settlementList.length === 0 && settlementType === 'RECEIVE' && ( | |
| <Flex | |
| direction="column" | |
| py={20} | |
| justifyContent="center" | |
| alignItems="center" | |
| flexGrow={1} | |
| gap={20} | |
| > | |
| <Text variant="body2R" color="semantic.text.subtle"> | |
| 아직 진행중인 정산이 없어요. | |
| </Text> | |
| </Flex> | |
| )} |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/pages/home/HomePage.tsx` around lines 207 - 220, The RECEIVE branch
currently renders nothing when settlementType === 'RECEIVE' and
settlementList.length === 0; update the conditional around SettlementListWrapper
(the block using settlementType, settlementList and HomeExpenseItem) to render a
RECEIVE-specific empty state UI (reuse the same EmptyState component or the SEND
empty-state markup) whenever settlementList.length === 0 for the RECEIVE case,
ensuring the UI shows a helpful message/icon instead of a blank screen; keep the
existing mapping for non-empty lists and place the empty-state rendering inside
the same conditional that now guards S.SettlementListWrapper.
There was a problem hiding this comment.
Actionable comments posted: 4
🤖 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/pages/home/HomePage.tsx`:
- Line 233: The empty-state message shown under the COMPLETED tab is wrong —
replace the string "아직 진행중인 정산이 없어요." with a message that indicates there are no
completed settlements (e.g., "완료된 정산이 없어요.") inside the HomePage component where
the COMPLETED tab's empty list is rendered; locate the JSX in HomePage.tsx that
currently renders that exact string and update it to the correct completed-tab
text (or the corresponding i18n key if the app uses localization).
- Around line 208-221: The IN_PROGRESS tab renders nothing when settlementList
is empty; update the JSX handling for settlementType === 'IN_PROGRESS' in
HomePage to render an empty state component (same UI used by COMPLETED tab) when
settlementList.length === 0: inside the conditional that currently renders
S.SettlementListWrapper and HomeExpenseItem map, add a branch to display the
same empty state element (or a shared EmptyState component) when settlementList
is empty so users see a meaningful message instead of a blank screen.
- Around line 65-95: The JSX in the MainHeader function has incorrect
indentation for the <Header> props (the entire return block is over-indented),
causing Prettier/ESLint "Delete ··"/"Insert ··" complaints; fix by reformatting
the return JSX of MainHeader so the <Header> opening tag and its props align
with the component return (matching project Prettier settings) or simply run
prettier --write on this file to apply the project's formatting rules; focus
edits around the MainHeader return block and the <Header> component usage to
ensure props (leftButtonContent, rightButtonContent, bgColor) and the closing />
are correctly indented.
In `@src/shared/ui/Chip/index.styles.ts`:
- Line 45: Prettier rejects the current ternary in the styled cursor
declaration; update the cursor line that uses the onClick prop (the expression
inside ${({ onClick }) => ...}) to wrap the ternary in parentheses so it becomes
${({ onClick }) => (onClick ? 'pointer' : 'default')}, ensuring the change is
applied in the styled component where the cursor is defined.
---
Duplicate comments:
In `@src/pages/home/HomePage.tsx`:
- Around line 16-18: Reorder the imports so absolute (aliased) imports come
before relative imports to satisfy the import/order ESLint rule: move Button,
Header, Chip (from '@/shared/ui/...') above the relative import of
HomeExpenseItem (./ui/HomeExpenseItem), ensuring the import list places all
'@/...' entries before './...' entries.
- Around line 57-60: The ESLint no-use-before-define error occurs because the
subcomponents MainHeader, SettlementBanner, and SettlementList are declared
after the HomePage function; move the declarations of MainHeader,
SettlementBanner, and SettlementList so they appear before the HomePage function
definition (or alternatively convert them to named const arrow functions
exported/declared prior) to ensure HomePage references are to already-defined
symbols and resolve the lint error.
- Line 72: The logo Button currently always calls navigate(ROUTE.login) which
sends authenticated users to the login page; update the Button's onClick handler
in HomePage.tsx (the Button rendering the logo) to navigate to the appropriate
route for logged-in users instead of ROUTE.login — e.g., use a conditional that
checks authentication state (isAuthenticated or currentUser) and calls
navigate(ROUTE.home) or navigate(ROUTE.dashboard) for authenticated users,
falling back to navigate(ROUTE.login) for unauthenticated users.
src/pages/home/HomePage.tsx
Outdated
Comment on lines
208
to
221
| {settlementList.length > 0 && settlementType === 'IN_PROGRESS' && ( | ||
| <S.SettlementListWrapper> | ||
| {settlementList.map((data) => ( | ||
| <HomeExpenseItem | ||
| key={data.id} | ||
| date={data.date} | ||
| groupName={data.groupName} | ||
| totalAmount={data.totalAmount} | ||
| paidMember={data.paidMember} | ||
| totalMember={data.totalMember} | ||
| /> | ||
| ))} | ||
| </S.SettlementListWrapper> | ||
| )} |
There was a problem hiding this comment.
IN_PROGRESS 탭의 빈 목록 상태(empty state)가 없습니다.
settlementType === 'IN_PROGRESS'이지만 settlementList.length === 0인 경우 아무것도 렌더링되지 않아 사용자에게 빈 화면이 표시됩니다. API 연동 후 빈 결과가 반환될 때를 대비해 COMPLETED 탭과 동일하게 empty state를 추가해야 합니다.
💡 수정 제안
{settlementList.length > 0 && settlementType === 'IN_PROGRESS' && (
<S.SettlementListWrapper>
{settlementList.map((data) => (
<HomeExpenseItem ... />
))}
</S.SettlementListWrapper>
)}
+{settlementList.length === 0 && settlementType === 'IN_PROGRESS' && (
+ <Flex
+ direction="column"
+ py={20}
+ justifyContent="center"
+ alignItems="center"
+ flexGrow={1}
+ gap={20}
+ >
+ <S.NoSettlementImg src={CoinImg} alt="" />
+ <Text variant="body2R" color="semantic.text.subtle">
+ 아직 진행중인 정산이 없어요.
+ </Text>
+ </Flex>
+)}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/pages/home/HomePage.tsx` around lines 208 - 221, The IN_PROGRESS tab
renders nothing when settlementList is empty; update the JSX handling for
settlementType === 'IN_PROGRESS' in HomePage to render an empty state component
(same UI used by COMPLETED tab) when settlementList.length === 0: inside the
conditional that currently renders S.SettlementListWrapper and HomeExpenseItem
map, add a branch to display the same empty state element (or a shared
EmptyState component) when settlementList is empty so users see a meaningful
message instead of a blank screen.
src/pages/home/HomePage.tsx
Outdated
| </Flex> | ||
| <S.NoSettlementImg src={CoinImg} alt="" /> | ||
| <Text variant="body2R" color="semantic.text.subtle"> | ||
| 아직 진행중인 정산이 없어요. |
There was a problem hiding this comment.
COMPLETED 탭의 빈 목록 안내 문구가 잘못되었습니다.
"아직 진행중인 정산이 없어요."는 IN_PROGRESS 탭에 어울리는 문구입니다. COMPLETED 탭에서는 완료된 정산이 없음을 안내해야 합니다.
🐛 수정 제안
- 아직 진행중인 정산이 없어요.
+ 아직 완료된 정산이 없어요.📝 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.
Suggested change
| 아직 진행중인 정산이 없어요. | |
| 아직 완료된 정산이 없어요. |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/pages/home/HomePage.tsx` at line 233, The empty-state message shown under
the COMPLETED tab is wrong — replace the string "아직 진행중인 정산이 없어요." with a
message that indicates there are no completed settlements (e.g., "완료된 정산이 없어요.")
inside the HomePage component where the COMPLETED tab's empty list is rendered;
locate the JSX in HomePage.tsx that currently renders that exact string and
update it to the correct completed-tab text (or the corresponding i18n key if
the app uses localization).
| ${({ $size }) => chipSizes[$size]}; | ||
| ${({ $variant }) => chipVariants[$variant]}; | ||
| white-space: nowrap; | ||
| cursor: ${({ onClick }) => onClick ? 'pointer' : 'default'}; |
There was a problem hiding this comment.
Prettier 오류: 삼항 연산자에 괄호를 추가하세요.
prettier/prettier 규칙 위반으로 CI가 실패할 수 있습니다.
🐛 수정 제안
- cursor: ${({ onClick }) => onClick ? 'pointer' : 'default'};
+ cursor: ${({ onClick }) => (onClick ? 'pointer' : 'default')};📝 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.
Suggested change
| cursor: ${({ onClick }) => onClick ? 'pointer' : 'default'}; | |
| cursor: ${({ onClick }) => (onClick ? 'pointer' : 'default')}; |
🧰 Tools
🪛 ESLint
[error] 45-45: Replace onClick·?·'pointer'·:·'default' with (onClick·?·'pointer'·:·'default')
(prettier/prettier)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/shared/ui/Chip/index.styles.ts` at line 45, Prettier rejects the current
ternary in the styled cursor declaration; update the cursor line that uses the
onClick prop (the expression inside ${({ onClick }) => ...}) to wrap the ternary
in parentheses so it becomes ${({ onClick }) => (onClick ? 'pointer' :
'default')}, ensuring the change is applied in the styled component where the
cursor is defined.
yoouyeon
reviewed
Feb 19, 2026
Contributor
yoouyeon
left a comment
yoouyeon
left a comment
There was a problem hiding this comment.
홈 디자인 변경된 것 확인했습니다! 고생하셨어용 🥹👏
코드래빗이 리뷰한 것 말고도 지금 파일들에 전반적으로 prettier가 적용되지 않은 것 같더라고요..!
그것도 같이 수정하면 좋을 것 같습니당!!
src/pages/home/HomePage.tsx
Outdated
| <Header | ||
| type="TitleCenter" | ||
| leftButtonContent={ | ||
| <Button variant="text" onClick={() => navigate(ROUTE.login)}> |
Contributor
There was a problem hiding this comment.
콘솔에 아래 에러가 출력되는데, 아마도 버튼과 버튼이 중첩되어서 발생하는 문제 같습니다!
최상위 버튼 컴포넌트를 제거하면 에러가 해결될 것 같아요
이 이슈랑 별개로,,,
기존 헤더 컴포넌트가 홈이랑 마이페이지에서 사용하는 헤더 모양에서는 잘 안 맞는 것 같더라구요 🥹
MD-8 헤더 수정하는 이슈에서 함께 수정하면 괜찮을 것 같습니다..!
(이슈에 이 내용 같이 적어둘게요!)
Contributor
Author
There was a problem hiding this comment.
헤더 UI가 좀 다른 것 같아서 홈/마이페이지용으로 새로 만들까 고민했습니다. DOM 에러만 수정하고, 헤더 UI는 태그해주신 테스크에서 수정하도록 하겠습니다!
Contributor
There was a problem hiding this comment.
이 파일 안에 홈에서 사용하는 ui 컴포넌트들이 함께 들어가 있는데,
저희 FSD 구조 활용해서 ui 컴포넌트들은 따로 ui 디렉토리나 features 쪽에 만들어서 넣어두고 page에서는 조합하는 형태로 해보기로 했던 걸로 기억하고 있거든요..!
api 코드 추가되면서 코드가 더 복잡해지기 전에 여기서 디렉토리 정리를 먼저 해두면 어떨까 싶습니다!
Contributor
Author
There was a problem hiding this comment.
아 넵! FSD 구조에 맞게 이동시키겠습니다!
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
src/pages/home/ui/HomePageSection/index.style.ts (1)
4-10:SelectGroupButton에 버튼 스타일 초기화 추가 고려.
cursor: pointer가 없으면 일부 브라우저에서 버튼 위에서 기본 화살표 커서가 표시되고,border: none이 없으면 글로벌 CSS 초기화 설정이 없는 환경에서 기본 테두리가 노출될 수 있습니다.♻️ 개선 제안
export const SelectGroupButton = styled.button` display: flex; align-items: center; gap: ${({ theme }) => theme.unit[4]}; background: transparent; + border: none; + cursor: pointer; + padding: 0; color: ${({ theme }) => theme.color.semantic.orange.default}; `;🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/pages/home/ui/HomePageSection/index.style.ts` around lines 4 - 10, SelectGroupButton currently lacks button reset styles which can show browser defaults; update the styled component SelectGroupButton to include at minimum cursor: pointer and border: none (and optionally background: transparent already present) so the button consistently shows pointer cursor and no default border across browsers; locate the SelectGroupButton definition and add those CSS properties to the template literal.
🤖 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/pages/home/ui/HomePageSection/index.tsx`:
- Around line 53-55: Remove the unused navigate declaration from the MainHeader
component to fix the ESLint error: in MainHeader(), delete the const navigate =
useNavigate(); line (leftButtonOnClick is currently commented out so navigate is
unused); when you later implement the logo click handler (leftButtonOnClick) you
can reintroduce useNavigate().
- Around line 13-18: ESLint import/order flagged that absolute imports Button,
Header, and Chip are placed after relative imports; reorder the imports in
index.tsx so that the absolute imports (Button, Header, Chip from
'@/shared/ui/...') appear before the relative imports (HomeExpenseItem from
'../HomeExpenseItem' and S from './index.style'); update the import block
accordingly to satisfy import/order while keeping the same identifiers (Button,
Header, Chip, HomeExpenseItem, S).
---
Duplicate comments:
In `@src/pages/home/ui/HomePageSection/index.tsx`:
- Around line 191-204: The IN_PROGRESS branch currently renders nothing when
settlementList is empty; update the conditional render for settlementType ===
'IN_PROGRESS' to include an empty-state component (same one used by the
COMPLETED tab) when settlementList.length === 0 instead of rendering nothing —
locate the block that uses settlementList, settlementType and
S.SettlementListWrapper and render the empty state UI (or a dedicated EmptyState
component) in that branch while preserving the existing map over settlementList
and HomeExpenseItem when items exist.
- Around line 215-217: In the HomePageSection component (index.tsx) where the
COMPLETED tab renders the empty-state Text element (Text with variant="body2R"
color="semantic.text.subtle"), replace the incorrect message "아직 진행중인 정산이 없어요."
with a message appropriate for completed items (e.g. "아직 완료된 정산이 없어요."),
ensuring the change is only applied to the COMPLETED tab branch so the
IN_PROGRESS tab message remains unchanged.
---
Nitpick comments:
In `@src/pages/home/ui/HomePageSection/index.style.ts`:
- Around line 4-10: SelectGroupButton currently lacks button reset styles which
can show browser defaults; update the styled component SelectGroupButton to
include at minimum cursor: pointer and border: none (and optionally background:
transparent already present) so the button consistently shows pointer cursor and
no default border across browsers; locate the SelectGroupButton definition and
add those CSS properties to the template literal.
Comment on lines
+13
to
+18
| import Flex from '@/shared/ui/Flex'; | ||
| import HomeExpenseItem from '../HomeExpenseItem'; | ||
| import * as S from './index.style'; | ||
| import Button from '@/shared/ui/Button'; | ||
| import Header from '@/shared/ui/Header'; | ||
| import Chip from '@/shared/ui/Chip'; |
There was a problem hiding this comment.
ESLint import/order 오류: 절대 경로 import를 상대 경로 import 앞으로 이동하세요.
Button, Header, Chip(절대 경로 @/shared/ui/...) import가 상대 경로 import(../HomeExpenseItem, ./index.style) 뒤에 위치해 CI가 실패합니다.
♻️ 수정 제안
import Flex from '@/shared/ui/Flex';
-import HomeExpenseItem from '../HomeExpenseItem';
-import * as S from './index.style';
import Button from '@/shared/ui/Button';
import Header from '@/shared/ui/Header';
import Chip from '@/shared/ui/Chip';
+import HomeExpenseItem from '../HomeExpenseItem';
+import * as S from './index.style';📝 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.
Suggested change
| import Flex from '@/shared/ui/Flex'; | |
| import HomeExpenseItem from '../HomeExpenseItem'; | |
| import * as S from './index.style'; | |
| import Button from '@/shared/ui/Button'; | |
| import Header from '@/shared/ui/Header'; | |
| import Chip from '@/shared/ui/Chip'; | |
| import Flex from '@/shared/ui/Flex'; | |
| import Button from '@/shared/ui/Button'; | |
| import Header from '@/shared/ui/Header'; | |
| import Chip from '@/shared/ui/Chip'; | |
| import HomeExpenseItem from '../HomeExpenseItem'; | |
| import * as S from './index.style'; |
🧰 Tools
🪛 ESLint
[error] 14-14: ../HomeExpenseItem import should occur after import of @/shared/ui/Chip
(import/order)
[error] 15-15: ./index.style import should occur after import of @/shared/ui/Chip
(import/order)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/pages/home/ui/HomePageSection/index.tsx` around lines 13 - 18, ESLint
import/order flagged that absolute imports Button, Header, and Chip are placed
after relative imports; reorder the imports in index.tsx so that the absolute
imports (Button, Header, Chip from '@/shared/ui/...') appear before the relative
imports (HomeExpenseItem from '../HomeExpenseItem' and S from './index.style');
update the import block accordingly to satisfy import/order while keeping the
same identifiers (Button, Header, Chip, HomeExpenseItem, S).
Comment on lines
+53
to
+55
| export function MainHeader() { | ||
| const navigate = useNavigate(); | ||
| const theme = useTheme(); |
There was a problem hiding this comment.
MainHeader의 미사용 navigate 변수가 ESLint 오류를 발생시켜 CI를 막습니다.
leftButtonOnClick이 주석 처리되어 navigate가 실제로 사용되지 않습니다. CI 통과를 위해 해당 선언을 제거하고, 추후 로고 클릭 핸들러를 구현할 때 다시 추가하세요.
🐛 수정 제안
export function MainHeader() {
- const navigate = useNavigate();
const theme = useTheme();📝 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.
Suggested change
| export function MainHeader() { | |
| const navigate = useNavigate(); | |
| const theme = useTheme(); | |
| export function MainHeader() { | |
| const theme = useTheme(); |
🧰 Tools
🪛 ESLint
[error] 54-54: 'navigate' is assigned a value but never used. Allowed unused vars must match /^_/u.
(@typescript-eslint/no-unused-vars)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/pages/home/ui/HomePageSection/index.tsx` around lines 53 - 55, Remove the
unused navigate declaration from the MainHeader component to fix the ESLint
error: in MainHeader(), delete the const navigate = useNavigate(); line
(leftButtonOnClick is currently commented out so navigate is unused); when you
later implement the logo click handler (leftButtonOnClick) you can reintroduce
useNavigate().
Contributor
Author
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
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
3 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.
💻 작업 내용
=> 해당 코드는 임시 코드로, 추후 Select 컴포넌트 구현 테스크에서 적용까지 작업하겠습니다.
Summary by CodeRabbit