Feat: storybook docs추가 및 프로필 이미지 수정 인증 추가

[aquaman122]

💡 작업 내용

• 프로필 이미지 수정 인증 추가
• storybook docs추가

💡 자세한 설명

는 장점이 있다.

• 애플리케이션의 전체 빌드 없이 빠른 피드백 루프 제공

컴포넌트 문서화

컴포넌트를 문서화하는 도구로도 매우 유용하다. 디자인 시스템이나 컴포넌트 라이브러리를 관리할 수 있다.

• 컴포넌트의 사용법, API, 가능한 상태 등을 시각적으로 정리
• 코드와 함께 실시간 프리뷰를 제공하여 개발자와 디자이너 간 협업 효율이 높아진다
• Docs 패널을 통해 컴포넌트의 Prop, 설명, 렌더링 예제를 자동으로 생성한다.

컴포넌트 테스트

컴포넌트의 동작을 확인하고, 다양한 상태와 조합에서 정상적으로 작동하는지 테스트할 수 있다.

• 비주얼 테스트: 다양한 입력값에 따라 컴포넌트가 제대로 렌더링되는지 확인
• 상태 관리: 컴폰너트가 특정 상태에서 어떻게 동작되는지 확인
• 스토리 파일 활용: react-testing-library 등과 통합하여 테스트를 실행

디자인 시스템 구축

스토리북은 팀이 공통된 디자인 시스템을 정의하고 활용할 수 있는 툴로 사용된다.

• 팀의 모든 컴포넌트를 한 곳에 모아 쉽게 탐색 가능
• 디자이너와 개발자가 동일한 소스에서 작업하도록 도와 협업 효율을 높인다
• 디자인 가이드라인과 일치하는 컴포넌트를 쉽게 유지관리

비주얼 회귀 테스트

UI 변경 시, 예상치 못한 변경이 발생하지 않았는지 확인할 수 있다.

• UI 스냅샷을 비교하여 변경 사항 감지
• 브라우저 및 디바이스 간의 UI 차이를 시뮬레이션
• CI/CD 파이프라인에서 UI 테스트를 자동화

디자이너-개발자 협업도구

접근성 테스트를 위한 Addon 다운

다양한 화면 크기에서 컴포넌트 테스트 addon-viewport 다운

// 기본 import
import type { Meta, StoryObj } from '@storybook/react';
// Story로 만들 컴포넌트 불러오기
import { Button } from './Button';

const meta = {
	title: "Components/Buttons/Button",
  component: Button,
  parameters: {
    layout: "centered",
  },
  tags: ["autodocs"],
  args: {}
  argTypes: {}
} satisfies Meta<typeof Button>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Primary: Story = {
  args: {
    primary: true,
    label: 'Button',
  },
};

공식 문서에 나와 있는 story 컴포넌트 기본 세팅 방식

• title - 폴더 구조 만들기 (depth 1 - 카테고리, depth 2 - 폴더, depth 3 - 컴포넌트 폴더)
• component - import한 컴포넌트 삽입
• parameters - layout - 컴포넌트 보여지는 위치
• tags: ["autodocs"] - 자동 Docs 생성
• args: 스토리 컴포넌트에 넣어줄 props default 값 지정

사용하면 좋은 기능으론

• addon-a11y
  • 기능: 컴포넌트의 웹 접근성 자동으로 검토, 문제점을 시각적으로 표시
• addon-controls
  • 기능: Storybook UI에서 Props를 실시간으로 조작하여 컴포넌트의 동작을 테스트
• addon-interactions
  • 기능: Storybook에서 상호작용 테스트
• Storybook Test Runner
  • 기능: Storybook 내에서 통합 테스트 실행하고, 컴포넌트가 예상대로 작동하는지 확인.

Storybook에서 꼭 사용해야 하는 기능들은

1. Props 조작: Args를 실시간으로 변경하며 테스트.
2. Docs 자동화: Props, 사용법, 이벤트를 문서화.
3. 상호작용 테스트: 사용자 이벤트를 Storybook 내에서 확인.
4. 접근성 검사(A11Y): 컴포넌트의 접근성 문제를 사전에 해결
5. Visual Regression Testing: UI 변경 사항을 안전하게 확인

스토리북은 UI 컴포넌트의 개발과 테스트, 문서화를 지원하는 강력한 도구입니다. 컴포넌트 기반 개발의 효율성을 높이고, 프로젝트의 품질을 향상시키는 데 큰 도움이 됩니다.

✅ 셀프 체크리스트

• PR 제목을 형식에 맞게 작성했나요?
• 브랜치 전략에 맞는 브랜치에 PR을 올리고 있나요? (master/main이 아닙니다.)
• 이슈는 close 했나요?
• Reviewers, Labels, Projects를 등록했나요?
• 작업 도중 문서 수정이 필요한 경우 잘 수정했나요?
• 테스트는 잘 통과했나요?
• 불필요한 코드는 제거했나요?

closes #

[CLOUDoort]

확인했습니다!