Skip to content

Comments

[Setting] nativewind 세팅 추가#179

Merged
bokeeeey merged 4 commits intodevelopfrom
178-setting-nativewind-세팅-추기
Jan 2, 2025

Hidden character warning

The head ref may contain hidden characters: "178-setting-nativewind-\uc138\ud305-\ucd94\uae30"
Merged

[Setting] nativewind 세팅 추가#179
bokeeeey merged 4 commits intodevelopfrom
178-setting-nativewind-세팅-추기

Conversation

@bokeeeey
Copy link
Member

@bokeeeey bokeeeey commented Jan 2, 2025

🚀 작업 내용

  • 모노레포 공용 패키지의 tailwind config 연결
  • monorepo expo설치 도중 발생한 기존 버그 수정 및 기능 정상화

📝 참고 사항

  • next.js프로젝트에서 사용하던 그대로 tailwind global값 사용할 수 있도록 설정 완료
  • web/global.css에 구성되어있는 변수는 필요시 구성하는걸로 진행하겠습니다.

🖼️ 스크린샷

image
image

🚨 관련 이슈 (이슈 번호)

✅ 체크리스트

  • Code Review 요청
  • Label 설정
  • PR 제목 규칙에 맞는지 확인

Summary by CodeRabbit

  • 문서

    • .expo/README.md에 Expo 프로젝트의 .expo 폴더에 대한 상세 설명 추가
    • devices.json 파일 생성 및 초기 구조 설정
  • 사용자 인터페이스

    • HomeScreen 컴포넌트의 텍스트 스타일 및 레이아웃 업데이트
    • 한국어와 영어 텍스트 추가
  • 구성

    • Metro 번들러 설정에서 CSS 지원 활성화
    • Tailwind CSS 구성 경로 확장
    • TypeScript 구성 파일 업데이트
  • 오류 처리

    • 웹 애플리케이션의 오류 경계(Error Boundary) 로직 간소화
    • 쿼리 클라이언트 오류 처리 메커니즘 개선

@bokeeeey bokeeeey linked an issue Jan 2, 2025 that may be closed by this pull request
@bokeeeey bokeeeey requested a review from miraclee1226 January 2, 2025 11:57
@bokeeeey bokeeeey self-assigned this Jan 2, 2025
@coderabbitai
Copy link

coderabbitai bot commented Jan 2, 2025

Warning

There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure.

🔧 eslint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

apps/mobile/app/(tabs)/index.tsx

