Feat(extension, client): extension dist discord webhook#322
Merged
constantly-dev merged 10 commits intodevelopfrom Mar 19, 2026
Merged
Feat(extension, client): extension dist discord webhook#322constantly-dev merged 10 commits intodevelopfrom
constantly-dev merged 10 commits intodevelopfrom
Conversation
… 각 apps public으로 이동
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning Rate limit exceeded
⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (4)
Walkthrough디자인 시스템의 Changes
Sequence Diagram(s)sequenceDiagram
participant Build as Build Process
participant Script as zip.mjs Script
participant FS as File System
participant Discord as Discord Webhook
participant Proc as Node Process
Build->>Script: pnpm build:dev 실행 후 스크립트 호출
Script->>FS: dist/ 존재 여부 확인
FS-->>Script: dist/ 존재 확인
Script->>FS: out/ 생성, 기존 zip 제거
Script->>FS: adm-zip으로 dist/ 압축 -> out/pinback-ext-dev.zip
FS-->>Script: zip 생성 완료
Script->>Discord: 메시지(타임스탬프) + zip 파일 업로드 (multipart/form-data)
alt 업로드 성공
Discord-->>Script: 200 응답
Script->>Proc: 정상 종료 (exit 0)
else 업로드 실패 (예: 413)
Discord-->>Script: 에러 응답
Script->>Discord: 실패 알림 전송 (비동기)
Script->>Proc: 에러 로깅 후 종료 (exit 1)
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested labels
Suggested reviewers
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
📝 Coding Plan
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 |
|
✅ Storybook chromatic 배포 확인: |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 6
🧹 Nitpick comments (1)
apps/extension/src/pages/DuplicatePop.tsx (1)
1-1: 변수명 오타(extesionPop)는 정리하는 것을 권장합니다.동작에는 영향 없지만 추후 검색성과 가독성에 불리합니다.
extensionPop처럼 일관된 명명으로 맞추는 편이 좋습니다.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/extension/src/pages/DuplicatePop.tsx` at line 1, The imported variable name extesionPop in DuplicatePop.tsx is misspelled; rename the import identifier to extensionPop (and update all its usages in this file, e.g., any JSX or references to extesionPop) so the symbol is consistently and correctly named across the module to improve readability and searchability.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@apps/client/src/shared/components/sidebar/MyLevelItem.tsx`:
- Around line 36-41: The img in MyLevelItem.tsx is inside an aria-hidden region
so its current alt text conflicts with accessibility semantics; if the image is
purely decorative, change the <img> element's alt to an empty string (alt="") to
reflect that and keep or remove aria-hidden as appropriate; locate the img in
the MyLevelItem component (the <img src="/assets/chippi_profile.svg" ... />
node) and update its alt to "" so the image is treated as decorative by
assistive tech.
In `@apps/extension/package.json`:
- Around line 13-14: The "share:dev" script uses the Node.js "--env-file" flag
(requires Node >=20.6.0) while the root package.json's engines.node still allows
">=18", causing failures for Node 18/19 when running "share:dev" or "share:ext";
fix by either updating engines.node to ">=20.6.0" to match the flag requirement,
or remove the CLI flag and load .env.development inside the script (e.g.,
require/initialize dotenv or use node -r dotenv/config in the script that calls
scripts/zip.mjs) so "share:dev" and "share:ext" work on older supported Node
versions.
In `@apps/extension/scripts/zip.mjs`:
- Around line 11-12: 현재 ZIP_NAME과 ZIP_PATH가 하드코딩되어 있어 프로덕션 빌드도 dev
아카이브(pinback-ext-dev.zip)로 덮어쓰입니다; 수정 방법은 ZIP_NAME을 고정 문자열 대신 빌드 모드(예: argv 또는
process.env.BUILD_MODE / process.env.NODE_ENV)로 결정하도록 변경하고 ZIP_PATH는 그 값에 따라
생성하도록 바꾸세요; 또한 apps/extension의 package.json에서 호출하는 'zip' 및 'share:dev' 스크립트가 필요
시 모드 인자나 환경변수를 전달하도록 업데이트해 서로 다른 모드별 파일명(pinback-ext-dev.zip vs pinback-ext.zip
등)을 사용하게 하십시오.
- Around line 77-82: The failure notification is being fire-and-forget via
uploadToDiscord(failMessage).catch(...) and then process.exit(1) is called
immediately, risking the Discord message not being sent; change the flow to
await uploadToDiscord(failMessage) (handle errors with try/catch or .catch and
log) before calling process.exit(1) so the notification finishes sending,
ensuring you still log the final errorMsg and then call process.exit(1).
In `@apps/extension/src/pages/DuplicatePop.tsx`:
- Around line 18-27: The two buttons in DuplicatePop.tsx (the button elements
wired to onLeftClick and onRightClick) lack explicit type attributes which can
cause accidental form submission when this component is used inside a form;
update both button elements to include type="button" to prevent unintended
submit behavior while preserving their onClick handlers.
- Around line 10-13: The <img> tag in the DuplicatePop component is missing an
alt attribute which breaks screen reader accessibility; update the <img> (using
the extesionPop source in DuplicatePop.tsx) to include an empty alt attribute
(alt="") since the image is decorative so screen readers will ignore it.
---
Nitpick comments:
In `@apps/extension/src/pages/DuplicatePop.tsx`:
- Line 1: The imported variable name extesionPop in DuplicatePop.tsx is
misspelled; rename the import identifier to extensionPop (and update all its
usages in this file, e.g., any JSX or references to extesionPop) so the symbol
is consistently and correctly named across the module to improve readability and
searchability.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 6ecbf60e-4e93-44bd-ad45-39b1a906d58f
⛔ Files ignored due to path filters (14)
apps/client/public/assets/chippi_profile.svgis excluded by!**/*.svgapps/client/public/assets/palms.svgis excluded by!**/*.svgapps/client/public/assets/tooltip_1.svgis excluded by!**/*.svgapps/client/public/assets/tooltip_2.svgis excluded by!**/*.svgapps/client/public/assets/tooltip_3.svgis excluded by!**/*.svgapps/client/public/assets/tooltip_4.svgis excluded by!**/*.svgapps/client/public/assets/tooltip_5.svgis excluded by!**/*.svgapps/landing/public/palms.svgis excluded by!**/*.svgpackages/design-system/src/icons/source/dotori.svgis excluded by!**/*.svgpackages/design-system/src/icons/source/extension_pop.svgis excluded by!**/*.svgpackages/design-system/src/icons/source/extension_thumb.svgis excluded by!**/*.svgpackages/design-system/src/icons/source/logout_chippi.2512.svgis excluded by!**/*.svgpackages/design-system/src/icons/source/saved.svgis excluded by!**/*.svgpnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (13)
apps/client/src/pages/level/components/LevelInfoCard.tsxapps/client/src/pages/myBookmark/components/footer/Footer.tsxapps/client/src/pages/onBoarding/components/footer/Footer.tsxapps/client/src/pages/remind/components/footer/Footer.tsxapps/client/src/shared/components/sidebar/MyLevelItem.tsxapps/extension/.gitignoreapps/extension/package.jsonapps/extension/scripts/zip.mjsapps/extension/src/pages/DuplicatePop.tsxapps/extension/vite.config.tsapps/landing/src/components/Footer.tsxpackage.jsonpackages/design-system/src/icons/iconNames.ts
💤 Files with no reviewable changes (1)
- packages/design-system/src/icons/iconNames.ts
Comment on lines
+13
to
+14
| "zip": "pnpm build:prod && node scripts/zip.mjs", | ||
| "share:dev": "pnpm build:dev && node --env-file=.env.development scripts/zip.mjs" |
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
Node.js --env-file flag support when introduced version
💡 Result:
The --env-file flag was introduced in Node.js version 20.6.0.
Citations:
- 1: https://nodejs.org/en/blog/release/v20.6.0
- 2: src: add built-in
.envfile support nodejs/node#48890 - 3: v20.6.0 proposal nodejs/node#49185
🏁 Script executed:
# Verify the actual package.json files and scripts
find . -name "package.json" -path "*/extension/*" -o -name "package.json" -path "./package.json" | head -20Repository: Pinback-Team/pinback-client
Length of output: 115
🏁 Script executed:
# Check root package.json for engine declaration
cat -n package.json | grep -A 2 -B 2 '"node"'Repository: Pinback-Team/pinback-client
Length of output: 198
🏁 Script executed:
# Check apps/extension/package.json for the scripts and dependencies
cat -n apps/extension/package.jsonRepository: Pinback-Team/pinback-client
Length of output: 2172
🏁 Script executed:
# Search for share:ext script in all package.json files
grep -r "share:ext" . --include="package.json"Repository: Pinback-Team/pinback-client
Length of output: 147
🏁 Script executed:
# Also search in any script files
grep -r "share:ext" . --include="*.mjs" --include="*.js" --include="*.json"Repository: Pinback-Team/pinback-client
Length of output: 147
share:dev 스크립트가 지원 엔진 범위 내에서 작동하지 않습니다.
node --env-file 플래그는 Node.js 20.6.0부터 지원되지만, 루트 package.json (Line 47)에서는 여전히 engines.node: >=18을 허용하고 있습니다. Node 18과 19 환경에서 share:dev 및 이를 호출하는 share:ext 스크립트가 실패합니다.
엔진 하한을 >=20.6.0 이상으로 올리거나, .env.development 파일을 스크립트 내부(dotenv 등)에서 로드하는 방식으로 변경해야 합니다.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@apps/extension/package.json` around lines 13 - 14, The "share:dev" script
uses the Node.js "--env-file" flag (requires Node >=20.6.0) while the root
package.json's engines.node still allows ">=18", causing failures for Node 18/19
when running "share:dev" or "share:ext"; fix by either updating engines.node to
">=20.6.0" to match the flag requirement, or remove the CLI flag and load
.env.development inside the script (e.g., require/initialize dotenv or use node
-r dotenv/config in the script that calls scripts/zip.mjs) so "share:dev" and
"share:ext" work on older supported Node versions.
Comment on lines
+11
to
+12
| const ZIP_NAME = 'pinback-ext-dev.zip'; | ||
| const ZIP_PATH = path.join(OUT_DIR, ZIP_NAME); |
There was a problem hiding this comment.
프로덕션 빌드도 pinback-ext-dev.zip로 덮어써집니다.
이 스크립트는 apps/extension/package.json Line 13의 zip과 Line 14의 share:dev에서 공용으로 호출되는데, 파일명이 하드코딩돼 있어서 프로덕션 아카이브도 dev 이름으로 생성되고 같은 out/pinback-ext-dev.zip를 재사용합니다. 모드별 파일명은 인자나 환경변수로 분리하는 편이 안전합니다.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@apps/extension/scripts/zip.mjs` around lines 11 - 12, 현재 ZIP_NAME과 ZIP_PATH가
하드코딩되어 있어 프로덕션 빌드도 dev 아카이브(pinback-ext-dev.zip)로 덮어쓰입니다; 수정 방법은 ZIP_NAME을 고정
문자열 대신 빌드 모드(예: argv 또는 process.env.BUILD_MODE / process.env.NODE_ENV)로 결정하도록
변경하고 ZIP_PATH는 그 값에 따라 생성하도록 바꾸세요; 또한 apps/extension의 package.json에서 호출하는 'zip'
및 'share:dev' 스크립트가 필요 시 모드 인자나 환경변수를 전달하도록 업데이트해 서로 다른 모드별
파일명(pinback-ext-dev.zip vs pinback-ext.zip 등)을 사용하게 하십시오.
jjangminii
approved these changes
Mar 19, 2026
Collaborator
jjangminii
left a comment
jjangminii
left a comment
There was a problem hiding this comment.
확실히 웹훅으로 관리하는 방식이 효율적일거 같아요-! 고생하셨습니다.
Client 레벨페이지에서만 쓰이는 툴팁이미지를 사이즈가 작아 아이콘으로 인식했었어요.. 자세한 용량 크기는 몰랐는데 확실히 문제가 많았네요.
덕분에 디스코드로 dist파일 보내기에 문제없어져서 다향이에요-!
이부분은 유의하겠습니다🥹
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In @.github/workflows/share-extension.yml:
- Around line 27-30: The workflow injects VITE_DISCORD_WEBHOOK_URL but the
extension packer (apps/extension/scripts/zip.mjs) expects DISCORD_WEBHOOK_URL
and throws if missing; fix by aligning names — either change the workflow to
export DISCORD_WEBHOOK_URL instead of VITE_DISCORD_WEBHOOK_URL, or update
zip.mjs to read VITE_DISCORD_WEBHOOK_URL (or fallback to DISCORD_WEBHOOK_URL)
before the early-throw check so the Discord webhook value is present when
zip.mjs validates and sends the notification.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: ab973c35-853b-4bff-b91e-55ff08fc0b43
📒 Files selected for processing (1)
.github/workflows/share-extension.yml
Comment on lines
+27
to
+30
| - name: Build and Share Extension | ||
| env: | ||
| VITE_DISCORD_WEBHOOK_URL: ${{ secrets.DISCORD_WEBHOOK_URL }} | ||
| run: pnpm share:ext |
There was a problem hiding this comment.
웹훅 환경 변수명이 스크립트와 달라 업로드가 실패합니다.
Line 29에서 VITE_DISCORD_WEBHOOK_URL를 주입하지만, apps/extension/scripts/zip.mjs는 Line 8에서 DISCORD_WEBHOOK_URL를 읽고 Line 43-44에서 없으면 즉시 예외를 던집니다. 현재 설정이면 Discord 전송 단계가 실패합니다.
수정 제안 (diff)
- name: Build and Share Extension
env:
- VITE_DISCORD_WEBHOOK_URL: ${{ secrets.DISCORD_WEBHOOK_URL }}
+ DISCORD_WEBHOOK_URL: ${{ secrets.DISCORD_WEBHOOK_URL }}
run: pnpm share:ext📝 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.
Suggested change
| - name: Build and Share Extension | |
| env: | |
| VITE_DISCORD_WEBHOOK_URL: ${{ secrets.DISCORD_WEBHOOK_URL }} | |
| run: pnpm share:ext | |
| - name: Build and Share Extension | |
| env: | |
| DISCORD_WEBHOOK_URL: ${{ secrets.DISCORD_WEBHOOK_URL }} | |
| run: pnpm share:ext |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In @.github/workflows/share-extension.yml around lines 27 - 30, The workflow
injects VITE_DISCORD_WEBHOOK_URL but the extension packer
(apps/extension/scripts/zip.mjs) expects DISCORD_WEBHOOK_URL and throws if
missing; fix by aligning names — either change the workflow to export
DISCORD_WEBHOOK_URL instead of VITE_DISCORD_WEBHOOK_URL, or update zip.mjs to
read VITE_DISCORD_WEBHOOK_URL (or fallback to DISCORD_WEBHOOK_URL) before the
early-throw check so the Discord webhook value is present when zip.mjs validates
and sends the notification.
constantly-dev
changed the title
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
📌 Related Issues
📄 Tasks
각 apps public/assets)
⭐ PR Point (To Reviewer)
1. Discord Webhook 빌드 자동화
이제 root에서
pnpm share:ext명령어 하나로 빌드 -> 압축 -> 디스코드 전송이 한 번에 이루어집니다.이제 팀원들이 수동으로 빌드 파일을 주고받을 필요 없이 채널에서 바로 확인 가능합니다.
2. SVG Sprite 빌드 용량 최적화
문제 원인:
현재 우리 프로젝트는 모든 아이콘을 하나의 HTML에 박아넣는 SVG Sprite 방식을 사용합니다.
하지만 source 폴더에 단순 아이콘이 아닌 고해상도 이미지(Base64가 포함된 SVG)가 섞여 들어가면서, Icon 컴포넌트 사용 여부와 상관없이 모든 이미지가 popup.html에 주입되어 용량이 20MB까지 넘어가는 현상이 발생했습니다.
해결 방안:
에셋 분리: 4KB 이상의 무거운 이미지성 SVG들을 source 폴더에서 제거하고 각 앱의 public/assets 폴더로 이동시켰습니다.
렌더링 방식 변경: 용량이 큰 일러스트나 3D 이미지는 Icon 컴포넌트(Sprite 참조) 대신 정석적인 img 태그를 사용하도록 변경했습니다.
결과: popup.html 용량이 20MB -> 300KB 수준으로 최적화되었으며 디스코드 전송 제한(25MB) 문제를 근본적으로 해결했습니다.
이는 어쩔 수 없는 trade-off 같아요. sprite방식이 한번에 source를 불러와서 하나의 Icon 컴포넌트로 컨트롤하니까 매번 불러올 때는 빠르게 로딩이 가능하지만, 사용하지 않는 source도 전부 불러와야 하기 때문에 크기가 커지고 초기 로딩이 느려져요.
그래서 이를 확장 프로그램에서 사용하지 않는 tooltip svg 등도 다 포함이 되어 용량이 많이 커져 discord 웹훅도 작동을 안하는 것이었어요.
또한 애초에 design-system이라는 패키지 자체도 extension/client 등 팀에서 여러 환경에 공통으로 사용하는 에셋(체크 아이콘 등)만 두는 것이 의미상으로도 맞기 때문에 이렇게 리팩 작업을 하게 되었어요.
혹시나 제가 틀릴 수 있으니 다른 방법이나 좋은 접근이 있다면 편하게 말씀해주세요!!!
Summary by CodeRabbit
릴리스 노트
Refactor
Chores