Merge pull request #11 from TrivialOkay/cyh

캐릭터 짤림 및 말풍선 불일치 수정

Author: cyh2491

app/byeoril-ui.tsx

@@ -27,6 +27,21 @@ export function Mascot({ className = "", resting = false, waiting = false }: { c
   return <img className={`mascot ${className}`.trim()} src={source} alt="" aria-hidden="true" />;
 }
 
+export function SpeechBubble({ children, className = "", tail = "left" }: { children: ReactNode; className?: string; tail?: "left" | "right" }) {
+  return (
+    <div className={`speech-bubble ${className}`.trim()}>
+      <svg className="speech-bubble-outline" viewBox="0 0 116 82" preserveAspectRatio="none" aria-hidden="true">
+        <path
+          d="M58 1 C91 1 115 11 115 31 C115 46 94 57 62 60 L31 78 L35 58 C14 54 1 44 1 31 C1 11 25 1 58 1 Z"
+          transform={tail === "right" ? "translate(116 0) scale(-1 1)" : undefined}
+          vectorEffect="non-scaling-stroke"
+        />
+      </svg>
+      <div className="speech-bubble-copy">{children}</div>
+    </div>
+  );
+}
+
 const characterArtSources: Record<CharacterArt, string> = {
   umbrella: "/mascot-poses/mascot-umbrella.png",
   coffee: "/mascot-poses/mascot-coffee.png",
@@ -126,7 +141,7 @@ export function FortuneScene({ kind, speech, card = false, characterArt }: { kin
       <span className="scene-spark spark-a"/><span className="scene-spark spark-b"/><span className="scene-spark spark-c"/>
       <FortuneObject kind={kind} characterArt={characterArt} />
       {!characterArt && kind !== "mascot" && <Mascot className="scene-character" resting={kind === "book" || kind === "laundry"} waiting={kind === "elevator"} />}
-      <span className="scene-speech">{speech.split("\n").map((line, index) => <span key={`${line}-${index}`}>{line}</span>)}</span>
+      <SpeechBubble className="scene-speech">{speech.split("\n").map((line, index) => <span key={`${line}-${index}`}>{line}</span>)}</SpeechBubble>
     </div>
   );
 }

app/globals.css

@@ -21,7 +21,7 @@ import {
   type Tab,
   type View,
 } from "./byeoril-data";
-import { BottomNav, FortuneObject, FortuneScene, Icon, Mascot, OutcomeFace, Stars, StatusBar } from "./byeoril-ui";
+import { BottomNav, FortuneObject, FortuneScene, Icon, Mascot, OutcomeFace, SpeechBubble, Stars, StatusBar } from "./byeoril-ui";
 
 const FortuneBall = lazy(() => import("./fortune-ball").then((module) => ({ default: module.FortuneBall })));
 
@@ -393,7 +393,7 @@ function GuideScreen({ onBack }: { onBack: () => void }) {
 
 function AboutScreen({ onGuide, onExamples, onReset, confirming }: { onGuide: () => void; onExamples: () => void; onReset: () => void; confirming: boolean }) {
   return (
-    <><Header title="별일 관측국은?"/><section className="screen-content about-screen"><div className="brand-lockup"><strong>별일</strong><i>✦</i><span>관측국</span></div><p className="about-lead">아무 일도 아닌 일을<br/>쓸데없이 관측하고, 보도하고, 시상합니다.</p><h2>이 앱은?</h2><p>오늘의 하찮은 예보가 실제로 관측되면 속보 카드가 만들어지고, 공식 보관소에 저장돼요. 아주 가끔은 상도 줍니다.</p><h2>관측 절차</h2><ol><li><b>1</b>미세한 우주 개입 예보 확인</li><li><b>2</b>실제로 일어났는지 관측</li><li><b>3</b>별일 속보 카드 발행</li><li><b>4</b>하찮은 수상작으로 보관</li></ol><div className="about-actions"><button onClick={onGuide}>우주 개입 농도 안내<Icon name="chevron-right"/></button><button onClick={onExamples}>하찮은 수상작 보기<Icon name="chevron-right"/></button><button className={confirming ? "danger" : ""} onClick={onReset}>{confirming ? "한 번 더 누르면 기록이 삭제돼요" : "내 기록 초기화"}</button></div><div className="about-character"><span>우주가 도운 건 3%.<br/>기록한 건 우리.</span><Mascot/></div></section></>
+    <><Header title="별일 관측국은?"/><section className="screen-content about-screen"><div className="brand-lockup"><strong>별일</strong><i>✦</i><span>관측국</span></div><p className="about-lead">아무 일도 아닌 일을<br/>쓸데없이 관측하고, 보도하고, 시상합니다.</p><h2>이 앱은?</h2><p>오늘의 하찮은 예보가 실제로 관측되면 속보 카드가 만들어지고, 공식 보관소에 저장돼요. 아주 가끔은 상도 줍니다.</p><h2>관측 절차</h2><ol><li><b>1</b>미세한 우주 개입 예보 확인</li><li><b>2</b>실제로 일어났는지 관측</li><li><b>3</b>별일 속보 카드 발행</li><li><b>4</b>하찮은 수상작으로 보관</li></ol><div className="about-actions"><button onClick={onGuide}>우주 개입 농도 안내<Icon name="chevron-right"/></button><button onClick={onExamples}>하찮은 수상작 보기<Icon name="chevron-right"/></button><button className={confirming ? "danger" : ""} onClick={onReset}>{confirming ? "한 번 더 누르면 기록이 삭제돼요" : "내 기록 초기화"}</button></div><div className="about-character"><SpeechBubble className="about-speech" tail="right">우주가 도운 건 3%.<br/>기록한 건 우리.</SpeechBubble><Mascot/></div></section></>
   );
 }