Feat/#321/extension dist discord webhook (#322)

* setting: add packages adm-zip, form-data

* refactor: svg sprite 방식으로 모든 source 포함 단점 해결을 위해 용량이 크고 icon이 아닌 이미지는 각 apps public으로 이동

* feat: dist zip 압축 및 discord 전송 webhook 구현

* feat: extension package.json share:dev 스크립트 추가

* setting: extension vite.config sourcemap: false 옵션 설정

* feat: share-extension workflow 추가

* feat: share-extension workflow default branch develop 설정

* refactor: button tag type 추가

* refactor: uploadToDiscord에 await 추가하여 무조건 에러 메시지 뜨고 process 종료하도록 변경

* refactor: hidden img alt 빈 문자열로 변경

Author: constantly-dev

.github/workflows/share-extension.yml

@@ -0,0 +1,37 @@
+name: 📦 Share Pinback Extension
+
+on:
+  workflow_dispatch:
+    inputs:
+      branch:
+        description: '빌드할 브랜치를 확인하세요 (기본: develop)'
+        required: true
+        default: 'develop'
+
+jobs:
+  build-and-send:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.inputs.branch }}
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v3
+        with:
+          version: 9
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build and Share Extension
+        env:
+          VITE_DISCORD_WEBHOOK_URL: ${{ secrets.DISCORD_WEBHOOK_URL }}
+        run: pnpm share:ext

…stem/src/icons/source/chippi_profile.svg …/client/public/assets/chippi_profile.svgpackages/design-system/src/icons/source/chippi_profile.svg renamed to apps/client/public/assets/chippi_profile.svg packages/design-system/src/icons/source/chippi_profile.svg renamed to apps/client/public/assets/chippi_profile.svg

@@ -1,15 +1,14 @@
-import { cn } from '@pinback/design-system/utils';
-import { Level } from '@pinback/design-system/ui';
-import { Icon, type IconName } from '@pinback/design-system/icons';
 import { TREE_LEVEL_TABLE, TreeLevel } from '@pages/level/types/treeLevelType';
+import { Level } from '@pinback/design-system/ui';
+import { cn } from '@pinback/design-system/utils';
 
-const LEVEL_TOOLTIP_ICON = {
-  1: 'tooltip_1',
-  2: 'tooltip_2',
-  3: 'tooltip_3',
-  4: 'tooltip_4',
-  5: 'tooltip_5',
-} as const satisfies Record<TreeLevel, IconName>;
+const LEVEL_TOOLTIP_IMAGE = {
+  1: '/assets/tooltip_1.svg',
+  2: '/assets/tooltip_2.svg',
+  3: '/assets/tooltip_3.svg',
+  4: '/assets/tooltip_4.svg',
+  5: '/assets/tooltip_5.svg',
+} as const satisfies Record<TreeLevel, string>;
 
 export default function LevelInfoCard() {
   const rows = [...TREE_LEVEL_TABLE].reverse();
@@ -33,12 +32,12 @@ export default function LevelInfoCard() {
           >
             <div className="flex w-full items-center gap-[1.2rem]">
               <div className="bg-gray0 flex h-[4.6rem] w-[4.6rem] items-center justify-center rounded-[0.8rem]">
-                <Icon
-                  name={LEVEL_TOOLTIP_ICON[row.level]}
+                <img
+                  src={LEVEL_TOOLTIP_IMAGE[row.level]}
+                  alt={`${row.level} 썸네일 아이콘`}
                   width={46}
                   height={46}
-                  className="rounded-[0.8rem]"
-                  aria-label={`${row.level} 썸네일 아이콘`}
+                  className="object-cover"
                 />
               </div>
 

…design-system/src/icons/source/palms.svg apps/client/public/assets/palms.svgpackages/design-system/src/icons/source/palms.svg renamed to apps/client/public/assets/palms.svg packages/design-system/src/icons/source/palms.svg renamed to apps/client/public/assets/palms.svg

@@ -52,7 +52,13 @@ const Footer = () => {
             aria-label="Pinback 블로그"
             className="transition-opacity hover:opacity-80"
           >
-            <Icon name="palms" width={28} height={28} />
+            <img
+              src="/assets/palms.svg"
+              alt="Palms 로고"
+              width={28}
+              height={28}
+              className="object-contain"
+            />
           </a>
         </div>
       </div>