From 52e664622313b4559daa7fba3f59ff3f525d5d91 Mon Sep 17 00:00:00 2001
From: younha00 <ayeon0@office.skhu.ac.kr>
Date: Mon, 5 Oct 2026 15:30:37 +0900
Subject: [PATCH] feat: put each sentence of short descriptions on its own line

Add a Sentences component and use it for project descriptions and scope,
case summaries, decision rows, diagram captions, and activity details.
Long case prose keeps its paragraph layout.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 src/components/Activities.astro    |  3 ++-
 src/components/CaseStudy.astro     |  3 ++-
 src/components/DecisionBlock.astro |  3 ++-
 src/components/DiagramFigure.astro |  5 +++--
 src/components/ProjectCard.astro   |  3 ++-
 src/components/ProjectHeader.astro |  5 +++--
 src/components/Sentences.astro     |  6 ++++++
 src/styles/global.css              |  3 +++
 tests/portfolio.spec.mjs           | 11 +++++++++++
 9 files changed, 34 insertions(+), 8 deletions(-)
 create mode 100644 src/components/Sentences.astro

diff --git a/src/components/Activities.astro b/src/components/Activities.astro
index f73fd49..61bfaeb 100644
--- a/src/components/Activities.astro
+++ b/src/components/Activities.astro
@@ -1,7 +1,8 @@
 ---
+import Sentences from './Sentences.astro';
 import { activityGroups } from '../data/activities';
 ---
 <section id="activities" class="activities shell">
 <div class="section-heading"><h2>그 밖의 활동</h2></div>
-{activityGroups.map(group=><div class="activity-group"><h3 class="eyebrow">{group.label}</h3><ul>{group.items.map(item=><li class:list={[{ 'is-emphasis': item.emphasis }]}><span class="mono activity-period">{item.period}</span><div><strong>{item.url ? <a href={item.url}>{item.title} <span aria-hidden="true">↗</span></a> : item.title}</strong>{item.meta && <span class="activity-meta">{item.meta}</span>}{item.detail && <p>{item.detail}</p>}</div></li>)}</ul></div>)}
+{activityGroups.map(group=><div class="activity-group"><h3 class="eyebrow">{group.label}</h3><ul>{group.items.map(item=><li class:list={[{ 'is-emphasis': item.emphasis }]}><span class="mono activity-period">{item.period}</span><div><strong>{item.url ? <a href={item.url}>{item.title} <span aria-hidden="true">↗</span></a> : item.title}</strong>{item.meta && <span class="activity-meta">{item.meta}</span>}{item.detail && <p><Sentences text={item.detail}/></p>}</div></li>)}</ul></div>)}
 </section>
diff --git a/src/components/CaseStudy.astro b/src/components/CaseStudy.astro
index c86b73a..4f9bec1 100644
--- a/src/components/CaseStudy.astro
+++ b/src/components/CaseStudy.astro
@@ -1,4 +1,5 @@
 ---
+import Sentences from './Sentences.astro';
 import {render, type CollectionEntry} from 'astro:content';
 import DiagramFigure from './DiagramFigure.astro';
 import DecisionBlock from './DecisionBlock.astro';
@@ -8,7 +9,7 @@ const {Content}=await render(entry);
 const d=entry.data;
 ---
 <article class="case-study" id={entry.id}>
-<header class="case-header"><span class="eyebrow">CASE 0{d.order}</span><h2>{d.title}</h2><p class="case-summary">{d.summary}</p></header>
+<header class="case-header"><span class="eyebrow">CASE 0{d.order}</span><h2>{d.title}</h2><p class="case-summary"><Sentences text={d.summary}/></p></header>
 <DecisionBlock role={d.role} decision={d.decision} tradeoff={d.tradeoff}/>
 <DiagramFigure diagram={d.diagram} caption={d.diagramCaption} title={d.title} prefix={`${print?'print':'detail'}-${entry.id}`} print={print}/>
 <div class="prose"><Content /></div>
