Skip to content

[FEAT] 홈, 마이페이지 바텀 내비게이션 추가 - #1

Open
ej070961 wants to merge 4 commits into
mainfrom
feat/bottom-navi
Open

ej070961 wants to merge 4 commits into
mainfrom
feat/bottom-navi

Conversation

@ej070961

@ej070961 ej070961 commented Jun 21, 2026

Copy link
Copy Markdown
Contributor

작업 사항

  • 바텀 내비게이션 컴포넌트 추가
  • '/', '/mypage' 경로에 바텀 내비게이션 뜨도록 설정
  • 다크모드 대응

Summary by CodeRabbit

  • New Features

    • Added dark/light mode support with dynamic theming throughout the app
    • Added bottom navigation bar for main app sections
    • Added SVG icons for navigation elements
    • Improved font loading on app startup
  • Documentation

    • Updated README with comprehensive onboarding guide
    • Added code conventions and development guidelines documentation

@ej070961 ej070961 self-assigned this Jun 21, 2026
@ej070961
ej070961 requested a review from Chaejy June 21, 2026 05:28
@coderabbitai

coderabbitai Bot commented Jun 21, 2026

Copy link
Copy Markdown

Review Change Stack

Warning

Review limit reached

@ej070961, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 42 minutes and 23 seconds. Learn how PR review limits work.

Your organization has used up its prepaid credits, and credit purchases are no longer available. Enable the review add-on in the billing tab to keep reviews running — you're only billed for reviews past your plan's rate limits ($0.25/file).

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based credits.

🚦 How do rate limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan refill rate.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, the refill rate gradually slows as usage increases. The highest same-day bursts are limited more strictly.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: 24bf926e-0aa2-416a-95b1-288c782e22c2

📥 Commits

Reviewing files that changed from the base of the PR and between d1bbfa8 and a5841ea.

📒 Files selected for processing (14)
  • AGENTS.md
  • README.md
  • docs/code-convention.md
  • src/app/index.tsx
  • src/pages/home/index.ts
  • src/pages/home/model/useHomeWebView.ts
  • src/pages/home/model/webView.ts
  • src/pages/home/ui/HomeScreen.tsx
  • src/shared/ui/icons/HomeIcon.tsx
  • src/shared/ui/icons/MyIcon.tsx
  • src/widgets/bottom-navigation/index.ts
  • src/widgets/bottom-navigation/model/types.ts
  • src/widgets/bottom-navigation/ui/BottomNavigation.tsx
  • src/widgets/bottom-navigation/ui/NavigationTab.tsx
📝 Walkthrough

Walkthrough

Adds a BottomNavigation component with HomeIcon and MyIcon SVG icons, integrates Pretendard font loading and dark mode into the root layout, and refactors HomeScreen to track WebView URL paths and conditionally render navigation. Includes react-native-svg dependency, an *.otf type declaration, and new project documentation and coding conventions.

Changes

Bottom Navigation, Dark Mode & WebView Routing

Layer / File(s) Summary
SVG icon components and asset type declaration
package.json, assets.d.ts, src/components/ui/HomeIcon.tsx, src/components/ui/MyIcon.tsx
Adds react-native-svg at v15.15.3, declares *.otf module as number, and implements HomeIcon and MyIcon SVG components using a shared NavigationIconSize token mapped to numeric dimensions.
BottomNavigation component
src/components/ui/BottomNavigation.tsx
Exports BottomNavigationPath union ('/' | '/mypage') and a BottomNavigation component that renders pressable tabs, switches inactive icon/label colors by color scheme, highlights the active tab via activePath, and fires onNavigate on press.
Root layout: font loading and dark mode
src/app/_layout.tsx
Calls useFonts with Pretendard assets, returns null until fonts are ready, then applies dynamic StatusBar style and Stack background color derived from useColorScheme.
HomeScreen WebView URL routing and theming
src/app/index.tsx
Adds buildWebUrl, getPathFromUrl, and isBottomNavigationPath helpers; tracks currentPath/webUri in state; wires handleNavigationStateChange to update back-capability and path from navigated URL; computes dynamic backgroundColor; and conditionally renders BottomNavigation.

Project Documentation and Conventions

Layer / File(s) Summary
README and AGENTS.md onboarding
README.md, AGENTS.md
README restructured with tech stack table, setup/run/validation commands, EXPO_PUBLIC_WEB_URL docs, directory tree, and development rules; AGENTS.md adds agent-specific React Native/Expo coding guidance.
Full code convention document
docs/code-convention.md
New document defining branch/commit naming, project structure, naming conventions, export/import ordering, React Native component and style rules, WebView URL conventions, hook/memoization guidance, typing constraints, asset organization, error handling, and verification checklist.

