import { Meta } from '@storybook/blocks';

<Meta
  title="README/README"
/>

# README

## 📚 문서 관리

이 문서는 `@quotalab/qds` 라이브러리의 공식 가이드예요.

새로운 컴포넌트를 만들거나 기존 컴포넌트를 수정할 때마다 이 문서도 함께 업데이트해주세요.

### 스토리북 사용자를 위한 안내

**스토리북을 통해 다음 정보를 쉽게 찾을 수 있게 해주세요:**

- 컴포넌트의 모습과 다양한 variant
- 소스 코드에서 사용하는 방법
- 컴포넌트의 props 인터페이스 문서

**props 설명 시 주의사항:**
- 모든 가능한 props를 나열해주세요.
- 각 prop의 이름, 타입, 설명을 자세히 적어주세요.
- `key`, `value` 구조인 경우 가능한 값들을 모두 보여주세요.

## 📂 디렉토리 구조

### 전체 구조

모든 컴포넌트는 `src/components` 아래에 있어요. 각 컴포넌트는 독립된 디렉토리를 가져요.

예시:
```
src/components/
├── Button/
├── Icon/
├── Tag/
├── Chip/
│   ...
├── Inputs/
    ├── Select/
    ├── TextArea/
    ├── TextField/
```

### 임포트 규칙

- `src/components/**/index.ts`는 각 컴포넌트의 대문 역할을 해요.
- `index.ts`에서는 외부에 보여주고 싶은 것만 export 해주세요.

#### 외부에서 접근할 때

✅ 이렇게 해주세요: `index.ts`에서 export한 것만 사용해요.
```tsx
import { ButtonProps } from 'Components/Button';
```

❌ 이렇게 하지 마세요: 개별 파일에 직접 접근하지 마세요.
```tsx
import { ButtonProps } from 'Components/Button/Button.types';
```

#### 디렉토리 내부에서 접근할 때

✅ 이렇게 해주세요: 개별 파일에서 직접 import 해요.
```tsx
import { ButtonProps } from './Button.types';
```

❌ 이렇게 하지 마세요: 내부에서 index 파일을 통해 import 하지 마세요.
```tsx
import { ButtonProps } from '.';
```

#### 더 이상 사용하지 않는 코드

사용하지 않는 컴포넌트나 코드는 `deprecated` 표시를 해주세요.

```tsx
/**
 * @deprecated
 */
const DeprecatedComponent = () => {
  return <SomeComponent />;
};
```

## 🧱 컴포넌트 구조

각 컴포넌트는 다음 파일들로 구성돼요:

- `{ComponentName}.tsx`: 리액트 컴포넌트의 본체예요.
- `{ComponentName}.types.ts`: 컴포넌트에 필요한 타입을 정의해요.
- `{ComponentName}.css.ts`: emotion으로 만든 스타일 컴포넌트를 모아뒀어요.
- `{ComponentName}.test.tsx`: 테스트 코드를 작성하는 곳이에요.