Feat(extension, client): extension dist discord webhook

.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

apps/client/src/pages/level/components/LevelInfoCard.tsx

@@ -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>
 

apps/client/src/pages/myBookmark/components/footer/Footer.tsx

@@ -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>

apps/client/src/pages/onBoarding/components/footer/Footer.tsx

@@ -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>

apps/client/src/pages/remind/components/footer/Footer.tsx

@@ -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>

apps/client/src/shared/components/sidebar/MyLevelItem.tsx

@@ -1,4 +1,3 @@
-import { Icon } from '@pinback/design-system/icons';
 import { Level, Progress } from '@pinback/design-system/ui';
 import { cn } from '@pinback/design-system/utils';
 import { getTreeLevel } from '@shared/utils/treeLevel';
@@ -34,11 +33,12 @@ export default function MyLevelItem({
         className="flex size-[4.6rem] items-center justify-center"
         aria-hidden
       >
-        <Icon
-          name="chippi_profile"
+        <img
+          src="/assets/chippi_profile.svg"
+          alt=""
           width={46}
           height={46}
-          className="rounded-[0.4rem]"
+          className="object-cover"
         />
       </div>
 

apps/extension/.gitignore

@@ -24,3 +24,6 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+# build output
+out/

apps/extension/package.json

@@ -10,7 +10,8 @@
     "build:prod": "tsc -b && vite build --mode production",
     "lint": "eslint .",
     "format": "prettier -w .",
-    "zip": "pnpm build:prod && node scripts/zip.mjs"
+    "zip": "pnpm build:prod && node scripts/zip.mjs",
+    "share:dev": "pnpm build:dev && node --env-file=.env.development scripts/zip.mjs"
   },
   "dependencies": {
     "@pinback/contracts": "workspace:*",
@@ -32,12 +33,14 @@
     "@types/react": "^18.3.5",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react-swc": "^4.0.0",
+    "adm-zip": "^0.5.16",
     "autoprefixer": "^10.4.21",
     "eslint": "^9.33.0",
     "eslint-plugin-jsx-a11y": "^6.9.0",
     "eslint-plugin-react": "^7.35.0",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.20",
+    "form-data": "^4.0.5",
     "prettier": "^3.3.3",
     "prettier-plugin-tailwindcss": "^0.6.8",
     "tailwindcss": "^4.1.12",

apps/extension/scripts/zip.mjs

@@ -0,0 +1,86 @@
+/* global process */
+import AdmZip from 'adm-zip';
+import axios from 'axios';
+import FormData from 'form-data';
+import fs from 'fs';
+import path from 'path';
+
+const WEBHOOK_URL = process.env.DISCORD_WEBHOOK_URL; // eslint-disable-line
+const DIST_DIR = path.resolve('dist');
+const OUT_DIR = path.resolve('out');
+const ZIP_NAME = 'pinback-ext-dev.zip';
+const ZIP_PATH = path.join(OUT_DIR, ZIP_NAME);
+
+const getTimestamp = () =>
+  new Date().toLocaleString('ko-KR', { timeZone: 'Asia/Seoul' });
+
+const createTemplate = (type, details) => {
+  const { time, fileName, error } = details;
+  const divider = '━━━━━━━━━━━━━━━━━━━━';
+
+  if (type === 'success') {
+    return `📦 **Pinback 확장 프로그램 빌드 완료**\n${divider}\n **빌드 시간:** ${time}\n **파일명:** \`${fileName}\`\n\n 최신 빌드 파일이 도착했습니다. 압축을 풀고 사용하세요!`;
+  }
+  return `🚨 **Pinback 빌드 공유 실패**\n${divider}\n❌ **에러 내용:** ${error}\n🕒 **발생 시간:** ${time}\n⚠️ 터미널 로그를 확인해 주세요.`;
+};
+
+const archiveDist = () => {
+  if (!fs.existsSync(DIST_DIR)) {
+    throw new Error('dist 폴더가 존재하지 않습니다. 빌드를 먼저 실행해주세요.');
+  }
+
+  if (!fs.existsSync(OUT_DIR)) fs.mkdirSync(OUT_DIR, { recursive: true });
+  if (fs.existsSync(ZIP_PATH)) fs.unlinkSync(ZIP_PATH);
+
+  const zip = new AdmZip();
+  zip.addLocalFolder(DIST_DIR);
+  zip.writeZip(ZIP_PATH);
+
+  console.log(`✅ 압축 완료: ${ZIP_PATH}`);
+};
+
+const uploadToDiscord = async (content, fileStream = null) => {
+  if (!WEBHOOK_URL)
+    throw new Error('DISCORD_WEBHOOK_URL이 설정되지 않았습니다.');
+
+  const form = new FormData();
+  form.append('content', content);
+  if (fileStream) form.append('file', fileStream);
+
+  await axios.post(WEBHOOK_URL, form, { headers: form.getHeaders() });
+};
+
+async function run() {
+  try {
+    console.log('📦 dist 폴더를 압축하는 중...');
+    archiveDist();
+
+    console.log('📤 디스코드로 전송 중...');
+    const message = createTemplate('success', {
+      time: getTimestamp(),
+      fileName: ZIP_NAME,
+    });
+    await uploadToDiscord(message, fs.createReadStream(ZIP_PATH));
+
+    console.log('✅ 모든 작업 성공!');
+  } catch (err) {
+    const isPayloadTooLarge = err.response?.status === 413;
+    const errorMsg = isPayloadTooLarge
+      ? '파일 용량이 너무 큽니다 (25MB 제한).'
+      : err.message;
+
+    const failMessage = createTemplate('fail', {
+      time: getTimestamp(),
+      error: errorMsg,
+    });
+
+    await uploadToDiscord(failMessage).catch((e) =>
+      console.error('❌ 에러 알림 전송 실패:', e.message)
+    );
+
+    console.error('❌ 작업 실패:', errorMsg);
+    process.exitCode = 1;
+  }
+}
+
+run();

apps/extension/src/pages/DuplicatePop.tsx

@@ -1,31 +1,38 @@
-import { Icon } from "@pinback/design-system/icons";
-import extesionPop from '@assets/extension_pop.svg'
+import extesionPop from '@assets/extension_pop.svg';
 interface DuplicatePopProps {
   onLeftClick: () => void;
   onRightClick: () => void;
 }
 
-const DuplicatePop = ({onLeftClick,onRightClick} : DuplicatePopProps) => {
+const DuplicatePop = ({ onLeftClick, onRightClick }: DuplicatePopProps) => {
   return (
-        <div className="bg-white-bg flex w-[26rem] cursor-pointer flex-col items-center justify-center rounded-[1.2rem] px-[1.6rem] py-[2.4rem] common-shadow">
-            <img src={extesionPop} className="w-[7.2rem] h-[7.2rem] m-auto text-center"/>
-            <div className="sub2-sb text-font-black-1 pb-[0.8rem]">치삐가 이미 챙겨뒀어요! <Icon name="dotori" /> </div>  
-            <div className="flex flex-row items-center justify-center gap-[1.2rem] pt-[0.8rem]">
-                <button
-                    className="border-gray200 sub5-sb bg-white-bg text-font-black-1 w-[10.8rem] rounded-[0.4rem] border py-[0.85rem]"
-                    onClick={onLeftClick}
-                    >
-                수정하기
-                </button>
-                <button
-                    className="sub5-sb bg-gray900 text-white-bg w-[10.8rem] rounded-[0.4rem] py-[0.85rem]"
-                    onClick={onRightClick}
-                    >
-                대시보드
-                </button>
-            </div>
-        </div>
-  )
+    <div className="bg-white-bg common-shadow flex w-[26rem] cursor-pointer flex-col items-center justify-center rounded-[1.2rem] px-[1.6rem] py-[2.4rem]">
+      <img
+        alt=""
+        src={extesionPop}
+        className="m-auto h-[7.2rem] w-[7.2rem] text-center"
+      />
+      <div className="sub2-sb text-font-black-1 pb-[0.8rem]">
+        치삐가 이미 챙겨뒀어요! 🌰
+      </div>
+      <div className="flex flex-row items-center justify-center gap-[1.2rem] pt-[0.8rem]">
+        <button
+          className="border-gray200 sub5-sb bg-white-bg text-font-black-1 w-[10.8rem] rounded-[0.4rem] border py-[0.85rem]"
+          onClick={onLeftClick}
+          type="button"
+        >
+          수정하기
+        </button>
+        <button
+          className="sub5-sb bg-gray900 text-white-bg w-[10.8rem] rounded-[0.4rem] py-[0.85rem]"
+          onClick={onRightClick}
+          type="button"
+        >
+          대시보드
+        </button>
+      </div>
+    </div>
+  );
 };
 
-export default DuplicatePop;
+export default DuplicatePop;

apps/extension/vite.config.ts

@@ -39,6 +39,7 @@ export default defineConfig(({ mode }) => {
     build: {
       outDir: 'dist',
       copyPublicDir: true,
+      sourcemap: false,
     },
     publicDir: 'public',
 

apps/landing/src/components/Footer.tsx

@@ -63,7 +63,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>

package.json

@@ -12,7 +12,8 @@
     "lint": "turbo run lint",
     "format": "prettier --write \"**/*.{ts,tsx,md}\"",
     "check-types": "turbo run check-types",
-    "test": "turbo run test"
+    "test": "turbo run test",
+    "share:ext": "pnpm --filter @pinback/extension share:dev"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.1.1",

packages/design-system/src/icons/iconNames.ts

@@ -1,12 +1,8 @@
 // 이 파일은 자동 생성 파일입니다. (직접 수정 금지)
 export const iconNames = [
   'check_circle',
-  'chippi_profile',
-  'dotori',
   'ext_home1',
   'ext_home2',
-  'extension_pop',
-  'extension_thumb',
   'google',
   'ic_arrow_down_active',
   'ic_arrow_down_disable',
@@ -26,16 +22,8 @@ export const iconNames = [
   'ic_plus',
   'instagram',
   'logo',
-  'logout_chippi.2512',
   'main_header_logo',
   'main_logo',
   'notsave_circle',
-  'palms',
-  'saved',
-  'tooltip_1',
-  'tooltip_2',
-  'tooltip_3',
-  'tooltip_4',
-  'tooltip_5',
 ] as const;
 export type IconName = (typeof iconNames)[number];