💼 디지털 명함 제작 서비스
📌 프로젝트 개요
- 프로젝트명: 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✨ 제작 명함 예시
