Skip to content
Merged
Show file tree
Hide file tree
Changes from 11 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 52 additions & 0 deletions .github/workflows/ci.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
name: ci

on:
push:
branches:
- main
- develop
pull_request:
branches:
- main
- develop

jobs:
lint:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4

- name: Extract Node.js version from package.json
id: get_node_version
run: echo "version=$(jq -r '.engines.node' package.json)" >> $GITHUB_OUTPUT
Comment on lines +15 to +21
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

just 질문 사항인디! 이거 Node.js 키워드가 있는데, 혹시 이거는 어떤 것 때문에 쓰는 걸까요!

Copy link
Member Author

@constantly-dev constantly-dev Aug 20, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

패키지 매니저: npm, yarn, pnpm
린터(Linter): ESLint
번들러/빌드 도구: Vite, Webpack, TypeScript 컴파일러(tsc)

해당 도구들이 모두 Node.js 환경에서 실행되는 프로그램이기 때문입니다!

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

아핫..!!?


- uses: actions/setup-node@v4
with:
node-version: ${{ steps.get_node_version.outputs.version }}

Comment on lines +19 to +26
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

⚠️ Potential issue

엔진 필드(engines.node)가 범위(>=, ^, ~ 등)일 때 setup-node가 실패할 수 있습니다