Oops! Something went wrong! :(

ESLint: 8.57.1

ESLint couldn't find the config "expo" to extend from. Please check that the name of the config is correct.

The config "expo" was referenced from the config file in "/apps/mobile/.eslintrc.js".

If you still have problems, please stop by https://eslint.org/chat/help to chat with the team.

워크스루

이 풀 리퀘스트는 Expo 및 웹 애플리케이션의 다양한 구성 파일과 컴포넌트에 대한 여러 변경 사항을 포함하고 있습니다. 주요 변경 사항은 Tailwind CSS 구성 업데이트, Metro 번들러 설정 조정, 오류 처리 컴포넌트 리팩토링, 그리고 몇몇 README 및 구성 파일 수정을 포함합니다.

변경 사항

파일 변경 요약
.expo/README.md Expo 프로젝트의 .expo 폴더에 대한 설명 추가
.expo/devices.json 빈 장치 배열로 새 JSON 파일 생성
apps/mobile/app/(tabs)/index.tsx HomeScreen 컴포넌트의 텍스트 및 스타일링 업데이트
apps/mobile/app/_layout.tsx 가져오기 문 재정렬 및 글로벌 CSS 추가
apps/mobile/metro.config.js CSS 지원 활성화 및 구성 최적화
apps/mobile/tailwind.config.js 공유 Tailwind 구성 및 콘텐츠 경로 확장
apps/web/components/common/ErrorResetBoundary/index.tsx 쿼리 오류 재설정 로직 제거
apps/web/components/common/Fallback/index.tsx 쿼리 클라이언트 오류 처리 로직 추가
tsconfig.json 새 TypeScript 구성 파일 생성

시퀀스 다이어그램

sequenceDiagram
    participant App as 모바일 앱
    participant Metro as Metro 번들러
    participant Tailwind as Tailwind CSS
    
    App->>Metro: CSS 지원 요청
    Metro-->>App: CSS 구성 활성화
    
    App->>Tailwind: 공유 구성 로드
    Tailwind-->>App: 스타일 적용
Loading

🐰 코드의 토끼, 설정을 춤추네
메트로와 테일윈드 손잡고
오류는 멀리 보내고
앱은 더욱 빛나네
🌈 새로운 여정의 시작!


Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Generate unit testing code for this file.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai generate unit testing code for this file.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and generate unit testing code.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR. (Beta)
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

@bokeeeey bokeeeey added ⚙ Setting 개발 환경 세팅 📱 Mobile 모바일 관련 작업 labels Jan 2, 2025
@github-actions
Copy link

github-actions bot commented Jan 2, 2025

🚀 Preview URL

Branch: 178-setting-nativewind-세팅-추기
Commit: 1ae6cdc

Preview URL: https://codeit.click?pr=179

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 0

🧹 Nitpick comments (3)
apps/mobile/tailwind.config.js (1)

5-10: 스캔 경로 확장에 따른 빌드 성능 영향 주의
추가된 content 경로( ./src/**, ./components/**, ../../packages/ui/src/** 등 )가 많아지면 빌드 성능이 저하될 수 있습니다. 불필요한 경로가 없는지 확인해 보시길 권장드립니다.

apps/mobile/metro.config.js (1)

10-15: 불필요 주석 제거 검토
monorepoPackages 객체 안에 주석 처리된 경로들이 남아 있습니다. 더 이상 사용하지 않는다면 제거를 고려해 보세요.

apps/web/components/common/Fallback/index.tsx (1)

15-15: 에러 복구 시 전체 쿼리 제거 가능성 점검
queryClient.removeQueries();는 모든 쿼리의 캐시를 제거하므로, 의도치 않은 데이터 재요청이 발생할 수 있습니다. 특정 쿼리만 재설정이 필요한 경우 선택적으로 제거하는 방안을 고려해 주세요.

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 2d8a276 and d9b6461.

📒 Files selected for processing (10)
  • .expo/README.md (1 hunks)
  • .expo/devices.json (1 hunks)
  • apps/mobile/app/(tabs)/index.tsx (1 hunks)
  • apps/mobile/app/_layout.tsx (1 hunks)
  • apps/mobile/metro.config.js (1 hunks)
  • apps/mobile/tailwind.config.js (1 hunks)
  • apps/mobile/tsconfig.json (1 hunks)
  • apps/web/components/common/ErrorResetBoundary/index.tsx (1 hunks)
  • apps/web/components/common/Fallback/index.tsx (1 hunks)
  • tsconfig.json (1 hunks)
✅ Files skipped from review due to trivial changes (5)
  • .expo/devices.json
  • tsconfig.json
  • apps/mobile/app/_layout.tsx
  • apps/mobile/tsconfig.json
  • .expo/README.md
🔇 Additional comments (8)
apps/mobile/tailwind.config.js (2)

1-2: 공유 Tailwind 설정을 통한 확장 확인
모노레포에서 공유 설정을 가져오는 방식이 올바른지 확인해 주세요. @repo/tailwind-config/tailwind.config 경로가 정상적으로 동작하는지, 의존성 문제나 모듈 충돌이 없는지 점검해 보시면 좋겠습니다.


11-11: 프리셋 병합 순서 점검
nativewind/preset 뒤에 sharedConfig가 추가되었습니다. 두 설정이 어떻게 병합되는지(테마 컬러의 충돌 등) 한 번 더 점검해 보세요.

apps/mobile/metro.config.js (2)

8-8: CSS 활성화 옵션 확인
isCSSEnabled: true로 설정되어 Tailwind 등 CSS 기능을 사용할 수 있게 되었습니다. Expo 및 Metro 환경에서 해당 설정이 문제가 없는지 최종 확인해 주세요.


16-18: 빈 패키지 설정 유효성 점검
config.watchFoldersconfig.resolver.extraNodeModulesmonorepoPackages가 비어 있습니다. 설정 목적으로 남겨 둔 것이라면, 주석 등으로 의도를 명확히 해주시면 좋겠습니다.

apps/mobile/app/(tabs)/index.tsx (1)

15-17: Tailwind 클래스 사용 확인
className="bg-custom-black rounded-lg border-2 border-purple-500" 설정이 의도한 대로 동작하는지 확인해 주세요. 공유 설정에서 bg-custom-black가 정의되어 있지 않다면 예상된 스타일이 적용되지 않을 수 있습니다.

apps/web/components/common/ErrorResetBoundary/index.tsx (1)

15-15: 의존성 감소 및 코드 간소화
QueryErrorResetBoundary 사용을 제거하고 ErrorBoundary만 적용하여 불필요한 의존성을 줄이고 코드가 간결해졌습니다. 기존 기능과 동등하게 동작하므로 특별한 문제 없이 승인 가능합니다.

apps/web/components/common/Fallback/index.tsx (2)

4-4: Query Client 활용을 위한 올바른 의존성 주입
getQueryClient 모듈을 명시적으로 가져와서 필요한 곳에서 활용할 수 있게 되었습니다. 올바른 위치에서 import를 처리하셨으므로 문제 없어 보입니다.


12-13: QueryClient 선언 위치 확인
오류 발생 시점부터 에러 복구 로직까지의 흐름 상 queryClient를 전역이 아닌 해당 범위에서 즉시 가져오는 방식은 합리적입니다. 필요 시 다른 컴포넌트에서도 동일한 접근법을 적용할 수 있도록 고려해 보세요.

Copy link
Collaborator

@miraclee1226 miraclee1226 left a comment

Choose a reason for hiding this comment

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

고생많았어유~👍

@@ -1,8 +1,14 @@
import sharedConfig from "@repo/tailwind-config/tailwind.config";
Copy link
Collaborator

Choose a reason for hiding this comment

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

재사용 굿👍

Copy link
Member Author

Choose a reason for hiding this comment

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

딸깍 완료~

@bokeeeey bokeeeey merged commit 530b348 into develop Jan 2, 2025
1 check passed
@bokeeeey bokeeeey deleted the 178-setting-nativewind-세팅-추기 branch January 2, 2025 15:58
@coderabbitai coderabbitai bot mentioned this pull request Jan 28, 2025
3 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

📱 Mobile 모바일 관련 작업 ⚙ Setting 개발 환경 세팅

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Setting] nativewind 세팅 추가

2 participants