Skip to content

feat: 로그인 UI 개발 #2

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

Open
luckyseo3 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: 로그인 UI 개발 #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
5 changes: 5 additions & 0 deletions .gitattributes
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
* text=auto eol=lf

*.bat text eol=crlf
*.cmd text eol=crlf
*.ps1 text eol=crlf
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
node_modules/
.pnpm/
.pnpm-store/
.vite/
dist/
.DS_Store
Expand Down
35 changes: 35 additions & 0 deletions EDSC
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
cb642e46 (KIM TAEHOON 2026-02-14 22:23:04 +0900 1) import { useState } from 'react'
cb642e46 (KIM TAEHOON 2026-02-14 22:23:04 +0900 2) import reactLogo from './assets/react.svg'
cb642e46 (KIM TAEHOON 2026-02-14 22:23:04 +0900 3) import viteLogo from '/vite.svg'
cb642e46 (KIM TAEHOON 2026-02-14 22:23:04 +0900 4) import './App.css'
cb642e46 (KIM TAEHOON 2026-02-14 22:23:04 +0900 5)
cb642e46 (KIM TAEHOON 2026-02-14 22:23:04 +0900 6) function App() {
cb642e46 (KIM TAEHOON 2026-02-14 22:23:04 +0900 7) const [count, setCount] = useState(0)
cb642e46 (KIM TAEHOON 2026-02-14 22:23:04 +0900 8)
cb642e46 (KIM TAEHOON 2026-02-14 22:23:04 +0900 9) return (
cb642e46 (KIM TAEHOON 2026-02-14 22:23:04 +0900 10) <>
cb642e46 (KIM TAEHOON 2026-02-14 22:23:04 +0900 11) <div>
cb642e46 (KIM TAEHOON 2026-02-14 22:23:04 +0900 12) <a href="https://vite.dev" target="_blank">
cb642e46 (KIM TAEHOON 2026-02-14 22:23:04 +0900 13) <img src={viteLogo} className="logo" alt="Vite logo" />
cb642e46 (KIM TAEHOON 2026-02-14 22:23:04 +0900 14) </a>
cb642e46 (KIM TAEHOON 2026-02-14 22:23:04 +0900 15) <a href="https://react.dev" target="_blank">
cb642e46 (KIM TAEHOON 2026-02-14 22:23:04 +0900 16) <img src={reactLogo} className="logo react" alt="React logo" />
cb642e46 (KIM TAEHOON 2026-02-14 22:23:04 +0900 17) </a>
cb642e46 (KIM TAEHOON 2026-02-14 22:23:04 +0900 18) </div>
cb642e46 (KIM TAEHOON 2026-02-14 22:23:04 +0900 19) <h1>Vite + React</h1>
cb642e46 (KIM TAEHOON 2026-02-14 22:23:04 +0900 20) <div className="card">
a293c104 (지휘서 2026-02-24 13:03:10 +0900 21) <button onClick={() => setCount((count) => count + 4)}>
cb642e46 (KIM TAEHOON 2026-02-14 22:23:04 +0900 22) count is {count}
cb642e46 (KIM TAEHOON 2026-02-14 22:23:04 +0900 23) </button>
cb642e46 (KIM TAEHOON 2026-02-14 22:23:04 +0900 24) <p>
cb642e46 (KIM TAEHOON 2026-02-14 22:23:04 +0900 25) Edit <code>src/App.tsx</code> and save to test HMR
cb642e46 (KIM TAEHOON 2026-02-14 22:23:04 +0900 26) </p>
cb642e46 (KIM TAEHOON 2026-02-14 22:23:04 +0900 27) </div>
cb642e46 (KIM TAEHOON 2026-02-14 22:23:04 +0900 28) <p className="read-the-docs">
cb642e46 (KIM TAEHOON 2026-02-14 22:23:04 +0900 29) Click on the Vite and React logos to learn more
cb642e46 (KIM TAEHOON 2026-02-14 22:23:04 +0900 30) </p>
cb642e46 (KIM TAEHOON 2026-02-14 22:23:04 +0900 31) </>
cb642e46 (KIM TAEHOON 2026-02-14 22:23:04 +0900 32) )
cb642e46 (KIM TAEHOON 2026-02-14 22:23:04 +0900 33) }
cb642e46 (KIM TAEHOON 2026-02-14 22:23:04 +0900 34)
cb642e46 (KIM TAEHOON 2026-02-14 22:23:04 +0900 35) export default App
120 changes: 120 additions & 0 deletions RADIX_UI_SETUP.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,120 @@
# Radix UI + Tailwind CSS 컴포넌트 라이브러리 설정 완료

## 설치된 패키지
- ✅ @radix-ui/react-alert-dialog
- ✅ @radix-ui/react-dialog
- ✅ @radix-ui/react-dropdown-menu
- ✅ @radix-ui/react-label
- ✅ @radix-ui/react-popover
- ✅ @radix-ui/react-slot
- ✅ class-variance-authority (CVA - 스타일 관리)
- ✅ clsx (클래스 병합)

## 생성된 컴포넌트

### 1. Button (`src/components/ui/Button.tsx`)
```tsx
import { Button } from '@/components/ui'

export default function Example() {
return (
<>
<Button>기본 버튼</Button>
<Button variant="outline">아웃라인</Button>
<Button variant="ghost">고스트</Button>
<Button size="lg">큰 버튼</Button>
<Button disabled>비활성화</Button>
</>
)
}
```

### 2. Input (`src/components/ui/Input.tsx`)
```tsx
import { Input } from '@/components/ui'

export default function Example() {
return <Input placeholder="입력하세요..." />
}
```

### 3. Label (`src/components/ui/Label.tsx`)
```tsx
import { Label, Input } from '@/components/ui'

export default function Example() {
return (
<div>
<Label htmlFor="email">이메일</Label>
<Input id="email" type="email" />
</div>
)
}
```

### 4. Dialog (`src/components/ui/Dialog.tsx`)
```tsx
import {
Dialog,
DialogTrigger,
DialogContent,
DialogHeader,
DialogTitle,
DialogDescription,
Button
} from '@/components/ui'

export default function Example() {
return (
<Dialog>
<DialogTrigger asChild>
<Button>대화창 열기</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>제목</DialogTitle>
<DialogDescription>
설명 텍스트
</DialogDescription>
</DialogHeader>
</DialogContent>
</Dialog>
)
}
```

## 사용법

### tsconfig.json 경로 별칭 설정 (선택사항이지만 권장)
```json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
}
}
```

### 기본 import
```tsx
// 개별 import
import { Button, Input, Label } from '@/components/ui'

// 또는 직접 import
import Button from '@/components/ui/Button'
```

## 장점
- ✅ 접근성(A11y) 완벽 지원
- ✅ Tailwind CSS 스타일 완전 커스터마이징
- ✅ class-variance-authority로 쉬운 스타일 관리
- ✅ TypeScript 완벽 지원
- ✅ Headless UI - 스타일 자유도 높음
- ✅ 프로덕션 레디

## 다음 단계
- 필요한 컴포넌트 추가 (Select, Checkbox, RadioGroup, etc.)
- Toast/Alert 시스템 구축
- 테마 분기 (다크모드)
Loading