플러스프로젝트 배경
1) 예상 리스크 및 대응 계획 - 4개 국어 동시 지원 시 설문 문항·선택지·결과 텍스트의 일관된 동기화 유지 필요 - 30문항 설문 도중 뒤로가기·새로고침 시 진행 상태 유실 방지 로직 설계 필요 - 문항별 가중치 배점이 다른 MBTI식 점수 계산 로직의 정확성 보장 방안 필요 - 전각 배경 이미지 30개 이상 로딩으로 인한 모바일 초기 성능 저하 대응 필요 - 카카오톡·인스타그램 공유 시 OG
프로젝트 성과
4개 국어 실시간 전환 다국어 링크트리 구현
react-i18next와 Context API를 활용해 한/중/일/영 언어 전환이 새로고침 없이 전체 UI에 즉시 반영되는 구조를 설계합니다.
30문항 5지선다 MBTI식 설문 엔진 설계
useReducer 기반 설문 상태 머신으로 문항별 가중치 점수를 누적해 5~8개 사찰 성향 유형을 도출하는 알고리즘을 구현합니다.
문항별 전각 이미지 + 사찰 위치 지도 연동 UI
설문 진행 중 각 문항 그룹에 따라 사찰 내부 SVG 지도의 현재 위치가 하이라이트되어 몰입감 있는 투어 경험을 제공합니다.
OG 메타태그 동적 주입 소셜 공유 최적화
결과 유형별 OG 이미지와 타이틀을 서버에서 동적으로 렌더링해 카카오톡·X·인스타그램 공유 카드가 최적화된 형태로 표시됩니다.
AES-256-GCM 개인정보 암호화 저장 파이프라인
수집된 이름·성별·나이·국적 데이터를 서버 측에서 암호화 처리 후 PostgreSQL에 저장하는 보안 파이프라인을 설계합니다.
핵심 기능
다국어 링크트리 메인 페이지
한/중/일/영 언어 토글과 사찰 안내 바로가기 버튼을 제공하는 모바일 최적화 메인 화면. react-i18next 기반 동적 언어 전환, GNB 언어 토글 컴포넌트, JSON 설정 파일 기반 버튼 리스트 관리
진행 단계
다국어 컨텍스트 설정 및 링크트리 메인 구현
2026.04
react-i18next 4개 언어 리소스 구성, GNB 언어 토글 컴포넌트 개발, 링크트리 버튼 리스트 JSON 기반 구현
프로젝트 상세
1) 포트폴리오 소개 한/중/일/영 4개 국어를 지원하는 사찰 링크트리 메인 페이지와 30문항 MBTI식 무인 사찰투어 설문조사 시스템을 React + TypeScript로 구현합니다. 모바일 최적화 반응형 UI, 단계별 전각 이미지 전환, 개인정보 수집 및 점수 기반 유형 도출 결과 공유 기능을 포함합니다. 2) 작업 범위 - 다국어 링크트리 메인 페이지: 한/중/일/영 언어 토글과 사찰 안내 바로
