Digital Card Maker

💼 디지털 명함 제작 서비스

📌 프로젝트 개요

• 프로젝트명: Digital Card Maker
• 배포 URL: https://lgw2238.github.io/digital-card-maker/

NOTE

회사에서 종이로 제작된 명함을 주고 받는 것이 불편하게 느껴져 개발자스럽게 이미지로 만들어진 명함을 제작하여 사용하고자 해당 웹 어플리케이션을 제작해보았다.

🎯 주요 기능

• 직관적인 명함 제작

  • 실시간 미리보기 기능
  • 사용자 친화적 인터페이스
  • 드래그 앤 드롭 이미지 업로드

• 커스터마이징 옵션

  • 배경 이미지 설정/제거
  • 폰트 스타일 변경
  • 텍스트 정보 입력/수정

🛠 기술 스택

Frontend

• Language: React 18(18.3.1) + TypeScript
• Styling: TailwindCSS
• 상태관리: Context API
• 라우팅: React Router v6

개발 도구

• 버전관리: Git, GitHub
• 배포: GitHub Pages
• 빌드도구: Vite

🖥 실제 구현 화면

랜딩 페이지

• 그라데이션 효과와 모던한 UI
• 직관적인 시작하기 버튼

명함 제작 페이지

• 실시간 미리보기
• 사용자 친화적 폼 입력
• 반응형 디자인

📂 프로젝트 구조

digital-card-maker/
├── src/
│   ├── components/
│   │   ├── layout/
│   │   │   └── Layout.tsx
│   │   ├── card/
│   │   │   ├── CardForm.tsx
│   │   │   └── CardPreview.tsx
│   │   └── landing/
│   │       └── LandingPage.tsx
│   ├── context/
│   │   └── CardContext.tsx
│   ├── styles/
│   │   └── index.css
│   ├── assets/
│   │   └── images/
│   └── App.tsx
├── public/
│   ├── favicon.ico
│   └── index.html
├── .github/
│   └── workflows/
│       └── deploy.yml
├── package.json
├── tsconfig.json
├── vite.config.ts

✨ 제작 명함 예시