package.json의 engines.node가 범위 표현이면 actions/setup-node가 버전을 해석하지 못해 잡이 바로 실패합니다. .nvmrc가 있으면 우선 사용하고, 없거나 범위면 lts/*로 폴백하도록 보강하는 편이 안전합니다.

다음과 같이 step 스크립트를 보강해 주세요.

-      - name: Extract Node.js version from package.json
-        id: get_node_version
-        run: echo "version=$(jq -r '.engines.node' package.json)" >> $GITHUB_OUTPUT
+      - name: Extract Node.js version (prefer .nvmrc, fallback to engines.node or lts/*)
+        id: get_node_version
+        run: |
+          version=""
+          if [ -f .nvmrc ]; then
+            version="$(cat .nvmrc)"
+          else
+            version="$(jq -r '.engines.node // empty' package.json)"
+          fi
+          if [ -z "$version" ] || [[ "$version" =~ [><=\^~] ]]; then
+            version="lts/*"
+          fi
+          echo "version=$version" >> "$GITHUB_OUTPUT"

추가로 setup-node가 같은 값을 사용합니다(아래 캐시 제안과 함께 반영 권장).

📝 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: Extract Node.js version from package.json
id: get_node_version
run: echo "version=$(jq -r '.engines.node' package.json)" >> $GITHUB_OUTPUT
- uses: actions/setup-node@v4
with:
node-version: ${{ steps.get_node_version.outputs.version }}
- name: Extract Node.js version (prefer .nvmrc, fallback to engines.node or lts/*)
id: get_node_version
run: |
version=""
if [ -f .nvmrc ]; then
version="$(cat .nvmrc)"
else
version="$(jq -r '.engines.node // empty' package.json)"
fi
if [ -z "$version" ] || [[ "$version" =~ [><=\^~] ]]; then
version="lts/*"
fi
echo "version=$version" >> "$GITHUB_OUTPUT"
🤖 Prompt for AI Agents
.github/workflows/ci.yml lines 19-26: the workflow extracts engines.node
directly which can be a semver range and break actions/setup-node; modify the
step to first prefer .nvmrc if present, otherwise read package.json.engines.node
and if that value contains range characters (^ ~ > = * x or a range) fall back
to "lts/*", then echo that chosen resolved version into GITHUB_OUTPUT (version)
and ensure the subsequent actions/setup-node step uses that same output value;
implement the range-detection and fallback logic in the run script so setup-node
receives a concrete usable version.

- name: Setup Pnpm
uses: pnpm/action-setup@v4

- run: pnpm install --frozen-lockfile

- name: Run ESLint
run: pnpm run lint

build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4

- name: Extract Node.js version from package.json
id: get_node_version
run: echo "version=$(jq -r '.engines.node' package.json)" >> $GITHUB_OUTPUT

- uses: actions/setup-node@v4
with:
node-version: ${{ steps.get_node_version.outputs.version }}

Comment on lines +40 to +47
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

⚠️ Potential issue

build 잡도 Node 버전 추출 로직 동일 이슈

lint 잡과 동일하게 build 잡에서도 engines.node가 범위면 실패할 수 있습니다. 동일한 폴백 로직을 적용해 주세요.

-      - name: Extract Node.js version from package.json
-        id: get_node_version
-        run: echo "version=$(jq -r '.engines.node' package.json)" >> $GITHUB_OUTPUT
+      - name: Extract Node.js version (prefer .nvmrc, fallback to engines.node or lts/*)
+        id: get_node_version
+        run: |
+          version=""
+          if [ -f .nvmrc ]; then
+            version="$(cat .nvmrc)"
+          else
+            version="$(jq -r '.engines.node // empty' package.json)"
+          fi
+          if [ -z "$version" ] || [[ "$version" =~ [><=\^~] ]]; then
+            version="lts/*"
+          fi
+          echo "version=$version" >> "$GITHUB_OUTPUT"

그리고 setup-node에도 캐시 옵션을 함께 추가하는 것을 권장합니다(아래 diff).

📝 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: Extract Node.js version from package.json
id: get_node_version
run: echo "version=$(jq -r '.engines.node' package.json)" >> $GITHUB_OUTPUT
- uses: actions/setup-node@v4
with:
node-version: ${{ steps.get_node_version.outputs.version }}
- name: Extract Node.js version (prefer .nvmrc, fallback to engines.node or lts/*)
id: get_node_version
run: |
version=""
if [ -f .nvmrc ]; then
version="$(cat .nvmrc)"
else
version="$(jq -r '.engines.node // empty' package.json)"
fi
if [ -z "$version" ] || [[ "$version" =~ [><=\^~] ]]; then
version="lts/*"
fi
echo "version=$version" >> "$GITHUB_OUTPUT"
- uses: actions/setup-node@v4
with:
node-version: ${{ steps.get_node_version.outputs.version }}
🤖 Prompt for AI Agents
.github/workflows/ci.yml lines 40-47: the build job extracts engines.node
directly which can be a semver range and fail like the lint job; update the
extraction step to use the same fallback logic as lint (parse engines.node to a
concrete major/minor/patch when possible and if it’s a range or missing, fall
back to a defined default such as 'lts/*' or a repo-default version), and then
pass that resolved value to actions/setup-node; also add the setup-node cache
option (e.g., cache: 'npm' or 'yarn' depending on the project) to enable
dependency caching.

- name: Setup Pnpm
uses: pnpm/action-setup@v4

- run: pnpm install --frozen-lockfile
- run: pnpm run build
1 change: 1 addition & 0 deletions apps/client/src/App.css
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
@import '@pinback/tailwind-config/shared-styles.css';
@import '@pinback/design-system/styles';
5 changes: 5 additions & 0 deletions apps/extension/eslint.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import config from '@pinback/eslint-config/react-internal';
import reactRefresh from 'eslint-plugin-react-refresh';

/** @type {import("eslint").Linter.Config} */
export default [...config, reactRefresh.configs.vite];
14 changes: 10 additions & 4 deletions apps/extension/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,15 @@
"dependencies": {
"@pivanov/vite-plugin-svg-sprite": "^3.1.3",
"@tanstack/react-query": "^5.85.3",
"react": "^18.3.1",
"react-dom": "^18.3.1"
"react": "^19.1.1",
"react-dom": "^19.1.1"
},
"devDependencies": {
"@eslint/js": "^9.33.0",
"@pinback/eslint-config": "workspace:*",
"@pinback/typescript-config": "workspace:*",
"@pinback/tailwind-config": "workspace:*",
"@pinback/design-system": "workspace:*",
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이 부분은 다른 apps내의 파일들과 같은 세팅같은데 지금 추가된게 맞을까요?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

맞아요! extension에서도 공통 config 의존이 필요해서 workspace:* 추가해줬어요.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

확실히 터보 쓰니까 workspace:* 이 키워드 덕분에 의존성 관리 그냥 바로 깔끔해지네용! 굿

"@crxjs/vite-plugin": "^2.2.0",
"@tailwindcss/vite": "^4.1.12",
"@types/chrome": "^0.0.273",
Expand All @@ -25,10 +30,11 @@
"@vitejs/plugin-react": "^4.3.1",
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

저희 이거 없어도되지않나요?? 더이상 babel 사용하지 않는걸로 알고있어서 밑의 플러그인과 중복되는거 같아요

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

그렇네요! 지우겠습니다 감사합니다 👍

"@vitejs/plugin-react-swc": "^4.0.0",
"autoprefixer": "^10.4.21",
"eslint": "^9.9.0",
"eslint": "^9.33.0",
"eslint-plugin-react-hooks": "^5.2.0",
"eslint-plugin-react-refresh": "^0.4.20",
"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",
Expand Down
2 changes: 2 additions & 0 deletions apps/extension/src/App.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
@import '@pinback/tailwind-config/shared-styles.css';
@import '@pinback/design-system/styles';
8 changes: 4 additions & 4 deletions apps/extension/src/App.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import * as React from "react";
import './index.css'
import './App.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 className="flex h-[50rem] w-[26rem] items-center justify-center bg-blue-500 text-2xl text-white">
자 핀백 앱잼 시작~오늘은 7월 7일임~
</div>
</div>
);
Expand Down
3 changes: 0 additions & 3 deletions apps/extension/src/index.css

