[Feat/#15] 공통 하단 탭 바 UI 구현 및 라우팅 연결#16
Conversation
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
Walkthrough탭 바가 커스텀 Changes공통 UI 및 탭 바 교체
Estimated code review effort: 4 (Complex) | ~45 minutes Possibly related issues
Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (3 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
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: 2
🧹 Nitpick comments (3)
src/components/common/BottomTabBar.tsx (2)
114-119: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value디버그용
console.log제거 필요.116행, 149행의
console.log는 "터미널 확인용" 디버그 목적으로 보이며 배포 전 제거가 필요합니다.🧹 제안
onPress={() => { - console.log("일정등록 클릭"); // 터미널 확인용 로그 setIsOpen(false); router.push("/schedule"); }}onPress={() => { - console.log("일기작성 클릭"); // 터미널 확인용 로그 setIsOpen(false); router.push("/diary/write"); }}Also applies to: 146-151
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/common/BottomTabBar.tsx` around lines 114 - 119, Remove the debug-only console output from BottomTabBar so it does not ship in production. In the press handlers inside BottomTabBar, delete the `console.log` statements used for terminal checking and keep the existing `setIsOpen(false)` and `router.push(...)` behavior unchanged; make the same cleanup for both affected press actions in the component.
24-24: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value중복 export:
export function+export default병행 사용.24행에서
export function BottomTabBar로 이미 export하고 있고,_layout.tsx도 named import(import { BottomTabBar } from ...)를 사용하므로 206행의export default BottomTabBar는 불필요합니다. 경로 가이드라인은 화살표 함수+export default조합을 지양하고export function Name() {}형태를 권장합니다.♻️ 제안
-export default BottomTabBar;As per path instructions, "컴포넌트는 export function Name() {} 형태로 작성 (화살표 함수 + export default 지양)".
Also applies to: 206-206
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/common/BottomTabBar.tsx` at line 24, `BottomTabBar` is being exported twice with both a named export and a default export, but the component is already consumed via named import. Remove the redundant `export default BottomTabBar` and keep the `export function BottomTabBar(...)` declaration as the single export form, matching the component export guideline and the `_layout.tsx` import style.Source: Path instructions
components/ui/icon-symbol.tsx (1)
21-21: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueESLint(prettier) 지적: 불필요한 따옴표.
"calendar"는 유효한 식별자이므로 따옴표 없이 작성해야 한다는 정적 분석 경고가 있습니다.🔧 제안
- "calendar": "calendar-today", + calendar: "calendar-today",🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@components/ui/icon-symbol.tsx` at line 21, The icon symbol mapping in the object that includes the calendar entry should remove unnecessary quotes around the key because it is a valid identifier. Update the relevant mapping in icon-symbol.tsx so the calendar property is written as an unquoted object key, consistent with the surrounding symbol map and ESLint/prettier formatting.Source: Linters/SAST tools
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@components/ui/icon-symbol.tsx`:
- Around line 19-24: Update the icon mapping in icon-symbol.tsx so
BottomTabBar’s symbols resolve correctly instead of falling through as
undefined. Add mappings in MAPPING for the BottomTabBar icons used by
BottomTabBar.tsx, specifically calendar.badge.plus, square.and.pencil, xmark,
and plus, and keep the existing IconMapping shape intact so MaterialIcons
receives valid names.
In `@src/components/common/BottomTabBar.tsx`:
- Line 25: The BottomTabBar positioning currently ignores the insets value from
useSafeAreaInsets() and instead relies on a hardcoded top-[750px] offset, which
breaks on different screen sizes. Update BottomTabBar so the tab bar is anchored
from the bottom using insets.bottom in its style/positioning logic, and remove
the fixed vertical placement. Keep the change localized to the BottomTabBar
component and its related style usage so the tab bar adapts correctly across
devices.
---
Nitpick comments:
In `@components/ui/icon-symbol.tsx`:
- Line 21: The icon symbol mapping in the object that includes the calendar
entry should remove unnecessary quotes around the key because it is a valid
identifier. Update the relevant mapping in icon-symbol.tsx so the calendar
property is written as an unquoted object key, consistent with the surrounding
symbol map and ESLint/prettier formatting.
In `@src/components/common/BottomTabBar.tsx`:
- Around line 114-119: Remove the debug-only console output from BottomTabBar so
it does not ship in production. In the press handlers inside BottomTabBar,
delete the `console.log` statements used for terminal checking and keep the
existing `setIsOpen(false)` and `router.push(...)` behavior unchanged; make the
same cleanup for both affected press actions in the component.
- Line 24: `BottomTabBar` is being exported twice with both a named export and a
default export, but the component is already consumed via named import. Remove
the redundant `export default BottomTabBar` and keep the `export function
BottomTabBar(...)` declaration as the single export form, matching the component
export guideline and the `_layout.tsx` import style.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: 025c1422-e709-47aa-96f5-d9ecd151b42d
📒 Files selected for processing (3)
app/(tabs)/_layout.tsxcomponents/ui/icon-symbol.tsxsrc/components/common/BottomTabBar.tsx
There was a problem hiding this comment.
Actionable comments posted: 5
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/BottomTabBar.tsx (1)
47-53: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win배경색 전환이 의도한 "디졸브" 효과가 아닌 이진 전환임.
주석에는 "디졸브 배경색 계산"이라고 되어 있지만,
animationProgress.value > 0.5임계치 방식은 0.5를 기점으로 색이 즉시 바뀌는 이진 전환이라 실제 연속적인 페이드(디졸브) 효과가 나오지 않습니다.interpolateColor를 사용하면 의도한 부드러운 전환을 얻을 수 있습니다.🎨 제안 수정
- const animatedBoxStyle = useAnimatedStyle(() => { - const backgroundColor = animationProgress.value > 0.5 ? "`#F5F9F6`" : "`#FCFDFD`"; - return { - backgroundColor, - }; - }); + const animatedBoxStyle = useAnimatedStyle(() => { + return { + backgroundColor: interpolateColor( + animationProgress.value, + [0, 1], + ["`#FCFDFD`", "`#F5F9F6`"] + ), + }; + });
interpolateColor는react-native-reanimated에서 import해야 합니다.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/common/BottomTabBar.tsx` around lines 47 - 53, The BottomTabBar animated background is using a hard threshold in useAnimatedStyle, so it flips colors instead of producing the intended dissolve effect. Update the animatedBoxStyle logic to interpolate the background color across animationProgress.value using interpolateColor from react-native-reanimated, and keep the existing color endpoints so the transition becomes smooth and continuous.
🧹 Nitpick comments (6)
src/components/common/ScheduleCheckItem.tsx (3)
60-60: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value정적분석 포매팅 이슈.
ESLint(prettier)에서 Line 60 줄바꿈 포맷과 Line 70 파일 끝 개행 누락을 지적하고 있습니다. As per static analysis hints,
(prettier/prettier)규칙 위반입니다.Also applies to: 70-70
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/common/ScheduleCheckItem.tsx` at line 60, Fix the prettier formatting violations in ScheduleCheckItem by reformatting the conditional className expression around the checked border/bg classes and adding the missing newline at the end of the file. Use the ScheduleCheckItem component as the target and ensure the JSX string formatting matches Prettier output without changing behavior.Source: Linters/SAST tools
62-62: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value
outlineStyle은 RN 표준 스타일 프로퍼티가 아님.
as any로 타입을 회피하고 있어 웹 전용 스타일임이 명확하지 않고, 네이티브 플랫폼에서는 무시됩니다. RN Web을 의도한 것이라면Platform.select로 분기하거나 웹 전용 스타일 오버라이드로 명확히 표현하는 것이 좋습니다.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/common/ScheduleCheckItem.tsx` at line 62, The ScheduleCheckItem styling is using a web-only outlineStyle override with an as any cast, which hides the platform-specific intent. Update the relevant style in ScheduleCheckItem to avoid the cast and express the web-only behavior explicitly, using Platform.select or a web-specific style override so native platforms keep standard RN styling while RN Web gets the outline suppression.
1-1: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value오래된 경로 주석 수정 필요.
파일 상단 주석이
src/components/schedule/ScheduleCheckItem.tsx를 가리키지만 실제 경로는src/components/common/ScheduleCheckItem.tsx입니다. 혼동을 줄이기 위해 주석을 실제 경로로 업데이트하세요.수정 제안
-// src/components/schedule/ScheduleCheckItem.tsx +// src/components/common/ScheduleCheckItem.tsx🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/common/ScheduleCheckItem.tsx` at line 1, Update the stale top-of-file path comment in ScheduleCheckItem so it matches the actual location of the component. The comment currently points to src/components/schedule/ScheduleCheckItem.tsx, but the file is now under src/components/common/ScheduleCheckItem.tsx; adjust the header comment in ScheduleCheckItem.tsx accordingly so the path reference stays accurate.app/(tabs)/index.tsx (1)
17-21: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valuePrettier 포맷 이슈.
정적 분석 도구가 지적한 대로 여러 라인에서 줄바꿈/후행 콤마 등 포맷 규칙 위반이 있습니다(17-21, 130, 138라인).
prettier --write로 정리하는 것을 권장합니다.Also applies to: 130-130, 138-138
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@app/`(tabs)/index.tsx around lines 17 - 21, There are Prettier formatting violations in the static data array and related JSX in the index screen, including inconsistent line breaks and trailing comma/style issues. Run formatting on the affected content in the index tab component and ensure the array entries and any nearby JSX around the referenced section conform to the project’s Prettier rules, then recheck the affected blocks for consistent formatting.Source: Linters/SAST tools
src/components/common/AddScheduleButton.tsx (1)
29-30: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valuenamed export와 default export 병행.
기존 named export(
export function AddScheduleButton)에 더해 default export가 추가되었습니다. 현재app/(tabs)/index.tsx에서는 named import만 사용하고 있어 default export 사용처가 보이지 않습니다. 두 방식이 공존하면 이후 import 스타일이 혼재될 수 있으니, 필요하지 않다면 하나의 export 방식으로 통일하는 것을 고려해보세요.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/common/AddScheduleButton.tsx` around lines 29 - 30, The AddScheduleButton module now exposes both named and default exports, which can lead to inconsistent import styles; decide on a single export pattern and remove the unnecessary one. Update the AddScheduleButton definition/export so it is either only the named export used by app/(tabs)/index.tsx or switch the consumer to the default export, but do not keep both forms in src/components/common/AddScheduleButton.tsx.src/components/common/BottomTabBar.tsx (1)
90-104: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win탭/토글 버튼에 접근성 속성 누락.
각 탭
Pressable과 우측 토글Pressable에accessibilityRole,accessibilityLabel, (탭의 경우)accessibilityState={{ selected: isFocused }}가 없어 스크린리더 사용자가 현재 선택된 탭이나 버튼의 용도를 파악하기 어렵습니다.♿ 제안 수정 (탭 예시)
return ( <Pressable key={route.key} onPress={onPress} + accessibilityRole="button" + accessibilityLabel={route.name} + accessibilityState={{ selected: isFocused }} className={cn( "h-[40px] w-[52px] flex-shrink-0 items-center justify-center rounded-full p-[10px]", isFocused ? "bg-[`#4D826C`]" : "bg-[`#FCFDFD`]" )}토글 버튼에도 동일하게
accessibilityRole="button",accessibilityLabel={isOpen ? "닫기" : "열기"}추가를 권장합니다.Also applies to: 197-207
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/common/BottomTabBar.tsx` around lines 90 - 104, 탭과 우측 토글 Pressable에 접근성 속성이 빠져 있어 스크린리더에서 의미가 드러나지 않습니다. BottomTabBar의 탭 Pressable에는 accessibilityRole, 접근 가능한 탭 이름을 담은 accessibilityLabel, 그리고 선택 상태를 나타내는 accessibilityState={{ selected: isFocused }}를 추가하고, 우측 토글 Pressable에도 accessibilityRole="button"과 isOpen 상태에 따라 닫기/열기용 accessibilityLabel을 넣어주세요.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@app/`(tabs)/index.tsx:
- Around line 126-133: The "질문 받기" Pressable in the today-question section is
missing an onPress handler, so tapping it does nothing. Add an onPress to this
Pressable in index.tsx, wiring it to the intended action (or a temporary stub
such as navigation or a console/log TODO) and keep the implementation near the
existing Pressable/Text block so it’s easy to locate even if the layout changes.
In `@src/components/common/BottomTabBar.tsx`:
- Line 111: The Tailwind class list in BottomTabBar should be reordered to match
prettier-plugin-tailwindcss conventions. Update the className string in the
BottomTabBar component so the utility classes are sorted in the plugin’s
expected order, without changing the applied styles.
- Around line 57-66: The BottomTabBar JSX has formatting issues flagged by
Prettier, including trailing whitespace and a missing comma in the inline style
object. Update the JSX around the absolute container and the View props so the
style object and className follow standard formatting, and remove any
unnecessary spaces in BottomTabBar.
In `@src/components/common/ScheduleCheckItem.tsx`:
- Around line 55-65: The Pressable in ScheduleCheckItem is acting as a checkbox
but is missing accessibility metadata, so add checkbox semantics directly on
that component. Update the Pressable used with onToggle and checked to include
accessibilityRole="checkbox" and accessibilityState={{ checked }} so screen
readers can announce both the control type and its current state.
- Line 64: The IconSymbol usage in ScheduleCheckItem is referencing an icon name
that is not present in the existing mapping. Update the checked state in
ScheduleCheckItem to use a mapped icon name from IconSymbol’s MAPPING, or add
checkmark to that mapping if it should be supported, so the component only
passes valid icon names.
---
Outside diff comments:
In `@src/components/common/BottomTabBar.tsx`:
- Around line 47-53: The BottomTabBar animated background is using a hard
threshold in useAnimatedStyle, so it flips colors instead of producing the
intended dissolve effect. Update the animatedBoxStyle logic to interpolate the
background color across animationProgress.value using interpolateColor from
react-native-reanimated, and keep the existing color endpoints so the transition
becomes smooth and continuous.
---
Nitpick comments:
In `@app/`(tabs)/index.tsx:
- Around line 17-21: There are Prettier formatting violations in the static data
array and related JSX in the index screen, including inconsistent line breaks
and trailing comma/style issues. Run formatting on the affected content in the
index tab component and ensure the array entries and any nearby JSX around the
referenced section conform to the project’s Prettier rules, then recheck the
affected blocks for consistent formatting.
In `@src/components/common/AddScheduleButton.tsx`:
- Around line 29-30: The AddScheduleButton module now exposes both named and
default exports, which can lead to inconsistent import styles; decide on a
single export pattern and remove the unnecessary one. Update the
AddScheduleButton definition/export so it is either only the named export used
by app/(tabs)/index.tsx or switch the consumer to the default export, but do not
keep both forms in src/components/common/AddScheduleButton.tsx.
In `@src/components/common/BottomTabBar.tsx`:
- Around line 90-104: 탭과 우측 토글 Pressable에 접근성 속성이 빠져 있어 스크린리더에서 의미가 드러나지 않습니다.
BottomTabBar의 탭 Pressable에는 accessibilityRole, 접근 가능한 탭 이름을 담은
accessibilityLabel, 그리고 선택 상태를 나타내는 accessibilityState={{ selected: isFocused
}}를 추가하고, 우측 토글 Pressable에도 accessibilityRole="button"과 isOpen 상태에 따라 닫기/열기용
accessibilityLabel을 넣어주세요.
In `@src/components/common/ScheduleCheckItem.tsx`:
- Line 60: Fix the prettier formatting violations in ScheduleCheckItem by
reformatting the conditional className expression around the checked border/bg
classes and adding the missing newline at the end of the file. Use the
ScheduleCheckItem component as the target and ensure the JSX string formatting
matches Prettier output without changing behavior.
- Line 62: The ScheduleCheckItem styling is using a web-only outlineStyle
override with an as any cast, which hides the platform-specific intent. Update
the relevant style in ScheduleCheckItem to avoid the cast and express the
web-only behavior explicitly, using Platform.select or a web-specific style
override so native platforms keep standard RN styling while RN Web gets the
outline suppression.
- Line 1: Update the stale top-of-file path comment in ScheduleCheckItem so it
matches the actual location of the component. The comment currently points to
src/components/schedule/ScheduleCheckItem.tsx, but the file is now under
src/components/common/ScheduleCheckItem.tsx; adjust the header comment in
ScheduleCheckItem.tsx accordingly so the path reference stays accurate.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: 7505783b-3fc4-4b88-bebe-c9a6d2cda04b
📒 Files selected for processing (4)
app/(tabs)/index.tsxsrc/components/common/AddScheduleButton.tsxsrc/components/common/BottomTabBar.tsxsrc/components/common/ScheduleCheckItem.tsx
| <Pressable | ||
| className="w-full items-center justify-center rounded-2xl py-4" | ||
| style={{ backgroundColor: "#4D826C", outlineStyle: "none" } as any} | ||
| > | ||
| <Text className="text-white" style={{ fontSize: 16, fontWeight: "600" }}> | ||
| 질문 받기 | ||
| </Text> | ||
| </Pressable> |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
"질문 받기" 버튼에 onPress 핸들러가 없습니다.
새로 추가된 "오늘의 질문" 섹션의 Pressable에 onPress가 지정되어 있지 않아, 사용자가 버튼을 눌러도 아무 동작이 일어나지 않습니다. 아직 기능이 미구현 상태라면 TODO 주석을 남기거나, 최소한 임시 핸들러(예: 콘솔 로그 또는 네비게이션 스텁)를 연결하는 것이 좋습니다.
💡 예시 수정
<Pressable
className="w-full items-center justify-center rounded-2xl py-4"
style={{ backgroundColor: "`#4D826C`", outlineStyle: "none" } as any}
+ onPress={() => {
+ // TODO: 오늘의 질문 기능 연결
+ }}
>📝 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.
| <Pressable | |
| className="w-full items-center justify-center rounded-2xl py-4" | |
| style={{ backgroundColor: "#4D826C", outlineStyle: "none" } as any} | |
| > | |
| <Text className="text-white" style={{ fontSize: 16, fontWeight: "600" }}> | |
| 질문 받기 | |
| </Text> | |
| </Pressable> | |
| <Pressable | |
| className="w-full items-center justify-center rounded-2xl py-4" | |
| style={{ backgroundColor: "`#4D826C`", outlineStyle: "none" } as any} | |
| onPress={() => { | |
| // TODO: 오늘의 질문 기능 연결 | |
| }} | |
| > | |
| <Text className="text-white" style={{ fontSize: 16, fontWeight: "600" }}> | |
| 질문 받기 | |
| </Text> | |
| </Pressable> |
🧰 Tools
🪛 ESLint
[error] 130-130: Replace ·className="text-white"·style={{·fontSize:·16,·fontWeight:·"600"·}} with ⏎··············className="text-white"⏎··············style={{·fontSize:·16,·fontWeight:·"600"·}}⏎············
(prettier/prettier)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@app/`(tabs)/index.tsx around lines 126 - 133, The "질문 받기" Pressable in the
today-question section is missing an onPress handler, so tapping it does
nothing. Add an onPress to this Pressable in index.tsx, wiring it to the
intended action (or a temporary stub such as navigation or a console/log TODO)
and keep the implementation near the existing Pressable/Text block so it’s easy
to locate even if the layout changes.
Hyochan02
left a comment
Hyochan02
left a comment
There was a problem hiding this comment.
구현하느라 고생하셨습니다!!
전체적으로 아이콘 교체, 색상 토큰 미사용, nativewind 옵션 미사용 등에 대하여 코멘트를 남겨두었습니다!!
확인 후 수정 부탁드립니다 :)
| </Pressable> | ||
|
|
||
| {/* 가운데 세로 구분선 */} | ||
| <View className="h-[20px] w-[1px] bg-[#4D826C]" /> |
There was a problem hiding this comment.
nativewind 색상 토큰 관련 코멘트와 동일합니다!
bg-green-600 형식으로 교체해주세요 :)
추가로 피그마 상에서 구분선은 28px인것으로 보입니다! 해당 부분도 확인 후 수정 부탁드립니다 :)
| ) : ( | ||
| // 플러스 버튼 열린 상태 (일정등록 | 일기작성) | ||
| <View | ||
| className="h-[60px] flex-1 flex-row items-center justify-center gap-[40px] rounded-full bg-[#FCFDFD] px-[28px] border-[1px] border-[#4D826C]" |
There was a problem hiding this comment.
nativewind 색상 토큰 관련 코멘트와 동일합니다!
bg-gray-0 border-green-600 형식으로 교체해주세요 :)
| {/* ----------------- 왼쪽 박스 영역 ----------------- */} | ||
| {!isOpen ? ( | ||
| <View | ||
| className="h-[60px] flex-1 flex-row items-center justify-between rounded-full bg-[#FCFDFD] px-3" |
There was a problem hiding this comment.
nativewind 색상 토큰 관련 코멘트와 동일합니다!
bg-gray-0 형식으로 교체해주세요 :)
| <Text | ||
| style={{ | ||
| fontFamily: "SUIT-SemiBold", | ||
| fontWeight: "600", | ||
| fontSize: 16, | ||
| lineHeight: 24, | ||
| letterSpacing: -0.32, | ||
| textAlign: "center", | ||
| color: "#4D826C", | ||
| }} | ||
| > |
There was a problem hiding this comment.
nativewind 스타일 옵션을 사용해주세요..!!
<Text className="text-center text-b-02-sb text-green-600">
일기작성
</Text>
위 형식으로 사용해주시면 됩니다!
| <Text | ||
| style={{ | ||
| fontFamily: "SUIT-SemiBold", | ||
| fontWeight: "600", | ||
| fontSize: 16, | ||
| lineHeight: 24, // 16px * 150% | ||
| letterSpacing: -0.32, // 16px * -2% | ||
| textAlign: "center", | ||
| color: "#4D826C", | ||
| }} | ||
| > |
There was a problem hiding this comment.
nativewind 스타일 옵션을 사용해주세요..!!
<Text className="text-center text-b-02-sb text-green-600">
일정등록
</Text>
위 형식으로 사용해주시면 됩니다!
There was a problem hiding this comment.
남겨주신 리뷰 모두 반영해서 푸시했습니다! 확인해주시면 감사하겠습니다~
There was a problem hiding this comment.
🧹 Nitpick comments (1)
src/components/common/BottomTabBar.tsx (1)
129-129: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value디버그용
console.log제거 필요.두
Pressable의onPress핸들러에 남아있는console.log("일정등록 클릭")/console.log("일기작성 클릭")는 터미널 확인용으로 보이며, 프로덕션 코드에 남겨둘 필요는 없습니다.🧹 제안 수정
onPress={() => { - console.log("일정등록 클릭"); // 터미널 확인용 로그 setIsOpen(false); router.push("/schedule"); }}(157행의 "일기작성" 로그도 동일하게 제거)
Also applies to: 157-157
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/common/BottomTabBar.tsx` at line 129, Remove the leftover debug logging from the two Pressable onPress handlers in BottomTabBar; the "일정등록 클릭" and "일기작성 클릭" console.log calls should be deleted from the respective handlers so the component no longer emits terminal-only debug output in production. Use the Pressable blocks in BottomTabBar as the place to update, and keep the navigation/interaction behavior unchanged.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In `@src/components/common/BottomTabBar.tsx`:
- Line 129: Remove the leftover debug logging from the two Pressable onPress
handlers in BottomTabBar; the "일정등록 클릭" and "일기작성 클릭" console.log calls should
be deleted from the respective handlers so the component no longer emits
terminal-only debug output in production. Use the Pressable blocks in
BottomTabBar as the place to update, and keep the navigation/interaction
behavior unchanged.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: c9a5e521-57cb-48fd-9d58-8bbada419d70
⛔ Files ignored due to path filters (8)
assets/icons/diary.svgis excluded by!**/*.svg,!**/assets/**assets/icons/schedule.svgis excluded by!**/*.svg,!**/assets/**assets/icons/tab-calendar.svgis excluded by!**/*.svg,!**/assets/**assets/icons/tab-cancle.svgis excluded by!**/*.svg,!**/assets/**assets/icons/tab-home.svgis excluded by!**/*.svg,!**/assets/**assets/icons/tab-plus.svgis excluded by!**/*.svg,!**/assets/**assets/icons/tab-setting.svgis excluded by!**/*.svg,!**/assets/**assets/icons/tab-statistic.svgis excluded by!**/*.svg,!**/assets/**
📒 Files selected for processing (1)
src/components/common/BottomTabBar.tsx
| @@ -18,6 +18,9 @@ type IconSymbolName = keyof typeof MAPPING; | |||
| */ | |||
| const MAPPING = { | |||
| "house.fill": "home", | |||
There was a problem hiding this comment.
icon-symbol 에 추가한 아이콘은 삭제해주세요! 피그마에서 svg 형태로 아이콘을 가져와 사용하는 것이 디자인과 동일하게 만들 수 있습니다 !
| }} | ||
| > | ||
| <ScrollView showsVerticalScrollIndicator={false}> | ||
| {/* 로고 영역 */} |
There was a problem hiding this comment.
로고 영역으로 되어 있는 부분은 제가 별도로 헤더 컴포넌트를 구현해두었습니다! 해당 부분은 제거하고, 구현된 헤더 컴포넌트를 불러와 적용해주시면 될 것 같습니다!
| </View> | ||
|
|
||
| {/* 날짜 */} | ||
| <Text |
There was a problem hiding this comment.
날짜 로 되어 있는 부분에 style에 값을 직접 작성해주었는데, 사용하는 부분마다 매번 작성하는 것을 방지하기 위해 디자인 토큰으로 정의해두었습니다 ! 다음과 같이 수정해주세요
<Text className="mb-3 text-h-01 text-green-900">{dateLabel}</Text>
| </Text> | ||
|
|
||
| {/* 일정 카드 */} | ||
| <View className="w-full rounded-2xl bg-white px-4 py-4"> |
There was a problem hiding this comment.
배경색은 gray-0 이고, px-3으로 수정 부탁드립니다 ! 그리고 분홍색 부분을 보면 문자랑 일정 박스 부분 마지막 일정 등록하기 버튼 사이가 12px로 나타나 있어서 gap-3도 추가해주세요!
<View className="w-full gap-3 rounded-2xl bg-gray-0 px-3 py-4">
|
|
||
| {/* 일정 카드 */} | ||
| <View className="w-full rounded-2xl bg-white px-4 py-4"> | ||
| <Text |
There was a problem hiding this comment.
여기도 토큰으로 스타일을 정의해 두어서 토큰으로 스타일 적용해주세요 !
<Text className="text-gray-900 text-b-02-r">
| {/* 왼쪽: 카테고리 dot + 텍스트 */} | ||
| <View className="flex-1 flex-row items-start gap-[8px] pr-[12px]"> | ||
| <View | ||
| className="mt-[4px] h-[8px] w-[8px] rounded-full" |
There was a problem hiding this comment.
스타일을 적용할 때는 [px] 값보다는 h-2와 같은 Tailwind 유틸리티 클래스를 우선 사용해주세요. 유틸리티 클래스로 표현이 어려운 경우에만 [px]를 사용 부탁드립니다.그리고 mt-[4px]값은 필요없어 보입니다 !
className="h-2 w-2 rounded-full"
| style={{ backgroundColor: categoryColor }} | ||
| /> | ||
| <View className="flex-1"> | ||
| <Text |
There was a problem hiding this comment.
여기도 토큰으로 스타일을 정의해 두어서 토큰으로 스타일 적용해주세요 !
<Text className="text-b-05-b" style={{ color: categoryColor }}>
| > | ||
| {categoryLabel.toUpperCase()} | ||
| </Text> | ||
| <Text |
There was a problem hiding this comment.
여기도 토큰으로 스타일을 정의해 두어서 토큰으로 스타일 적용해주세요 !
<Text numberOfLines={1} className="text-gray-800 text-b-03-m">
{description}
</Text>
| </View> | ||
| </View> | ||
|
|
||
| {/* 오른쪽: 체크박스 (공용 컴포넌트) */} |
There was a problem hiding this comment.
일정 박스안에 체크박스를 정의해주셨는데 체크박스 컴포넌트를 분리하고, 일정 박스에 컴포넌트를 불러오는 방식이 더 좋을 것 같습니다 !
import { Checkbox } from "@/src/components/common/Checkbox";
<Checkbox checked={checked} onToggle={onToggle} />
| </View> | ||
|
|
||
| {/* 오른쪽: 체크박스 (공용 컴포넌트) */} | ||
| <Pressable |
There was a problem hiding this comment.
체크박스가 아이콘으로 만들어져있어서 체크/체크 해제 시 아이콘이 변경되도록 코드 수정해주세요 ! 아이콘은 예시 코드 형태처럼 사용할 수 있도록 넣어두겠습니다 !
// 예시 코드
import { Pressable, type PressableProps } from "react-native";
import BoxIcon from "@/assets/icons/box.svg";
import CheckboxIcon from "@/assets/icons/checkbox.svg";
import { cn } from "@/src/lib/cn";
export type CheckboxProps = Omit<PressableProps, "children" | "onPress"> & {
checked: boolean;
onToggle: () => void;
className?: string;
};
export function Checkbox({
checked,
onToggle,
className,
...rest
}: CheckboxProps) {
const Icon = checked ? CheckboxIcon : BoxIcon;
return (
<Pressable
onPress={onToggle}
hitSlop={8}
className={cn("h-6 w-6 items-center justify-center", className)}
style={{ outlineStyle: "none" } as any}
{...rest}
>
<Icon width={24} height={24} color="#020303" />
</Pressable>
);
}
There was a problem hiding this comment.
🧹 Nitpick comments (3)
src/components/common/BottomTabBar.tsx (3)
121-134: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value디버그용
console.log제거 권장.일정등록/일기작성 버튼 클릭 핸들러에 남아있는
console.log("일정등록 클릭"),console.log("일기작성 클릭")는 배포 전 정리가 필요합니다.♻️ 제안 수정
onPress={() => { - console.log("일정등록 클릭"); // 터미널 확인용 로그 setIsOpen(false); router.push("/schedule"); }}onPress={() => { - console.log("일기작성 클릭"); // 터미널 확인용 로그 setIsOpen(false); router.push("/diary/write"); }}Also applies to: 140-152
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/common/BottomTabBar.tsx` around lines 121 - 134, Remove the remaining debug logging from the press handlers in BottomTabBar, specifically the `console.log` calls inside the 일정등록 and 일기작성 `Pressable` onPress callbacks. Keep the existing `setIsOpen(false)` and `router.push(...)` behavior unchanged, and clean up both button handlers so `BottomTabBar` no longer emits terminal debug output in production.
130-130: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueTailwind 클래스 순서 수정 필요 (prettier-plugin-tailwindcss).
정적 분석 도구가 두 곳 모두
text-b-02-sb text-green-600순서를text-green-600 text-b-02-sb로 정렬할 것을 지적하고 있습니다.🧹 제안 수정
- <Text className="text-center text-b-02-sb text-green-600"> + <Text className="text-center text-green-600 text-b-02-sb"> 일정등록 </Text>- <Text className="text-center text-b-02-sb text-green-600"> + <Text className="text-center text-green-600 text-b-02-sb"> 일기작성 </Text>Also applies to: 148-148
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/common/BottomTabBar.tsx` at line 130, The Tailwind class order in the BottomTabBar Text elements is not matching prettier-plugin-tailwindcss expectations. Update the Text className strings in BottomTabBar so the color utility and typography utility are ordered consistently as the formatter requires, and make the same adjustment in both affected Text instances to keep the file lint-clean.Source: Linters/SAST tools
98-113: 🎯 Functional Correctness | 🔵 Trivial | ⚡ Quick win하단 탭바 버튼에 접근성 속성 누락.
탭 아이콘
Pressable(Line 98-104)과 일정등록/일기작성 버튼(Line 122-134, 140-152), 플러스/엑스 토글 버튼(Line 164-167)에accessibilityRole/accessibilityLabel이 없어, 스크린 리더 사용자가 각 버튼의 목적을 알기 어렵습니다. 지속적으로 노출되는 핵심 네비게이션 요소이므로 접근성 라벨을 추가하는 것을 권장합니다.🛠️ 제안 방향 (예시)
<Pressable key={route.key} onPress={onPress} + accessibilityRole="tab" + accessibilityLabel={route.name} + accessibilityState={{ selected: isFocused }} className={cn(Also applies to: 122-134, 140-152, 164-167
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/common/BottomTabBar.tsx` around lines 98 - 113, The BottomTabBar buttons are missing accessibility metadata, so update the Pressable elements in BottomTabBar to include appropriate accessibilityRole and accessibilityLabel values. Apply this to the tab icon Pressable, the 일정등록/일기작성 action buttons, and the plus/X toggle button so screen readers can identify each control’s purpose. Use the existing Button/Pressable blocks in BottomTabBar as the locating points and keep the labels descriptive and state-aware where needed.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In `@src/components/common/BottomTabBar.tsx`:
- Around line 121-134: Remove the remaining debug logging from the press
handlers in BottomTabBar, specifically the `console.log` calls inside the 일정등록
and 일기작성 `Pressable` onPress callbacks. Keep the existing `setIsOpen(false)` and
`router.push(...)` behavior unchanged, and clean up both button handlers so
`BottomTabBar` no longer emits terminal debug output in production.
- Line 130: The Tailwind class order in the BottomTabBar Text elements is not
matching prettier-plugin-tailwindcss expectations. Update the Text className
strings in BottomTabBar so the color utility and typography utility are ordered
consistently as the formatter requires, and make the same adjustment in both
affected Text instances to keep the file lint-clean.
- Around line 98-113: The BottomTabBar buttons are missing accessibility
metadata, so update the Pressable elements in BottomTabBar to include
appropriate accessibilityRole and accessibilityLabel values. Apply this to the
tab icon Pressable, the 일정등록/일기작성 action buttons, and the plus/X toggle button
so screen readers can identify each control’s purpose. Use the existing
Button/Pressable blocks in BottomTabBar as the locating points and keep the
labels descriptive and state-aware where needed.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: b9a7258b-f71a-4be3-b931-a483c4c5303e
⛔ Files ignored due to path filters (2)
assets/icons/box.svgis excluded by!**/*.svg,!**/assets/**assets/icons/checkbox.svgis excluded by!**/*.svg,!**/assets/**
📒 Files selected for processing (1)
src/components/common/BottomTabBar.tsx
3 participants
📌 관련 이슈번호
(Closes 키워드가 있어야 PR이 머지되었을 때 이슈가 자동으로 닫힌다)
📌 PR 유형
어떤 변경 사항이 있나요?
📌 PR 요약
홈 화면 하단에 들어가는 공통 탭 바(BottomTabBar) 컴포넌트 UI를 구현하고, 각 버튼 클릭 시 올바른 화면으로 이동하도록 라우팅을 연결했습니다.
📌 작업 세부 내용
/schedule), 일기 작성(/diary/write) 라우터 연결 완료📸 스크린샷 (선택)
