GeniXX — 재능 진단 플랫폼

Next.js 16 (App Router) + Tailwind CSS v4로 만든 GeniXX 웹사이트입니다. GeniXX 플랫폼 사이트맵·메뉴 정의서 / GeniXX 회원 가입·계정 구조 정의서(2026-08-05)를 기준으로 구성했습니다.

실행

npm run dev

http://localhost:3000 에서 확인합니다.

npm run build   # 프로덕션 빌드
npm run start   # 빌드 결과 실행
npm run lint    # ESLint

페이지 구성

사이트맵·메뉴 정의서(2026-08-05)의 화면 ID를 그대로 승계합니다.

공개 존 (PUB) — 홍보 페이지

경로	화면 ID	설명
/	PUB-01	랜딩 — 히어로, 신뢰 신호, 브랜드 이름 풀이, 학력×재능 직교, HITL, 서비스 사다리, 대상별, 참여진, 진행 절차
/about + 5	PUB-02	우리가 보는 재능 / 진단 원리(HITL) / 이론적 근거 / 진단 윤리 헌장 / 참여진 소개
/about/team/[id]	PUB-02-5	참여자 개인 프로필 — 이력·담당 업무·만든 것
/service + 5	PUB-03	학력진단(무료) / 재능진단 1단계 / 심화진단 2단계 / 성장추적 3단계 / 요금 안내
/sample + 2	PUB-04	샘플 PDF 뷰어 / 대시보드 데모
/insight + 4	PUB-05	재능 이야기 / 양육 가이드 / 연구노트·백서 / 공지·보도자료
/support + 3	PUB-06	FAQ(5개 카테고리) / 1:1 문의 / 학부모 설명회 영상
/partner + 2	PUB-07	기관 도입 문의 / 인증 해석 전문가 과정
/legal + 5	PUB-08	이용약관 / 개인정보처리방침 / 아동용 눈높이 고지 / AI 이용 고지 / 환불 규정

계정·동의 존 (ACC)

사이트맵 12장 URL 규칙을 그대로 따릅니다 — 공개 / · 회원 /my · 응시 /exam · 결과 /report · 전문가 /expert · 기관 /org · 관리 /admin2. 사이트맵이 각 단계를 별도 화면 ID로 정의하므로 위저드 한 장이 아니라 실제 라우트로 분리했습니다.

경로	화면 ID	설명
/signup	ACC-01	가입 방식 선택 (간편 / 이메일)
/signup/type	ACC-01-1	학부모 / 교사 / 기관담당자 3분기 — 학생 항목 없음
/signup/verify	ACC-01-2	휴대폰·간편인증 — 법정대리인 신원 확인 근거
/signup/consent	ACC-01-3	목적별 분리 동의 (학력진단 / 재능진단 / 심화연계 / 마케팅)
/signup/pending	ACC-01-4	교사·기관 소속 승인 대기
/login	ACC-02	이메일·간편 로그인 + 전문가·관리자 2FA
/login/student	ACC-02-1	학생 응시 로그인 (8자리 접속코드 + 생년월일, noindex)
/login/recover	ACC-02-2	ID·비밀번호 찾기
/my/children	ACC-03	자녀 프로필 — 다자녀, 아이별 동의 주체 표시
/my/children/consent	ACC-03-1	법정대리인 동의 (B00) — 등록 흐름 최선행
/my/children/new	ACC-03-2	기본정보 (B01~B10, B10 가정 내 주사용 언어)
/my/children/consent-stages	ACC-03-3	단계별 동의 관리
/my/children/withdraw	ACC-03-4	동의 철회·데이터 파기 요청
/my/account + 2	ACC-04	내 정보 / 알림 설정 / 회원 탈퇴

학생은 독립 가입 경로가 없습니다. 보호자 계정 하위 프로필로 등록되고, 응시는 접속코드로 합니다.

화면 디자인의 출처

로그인·회원가입은 새로 디자인하지 않고 국내 검사·진단 포털의 관례를 그대로 따랐습니다. 학부모가 이미 다른 검사 사이트에서 같은 순서를 겪어 봤기 때문입니다 (components/account/ui.tsx에 근거를 주석으로 남겨 두었습니다).

가져온 것	출처	반영
좁은 중앙 로그인 상자	인싸이트 400px	416px
입력칸	340×44 · 라운드 8 · 16px	350×46 · 라운드 8 · 16px
제출 버튼	340×50 남색 풀폭	350×50 남색 풀폭
아이디·비밀번호 찾기	가운데 구분점으로 나눈 작은 링크	동일
"아직 회원이 아니신가요? 회원가입"	상자 맨 아래	동일
STEP 1~4 번호 인디케이터	GED 회원가입	동일 (원형 44px + STEP n + 라벨)
약관 전문 스크롤 상자	GED 282px · 13px · 얇은 회색 테두리	208px · 13px (실제로 스크롤됨)
폼 아래 「•」 주의사항	GED 로그인	동일
유형 선택 + 절차 안내 점 목록	인싸이트 회원가입	동일
하단 중앙 [이전][다음] 버튼 쌍	GED·커리어넷 공통	동일

관례와 어긋나게 둔 것이 하나 있습니다. 전체 동의를 기본값으로 켜 두지 않았습니다. 사이트맵 ACC-01-3이 "미동의 시에도 최소 응시 경로 제공(동의 강제 금지)"을 정하고 있어, 선택 항목을 끄면 무엇이 달라지는지 그 자리에 적는 쪽을 택했습니다.

