Pinback-Team · jllee000 · Aug 19, 2025 · Aug 18, 2025 · Aug 18, 2025 · Aug 18, 2025
diff --git a/apps/extension/.gitignore b/apps/extension/.gitignore
@@ -0,0 +1,24 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+/dist
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/apps/extension/manifest.json b/apps/extension/manifest.json
@@ -0,0 +1,20 @@
+{
+  "manifest_version": 3,
+  "name": "PinBack Extension",
+  "version": "0.1.0",
+  "action": { "default_popup": "popup.html" },
+  "icons": {
+    "128": "icon128.png"
+  },
+  "background": {
+    "service_worker": "src/background.ts",
+    "type": "module"
+  },
+  "content_scripts": [
+    {
+      "matches": ["<all_urls>"],
+      "js": ["src/content.ts"]
+    }
+  ],
+  "host_permissions": ["<all_urls>"]
+}
diff --git a/apps/extension/package-lock.json b/apps/extension/package-lock.json
diff --git a/apps/extension/package.json b/apps/extension/package.json
@@ -0,0 +1,41 @@
+{
+  "name": "@pinback/extension",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "format": "prettier -w .",
+    "zip": "vite build && node scripts/zip.mjs"
+  },
+  "dependencies": {
+    "@pivanov/vite-plugin-svg-sprite": "^3.1.3",
+    "@tanstack/react-query": "^5.85.3",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@crxjs/vite-plugin": "^2.2.0",
+    "@tailwindcss/vite": "^4.1.12",
+    "@types/chrome": "^0.0.273",
+    "@types/react": "^18.3.5",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "@vitejs/plugin-react-swc": "^4.0.0",
+    "autoprefixer": "^10.4.21",
+    "eslint": "^9.9.0",
+    "eslint-plugin-jsx-a11y": "^6.9.0",
+    "eslint-plugin-react": "^7.35.0",
+    "postcss": "^8.5.6",
+    "prettier": "^3.3.3",
+    "prettier-plugin-tailwindcss": "^0.6.8",
+    "tailwindcss": "^4.1.12",
+    "typescript": "^5.5.4",
+    "typescript-eslint": "^8.0.1",
+    "vite": "^7.1.2",
+    "vite-plugin-chrome-extension": "0.0.7",
+    "vite-tsconfig-paths": "^5.1.4"
+  }
+}
diff --git a/apps/extension/popup.html b/apps/extension/popup.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <!-- src 경로는 프로젝트 루트 기준으로 모듈 import -->
+    <script type="module" src="/src/popup.tsx"></script>
+  </body>
+</html>
diff --git a/apps/extension/public/icon128.png b/apps/extension/public/icon128.png
diff --git a/apps/extension/src/App.tsx b/apps/extension/src/App.tsx
@@ -0,0 +1,13 @@
+import * as React from "react";
+import './index.css' 
+const App = () => {
+  return (
+    <div className="App">
+      <div className="h-[50rem] w-[26rem] bg-blue-500 text-white flex items-center justify-center text-2xl">
+       자 핀백 앱잼 시작~오늘은 7월 7일임~
+      </div>
+    </div>
+  );
+};
+
+export default App;
diff --git a/apps/extension/.gitkeep → apps/extension/src/assets/.gitkeep b/apps/extension/.gitkeep → apps/extension/src/assets/.gitkeep
diff --git a/apps/extension/src/background.ts b/apps/extension/src/background.ts
@@ -0,0 +1 @@
+console.log("백그라운드 기능")
diff --git a/apps/extension/src/content.ts b/apps/extension/src/content.ts
@@ -0,0 +1 @@
+console.log("컨텐츠 스크립트")
diff --git a/apps/extension/src/custom.d.ts b/apps/extension/src/custom.d.ts
@@ -0,0 +1,19 @@
+declare module '*.svg' {
+  const content: string;
+  export default content;
+}
+
+declare module '*.png' {
+  const content: string;
+  export default content;
+}
+
+declare module '*.jpg' {
+  const content: string;
+  export default content;
+}
+
+declare module '*.webp' {
+  const content: string;
+  export default content;
+}
diff --git a/apps/extension/src/index.css b/apps/extension/src/index.css
@@ -0,0 +1,3 @@
+@import "tailwindcss";
+/* 디자인 시스템 구축 이후에! 임포트 바꿀 예정입니당
+*/
diff --git a/apps/extension/src/pages/.gitkeep b/apps/extension/src/pages/.gitkeep
diff --git a/apps/extension/src/popup.tsx b/apps/extension/src/popup.tsx
@@ -0,0 +1,17 @@
+// src/popup.tsx
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+const queryClient = new QueryClient();
+const rootEl = document.getElementById('root');
+if (rootEl) {
+  createRoot(rootEl).render(
+    <QueryClientProvider client={queryClient}>
+      <App />
+    </QueryClientProvider>
+  );
+} else {
+  console.error('❌ root element not found!');
+}
diff --git a/apps/extension/src/routes/.gitkeep b/apps/extension/src/routes/.gitkeep
diff --git a/apps/extension/src/shared/.gitkeep b/apps/extension/src/shared/.gitkeep
diff --git a/apps/extension/tailwind.config.ts b/apps/extension/tailwind.config.ts
@@ -0,0 +1,9 @@
+import type { Config } from 'tailwindcss';
+
+export default {
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+} satisfies Config;
-  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;
-  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;
diff --git a/apps/extension/tsconfig.json b/apps/extension/tsconfig.json
@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "moduleResolution": "bundler",
+    "baseUrl": ".",
+    "outDir": "./dist/",
+    "sourceMap": true,
+    "strict": true,
+    "noImplicitReturns": true,
+    "noImplicitAny": true,
+    "module": "esnext",
+    "target": "ES2020",
+    "lib": ["ES2020", "DOM", "DOM.Iterable", "WebWorker"],
+    "jsx": "react-jsx",
+    "allowJs": false,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "plugins": [{ "name": "react" }],
+    "types": ["vite/client", "chrome"],
+    "resolveJsonModule": true,            
+    "paths": {
+      "@components/*": ["src/components/*"],
+      "@utils/*": ["src/utils/*"],
+      "@constants/*": ["src/constants/*"],
+      "@shared-types/*": ["src/types/*"],
+      "@api/*": ["src/api/*"]
+    }
+  },
+  "include": ["src/**/*", "manifest.json", "popup.html", "vite.config.ts"]
+}
diff --git a/apps/extension/vite.config.ts b/apps/extension/vite.config.ts
@@ -0,0 +1,35 @@
+// vite.config.ts
+import { defineConfig } from 'vite';
+import tailwindcss from '@tailwindcss/vite';
+import react from '@vitejs/plugin-react-swc';
+import tsconfigPaths from 'vite-tsconfig-paths';
+import { resolve } from 'path';
+import { crx } from '@crxjs/vite-plugin';
+import manifest from './manifest.json';
+export default defineConfig({
+  plugins: [
+    react(),
+    tsconfigPaths({
+      projects: [resolve(__dirname, '../../tsconfig.json')],
+    }),
+    tailwindcss(),
+    crx({ manifest }), 
+  ],
+
+  build: {
+    outDir: 'dist',
+    copyPublicDir: true,
+
+  },
+  publicDir: 'public',
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, './src'),
+      '@api': resolve(__dirname, './src/api'),
+      '@utils': resolve(__dirname, './src/utils'),
+      '@constants': resolve(__dirname, './src/constants'),
+      '@shared-types': resolve(__dirname, './src/types'),
+      '@components': resolve(__dirname, './src/components'),
+    },
+  },
+});
diff --git a/package.json b/package.json
@@ -14,10 +14,17 @@
     "prettier": "^3.6.2",
     "prettier-plugin-tailwindcss": "^0.6.14",
     "turbo": "^2.5.6",
-    "typescript": "5.9.2"
+    "typescript": "5.9.2",
+    "vite": "7.1.2"
+  },
+  "pnpm": {
+    "overrides": {
+      "vite": "7.1.2"
+    }
   },
   "packageManager": "pnpm@9.0.0",
   "engines": {
     "node": ">=18"
   }
 }
+