🎯 g5se 오늘의 성격 유형 테스트 - MBTI 스타일 심리 분석 & 결과 공유

g5se가 설치된 디렉터리(루트에 `index.php`·`app/`이 있는 곳)에서 작업을 시작합니다. (g5se 설치는 https://github.com/gnuboard/g5se 참고)

**Step 1: 프로젝트 폴더 생성 & modern shell 골격 구성**

1. `app/modules/personality-quiz/index.php` 파일을 생성하세요.
2. modern shell 골격을 적용하세요:
   - `_common.php` 인클루드 (app/ 루트 기준 상대경로 `./_common.php`)
   - `G5_THEME_PATH.'/modern/_head.inc.php'` require
   - `./head.sub.php` 인클루드
   - `<div class="m-shell">` 래퍼로 전체 감싸기
   - `G5_THEME_PATH.'/modern/_nav.inc.php'` require (네비게이션)
   - `<main class="m-container" style="padding: 32px 20px 48px;">` 본문 컨테이너
   - 본문에 "성격 유형 테스트" 제목과 "곧 퀴즈가 시작됩니다" 임시 메시지 표시
   - `G5_THEME_PATH.'/modern/_footer.inc.php'` require (푸터)
   - `./tail.sub.php` 인클루드
3. 브라우저에서 `/personality-quiz`로 접속하여 modern shell이 정상 적용되었는지 확인하세요 (네비게이션, 푸터, 다크모드 토글 등이 보여야 함).

**기대 결과:**
- `/personality-quiz` URL로 접속 시 사이트 전체 디자인과 통일된 페이지가 표시됨
- 네비게이션, 푸터, 다크모드 전환 버튼이 자동으로 렌더링됨
- 본문에 "성격 유형 테스트" 제목이 보임

**Step 2: 퀴즈 질문 데이터 & 시작 화면 구성**

1. `<main class="m-container">` 안에 퀴즈 컨테이너를 만드세요:
   - 시작 화면 (id="start-screen"): 테스트 소개 문구, "시작하기" 버튼
   - 퀴즈 화면 (id="quiz-screen", 초기에는 display:none): 질문 번호, 질문 텍스트, A/B 선택 버튼 2개, 진행률 바
   - 결과 화면 (id="result-screen", 초기에는 display:none): 유형 코드, 설명, 공유 버튼
2. `<script>` 블록에 퀴즈 데이터를 JS 객체 배열로 정의하세요:
   - 5개 질문, 각 질문은 `{ id: 1, text: "질문 내용", optionA: "A 선택지", optionB: "B 선택지", axis: "E/I" }` 형식
   - axis는 측정할 성향 축 (E/I, S/N, T/F, J/P 중 하나, 5번째 질문은 보너스로 E/I 재측정 또는 다른 축)
   - 예시 질문:
     1. "주말에 친구들과 만나는 게 좋다 vs 혼자 집에서 쉬는 게 좋다" (E/I)
     2. "구체적인 사실을 중시한다 vs 큰 그림과 가능성을 본다" (S/N)
     3. "논리적으로 판단한다 vs 감정을 우선한다" (T/F)
     4. "계획을 세우고 따른다 vs 즉흥적으로 행동한다" (J/P)
     5. "새로운 사람 만나는 게 설렌다 vs 낯선 사람은 부담스럽다" (E/I)
3. "시작하기" 버튼 클릭 시 시작 화면을 숨기고 퀴즈 화면을 표시하는 JS 함수를 작성하세요.
4. 첫 번째 질문을 화면에 렌더링하세요 (질문 텍스트, A/B 버튼).

**기대 결과:**
- 시작 화면에서 "시작하기" 버튼을 누르면 퀴즈 화면으로 전환됨
- 첫 번째 질문과 A/B 선택지가 표시됨
- 진행률 바가 1/5로 표시됨

**Step 3: 퀴즈 로직 구현 (선택 → 다음 질문 → 결과 집계)**

1. A 또는 B 버튼 클릭 시 선택을 기록하고 다음 질문으로 넘어가는 로직을 작성하세요:
   - 선택 결과를 배열에 저장 (예: `answers = [{axis: "E/I", choice: "A"}, ...]`)
   - 현재 질문 인덱스를 증가시키고 다음 질문을 렌더링
   - 진행률 바 업데이트 (예: 2/5, 3/5...)
2. 마지막 질문(5번째)에서 선택 후 결과 집계 함수를 호출하세요:
   - 각 축(E/I, S/N, T/F, J/P)별로 A 또는 B 선택이 많은 쪽을 채택
   - 4글자 유형 코드 생성 (예: ENFP, ISTJ)
   - 결과 화면으로 전환 (퀴즈 화면 숨김, 결과 화면 표시)
3. 결과 화면에 유형 코드를 표시하세요 (예: "당신의 유형은 ENFP입니다!").

**기대 결과:**
- 질문을 순서대로 진행하며 선택할 수 있음
- 5번째 질문까지 완료하면 자동으로 결과 화면으로 이동
- 결과 화면에 계산된 유형 코드가 표시됨

**Step 4: 유형별 결과 데이터 추가 & 상세 설명 표시**

1. JS 객체로 16가지 유형별 데이터를 정의하세요:
   - 각 유형: `{ type: "ENFP", emoji: "🦄", title: "열정적인 활동가", description: "창의적이고 사교적이며...", jobs: ["마케터", "기획자", "작가"], compatible: ["INTJ", "INFJ"] }`
   - 최소 4~5개 유형만 샘플로 작성 (나머지는 "준비 중" 또는 기본 텍스트)
2. 결과 화면에서 계산된 유형 코드에 해당하는 데이터를 찾아 표시하세요:
   - 유형 이모지 (크게)
   - 유형 제목 (예: "열정적인 활동가")
   - 상세 설명 (2~3줄)
   - 어울리는 직업 목록 (태그 형태)
   - 궁합 좋은 유형 (태그 형태)
3. 결과 카드 디자인:
   - `background: var(--m-surface);`
   - `box-shadow: var(--m-shadow);`
   - `border-radius: var(--m-radius-lg);`
   - 본문 텍스트는 `color: var(--m-text);`
   - 흐린 텍스트(부제목 등)는 `color: var(--m-text-muted);`
4. 다크모드에서도 가독성이 유지되는지 확인하세요.

**기대 결과:**
- 결과 화면에 유형별 상세 정보가 카드 형태로 예쁘게 표시됨
- 이모지, 제목, 설명, 직업, 궁합 유형이 모두 렌더링됨
- 다크모드 전환 시 배경/텍스트 색상이 자동으로 변경됨

**Step 5: 결과 공유 기능 & 쿼리스트링 처리**

1. 결과 화면에 "결과 공유하기" 버튼을 추가하세요:
   - 버튼 클릭 시 현재 페이지 URL에 쿼리스트링 `?type=ENFP` 형태로 유형 코드를 추가한 URL을 클립보드에 복사
   - 복사 완료 시 "링크가 복사되었습니다!" 알림 표시 (간단한 alert 또는 토스트 메시지)
2. 페이지 로드 시 쿼리스트링에 `type` 파라미터가 있는지 확인:
   - PHP에서 `$_GET['type']`을 받아 JS로 전달 (예: `const sharedType = "<?= htmlspecialchars($_GET['type'] ?? '') ?>";`)
   - 쿼리스트링에 유효한 유형 코드가 있으면 퀴즈를 건너뛰고 바로 결과 화면을 표시
   - 유형 코드가 유효하지 않으면 (예: 존재하지 않는 코드) 시작 화면으로 리다이렉트
3. 공유 URL로 접속한 사용자도 동일한 결과를 볼 수 있도록 테스트하세요.

**기대 결과:**
- 결과 화면에서 "결과 공유하기" 버튼을 누르면 URL이 클립보드에 복사됨
- 공유된 URL로 접속하면 퀴즈 없이 바로 해당 유형의 결과 화면이 표시됨
- 잘못된 유형 코드로 접속하면 시작 화면으로 돌아감

**Step 6: 스타일링 마무리 & 애니메이션 추가 (선택사항)**

1. 퀴즈 화면과 결과 화면 전환 시 부드러운 fade-in 애니메이션을 추가하세요:
   - CSS `@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }`
   - 화면 전환 시 `animation: fadeIn 0.4s ease-in-out;` 클래스 추가
2. 질문 카드와 결과 카드에 hover 효과를 추가하세요:
   - hover 시 `transform: translateY(-4px);` + `box-shadow` 강화
3. 진행률 바 디자인:
   - 배경: `background: var(--m-surface);` (밝은 회색)
   - 진행된 부분: 그라디언트 또는 단색 (예: `#6366f1`)
   - 부드러운 transition 추가 (`transition: width 0.3s ease;`)
4. 모바일 반응형 확인:
   - 작은 화면에서 카드가 세로로 배치되고 버튼이 터치하기 쉬운 크기인지 확인
   - 텍스트가 너무 작지 않은지 확인 (최소 14px)
5. 최종 테스트:
   - 퀴즈 전체 플로우 (시작 → 질문 5개 → 결과)
   - 다크모드 전환 시 모든 요소가 정상 표시되는지
   - 공유 링크로 접속 시 바로 결과가 나오는지
   - 모바일/데스크톱 양쪽에서 레이아웃이 깨지지 않는지

**기대 결과:**
- 화면 전환이 부드럽고 애니메이션이 자연스러움
- 카드에 hover 시 시각적 피드백이 있음
- 모바일에서도 사용성이 좋음
- 다크모드와 라이트모드 모두 완벽하게 대응됨
- 전체 퀴즈 플로우와 공유 기능이 버그 없이 동작함