Files
tasteby/frontend/src/lib/cuisine-icons.ts
joungmin 94be5a81e6 feat(frontend): 아이콘 시스템 일관성 + Phosphor 마이그레이션
- Icon.tsx: 크기 고정 + flex center로 정렬 일관성
- cuisine-icons.ts: Tabler → Phosphor 매핑(BowlFood/FishSimple/Pizza 등)
- FoodIcon.tsx 신규: 한식 specific 자체 SVG (찌개/전골/탕)
- frontend/docs/brand-guide.md 신규: 브랜드 아이덴티티 + 디자인 시스템 정책

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-06-16 19:34:58 +09:00

155 lines
6.2 KiB
TypeScript

/**
* Cuisine type → icon mapping.
* Material Symbols icon name for RestaurantList (existing usage).
* Tabler icon component name for genre card chips (home tab).
*
* Works with "대분류|소분류" format (e.g. "한식|국밥/해장국").
*/
// ── Material Symbols (for RestaurantList etc.) ──
const CUISINE_ICON_MAP: Record<string, string> = {
"한식": "rice_bowl",
"일식": "set_meal",
"중식": "skillet",
"양식": "dinner_dining",
"아시아": "restaurant",
"기타": "flatware",
};
const SUB_ICON_RULES: { keyword: string; icon: string }[] = [
{ keyword: "백반/한정식", icon: "rice_bowl" },
{ keyword: "국밥/해장국", icon: "soup_kitchen" },
{ keyword: "찌개/전골/탕", icon: "outdoor_grill" },
{ keyword: "삼겹살/돼지구이", icon: "kebab_dining" },
{ keyword: "소고기/한우구이", icon: "local_fire_department" },
{ keyword: "곱창/막창", icon: "local_fire_department" },
{ keyword: "닭/오리구이", icon: "takeout_dining" },
{ keyword: "족발/보쌈", icon: "stockpot" },
{ keyword: "회/횟집", icon: "phishing" },
{ keyword: "해산물", icon: "set_meal" },
{ keyword: "분식", icon: "egg_alt" },
{ keyword: "면", icon: "ramen_dining" },
{ keyword: "죽/죽집", icon: "soup_kitchen" },
{ keyword: "순대/순대국", icon: "soup_kitchen" },
{ keyword: "장어/민물", icon: "phishing" },
{ keyword: "주점/포차", icon: "local_bar" },
{ keyword: "파인다이닝/코스", icon: "auto_awesome" },
{ keyword: "스시/오마카세", icon: "set_meal" },
{ keyword: "라멘", icon: "ramen_dining" },
{ keyword: "돈카츠", icon: "lunch_dining" },
{ keyword: "텐동/튀김", icon: "tapas" },
{ keyword: "이자카야", icon: "local_bar" },
{ keyword: "야키니쿠", icon: "kebab_dining" },
{ keyword: "카레", icon: "skillet" },
{ keyword: "소바/우동", icon: "ramen_dining" },
{ keyword: "중화요리", icon: "skillet" },
{ keyword: "마라/훠궈", icon: "outdoor_grill" },
{ keyword: "딤섬/만두", icon: "egg_alt" },
{ keyword: "양꼬치", icon: "kebab_dining" },
{ keyword: "파스타/이탈리안", icon: "dinner_dining" },
{ keyword: "스테이크", icon: "restaurant" },
{ keyword: "햄버거", icon: "lunch_dining" },
{ keyword: "피자", icon: "local_pizza" },
{ keyword: "프렌치", icon: "auto_awesome" },
{ keyword: "바베큐", icon: "outdoor_grill" },
{ keyword: "브런치", icon: "brunch_dining" },
{ keyword: "비건/샐러드", icon: "eco" },
{ keyword: "베트남", icon: "ramen_dining" },
{ keyword: "태국", icon: "restaurant" },
{ keyword: "인도/중동", icon: "skillet" },
{ keyword: "동남아기타", icon: "restaurant" },
{ keyword: "치킨", icon: "takeout_dining" },
{ keyword: "카페/디저트", icon: "coffee" },
{ keyword: "베이커리", icon: "bakery_dining" },
{ keyword: "뷔페", icon: "brunch_dining" },
{ keyword: "퓨전", icon: "auto_awesome" },
];
const DEFAULT_ICON = "flatware";
export function getCuisineIcon(cuisineType: string | null | undefined): string {
if (!cuisineType) return DEFAULT_ICON;
for (const rule of SUB_ICON_RULES) {
if (cuisineType.includes(rule.keyword)) return rule.icon;
}
const main = cuisineType.split("|")[0];
return CUISINE_ICON_MAP[main] || DEFAULT_ICON;
}
// ── Phosphor Icons (for genre card chips) ──
// Returns Phosphor icon component name (PascalCase)
const PHOSPHOR_CUISINE_MAP: Record<string, string> = {
"한식": "BowlFood",
"일식": "FishSimple",
"중식": "Fire",
"양식": "Pizza",
"아시아": "BowlSteam",
"기타": "Cookie",
};
const PHOSPHOR_SUB_RULES: { keyword: string; icon: string }[] = [
// 한식
{ keyword: "백반/한정식", icon: "BowlFood" },
{ keyword: "국밥/해장국", icon: "BowlSteam" },
{ keyword: "찌개/전골/탕", icon: "CookingPot" },
{ keyword: "삼겹살/돼지구이", icon: "food:pig" },
{ keyword: "소고기/한우구이", icon: "Cow" },
{ keyword: "곱창/막창", icon: "Flame" },
{ keyword: "닭/오리구이", icon: "Bird" },
{ keyword: "족발/보쌈", icon: "food:pig" },
{ keyword: "회/횟집", icon: "Fish" },
{ keyword: "해산물", icon: "Shrimp" },
{ keyword: "분식", icon: "food:tteok" },
{ keyword: "면", icon: "food:noodle" },
{ keyword: "죽/죽집", icon: "BowlFood" },
{ keyword: "순대/순대국", icon: "BowlSteam" },
{ keyword: "장어/민물", icon: "FishSimple" },
{ keyword: "주점/포차", icon: "BeerStein" },
{ keyword: "파인다이닝/코스", icon: "Champagne" },
// 일식
{ keyword: "스시/오마카세", icon: "Fish" },
{ keyword: "라멘", icon: "food:noodle" },
{ keyword: "돈카츠", icon: "food:pig" },
{ keyword: "텐동/튀김", icon: "food:tempura" },
{ keyword: "이자카야", icon: "Martini" },
{ keyword: "야키니쿠", icon: "Flame" },
{ keyword: "카레", icon: "BowlFood" },
{ keyword: "소바/우동", icon: "food:noodle" },
// 중식
{ keyword: "중화요리", icon: "Fire" },
{ keyword: "마라/훠궈", icon: "Pepper" },
{ keyword: "딤섬/만두", icon: "Egg" },
{ keyword: "양꼬치", icon: "Flame" },
// 양식
{ keyword: "파스타/이탈리안", icon: "ForkKnife" },
{ keyword: "스테이크", icon: "Knife" },
{ keyword: "햄버거", icon: "Hamburger" },
{ keyword: "피자", icon: "Pizza" },
{ keyword: "프렌치", icon: "Champagne" },
{ keyword: "바베큐", icon: "Flame" },
{ keyword: "브런치", icon: "Coffee" },
{ keyword: "비건/샐러드", icon: "Leaf" },
// 아시아
{ keyword: "베트남", icon: "food:noodle" },
{ keyword: "태국", icon: "Pepper" },
{ keyword: "인도/중동", icon: "BowlFood" },
{ keyword: "동남아기타", icon: "BowlFood" },
// 기타
{ keyword: "치킨", icon: "Egg" },
{ keyword: "카페/디저트", icon: "Coffee" },
{ keyword: "베이커리", icon: "Bread" },
{ keyword: "뷔페", icon: "ForkKnife" },
{ keyword: "퓨전", icon: "Cookie" },
];
export function getPhosphorCuisineIcon(cuisineType: string | null | undefined): string {
if (!cuisineType) return "ForkKnife";
for (const rule of PHOSPHOR_SUB_RULES) {
if (cuisineType.includes(rule.keyword)) return rule.icon;
}
const main = cuisineType.split("|")[0];
return PHOSPHOR_CUISINE_MAP[main] || "ForkKnife";
}