⚙️Setting: PWA 설정 및 모바일(iOS/Android) 웹앱 환경 설정 추가#147
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Important Review skippedReview was skipped due to path filters ⛔ Files ignored due to path filters (3)
CodeRabbit blocks several paths by default. You can override this behavior by explicitly including those paths in the path filters. For example, including You can disable this status message by setting the WalkthroughPWA(Progressive Web App) 지원이 추가되었습니다. next-pwa 패키지를 통해 Next.js 설정이 래핑되고, PWA 매니페스트 파일과 메타 태그가 추가되었습니다. 또한 레이아웃 CSS가 반응형으로 조정되었습니다. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
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. Comment |
|
🏷️ Labeler has automatically applied labels based on your PR title, branch name, or commit message. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (4)
src/shared/types/next-pwa.d.ts (1)
1-1: 타입 정의를 더 구체화하면 타입 안전성 향상 가능현재의 ambient 모듈 선언은 TypeScript 에러를 해결하지만,
withPWA함수의 구체적인 타입 정보를 제공하지 않습니다. 필요에 따라 더 구체적인 타입 정의를 추가하여 개발 경험을 개선할 수 있습니다.다음과 같이 개선 가능합니다:
-declare module 'next-pwa'; +declare module 'next-pwa' { + import { NextConfig } from 'next'; + + interface PWAConfig { + dest?: string; + register?: boolean; + skipWaiting?: boolean; + disable?: boolean; + buildExcludes?: RegExp[]; + } + + export default function withPWA(config: PWAConfig): (nextConfig: NextConfig) => NextConfig; +}src/pages/_app.tsx (1)
22-41: PWA 메타 태그 구성은 적절하나 Apple 아이콘 크기 최적화 권장전체적인 PWA 설정 구조는 올바르게 구현되었습니다. 다만, Line 33의
apple-touch-icon이 512x512 크기의 icon3.png를 사용하고 있는데, Apple은 180x180px 크기를 권장합니다. 큰 이미지는 iOS에서 리사이징 시 성능 저하를 유발할 수 있습니다.180x180 아이콘을 추가하고 다음과 같이 수정하는 것을 권장합니다:
- <link rel="apple-touch-icon" href="/icons/icon3.png" /> + <link rel="apple-touch-icon" href="/icons/icon-180.png" />그리고
/public/icons/디렉토리에 180x180 크기의 아이콘을 추가해주세요.next.config.ts (1)
64-71: PWA 설정 구조는 올바르나 개발 환경에서 비활성화 권장withPWA 설정이 올바르게 구성되었습니다. 다만, 개발 환경에서 Service Worker가 활성화되어 있으면 캐싱으로 인한 디버깅 문제가 발생할 수 있습니다.
개발 환경에서 PWA를 비활성화하는 옵션을 추가하세요:
const withPWABundle = withPWA({ dest: 'public', register: true, skipWaiting: true, + disable: process.env.NODE_ENV === 'development', buildExcludes: [/dynamic-css-manifest\.json$/], });public/manifest.json (1)
9-24: PWA 아이콘 크기 및 속성 개선 권장기본 매니페스트 구성은 적절하나, 아이콘 설정에 다음 개선사항을 권장합니다:
- 64x64는 표준 PWA 아이콘 크기가 아닙니다 (일반적으로 72x72, 96x96부터 시작)
- 중간 크기 아이콘들이 누락되었습니다 (144x144, 384x384 등)
purpose속성이 없어 maskable 아이콘 지원이 불명확합니다다음과 같이 개선할 수 있습니다:
"icons": [ { - "src": "/icons/icon1.png", - "sizes": "64x64", + "src": "/icons/icon-72.png", + "sizes": "72x72", + "type": "image/png", + "purpose": "any" + }, + { + "src": "/icons/icon-96.png", + "sizes": "96x96", + "type": "image/png", + "purpose": "any" + }, + { + "src": "/icons/icon-144.png", + "sizes": "144x144", "type": "image/png", + "purpose": "any" }, { "src": "/icons/icon2.png", "sizes": "192x192", - "type": "image/png" + "type": "image/png", + "purpose": "any maskable" + }, + { + "src": "/icons/icon-384.png", + "sizes": "384x384", + "type": "image/png", + "purpose": "any" }, { "src": "/icons/icon3.png", "sizes": "512x512", - "type": "image/png" + "type": "image/png", + "purpose": "any maskable" } ]
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (4)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yamlpublic/icons/icon1.pngis excluded by!**/*.pngpublic/icons/icon2.pngis excluded by!**/*.pngpublic/icons/icon3.pngis excluded by!**/*.png
📒 Files selected for processing (6)
next.config.ts(3 hunks)package.json(1 hunks)public/manifest.json(1 hunks)src/pages/_app.tsx(2 hunks)src/shared/types/next-pwa.d.ts(1 hunks)src/styles/globals.css(2 hunks)
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2025-10-31T17:34:04.352Z
Learnt from: jjangminii
Repo: geulDa/FE PR: 64
File: src/pages/map/result/components/ResultMap.tsx:3-3
Timestamp: 2025-10-31T17:34:04.352Z
Learning: The geulDa/FE project uses Next.js Pages Router (not App Router), so components should import useRouter from 'next/router' and should not use the 'use client' directive.
Applied to files:
src/pages/_app.tsx
🧬 Code graph analysis (1)
src/pages/_app.tsx (1)
src/shared/layout/AppLayout.tsx (1)
AppLayout(1-7)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: build-and-deploy
🔇 Additional comments (1)
src/styles/globals.css (1)
16-40: 반응형 레이아웃 구현이 PWA 요구사항에 적합합니다모바일 우선 접근 방식과
hover/pointer미디어 쿼리를 사용한 데스크톱/모바일 분기 처리가 적절합니다. 모바일에서는 전체 너비를 사용하고, 데스크톱에서는 390px로 제한하여 일관된 모바일 앱 경험을 제공합니다.
| "jwt-decode": "^4.0.0", | ||
| "lottie-react": "^2.4.1", | ||
| "next": "15.5.4", | ||
| "next-pwa": "^5.6.0", |
There was a problem hiding this comment.
🧩 Analysis chain
next-pwa 버전 호환성 및 최신 버전 확인 필요
next-pwa ^5.6.0은 상당히 오래된 버전이며, 현재 사용 중인 Next.js 15.5.4와의 호환성이 보장되지 않을 수 있습니다. Next.js 15는 next-pwa v5와 호환되지 않을 가능성이 높으며, 대신 @ducanh2912/next-pwa 같은 커뮤니티 포크를 사용해야 할 수 있습니다.
다음 스크립트로 최신 버전 정보와 Next.js 15 호환성을 확인해주세요:
웹에서도 관련 정보를 확인해주세요:
🏁 Script executed:
#!/bin/bash
# next-pwa의 최신 버전 및 Next.js 15 호환성 확인
echo "=== next-pwa 최신 버전 확인 ==="
npm view next-pwa version time
echo -e "\n=== @ducanh2912/next-pwa (Next.js 13+ 호환 포크) 확인 ==="
npm view @ducanh2912/next-pwa version time
echo -e "\n=== package.json의 Next.js 버전 확인 ==="
cat package.json | grep -A2 '"next"'Length of output: 7715
🌐 Web query:
Does next-pwa version 5.6.0 support Next.js 15?
💡 Result:
Short answer: No official support — next-pwa v5.6.0 was published years before Next.js 15 and is not listed as compatible with Next 15. See the package/GitHub metadata (last publish ~3 years ago) and project repo. [1][2][3]
If you need help testing compatibility or a migration path (errors you're seeing), tell me the error and I’ll help troubleshoot.
Sources:
- npm package page (next-pwa v5.6.0, last publish ~3 years ago). [1]
- GitHub repo (next-pwa README / project). [2]
- Snyk/npm metadata noting last-release / maintenance signal. [3]
🏁 Script executed:
#!/bin/bash
# Check actual package.json in the repository for Next.js version and PWA setup
cat package.json | grep -E '"next"|"next-pwa"' -A1 -B1Length of output: 100
next-pwa 버전을 @ducanh2912/next-pwa로 업그레이드 필요
현재 package.json에 지정된 next-pwa ^5.6.0 (2022년 8월 릴리스, 마지막 업데이트)은 Next.js 15.5.4와 공식적으로 호환되지 않습니다. Next.js 15 지원을 위해 유지보수 중인 @ducanh2912/next-pwa v10.2.9 포크로 마이그레이션해야 합니다.
🤖 Prompt for AI Agents
In package.json at line 21, replace the dependency "next-pwa": "^5.6.0" with the
maintained fork "@ducanh2912/next-pwa": "10.2.9" to ensure compatibility with
Next.js 15.5.4; after editing run your package manager (npm/yarn/pnpm install)
to update lockfile, then rebuild and run the app to verify no breaking config
changes are required (adjust next.config.js PWA options if any deprecation
warnings appear).
1 participant
🔥 작업 내용
next-pwa추가 및next.config.ts에 PWA 옵션 등록public/manifest.json)apple-touch-icon등록_app.tsx에 manifest 및 iOS meta 태그 주입.app-wrapper반응형 구조 개선🤔 추후 작업 사항
🔗 이슈
PR Point (To Reviewer)
📸 피그마 스크린샷 or 기능 GIF
(필요 시 첨부)
Summary by CodeRabbit
릴리스 노트
새로운 기능
스타일