4c44f942c5
요청하신 내러티브 태그 시스템과 시각화 작업을 모두 완료했습니다! 이전에 멈췄던 개발 서버( npm run dev )도 다시 실행해
두었으니, 새로고침 후 바로 확인해 보실 수 있습니다.
구현된 시스템의 주요 변경점은 다음과 같습니다.
### 1. 내러티브 데이터 생성 및 연동 ( narrative_tags.json , cards.csv )
• 기획서의 세계관을 바탕으로 피도 눈물도 없는 진압, 진실의 장막, 금지된 지식(이계 조우), 사이비의 그림자 등 서사
몰입을 돕는 내러티브 태그 데이터를 생성했습니다.
• 매 결재마다 무조건 얻는 것이 아니라, 특정 카드(예: 민간인 구역 폭격, 유물 연구 등)에서 특정한 선택을 했을 때만
불규칙적으로 획득하도록 cards.csv 데이터를 스크립트로 자동 매핑했습니다.
### 2. 결재 시 스와이프 보상 시각화 ( SwipeCard.jsx , SwipeCard.css )
• 내러티브 태그가 걸려 있는 선택지 쪽으로 스와이프(미리보기)를 하면, 텍스트 상단에 노란색 바탕의 뱃지( 💡 진실의 장막
)가 심장 박동처럼 깜빡이는 애니메이션과 함께 아주 눈에 띄게 표시됩니다. 플레이어가 "아, 이 선택을 하면 스토리에 큰
영향을 주는구나"를 직관적으로 알 수 있습니다.
### 3. 태그 획득 알림 팝업 ( GameScreen.jsx )
• 결재를 완료하여 내러티브 태그를 얻는 순간, 화면 중앙 상단에 [새로운 내러티브 획득! - 금지된 지식] 형태의 눈에
띄는 팝업 알림이 내려왔다가 3초 뒤 자연스럽게 사라지도록 구현했습니다.
### 4. 연대기 창 서사 부각 개편 ( ChroniclePopup.jsx , ChroniclePopup.css )
• 단순히 텍스트만 나열되던 방식을 타임라인(Timeline) 형식으로 전면 재설계했습니다.
• 과거의 기록에는 [위기] 상황 키워드 와 함께 내가 어떤 서사를 마주했고 어떤 결정을 내렸는지 명확히 표시됩니다.
• 태그 획득 시각화: 특히 내러티브 태그를 얻은 턴은 배경이 금빛으로 하이라이트되며, 획득한 태그의 **자세한 설명(스토리
서사)**이 커다란 아이콘과 함께 표시됩니다. 이를 통해 유저가 왜 이런 태그를 얻었는지 서사를 깊게 이해할 수 있습니다.
React + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- @vitejs/plugin-react uses Oxc
- @vitejs/plugin-react-swc uses SWC
React Compiler
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see this documentation.
Expanding the ESLint configuration
If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the TS template for information on how to integrate TypeScript and typescript-eslint in your project.