M9: 게임 26종 30초 요약 카드·[?] 지금 할 수 있는 것 내용

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

apps/web/src/games/gostop/quick.tsx

@@ -0,0 +1,87 @@
+/** 고스톱 30초 규칙 요약 (docs/07 §5). */
+import { HwatuCard, type HwatuInfo } from '../../components/cards/HwatuCard';
+import type { QuickCard } from '../types';
+
+const card = (id: number, month: number, kind: HwatuInfo['kind'], name: string, tti?: HwatuInfo['tti']): HwatuInfo => ({ id, month, kind, name, tti });
+
+const row = { display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6 } as const;
+const label = { fontWeight: 900, fontSize: '1.4rem' } as const;
+
+function Match() {
+  return (
+    <div style={row} aria-hidden>
+      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2 }}>
+        <HwatuCard card={card(8, 3, 'gwang', '3월 광')} size="md" highlight />
+        <small>내 손패</small>
+      </div>
+      <span style={label}>→</span>
+      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2 }}>
+        <HwatuCard card={card(10, 3, 'pi', '3월 피')} size="md" />
+        <small>바닥</small>
+      </div>
+      <span style={label}>=</span>
+      <div style={{ display: 'flex' }}>
+        <HwatuCard card={card(8, 3, 'gwang', '3월 광')} size="sm" />
+        <HwatuCard card={card(10, 3, 'pi', '3월 피')} size="sm" style={{ marginLeft: -16 }} />
+      </div>
+    </div>
+  );
+}
+
+function Jokbo() {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }} aria-hidden>
+      <div style={row}>
+        <HwatuCard card={card(1, 1, 'tti', '1월 홍단', 'hong')} size="sm" />
+        <HwatuCard card={card(5, 2, 'tti', '2월 홍단', 'hong')} size="sm" />
+        <HwatuCard card={card(9, 3, 'tti', '3월 홍단', 'hong')} size="sm" />
+        <span style={label}>홍단 3점</span>
+      </div>
+      <div style={row}>
+        <HwatuCard card={card(0, 1, 'gwang', '1월 광')} size="sm" />
+        <HwatuCard card={card(8, 3, 'gwang', '3월 광')} size="sm" />
+        <HwatuCard card={card(28, 8, 'gwang', '8월 광')} size="sm" />
+        <span style={label}>삼광 3점</span>
+      </div>
+    </div>
+  );
+}
+
+function GoStop() {
+  const btn = (bg: string, text: string, sub: string) => (
+    <div style={{ background: bg, color: '#fff', borderRadius: 14, width: 104, height: 84, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fontWeight: 900, fontSize: '1.6rem', lineHeight: 1.1 }}>
+      {text}
+      <small style={{ fontSize: '.8rem', fontWeight: 600 }}>{sub}</small>
+    </div>
+  );
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8 }} aria-hidden>
+      <strong style={{ fontSize: '1.2rem' }}>7점 났어요!</strong>
+      <div style={row}>
+        {btn('#dc2626', '고', '계속해요')}
+        {btn('#2563eb', '스톱', '받고 끝내요')}
+      </div>
+    </div>
+  );
+}
+
+export const quickStart: QuickCard[] = [
+  {
+    pic: <Match />,
+    alt: '손패의 3월 광을 내서 바닥의 3월 피와 짝지어 두 장을 가져와요',
+    title: '같은 월끼리 먹어요',
+    text: '내 차례에 손패 1장을 내고 더미에서 1장을 뒤집어요. 바닥에 같은 월(숫자) 패가 있으면 함께 가져와요.',
+  },
+  {
+    pic: <Jokbo />,
+    alt: '홍단 띠 3장은 3점, 광 3장은 3점이라는 그림이에요',
+    title: '모은 패로 점수를 내요',
+    text: '광 3장, 홍단·청단·초단 띠 3장, 피 10장(쌍피는 2장 값)처럼 족보를 모으면 점수가 나요. 게임 중 [족보표]에서 볼 수 있어요.',
+  },
+  {
+    pic: <GoStop />,
+    alt: '7점이 나서 빨간 고 버튼과 파란 스톱 버튼이 보여요',
+    title: '고? 스톱?',
+    text: '기준 점수(기본 맞고 7점, 고스톱 3점)가 나면 스톱으로 끝내고 이기거나, 고로 더 키워요. 고 뒤에 남이 먼저 나면 손해예요.',
+  },
+];