Skip to content

JaeIn1/Color-Converter

Repository files navigation

🎨 원클릭 컬러 변환기


💡 서비스 소개

개발자나 디자이너가 색상 코드를 변환할 때 겪는 번거로움
가장 빠르고 직관적으로 해결하기 위해 만들어진 원클릭 컬러 변환 도구입니다.

HEX, RGB, HSL 등 다양한 포맷의 색상 코드를 실시간 상호 변환하며, 사용자 편의성을 극대화한 기능들을 제공합니다.


✨ 주요 기능

즉각적인 색상 코드 변환

  • HEX, RGB, HSL, RGBA, CSS 변수 등 다양한 포맷을 입력하면 모든 포맷으로 즉시 변환됩니다.

원클릭 복사

  • 변환된 모든 색상 코드 옆에 복사 버튼이 있어 한 번의 클릭으로 코드 복사가 가능합니다.

최근 사용 색상 저장 및 재사용

  • 자주 사용하는 색상을 하단 영역에 저장할 수 있으며 페이지를 새로고침해도 유지**되어 즉시 재사용할 수 있습니다.

투명도(Alpha) 조절

  • 슬라이더로 투명도를 조절하면 RGBA / HSLA 코드에 실시간 반영됩니다.

🛠️ 기술 스택

구분 기술 스택 설명
Frontend React, TypeScript 안정적인 타입 기반 컴포넌트 개발
Styling Emotion (CSS-in-JS) 동적 스타일링 및 성능 최적화
State Mgt. Zustand 간결하고 효율적인 전역 상태 관리
Build Tool Vite 빠르고 현대적인 번들링 환경
Package Mgt. pnpm 효율적인 패키지 관리

⚙️ CI/CD 및 개발 환경

이 프로젝트는 GitHub Actions 기반 CI/CD가 구성되어 있습니다.

✔️ CI (Continuous Integration)

  • Pull Request 발생 시:
    • pnpm install
    • pnpm lint
      를 자동 실행하여 코드 품질을 검증합니다.

✔️ CD (Continuous Deployment)

  • 빌드가 완료된 후 자동으로 배포 환경에 반영됩니다.

🚀 시작 방법

아래 명령어로 로컬 환경에서 프로젝트를 실행할 수 있습니다:

# 1. 의존성 설치
pnpm install

# 2. 로컬 개발 서버 실행
pnpm dev