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
parent 1d767bee37
commit 94be5a81e6
4 changed files with 485 additions and 51 deletions
--- a/frontend/docs/brand-guide.md
+++ b/frontend/docs/brand-guide.md
@@ -0,0 +1,341 @@
+# Tasteby Brand & Design Guide
+
+> Tasteby의 브랜드 아이덴티티, 디자인 시스템, 아이콘 정책을 정의하는 가이드 문서.
+> 최종 수정: 2026-03-14
+
+---
+
+## 1. 브랜드 개요
+
+### 1.1 서비스 정의
+**Tasteby**는 유튜브 맛집 영상에서 레스토랑 정보를 추출하여 지도 위에 큐레이션하는 서비스.
+"유튜버의 입맛으로(Taste by)" 찾는 맛집이라는 의미를 담고 있다.
+
+### 1.2 브랜드 키워드
+- **미식 큐레이션** — 단순 검색이 아닌, 유튜버가 직접 방문한 맛집을 큐레이팅
+- **신뢰** — 실제 영상 기반, 출처가 명확한 정보
+- **따뜻함** — 음식과 사람을 연결하는 따뜻한 경험
+- **프리미엄 캐주얼** — 고급스럽지만 접근하기 쉬운 톤
+
+### 1.3 브랜드 보이스
+| Do | Don't |
+|----|-------|
+| 친근하고 자연스러운 한국어 | 과도한 존댓말·마케팅 투 |
+| 간결하고 핵심적인 정보 전달 | 불필요한 수식어 남발 |
+| 음식에 대한 애정이 묻어나는 톤 | 딱딱한 기술 용어 노출 |
+
+---
+
+## 2. 로고
+
+### 2.1 로고 구성
+Tasteby 로고는 **워드마크(Wordmark)** 형태로, 글자 "e" 안에 **위치 핀 마커**와 **스마일 곡선**이 결합되어 있다.
+
+- 핀 마커 = 지도 기반 서비스
+- 스마일 = 맛있는 음식의 만족감
+- 색상: 본문 다크 그레이(`#3C3C3C`) + 핀/스마일 레드(`#E8534A`)
+
+### 2.2 로고 파일
+| 파일 | 용도 |
+|------|------|
+| `logo.png` | 원본 (고해상도) |
+| `logo-200h.png` | 히어로/소개 영역 |
+| `logo-120h.png` | 헤더/네비게이션 |
+| `logo-80h.png` | 파비콘/소형 UI |
+| `logo-dark.png` | 다크 배경용 (현재 미사용) |
+| `logo-dark-120h.png` | 다크 배경 헤더용 (현재 미사용) |
+| `logo-dark-80h.png` | 다크 배경 소형 (현재 미사용) |
+
+### 2.3 로고 사용 규칙
+- 최소 여백: 로고 높이의 50% 이상
+- 배경: 크림 화이트(`#FFFAF5`) 또는 순백(`#FFFFFF`) 위에 사용
+- 변형 금지: 회전, 기울임, 색상 임의 변경 불가
+- 현재 라이트 모드 전용 — 다크 모드 미지원
+
+---
+
+## 3. 컬러 시스템
+
+### 3.1 디자인 테마: Saffron (사프란)
+따뜻한 금빛 오렌지 톤. 고급스러운 미식 큐레이션 느낌을 전달한다.
+
+### 3.2 브랜드 팔레트
+CSS 변수로 `globals.css`의 `@theme inline`에 등록되어 있다.
+
+| 토큰 | Hex | 용도 |
+|------|-----|------|
+| `brand-50` | `#FFF8F0` | 선택 상태 배경, 카드 hover |
+| `brand-100` | `#FFEDD5` | 연한 배경, 뱃지 배경 |
+| `brand-200` | `#FFD6A5` | 보조 배경 |
+| `brand-300` | `#FFBC72` | 호버 보더, 보조 강조 |
+| `brand-400` | `#F5A623` | 스피너, 중간 강조 |
+| `brand-500` | `#F59E3F` | Primary 라이트 |
+| `brand-600` | `#E8720C` | **Primary** — 아이콘, 버튼, 핵심 강조색 |
+| `brand-700` | `#C45A00` | Primary 다크 — 텍스트 강조 |
+| `brand-800` | `#9A4500` | 진한 강조 |
+| `brand-900` | `#6B3000` | 다크 상태 |
+| `brand-950` | `#3D1A00` | 최진한 강조 |
+
+### 3.3 시맨틱 토큰
+| 토큰 | Hex | 용도 |
+|------|-----|------|
+| `background` | `#FFFAF5` | 페이지 배경 (크림 화이트) |
+| `foreground` | `#171717` | 본문 텍스트 |
+| `surface` | `#FFFFFF` | 카드/패널 배경 |
+
+### 3.4 컬러 사용 원칙
+- 인터랙티브/강조 요소에는 반드시 `brand-*` 토큰 사용 (`orange-*` 금지)
+- Tailwind 기본 `gray` 팔레트는 변경하지 않음 (다크 모드 호환 문제)
+- 라이트 모드 전용 (`color-scheme: only light`)
+- 다크 모드 CSS는 코멘트 처리하여 보존 중 (향후 지원 가능성)
+
+---
+
+## 4. 타이포그래피
+
+### 4.1 서체 스택
+```
+Pretendard Variable → Geist → system-ui → sans-serif
+```
+
+| 서체 | 역할 | 로딩 방식 |
+|------|------|----------|
+| **Pretendard Variable** | 1순위 본문 서체 | 로컬 woff2 (`src/fonts/`) |
+| **Geist** | 폴백 서체 | Google Fonts (`next/font/google`) |
+
+### 4.2 선택 이유
+- **Pretendard**: 한국어 가독성 최적화, 다양한 웨이트 지원, 깔끔하고 현대적
+- **Geist**: 영문/숫자 렌더링 우수, Next.js 기본 서체로 호환성 확보
+
+### 4.3 사용 원칙
+- 웨이트: Regular(400), Medium(500), SemiBold(600), Bold(700) 주로 사용
+- 한글 최소 본문 크기: 14px (가독성 확보)
+- 레이블/캡션: 12px까지 허용
+- HTML lang: `ko` (한국어 기본)
+
+---
+
+## 5. 아이콘 시스템
+
+Tasteby는 **3개의 아이콘 레이어**를 사용한다.
+
+### 5.1 Material Symbols Rounded — UI 아이콘
+**용도**: 범용 UI (검색, 재생, 네비게이션, 상태 표시 등)
+
+| 항목 | 값 |
+|------|-----|
+| 폰트 | Material Symbols Rounded (Google Fonts) |
+| 기본 설정 | FILL 0, wght 400, GRAD 0, opsz 24 |
+| 컴포넌트 | `<Icon name="search" size={20} />` |
+| 파일 | `src/components/Icon.tsx` |
+
+**사용 위치**:
+- RestaurantList 음식 카테고리 아이콘
+- MapView 마커/InfoWindow 카테고리 아이콘
+- SearchBar, 네비게이션, 재생 버튼 등 모든 UI 아이콘
+- RestaurantDetail 상세 정보 아이콘
+
+**주요 아이콘 매핑** (`getCuisineIcon()`):
+- 한식 → `rice_bowl`, 일식 → `set_meal`, 중식 → `skillet`
+- 양식 → `dinner_dining`, 아시아 → `restaurant`, 기타 → `flatware`
+- 소분류별 세부 매핑 (67개 규칙) — `cuisine-icons.ts` 참조
+
+**스타일 규칙**:
+- 아이콘 크기와 `width`/`height`를 동일하게 설정하여 종횡비 고정
+- `overflow: hidden`으로 비정형 아이콘(예: sake) 크기 넘침 방지
+
+### 5.2 Phosphor Icons — 장르 카드 픽토그램
+**용도**: 홈 탭 장르 필터 카드의 카테고리 아이콘
+
+| 항목 | 값 |
+|------|-----|
+| 패키지 | `@phosphor-icons/react` (^2.1.10) |
+| 라이선스 | MIT |
+| 스타일 | Regular (outline) 기본 |
+| 파일 | `src/lib/cuisine-icons.ts` → `getPhosphorCuisineIcon()` |
+
+**Phosphor 아이콘 매핑**:
+
+| 카테고리 | 아이콘 | Phosphor 컴포넌트명 |
+|----------|--------|---------------------|
+| 한식 | 밥그릇 | `BowlFood` |
+| 일식 | 물고기 | `FishSimple` |
+| 중식 | 불꽃 | `Fire` |
+| 양식 | 피자 | `Pizza` |
+| 아시아 | 김 나는 그릇 | `BowlSteam` |
+| 기타 | 쿠키 | `Cookie` |
+
+**소분류 Phosphor 매핑** (주요 항목):
+| 소분류 | 아이콘 | 비고 |
+|--------|--------|------|
+| 국밥/해장국 | `BowlSteam` | |
+| 소고기/한우구이 | `Cow` | |
+| 곱창/막창 | `Flame` | |
+| 닭/오리구이 | `Bird` | |
+| 회/횟집 | `Fish` | |
+| 해산물 | `Shrimp` | |
+| 주점/포차 | `BeerStein` | |
+| 이자카야 | `Martini` | 술잔 모양 |
+| 파인다이닝/코스 | `Champagne` | |
+| 스시/오마카세 | `Fish` | |
+| 스테이크 | `Knife` | |
+| 햄버거 | `Hamburger` | |
+| 피자 | `Pizza` | |
+| 프렌치 | `Champagne` | |
+| 마라/훠궈 | `Pepper` | |
+| 딤섬/만두 | `Egg` | |
+| 비건/샐러드 | `Leaf` | |
+| 카페/디저트 | `Coffee` | |
+| 베이커리 | `Bread` | |
+
+### 5.3 Custom SVG Food Icons — 커스텀 음식 픽토그램
+**용도**: Phosphor에 적합한 아이콘이 없는 특수 음식 카테고리
+
+| 항목 | 값 |
+|------|-----|
+| 컴포넌트 | `<FoodIcon name="noodle" size={22} />` |
+| 파일 | `src/components/FoodIcon.tsx` |
+| 접두어 | `food:` (예: `food:noodle`) |
+| 렌더링 | SVG inline, `fill` 또는 `stroke` 모드 |
+
+**등록된 커스텀 아이콘**:
+
+| 이름 | 대상 소분류 | viewBox | 렌더링 모드 | 출처 |
+|------|------------|---------|------------|------|
+| `jjigae` | 찌개/전골/탕 | 0 0 24 24 | stroke | 자체 제작 (뚝배기+김) |
+| `tteok` | 분식 | 0 0 24 24 | stroke | 자체 제작 (가래떡) |
+| `noodle` | 면, 라멘, 소바/우동, 베트남 | 0 0 363.674 363.674 | fill | 외부 SVG (그릇+면+젓가락) |
+| `tempura` | 텐동/튀김 | 0 0 64 64 | fill | Flaticon (텐푸라) |
+| `pig` | 삼겹살/돼지구이, 족발/보쌈, 돈카츠 | 0 0 90 90 | fill | 외부 SVG (돼지 전신) |
+
+### 5.4 아이콘 선택 기준
+
+```
+1단계: Phosphor Icons에 적합한 아이콘이 있는가?
+  → 있으면 Phosphor 사용
+
+2단계: 없으면 커스텀 SVG(FoodIcon)로 제작/수급
+  → food: 접두어로 매핑
+
+3단계: UI 범용 아이콘은 Material Symbols
+  → 검색, 네비, 상태 표시 등
+```
+
+### 5.5 아이콘 제작/추가 가이드
+
+**커스텀 SVG 추가 시:**
+1. `FoodIcon.tsx`의 `FOOD_ICONS` Record에 `IconDef` 추가
+2. `viewBox`는 원본 SVG에 맞게 설정 (24×24가 아닐 수 있음)
+3. `fill: true`면 fill 모드, 생략/false면 stroke 모드
+4. `cuisine-icons.ts`의 `PHOSPHOR_SUB_RULES`에서 `food:이름`으로 매핑
+5. SVG 경로는 JSX로 변환 (`clip-rule` → `clipRule` 등)
+
+**라이선스 확인:**
+- Phosphor Icons: MIT ✅
+- Material Symbols: Apache 2.0 ✅
+- 외부 SVG: 출처별 라이선스 확인 필수 (Flaticon은 Attribution 필요할 수 있음)
+
+---
+
+## 6. 레이아웃 & 컴포넌트 스타일
+
+### 6.1 홈 탭 구성
+```
+┌─────────────────────────────────────┐
+│  [로고]            [검색] [유튜버▼]  │  ← 헤더
+├─────────────────────────────────────┤
+│  [한식][일식][중식][양식]... →scroll  │  ← 장르 카드 (가로 스크롤+드래그)
+│  [가격▼][지역▼][내위치][N개 결과]    │  ← 필터 바 (flex-wrap)
+├─────────────────────────────────────┤
+│  지도 / 리스트 / 근처 탭            │  ← 메인 콘텐츠
+└─────────────────────────────────────┘
+```
+
+### 6.2 장르 카드 스타일
+- 칩(chip) 형태, 가로 스크롤 + 마우스 드래그 지원 (`useDragScroll`)
+- 아이콘(22px) + 텍스트 라벨
+- 선택 시: `bg-brand-50 border-brand-300 text-brand-700`
+- 비선택 시: `bg-white border-gray-200 text-gray-600`
+- 아이콘 색상: 선택 시 `brand-600`, 비선택 시 `gray-400`
+
+### 6.3 카드/서피스
+- 배경: `surface` (#FFFFFF)
+- 보더: `border-gray-200` (1px)
+- 라운딩: `rounded-lg` (8px) 기본
+- 그림자: 최소한 사용 (flat 디자인 지향)
+
+### 6.4 버튼/인터랙티브
+- Primary: `bg-brand-600 text-white hover:bg-brand-700`
+- Secondary: `bg-brand-50 text-brand-700 border-brand-300`
+- 포커스 링: `ring-brand-400`
+
+---
+
+## 7. 지도 마커 스타일
+
+### 7.1 마커 디자인
+텍스트 라벨 마커 (핀이 아닌 말풍선 형태):
+- 배경: 흰색 (폐업 시 회색)
+- 보더: 카테고리별 색상
+- 텍스트: 레스토랑 이름 + 카테고리 아이콘 (Material Symbols)
+- 하단 꼬리(arrow): 삼각형
+- 선택 시: 파란색(`#1d4ed8`) 보더+꼬리
+
+### 7.2 마커 카테고리 색상
+| 카테고리 | 보더 | 배경 | 화살표 |
+|----------|------|------|--------|
+| 한식 | `#E8720C` | `#FFF8F0` | `#E8720C` |
+| 일식 | `#D94F5A` | `#FFF5F5` | `#D94F5A` |
+| 기타 | 기본 그레이 | 기본 화이트 | 기본 그레이 |
+
+### 7.3 클러스터링
+- 라이브러리: supercluster
+- 클러스터 마커: 원형 + 개수 텍스트
+
+---
+
+## 8. 향후 방향
+
+### 8.1 다크 모드
+- 현재 라이트 모드 전용
+- 다크 모드 CSS 토큰은 정의되어 있으나 비활성 상태
+- 다크 배경 로고 에셋 준비 완료 (`logo-dark-*.png`)
+- 활성화 시 Tailwind 기본 gray 팔레트 유지 (커스텀 gray 금지)
+
+### 8.2 아이콘 정리
+- `@tabler/icons-react` 의존성 제거 가능 (현재 미사용)
+- 커스텀 SVG 아이콘 추가 확장 가능 (소고기/해산물 등)
+- Flaticon 에셋 사용 시 Attribution 라이선스 확인 필요
+
+### 8.3 디자인 토큰 확장
+- 현재: 색상 + 폰트 토큰만 정의
+- 향후: spacing, radius, shadow, motion 토큰 추가 가능
+- Tailwind v4 `@theme` 기반으로 확장
+
+---
+
+## 부록: 파일 구조
+
+```
+frontend/
+├── docs/
+│   ├── brand-guide.md          ← 이 문서
+│   └── design-concepts.md      ← 초기 컨셉 후보안
+├── public/
+│   ├── logo.png                ← 로고 에셋들
+│   ├── logo-{80h,120h,200h}.png
+│   ├── logo-dark.png
+│   └── logo-dark-{80h,120h}.png
+├── src/
+│   ├── app/
+│   │   ├── globals.css         ← 디자인 토큰 (@theme inline)
+│   │   ├── layout.tsx          ← 폰트, 메타 설정
+│   │   └── page.tsx            ← 홈 탭 (장르 카드 렌더링)
+│   ├── components/
+│   │   ├── Icon.tsx            ← Material Symbols 래퍼
+│   │   └── FoodIcon.tsx        ← 커스텀 SVG 아이콘
+│   ├── fonts/
+│   │   └── PretendardVariable.woff2
+│   └── lib/
+│       └── cuisine-icons.ts    ← 아이콘 매핑 (Material + Phosphor + Food)
+```
--- a/frontend/src/components/FoodIcon.tsx
+++ b/frontend/src/components/FoodIcon.tsx
@@ -0,0 +1,93 @@
+"use client";
+
+interface FoodIconProps {
+  name: string;
+  size?: number;
+  className?: string;
+}
+
+interface IconDef {
+  viewBox: string;
+  fill?: boolean; // true = fill icon (no stroke), false = stroke icon (default)
+  paths: React.ReactNode;
+}
+
+const FOOD_ICONS: Record<string, IconDef> = {
+  // 찌개/전골/탕: 뚝배기 + 김
+  "jjigae": {
+    viewBox: "0 0 24 24",
+    paths: (
+      <>
+        <path d="M5 11h14v1c0 4-2.5 7-7 7s-7-3-7-7v-1z" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M4 11h16" strokeLinecap="round" />
+        <path d="M3 11.5h1M20 11.5h1" strokeLinecap="round" strokeWidth="1.5" />
+        <path d="M9 8c0-1.5 1-2 0-3M12 7c0-1.5 1-2 0-3M15 8c0-1.5 1-2 0-3" strokeLinecap="round" fill="none" />
+      </>
+    ),
+  },
+  // 분식: 가래떡 1개 사선
+  "tteok": {
+    viewBox: "0 0 24 24",
+    paths: (
+      <rect x="2" y="10" width="20" height="4" rx="2" transform="rotate(-30 12 12)" strokeLinecap="round" strokeLinejoin="round" />
+    ),
+  },
+  // 면: 그릇에 면+젓가락 (noodles-in-a-bowl)
+  "noodle": {
+    viewBox: "0 0 363.674 363.674",
+    fill: true,
+    paths: (
+      <>
+        <path d="M79.496,292.615c-16.686-10.313-28.229-27.017-33.383-48.308c-0.975-4.025-5.027-6.502-9.054-5.524c-4.026,0.975-6.499,5.027-5.524,9.054c6.102,25.21,19.959,45.105,40.074,57.538c1.229,0.759,2.59,1.121,3.936,1.121c2.514,0,4.969-1.263,6.387-3.558C84.109,299.415,83.02,294.793,79.496,292.615z" />
+        <path d="M363.465,70.469c-0.967-4.027-5.016-6.5-9.045-5.542l-179.247,43.032V85.908l163.056-69.827c3.807-1.631,5.572-6.039,3.941-9.847c-1.631-3.809-6.039-5.574-9.848-3.942L174.755,69.768c-1.017-2.937-3.8-5.049-7.082-5.049c-4.142,0-7.5,3.357-7.5,7.5v3.794l-4.55,1.948c-0.631-3.505-3.689-6.166-7.375-6.166c-4.143,0-7.5,3.357-7.5,7.5v5.036l-4.543,1.945c-0.611-3.527-3.68-6.213-7.382-6.213c-4.142,0-7.5,3.357-7.5,7.5v5.086l-4.497,1.926c-0.482-3.677-3.621-6.517-7.428-6.517c-4.143,0-7.5,3.357-7.5,7.5v5.409l-4.631,1.983c-0.779-3.313-3.745-5.78-7.295-5.78c-4.142,0-7.5,3.357-7.5,7.5v4.615l-20.778,8.898c-3.808,1.631-5.572,6.039-3.942,9.847c1.219,2.846,3.988,4.55,6.898,4.55c0.984,0,1.986-0.195,2.949-0.607l14.873-6.369v4.608l-14.318,3.438c-4.027,0.967-6.509,5.016-5.542,9.044c0.825,3.439,3.899,5.751,7.286,5.751c0.58,0,1.17-0.068,1.758-0.209l10.816-2.597v64.284H7.5c-4.142,0-7.5,3.357-7.5,7.5c0,28.225,6.892,54.242,19.93,75.239c12.92,20.807,31.711,36.318,54.55,45.096v16.73c0,4.143,3.358,7.5,7.5,7.5h97.493c4.143,0,7.5-3.357,7.5-7.5v-16.73c22.838-8.777,41.631-24.29,54.549-45.096c13.039-20.997,19.932-47.015,19.932-75.239c0-4.143-3.358-7.5-7.5-7.5H116.898v-72.549l4.719-1.133c0.898,3.138,3.781,5.436,7.206,5.436c4.142,0,7.5-3.357,7.5-7.5v-1.466l4.471-1.074c0.405,3.76,3.587,6.688,7.454,6.688c4.143,0,7.5-3.357,7.5-7.5v-2.777l4.425-1.063v14.33c0,4.143,3.358,7.5,7.5,7.5s7.5-3.357,7.5-7.5v-17.931l182.749-43.873C361.949,78.546,364.432,74.497,363.465,70.469z M97.473,119.181l4.426-1.895v8.264l-4.426,1.063V119.181z M89.479,346.99v-7.19h82.493v7.19H89.479z M178.76,324.8H82.693c-40.367-14.153-65.217-51.11-67.519-99.875h231.103C243.975,273.689,219.127,310.646,178.76,324.8z M101.898,209.925h-4.426v-67.886l4.426-1.063V209.925z M116.898,110.863l4.425-1.895v11.918l-4.425,1.063V110.863z M136.323,102.545l4.425-1.896v15.574l-4.425,1.063V102.545z M155.748,112.623V94.226l4.425-1.896v19.229L155.748,112.623z" />
+      </>
+    ),
+  },
+  // 텐동/튀김: 텐푸라 (flaticon tempura)
+  "tempura": {
+    viewBox: "0 0 64 64",
+    fill: true,
+    paths: (
+      <>
+        <path d="M59.96092,38.28982c-.58769-2.348-4.12861-1.72934-6.10276-1.50418a48.12688,48.12688,0,0,0,2.50872-4.73925A1.91121,1.91121,0,0,0,54.08314,29.416c-3.94455,1.2-6.79557,4.77253-8.49153,7.55764a8.05234,8.05234,0,0,1-1.77036,2.03025c-.05638-.04614-.115-.097-.16482-.13169a5.09683,5.09683,0,0,0-5.11816-.48233,4.7649,4.7649,0,0,0-5.21482-.55654,5.28288,5.28288,0,0,0-3.90841-.05207,4.9359,4.9359,0,0,0-4.18868-1.25476A4.63263,4.63263,0,0,0,21.0592,34.644a4.73344,4.73344,0,0,0-8.3529-1.07386c-2.98316-.34766-6.15924,2.35525-5.34459,5.723A5.18758,5.18758,0,0,0,5.5691,43.06339a4.84285,4.84285,0,0,0,3.72,4.64886,4.72272,4.72272,0,0,0,5.13667,4.69644A4.74936,4.74936,0,0,0,20.736,54.771a4.73286,4.73286,0,0,0,6.6833,1.47475.99956.99956,0,1,0-1.1287-1.65,2.71212,2.71212,0,0,1-3.84593-.86364,2.05527,2.05527,0,0,0-2.603-.75617,2.5586,2.5586,0,0,1-1.09452.24556,2.73778,2.73778,0,0,1-2.67039-2.17292,1.00314,1.00314,0,0,0-.46182-.65271c-.46123-.33887-1.17682.06863-1.60712.03614a2.72229,2.72229,0,0,1-2.7192-2.71971c-.00244-.45741.32815-1.1176-.06741-1.54852a1.00725,1.00725,0,0,0-.93241-.38128,2.72268,2.72268,0,0,1-1.6968-4.8248,2.11365,2.11365,0,0,0,.72141-2.09722c-.55724-1.9936,1.76582-3.57014,2.96729-3.2786a2.07918,2.07918,0,0,0,2.08545-.89638,2.709,2.709,0,0,1,4.94632,1.24537,1.00583,1.00583,0,0,0,1.30933.8426,2.64386,2.64386,0,0,1,3.00723.9549,2.065,2.065,0,0,0,2.04257.78843,2.793,2.793,0,0,1,2.357.70543,2.12238,2.12238,0,0,0,2.32378.41545,2.67127,2.67127,0,0,1,2.48878.1982.99706.99706,0,0,0,1.10819-.0415,2.72809,2.72809,0,0,1,3.29624.12156,2.05987,2.05987,0,0,0,2.27495.27241,2.70644,2.70644,0,0,1,3.72479,3.33392c-.38932.81316.21723,1.64631.15282,2.47613A2.71632,2.71632,0,0,1,40.1902,48.528a2.00549,2.00549,0,0,0-2.17527,1.16787,2.71478,2.71478,0,0,1-2.49171,1.64568,2.592,2.592,0,0,1-.949-.17282,2.03329,2.03329,0,0,0-2.42337.79575,2.73019,2.73019,0,0,1-1.58075,1.17262.99911.99911,0,0,0-.69908,1.22877c.77166,1.84716,3.33875-.273,3.98066-1.33265A4.69753,4.69753,0,0,0,39.828,50.49447,4.90789,4.90789,0,0,0,44.20519,49.091c1.07331-1.28142.69028-2.47595,2.314-3.18146a7.17839,7.17839,0,0,1,2.02786-.83393,32.47063,32.47063,0,0,0,10.64445-4.85112A1.88349,1.88349,0,0,0,59.96092,38.28982ZM48.05305,43.138a8.88032,8.88032,0,0,0-2.879,1.26343c.07057-1.027.56233-2.1911-.21569-3.75184,3.30834-2.7934,4.28439-7.41256,9.50762-9.25727A41.37828,41.37828,0,0,1,50.91767,37.626c-1.32533.664-3.54,1.03493-2.8774,2.52866a.99875.99875,0,0,0,1.36213.37843c2.1403-1.32937,6.2594-2.42108,8.52181-1.86132A30.48308,30.48308,0,0,1,48.05305,43.138Z" />
+        <path d="M20.71747,49.98436A3.136,3.136,0,0,0,24.414,47.5605a1.00042,1.00042,0,0,0-1.95861-.40708,1.12553,1.12553,0,0,1-2.20366-.45852,1.00043,1.00043,0,0,0-1.95863-.407A3.12939,3.12939,0,0,0,20.71747,49.98436Z" />
+        <path d="M33.96005,46.60805a1.13194,1.13194,0,0,1-1.5456-.38031,1.00012,1.00012,0,0,0-1.71058,1.036,3.126,3.126,0,0,0,5.34752-3.23828,1.0001,1.0001,0,0,0-1.71052,1.03606A1.13019,1.13019,0,0,1,33.96005,46.60805Z" />
+        <path d="M14.89436,39.24667A1.131,1.131,0,0,1,16.44,39.627a1.00011,1.00011,0,0,0,1.71058-1.036A3.12612,3.12612,0,0,0,12.803,41.82975a1.00009,1.00009,0,0,0,1.71052-1.03606A1.13084,1.13084,0,0,1,14.89436,39.24667Z" />
+        <path d="M6.12651,33.96448a2.694,2.694,0,0,1,.36907-2.33061c1.05665-1.50674-.70244-2.64347-.19038-4.31314C7.64257,24.515,9.289,26.224,10.16584,23.95766a2.71747,2.71747,0,0,1,5.09174-.25918,1.00613,1.00613,0,0,0,1.51436.41191,2.23774,2.23774,0,0,1,.74692-.37979,2.64262,2.64262,0,0,1,2.39017.41545,2.05437,2.05437,0,0,0,2.192.15622,2.71372,2.71372,0,0,1,2.47706-.00635,2.09934,2.09934,0,0,0,2.31206-.28413,2.64664,2.64664,0,0,1,2.44094-.54725,1.00237,1.00237,0,0,0,1.04765-.35882,2.68307,2.68307,0,0,1,3.20154-.85528,2.04549,2.04549,0,0,0,2.23589-.40278c.466-.57119,2.41006-1.24944,3.47261-.19757a2.77124,2.77124,0,0,1,1.07535,2.30556,2.12056,2.12056,0,0,0,.42765,1.36351,2.71658,2.71658,0,0,1-1.84936,4.30037,2.00726,2.00726,0,0,0-1.774,1.76536,2.64106,2.64106,0,0,1-1.3718,2.06064,1.00024,1.00024,0,0,0,.953,1.75842,4.56245,4.56245,0,0,0,2.38621-3.594,4.8526,4.8526,0,0,0,3.78058-2.63716,5.43994,5.43994,0,0,0,.35986-2.5729,8.82313,8.82313,0,0,1,2.61707-2.53306A32.49913,32.49913,0,0,0,54.64846,16.108a1.88292,1.88292,0,0,0,.167-2.07578c-1.24835-2.07129-4.45549-.44274-6.275.35141a48.01336,48.01336,0,0,0,1.00846-5.265,1.91029,1.91029,0,0,0-2.95353-1.84583c-3.42122,2.30473-5.09863,6.55538-5.90317,9.71591-.21291.58392-.67229,2.46176-1.29549,2.3801a5.14553,5.14553,0,0,0-5.03435,1.04112,4.69673,4.69673,0,0,0-5.14842.99789,5.16687,5.16687,0,0,0-3.75118,1.09557,4.88152,4.88152,0,0,0-4.37323.02872,4.60545,4.60545,0,0,0-4.14375-.71718,3.74334,3.74334,0,0,0-.39739.1362A4.70187,4.70187,0,0,0,8.256,23.365a5.23681,5.23681,0,0,0-3.69162,2.97413,4.56732,4.56732,0,0,0,.26544,4.08018,5.13094,5.13094,0,0,0-.62272,4.1052A1.01478,1.01478,0,1,0,6.12651,33.96448Zm41.413-24.91369a41.36518,41.36518,0,0,1-1.56268,6.99793,18.57825,18.57825,0,0,0-2.04893,1.8495.99993.99993,0,0,0,1.45289,1.37371c1.65257-1.89613,5.27564-4.14923,7.60011-4.27732a30.49647,30.49647,0,0,1-8.12739,7.16451A8.87242,8.87242,0,0,0,42.465,24.21738a5.82025,5.82025,0,0,0-1.30541-3.52356C43.51355,17.05538,43.06651,12.37112,47.53947,9.05079Z" />
+        <path d="M31.62065,29.98282a1.14811,1.14811,0,0,1-.81332-.28461,1.00012,1.00012,0,0,0-1.33173,1.49194,3.10428,3.10428,0,0,0,2.07768.79424,3.14507,3.14507,0,0,0,2.08541-5.458,1.00008,1.00008,0,0,0-1.3316,1.492A1.13309,1.13309,0,0,1,31.62065,29.98282Z" />
+        <path d="M12.78637,27.78646a1.13979,1.13979,0,0,1,.81332.28462,1.00013,1.00013,0,0,0,1.33173-1.49195,3.12577,3.12577,0,0,0-4.16309,4.66374,1.00009,1.00009,0,0,0,1.3316-1.492A1.13318,1.13318,0,0,1,12.78637,27.78646Z" />
+      </>
+    ),
+  },
+  // 돼지 (삼겹살/돼지구이, 족발/보쌈, 돈카츠)
+  "pig": {
+    viewBox: "0 0 90 90",
+    fill: true,
+    paths: (
+      <>
+        <path d="m66.005 57.841c-.76 3.428-2.077 6.355-3.24 8.521h-2.301c.645-2.74 1.151-5.421 1.312-7.973 1.428-.158 2.844-.334 4.229-.548zm-27.672-.004c.745.129 1.505.239 2.265.348.147 2.609.667 5.365 1.324 8.177h-2.344c-.729-1.359-1.505-2.968-2.172-4.901.355-1.156.672-2.37.927-3.624zm27.09-33.334c8.703-.376 14.869 5.025 17.547 10.541 2.765 5.713.796 11.839-3.765 16.443-.209.208-.328.489-.339.781-.224 6.339-2.589 12.077-4.584 15.739h-3.864c.765-3.176 1.396-6.301 1.572-9.244.032-.547-.323-1.041-.853-1.188-3.975-1.072-5.729-3.661-6.443-6.213-.407-1.511-2.667-.88-2.24.62.349 1.245 1.161 2.469 2.041 3.645-9.041 1.261-17.015 1.464-25.776-.088.219-1.615.328-3.287.276-4.989.011-1.604-2.421-1.532-2.317.068.199 6.905-2.432 13.395-4.609 17.389h-3.844c1.532-6.337 2.12-12.307 1.089-17.645-.1-.557-.589-.964-1.152-.959-.739 0-1.285.677-1.135 1.396.183.937.296 1.912.38 2.901-4.984-.828-8.287-2.407-11.203-4.027-3.157-1.755-5.933-3.624-9.776-4.385-.048-.009-.183-.067-.355-.395-.172-.329-.312-.855-.344-1.396-.025-.543.057-1.095.199-1.469.145-.369.307-.505.411-.541 4.541-1.765 7.147-3.251 11.161-7.683.396-.443.401-1.109.005-1.552-2.077-2.349-2.219-4.749-1.869-7.177l8.244 6.371c1.224.948 2.647-.891 1.423-1.839l-1-.771c1.296-1.172 2.421-2.256 6.073-3.172 4.364-1.089 8.124-.729 13.389-.376 5.272.349 9.917.663 19.887-.629.599-.079 1.192-.131 1.771-.156zm14.598-4.849c-1.547.073-1.437 2.396.115 2.323 1.817 0 2.536 1.063 2.599 2.344.057 1.244-.625 2.64-2.583 3.24-4.048-3.667-9.797-6.109-16.803-5.199-9.787 1.265-14.197.953-19.427.604-5.235-.348-9.324-.749-14.104.448-4.167 1.041-5.891 2.489-7.443 3.932l-6.964-5.385c-.219-.167-.484-.255-.756-.244-.509.02-.943.375-1.077.864-.823 3.109-.667 6.781 1.683 10.136-3.491 3.739-5.568 4.963-9.772 6.599-.891.344-1.432 1.115-1.728 1.88-.297.771-.396 1.599-.349 2.423.041.823.224 1.629.604 2.353.374.718 1.026 1.416 1.964 1.598 3.339.661 5.833 2.319 9.093 4.131 3.099 1.724 6.875 3.505 12.443 4.364.041 3.948-.584 8.235-1.797 12.803-.197.74.36 1.464 1.125 1.459h5.989c.423 0 .808-.224 1.016-.589.765-1.359 1.588-3.052 2.36-4.952.536 1.244 1.088 2.369 1.609 3.301.203.369.593.599 1.009.599h4.448c.767.005 1.323-.719 1.131-1.457-.808-3.079-1.303-5.996-1.464-8.745 6.043.672 10.36.672 16.495.14-.172 2.709-.661 5.579-1.452 8.605-.199.739.364 1.463 1.124 1.457h4.448c.423 0 .813-.229 1.016-.599 1.281-2.297 2.765-5.631 3.645-9.489.412.244.849.473 1.344.661-.229 3.041-.744 6.235-1.64 9.609-.199.735.359 1.459 1.12 1.459h5.995c.416 0 .801-.224 1.005-.589 2.145-3.796 4.771-10.063 5.088-17.093 4.792-5.088 7.167-12.131 3.937-18.615-.891-1.776-2.052-3.427-3.156-4.692 2.135-1.1 3.24-3.167 3.145-5.131-.109-2.333-2.025-4.552-4.921-4.552-.04-.001-.078-.001-.114-.001z" />
+        <path clipRule="evenodd" d="m18.354 36.679c1.177 0 2.135.959 2.135 2.141 0 1.183-.957 2.14-2.135 2.14-1.183 0-2.141-.957-2.141-2.14 0-1.182.959-2.141 2.141-2.141z" fillRule="evenodd" />
+      </>
+    ),
+  },
+};
+
+export default function FoodIcon({ name, size = 24, className = "" }: FoodIconProps) {
+  const icon = FOOD_ICONS[name];
+  if (!icon) return null;
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox={icon.viewBox}
+      fill={icon.fill ? "currentColor" : "none"}
+      stroke={icon.fill ? "none" : "currentColor"}
+      strokeWidth={icon.fill ? undefined : 1.5}
+      className={className}
+    >
+      {icon.paths}
+    </svg>
+  );
+}
--- a/frontend/src/components/Icon.tsx
+++ b/frontend/src/components/Icon.tsx
@@ -15,7 +15,7 @@ export default function Icon({ name, size = 20, filled, className = "" }: IconPr
  return (
    <span
      className={`material-symbols-rounded ${filled ? "filled" : ""} ${className}`}
-      style={{ fontSize: size }}
+      style={{ fontSize: size, width: size, height: size, overflow: "hidden", display: "inline-flex", alignItems: "center", justifyContent: "center" }}
    >
      {name}
    </span>
--- a/frontend/src/lib/cuisine-icons.ts
+++ b/frontend/src/lib/cuisine-icons.ts
@@ -39,7 +39,7 @@ const SUB_ICON_RULES: { keyword: string; icon: string }[] = [
  { keyword: "라멘", icon: "ramen_dining" },
  { keyword: "돈카츠", icon: "lunch_dining" },
  { keyword: "텐동/튀김", icon: "tapas" },
-  { keyword: "이자카야", icon: "sake" },
+  { keyword: "이자카야", icon: "local_bar" },
  { keyword: "야키니쿠", icon: "kebab_dining" },
  { keyword: "카레", icon: "skillet" },
  { keyword: "소바/우동", icon: "ramen_dining" },
@@ -77,78 +77,78 @@ export function getCuisineIcon(cuisineType: string | null | undefined): string {
  return CUISINE_ICON_MAP[main] || DEFAULT_ICON;
 }

-// ── Tabler Icons (for genre card chips) ──
-// Returns Tabler icon component name (PascalCase without "Icon" prefix)
+// ── Phosphor Icons (for genre card chips) ──
+// Returns Phosphor icon component name (PascalCase)

-const TABLER_CUISINE_MAP: Record<string, string> = {
-  "한식": "BowlChopsticks",
-  "일식": "Fish",
-  "중식": "Soup",
+const PHOSPHOR_CUISINE_MAP: Record<string, string> = {
+  "한식": "BowlFood",
+  "일식": "FishSimple",
+  "중식": "Fire",
  "양식": "Pizza",
-  "아시아": "BowlSpoon",
+  "아시아": "BowlSteam",
  "기타": "Cookie",
 };

-const TABLER_SUB_RULES: { keyword: string; icon: string }[] = [
+const PHOSPHOR_SUB_RULES: { keyword: string; icon: string }[] = [
  // 한식
-  { keyword: "백반/한정식", icon: "BowlChopsticks" },
-  { keyword: "국밥/해장국", icon: "Soup" },
-  { keyword: "찌개/전골/탕", icon: "Cooker" },
-  { keyword: "삼겹살/돼지구이", icon: "Meat" },
-  { keyword: "소고기/한우구이", icon: "Grill" },
-  { keyword: "곱창/막창", icon: "GrillFork" },
-  { keyword: "닭/오리구이", icon: "Meat" },
-  { keyword: "족발/보쌈", icon: "Meat" },
+  { 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: "Fish" },
-  { keyword: "분식", icon: "EggFried" },
-  { keyword: "면", icon: "BowlChopsticks" },
-  { keyword: "죽/죽집", icon: "BowlSpoon" },
-  { keyword: "순대/순대국", icon: "Soup" },
-  { keyword: "장어/민물", icon: "Fish" },
-  { keyword: "주점/포차", icon: "Beer" },
-  { keyword: "파인다이닝/코스", icon: "GlassChampagne" },
+  { 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: "Soup" },
-  { keyword: "돈카츠", icon: "Meat" },
-  { keyword: "텐동/튀김", icon: "EggFried" },
-  { keyword: "이자카야", icon: "GlassCocktail" },
-  { keyword: "야키니쿠", icon: "Grill" },
-  { keyword: "카레", icon: "BowlSpoon" },
-  { keyword: "소바/우동", icon: "BowlChopsticks" },
+  { 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: "Soup" },
+  { keyword: "중화요리", icon: "Fire" },
  { keyword: "마라/훠궈", icon: "Pepper" },
  { keyword: "딤섬/만두", icon: "Egg" },
-  { keyword: "양꼬치", icon: "Grill" },
+  { keyword: "양꼬치", icon: "Flame" },
  // 양식
-  { keyword: "파스타/이탈리안", icon: "BowlSpoon" },
-  { keyword: "스테이크", icon: "Meat" },
-  { keyword: "햄버거", icon: "Burger" },
+  { keyword: "파스타/이탈리안", icon: "ForkKnife" },
+  { keyword: "스테이크", icon: "Knife" },
+  { keyword: "햄버거", icon: "Hamburger" },
  { keyword: "피자", icon: "Pizza" },
-  { keyword: "프렌치", icon: "GlassChampagne" },
-  { keyword: "바베큐", icon: "GrillSpatula" },
-  { keyword: "브런치", icon: "EggFried" },
-  { keyword: "비건/샐러드", icon: "Salad" },
+  { keyword: "프렌치", icon: "Champagne" },
+  { keyword: "바베큐", icon: "Flame" },
+  { keyword: "브런치", icon: "Coffee" },
+  { keyword: "비건/샐러드", icon: "Leaf" },
  // 아시아
-  { keyword: "베트남", icon: "BowlChopsticks" },
+  { keyword: "베트남", icon: "food:noodle" },
  { keyword: "태국", icon: "Pepper" },
-  { keyword: "인도/중동", icon: "BowlSpoon" },
-  { keyword: "동남아기타", icon: "BowlSpoon" },
+  { keyword: "인도/중동", icon: "BowlFood" },
+  { keyword: "동남아기타", icon: "BowlFood" },
  // 기타
-  { keyword: "치킨", icon: "Meat" },
+  { keyword: "치킨", icon: "Egg" },
  { keyword: "카페/디저트", icon: "Coffee" },
  { keyword: "베이커리", icon: "Bread" },
-  { keyword: "뷔페", icon: "Cheese" },
+  { keyword: "뷔페", icon: "ForkKnife" },
  { keyword: "퓨전", icon: "Cookie" },
 ];

-export function getTablerCuisineIcon(cuisineType: string | null | undefined): string {
-  if (!cuisineType) return "Bowl";
-  for (const rule of TABLER_SUB_RULES) {
+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 TABLER_CUISINE_MAP[main] || "Bowl";
+  return PHOSPHOR_CUISINE_MAP[main] || "ForkKnife";
 }