내가 퀸이라면 어떤 여왕일까? | Queen MBTI Test

MBTI 기반 여왕 성격 테스트 웹 애플리케이션입니다. 12개의 질문을 통해 당신이 만약 여왕이라면 어떤 스타일의 여왕일지 알아보세요!

🎯 특징

• 12개 질문: MBTI 4가지 지표를 측정하는 질문들
• 16가지 여왕 유형: 각 MBTI 유형별로 특화된 여왕 캐릭터
• 아름다운 UI: 왕실 테마의 고급스러운 디자인
• 반응형 디자인: 모바일과 데스크톱 모두 지원
• 애니메이션: 부드러운 전환 효과와 인터랙션
• 결과 공유: 테스트 결과를 쉽게 공유할 수 있는 기능

🚀 시작하기

필수 요구사항

• Node.js 18.0.0 이상
• npm 또는 yarn

설치 및 실행

1. 의존성 설치

   npm install

2. 개발 서버 실행

   npm run dev

3. 브라우저에서 확인

   http://localhost:3000
   

🛠️ 기술 스택

• Next.js 14: React 기반 프레임워크
• TypeScript: 타입 안전성
• Tailwind CSS: 스타일링
• Framer Motion: 애니메이션
• Lucide React: 아이콘

📁 프로젝트 구조

queentest/
├── app/
│   ├── globals.css      # 전역 스타일
│   ├── layout.tsx       # 루트 레이아웃
│   └── page.tsx         # 메인 페이지
├── data/
│   ├── questions.ts     # 질문 데이터
│   └── characters.ts    # 여왕 캐릭터 데이터
├── package.json
├── tailwind.config.js
├── next.config.js
└── README.md

🎨 디자인 시스템

색상 팔레트

• Royal Purple: #667eea ~ #764ba2 (그라데이션)
• Gold: #fbbf24 ~ #f59e0b (강조색)
• Glass Effect: 반투명 배경과 블러 효과

타이포그래피

• 제목: Playfair Display (Serif)
• 본문: Inter (Sans-serif)

🔧 커스터마이징

질문 수정

data/questions.ts 파일에서 질문과 선택지를 수정할 수 있습니다.

캐릭터 수정

data/characters.ts 파일에서 여왕 캐릭터의 정보를 수정할 수 있습니다.

스타일 수정

tailwind.config.js와 app/globals.css에서 색상과 스타일을 수정할 수 있습니다.

📱 배포

Vercel 배포 (권장)

1. GitHub에 코드 푸시
2. Vercel에서 프로젝트 연결
3. 자동 배포 완료

다른 플랫폼

npm run build
npm start

🤝 기여하기

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 라이선스

이 프로젝트는 MIT 라이선스 하에 배포됩니다.

🙏 감사의 말

• MBTI 이론과 여왕 컨셉을 결합한 재미있는 아이디어
• 아름다운 UI/UX 디자인
• 사용자 친화적인 인터페이스

---

즐거운 테스트 되세요! 👑✨