diff --git a/src/components/DecisionBlock.astro b/src/components/DecisionBlock.astro
index e177659..9e0185c 100644
--- a/src/components/DecisionBlock.astro
+++ b/src/components/DecisionBlock.astro
@@ -1,5 +1,6 @@
 ---
+import Sentences from './Sentences.astro';
 type Props = {readonly role:string;readonly decision:string;readonly tradeoff:string};
 const {role,decision,tradeoff}=Astro.props;
 ---
-<dl class="decision-block"><div><dt>내가 맡은 범위</dt><dd>{role}</dd></div><div><dt>선택과 이유</dt><dd>{decision}</dd></div><div><dt>트레이드오프</dt><dd>{tradeoff}</dd></div></dl>
+<dl class="decision-block"><div><dt>내가 맡은 범위</dt><dd><Sentences text={role}/></dd></div><div><dt>선택과 이유</dt><dd><Sentences text={decision}/></dd></div><div><dt>트레이드오프</dt><dd><Sentences text={tradeoff}/></dd></div></dl>
diff --git a/src/components/DiagramFigure.astro b/src/components/DiagramFigure.astro
index 9b78627..1a5300e 100644
--- a/src/components/DiagramFigure.astro
+++ b/src/components/DiagramFigure.astro
@@ -1,4 +1,5 @@
 ---
+import Sentences from './Sentences.astro';
 import {pathTo} from '../lib/paths';
 type Props = {readonly diagram: string; readonly caption: string; readonly title: string; readonly prefix: string; readonly print?: boolean};
 const {diagram,caption,title,prefix,print=false}=Astro.props;
@@ -8,9 +9,9 @@ const id=`${prefix}-${diagram}`;
 <figure class="diagram-figure">
 <div class="figure-toolbar"><span class="eyebrow">SYSTEM FLOW</span>{!print && <a class="diagram-open" href={source} data-dialog={id} aria-haspopup="dialog">크게 보기 <span aria-hidden="true">↗</span></a>}</div>
 <div class="diagram-frame"><img src={source} alt={`${title} 흐름도. ${caption}`} loading="eager" /></div>
-<figcaption>{caption}</figcaption>
+<figcaption><Sentences text={caption}/></figcaption>
 </figure>
