Skip to content

Feat(design-system): toggle component 구현 #17

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jjangminii merged 6 commits into from
Aug 21, 2025
Merged

Feat(design-system): toggle component 구현 #17

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
620626b
feat: switch 구현
jjangminii Aug 21, 2025
c4e315d
feat: 스타일 커스텀
jjangminii Aug 21, 2025
715df47
chore: 주석제거
jjangminii Aug 21, 2025
54c4ea8
chore: lock파일
jjangminii Aug 21, 2025
6e76fe4
Merge branch 'develop' of https://github.com/Pinback-Team/pinback-cli…
jjangminii Aug 21, 2025
6724bce
chore: lock yaml 수정
jjangminii Aug 21, 2025
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
18 changes: 9 additions & 9 deletions apps/landing/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import { useState } from 'react';
import reactLogo from './assets/react.svg';
import viteLogo from '/vite.svg';
import './App.css';

function App() {
const [count, setCount] = useState(0)
const [count, setCount] = useState(0);

return (
<>
<div>
<a href="https://vite.dev" target="_blank">
<a href="https://vite.dev" target="_blank" rel="noreferrer">
<img src={viteLogo} className="logo" alt="Vite logo" />
</a>
<a href="https://react.dev" target="_blank">
<a href="https://react.dev" target="_blank" rel="noreferrer">
<img src={reactLogo} className="logo react" alt="React logo" />
</a>
</div>
Expand All @@ -29,7 +29,7 @@ function App() {
Click on the Vite and React logos to learn more
</p>
</>
)
);
}

