Feature/policy api#63
Merged
Merged
Conversation
|
Warning Rate limit exceeded
⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (3)
📝 WalkthroughWalkthrough다수의 컴포넌트에서 인라인 스타일을 Tailwind 클래스로 전환하고 반응형 레이아웃을 도입했습니다. GradientButton API가 변경되었고, 새로운 훅 usePieChartSize가 추가되어 MainPage의 PieChart에 크기/스트로크 값을 전달합니다. 일부 컴포넌트(예: FamilyDetailModal)가 삭제되었습니다. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
🚥 Pre-merge checks | ❌ 3❌ Failed checks (3 warnings)
✏️ 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: 6
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/components/common/GradientButton.tsx (1)
3-16:⚠️ Potential issue | 🟠 MajorGradientButton API 변경이 호출부 마이그레이션 없이 머지되면 깨집니다.
type Props에서width/height속성을 제거했으나, 다음 파일들이 여전히 제거된 props를 전달하고 있습니다:
src/page/Admin/AdminLoginPage.tsx(lines 170-171):width={120},height={16}사용 중src/page/Admin/components/FamilyDetailModal.tsx(lines 108-109):width={20},height={8}사용 중타입 에러(또는 타입 우회 시 사이즈 회귀) 위험이 큽니다. 이 PR에서 호출부를 함께 정리하거나, 임시 하위호환(deprecated props 매핑)을 두는 편이 안전합니다.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/common/GradientButton.tsx` around lines 3 - 16, The GradientButton API removed width/height props but callers (AdminLoginPage.tsx and FamilyDetailModal.tsx) still pass them; restore backward-compatibility by reintroducing optional width?: number | string and height?: number | string to the Props in GradientButton and map them into the rendered element's style (or translate numeric values into appropriate CSS units) while marking them deprecated in a comment; update the component's prop handling in GradientButton to prefer explicit className/buttonClassName behavior but apply width/height to the element style when provided so existing callers keep working without migrating immediately.
🧹 Nitpick comments (5)
src/hooks/usePieChartSize.ts (1)
11-11: 주석과 코드 불일치주석에는 "vw의 3%"라고 되어 있지만 실제 코드는
vw * 0.04(4%)입니다.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/hooks/usePieChartSize.ts` at line 11, 주석과 실제 계산이 불일치합니다: usePieChartSize.ts에서 strokeWidth를 계산하는 식이 vw * 0.04(4%)인데 주석은 "vw의 3%"라고 돼 있습니다; 일관성을 위해 둘 중 하나를 고치세요 — 주석이 옳다면 strokeWidth 계산을 vw * 0.03으로 변경하고, 계산이 옳다면 주석을 "vw의 4%" 또는 "vw * 0.04"로 수정하세요 (참조: 변수 vw 및 속성 strokeWidth).src/index.css (1)
153-194: 전역 CSS 오버라이드 사용에 대한 유지보수 고려사항
!important를 사용한 전역 Tailwind 클래스 오버라이드는 특수한 경우에 유용하지만, 향후 유지보수 시 예상치 못한 스타일 충돌을 일으킬 수 있습니다. Tailwind의 반응형 접두사(xs:text-sm등)나tailwind.config.js의 커스텀 유틸리티 확장을 활용하는 것이 더 일관된 접근 방식일 수 있습니다.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/index.css` around lines 153 - 194, The media query block using `@media` (max-width: 400px) that overrides Tailwind classes (.text-xs, .text-sm, .text-base, .text-lg, .text-xl, .text-2xl, .text-3xl, .gap-3, .gap-4, .mb-4, .p-4, .px-6) with !important should be removed and replaced by Tailwind-native solutions: either add a small-screen breakpoint (e.g., "xs": "400px") in tailwind.config.js and use responsive prefixes like xs:text-sm, xs:gap-3 in your templates, or define custom utilities/components in tailwind.config.js (theme.extend or plugins) that encapsulate the desired sizes so you no longer need the global !important overrides in the CSS.src/components/common/GradientButton.tsx (1)
36-37:borderRadius는 truthy 체크 대신 명시적 undefined 체크를 권장합니다.Line 36, Line 46의
borderRadius ? ...는0을 유효값으로 처리하지 못합니다.개선 diff
- borderRadius: borderRadius ? `${borderRadius}px` : undefined, + borderRadius: borderRadius !== undefined ? `${borderRadius}px` : undefined, ... - borderRadius: borderRadius ? `${borderRadius}px` : undefined, + borderRadius: borderRadius !== undefined ? `${borderRadius}px` : undefined,Also applies to: 46-47
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/common/GradientButton.tsx` around lines 36 - 37, The component GradientButton uses a truthy check for borderRadius which treats 0 as falsy; update the checks in GradientButton (where you set style.borderRadius) to use an explicit undefined check (e.g., borderRadius !== undefined) so a value of 0 is preserved, and apply the same change to the other occurrence that sets borderRadius (the second style block around lines 46-47) to ensure consistent behavior.src/page/Policy/components/UserInfoCard.tsx (1)
162-164: 불필요한 JSX 공백 노드를 제거해주세요.
Line 163의{" "}는 가독성만 떨어뜨리고 실질적인 UI 이점이 없습니다.정리 제안 diff
- <div className="flex flex-col tablet-lg:flex-row desktop:flex-col gap-2"> - {" "} + <div className="flex flex-col tablet-lg:flex-row desktop:flex-col gap-2">🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/page/Policy/components/UserInfoCard.tsx` around lines 162 - 164, In UserInfoCard.tsx remove the unnecessary JSX whitespace node {" "} that appears before the GradientButton (the fragment around the GradientButton with navigate("/shared-data")), i.e. delete the {" "} token so the JSX reads without the redundant space and retains the existing <div className="flex..."> and GradientButton usage unchanged.src/page/Main/MainPage.tsx (1)
189-193: 불필요한 공백 텍스트 노드를 제거하는 편이 좋습니다.
Line 193의{" "}는 렌더 결과에 의미가 없고 JSX 노이즈만 증가시킵니다.정리 제안 diff
- <PieChart - sharedPoolData={sharedPoolData} - size={pieSize} - strokeWidth={pieStrokeWidth} - />{" "} + <PieChart + sharedPoolData={sharedPoolData} + size={pieSize} + strokeWidth={pieStrokeWidth} + />🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/page/Main/MainPage.tsx` around lines 189 - 193, Remove the unnecessary JSX whitespace text node after the PieChart component in MainPage.tsx — locate the <PieChart ... /> usage (props: sharedPoolData, size=pieSize, strokeWidth=pieStrokeWidth) and delete the trailing {" "} so the component is rendered without the stray text node; then reformat the surrounding JSX to ensure no extra whitespace remains.
🤖 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/hooks/usePieChartSize.ts`:
- Around line 5-14: The calc function in usePieChartSize currently accesses
window.innerWidth directly causing ReferenceError in SSR/hydration; update calc
(and any callers) to guard access by checking typeof window !== "undefined"
before reading window.innerWidth or accept an optional width parameter (e.g.,
calc(width?: number)) and use a sensible default fallback (like 1024) when
window is not available, then compute size/strokeWidth the same way; ensure
usePieChartSize calls the guarded/parameterized calc during server render to
avoid direct window access.
In `@src/index.css`:
- Around line 196-237: There is a duplicated `@media` (max-width: 400px) block
that repeats the same class overrides (.text-xs, .text-sm, .text-base, .text-lg,
.text-xl, .text-2xl, .text-3xl, .gap-3, .gap-4, .mb-4, .p-4, .px-6); remove one
of the duplicate blocks so only a single `@media` (max-width: 400px) block
remains, keeping the intended font-size and spacing overrides, and scan for any
other identical media-query duplicates to collapse into that single block (use
the existing selectors like .text-base and .px-6 to locate the duplicates).
In `@src/page/Main/components/FamilyMemberList.tsx`:
- Around line 42-44: Remove the unnecessary whitespace text node in the JSX
inside FamilyMemberList.tsx: delete the {" "} token that sits between the
wrapping div and the members.map rendering so the container div (className="grid
...") directly contains {members.map((member) => (...))}; update the JSX around
the members.map expression to eliminate that stray text node and ensure
formatting/indentation remains correct.
In `@src/page/Policy/components/DataRemainingCard.tsx`:
- Around line 34-38: The img elements in the DataRemainingCard component are
missing alt attributes; update the JSX that checks icon === "share" (using
shareIcon and personIcon) to include explicit alt attributes — if these images
are purely decorative, add alt=""; otherwise provide descriptive text like
"share icon" and "person icon" to improve accessibility.
In `@src/page/Support/Support.tsx`:
- Line 136: Remove the stray JSX text node `{" "}` in the Support component
render (the extraneous whitespace inside the Support.tsx JSX) — locate the
`Support` component/JSX block that contains `{" "}` and delete that token so no
unnecessary text node is emitted; ensure surrounding JSX still renders correctly
and spacing is handled via CSS or proper JSX elements instead of `{" "}`.
In `@tailwind.config.js`:
- Around line 63-69: The custom fontSize utilities "responsive-xs",
"responsive-sm", "responsive-base", "responsive-lg", and "responsive-xl" in
tailwind.config.js are unused; either remove them from the fontSize section or
update components to use these utilities. Locate the fontSize declaration (the
keys responsive-*) in tailwind.config.js and either delete those entries to
avoid dead CSS or replace existing class usage in your components (e.g., update
className strings or template literals to use "text-responsive-sm" etc.) so the
utilities are actually applied across the codebase.
---
Outside diff comments:
In `@src/components/common/GradientButton.tsx`:
- Around line 3-16: The GradientButton API removed width/height props but
callers (AdminLoginPage.tsx and FamilyDetailModal.tsx) still pass them; restore
backward-compatibility by reintroducing optional width?: number | string and
height?: number | string to the Props in GradientButton and map them into the
rendered element's style (or translate numeric values into appropriate CSS
units) while marking them deprecated in a comment; update the component's prop
handling in GradientButton to prefer explicit className/buttonClassName behavior
but apply width/height to the element style when provided so existing callers
keep working without migrating immediately.
---
Nitpick comments:
In `@src/components/common/GradientButton.tsx`:
- Around line 36-37: The component GradientButton uses a truthy check for
borderRadius which treats 0 as falsy; update the checks in GradientButton (where
you set style.borderRadius) to use an explicit undefined check (e.g.,
borderRadius !== undefined) so a value of 0 is preserved, and apply the same
change to the other occurrence that sets borderRadius (the second style block
around lines 46-47) to ensure consistent behavior.
In `@src/hooks/usePieChartSize.ts`:
- Line 11: 주석과 실제 계산이 불일치합니다: usePieChartSize.ts에서 strokeWidth를 계산하는 식이 vw *
0.04(4%)인데 주석은 "vw의 3%"라고 돼 있습니다; 일관성을 위해 둘 중 하나를 고치세요 — 주석이 옳다면 strokeWidth 계산을
vw * 0.03으로 변경하고, 계산이 옳다면 주석을 "vw의 4%" 또는 "vw * 0.04"로 수정하세요 (참조: 변수 vw 및 속성
strokeWidth).
In `@src/index.css`:
- Around line 153-194: The media query block using `@media` (max-width: 400px)
that overrides Tailwind classes (.text-xs, .text-sm, .text-base, .text-lg,
.text-xl, .text-2xl, .text-3xl, .gap-3, .gap-4, .mb-4, .p-4, .px-6) with
!important should be removed and replaced by Tailwind-native solutions: either
add a small-screen breakpoint (e.g., "xs": "400px") in tailwind.config.js and
use responsive prefixes like xs:text-sm, xs:gap-3 in your templates, or define
custom utilities/components in tailwind.config.js (theme.extend or plugins) that
encapsulate the desired sizes so you no longer need the global !important
overrides in the CSS.
In `@src/page/Main/MainPage.tsx`:
- Around line 189-193: Remove the unnecessary JSX whitespace text node after the
PieChart component in MainPage.tsx — locate the <PieChart ... /> usage (props:
sharedPoolData, size=pieSize, strokeWidth=pieStrokeWidth) and delete the
trailing {" "} so the component is rendered without the stray text node; then
reformat the surrounding JSX to ensure no extra whitespace remains.
In `@src/page/Policy/components/UserInfoCard.tsx`:
- Around line 162-164: In UserInfoCard.tsx remove the unnecessary JSX whitespace
node {" "} that appears before the GradientButton (the fragment around the
GradientButton with navigate("/shared-data")), i.e. delete the {" "} token so
the JSX reads without the redundant space and retains the existing <div
className="flex..."> and GradientButton usage unchanged.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: e9332ce3-68c6-41e5-a468-24b39d8ed936
📒 Files selected for processing (21)
src/components/Header.tsxsrc/components/common/GradientButton.tsxsrc/components/common/PolicyScroll.tsxsrc/hooks/usePieChartSize.tssrc/index.csssrc/layout/Layout.tsxsrc/page/Detail/DetailPage.tsxsrc/page/Login/LoginPage.tsxsrc/page/Main/MainPage.tsxsrc/page/Main/components/FamilyMemberList.tsxsrc/page/Policy/Policy.tsxsrc/page/Policy/components/DataRemainingCard.tsxsrc/page/Policy/components/Permisssion.tsxsrc/page/Policy/components/UserInfoCard.tsxsrc/page/PolicyDetail/components/AppPolicyFilters.tsxsrc/page/PolicyDetail/components/BlockTab.tsxsrc/page/PolicyDetail/components/LimitTab.tsxsrc/page/SharedData/components/DataTransferCard.tsxsrc/page/SharedData/components/SharedPoolCard.tsxsrc/page/Support/Support.tsxtailwind.config.js
Comment on lines
+5
to
+14
| const calc = () => { | ||
| const vw = window.innerWidth; | ||
| if (vw >= 1400) return { size: 320, strokeWidth: 25 }; | ||
| if (vw >= 768) | ||
| return { | ||
| size: Math.round(Math.min(vw * 0.5, 460)), | ||
| strokeWidth: Math.round(Math.min(vw * 0.04, 40)), // vw의 3%, 최대 40 | ||
| }; | ||
| return { size: 320, strokeWidth: 25 }; | ||
| }; |
There was a problem hiding this comment.
SSR/하이드레이션 환경에서 window 접근 시 오류 발생 가능
calc 함수가 window.innerWidth에 직접 접근하므로, SSR 환경이나 초기 하이드레이션 단계에서 ReferenceError가 발생할 수 있습니다.
🛠️ 제안된 수정
const calc = () => {
+ if (typeof window === "undefined") return { size: 320, strokeWidth: 25 };
const vw = window.innerWidth;
if (vw >= 1400) return { size: 320, strokeWidth: 25 };
if (vw >= 768)
return {
size: Math.round(Math.min(vw * 0.5, 460)),
- strokeWidth: Math.round(Math.min(vw * 0.04, 40)), // vw의 3%, 최대 40
+ strokeWidth: Math.round(Math.min(vw * 0.04, 40)), // vw의 4%, 최대 40
};
return { size: 320, strokeWidth: 25 };
};📝 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
| const calc = () => { | |
| const vw = window.innerWidth; | |
| if (vw >= 1400) return { size: 320, strokeWidth: 25 }; | |
| if (vw >= 768) | |
| return { | |
| size: Math.round(Math.min(vw * 0.5, 460)), | |
| strokeWidth: Math.round(Math.min(vw * 0.04, 40)), // vw의 3%, 최대 40 | |
| }; | |
| return { size: 320, strokeWidth: 25 }; | |
| }; | |
| const calc = () => { | |
| if (typeof window === "undefined") return { size: 320, strokeWidth: 25 }; | |
| const vw = window.innerWidth; | |
| if (vw >= 1400) return { size: 320, strokeWidth: 25 }; | |
| if (vw >= 768) | |
| return { | |
| size: Math.round(Math.min(vw * 0.5, 460)), | |
| strokeWidth: Math.round(Math.min(vw * 0.04, 40)), // vw의 4%, 최대 40 | |
| }; | |
| return { size: 320, strokeWidth: 25 }; | |
| }; |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/hooks/usePieChartSize.ts` around lines 5 - 14, The calc function in
usePieChartSize currently accesses window.innerWidth directly causing
ReferenceError in SSR/hydration; update calc (and any callers) to guard access
by checking typeof window !== "undefined" before reading window.innerWidth or
accept an optional width parameter (e.g., calc(width?: number)) and use a
sensible default fallback (like 1024) when window is not available, then compute
size/strokeWidth the same way; ensure usePieChartSize calls the
guarded/parameterized calc during server render to avoid direct window access.
Comment on lines
+34
to
+38
| {icon === "share" ? ( | ||
| <img src={shareIcon} /> | ||
| ) : ( | ||
| <img src={personIcon} /> | ||
| )} |
There was a problem hiding this comment.
접근성: alt 속성 누락
<img> 태그에 alt 속성이 없습니다. 장식용 이미지라면 빈 alt=""를 명시적으로 추가하는 것이 접근성 모범 사례입니다.
♿ 제안된 수정
{icon === "share" ? (
- <img src={shareIcon} />
+ <img src={shareIcon} alt="" />
) : (
- <img src={personIcon} />
+ <img src={personIcon} alt="" />
)}📝 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
| {icon === "share" ? ( | |
| <img src={shareIcon} /> | |
| ) : ( | |
| <img src={personIcon} /> | |
| )} | |
| {icon === "share" ? ( | |
| <img src={shareIcon} alt="" /> | |
| ) : ( | |
| <img src={personIcon} alt="" /> | |
| )} |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/page/Policy/components/DataRemainingCard.tsx` around lines 34 - 38, The
img elements in the DataRemainingCard component are missing alt attributes;
update the JSX that checks icon === "share" (using shareIcon and personIcon) to
include explicit alt attributes — if these images are purely decorative, add
alt=""; otherwise provide descriptive text like "share icon" and "person icon"
to improve accessibility.
Comment on lines
+63
to
+69
| fontSize: { | ||
| "responsive-xs": ["0.65rem", { lineHeight: "1rem" }], | ||
| "responsive-sm": ["0.75rem", { lineHeight: "1.25rem" }], | ||
| "responsive-base": ["0.8rem", { lineHeight: "1.5rem" }], | ||
| "responsive-lg": ["0.9rem", { lineHeight: "1.75rem" }], | ||
| "responsive-xl": ["1rem", { lineHeight: "1.75rem" }], | ||
| }, |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Description: Check if responsive-* font size utilities are actually used in the codebase
# Search for usage of responsive-xs, responsive-sm, etc. in source files
rg -n "responsive-(xs|sm|base|lg|xl)" --type-add 'web:*.{tsx,jsx,ts,js,css,html}' --type webRepository: pooli-dev/pooli-fe
Length of output: 489
미사용 responsive-* 폰트 사이즈 유틸리티 정리 필요
responsive-xs부터 responsive-xl까지의 폰트 사이즈 유틸리티가 정의되어 있지만, 현재 코드베이스 어디에서도 사용되지 않고 있습니다. 이 유틸리티들을 제거하거나 실제로 활용되도록 변경해야 합니다.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@tailwind.config.js` around lines 63 - 69, The custom fontSize utilities
"responsive-xs", "responsive-sm", "responsive-base", "responsive-lg", and
"responsive-xl" in tailwind.config.js are unused; either remove them from the
fontSize section or update components to use these utilities. Locate the
fontSize declaration (the keys responsive-*) in tailwind.config.js and either
delete those entries to avoid dead CSS or replace existing class usage in your
components (e.g., update className strings or template literals to use
"text-responsive-sm" etc.) so the utilities are actually applied across the
codebase.
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
1 participant
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.
이슈
✔️ 체크리스트
🔍 작업 내용
Summary by CodeRabbit
새로운 기능
스타일 개선
리팩토링
변경