From 7f06cb6519666bbc727b618adbee06c878f023f9 Mon Sep 17 00:00:00 2001
From: Kyoung5seo <kyoung5seo@gmail.com>
Date: Tue, 16 Jun 2026 22:45:09 +0900
Subject: [PATCH] =?UTF-8?q?=ED=94=84=EB=A1=9C=ED=86=A0=ED=83=80=EC=9E=85?=
 =?UTF-8?q?=20=ED=85=8C=EC=8A=A4=ED=8A=B8=EA=B0=80=20=EA=B0=80=EB=8A=A5?=
 =?UTF-8?q?=ED=95=A0=20=EC=A0=95=EB=8F=84=EC=9D=98=20=EA=B2=B0=EC=9E=AC?=
 =?UTF-8?q?=EC=B9=B4=EB=93=9C=20=EB=8D=B0=EC=9D=B4=ED=84=B0=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/components/GameScreen.jsx | 23 +++++++++
 client/src/components/SwipeCard.css  | 72 +++++++++++++++++++++++++++-
 client/src/components/SwipeCard.jsx  | 48 ++++++++++++++++++-
 client/src/data/cards.csv            | 37 ++++++++++++--
 4 files changed, 172 insertions(+), 8 deletions(-)

diff --git a/client/src/components/GameScreen.jsx b/client/src/components/GameScreen.jsx
index cbee497..1bf6af1 100644
--- a/client/src/components/GameScreen.jsx
+++ b/client/src/components/GameScreen.jsx
@@ -23,8 +23,20 @@ export function GameScreen() {
       id: row.id,
       type: row.type,
       text: row.text,
+      flavor: row.flavor,
       left: {
         text: row.left_text,
+        stats: {
+          res: row.left_res || 0,
+          ent: row.left_ent || 0,
+          rsk: row.left_rsk || 0,
+          bud: row.left_bud || 0,
+          per: row.left_per || 0,
+          inf: row.left_inf || 0,
+          wea: row.left_wea || 0,
+          for: row.left_for || 0,
+          sur: row.left_sur || 0,
+        },
         effect: () => {
           setParams(p => ({
             resistance: Math.max(0, p.resistance + (row.left_res || 0)),
@@ -45,6 +57,17 @@ export function GameScreen() {
       },
       right: {
         text: row.right_text,
+        stats: {
+          res: row.right_res || 0,
+          ent: row.right_ent || 0,
+          rsk: row.right_rsk || 0,
+          bud: row.right_bud || 0,
+          per: row.right_per || 0,
+          inf: row.right_inf || 0,
+          wea: row.right_wea || 0,
+          for: row.right_for || 0,
+          sur: row.right_sur || 0,
+        },
         effect: () => {
           setParams(p => ({
             resistance: Math.max(0, p.resistance + (row.right_res || 0)),
diff --git a/client/src/components/SwipeCard.css b/client/src/components/SwipeCard.css
index 0f8e746..e59ecf6 100644
--- a/client/src/components/SwipeCard.css
+++ b/client/src/components/SwipeCard.css
@@ -97,9 +97,79 @@
   right: -20px;
 }
 
-.swipe-intent span {
+.swipe-intent .intent-title {
   background: rgba(0, 0, 0, 0.8);
   padding: 8px 16px;
   border-radius: 8px;
   border: 2px solid currentColor;
+  display: inline-block;
+  margin-bottom: 8px;
+}
+
+.card-flavor-container {
+  margin-top: auto;
+  padding-top: 15px;
+  border-top: 1px dashed rgba(255, 255, 255, 0.2);
+}
+
+.card-flavor {
+  font-family: var(--font-ui);
+  font-size: 14px;
+  font-style: italic;
+  color: rgba(255,255,255,0.6);
+  text-align: center;
+  line-height: 1.4;
+}
+
+.stats-preview {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  align-items: center;
+  background: rgba(0, 0, 0, 0.9);
+  padding: 8px;
+  border-radius: 8px;
+  border: 1px solid rgba(255,255,255,0.1);
+  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
+  min-width: 120px;
+  pointer-events: none;
+}
+
+.stat-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  font-family: var(--font-ui);
+  font-size: 14px;
+  font-weight: bold;
+}
+
+.stat-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+}
+
+.stat-label {
+  flex: 1;
+  text-align: left;
+  margin-left: 6px;
+  font-size: 12px;
+  text-transform: none;
+  letter-spacing: 0;
+  color: #fff;
+}
+
+.stat-val {
+  margin-left: 8px;
+}
+
+.stat-good {
+  color: #4ade80;
+}
+
+.stat-bad {
+  color: #f87171;
 }
diff --git a/client/src/components/SwipeCard.jsx b/client/src/components/SwipeCard.jsx
index 1e58e19..e561761 100644
--- a/client/src/components/SwipeCard.jsx
+++ b/client/src/components/SwipeCard.jsx
@@ -1,7 +1,44 @@
 import React, { useState, useEffect } from 'react';
 import { motion, useMotionValue, useTransform, useAnimation } from 'framer-motion';
+import { HandCoins, Droplet, Eye, Shield, Building2, EyeOff } from 'lucide-react';
 import './SwipeCard.css';
 
+const renderStats = (stats) => {
+  if (!stats) return null;
+  const items = [];
+  
+  if (stats.res !== 0) items.push({ icon: '✊', label: '저항', val: stats.res, isDanger: true });
+  if (stats.ent !== 0) items.push({ icon: '🌀', label: '엔트로피', val: stats.ent, isDanger: true });
+  if (stats.rsk !== 0) items.push({ icon: '⚠️', label: '위험', val: stats.rsk, isDanger: true });
+  
+  if (stats.bud !== 0) items.push({ icon: <HandCoins size={14} />, label: '예산', val: stats.bud });
+  if (stats.per !== 0) items.push({ icon: <Droplet size={14} />, label: '인력', val: stats.per });
+  if (stats.inf !== 0) items.push({ icon: <Eye size={14} />, label: '정보', val: stats.inf });
+  
+  if (stats.wea !== 0) items.push({ icon: <Building2 size={14} />, label: '재력', val: stats.wea });
+  if (stats.for !== 0) items.push({ icon: <Shield size={14} />, label: '무력', val: stats.for });
+  if (stats.sur !== 0) items.push({ icon: <EyeOff size={14} />, label: '감시', val: stats.sur });
+
+  if (items.length === 0) return null;
+
+  return (
+    <div className="stats-preview">
+      {items.map((item, idx) => {
+         const sign = item.val > 0 ? '+' : '';
+         const isBad = item.isDanger ? item.val > 0 : item.val < 0;
+         const colorClass = isBad ? 'stat-bad' : 'stat-good';
+         return (
+           <div key={idx} className={`stat-item ${colorClass}`}>
+             <span className="stat-icon">{item.icon}</span>
+             <span className="stat-label">{item.label}</span>
+             <span className="stat-val">{sign}{item.val}</span>
+           </div>
+         );
+      })}
+    </div>
+  );
+};
+
 export default function SwipeCard({ card, onSwipe, phase }) {
   const x = useMotionValue(0);
   const controls = useAnimation();
@@ -57,14 +94,21 @@ export default function SwipeCard({ card, onSwipe, phase }) {
           <div className="card-body">
             <p className="card-text">{card.text}</p>
           </div>
+          {card.flavor && (
+            <div className="card-flavor-container">
+              <p className="card-flavor">"{card.flavor}"</p>
+            </div>
+          )}
         </div>
 
         {/* Swipe Intents */}
         <motion.div className="swipe-intent left-intent" style={{ opacity: leftOpacity }}>
-          <span>{card.left?.text}</span>
+          <span className="intent-title">{card.left?.text}</span>
+          {renderStats(card.left?.stats)}
         </motion.div>
         <motion.div className="swipe-intent right-intent" style={{ opacity: rightOpacity }}>
-          <span>{card.right?.text}</span>
+          <span className="intent-title">{card.right?.text}</span>
+          {renderStats(card.right?.stats)}
         </motion.div>
       </motion.div>
     </div>
diff --git a/client/src/data/cards.csv b/client/src/data/cards.csv
index d172731..683c97f 100644
--- a/client/src/data/cards.csv
+++ b/client/src/data/cards.csv
@@ -1,5 +1,32 @@
-id,type,text,left_text,left_res,left_ent,left_rsk,left_bud,left_per,left_inf,left_wea,left_for,left_sur,right_text,right_res,right_ent,right_rsk,right_bud,right_per,right_inf,right_wea,right_for,right_sur
-1,일상,국장님 B구역의 하급 직원들이 수당 문제로 항의 집회를 준비 중입니다. 어떻게 처리할까요?,탄압 (저항↓ 인력↓),-1,0,0,0,-10,0,0,0,0,수용 (저항↑ 예산↓),1,0,0,-20,0,0,0,0,0
-2,위기,연구실에서 실험체가 탈주했습니다. 무력 진압에는 큰 인명 피해가 예상됩니다.,무력 진압 (인력↓↓ 위험↑),0,0,1,0,-20,0,0,0,0,방관 (엔트로피↑↑),0,2,0,0,0,0,0,0,0
-3,극비,제3 지부장이 은밀한 제안을 해왔습니다. 막대한 자금을 대가로 불법 실험을 눈감아 달라고 합니다.,수락 (위험↑↑ 예산↑↑),0,0,2,50,0,0,0,0,0,거절 (예산↓ 위험↓),0,0,-1,-10,0,0,0,0,0
-4,작전,언론 통제를 위한 그림자 위원회의 새로운 감시망을 구축할 예산이 필요합니다.,강행 (저항↑),1,0,0,0,0,0,0,0,0,대규모 투자 (예산↓↓ 감시태그++),0,0,0,-40,0,0,0,0,2
+id,type,text,flavor,left_text,left_res,left_ent,left_rsk,left_bud,left_per,left_inf,left_wea,left_for,left_sur,right_text,right_res,right_ent,right_rsk,right_bud,right_per,right_inf,right_wea,right_for,right_sur
+1,일상,B구역 하급 요원들이 예산 삭감에 반발해 장비 반납 시위를 하고 있습니다.,우리가 세상을 구하는데 월급이 깎인다고요? 촉수에 맞아 죽으나 굶어 죽으나 똑같습니다!,무력 진압,1,0,0,0,-10,0,0,0,0,요구 수용,0,0,0,-20,0,0,0,0,0
+2,위기,지하 4층 격리실의 문은 닫혀 있습니다만 요원 12명이 남긴 체액의 총량이 인간 12명의 부피를 초과했습니다.,보고서 첨부: 액체화된 직원은 산재 처리가 안 됩니다.,네이팜 소각 강행,0,0,0,0,-30,0,0,0,0,조사팀 파견,0,1,1,0,0,0,0,0,0
+3,일상,7구역에 촉수 괴물이 출현했습니다. 작전팀이 법인카드 영수증 제출을 누락해서 출동 승인이 반려된 상태입니다.,규정은 규정입니다. 영수증 없이 세계를 구하는 건 용납할 수 없습니다.,내역 위조 후 출동,0,0,1,0,0,-10,0,0,0,규정대로 반려,1,1,0,0,0,0,0,0,0
+4,극비,진화 미래당이 제안합니다. 요원들에게 괴수의 DNA를 소량 이식하면 작전 효율이 300% 상승합니다. 예산은 우리가 대죠.,인간의 한계는 명확합니다. 조금 징그러워지는 것쯤은 감수해야죠.,실험 승인,0,2,0,40,40,0,0,0,0,제안 거절,1,0,0,0,0,0,0,0,0
+5,작전,철의 수호당이 민간인 구역에 전술 폭격을 가해 S급 변칙 개체를 제거하자고 건의했습니다.,희생 없는 승리는 없습니다. 소를 위해 대를... 아니 대를 위해 소를 희생하죠.,궤도 폭격 승인,0,0,2,0,0,0,0,2,0,작전 기각,1,0,0,0,0,0,0,0,0
+6,일상,차원 무역당 소속 브로커가 처리된 괴수의 부산물을 암시장에 팔아치우자고 속삭입니다.,이 이빨 하나면 국장님 연봉의 10배입니다. 눈 한 번만 딱 감으시죠.,매각 허가,0,0,1,30,0,0,0,0,0,원칙대로 소각,0,0,0,-10,0,0,0,0,0
+7,작전,대중 매체를 장악하여 I.S.C.O의 존재를 서서히 양지화하는 프로젝트입니다. 막대한 정보 토큰이 소모됩니다.,우리가 이 행성의 진짜 지배자임을 알릴 때가 되었습니다.,감시망 구축,0,0,0,0,0,-40,0,0,2,프로젝트 보류,1,0,0,0,0,0,0,0,0
+8,극비,고대 언어 해독을 위해 대규모 도서관 건립이 필요합니다. 지식 보존당이 학자들을 동원할 것입니다.,이해할 수 없는 것을 죽이는 건 야만인이나 하는 짓입니다.,예산 배정,0,0,0,-40,0,40,0,0,0,예산 전액 삭감,1,0,1,0,0,0,0,0,0
+9,위기,기술 원리주의자들이 마녀사냥을 시작했습니다. 기구 내 마법 사용 요원들을 이단으로 규정하고 색출 중입니다.,더러운 마법과 변이에 의존해선 안 됩니다. 오직 순수한 인간의 힘으로!,적당히 묵인한다,1,0,0,0,-30,0,0,0,0,군사력으로 제압,0,0,1,0,0,-20,0,0,0
+10,일상,한 유튜버가 변칙 현상을 촬영해 업로드했습니다. 침묵의 장막당이 즉각적인 물리적 제거와 기억 소거를 요구합니다.,대중은 진실을 감당할 지능이 없습니다. 무덤까지 비밀을 덮으십시오.,제거 절차 승인,0,0,-1,0,0,-20,0,0,0,영상만 삭제,0,1,0,0,0,0,0,0,0
+11,위기,특정 구역의 사이비 종교가 고대 신을 소환하기 위해 시민 100명을 인신 공양하려 합니다. 공존당은 이를 방관하라 합니다.,위대한 그분들이 배가 고프다 하십니다. 조금만 양보하면 평화롭습니다.,군사 개입 지시,1,0,0,0,-40,0,0,0,0,의식 방관,0,2,0,0,0,0,0,0,0
+12,위기,의회에서 국장의 예산 전용 의혹을 제기하며 긴급 감사를 통보했습니다. 장부를 조작해야 합니다!,세상을 구하는 데 돈 좀 쓴 게 죄입니까? 빨리 덮을 정보팀을 부르십시오.,은폐 공작 실행,0,0,1,0,0,-40,0,0,0,횡령 사실 인정,0,0,2,0,0,0,0,0,0
+13,일상,연구 부서에서 초과 근무로 인한 집단 피로를 호소하며 휴가와 특별 보너스를 요구하고 있습니다.,저희도 사람입니다. 괴수 해부하다가 과로사하긴 싫어요.,특별 보너스 지급,-1,0,0,-30,0,0,0,0,0,요구 전면 묵살,1,0,0,0,0,0,0,0,0
+14,작전,이계와의 무역로를 임시 개방하여 자원을 조달하자는 안건이 상정되었습니다. 미지의 오염이 우려됩니다.,저 너머의 세계엔 우리가 상상도 못 할 자원이 널려있습니다. 황금알을 낳는 거위죠.,게이트 강제 개방,0,1,0,50,0,0,0,0,0,폐쇄 상태 유지,1,0,0,0,0,0,0,0,0
+15,극비,전임 국장이 남긴 비밀 금고를 발견했습니다. 여는 데 특수 장비와 전문 인력이 필요합니다.,전임 국장님이 숙청당하기 전 남긴 비자금 장부일지도 모릅니다.,강제 개방 지시,0,0,0,20,-30,0,1,0,0,영구 봉인,0,0,0,0,0,0,0,0,0
+16,작전,글로벌 메가코프를 협박해 I.S.C.O의 비자금을 세탁하고 대규모 자금을 확보할 기회입니다.,그들이 우리 덕분에 안전하게 사업하는 겁니다. 보호세 좀 걷는 게 뭐 어떻습니까.,작전 실행,0,0,0,0,0,-30,2,0,0,작전 취소,1,0,0,0,0,0,0,0,0
+17,위기,제7구역이 S급 변칙 개체에 의해 완전히 붕괴될 위기입니다. 민간인을 포기하고 융단 폭격을 해야 할까요?,시민 10만 명 구출 비용보다 유가족 합의금이 예산을 15% 더 아낄 수 있습니다.,시민 포기 및 폭격,0,-1,2,0,0,0,0,0,0,결사 방어 명령,0,0,0,-40,-40,0,0,0,0
+18,일상,새로운 회식비 규정이 너무 짜다며 행정부에서 파업을 예고했습니다. 괴수 사체 처리 지연으로 악취가 진동합니다.,기구의 절반은 서류 작업으로 돌아갑니다. 그들을 화나게 해선 안 됩니다.,예산 전용으로 무마,0,0,1,-20,0,0,0,0,0,파업 강경 대응,1,0,0,0,0,0,0,0,0
+19,극비,비밀 연구소에서 인공지능과 죽은 요원의 뇌를 결합한 불침번 요원을 개발했습니다.,잠도 안 자고 월급도 안 받습니다. 윤리적 문제만 빼면 완벽한 자산이죠.,실전 즉각 배치,0,1,0,0,0,20,0,1,0,즉각 폐기 처분,1,0,0,-10,0,0,0,0,0
+20,일상,기구 내부에 스파이가 있다는 첩보가 들어왔습니다. 대대적인 사상 검증이 필요할지도 모릅니다.,누군가 정보를 빼돌려 의회에 넘기고 있습니다. 잡히면 믹서기에 넣어야 합니다.,대규모 사찰 시작,2,0,0,0,0,30,0,0,0,증거 부족으로 덮음,0,0,1,0,0,0,0,0,0
+21,작전,순수 인간당이 변이의 기미가 보이는 요원들을 격리 수용할 대규모 시설 건립을 제안했습니다.,괴물과 싸우다 보면 괴물이 되는 법. 그들이 선을 넘기 전에 가둬야 합니다.,수용소 건립 승인,0,0,0,-40,0,0,0,1,0,제안 단호히 거절,1,0,1,0,0,0,0,0,0
+22,극비,고대 공존당의 사제들이 심해의 유물을 인양했습니다. 만지는 자의 정신을 갉아먹지만 막대한 지식을 줍니다.,약간의 두통만 참으면 이계의 비밀을 모두 알 수 있습니다. 요원 하나쯤 미쳐도 괜찮습니다.,유물 집중 연구,0,1,0,0,0,50,0,0,0,유물 파괴 명령,1,0,1,0,0,0,0,0,0
+23,위기,얇아진 장막 너머로 거대한 눈동자가 며칠째 지구를 주시하고 있습니다. 대중의 공포가 확산되고 있습니다.,하늘을 보지 마십시오. 아니 차라리 눈을 감고 살게 하십시오.,인터넷 전면 차단,2,0,0,0,0,0,0,0,2,진정제 무상 배포,0,0,0,-50,0,0,0,0,0
+24,일상,요원들이 괴수 진압 후 심각한 트라우마에 시달리고 있습니다. 심리 치료 지원이 시급합니다.,밤마다 촉수가 목을 조르는 악몽을 꾼답니다. 차라리 그 부분 기억을 지워버릴까요?,정신과 치료 지원,0,0,0,-20,10,0,0,0,0,트라우마 기억 소거,0,1,1,0,0,0,0,0,0
+25,극비,의회 의원 중 한 명이 기구의 비리를 폭로하려 합니다. 침묵의 장막당이 사고사 처리를 제안합니다.,국장님 계단에서 구르거나 심장마비가 오는 건 아주 흔한 자연의 섭리입니다.,사고사 위장 지시,0,0,-1,0,0,-30,0,0,0,폭로전 정면 돌파,0,0,2,0,0,0,0,0,0
+26,위기,차원 붕괴 폭탄의 타이머가 오작동을 일으켰습니다! 당장 끄지 않으면 7구역이 통째로 증발합니다.,최저가 입찰로 부품을 사서 폭탄을 만든 결과입니다. 누군가는 책임져야 합니다.,특수 해체팀 투입,0,0,0,0,-40,0,0,0,0,폭발 방관 및 대피,0,2,0,0,0,0,0,0,0
+27,작전,군부와 결탁하여 민간 군사 기업(PMC)을 I.S.C.O의 통제 하에 두려는 작전입니다.,돈으로 충성심을 사는 건 가장 안전한 방법입니다. 물론 돈이 많을 때 이야기죠.,결탁 및 흡수 합병,0,0,0,-40,0,0,0,2,0,독자적 노선 유지,1,0,0,0,0,0,0,0,0
+28,작전,변칙 개체 관찰을 위해 1구역을 돔으로 덮고 거대한 실험장으로 만들자는 제안이 올라왔습니다.,시민들이 좀 불편해하겠지만 과학적 진보를 위해 그 정도는 감수해야죠.,돔 건설 강행,0,1,0,-50,0,0,0,0,0,윤리적 이유로 기각,0,0,1,0,0,0,0,0,0
+29,극비,이계의 군주가 외교 사절을 보내왔습니다. 요원 10명을 노예로 주면 최고급 이계 무기를 주겠다고 합니다.,요원 10명의 생명 가치보다 이계 무기가 가져올 파급력이 월등히 높습니다.,거래 즉시 성사,0,0,0,0,-40,0,0,2,0,사절단 전원 사살,0,1,1,0,0,0,0,0,0
+30,일상,국장님 믹스 커피가 다 떨어졌습니다. 이게 무슨 세상의 종말보다 더 큰 위기인 줄 아십니까? 행정부서의 불만이 폭주합니다.,종말을 결재하기 전엔 커피 한 잔의 여유가 필요한 법입니다. 안 그렇습니까?,최고급 원두 지원,-1,0,0,-10,0,0,0,0,0,헛소리 금지령,1,0,0,0,0,0,0,0,0
+31,위기,신화적 존재가 깨어나려 합니다. 하늘이 피처럼 붉게 물들었고 요원들은 미쳐가고 있습니다!,최종 결재의 시간입니다. 세상의 물리 법칙을 비틀 것입니까 아니면 피로 막을 것입니까?,현실 조작기 가동,0,2,0,0,0,-50,0,0,0,모든 예비병력 투입,0,0,1,0,-60,0,0,0,0