Conversation
WalkthroughChrome 확장 프로그램(Manifest V3) 기반의 새 앱을 apps/extension 아래에 신설. React+Vite+Tailwind+React Query로 팝업을 구성하고, 배경(Service Worker)·컨텐츠 스크립트를 추가. 빌드/개발 설정과 TS/Tailwind/Vite 구성, 경로 별칭, 루트 vite 버전 고정 및 .gitignore 포함. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User as 사용자
participant Browser as 브라우저(MV3)
participant BG as 배경 Service Worker
participant CS as 컨텐츠 스크립트
participant Popup as 팝업(React)
Browser->>BG: 확장 로드(서비스 워커 시작)
BG-->>BG: console.log("백그라운드 기능")
Browser->>CS: 모든 URL에 컨텐츠 스크립트 주입
CS-->>CS: console.log("컨텐츠 스크립트")
User->>Browser: 확장 아이콘 클릭
Browser->>Popup: popup.html 로드 → /src/popup.tsx
Popup-->>Popup: QueryClient 생성/마운트
Popup-->>Popup: App 렌더링
sequenceDiagram
autonumber
participant Doc as popup.html
participant Root as #root
participant React as createRoot
participant App as App
Doc->>Root: getElementById('root')
alt 루트 존재
React->>Root: createRoot(root).render(<App/>)
else 루트 없음
Doc-->>Doc: console.error("root element not found")
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Tip 🔌 Remote MCP (Model Context Protocol) integration is now available!Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats. 📜 Recent review detailsConfiguration used: .coderabbit.yaml 💡 Knowledge Base configuration:
You can enable these sources in your CodeRabbit configuration. 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
✨ Finishing Touches
🧪 Generate unit tests
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
Status, Documentation and Community
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
🧹 Nitpick comments (18)
package.json (1)
17-23: Vite 버전 일관성 확인 및 설정 검토현재 검토 결과:
- apps/client, apps/extension, apps/landing 패키지의 devDependencies.vite가 모두
^7.1.2로 선언되어 있습니다.- 루트
package.json에도 devDependency로"vite": "7.1.2"가 추가되어 있고,pnpm.overrides로 역시7.1.2가 고정되어 있습니다.- 이를 통해 워크스페이스 전역에서 동일한 Vite 버전(7.1.2)을 사용하도록 강제하고 있습니다.
✔️ 의도된 통일 정책일 경우 이대로 유지해도 무방합니다.
⚠️ 다만, 일부 앱이 별도 Vite 버전이나 플러그인 요구사항이 있을 경우 아래 옵션을 고려하세요:
- 전역 고정 유지
• 모든 워크스페이스에서 단일 버전 사용- overrides 범위 축소
•pnpm.overrides를 특정 패키지(예:apps/extension)로 한정- 루트 devDependency 제거
• 워크스페이스별로 개별 Vite 선언 + 필요한 곳에만 override 적용apps/extension/src/background.ts (1)
1-2: 문구 정리 및 서비스 워커 파일을 모듈로 명시배경 서비스 워커(MV3)라는 점을 주석으로 명확히 하고, TS가 모듈로 인식하도록
export {}를 추가하면 번들러/타입체커 오동작을 예방하는 데 도움이 됩니다.아래 수정안을 제안합니다:
-// This file is ran as a background script -console.log("Hello from background script!") +// MV3 background service worker entry +export {}; +console.log("Hello from background script!");apps/extension/src/App.tsx (2)
1-1: 자동 JSX 런타임을 사용 중이면 React 명시적 import는 불필요Vite(+@vitejs/plugin-react-swc)와 TS 설정이 자동 JSX 런타임(
react-jsx)이면import React없이도 TSX가 동작합니다. 사용 중이시라면 불필요한 import를 제거해도 됩니다.-import * as React from "react"; +// (자동 JSX 런타임을 사용하는 경우) 명시적 React import 불필요주의: 자동 런타임이 아니라면 그대로 두세요. 원하시면 제가 vite/tsconfig를 확인해 자동화 가능 여부를 점검해 드립니다.
5-9: 의미 없는 클래스명(CRA 잔재) 대신 Tailwind 유틸리티 사용 제안
App,App-header클래스는 정의가 없다면 효과가 없습니다. Tailwind를 이미 도입했으므로 유틸리티 클래스로 교체하면 일관성이 좋아집니다.예시:
- <div className="App"> - <header className="App-header"> - 안녕 - </header> - </div> + <div className="p-4"> + <header className="text-lg font-semibold">안녕</header> + </div>apps/extension/src/content.ts (1)
1-2: 콘텐츠 스크립트도 모듈 표기 및 개발용 로그 가드 권장
export {}로 모듈 스코프로 명시하면 타입/번들 이슈를 줄일 수 있습니다.- 콘솔 로그는 개발에서만 출력되도록
import.meta.env.DEV가드 권장(Vite 지원).-// This file is injected as a content script -console.log("Hello from content script!") +// Content script entry (injected via manifest) +export {}; +if (import.meta.env.DEV) { + console.log("Hello from content script!"); +}apps/extension/ .babelrc (1)
1-14: Vite(+@vitejs/plugin-react)만으로 충분 — .babelrc 제거 고려현재 설정은 Vite + React + TS 조합으로 보이며, 별도의 Babel 설정 없이도 JSX 변환과 Fast Refresh가 정상 동작합니다. .babelrc가 존재하면 일부 플러그인이 Babel을 강제 사용하면서 예기치 않은 변환/경고가 발생할 수 있습니다.
대안:
- @vitejs/plugin-react를 사용하고(.likely already), .babelrc는 삭제
- 만약 Babel이 꼭 필요하다면, preset만 유지하고 불필요한 플러그인을 제거
참고용 최소 구성 예:
{ "presets": [ ["@babel/preset-env", { "modules": false }], "@babel/preset-react" ] }apps/extension/.gitignore (2)
16-21: .env 패턴 범위를 넓혀 누락 방지(.env, .env.*)현재 .env.local 등 일부만 포함되어 있습니다. 루트 .env나 다른 변형(.env.*)이 커밋되는 것을 방지하려면 범위를 확장하는 편이 안전합니다.
.DS_Store -.env.local -.env.development.local -.env.test.local -.env.production.local +.env +.env.* +# 필요한 경우 예시 파일은 추적 유지 +!.env.example
22-24: pnpm 로그도 무시pnpm을 사용한다면 pnpm-debug.log*도 함께 무시하는 것이 일반적입니다.
npm-debug.log* yarn-debug.log* yarn-error.log* +pnpm-debug.log*apps/extension/src/custom.d.ts (1)
1-19: 자산 타입 선언 기본은 충분 — 필요 시 포맷 확장/옵션 추가 고려현재 선언으로 Vite의 기본 파일 임포트 경로 문자열 사용에 문제 없습니다. 필요 시 다음을 검토해 보세요:
- 추가 포맷: jpeg, gif, ico, avif 등
- SVGR 사용 시: import ReactComponent from '...svg?react' 형태에 대한 타입 선언
예시:
declare module '*.jpeg' { const content: string; export default content; } declare module '*.gif' { const content: string; export default content; } declare module '*.ico' { const content: string; export default content; } declare module '*.avif' { const content: string; export default content; } // SVGR 예시 (vite-plugin-svgr 사용 시) declare module '*.svg?react' { import * as React from 'react'; const Component: React.FC<React.SVGProps<SVGSVGElement>>; export default Component; }apps/extension/tsconfig.json (2)
5-6: outDir 설정은 Vite와 중복 가능 — 타입체크 전용이면 noEmit 권장Vite 빌드만 사용할 계획이라면 tsc가 JS를 dist로 내보내지 않도록 noEmit을 켜는 편이 깔끔합니다. 빌드 아티팩트 충돌 가능성을 줄입니다.
"baseUrl": ".", - "outDir": "./dist/", + "outDir": "./dist/", + "noEmit": true,(emit이 필요한 별도 파이프라인이 있다면 현 설정 유지)
18-18: "plugins": [{ "name": "react" }]는 불필요/미설치 가능성TS 언어 서비스 플러그인은 에디터 전용이며, "react"라는 이름의 플러그인이 실제 설치되어 있지 않다면 무의미합니다. 일반적으로 불필요하므로 제거를 권장합니다.
- "plugins": [{ "name": "react" }], + // "plugins": [{ "name": "react" }],apps/extension/popup.html (1)
2-6: lang과 title 추가로 접근성 및 스토어 심사 대비문서 언어와 제목이 없어서 접근성/SEO/스토어 심사 측면에서 약합니다. 아래처럼 보완을 권장합니다.
-<html> +<html lang="ko"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> + <title>PinBack Extension</title> </head>apps/extension/manifest.json (2)
15-19: 권한 범위가 과도하게 넓습니다 — 최소 권한 원칙으로 축소 권장
content_scripts.matches와host_permissions모두<all_urls>는 과도합니다. 크롬 웹스토어 심사 시 거절 사유가 될 수 있으니, 실제로 필요한 도메인/패턴으로 좁혀 주세요(가능하면 도메인 화이트리스트).주요 액션/기능 요구사항을 기준으로 필요한 호스트만 남기는지 확인 부탁드립니다. 필요 시 제가 도메인/패턴 설계 도와드릴게요.
6-8: 아이콘 사이즈 다양화 권장128px만 정의되어 있습니다. 브라우저 곳곳에서의 가독성을 위해 16/32/48/128 등 권장 사이즈를 함께 제공하는 것을 추천드립니다.
apps/extension/src/popup.tsx (1)
7-14: (선택) 개발 시 StrictMode 적용 고려개발 중 잠재 이슈를 조기에 드러내기 위해
<React.StrictMode>로 감싸는 것을 고려해 볼 수 있습니다. 배포 번들에는 영향 없습니다.예)
createRoot(rootEl).render( <React.StrictMode> <QueryClientProvider client={queryClient}> <App /> </QueryClientProvider> </React.StrictMode> );apps/extension/vite.config.ts (1)
12-14: tsconfig-paths에 로컬 tsconfig도 함께 포함 권장현재 상위
../../tsconfig.json만 참조합니다. 확장앱 전용 경로나 옵션이apps/extension/tsconfig.json에 있다면 해석 누락을 막기 위해 함께 지정하는 편이 안전합니다.- tsconfigPaths({ - projects: [resolve(__dirname, '../../tsconfig.json')], - }), + tsconfigPaths({ + projects: [ + resolve(__dirname, './tsconfig.json'), + resolve(__dirname, '../../tsconfig.json'), + ], + }),apps/extension/package.json (2)
7-12: 빌드 스크립트 정교화: 타입체크 전용 + zip의 일관성
tsc -b는 실제 TS 출력물을 생성할 수 있어 Vite 번들과 중복 산출물이 생길 수 있습니다. 타입체크만 하려면--noEmit을 권장합니다.zip은 현재vite build만 실행하여build와 동작이 달라집니다. 일관성 유지를 위해build를 호출하도록 조정하면 안전합니다."scripts": { "dev": "vite", - "build": "tsc -b && vite build", + "build": "tsc -b --noEmit && vite build", "lint": "eslint .", "format": "prettier -w .", - "zip": "vite build && node scripts/zip.mjs" + "zip": "pnpm run build && node scripts/zip.mjs" },
19-39: 불필요한 플러그인 의존성 정리 제안
@vitejs/plugin-react는 사용하지 않고@vitejs/plugin-react-swc만 사용 중입니다.vite-plugin-chrome-extension도 CRX 플러그인으로 대체되어 보입니다.
구성 단순화를 위해 제거를 고려해주세요(실제 사용 계획이 있다면 그대로 두셔도 됩니다).- "@vitejs/plugin-react": "^4.3.1", ... - "vite-plugin-chrome-extension": "0.0.7",
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled
- Linear integration is disabled
You can enable these sources in your CodeRabbit configuration.
⛔ Files ignored due to path filters (3)
apps/extension/package-lock.jsonis excluded by!**/package-lock.jsonapps/extension/public/icon128.pngis excluded by!**/*.pngpnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (15)
apps/extension/ .babelrc(1 hunks)apps/extension/.gitignore(1 hunks)apps/extension/manifest.json(1 hunks)apps/extension/package.json(1 hunks)apps/extension/popup.html(1 hunks)apps/extension/src/App.tsx(1 hunks)apps/extension/src/background.ts(1 hunks)apps/extension/src/content.ts(1 hunks)apps/extension/src/custom.d.ts(1 hunks)apps/extension/src/index.css(1 hunks)apps/extension/src/popup.tsx(1 hunks)apps/extension/tailwind.config.ts(1 hunks)apps/extension/tsconfig.json(1 hunks)apps/extension/vite.config.ts(1 hunks)package.json(1 hunks)
🧰 Additional context used
🧠 Learnings (2)
📚 Learning: 2025-07-04T10:12:01.690Z
Learnt from: constantly-dev
PR: Pinback-Team/pinback-client#10
File: apps/landing/src/index.css:1-1
Timestamp: 2025-07-04T10:12:01.690Z
Learning: In TailwindCSS v4, the import "tailwindcss"; syntax is the new recommended approach that replaces the three separate tailwind directives (tailwind base;, tailwind components;, tailwind utilities;). This single import pulls in all of Tailwind's preflight, components, and utilities in one step and is used with the tailwindcss/vite plugin.
Applied to files:
apps/extension/src/index.cssapps/extension/vite.config.ts
📚 Learning: 2025-07-04T10:12:01.690Z
Learnt from: constantly-dev
PR: Pinback-Team/pinback-client#10
File: apps/landing/src/index.css:1-1
Timestamp: 2025-07-04T10:12:01.690Z
Learning: In TailwindCSS v4, the import "tailwindcss"; syntax is the new recommended approach that replaces the three separate tailwind directives (tailwind base;, tailwind components;, tailwind utilities;). This is used with the tailwindcss/vite plugin.
Applied to files:
apps/extension/src/index.cssapps/extension/vite.config.ts
🔇 Additional comments (9)
apps/extension/ .babelrc (2)
4-10: preset-env의 modules: false 설정은 ESM 트리쉐이킹에 적합Vite 빌드와 MV3 환경에서 ESM을 유지하려는 의도로 보이며 합리적입니다.
1-14: 플러그인/버전 정합성 점검 완료
- Vite 설정(vite.config.*)에서
.babelrc또는babel참조 없음react-hot-loader가 dependencies/devDependencies에 미존재@vitejs/plugin-react확인됨 (^4.3.1)- TypeScript 버전
^5.5.4(moduleResolution: bundler ≥5.0,satisfies≥4.9 조건 충족)위 검증 결과 문제없으므로 해당 리뷰 코멘트는 해결되었습니다.
apps/extension/.gitignore (1)
1-24: 전반적으로 무난한 ignore 목록node_modules, build/dist, coverage 등 기본 아티팩트가 잘 커버되어 있습니다.
apps/extension/tailwind.config.ts (1)
1-1: 'satisfies Config' 사용 적절TS 4.9+ 기능을 활용해 설정 구조를 검증하고 있어 좋습니다.
apps/extension/tsconfig.json (3)
21-27: 경로 별칭은 Vite 설정과 동기화 필요paths 정의는 좋습니다. vite.config.ts의 resolve.alias(또는 tsconfig-paths 플러그인)와 일치하는지 확인해 주세요. 미동기화 시 런타임 모듈 해석 실패가 발생할 수 있습니다.
확인 포인트:
- vite.config.ts에 동일한 별칭이 존재하는지
- tsconfig가 Vite의 tsconfigPaths 플러그인 대상이 되는지
12-13: WebWorker 라이브러리 포함 적절MV3 service_worker(모듈) 환경을 고려한 lib 설정이 잘 되어 있습니다.
3-13: TS 버전 및 의존성 확인 완료앱
extension패키지에 설치된 TypeScript 버전이^5.5.4로,
moduleResolution: "bundler"(TS 5.0+ 필요)- Tailwind 설정의
satisfies사용 (TS 4.9+ 필요)요구사항을 모두 충족합니다.
또한
@types/chrome@vitejs/plugin-react의존성도 정상적으로 설치되어 있어 추가 조치가 필요 없음을 확인했습니다.
apps/extension/vite.config.ts (2)
10-17: 플러그인 구성이 적절합니다
- React(SWC) → tsconfig-paths → Tailwind v4 플러그인 → CRX 플러그인 순서가 자연스럽고, CRX를 마지막에 둔 것도 적절합니다.
- Tailwind v4와
@tailwindcss/vite조합은 팀 러닝과도 일치합니다.
3-3: (확인) Tailwind v4 CSS 엔트리 구성팀 러닝에 따르면 Tailwind v4는 CSS 엔트리에서
@import "tailwindcss";한 줄로 사용하는 것이 권장됩니다. 현재 설정은 플러그인 측면에서 맞게 되어 있으니, CSS 엔트리에 해당 import가 포함되어 있는지만 확인 부탁드립니다.
| "build": "tsc -b && vite build", | ||
| "lint": "eslint .", | ||
| "format": "prettier -w .", | ||
| "zip": "vite build && node scripts/zip.mjs" |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
zip 스크립트 리소스 존재 여부 확인
node scripts/zip.mjs가 레포 내에 있는지 확인 부탁드립니다. 누락 시 CI에서 스크립트가 실패합니다.
🏁 Script executed:
#!/bin/bash
# apps/extension/scripts/zip.mjs 존재 여부 확인
fd -H -t f '^zip\.mjs$' apps/extension | sed 's/^/found: /' || trueLength of output: 61
파일이 여전히 보이지 않아 추가 확인이 필요합니다. 아래 스크립트로 apps/extension/scripts 디렉터리 및 전체 .mjs 파일을 다시 검색해 주세요.
🏁 Script executed:
#!/bin/bash
# apps/extension/scripts 디렉터리 내 .mjs 파일 목록 확인
echo "▶ scripts 폴더 내 .mjs 파일:"
find apps/extension/scripts -maxdepth 1 -type f -name '*.mjs' | sed 's/^/found: /' || true
# apps/extension 전체에서 .mjs 확장자 파일 검색
echo "▶ 전체 디렉터리 .mjs 파일 검색:"
find apps/extension -type f -name '*.mjs' | sed 's/^/found: /' || trueLength of output: 317
zip.mjs 파일 누락 – 스크립트 경로 확인 및 추가 필요
apps/extension/package.json에서 참조하는 node scripts/zip.mjs 파일이 레포에 존재하지 않습니다. CI 오류를 방지하려면 아래 중 하나를 조치해 주세요:
apps/extension/scripts/zip.mjs파일을 생성하여 필요한 압축 로직을 구현하고 커밋- 또는 package.json의
"zip"스크립트 경로를 실제 스크립트 위치로 수정
대상 위치:
- 파일: apps/extension/package.json
- 라인: 11 (
"zip": "vite build && node scripts/zip.mjs")
🤖 Prompt for AI Agents
In apps/extension/package.json around line 11, the "zip" script references node
scripts/zip.mjs which does not exist in the repo; fix this by either creating
apps/extension/scripts/zip.mjs with the required packaging/zip logic and
committing it (ensure it exports/executes the build artifact compression and is
runnable by Node), or update the "zip" script in package.json to point to the
actual existing script path; after change, run the script locally to verify it
completes without errors and commit the change.
| @@ -0,0 +1 @@ | |||
| @import "tailwindcss"; | |||
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Tailwind v4의 단일 import 사용 — LGTM
팀 러닝과 일치합니다. 이 한 줄이면 base/components/utilities 전부 포함됩니다.
Tailwind 스타일이 실제 번들에 포함되는지 확인해 주세요. 보통 popup 엔트리에서 import "./index.css"가 필요합니다. 아래 스크립트로 참조 여부를 확인할 수 있습니다.
🏁 Script executed:
#!/bin/bash
# apps/extension에서 index.css가 어디에서 import/참조되는지 확인
rg -n -C1 --glob '!**/node_modules/**' --type-add 'tsx:*.tsx' --type-add 'html:*.html' 'index\.css|@import\s+"tailwindcss"' apps/extensionLength of output: 194
popup 엔트리에 Tailwind 스타일 포함을 위한 index.css import 추가 필요
Tailwind v4의 @import "tailwindcss"; 적용은 올바릅니다. 다만, apps/extension/src/index.css가 어떤 곳에서도 임포트되지 않아 실제 번들에 스타일이 포함되지 않습니다. 팝업 진입점 파일(예: apps/extension/src/popup.tsx) 최상단에 아래 import 구문을 추가해주세요:
+ import './index.css';- 파일: apps/extension/src/popup.tsx (또는 실제 팝업 엔트리 파일)
- 위치: 최상단 임포트 그룹 위
Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In apps/extension/src/index.css around line 1, the Tailwind import exists but
the CSS file is never imported into the popup bundle; open the popup entry file
(e.g., apps/extension/src/popup.tsx) and add an import of the CSS file at the
very top of the file (above other imports) so the build includes Tailwind
styles; ensure the relative path to apps/extension/src/index.css is correct and
save/rebuild.
There was a problem hiding this comment.
이 부분은 이후 디자인 시스템 설정 PR 머지된 이후에 app.css나 index.css한 파일에서
@import '@pinback/tailwind-config/shared-styles.css';
이 코드 작성해서 사용하면 될 것 같아요 👍
There was a problem hiding this comment.
@constantly-dev 좋은 계획이네요! 현재 @import "tailwindcss";는 임시 설정이고, 디자인 시스템 PR 머지 후 @pinback/tailwind-config/shared-styles.css로 통합하는 방향으로 진행하시는군요. 이렇게 하면 모노레포 전체에서 일관된 스타일을 관리할 수 있겠습니다. 👍
✏️ Learnings added
Learnt from: constantly-dev
PR: Pinback-Team/pinback-client#5
File: apps/extension/src/index.css:1-1
Timestamp: 2025-08-19T17:18:57.657Z
Learning: constantly-dev는 디자인 시스템 설정 PR 머지 후 `import 'pinback/tailwind-config/shared-styles.css';`를 `app.css`나 `index.css`에서 사용하여 공유 스타일을 관리할 계획입니다.
Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure review instructions. You can manage existing learnings in the app.
🧠 Learnings used
Learnt from: constantly-dev
PR: Pinback-Team/pinback-client#10
File: apps/landing/src/index.css:1-1
Timestamp: 2025-07-04T10:12:01.690Z
Learning: In TailwindCSS v4, the import "tailwindcss"; syntax is the new recommended approach that replaces the three separate tailwind directives (tailwind base;, tailwind components;, tailwind utilities;). This single import pulls in all of Tailwind's preflight, components, and utilities in one step and is used with the tailwindcss/vite plugin.
Learnt from: constantly-dev
PR: Pinback-Team/pinback-client#10
File: apps/landing/src/index.css:1-1
Timestamp: 2025-07-04T10:12:01.690Z
Learning: In TailwindCSS v4, the import "tailwindcss"; syntax is the new recommended approach that replaces the three separate tailwind directives (tailwind base;, tailwind components;, tailwind utilities;). This is used with the tailwindcss/vite plugin.
Learnt from: constantly-dev
PR: Pinback-Team/pinback-client#2
File: pnpm-workspace.yaml:3-3
Timestamp: 2025-08-18T13:48:59.021Z
Learning: constantly-dev는 docs 디렉터리를 컨벤션 문서 추가용으로 사용할 예정이라고 명시했습니다.
| content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'], | ||
| theme: { | ||
| extend: {}, | ||
| }, | ||
| plugins: [], | ||
| } satisfies Config; No newline at end of file |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Tailwind content 경로에 popup.html 누락 — 스캔 대상에 추가 권장
확장 팝업 엔트리가 popup.html이라면 index.html만 지정 시 해당 파일의 클래스는 스캔되지 않습니다. JIT에서 미검출된 유틸리티가 제거될 수 있습니다.
export default {
- content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+ content: ['./popup.html', './src/**/*.{js,ts,jsx,tsx}'],
theme: {
extend: {},
},
plugins: [],
} satisfies Config;추가로, 동적 클래스 네이밍을 사용한다면 safelist 설정도 검토해 주세요.
📝 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.
| content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'], | |
| theme: { | |
| extend: {}, | |
| }, | |
| plugins: [], | |
| } satisfies Config; | |
| export default { | |
| content: ['./popup.html', './src/**/*.{js,ts,jsx,tsx}'], | |
| theme: { | |
| extend: {}, | |
| }, | |
| plugins: [], | |
| } satisfies Config; |
🤖 Prompt for AI Agents
In apps/extension/tailwind.config.ts around lines 4 to 9, the Tailwind content
array only includes './index.html' and therefore misses popup.html (the
extension popup entry), causing its classes to not be scanned and possibly
purged; update the content array to include './popup.html' (or a glob that
matches it, e.g. './*.html' or './src/**/*.html') so Tailwind scans the popup
file, and if you use dynamic class names also add an appropriate safelist entry
to preserve those classes.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (4)
apps/extension/src/App.tsx (4)
1-1: (선택) 새 JSX 런타임 사용 시 React import 불필요Vite + TS에서 tsconfig의 jsx가
react-jsx/react-jsxdev라면 JSX 변환에import React가 필요 없습니다. 규칙에 따라 ESLint가 미사용 임포트를 경고할 수 있으므로 제거를 고려해보세요.적용 diff:
-import * as React from "react";tsconfig 설정(
"jsx": "react-jsx"또는"react-jsxdev")과 ESLint 설정(react/react-in-jsx-scope 비활성화)을 사용 중인지 확인 부탁드립니다.
2-2: (선택) 전역 CSS import는 엔트리(popup.tsx)로 옮기는 것을 권장전역 스타일은 보통 앱 엔트리에서 한 번만 임포트합니다. 현재처럼 컴포넌트에 두면 테스트/스토리북 등에서 중복 로딩/순서 이슈가 생길 수 있습니다.
적용 diff(App.tsx):
-import './index.css'추가로, 엔트리 파일(apps/extension/src/popup.tsx)의 최상단에 다음을 추가:
import './index.css';빌드/HMR에서 스타일이 정상 반영되는지 확인 부탁드립니다.
6-6: (선택) 팝업 사이즈가 과도하게 큽니다 — 실제 브라우저에서 오버플로우 검증 권장
h-[50rem](약 800px),w-[26rem](약 416px)는 확장 팝업 UI로는 다소 큽니다. 실제 크롬에서 팝업 영역이 잘리거나 과도한 스크롤이 생기지 않는지 확인해 주세요. 일반적으로 팝업은 고정 대략 320×400 수준으로 시작하는 경우가 많습니다.예시 조정(diff):
- <div className="h-[50rem] w-[26rem] bg-blue-500 text-white flex items-center justify-center text-2xl"> + <div className="h-96 w-80 bg-blue-500 text-white flex items-center justify-center text-2xl">실기 팝업에서 의도한 레이아웃/스크롤 동작이 나오는지 확인 부탁드립니다.
7-7: (사소) 하드코딩된 날짜/카피는 커밋에 남기기엔 과합니다데모 문구로는 좋지만, 특정 날짜가 하드코딩되어 있으면 빠르게 오래된 내용이 됩니다. 더 중립적인 플레이스홀더로 바꾸는 것을 제안합니다.
적용 diff:
- 자 핀백 앱잼 시작~오늘은 7월 7일임~ + 핀백 확장 프로그램 준비 중 🚀
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled
- Linear integration is disabled
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (1)
apps/extension/src/App.tsx(1 hunks)
🔇 Additional comments (1)
apps/extension/src/App.tsx (1)
3-11: LGTM — 팝업 App 컴포넌트 스캐폴딩이 무난합니다기본 구조와 Tailwind 적용, 기본 내보내기 흐름 모두 자연스럽습니다. 아래 코멘트는 유지보수성과 사용성 측면의 사소한 개선 제안입니다.
jjangminii
left a comment
jjangminii
left a comment
There was a problem hiding this comment.
CRX 플러그인 사용하면서 babel 대신 사용한걸로 이해했는데 따로 babelrc 폴더가 있는 이유가 궁금합니다-! 어떤역할을 하나요??
constantly-dev
left a comment
constantly-dev
left a comment
There was a problem hiding this comment.
수고하셨어요 👍 extension 설정이 보일러 플레이트가 있어도 저희 프로젝트에 맞는 설정 다 수동으로 고쳤어야 할텐데, 너무 고생하셨습니다~
There was a problem hiding this comment.
우리 프로젝트에서 tailwind를 ver4를 쓰고 있기 때문에, config파일이 필수가 아니에요! tailwind-config를 따로 package로 빼둔 상태여서 css파일에서 import하고 사용하면 될 것 같아요 👍
There was a problem hiding this comment.
헉 넵!! 확인해두었습니다! 이후 스타일 적용 확인 후 제거해두겠습니다 :)
3 participants
📌 Related Issues
✅ 체크 리스트
📄 Tasks
⭐ PR Point (To Reviewer)
1. 루트 파일
무조건 vite 버전 맞추도록 루트 파일의 package.json 수정했슴당
(apps내에 다른 버전 vite 잘못 깔렸을 때에도 충돌 안나게 강제로 v7.1.2 같게 하도록!)
2. CRX 플러그인 도입
💁🏻♀️ 보통 Vite는 SPA 기준이라 엔트리로 index.html 딱 하나만 바라봄!
근데 크롬 익스텐션은 구조가 SPA랑 달라여
이거 전부를 알아서 묶어줘야 “크롬이 읽을 수 있는 구조”가 됨!! 즉, 묶어주는 zip 파일 느낌이라고 생각하면 됨
💁🏻♀️ 만약?? CRX 플러그인 없이 직접 하면:
Vite에 rollupOptions.input으로 popup.html, background.ts, content.ts 일일이 등록해야 하고,
이 과정에서 번들 이름 충돌/출력 경로 헷갈리거나 manifest.json이랑 빌드 결과 안 맞을 수 있음...
실제로도, 저번 앱잼 때도 이거 CRX 도입 없이 rollupOptions으로 일일이 다 지정해줬더니, 나중에 fcm 세팅도 섞이면서 충돌이 잦았음여...
💁🏻♀️ 근데 CRX 플러그인 쓰면!
3.
import react from '@vitejs/plugin-react-swc'는 뭐냐!💁🏻♀️ SWC = 러스트로 만든 JS/TS 컴파일러로,, Babel보다 훨씬 빠르게 코드 변환(트랜스파일/번들링 등등!)
💁🏻♀️ 하지만 우리 SWC는
등의 이점이 있어서, babel 보단 해당 플러그인을 도입!!
📷 Screenshot
Summary by CodeRabbit
New Features
Chores