- 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>
155 lines
6.2 KiB
TypeScript
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";
|
|
}
|