14c4b82155
"한 장씩 봐 주세요" 같은 요청문이 읽고 넘어가는 설명문과 같은 무게로 놓여 있어 지나치기 쉬웠다. 역할별 토큰과 클래스를 두고 화면에 적용한다. .ui-ask 요청문. 사람이 무엇을 해야 하는지 말하는 문장 (17px·600·인디고) .ui-ask-block 문단으로 서는 요청문. 왼쪽 규칙선으로 설명과 구분한다 .ui-body 설명 본문 (16px·slate-600) .ui-note 보조·출처 (14px·slate-400) 크기는 기존 화면을 세어 맞췄다. text-base 167회·text-sm 58회가 지배적이라 body 를 16px, note 를 14px 로 두면 치환해도 크기가 변하지 않고 역할과 색만 정리된다. 한글 줄바꿈: word-break keep-all 로 어절을 지키고, 긴 URL·영문 토큰만 overflow-wrap anywhere 로 자른다. text-wrap 으로 마지막 줄에 한 어절만 남는 것을 줄이고, 62ch 로 줄 길이를 묶는다. 제목에도 keep-all 과 balance 를 건다. 다크 섹션은 .on-dark 로 값을 뒤집고, 그 안의 흰 카드는 .on-light 로 되돌린다. 이걸 두지 않으면 흰 글씨가 흰 배경에 얹혀 보이지 않는다(디자인 시스템 기록된 실수). 사진 확인 화면의 썸네일 줄이 누를 수 있는 것으로 안 읽혀 같이 고친다. 72px 카드, 호버 반응, 순번 배지, 현재 위치 표시, 안 정한 것 아래 띠, 범례, 이전·다음 이동을 둔다. 상태가 안 보이는 것이 크기보다 큰 문제였다. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
61 lines
1.4 KiB
TypeScript
61 lines
1.4 KiB
TypeScript
import type { ReactNode } from 'react';
|
|
|
|
interface SectionWrapperProps {
|
|
id: string;
|
|
title: string;
|
|
subtitle?: string;
|
|
children: ReactNode;
|
|
dark?: boolean;
|
|
className?: string;
|
|
}
|
|
|
|
export function SectionWrapper({
|
|
id,
|
|
title,
|
|
subtitle,
|
|
children,
|
|
dark = false,
|
|
className = '',
|
|
}: SectionWrapperProps) {
|
|
return (
|
|
<section
|
|
id={id}
|
|
className={`
|
|
${dark
|
|
? 'on-dark bg-[#0A1128] text-white relative overflow-hidden'
|
|
: 'bg-white'
|
|
}
|
|
py-16 md:py-20 px-6
|
|
${className}
|
|
`}
|
|
>
|
|
{dark && (
|
|
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,rgba(108,92,231,0.15),transparent_60%)]" />
|
|
)}
|
|
<div className="relative max-w-7xl mx-auto">
|
|
<div className="mb-10">
|
|
<h2
|
|
className={`
|
|
font-serif font-bold text-3xl md:text-4xl mb-3
|
|
${dark
|
|
? 'bg-gradient-to-r from-purple-300 to-blue-300 bg-clip-text text-transparent'
|
|
: 'text-gradient'
|
|
}
|
|
`}
|
|
>
|
|
{title}
|
|
</h2>
|
|
{subtitle && (
|
|
<p
|
|
className={`text-lg ${dark ? 'text-purple-200' : 'text-slate-600'}`}
|
|
>
|
|
{subtitle}
|
|
</p>
|
|
)}
|
|
</div>
|
|
{children}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|