[Setting] 필수 라이브러리 설치 및 웹뷰 테스트 #181
Conversation
|
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
apps/mobile/app/(tabs)/test.tsxOops! 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. Walkthrough이 풀 리퀘스트는 여러 애플리케이션의 구성 및 기능에 대한 다양한 변경 사항을 포함하고 있습니다. API 컨트롤러의 Swagger 문서 개선, 모바일 앱의 구성 업데이트, 웹 애플리케이션의 오류 처리 로직 수정 등이 주요 변경 사항입니다. 주로 문서화, 구성 설정, 컴포넌트 개선에 초점을 맞추고 있으며, 애플리케이션의 전반적인 품질과 사용성을 향상시키는 데 기여하고 있습니다. Changes
Suggested labels
Suggested reviewers
Poem
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? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (5)
apps/web/app/dashboard/_components/DashboardProvider.tsx (1)
2-2: 코드 구조 정리빈 줄 추가를 통해 임포트 구문과 React 훅들의 구조가 분리되어 가독성이 향상되었습니다. 유지보수를 위해 적절한 폴더 구조 및 컴포넌트 분리가 계속 이뤄지는지 확인해 주세요.
apps/mobile/app/(tabs)/test.tsx (1)
5-7: 컴포넌트 명명 규칙을 확인해 보세요.
React 컴포넌트는 보통 대문자로 시작되는 이름을 사용하는 것을 권장합니다. 예:Test
또한,localhostURL은 실제 기기에서 접근이 어려울 수 있으므로 필요하다면 적절한 호스트나 환경 변수를 통해 설정하는 방안을 고려해 보세요.apps/mobile/app/(tabs)/index.tsx (1)
15-17: 사용자 메시지의 표기 확인
"Welcome! 테일윈드 확인용" 문구가 개발용 메시지로 보입니다. 배포 시점에는 사용자에게 노출되는 메시지를 적절히 수정하는 것을 권장합니다.apps/api/src/controllers/teamController.ts (2)
Line range hint
10-35:getTeamsAPI 문서 개선
팀 목록을 반환하는 내용을 Swagger에 잘 작성하셨습니다. 다만, 반환되는 데이터 구조(예: 팀 수가 0개일 때의 응답 형태)에 대한 상세 예시를 추가하면 API 사용자의 이해가 한층 높아질 것 같습니다.
Line range hint
139-221:updateTeamNameAPI 명세 구체화
팀 ID의 유효성 검사와 중복 팀명 체크 로직이 명확합니다. 문서상으로도404,409상황을 잘 서술해 놓았지만, Swagger 예시를 조금 더 구체화(예: 요청 예시)하면 API 사용자가 오류 처리를 쉽게 이해할 수 있습니다.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (16)
apps/api/src/controllers/teamController.ts(11 hunks)apps/mobile/app.json(1 hunks)apps/mobile/app/(tabs)/_layout.tsx(1 hunks)apps/mobile/app/(tabs)/index.tsx(1 hunks)apps/mobile/app/(tabs)/test.tsx(1 hunks)apps/mobile/app/_layout.tsx(1 hunks)apps/mobile/eas.json(1 hunks)apps/mobile/glodal.css(0 hunks)apps/mobile/metro.config.js(1 hunks)apps/mobile/package.json(1 hunks)apps/mobile/tailwind.config.js(1 hunks)apps/mobile/tsconfig.json(1 hunks)apps/web/app/dashboard/_components/DashboardProvider.tsx(1 hunks)apps/web/components/common/ErrorResetBoundary/index.tsx(1 hunks)apps/web/components/common/Fallback/index.tsx(1 hunks)apps/web/src/contexts/SeatContext.tsx(0 hunks)
💤 Files with no reviewable changes (2)
- apps/mobile/glodal.css
- apps/web/src/contexts/SeatContext.tsx
✅ Files skipped from review due to trivial changes (1)
- apps/mobile/tsconfig.json
🔇 Additional comments (21)
apps/mobile/eas.json (1)
2-5: CLI 버전 검증이 필요합니다CLI 버전이 최신 안정 버전인지 확인이 필요합니다.
✅ Verification successful
CLI 버전이 최신 안정 버전으로 설정되어 있습니다
현재 설정된 CLI 버전 요구사항 ">= 14.2.0"은 npm에서 확인된 최신 안정 버전(14.2.0)과 일치합니다. 이는 적절한 설정입니다.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Check the latest stable version of EAS CLI # Get the latest version from npm npm show eas-cli versionLength of output: 33
apps/web/components/common/ErrorResetBoundary/index.tsx (1)
15-15: 에러 처리 로직이 단순화되었습니다.
ErrorBoundary만으로 에러 핸들링이 이뤄지도록 변경되어 전체적인 구조가 깔끔해졌습니다. 다만, Query 관련 에러를 별도로 복구할 필요가 있다면 추가 로직이 필요한지 검토가 필요합니다.apps/web/components/common/Fallback/index.tsx (3)
4-4:getQueryClient활용 주의
getQueryClient를 가져와서 사용하는 부분입니다. 클라이언트 초기화 로직에서 의도한 대로 동일한 인스턴스를 사용할 수 있는지 확인해 주세요.
12-13: 쿼리 클라이언트 사용 시점 확인 필요
queryClient를 컴포넌트 내부에서 호출하고 있어, 컴포넌트가 마운트될 때마다 새로운 인스턴스를 생성하지 않는지 확인이 필요합니다.
15-15: 쿼리 제거 후 에러 바운더리 리셋
queryClient.removeQueries()호출 후resetErrorBoundary()를 실행해 에러 상태를 완전히 초기화하려는 의도로 보입니다. 동일한 쿼리가 다시 필요한 경우, 쿼리가 재실행될 로직을 마련했는지 확인해 주세요.apps/mobile/app/(tabs)/test.tsx (2)
1-3: 모듈 임포트가 적절합니다.
이 파일에서expo-constants,react-native,react-native-webview를 불러오는 방법이 깔끔하게 구성되어 있습니다.
9-14: 스타일 정의가 간결합니다.
Constants.statusBarHeight를 이용해 상단 여백을 주는 것은 모바일 UI에서 유용한 방식입니다.apps/mobile/tailwind.config.js (2)
1-1: 공유 Tailwind 설정을 잘 가져오셨습니다.
이 설정을 통해 프로젝트 전반적으로 일관된 Tailwind 프리셋을 사용할 수 있습니다.
5-10: 추가된content경로와presets가 바람직합니다.
새롭게 추가된../../packages/ui/src/**/*.{ts,tsx}와./components/**/*.{js,ts,jsx,tsx}경로를 통해 공유 UI 컴포넌트에 Tailwind 유틸리티 클래스를 제대로 적용할 수 있습니다. 또한,sharedConfig를presets에 추가함으로써, 프로젝트 전반의 Tailwind 설정을 재사용 가능하게 구성하셨습니다.Also applies to: 11-11
apps/mobile/metro.config.js (3)
8-8: CSS 활성화 설정이 반영되었습니다.
getDefaultConfig호출 시{ isCSSEnabled: true }옵션을 추가함으로써 CSS를 활용할 수 있게 수정하신 점이 유용합니다.
10-15:monorepoPackages정의 및 워치 폴더 설정에 주의가 필요합니다.
현재 모든 주석이 해제되지 않아 실제로 패키지가 import되지 않을 수 있으며,config.watchFolders및config.resolver.extraNodeModules에 반영되더라도 실제 동작은 제한적일 수 있습니다.
프로젝트 구조나 확장성 측면에서 주석을 단계적으로 해제하거나 별도의 설정 문서를 마련하여 관리하면 좋겠습니다.Also applies to: 16-16, 18-18
26-26: 전역 CSS 경로 변경을 주의하세요.
"../../packages/ui/styles/globals.css"경로로 변경되어, 기존 로컬 CSS 파일(".global.css") 대신 공유 스타일을 사용하는 방식으로 전환되었습니다. 확실히 스타일이 잘 로드되는지, 파일 구조 상 문제는 없는지 확인해 보시길 권장합니다.apps/mobile/app/_layout.tsx (1)
9-10: 중요 라이브러리와 전역 CSS를 정상적으로 불러옵니다.
react-native-reanimated활성화와@repo/ui/styles/globals.css임포트로 인해 애니메이션 및 스타일이 프로젝트 전체에 적용될 수 있습니다. 앱 실행 시 문제없이 동작하는지 한번 더 점검해 주세요.apps/mobile/app/(tabs)/_layout.tsx (1)
34-42: 새로운 탭 스크린 추가 확인
탭에test스크린을 추가한 것은 UI 확장을 위해 적절해 보입니다. 그러나 실제 사용 의도나 UX에 적합한지, 그리고 다른 탭과의 통일성이 유지되는지 검토해 보시기 바랍니다.apps/api/src/controllers/teamController.ts (3)
Line range hint
36-114:createTeamAPI의 유효성 검사 로직
팀 이름이 비어 있는 경우400에러를 반환하고, 중복 이름에 대해409에러를 반환하여 예외 처리를 잘 분기하셨습니다. 추후 팀명 길이 제한이나 기타 조건을 추가해야 한다면, 동일한 방식으로 처리를 확장할 수 있으니 참고하시기 바랍니다.
Line range hint
259-332:updateTeamOrder로직 점검
팀 개수가 일치하지 않는 경우 에러 처리하는 로직이 명확합니다. 다만, 클라이언트에서 전달받는updatedTeams의 각 항목에 대한 구조적 유효성(예:_id가 실제 ObjectId 형태인지 등)도 검사해야 할 필요성이 있을 수 있으니 고려해 보세요.
Line range hint
368-410:deleteTeam기능 확인
삭제된 팀이 없을 때404를 반환하는 처리가 간결하고 명료합니다.deleteTeam사용 시, 삭제 전에 팀 관련 다른 엔티티나 참조가 있는지 확인해야 하는 요구 사항이 없는지 재검토하는 것도 좋습니다.apps/mobile/app.json (3)
4-4: slug 변경 검토
"slug": "codeit-resources"로 변경되어 Expo 프로젝트 식별자가 달라졌습니다. EAS나 앱 스토어 출시에 영향이 있는지 다시 한번 확인하세요.
10-14: EAS 설정 추가
extra에 EASprojectId가 정상적으로 추가되었습니다. 이 설정이 빌드 파이프라인에 잘 반영되어 있는지, CI/CD에서 문제 없는지 확인해 주세요.
22-23: 번들 및 패키지 식별자 지정
iOS와 Android 모두"com.bokeeeey.codeitresources"로 지정하셨네요. 배포 후 역방향 도메인(com.bokeeeey.~)이 변경되지 않도록 주의하며, 관련 문서(스토어 등)나 프로비저닝 프로파일에서도 동일하게 적용되어야 합니다.Also applies to: 29-30
apps/mobile/package.json (1)
41-41: WebView 보안 설정 관련 권장사항WebView 구현 시 다음 보안 설정을 고려해주세요:
- 신뢰할 수 있는 URL만 허용
- JavaScript 인젝션 방지
- 로컬 파일 접근 제한
- CORS 정책 설정
프로젝트에서 WebView 구현을 검사하기 위해 다음 스크립트를 실행하세요:
| "submit": { | ||
| "production": {} | ||
| } |
There was a problem hiding this comment.
제출 구성이 비어 있습니다
프로덕션 환경의 제출 구성이 비어 있습니다. 앱스토어 및 플레이스토어 배포를 위한 필수 설정을 추가해야 합니다.
다음과 같이 구성을 추가하는 것을 추천드립니다:
"submit": {
- "production": {}
+ "production": {
+ "android": {
+ "track": "internal",
+ "releaseStatus": "completed"
+ },
+ "ios": {
+ "appleId": "your-apple-id",
+ "ascAppId": "your-app-store-connect-app-id",
+ "appleTeamId": "your-team-id"
+ }
+ }
}Committable suggestion skipped: line range outside the PR's diff.
| "build": { | ||
| "development": { | ||
| "developmentClient": true, | ||
| "distribution": "internal" | ||
| }, | ||
| "preview": { | ||
| "distribution": "internal" | ||
| }, | ||
| "production": { | ||
| "autoIncrement": true | ||
| } | ||
| }, |
There was a problem hiding this comment.
🛠️ Refactor suggestion
빌드 구성에 중요한 설정이 누락되었습니다
현재 구성에는 다음과 같은 중요한 설정들이 누락되어 있습니다:
- 플랫폼별 빌드 프로필 (iOS/Android)
- 환경 변수 처리 방식
- 디버그/릴리스 모드 설정
다음과 같이 구성을 보완하는 것을 추천드립니다:
"build": {
"development": {
"developmentClient": true,
- "distribution": "internal"
+ "distribution": "internal",
+ "android": {
+ "buildType": "apk",
+ "gradleCommand": ":app:assembleDebug"
+ },
+ "ios": {
+ "buildConfiguration": "Debug"
+ },
+ "env": {
+ "APP_ENV": "development"
+ }
},
"preview": {
- "distribution": "internal"
+ "distribution": "internal",
+ "android": {
+ "buildType": "apk"
+ },
+ "ios": {
+ "buildConfiguration": "Release"
+ },
+ "env": {
+ "APP_ENV": "staging"
+ }
},
"production": {
- "autoIncrement": true
+ "autoIncrement": true,
+ "android": {
+ "buildType": "app-bundle"
+ },
+ "ios": {
+ "buildConfiguration": "Release"
+ },
+ "env": {
+ "APP_ENV": "production"
+ }
}
}📝 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.
| "build": { | |
| "development": { | |
| "developmentClient": true, | |
| "distribution": "internal" | |
| }, | |
| "preview": { | |
| "distribution": "internal" | |
| }, | |
| "production": { | |
| "autoIncrement": true | |
| } | |
| }, | |
| "build": { | |
| "development": { | |
| "developmentClient": true, | |
| "distribution": "internal", | |
| "android": { | |
| "buildType": "apk", | |
| "gradleCommand": ":app:assembleDebug" | |
| }, | |
| "ios": { | |
| "buildConfiguration": "Debug" | |
| }, | |
| "env": { | |
| "APP_ENV": "development" | |
| } | |
| }, | |
| "preview": { | |
| "distribution": "internal", | |
| "android": { | |
| "buildType": "apk" | |
| }, | |
| "ios": { | |
| "buildConfiguration": "Release" | |
| }, | |
| "env": { | |
| "APP_ENV": "staging" | |
| } | |
| }, | |
| "production": { | |
| "autoIncrement": true, | |
| "android": { | |
| "buildType": "app-bundle" | |
| }, | |
| "ios": { | |
| "buildConfiguration": "Release" | |
| }, | |
| "env": { | |
| "APP_ENV": "production" | |
| } | |
| } | |
| }, |
| "react-native-safe-area-context": "4.10.5", | ||
| "react-native-screens": "3.31.1", | ||
| "react-native-web": "~0.19.10", | ||
| "react-native-webview": "13.8.6", |
There was a problem hiding this comment.
💡 Codebase verification
react-native-webview 버전이 최신 보안 업데이트를 포함하고 있지 않습니다
현재 설치된 react-native-webview 13.8.6 버전은 최신 버전(13.12.5)보다 낮습니다. 프로젝트의 React Native 0.74.5 및 Expo 51.0.28 버전과의 호환성은 문제가 없으나, 보안 업데이트가 포함된 최신 버전으로 업그레이드하는 것을 권장드립니다.
• package.json에서 버전을 "react-native-webview": "^13.12.5"로 업데이트하는 것을 고려해보세요.
🔗 Analysis chain
WebView 종속성 버전 호환성 확인 필요
현재 프로젝트의 React Native 버전(0.74.5)과 Expo 버전(~51.0.28)에 대해 react-native-webview 13.8.6 버전의 호환성을 확인해주세요.
다음 스크립트를 실행하여 호환성을 확인할 수 있습니다:
Let me try another approach to verify the compatibility.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Check compatibility between react-native-webview and React Native/Expo versions
# Check the latest compatible versions
curl -s https://raw.githubusercontent.com/react-native-webview/react-native-webview/master/docs/Getting-Started.md | grep -A 5 "Version Support"
# Check for any known compatibility issues
gh api graphql -f query='
{
repository(owner: "react-native-webview", name: "react-native-webview") {
issues(first: 5, states: OPEN, labels: ["compatibility"]) {
nodes {
title
url
labels(first: 5) {
nodes {
name
}
}
}
}
}
}'
Length of output: 509
Script:
#!/bin/bash
# Check package.json for React Native and Expo versions
cat apps/mobile/package.json
# Check the latest version of react-native-webview
npm view react-native-webview versions --json | jq -r '.[-5:]|.[]'
# Check if there are any breaking changes in the changelog
curl -s https://raw.githubusercontent.com/react-native-webview/react-native-webview/master/CHANGELOG.md | head -n 20
Length of output: 2013
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
apps/mobile/app/(tabs)/test.tsx (1)
9-14: 스타일 구현이 적절합니다.
Constants.statusBarHeight를 활용한 상태 표시줄 높이 조정이 잘 되어있습니다.다만, 추가적인 사용성 개선을 위해 다음과 같은 스타일 속성 추가를 고려해보세요:
const styles = StyleSheet.create({ container: { flex: 1, marginTop: Constants.statusBarHeight, + backgroundColor: '#ffffff', }, });
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
apps/mobile/app/(tabs)/test.tsx(1 hunks)
🔇 Additional comments (2)
apps/mobile/app/(tabs)/test.tsx (2)
1-3: 필요한 import 구문이 모두 포함되어 있습니다.필수 라이브러리들이 적절하게 import 되어 있습니다.
1-14: 보안 및 성능 관련 검토 필요
- HTTPS 프로토콜 사용 확인이 필요합니다.
- WebView의 JavaScript 실행 정책을 명시적으로 설정하는 것이 좋습니다.
- 웹뷰 캐싱 전략을 고려해야 합니다.
다음 명령어로 프로젝트 내의 모든 WebView 구현을 검사하겠습니다:
| export default function test() { | ||
| return <WebView style={styles.container} source={{ uri: "https://codeit.click" }} />; | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
WebView 구현에 대한 개선 필요
다음과 같은 개선사항들을 고려해주세요:
- 컴포넌트 이름이 소문자로 시작하는 것은 React 컴포넌트 네이밍 컨벤션에 맞지 않습니다.
- 웹뷰 로딩 상태 처리가 없습니다.
- 오류 처리가 구현되어 있지 않습니다.
다음과 같이 수정하는 것을 제안드립니다:
-export default function test() {
+export default function Test() {
return (
- <WebView style={styles.container} source={{ uri: "https://codeit.click" }} />
+ <WebView
+ style={styles.container}
+ source={{ uri: "https://codeit.click" }}
+ onError={(syntheticEvent) => {
+ const { nativeEvent } = syntheticEvent;
+ console.warn('WebView error: ', nativeEvent);
+ }}
+ onLoadStart={() => {
+ // 로딩 시작 시 처리
+ }}
+ onLoadEnd={() => {
+ // 로딩 완료 시 처리
+ }}
+ />
);
}Committable suggestion skipped: line range outside the PR's diff.
🚀 작업 내용
📝 참고 사항
🖼️ 스크린샷
🚨 관련 이슈 (이슈 번호)
✅ 체크리스트
Summary by CodeRabbit
새로운 기능
버그 수정
문서화
스타일
기타