export default App
export default App;
1 change: 1 addition & 0 deletions packages/design-system/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@
},
"dependencies": {
"@radix-ui/react-slot": "^1.2.3",
"@radix-ui/react-switch": "^1.2.6",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
"lucide-react": "^0.540.0",
Expand Down
1 change: 1 addition & 0 deletions packages/design-system/src/components/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
export { default as Button } from './button/Button';
export { Switch } from './switch/switch';
30 changes: 30 additions & 0 deletions packages/design-system/src/components/switch/switch.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import * as React from 'react';
import * as SwitchPrimitive from '@radix-ui/react-switch';
import { cn } from '@/lib/utils';

function Switch({
className,
...props
}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
return (
Comment on lines +5 to +9
Copy link

@coderabbitai coderabbitai bot Aug 21, 2025

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion

ref 미전달 — 포커스 관리/폼 연동에 영향, forwardRef로 전환 권장

디자인 시스템 입력형 컴포넌트는 보통 ref 전달을 지원해야 포커스 트랩, 포커스 이동, 폼 라이브러리(react-hook-form 등)와 매끄럽게 동작합니다. 현재 일반 함수 컴포넌트로 정의되어 ref가 전달되지 않습니다. forwardRef로 전환해 주세요.

-import * as React from 'react';
+import * as React from 'react';

 ...
-function Switch({
-  className,
-  ...props
-}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
-  return (
-    <div className="text-main600">
-      <SwitchPrimitive.Root
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  return (
+      <SwitchPrimitive.Root
+        ref={ref}
         data-slot="switch"
         className={cn(
-          'data-[state=checked]:bg-main400 data-[state=unchecked]:bg-gray200 focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 shadow-xs peer inline-flex h-[1.15rem] h-[2rem] w-[4rem] shrink-0 items-center rounded-full border border-transparent outline-none transition-all focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+          'data-[state=checked]:bg-main400 data-[state=unchecked]:bg-gray200 focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 shadow-xs inline-flex h-[2rem] w-[4rem] shrink-0 items-center rounded-full border border-transparent outline-none transition-all focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
           className
         )}
         {...props}
       >
         <SwitchPrimitive.Thumb
           data-slot="switch-thumb"
           className={cn(
-            'bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-[1.6rem] rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[2.1rem] data-[state=unchecked]:translate-x-[0.1rem]'
+            'bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-[1.6rem] rounded-full ring-0 transition-transform motion-reduce:transition-none data-[state=checked]:translate-x-[2.1rem] data-[state=unchecked]:translate-x-[0.1rem]'
           )}
         />
       </SwitchPrimitive.Root>
-    </div>
   );
-}
+});
 
-export { Switch };
+Switch.displayName = 'Switch';
+
+export { Switch };
  • 중복 클래스 h-[1.15rem] h-[2rem]도 함께 정리했습니다(마지막 값이 유효하지만 혼란을 야기).
  • peer 클래스는 현재 사용되지 않아 제거했습니다.
  • 모션 민감 사용자 배려를 위해 motion-reduce:transition-none 추가를 제안합니다.

Also applies to: 12-18, 20-26, 31-31

🤖 Prompt for AI Agents 
packages/design-system/src/components/switch/switch.tsx around lines 6-31: the
component is a plain function so it doesn't forward refs, which breaks focus
management and form integrations; convert the component to use React.forwardRef
and type the ref as the underlying SwitchPrimitive.Root element, forward the ref
to the Root primitive and pass through props, remove duplicate height classes
(h-[1.15rem] h-[2rem]) and the unused peer class, and add
motion-reduce:transition-none to transition classes to respect reduced-motion
preferences; apply the same forwardRef and class cleanups at the other indicated
sections (lines 12-18, 20-26, 31).

<div className="text-main600">
<SwitchPrimitive.Root
data-slot="switch"
className={cn(
'data-[state=checked]:bg-main400 data-[state=unchecked]:bg-gray200 focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 shadow-xs peer inline-flex h-[1.15rem] h-[2rem] w-[4rem] shrink-0 items-center rounded-full border border-transparent outline-none transition-all focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
Copy link

@coderabbitai coderabbitai bot Aug 21, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

💡 Verification agent

🧩 Analysis chain

디자인 토큰/유틸 클래스 존재 여부 확인 요청(shadow-xs, main400 등)

shadow-xs, bg-main400, bg-gray200, bg-input/80, ring-ring/50가 Tailwind v4 설정/토큰에 실제로 정의되어 있는지 한 번 확인 부탁드립니다. 미정의 시 purge로 인해 의도치 않게 누락될 수 있습니다.

다음 스크립트로 설정 파일에서 토큰 정의를 찾아볼 수 있습니다(리포지토리 루트에서 실행).

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "== Tailwind 설정 파일 탐색 =="
fd -HI 'tailwind.config*' -t f

echo "== 색상/그림자 토큰 정의 검색 =="
# colors에 main400/gray200/input/ring 등이 정의되어 있는지
rg -nP 'colors\s*:\s*{[^}]*\b(main400|gray200|input|ring)\b' -C2 --hidden

echo "== 임의 클래스 사용 여부 점검(shadow-xs) =="
rg -n '\bshadow-xs\b' --hidden

echo "== v4 @source 적용 여부 재확인 =="
rg -n '@source' packages/design-system -C1 --hidden

Length of output: 272

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "== Tailwind 설정 파일 (apps/extension/tailwind.config.ts) 처음 200행 =="
sed -n '1,200p' apps/extension/tailwind.config.ts

echo "== 메인 색상 토큰(main400) 검색 =="
rg -n -C3 'main400' apps/extension/tailwind.config.ts || true

echo "== gray200 검색 =="
rg -n -C3 'gray200' apps/extension/tailwind.config.ts || true

echo "== input 색상 토큰(input) 검색 =="
rg -n -C3 'input' apps/extension/tailwind.config.ts || true

echo "== ring 색상 토큰(ring) 검색 =="
rg -n -C3 'ring' apps/extension/tailwind.config.ts || true

echo "== 그림자 유틸(shadow-xs) 검색 =="
rg -n -C3 'shadow-xs' apps/extension/tailwind.config.ts || true

Length of output: 991

Tailwind 설정에 커스텀 토큰·유틸이 정의되어 있지 않습니다
bg-main400, bg-gray200, bg-input/80, ring-ring/50, shadow-xs 등이 실제로 사용되려면 Tailwind 설정(tailwind.config.{js,ts})의 theme.extend에 명시적으로 추가되어야 합니다. 현재 리포지토리에서 발견된 apps/extension/tailwind.config.ts에는 extend: {}만 정의되어 있어, 해당 클래스들은 Purge 단계에서 제거될 위험이 있습니다.

조치 사항:

  • 다음 파일 경로를 확인하고, 커스텀 색상·그림자 토큰을 추가해 주세요.
    • apps/extension/tailwind.config.ts
  • theme.extend에 아래와 같은 예시 형태로 필요한 토큰 정의를 추가해야 합니다. 
    theme: {
  extend: {
    colors: {
      main400: '…',
      gray200: '#…',
      input: 'hsla(…, 0.8)',
      ring: '…',
    },
    boxShadow: {
      xs: '0 0 0 1px rgba(0,0,0,0.05)',
    },
  },
},
  • 혹은 디자인 시스템 전체에서 공유하는 별도의 Tailwind 설정 파일이 있다면, 해당 파일에도 동일하게 정의했는지 재확인해 주세요.
🤖 Prompt for AI Agents 
In packages/design-system/src/components/switch/switch.tsx around line 14 you
use Tailwind classes like bg-main400, bg-gray200, bg-input/80, ring-ring/50 and
shadow-xs that are not defined in the repository Tailwind config and will be
purged; open apps/extension/tailwind.config.ts and add these custom tokens under
theme.extend (e.g., extend.colors: main400, gray200, input, ring and
extend.boxShadow: xs or map shadow-xs) or ensure the shared/global Tailwind
config used by the design system contains identical entries, then rebuild to
confirm the classes are preserved.

Copy link
Member

@constantly-dev constantly-dev Aug 21, 2025

Choose a reason for hiding this comment

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

해당 부분은 잘 적용 되는 거죠??

Copy link

@coderabbitai coderabbitai bot Aug 21, 2025

Choose a reason for hiding this comment

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

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "=== 모든 Tailwind 설정 파일 탐색 ==="
fd -HI 'tailwind.*\.(js|ts|cjs|mjs)$' -t f

echo "=== packages/design-system의 Tailwind 설정 확인 ==="
fd -HI 'tailwind.*\.(js|ts|cjs|mjs)$' packages/design-system -t f

echo "=== 공유 Tailwind 설정 파일 확인 ==="
fd -HI 'tailwind.*\.(js|ts|cjs|mjs)$' packages -t f

echo "=== main400, gray200 등 커스텀 색상 토큰 정의 검색 ==="
rg -nP '\b(main400|gray200|input|ring)\b' --type js --type ts -A3 -B3

echo "=== shadow-xs 그림자 토큰 정의 검색 ==="
rg -nP 'shadow.*xs|boxShadow.*xs' --type js --type ts -A3 -B3

echo "=== @source 지시문 확인 ==="
rg -n '@source' packages/design-system -C2

Length of output: 4714

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "=== apps/extension/tailwind.config.ts 내용 확인 ==="
cat apps/extension/tailwind.config.ts

echo "=== @pinback/tailwind-config 패키지 확인 ==="
ls -la packages/ | grep tailwind || echo "tailwind-config 패키지 없음"
fd -HI 'tailwind-config' packages -t d

echo "=== packages/design-system/src/lib/utils.ts에서 색상 토큰 정의 부분 전체 확인 ==="
cat packages/design-system/src/lib/utils.ts

echo "=== shared-styles.css 확인 ==="
fd -HI 'shared-styles.css' -t f

echo "=== node_modules나 외부 패키지에서 tailwind-config 확인 ==="
ls -la node_modules/@pinback/ 2>/dev/null || echo "@pinback 스코프 없음"

Length of output: 3302

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "=== packages/tailwind-config/shared-styles.css 내용 확인 ==="
cat packages/tailwind-config/shared-styles.css

echo "=== packages/tailwind-config 디렉토리 전체 구조 확인 ==="
ls -la packages/tailwind-config/

echo "=== tailwind-config 패키지에 Tailwind 설정 파일이 있는지 확인 ==="
fd -HI 'tailwind.*\.(js|ts|cjs|mjs)$' packages/tailwind-config -t f

echo "=== CSS 변수나 커스텀 프로퍼티 정의 확인 ==="
rg -nP '--.*main400|--.*gray200|--.*input|--.*ring' packages/tailwind-config/ || echo "CSS 변수 정의 없음"

echo "=== @layer 나 @apply 지시문 확인 ==="
rg -nP '@layer|@apply' packages/tailwind-config/ || echo "@layer/@apply 없음"

Length of output: 6457

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "=== input, ring 색상 변수 정의 확인 ==="
rg -n 'color-input|color-ring' packages/tailwind-config/

echo "=== background, foreground 등 기본 색상 확인 ==="
rg -n 'color-background|color-foreground|primary-foreground' packages/tailwind-config/

echo "=== shadow-xs 정의 확인 ==="
rg -n 'shadow.*xs' packages/tailwind-config/

echo "=== 모든 그림자 관련 정의 확인 ==="
rg -n 'shadow|Shadow' packages/tailwind-config/

echo "=== Tailwind v4에서 사용하는 기본 색상 토큰들 확인 ==="
echo "Tailwind v4 기본 색상들이 정의되어 있는지 확인..."
rg -n 'color-(background|foreground|primary|input|ring)' packages/tailwind-config/ || echo "기본 Tailwind v4 색상 토큰 정의 없음"

Length of output: 151

@constantly-dev 부분적으로만 잘 적용됩니다!

분석 결과:

✅ 잘 작동하는 클래스들:

  • bg-main400, bg-gray200 → packages/tailwind-config/shared-styles.css에 @theme으로 정의되어 있음
  • @source "./src"; 지시문도 올바르게 설정됨

❌ 작동하지 않는 클래스들:

  • bg-input/80 → --color-input 정의 없음
  • ring-ring/50 → --color-ring 정의 없음
  • shadow-xs → shadow-xs 유틸리티 정의 없음
  • bg-background, bg-foreground, bg-primary-foreground → Tailwind v4 기본 시맨틱 토큰들이 정의되지 않음

해결 방법:
packages/tailwind-config/shared-styles.css의 @theme 블록에 다음 토큰들을 추가해야 합니다:

@theme {
  /* 기존 색상들... */
  
  /* 추가 필요한 시맨틱 토큰들 */
  --color-background: #ffffff;
  --color-foreground: #111111;
  --color-input: #f1f1f5;
  --color-ring: #54d19d;
  --color-primary-foreground: #ffffff;
}

/* 그림자 유틸리티 추가 */
@utility shadow-xs {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
}

현재 상태에서는 토글 컴포넌트가 렌더링되지만 일부 스타일링(포커스 링, 다크모드 배경, 그림자)이 누락될 것입니다.

  ∧   ∧
 ( ._. )
o_("_")_o

분석하는 토끼

🧠 Learnings used 
Learnt from: constantly-dev
PR: Pinback-Team/pinback-client#5
File: apps/extension/src/index.css:1-1
Timestamp: 2025-08-19T17:18:57.657Z
Learning: constantly-dev는 디자인 시스템 설정 PR 머지 후 `import 'pinback/tailwind-config/shared-styles.css';`를 `app.css`나 `index.css`에서 사용하여 공유 스타일을 관리할 계획입니다.

Learnt from: constantly-dev
PR: Pinback-Team/pinback-client#89
File: apps/client/src/pages/onBoarding/components/OnboardingNavButton.tsx:26-34
Timestamp: 2025-07-16T13:11:52.976Z
Learning: In the Pinback-Team/pinback-client project, `bg-gray200` is a custom design token used consistently throughout the design system, not a typo. The project uses custom color tokens like `gray0`, `gray100`, `gray200`, `gray300`, etc. without hyphens, which is different from standard Tailwind CSS naming conventions. This should not be changed to `bg-gray-200` as it would break the design system.

Learnt from: constantly-dev
PR: Pinback-Team/pinback-client#2
File: pnpm-workspace.yaml:3-3
Timestamp: 2025-08-18T13:48:59.021Z
Learning: constantly-dev는 docs 디렉터리를 컨벤션 문서 추가용으로 사용할 예정이라고 명시했습니다.

className
)}
{...props}
>
<SwitchPrimitive.Thumb
data-slot="switch-thumb"
className={cn(
'bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-[1.6rem] rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[2.1rem] data-[state=unchecked]:translate-x-[0.1rem]'
)}
/>
</SwitchPrimitive.Root>
</div>
);
}

export { Switch };
2 changes: 2 additions & 0 deletions packages/design-system/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@

@import '@pinback/tailwind-config/shared-styles.css';

@source "./src";
Copy link
Member

@constantly-dev constantly-dev Aug 21, 2025

Choose a reason for hiding this comment

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

최고 👍
하나 알아갑니다~~


@custom-variant dark (&:is(.dark *));

:root {
Expand Down
152 changes: 152 additions & 0 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading