[Ui/#13] 공통 컴포넌트 제작 - #14
Conversation
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
Walkthrough공통 Changes공통 UI 컴포넌트
Estimated code review effort: 3 (Moderate) | ~30 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches 💡 1📝 Generate docstrings 💡
🧪 Generate unit tests (beta)
Comment |
🤖 PR Checks 결과
|
![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 (1)
components/common/Button/Button.tsx (1)
39-46: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win
ButtonProps를 파일 상단으로 이동하세요.
ButtonProps는 스타일 상수 뒤에 선언되어 있습니다. import와 관련 타입 선언 직후에 선언하세요.As per path instructions, “props 타입은 파일 상단에 type XxxProps = {} 형태로 선언”.
🤖 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/common/Button/Button.tsx` around lines 39 - 46, Move the ButtonProps type declaration to the top of Button.tsx, immediately after the imports and related type declarations, before the style constants. Keep the existing type shape and export unchanged.Source: Path instructions
🤖 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/common/Fab/Fab.stories.tsx`:
- Around line 14-20: Remove pointerEvents="none" from the View wrapper in the
decorators configuration so the Fab Storybook story allows interaction with the
FAB toggle and secondary Pressable actions.
In `@components/common/IconButton/IconButton.tsx`:
- Around line 9-13: Update the IconButtonProps type so onPress is required,
ensuring every IconButton rendered as a button has an action. Do not add
disabled-state handling unless onPress must remain optional.
---
Nitpick comments:
In `@components/common/Button/Button.tsx`:
- Around line 39-46: Move the ButtonProps type declaration to the top of
Button.tsx, immediately after the imports and related type declarations, before
the style constants. Keep the existing type shape and export unchanged.
🪄 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: db495353-a12d-4eb8-8955-dd06c56002cf
⛔ Files ignored due to path filters (1)
assets/images/checktask-logo.pngis excluded by!**/*.png,!**/assets/**
📒 Files selected for processing (18)
.husky/pre-commit.storybook/preview.tsxapp/(tabs)/index.tsxcomponents/button.stories.tsxcomponents/button.tsxcomponents/common/Button/Button.stories.tsxcomponents/common/Button/Button.tsxcomponents/common/Fab/Fab.stories.tsxcomponents/common/Fab/Fab.tsxcomponents/common/Header/BackHeader.tsxcomponents/common/Header/CloseHeader.tsxcomponents/common/Header/Header.stories.tsxcomponents/common/Header/HeaderContainer.tsxcomponents/common/Header/LogoHeader.tsxcomponents/common/IconButton/IconButton.stories.tsxcomponents/common/IconButton/IconButton.tsxcomponents/icons/icon.types.tsconstants/shadows.ts
💤 Files with no reviewable changes (2)
- components/button.tsx
- components/button.stories.tsx
| decorators: [ | ||
| (Story) => ( | ||
| <View pointerEvents="none"> | ||
| <Story /> | ||
| </View> | ||
| ), | ||
| ], |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -e
printf '%s\n' '--- target file ---'
cat -n components/common/Fab/Fab.stories.tsx
printf '%s\n' '--- related Fab files ---'
fd -i 'Fab' components/common/Fab
printf '%s\n' '--- pointerEvents usage ---'
rg -n --glob '*.tsx' --glob '*.ts' 'pointerEvents|Fab.stories|<Pressable|onPress' components/common/Fab components 2>/dev/null | head -200Repository: check-task/mobile-frontend
Length of output: 4610
🏁 Script executed:
#!/bin/bash
set -e
printf '%s\n' '--- Fab implementation ---'
cat -n components/common/Fab/Fab.tsx
printf '%s\n' '--- package/runtime context ---'
rg -n '"react-native"|"react-native-web"|"`@storybook/react-native-web-vite`"|storybook' package.json pnpm-lock.yaml yarn.lock package-lock.json 2>/dev/null | head -120
printf '%s\n' '--- Storybook configuration ---'
fd -i 'storybook' . --exclude node_modules --exclude dist --exclude buildRepository: check-task/mobile-frontend
Length of output: 11438
🌐 Web query:
React Native View pointerEvents="none" children touch events react-native-web documentation
💡 Result:
In React Native and React Native for Web, the pointerEvents prop on a View component determines how that view and its children respond to touch events [1][2]. When you set pointerEvents="none" on a View, the View itself becomes transparent to all touch events, and crucially, all of its children are also excluded from receiving touch events [1][3]. If your goal is to make a parent View ignore touch events while allowing its children to remain interactive, you should use pointerEvents="box-none" instead [1][4]. Summary of pointerEvents values: - auto: The View and its children can be targets of touch events (default) [1]. - none: Neither the View nor its children can be targets of touch events [1][3]. - box-none: The View is never the target of touch events, but its subviews (children) can be [1][4]. - box-only: The View can be the target of touch events, but its subviews cannot be [1][3]. This behavior is consistent across both React Native and React Native for Web [2][3][5]. In the context of React Native for Web, these values are implemented by applying specific CSS pointer-events rules to the container and its children [2][6]. Note that pointerEvents is a property of the View component, not a CSS style, and must be passed as a prop [4].
Citations:
- 1: https://reactnative.dev/docs/view
- 2: https://necolas.github.io/react-native-web/docs/styling/
- 3: https://github.com/facebook/react-native-website/blob/main/docs/view.md
- 4: https://www.exchangetuts.com/prevent-parent-from-being-clickable-while-allowing-child-to-capture-touches-1757654402707149
- 5: https://github.com/kwelch/react-native-web/blob/main/docs/components/View.md
- 6: necolas/react-native-web@03c6a93
pointerEvents="none"을 제거하세요.
이 설정은 Fab 내부의 모든 Pressable 입력을 차단합니다. 제거하면 Storybook에서 FAB 토글과 보조 액션을 사용할 수 있습니다.
🤖 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/common/Fab/Fab.stories.tsx` around lines 14 - 20, Remove
pointerEvents="none" from the View wrapper in the decorators configuration so
the Fab Storybook story allows interaction with the FAB toggle and secondary
Pressable actions.
There was a problem hiding this comment.
보조 액션 없이 그 상태가 보이도록 하려고 추가했습니다
| export type IconButtonProps = { | ||
| label: string; | ||
| icon?: ReactNode; | ||
| onPress?: () => void; | ||
| className?: string; |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
onPress가 없을 때 비활성 상태를 명시하세요.
현재 계약은 동작이 없는 IconButton 생성을 허용합니다. 하지만 Line 24는 항상 이 요소를 버튼으로 노출합니다. 사용자는 버튼을 누를 수 있다고 인식하지만 아무 동작도 수행할 수 없습니다.
onPress를 필수 prop으로 변경하세요. 선택적으로 유지해야 하면 disabled prop, accessibilityState={{ disabled: true }}, 비활성 스타일을 추가하세요.
🤖 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/common/IconButton/IconButton.tsx` around lines 9 - 13, Update the
IconButtonProps type so onPress is required, ensuring every IconButton rendered
as a button has an action. Do not add disabled-state handling unless onPress
must remain optional.
There was a problem hiding this comment.
onPress 여부 기준으로 accessibilityRole가 버튼인지 아닌지로 조건으로 처리했고, 비활성 스타일은 따로 없습니다리
2 participants
📌 관련 이슈번호
📌 PR 유형
어떤 변경 사항이 있나요?
📌 PR 요약
공통 컴포넌트를 제작 및 기타 설정을 진행했습니다.
📌 작업 세부 내용
공통 컴포넌트 제작
1. 플로팅 버튼 (Fab)
2. 상단 앱바 헤더 (Header)
HeaderContainer(공통 셸: 배경/보더/높이/패딩) +BackHeader/LogoHeader/CloseHeader로 역할별 분리HeaderContainer를 내부에서 감싸는 구조CloseHeader의 아이콘 색상이 토큰으로 안되어 있어서gray-800으로 처리3. 버튼 (Button)
variant(blue/gray/outline/white) ×size(tiny/sm/modal/lg/xl) 조합disabled는 동일한 톤이라 별도 조건문으로 분리w-auto, 나머지는 페이지or모달에서 여백으로 처리되기 때문에 고정값이 아닌w-full로 지정했습니다.4. 아이콘 버튼 (IconButton)
기타 설정
📸 스크린샷
🔗 기타 (공유사항)