Sequence Diagram

sequenceDiagram
  participant User
  participant BottomNavigation
  participant HomeScreen
  participant WebView

  rect rgba(173, 216, 230, 0.5)
    note over User,WebView: Bottom tab press flow
    User->>BottomNavigation: press tab (path)
    BottomNavigation->>HomeScreen: onNavigate(path)
    HomeScreen->>HomeScreen: setCurrentPath(path) + setWebUri(buildWebUrl(path))
    HomeScreen->>WebView: source={uri: webUri}
  end

  rect rgba(144, 238, 144, 0.5)
    note over WebView,HomeScreen: WebView navigation update flow
    WebView->>HomeScreen: onNavigationStateChange(navState)
    HomeScreen->>HomeScreen: update canGoBackRef + setCurrentPath(getPathFromUrl(url))
    HomeScreen->>BottomNavigation: activePath=activeBottomNavigationPath (if on nav route)
  end
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

🐇 A bunny hops through screens so bright,
Dark mode and light, both looking right.
Nav icons drawn with SVG care,
Pretendard fonts floating through the air.
WebView routes now know their place —
Bottom tabs keep a tidy interface! 🌊

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title '[FEAT] 홈, 마이페이지 바텀 내비게이션 추가' directly and accurately summarizes the main feature added: bottom navigation for home and mypage routes with dark mode support.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feat/bottom-navi

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 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 `@src/components/ui/HomeIcon.tsx`:
- Line 12: The sizeMap constant is duplicated in both HomeIcon and MyIcon
components, violating the DRY principle. Create a new shared constants file and
extract the sizeMap (which maps NavigationIconSize values to numeric sizes) as
NAVIGATION_ICON_SIZE_MAP, then update both HomeIcon and MyIcon to import and use
this shared constant instead of maintaining their own local definitions.
🪄 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: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: 2749b378-286f-4e8d-b4e3-fc32d708e87e

📥 Commits

Reviewing files that changed from the base of the PR and between 751de90 and d1bbfa8.

⛔ Files ignored due to path filters (3)
  • assets/fonts/Pretendard-Regular.otf is excluded by !**/*.otf
  • assets/fonts/Pretendard-SemiBold.otf is excluded by !**/*.otf
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (10)
  • AGENTS.md
  • README.md
  • assets.d.ts
  • docs/code-convention.md
  • package.json
  • src/app/_layout.tsx
  • src/app/index.tsx
  • src/components/ui/BottomNavigation.tsx
  • src/components/ui/HomeIcon.tsx
  • src/components/ui/MyIcon.tsx

style?: StyleProp<ViewStyle>;
};

const sizeMap: Record<NavigationIconSize, number> = { s: 16, m: 20, l: 24, xl: 28 };

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion | 🟠 Major | ⚡ Quick win

Extract sizeMap to a shared constant.

The sizeMap constant is duplicated in both HomeIcon.tsx and MyIcon.tsx (line 12 in each). This violates the DRY principle and creates a maintenance burden if the size values need to change.

♻️ Suggested refactor

Create a new file src/components/ui/navigationConstants.ts:

import { type NavigationIconSize } from './HomeIcon';

export const NAVIGATION_ICON_SIZE_MAP: Record<NavigationIconSize, number> = {
  s: 16,
  m: 20,
  l: 24,
  xl: 28,
};

Then update both icon components to import and use it:

+import { NAVIGATION_ICON_SIZE_MAP } from './navigationConstants';
+
-const sizeMap: Record<NavigationIconSize, number> = { s: 16, m: 20, l: 24, xl: 28 };
-
 export const HomeIcon = ({ color = '`#262626`', size = 'l', style }: HomeIconProps) => {
-  const iconSize = sizeMap[size];
+  const iconSize = NAVIGATION_ICON_SIZE_MAP[size];
🤖 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/ui/HomeIcon.tsx` at line 12, The sizeMap constant is
duplicated in both HomeIcon and MyIcon components, violating the DRY principle.
Create a new shared constants file and extract the sizeMap (which maps
NavigationIconSize values to numeric sizes) as NAVIGATION_ICON_SIZE_MAP, then
update both HomeIcon and MyIcon to import and use this shared constant instead
of maintaining their own local definitions.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant