Saffron 디자인 시스템 적용: 브랜드 컬러 + Pretendard 폰트 + 크림 배경

- CSS 변수 기반 brand-50~950 컬러 팔레트 추가 (Tailwind @theme inline)
- Pretendard Variable 폰트 로드 및 기본 폰트로 설정
- 라이트모드 배경 #FFFAF5 크림색 적용 (다크모드 기본 유지)
- 전체 컴포넌트 orange-* → brand-* 마이그레이션
- 식당 리스트 채널명에 YouTube SVG 아이콘 추가
- 디자인 컨셉 문서 추가 (docs/design-concepts.md)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
joungmin
2026-03-11 21:15:45 +09:00
parent ec8330a978
commit 50018c17fa
12 changed files with 177 additions and 60 deletions

View File

@@ -808,7 +808,7 @@ function VideosPanel({ isAdmin }: { isAdmin: boolean }) {
<button
onClick={() => startBulkStream("transcript")}
disabled={bulkTranscripting || bulkExtracting}
className="bg-orange-600 text-white px-4 py-2 rounded text-sm hover:bg-orange-700 disabled:opacity-50"
className="bg-brand-600 text-white px-4 py-2 rounded text-sm hover:bg-brand-700 disabled:opacity-50"
>
{bulkTranscripting ? "자막 수집 중..." : "벌크 자막 수집"}
</button>
@@ -836,7 +836,7 @@ function VideosPanel({ isAdmin }: { isAdmin: boolean }) {
<button
onClick={startRemapFoods}
disabled={remappingFoods || bulkExtracting || bulkTranscripting || rebuildingVectors || remappingCuisine}
className="bg-orange-600 text-white px-4 py-2 rounded text-sm hover:bg-orange-700 disabled:opacity-50"
className="bg-brand-600 text-white px-4 py-2 rounded text-sm hover:bg-brand-700 disabled:opacity-50"
>
{remappingFoods ? "메뉴태그 재생성 중..." : "메뉴태그 재생성"}
</button>
@@ -849,7 +849,7 @@ function VideosPanel({ isAdmin }: { isAdmin: boolean }) {
<button
onClick={() => startBulkStream("transcript", Array.from(selected))}
disabled={bulkTranscripting || bulkExtracting}
className="bg-orange-500 text-white px-4 py-2 rounded text-sm hover:bg-orange-600 disabled:opacity-50"
className="bg-brand-500 text-white px-4 py-2 rounded text-sm hover:bg-brand-600 disabled:opacity-50"
>
({selected.size})
</button>
@@ -1073,7 +1073,7 @@ function VideosPanel({ isAdmin }: { isAdmin: boolean }) {
</h4>
<div className="w-full bg-gray-200 rounded-full h-2 mb-2">
<div
className="bg-orange-500 h-2 rounded-full transition-all"
className="bg-brand-500 h-2 rounded-full transition-all"
style={{ width: `${foodsProgress.total ? (foodsProgress.current / foodsProgress.total) * 100 : 0}%` }}
/>
</div>
@@ -1515,7 +1515,7 @@ function VideosPanel({ isAdmin }: { isAdmin: boolean }) {
{r.foods_mentioned.length > 0 && (
<div className="flex flex-wrap gap-1 mt-2">
{r.foods_mentioned.map((f, j) => (
<span key={j} className="px-1.5 py-0.5 bg-orange-50 text-orange-700 rounded text-xs">{f}</span>
<span key={j} className="px-1.5 py-0.5 bg-brand-50 text-brand-700 rounded text-xs">{f}</span>
))}
</div>
)}
@@ -1769,7 +1769,7 @@ function RestaurantsPanel({ isAdmin }: { isAdmin: boolean }) {
finally { setBulkTabling(false); load(); }
}}
disabled={bulkTabling}
className="px-3 py-1.5 text-xs bg-orange-500 text-white rounded hover:bg-orange-600 disabled:opacity-50"
className="px-3 py-1.5 text-xs bg-brand-500 text-white rounded hover:bg-brand-600 disabled:opacity-50"
>
{bulkTabling ? `테이블링 검색 중 (${bulkTablingProgress.current}/${bulkTablingProgress.total})` : "벌크 테이블링 연결"}
</button>
@@ -1825,13 +1825,13 @@ function RestaurantsPanel({ isAdmin }: { isAdmin: boolean }) {
</span>
</div>
{bulkTabling && bulkTablingProgress.name && (
<div className="bg-orange-50 rounded p-3 mb-4 text-sm">
<div className="bg-brand-50 rounded p-3 mb-4 text-sm">
<div className="flex justify-between mb-1">
<span>{bulkTablingProgress.current}/{bulkTablingProgress.total} - {bulkTablingProgress.name}</span>
<span className="text-xs text-gray-500">: {bulkTablingProgress.linked} / : {bulkTablingProgress.notFound}</span>
</div>
<div className="w-full bg-orange-200 rounded-full h-1.5">
<div className="bg-orange-500 h-1.5 rounded-full transition-all" style={{ width: `${(bulkTablingProgress.current / bulkTablingProgress.total) * 100}%` }} />
<div className="w-full bg-brand-200 rounded-full h-1.5">
<div className="bg-brand-500 h-1.5 rounded-full transition-all" style={{ width: `${(bulkTablingProgress.current / bulkTablingProgress.total) * 100}%` }} />
</div>
</div>
)}
@@ -1987,7 +1987,7 @@ function RestaurantsPanel({ isAdmin }: { isAdmin: boolean }) {
finally { setTablingSearching(false); }
}}
disabled={tablingSearching}
className="px-2 py-0.5 text-[11px] bg-orange-500 text-white rounded hover:bg-orange-600 disabled:opacity-50"
className="px-2 py-0.5 text-[11px] bg-brand-500 text-white rounded hover:bg-brand-600 disabled:opacity-50"
>
{tablingSearching ? "검색 중..." : "테이블링 검색"}
</button>