-{!print && <dialog id={id} aria-label={`${title} 다이어그램 확대`} class="diagram-dialog"><div class="dialog-top"><strong>{title}</strong><button type="button" class="dialog-close" autofocus>닫기 ×</button></div><div class="dialog-body"><img src={source} alt={caption} /></div><p>{caption}</p></dialog>}
+{!print && <dialog id={id} aria-label={`${title} 다이어그램 확대`} class="diagram-dialog"><div class="dialog-top"><strong>{title}</strong><button type="button" class="dialog-close" autofocus>닫기 ×</button></div><div class="dialog-body"><img src={source} alt={caption} /></div><p><Sentences text={caption}/></p></dialog>}
 <script>
 for (const link of document.querySelectorAll<HTMLAnchorElement>('.diagram-open')) {
  const id=link.dataset['dialog'];
diff --git a/src/components/ProjectCard.astro b/src/components/ProjectCard.astro
index 91709e2..ad9afb8 100644
--- a/src/components/ProjectCard.astro
+++ b/src/components/ProjectCard.astro
@@ -1,4 +1,5 @@
 ---
+import Sentences from './Sentences.astro';
 import type { CollectionEntry } from 'astro:content';
 import { editionPath, type Edition } from '../lib/editions';
 type Props = {readonly project: CollectionEntry<'projects'>; readonly number: string; readonly edition: Edition};
@@ -8,6 +9,6 @@ const p=project.data;
 <a class="project-card" href={editionPath(edition, `projects/${project.id}/`)}>
 <div class="card-label"><span class="eyebrow">{p.category}</span><span class="mono">/{number}</span></div>
 <div class="project-name">{p.name}<span class="project-arrow" aria-hidden="true">↗</span></div>
-<h3>{p.tagline}</h3><p>{p.description}</p>
+<h3>{p.tagline}</h3><p><Sentences text={p.description}/></p>
 <div class="card-bottom"><span>{p.role}<small>{p.focus}</small></span><span class="case-link">사례 보기 <span aria-hidden="true">→</span></span></div>
 </a>
diff --git a/src/components/ProjectHeader.astro b/src/components/ProjectHeader.astro
index c9c6e62..cd9c2a0 100644
--- a/src/components/ProjectHeader.astro
+++ b/src/components/ProjectHeader.astro
@@ -1,4 +1,5 @@
 ---
+import Sentences from './Sentences.astro';
 import type { CollectionEntry } from 'astro:content';
 type Props = {readonly project: CollectionEntry<'projects'>; readonly number: string};
 const {project, number} = Astro.props;
@@ -7,8 +8,8 @@ const p=project.data;
 <header class="project-header">
 <div class="eyebrow">PROJECT {number} / {p.category}</div>
 <h1>{p.name}<span>{p.tagline}</span></h1>
-<p class="project-description">{p.description}</p>
+<p class="project-description"><Sentences text={p.description}/></p>
 <dl class="project-meta"><div><dt>ROLE</dt><dd>{p.role}</dd></div><div><dt>PERIOD</dt><dd>{p.period}</dd></div><div><dt>STACK</dt><dd>{p.stack.join(' · ')}</dd></div></dl>
-<p class="project-scope">{p.scope} 사례의 테스트 건수와 측정값은 당시 PR·개발 기록 기준입니다.</p>
+<p class="project-scope"><Sentences text={`${p.scope} 사례의 테스트 건수와 측정값은 당시 PR·개발 기록 기준입니다.`}/></p>
 {p.links.length>0 && <p class="project-links">{p.links.map(link=><a class="text-link" href={link.url}>{link.label} <span aria-hidden="true">↗</span></a>)}</p>}
 </header>
diff --git a/src/components/Sentences.astro b/src/components/Sentences.astro
new file mode 100644
index 0000000..9e24f9c
--- /dev/null
+++ b/src/components/Sentences.astro
@@ -0,0 +1,6 @@
+---
+// Renders each sentence of a short text field on its own line.
+type Props = { readonly text: string };
+const sentences = Astro.props.text.split(/(?<=[.!?])\s+(?=\S)/);
+---
+{sentences.map(sentence => <span class="sentence">{sentence}</span>)}
diff --git a/src/styles/global.css b/src/styles/global.css
index da1507d..ebce6a7 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -197,6 +197,9 @@ img {
 .projects-section {
 	padding-top: var(--space-8);
 }
+.sentence {
+	display: block;
+}
 .section-heading {
 	display: flex;
 	align-items: center;
diff --git a/tests/portfolio.spec.mjs b/tests/portfolio.spec.mjs
index bb69b50..54d21a7 100644
--- a/tests/portfolio.spec.mjs
+++ b/tests/portfolio.spec.mjs
@@ -155,3 +155,14 @@ test('activities section lists other work on both editions and in print', async
     await expect(page.locator('#activities .is-emphasis')).toContainText('파트장');
   }
 });
+
+test('multi-sentence descriptions break into one line per sentence', async ({ page }) => {
+  await page.goto('./');
+  const kokkok = page.locator('#activities li', { hasText: 'KOKKOK' }).locator('p .sentence');
+  await expect(kokkok).toHaveCount(2);
+  await expect(kokkok.first()).toHaveText('친구들과 예약 일정을 공유하고 준비 상태부터 성공 여부까지 같이 확인하는 앱.');
+  const tops = await kokkok.evaluateAll(spans => spans.map(span => span.getBoundingClientRect().top));
+  expect(tops[1]).toBeGreaterThan(tops[0]);
+  await page.goto('projects/gguk/');
+  await expect(page.locator('.project-scope .sentence').last()).toHaveText('사례의 테스트 건수와 측정값은 당시 PR·개발 기록 기준입니다.');
+});