만 14세 분기 (개인정보보호법 제22조의2)

동의 주체가 갈리는 지점이라 lib/account.ts에 규칙을 모아 두었습니다. /my/children/consent는 생년월일만 먼저 받아 갈래를 정한 뒤 맞는 동의문을 보여 줍니다.

	만 14세 미만	만 14세 이상
동의 주체	법정대리인(보호자)	학생 본인
보호자 본인확인	법정대리인 신원 확인 근거로 사용	결제·리포트 열람 주체로만
아동 눈높이 고지문	병행 제시 + 확인 체크 필수	해당 없음
본인 동의 시점	—	접속코드로 첫 응시 진입 시
계정 구조	보호자 계정 하위 프로필	동일 (독립 계정 아님)

만 나이는 생일 경과 여부까지 계산합니다 (ageFromBirth). 동의를 마치기 전에는 /my/children/new가 열리지 않습니다 — 동의 없이 아이 정보가 먼저 쌓이지 않도록 막습니다.

로그인 버튼을 누르면

1. 전문가·관리자 → 2FA 화면. 통과 전에는 세션을 만들지 않습니다 (12장 보안 정책)
2. 교사·기관, 승인 전 → /signup/pending. 학생 데이터 접근 차단
3. 학부모, 자녀 없음 → /my/children/consent (등록 흐름 최선행)
4. 그 외 → 역할별 기본 화면 (roleHome)

응시 존 (ASM)

접수 · 응시 · 정답과 해설 · 결과는 학생 대시보드(/student) 한 곳에 있습니다. 예전에는 응시 존 헤더에도 같은 넷이 탭(접수하기 · 응시하기 · 정답과 해설 · 결과보기)으로 있어 한 가지 일에 자리가 둘이었습니다. 응시 존에는 문항을 푸는 창과 가입 전 사람이 보는 화면만 남겼고, 옛 주소 (/exam/apply · /exam/answers · /exam/report · /exam/[회차]/[학년])는 대시보드의 새 주소로 넘깁니다 (next.config.ts).

경로	화면 ID	설명
/student/apply	ASM-01	진단 접수 — 분기와 학년을 골라 접수. 접수 확인 · 완료 창은 주소가 들고 있음(?apply= · ?applied=)
/student/exams · /student/exams/[round]/[track]	ASM-01	내 진단 — 접수한 진단 목록 → 과목별 응시 현황 · 설문 제출 · 최종 제출
/student/answers · /student/answers/[round]/[track]	ASM-01	정답과 해설 — 최종 제출을 마친 진단의 정오표(정답 · 오답 · 미응답 · 채점 중) · 「답안 풀이 보기」 창(응시 화면과 같은 틀) · 정오표 내려받기(PDF · CSV · 인쇄)
/student/results · /student/results/[round]/[track]	RPT-01	진단 결과 — 결과 발행 상태 목록 → 결과지
/exam	—	진단 둘러보기 — 로그인하지 않은 사람이 진단을 골라 1셋트를 풀어 봄. 학생은 /student/exams로 넘어감
/exam/info · /exam/guide	—	진단 안내(응시 순서 · 규정) · 서비스 안내(학력진단과 재능진단 문항 비교)
/exam/session/trial/[round]/[track]	ASM-02	비회원 셋트 — 가입 없이 한 교과 4문항 (별도 창)
/exam/session/free	ASM-03	회원 무료시험 — 세 과목 20문항을 한 번에 (별도 창)
/exam/session/paid/[subject]	ASM-04	회원 유료시험 — korean math science 각각 별도 응시 (별도 창)
/exam/result	RPT-01	결과 리포트 — 8재능 팔각형, 유형, 성장 방향, 전문가 평가, PDF·이미지 저장
/exam/roster	ORG-02	학원장 — 학생 등록·접속코드 발급·CSV 일괄 등록
/exam/payment	PAY-03	응시권 결제 (학생 직접 신청 경로)
/survey/[role]	ASM-05·06	mother father teacher 설문 — 고정 크기 팝업 창 전용
/api/inquiry	—	문의 접수 API (서버 측 유효성 검사 후 접수번호 반환)

응시 화면은 왼쪽에 함께 읽는 자료, 가운데에 문항, 오른쪽에 문항 이동판을 둡니다(세트 문항). 자료가 없는 독립 문항은 왼쪽 칸 없이 문항만 가운데에 나옵니다(lib/exam.ts의 standsAlone). 답하는 방식은 보기 고르기 · 괄호 칸 · 긴 글 · 사진 올리기 · 선 잇기 다섯 가지이고, 선 잇기는 두 항목을 차례로 누르거나 점에서 점으로 끌어서 잇습니다(components/exam/MatchAnswer.tsx). 문항 은행에는 아직 선 잇기 문항이 없어, 유형 하나만 떼어 보는 화면에서 확인합니다 — /exam/session/design/[유형] (listen speak short file match).

관리자 존 (ADM) — 내부 운영 콘솔

/admin2/*. 왼쪽 메뉴 + 작업면의 별도 레이아웃이며, 검색엔진에 노출되지 않습니다(robots: noindex). 슈퍼 관리자 한 사람이 쓰는 콘솔이라 메뉴를 9그룹 한 단으로만 폅니다(lib/admin2.ts).

여기까지가 README 앞부분입니다. 나머지는 원문에서 읽을 수 있습니다. README 전문 보기 ↗