This file was deleted.

1 change: 1 addition & 0 deletions apps/landing/src/App.css
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
@import '@pinback/tailwind-config/shared-styles.css';
@import '@pinback/design-system/styles';
2 changes: 1 addition & 1 deletion packages/design-system/eslint.config.mjs
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { config } from "@pinback/eslint-config/react-internal";
import config from '@pinback/eslint-config/react-internal';

/** @type {import("eslint").Linter.Config} */
export default config;
8 changes: 7 additions & 1 deletion packages/design-system/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
{
"name": "@pinback/design-system",
"version": "0.0.0",
"type": "module",
"private": true,
"exports": {
"./ui": "./src/components/index.ts",
Expand All @@ -18,12 +19,17 @@
"@pinback/eslint-config": "workspace:*",
"@pinback/tailwind-config": "workspace:*",
"@pinback/typescript-config": "workspace:*",
"@tailwindcss/vite": "^4.1.11",
"@vitejs/plugin-react": "^4.5.2",
"@turbo/gen": "^2.5.0",
"@types/node": "^22.15.3",
"@types/react": "19.1.0",
"@types/react-dom": "19.1.1",
"eslint": "^9.33.0",
"tailwindcss": "^4.1.12",
"typescript": "5.9.2"
"typescript": "5.9.2",
"typescript-eslint": "^8.39.1",
"vite": "^7.1.2"
Comment on lines +30 to +32
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이것도 질문인데

  1. 제일 루트 쪽 package.json에 vite등등 버전 세팅이 있는데 이게 자동 연동되는 게 아니라, 디자인 시스템 package.json에서도 직접 세팅 또 해줘야하는건가요?

  2. 그리고 이 코드가 이제 추가가 되게된 이슈가 있었나용? 뭐 빌드에러가 있었던가의 이슈?

Copy link
Member Author

@constantly-dev constantly-dev Aug 20, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  1. 맞아요! 사실 의존성은 필요한 곳에서 다 추가를 해줘야 해요. 패키지에서 필요한 의존을 다 따로 추가해줬어요. 저도 이 부분이 비효율적이라고 생각합니다! 그래서 이럴 경우에 peerDependencies를 사용하면 될 것 같아요.
    peerDependencies에 대해서 간단하게 설명하면 특정 패키지가 다른 패키지를 필요로 하지만, 그 패키지를 직접 포함하지 않고, 상위 프로젝트(패키지를 설치하는 프로젝트)에서 해당 의존성을 설치하도록 요구하는 방식이에요.

자세한 내용은 아티클 첨부할게요!
https://jaddong.tistory.com/entry/%EB%94%94%EC%9E%90%EC%9D%B8-%EC%8B%9C%EC%8A%A4%ED%85%9C%EC%9D%84-%EA%B0%9C%EB%B0%9C%ED%95%98%EB%A9%B4%EC%84%9C-%EC%95%8C%EA%B2%8C-%EB%90%9C-peerDependencies%EC%9D%98-%EC%97%AD%ED%95%A0

그래서 해당 문제를 해결하려면 peerDependencies를 사용하면 될 것 같은데, 아직 조금 더 공부해보고 의존성 그래프 확인해보고 정리하고 싶어서 이후에 따로 이슈 파서 작업해볼게요! 같이 고민해봐요.

  1. 각각 필요한 의존이라 문제가 있을 것이라 생각했는데 직접 확인은 못해봤네요..!

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

아티클 읽어보겠습니다! 레퍼런스 감사합니다

},
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Verification agent

🧩 Analysis chain

Vite/Tailwind/ESLint 도구 체인 추가는 방향성 좋습니다

@tailwindcss/vite, @vitejs/plugin-react, typescript-eslint, vite 추가로 빌드/린트 파이프라인 구성에 필요한 준비가 잘 되어 있습니다. 워크스페이스 전체에서 vite/플러그인 버전이 일관적인지만 한 번 확인 부탁드립니다.

다음 스크립트로 워크스페이스 내 Vite/플러그인 버전 불일치 여부를 빠르게 훑어볼 수 있습니다:


🏁 Script executed:

#!/bin/bash
echo "== Vite versions =="
fd -a package.json | xargs -I{} jq -r '[input_filename, (.devDependencies.vite // .dependencies.vite // empty)] | @tsv' {} | awk 'NF>1'
echo
echo "== @vitejs/plugin-react versions =="
fd -a package.json | xargs -I{} jq -r '[input_filename, (.devDependencies["@vitejs/plugin-react"] // empty)] | @tsv' {} | awk 'NF>1'
echo
echo "== @tailwindcss/vite versions =="
fd -a package.json | xargs -I{} jq -r '[input_filename, (.devDependencies["@tailwindcss/vite"] // .dependencies["@tailwindcss/vite"] // empty)] | @tsv' {} | awk 'NF>1'

Length of output: 1271


워크스페이스 플러그인 버전 일관성 확인 결과

– vite
• packages/design-system/package.json: ^7.1.2
• apps/client, apps/extension, apps/landing: ^7.1.2
• 루트 package.json: 7.1.2 (필요 시 ^7.1.2로 통일 고려)

– @vitejs/plugin-react
• packages/design-system/package.json: ^4.5.2
• apps/extension/package.json: ^4.3.1
→ 동일한 버전으로 맞춰주세요.

– @tailwindcss/vite
• packages/design-system/package.json: ^4.1.11
• apps/client, apps/extension, apps/landing: ^4.1.12
→ design-system 쪽을 ^4.1.12로 올려주세요.

위치
• packages/design-system/package.json (plugin-react, tailwindcss)
• apps/extension/package.json (@vitejs/plugin-react)

전체 워크스페이스의 버전 스펙(캐럿 사용 여부 포함)도 한 번 더 검토하시면 좋겠습니다.

🤖 Prompt for AI Agents
packages/design-system/package.json lines 22-33: update plugin versions to match
the workspace — change "@tailwindcss/vite" to "^4.1.12" and
"@vitejs/plugin-react" to "^4.3.1" (to match apps/extension), then re-run
install; also review and normalize caret usage for "vite" and other plugins
across root and apps (e.g., use "^7.1.2" consistently) so workspace versions are
consistent.

"dependencies": {
"@radix-ui/react-slot": "^1.2.3",
Expand Down
30 changes: 30 additions & 0 deletions packages/design-system/vite.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import tailwindcss from '@tailwindcss/vite';
import react from '@vitejs/plugin-react';
import path from 'path';
import { defineConfig } from 'vite';

export default defineConfig({
plugins: [react(), tailwindcss()],
resolve: {
alias: {
'@': path.resolve(__dirname, 'src'),
'@utils': path.resolve(__dirname, './src/utils'),
Comment on lines +10 to +11
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

ESM에서 __dirname은 정의되지 않음 — Vite 실행 시 ReferenceError

현재 파일은 ESM(패키지 type: module)인데 __dirname을 직접 사용하고 있습니다. Node ESM에서는 __dirname이 제공되지 않아 설정 평가 시 즉시 실패합니다. 아래처럼 fileURLToPath로 대체해 주세요.

적용 제안:

 import tailwindcss from '@tailwindcss/vite';
 import react from '@vitejs/plugin-react';
 import path from 'path';
+import { fileURLToPath } from 'node:url';
 import { defineConfig } from 'vite';

+const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
 export default defineConfig({
   plugins: [react(), tailwindcss()],
   resolve: {
     alias: {
       '@': path.resolve(__dirname, 'src'),
       '@utils': path.resolve(__dirname, './src/utils'),
     },
   },
🤖 Prompt for AI Agents
In packages/design-system/vite.config.ts around lines 10 to 11, the config is
using the Node CommonJS global __dirname which is undefined in ESM and causes a
ReferenceError when Vite evaluates the file; replace direct __dirname usage by
importing fileURLToPath and dirname from 'url' and 'path' respectively (or use
only fileURLToPath + path.dirname) to compute a localDir variable from
import.meta.url, then use that localDir in path.resolve calls for '@' and
'@utils' so the aliases are built from a proper filesystem path in ESM.

},
Comment on lines +10 to +12
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

ESM 환경에서 __dirname 미정의로 인한 런타임 에러 발생 — fileURLToPath로 교체 필요

package.json에 "type": "module"이 설정되어 있어 이 설정 파일은 ESM으로 해석됩니다. ESM 스코프에서는 __dirname이 정의되지 않으므로 현재 alias 설정에서 런타임 에러가 발생합니다.

아래와 같이 수정해 주세요:

-import path from 'path';
+import { fileURLToPath, URL } from 'node:url';

 export default defineConfig({
   plugins: [react(), tailwindcss()],
   resolve: {
     alias: {
-      '@': path.resolve(__dirname, 'src'),
-      '@utils': path.resolve(__dirname, './src/utils'),
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+      '@utils': fileURLToPath(new URL('./src/utils', import.meta.url)),
     },
   },

검증 스크립트:

#!/bin/bash
# __dirname 사용 여부 점검
rg -n "__dirname\b" packages/design-system/vite.config.ts || echo "OK: __dirname not used"
🤖 Prompt for AI Agents
packages/design-system/vite.config.ts around lines 10 to 12: the config
currently uses __dirname which is undefined in ESM and causes runtime errors;
replace __dirname usage with a dirname computed from
fileURLToPath(import.meta.url) (import { fileURLToPath } from 'url' and use
path.dirname) and update the alias targets to use that dirname (e.g., const
__filename = fileURLToPath(import.meta.url); const __dirname =
path.dirname(__filename); then use path.resolve(__dirname, 'src') etc.) so the
aliases work in ESM.

},
build: {
lib: {
entry: 'src/components/index.ts',
name: 'DesignSystem',
fileName: (format) => `design-system.${format}.js`,
},
rollupOptions: {
external: ['react', 'react-dom'],
output: {
globals: {
react: 'React',
'react-dom': 'ReactDOM',
},
},
Comment on lines +20 to +27
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

react/jsx-runtime도 external로 지정 권장

ESM/라이브러리 빌드에서 JSX 런타임이 번들에 끌려 들어오는 것을 방지하려면 'react/jsx-runtime'를 함께 external 처리하는 것이 안전합니다.

   rollupOptions: {
-    external: ['react', 'react-dom'],
+    external: ['react', 'react-dom', 'react/jsx-runtime'],
     output: {
       globals: {
         react: 'React',
         'react-dom': 'ReactDOM',
       },
     },
   },
🤖 Prompt for AI Agents
In packages/design-system/vite.config.ts around lines 20 to 27, the
rollupOptions.external list is missing 'react/jsx-runtime', which can cause the
JSX runtime to be bundled into library builds; add 'react/jsx-runtime' to the
external array and also add a corresponding entry to output.globals (e.g.,
'react/jsx-runtime': 'jsxRuntime' or an appropriate global name) so the runtime
stays external in ESM/UMD builds and avoids being inlined into the bundle.

},
},
});
Loading
Loading