joungmin/tasteby
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: joungmin:18776b9b4b47ecab7c54a9eaa4439c87540caea2
Branches Tags
joungmin:main
joungmin:v0.1.12 joungmin:v0.1.11 joungmin:v0.1.10 joungmin:v0.1.9 joungmin:v0.1.3 joungmin:v0.1.2 joungmin:v0.1.1
...
compare: joungmin:v0.1.11
Branches Tags
joungmin:main
joungmin:v0.1.12 joungmin:v0.1.11 joungmin:v0.1.10 joungmin:v0.1.9 joungmin:v0.1.3 joungmin:v0.1.2 joungmin:v0.1.1

2 Commits
18776b9b4b ... v0.1.11

Author SHA1 Message Date
joungmin
f2861b6b79 홈 탭 장르 카드 UI + Tabler Icons 적용 + 지역 필터 추가 
- 홈 탭: 장르 가로 스크롤 카드 (Tabler Icons 픽토그램)
- 홈 탭: 가격/지역/내위치 필터 2줄 배치
- 리스트 탭: 기존 바텀시트 필터 UI 유지
- cuisine-icons: Tabler 아이콘 매핑 추가 (getTablerCuisineIcon)
- 드래그 스크롤 장르 카드에 적용
- 배포 가이드 문서 추가

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
 2026-03-12 22:52:42 +09:00
joungmin
dda0da52c4 내위치 필터 모바일 리스트 적용 + 반경 4km 
- mapBounds 없을 때 userLoc 기준 ~4km 반경 필터링
- 내위치 ON 시 setUserLoc도 업데이트

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
 2026-03-12 20:25:36 +09:00
5 changed files with 660 additions and 119 deletions
Expand all files Collapse all files

262
docs/deployment-guide.md Normal file
View File

@@ -0,0 +1,262 @@
# Tasteby 배포 가이드
## 환경 요약
| 항목 | Dev (개발) | Prod (운영) |
|------|-----------|-------------|
| URL | dev.tasteby.net | www.tasteby.net |
| 호스트 | 로컬 Mac mini | OKE (Oracle Kubernetes Engine) |
| 프로세스 관리 | PM2 | Kubernetes Deployment |
| 프론트엔드 실행 | `npm run dev` (Next.js dev server) | `node server.js` (standalone 빌드) |
| 백엔드 실행 | `./gradlew bootRun` | `java -jar app.jar` (bootJar 빌드) |
| Redis | 로컬 Redis 서버 | K8s Pod (redis:7-alpine) |
| TLS | Nginx(192.168.0.147) + Certbot | cert-manager + Let's Encrypt |
| 리버스 프록시 | Nginx (192.168.0.147 → 192.168.0.208) | Nginx Ingress Controller (K8s) |
| 도메인 DNS | dev.tasteby.net → Mac mini IP | www.tasteby.net → OCI NLB 217.142.131.194 |
---
## 1. Dev 환경 (dev.tasteby.net)
### 구조
```
브라우저 → dev.tasteby.net (HTTPS)
↓
Nginx (192.168.0.147) — Certbot Let's Encrypt TLS
├── /api/* → proxy_pass http://192.168.0.208:8000 (tasteby-api)
└── /* → proxy_pass http://192.168.0.208:3001 (tasteby-web)
↓
Mac mini (192.168.0.208) — PM2 프로세스 매니저
├── tasteby-api → ./gradlew bootRun (:8000)
└── tasteby-web → npm run dev (:3001)
```
- **192.168.0.147**: Nginx 리버스 프록시 서버 (TLS 종료, Certbot 자동 갱신)
- **192.168.0.208**: Mac mini (실제 앱 서버, PM2 관리)
### PM2 프로세스 구성 (ecosystem.config.js)
```javascript
module.exports = {
apps: [
{
name: "tasteby-api",
cwd: "/Users/joungmin/workspaces/tasteby/backend-java",
script: "./start.sh", // gradlew bootRun 실행
interpreter: "/bin/bash",
},
{
name: "tasteby-web",
cwd: "/Users/joungmin/workspaces/tasteby/frontend",
script: "npm",
args: "run dev", // ⚠️ 절대 standalone으로 바꾸지 말 것!
},
],
};
```
### 백엔드 start.sh
```bash
#!/bin/bash
export JAVA_HOME="/opt/homebrew/opt/openjdk@21/libexec/openjdk.jdk/Contents/Home"
export PATH="/opt/homebrew/opt/openjdk@21/bin:$PATH"
set -a
source /Users/joungmin/workspaces/tasteby/backend/.env # 환경변수 로드
set +a
exec ./gradlew bootRun
```
### 코드 수정 후 반영 방법
```bash
# 프론트엔드: npm run dev라서 코드 수정 시 자동 Hot Reload (재시작 불필요)
# 백엔드: 코드 수정 후 재시작 필요
pm2 restart tasteby-api
# 전체 재시작
pm2 restart tasteby-api tasteby-web
# PM2 상태 확인
pm2 status
# 로그 확인
pm2 logs tasteby-api --lines 50
pm2 logs tasteby-web --lines 50
```
### 주의사항
- `tasteby-web`은 반드시 `npm run dev`로 실행 (dev server)
- standalone 모드(`node .next/standalone/server.js`)로 바꾸면 static/public 파일을 못 찾아서 404 발생
- standalone은 prod(Docker/K8s) 전용
- dev 포트: 프론트 3001, 백엔드 8000 (3000은 Gitea가 사용 중)
- 환경변수는 `backend/.env`에서 로드
---
## 2. Prod 환경 (www.tasteby.net)
### 구조
```
브라우저 → www.tasteby.net (HTTPS)
↓
OCI Network Load Balancer (217.142.131.194)
↓ 80→NodePort:32530, 443→NodePort:31437
Nginx Ingress Controller (K8s)
├── /api/* → backend Service (:8000)
└── /* → frontend Service (:3001)
```
### 클러스터 정보
- **OKE 클러스터**: tasteby-cluster-prod
- **노드**: ARM64 × 2 (2 CPU / 8GB)
- **네임스페이스**: tasteby
- **K8s context**: `context-c6ap7ecrdeq`
### Pod 구성
| Pod | Image | Port | 리소스 |
|-----|-------|------|--------|
| backend | `icn.ocir.io/idyhsdamac8c/tasteby/backend:TAG` | 8000 | 500m~1 CPU, 768Mi~1536Mi |
| frontend | `icn.ocir.io/idyhsdamac8c/tasteby/frontend:TAG` | 3001 | 200m~500m CPU, 256Mi~512Mi |
| redis | `docker.io/library/redis:7-alpine` | 6379 | 100m~200m CPU, 128Mi~256Mi |
### 배포 명령어 (deploy.sh)
```bash
# 전체 배포 (백엔드 + 프론트엔드)
./deploy.sh "배포 메시지"
# 백엔드만 배포
./deploy.sh --backend-only "백엔드 수정 사항"
# 프론트엔드만 배포
./deploy.sh --frontend-only "프론트 수정 사항"
# 드라이런 (실제 배포 없이 확인)
./deploy.sh --dry-run "테스트"
```
### deploy.sh 동작 순서
1. **버전 계산**: 최신 git tag에서 patch +1 (v0.1.9 → v0.1.10)
2. **Docker 빌드**: Colima로 `linux/arm64` 이미지 빌드 (로컬 Mac에서)
- 백엔드: `backend-java/Dockerfile` → multi-stage (JDK build → JRE runtime)
- 프론트: `frontend/Dockerfile` → multi-stage (node build → standalone runtime)
3. **OCIR Push**: `icn.ocir.io/idyhsdamac8c/tasteby/{backend,frontend}:TAG` + `:latest`
4. **K8s 배포**: `kubectl set image` → `kubectl rollout status` (롤링 업데이트)
5. **Git tag**: `vX.Y.Z` 태그 생성 후 origin push
### Docker 빌드 상세
**백엔드 Dockerfile** (multi-stage):
```dockerfile
# Build: eclipse-temurin:21-jdk에서 gradlew bootJar
# Runtime: eclipse-temurin:21-jre에서 java -jar app.jar
# JVM 옵션: -XX:MaxRAMPercentage=75.0 -XX:+UseG1GC
```
**프론트엔드 Dockerfile** (multi-stage):
```dockerfile
# Build: node:22-alpine에서 npm ci + npm run build
# Runtime: node:22-alpine에서 standalone 출력물 복사 + node server.js
# ⚠️ standalone 모드는 Docker(prod) 전용. .next/static과 public을 직접 복사해야 함
```
### Ingress 설정
```yaml
# 주요 annotation
cert-manager.io/cluster-issuer: letsencrypt-prod # 자동 TLS 인증서
nginx.ingress.kubernetes.io/ssl-redirect: "true" # HTTP → HTTPS 리다이렉트
nginx.ingress.kubernetes.io/from-to-www-redirect: "true" # tasteby.net → www 리다이렉트
# 라우팅
www.tasteby.net/api/* → backend:8000
www.tasteby.net/* → frontend:3001
```
### TLS 인증서 (cert-manager)
- ClusterIssuer: `letsencrypt-prod`
- HTTP-01 challenge 방식 (포트 80 필수)
- Secret: `tasteby-tls`
- 인증서 상태 확인: `kubectl get certificate -n tasteby`
### 운영 확인 명령어
```bash
# Pod 상태
kubectl get pods -n tasteby
# 로그 확인
kubectl logs -f deployment/backend -n tasteby
kubectl logs -f deployment/frontend -n tasteby
# 인증서 상태
kubectl get certificate -n tasteby
# Ingress 상태
kubectl get ingress -n tasteby
# 롤백 (이전 이미지로)
kubectl rollout undo deployment/backend -n tasteby
kubectl rollout undo deployment/frontend -n tasteby
```
---
## 3. OCI 네트워크 구성
### VCN 서브넷
| 서브넷 | CIDR | 용도 |
|--------|------|------|
| oke-k8sApiEndpoint-subnet | 10.0.0.0/28 | K8s API 서버 |
| oke-nodesubnet | 10.0.10.0/24 | 워커 노드 |
| oke-svclbsubnet | 10.0.20.0/24 | NLB (로드밸런서) |
### 보안 리스트 (Security List)
**LB 서브넷** (oke-svclbsubnet):
- Ingress: `0.0.0.0/0` → TCP 80, 443
- Egress: `10.0.10.0/24` → all (노드 서브넷 전체 허용)
**노드 서브넷** (oke-nodesubnet):
- Ingress: `10.0.10.0/24` → all (노드 간 통신)
- Ingress: `10.0.0.0/28` → TCP all (API 서버)
- Ingress: `0.0.0.0/0` → TCP 22 (SSH)
- Ingress: `10.0.20.0/24` → TCP 30000-32767 (LB → NodePort)
- Ingress: `0.0.0.0/0` → TCP 30000-32767 (NLB preserve-source 대응)
> ⚠️ NLB `is-preserve-source: true` 설정으로 클라이언트 원본 IP가 보존됨.
> 따라서 노드 서브넷에 `0.0.0.0/0` → NodePort 인바운드가 반드시 필요.
---
## 4. OCIR (컨테이너 레지스트리) 인증
```bash
# 로그인
docker login icn.ocir.io -u idyhsdamac8c/oracleidentitycloudservice/<email> -p <auth-token>
```
- Registry: `icn.ocir.io/idyhsdamac8c/tasteby/`
- K8s imagePullSecret: `ocir-secret` (namespace: tasteby)
---
## 5. 자주 하는 실수 / 주의사항
| 실수 | 원인 | 해결 |
|------|------|------|
| dev에서 static 404 | PM2를 standalone 모드로 바꿈 | `npm run dev`로 원복 |
| prod HTTPS 타임아웃 | NLB 보안 리스트 NodePort 불일치 | egress를 노드 서브넷 all 허용 |
| 인증서 발급 실패 | 포트 80 방화벽 차단 | LB 서브넷 ingress 80 + 노드 서브넷 NodePort 허용 |
| OKE에서 이미지 pull 실패 | CRI-O short name 불가 | `docker.io/library/` 풀네임 사용 |
| NLB 헬스체크 실패 | preserve-source + 노드 보안 리스트 | 0.0.0.0/0 → NodePort 인바운드 추가 |

27
frontend/package-lock.json generated
View File

@@ -9,6 +9,7 @@
"version": "0.1.0",
"dependencies": {
"@react-oauth/google": "^0.13.4",
"@tabler/icons-react": "^3.40.0",
"@types/supercluster": "^7.1.3",
"@vis.gl/react-google-maps": "^1.7.1",
"next": "16.1.6",
@@ -1257,6 +1258,32 @@
"tslib": "^2.8.0"
}
},
"node_modules/@tabler/icons": {
"version": "3.40.0",
"resolved": "https://registry.npmjs.org/@tabler/icons/-/icons-3.40.0.tgz",
"integrity": "sha512-V/Q4VgNPKubRTiLdmWjV/zscYcj5IIk+euicUtaVVqF6luSC9rDngYWgST5/yh3Mrg/mYUwRv1YVTk71Jp0twQ==",
"license": "MIT",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/codecalm"
}
},
"node_modules/@tabler/icons-react": {
"version": "3.40.0",
"resolved": "https://registry.npmjs.org/@tabler/icons-react/-/icons-react-3.40.0.tgz",
"integrity": "sha512-oO5+6QCnna4a//mYubx4euZfECtzQZFDGsDMIdzZUhbdyBCT+3bRVFBPueGIcemWld4Vb/0UQ39C/cmGfGylAg==",
"license": "MIT",
"dependencies": {
"@tabler/icons": "3.40.0"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/codecalm"
},
"peerDependencies": {
"react": ">= 16"
}
},
"node_modules/@tailwindcss/node": {
"version": "4.2.1",
"resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.2.1.tgz",

1
frontend/package.json
View File

@@ -10,6 +10,7 @@
},
"dependencies": {
"@react-oauth/google": "^0.13.4",
"@tabler/icons-react": "^3.40.0",
"@types/supercluster": "^7.1.3",
"@vis.gl/react-google-maps": "^1.7.1",
"next": "16.1.6",

346
frontend/src/app/page.tsx
View File

@@ -13,8 +13,9 @@ import RestaurantDetail from "@/components/RestaurantDetail";
import MyReviewsList from "@/components/MyReviewsList";
import BottomSheet from "@/components/BottomSheet";
import FilterSheet, { FilterOption } from "@/components/FilterSheet";
import { getCuisineIcon } from "@/lib/cuisine-icons";
import { getCuisineIcon, getTablerCuisineIcon } from "@/lib/cuisine-icons";
import Icon from "@/components/Icon";
import * as TablerIcons from "@tabler/icons-react";
function useDragScroll() {
const ref = useRef<HTMLDivElement>(null);
@@ -201,6 +202,7 @@ export default function Home() {
const geoApplied = useRef(false);
const dd = useDragScroll();
const dm = useDragScroll();
const dg = useDragScroll(); // genre card drag scroll
const regionTree = useMemo(() => buildRegionTree(restaurants), [restaurants]);
const countries = useMemo(() => [...regionTree.keys()].sort(), [regionTree]);
@@ -237,9 +239,16 @@ export default function Home() {
if (cityFilter && parsed.city !== cityFilter) return false;
if (districtFilter && parsed.district !== districtFilter) return false;
}
if (boundsFilterOn && mapBounds) {
if (r.latitude < mapBounds.south || r.latitude > mapBounds.north) return false;
if (r.longitude < mapBounds.west || r.longitude > mapBounds.east) return false;
if (boundsFilterOn) {
if (mapBounds) {
if (r.latitude < mapBounds.south || r.latitude > mapBounds.north) return false;
if (r.longitude < mapBounds.west || r.longitude > mapBounds.east) return false;
} else {
// 지도가 없으면 (모바일 리스트 탭 등) userLoc 기준 ~2km 반경
const dlat = r.latitude - userLoc.lat;
const dlng = r.longitude - userLoc.lng;
if (dlat * dlat + dlng * dlng > 0.0013) return false; // ~4km
}
}
return true;
}).sort((a, b) => {
@@ -878,7 +887,7 @@ export default function Home() {
setDistrictFilter("");
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
(pos) => setRegionFlyTo({ lat: pos.coords.latitude, lng: pos.coords.longitude, zoom: 15 }),
(pos) => { setUserLoc({ lat: pos.coords.latitude, lng: pos.coords.longitude }); setRegionFlyTo({ lat: pos.coords.latitude, lng: pos.coords.longitude, zoom: 15 }); },
() => setRegionFlyTo({ lat: 37.498, lng: 127.0276, zoom: 15 }),
{ timeout: 5000 },
);
@@ -983,117 +992,254 @@ export default function Home() {
</div>
)}
{/* Row 2: Filters - always visible, 2 lines */}
{/* Row 2: Filters */}
<div className="space-y-1.5">
{/* Line 1: 음식 장르 + 가격 + 결과수 */}
<div className="flex items-center gap-1.5 text-xs">
<button
onClick={() => setOpenSheet("cuisine")}
className={`inline-flex items-center rounded-full px-3 py-1.5 ${
cuisineFilter ? "bg-brand-50 dark:bg-brand-900/30 ring-1 ring-brand-300 dark:ring-brand-700" : "bg-gray-100 dark:bg-gray-800"
}`}
>
<Icon name="restaurant" size={14} className={`mr-1 ${cuisineFilter ? "text-brand-500" : "text-gray-400"}`} />
<span className={cuisineFilter ? "text-brand-600 dark:text-brand-400 font-medium" : "text-gray-500 dark:text-gray-400"}>
{cuisineFilter ? (cuisineFilter.includes("|") ? cuisineFilter.split("|")[1] : cuisineFilter) : "장르"}
</span>
<Icon name="expand_more" size={14} className="ml-0.5 text-gray-400" />
</button>
<button
onClick={() => setOpenSheet("price")}
className={`inline-flex items-center rounded-full px-3 py-1.5 ${
priceFilter ? "bg-brand-50 dark:bg-brand-900/30 ring-1 ring-brand-300 dark:ring-brand-700" : "bg-gray-100 dark:bg-gray-800"
}`}
>
<Icon name="payments" size={14} className={`mr-1 ${priceFilter ? "text-brand-500" : "text-gray-400"}`} />
<span className={priceFilter ? "text-brand-600 dark:text-brand-400 font-medium" : "text-gray-500 dark:text-gray-400"}>
{priceFilter || "가격"}
</span>
<Icon name="expand_more" size={14} className="ml-0.5 text-gray-400" />
</button>
{(cuisineFilter || priceFilter) && (
<button onClick={() => { setCuisineFilter(""); setPriceFilter(""); }} className="text-gray-400 hover:text-brand-500">
<Icon name="close" size={14} />
</button>
)}
<span className="text-[10px] text-gray-400 ml-auto tabular-nums">{filteredRestaurants.length}개</span>
</div>
{/* Line 2: 나라 + 시 + 구 + 내위치 */}
<div className="flex items-center gap-1.5 text-xs">
<button
onClick={() => setOpenSheet("country")}
className={`inline-flex items-center rounded-full px-3 py-1.5 ${
countryFilter ? "bg-brand-50 dark:bg-brand-900/30 ring-1 ring-brand-300 dark:ring-brand-700" : "bg-gray-100 dark:bg-gray-800"
}`}
>
<Icon name="public" size={14} className={`mr-1 ${countryFilter ? "text-brand-500" : "text-gray-400"}`} />
<span className={countryFilter ? "text-brand-600 dark:text-brand-400 font-medium" : "text-gray-500 dark:text-gray-400"}>
{countryFilter || "나라"}
</span>
<Icon name="expand_more" size={14} className="ml-0.5 text-gray-400" />
</button>
{countryFilter && cities.length > 0 && (
{/* Home tab: 장르 가로 스크롤 */}
{mobileTab === "home" && (
<div ref={dg.ref} onMouseDown={dg.onMouseDown} onMouseMove={dg.onMouseMove} onMouseUp={dg.onMouseUp} onMouseLeave={dg.onMouseLeave} onClickCapture={dg.onClickCapture} style={dg.style} className="flex gap-2 overflow-x-auto scrollbar-hide -mx-1 px-1 pb-1 select-none">
{(() => {
const allCards = [
{ label: "전체", value: "", icon: "Bowl" },
...CUISINE_TAXONOMY.flatMap((g) => [
{ label: g.category, value: g.category, icon: getTablerCuisineIcon(g.category) },
...g.items.map((item) => ({ label: item, value: `${g.category}|${item}`, icon: getTablerCuisineIcon(`${g.category}|${item}`) })),
]),
];
return allCards.map((card) => {
const isCategory = card.value === "" || !card.value.includes("|");
const selected = card.value === ""
? !cuisineFilter
: isCategory
? cuisineFilter === card.value || cuisineFilter.startsWith(card.value + "|")
: cuisineFilter === card.value;
const TablerIcon = (TablerIcons as unknown as Record<string, React.ComponentType<{ size?: number; stroke?: number; className?: string }>>)[`Icon${card.icon}`] || TablerIcons.IconBowl;
return (
<button
key={card.value || "__all__"}
onClick={() => {
if (card.value === "") { setCuisineFilter(""); }
else if (cuisineFilter === card.value) { setCuisineFilter(""); }
else { setCuisineFilter(card.value); setBoundsFilterOn(false); }
}}
className={`shrink-0 flex flex-col items-center gap-1 rounded-xl px-2.5 py-2 min-w-[56px] transition-all ${
selected
? "bg-brand-500 text-white shadow-sm"
: isCategory
? "bg-brand-50 border border-brand-200 text-brand-700"
: "bg-white border border-gray-100 text-gray-500"
}`}
>
<TablerIcon size={22} stroke={1.5} className={selected ? "text-white" : isCategory ? "text-brand-500" : "text-gray-400"} />
<span className={`text-[11px] whitespace-nowrap ${isCategory ? "font-semibold" : "font-medium"}`}>{card.label}</span>
</button>
);
});
})()}
</div>
)}
{/* Home tab: 가격 + 지역 + 내위치 + 개수 */}
{mobileTab === "home" && (
<div className="flex items-center gap-1.5 text-xs flex-wrap">
<button
onClick={() => setOpenSheet("city")}
onClick={() => setOpenSheet("price")}
className={`inline-flex items-center rounded-full px-3 py-1.5 ${
cityFilter ? "bg-brand-50 dark:bg-brand-900/30 ring-1 ring-brand-300 dark:ring-brand-700" : "bg-gray-100 dark:bg-gray-800"
priceFilter ? "bg-brand-50 dark:bg-brand-900/30 ring-1 ring-brand-300 dark:ring-brand-700" : "bg-gray-100 dark:bg-gray-800"
}`}
>
<span className={cityFilter ? "text-brand-600 dark:text-brand-400 font-medium" : "text-gray-500 dark:text-gray-400"}>
{cityFilter || "시/도"}
<Icon name="payments" size={14} className={`mr-1 ${priceFilter ? "text-brand-500" : "text-gray-400"}`} />
<span className={priceFilter ? "text-brand-600 dark:text-brand-400 font-medium" : "text-gray-500 dark:text-gray-400"}>
{priceFilter || "가격"}
</span>
<Icon name="expand_more" size={14} className="ml-0.5 text-gray-400" />
</button>
)}
{cityFilter && districts.length > 0 && (
<button
onClick={() => setOpenSheet("district")}
onClick={() => setOpenSheet("country")}
className={`inline-flex items-center rounded-full px-3 py-1.5 ${
districtFilter ? "bg-brand-50 dark:bg-brand-900/30 ring-1 ring-brand-300 dark:ring-brand-700" : "bg-gray-100 dark:bg-gray-800"
countryFilter ? "bg-brand-50 dark:bg-brand-900/30 ring-1 ring-brand-300 dark:ring-brand-700" : "bg-gray-100 dark:bg-gray-800"
}`}
>
<span className={districtFilter ? "text-brand-600 dark:text-brand-400 font-medium" : "text-gray-500 dark:text-gray-400"}>
{districtFilter || "구/군"}
<Icon name="public" size={14} className={`mr-1 ${countryFilter ? "text-brand-500" : "text-gray-400"}`} />
<span className={countryFilter ? "text-brand-600 dark:text-brand-400 font-medium" : "text-gray-500 dark:text-gray-400"}>
{countryFilter || "나라"}
</span>
<Icon name="expand_more" size={14} className="ml-0.5 text-gray-400" />
</button>
)}
{countryFilter && (
<button onClick={() => { setCountryFilter(""); setCityFilter(""); setDistrictFilter(""); setRegionFlyTo(null); }} className="text-gray-400 hover:text-brand-500">
<Icon name="close" size={14} />
</button>
)}
<button
onClick={() => {
const next = !boundsFilterOn;
setBoundsFilterOn(next);
if (next) {
setCuisineFilter("");
setPriceFilter("");
setCountryFilter("");
setCityFilter("");
setDistrictFilter("");
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
(pos) => setRegionFlyTo({ lat: pos.coords.latitude, lng: pos.coords.longitude, zoom: 15 }),
() => setRegionFlyTo({ lat: 37.498, lng: 127.0276, zoom: 15 }),
{ timeout: 5000 },
);
} else {
setRegionFlyTo({ lat: 37.498, lng: 127.0276, zoom: 15 });
{countryFilter && cities.length > 0 && (
<button
onClick={() => setOpenSheet("city")}
className={`inline-flex items-center rounded-full px-3 py-1.5 ${
cityFilter ? "bg-brand-50 dark:bg-brand-900/30 ring-1 ring-brand-300 dark:ring-brand-700" : "bg-gray-100 dark:bg-gray-800"
}`}
>
<span className={cityFilter ? "text-brand-600 dark:text-brand-400 font-medium" : "text-gray-500 dark:text-gray-400"}>
{cityFilter || "시/도"}
</span>
<Icon name="expand_more" size={14} className="ml-0.5 text-gray-400" />
</button>
)}
{cityFilter && districts.length > 0 && (
<button
onClick={() => setOpenSheet("district")}
className={`inline-flex items-center rounded-full px-3 py-1.5 ${
districtFilter ? "bg-brand-50 dark:bg-brand-900/30 ring-1 ring-brand-300 dark:ring-brand-700" : "bg-gray-100 dark:bg-gray-800"
}`}
>
<span className={districtFilter ? "text-brand-600 dark:text-brand-400 font-medium" : "text-gray-500 dark:text-gray-400"}>
{districtFilter || "구/군"}
</span>
<Icon name="expand_more" size={14} className="ml-0.5 text-gray-400" />
</button>
)}
{(cuisineFilter || priceFilter || countryFilter) && (
<button onClick={() => { setCuisineFilter(""); setPriceFilter(""); setCountryFilter(""); setCityFilter(""); setDistrictFilter(""); }} className="text-gray-400 hover:text-brand-500">
<Icon name="close" size={14} />
</button>
)}
<button
onClick={() => {
const next = !boundsFilterOn;
setBoundsFilterOn(next);
if (next) {
setCuisineFilter("");
setPriceFilter("");
setCountryFilter("");
setCityFilter("");
setDistrictFilter("");
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
(pos) => { setUserLoc({ lat: pos.coords.latitude, lng: pos.coords.longitude }); setRegionFlyTo({ lat: pos.coords.latitude, lng: pos.coords.longitude, zoom: 15 }); },
() => setRegionFlyTo({ lat: 37.498, lng: 127.0276, zoom: 15 }),
{ timeout: 5000 },
);
} else {
setRegionFlyTo({ lat: 37.498, lng: 127.0276, zoom: 15 });
}
}
}
}}
className={`flex items-center gap-0.5 rounded-lg px-2 py-1 border transition-colors ${
boundsFilterOn
? "bg-brand-50 dark:bg-brand-900/30 border-brand-300 dark:border-brand-700 text-brand-600 dark:text-brand-400"
: "border-gray-200 dark:border-gray-700 text-gray-500 dark:text-gray-400"
}`}
>
<Icon name="location_on" size={12} />
<span>{boundsFilterOn ? "내위치 ON" : "내위치"}</span>
</button>
</div>
}}
className={`inline-flex items-center gap-0.5 rounded-full px-3 py-1.5 transition-colors ${
boundsFilterOn
? "bg-brand-50 dark:bg-brand-900/30 ring-1 ring-brand-300 dark:ring-brand-700 text-brand-600 dark:text-brand-400"
: "bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400"
}`}
>
<Icon name="location_on" size={14} />
<span>{boundsFilterOn ? "내위치 ON" : "내위치"}</span>
</button>
<span className="text-[10px] text-gray-400 ml-auto tabular-nums">{filteredRestaurants.length}개</span>
</div>
)}
{/* List tab: 기존 필터 UI */}
{mobileTab === "list" && (
<>
<div className="flex items-center gap-1.5 text-xs">
<button
onClick={() => setOpenSheet("cuisine")}
className={`inline-flex items-center rounded-full px-3 py-1.5 ${
cuisineFilter ? "bg-brand-50 dark:bg-brand-900/30 ring-1 ring-brand-300 dark:ring-brand-700" : "bg-gray-100 dark:bg-gray-800"
}`}
>
<Icon name="restaurant" size={14} className={`mr-1 ${cuisineFilter ? "text-brand-500" : "text-gray-400"}`} />
<span className={cuisineFilter ? "text-brand-600 dark:text-brand-400 font-medium" : "text-gray-500 dark:text-gray-400"}>
{cuisineFilter ? (cuisineFilter.includes("|") ? cuisineFilter.split("|")[1] : cuisineFilter) : "장르"}
</span>
<Icon name="expand_more" size={14} className="ml-0.5 text-gray-400" />
</button>
<button
onClick={() => setOpenSheet("price")}
className={`inline-flex items-center rounded-full px-3 py-1.5 ${
priceFilter ? "bg-brand-50 dark:bg-brand-900/30 ring-1 ring-brand-300 dark:ring-brand-700" : "bg-gray-100 dark:bg-gray-800"
}`}
>
<Icon name="payments" size={14} className={`mr-1 ${priceFilter ? "text-brand-500" : "text-gray-400"}`} />
<span className={priceFilter ? "text-brand-600 dark:text-brand-400 font-medium" : "text-gray-500 dark:text-gray-400"}>
{priceFilter || "가격"}
</span>
<Icon name="expand_more" size={14} className="ml-0.5 text-gray-400" />
</button>
{(cuisineFilter || priceFilter) && (
<button onClick={() => { setCuisineFilter(""); setPriceFilter(""); }} className="text-gray-400 hover:text-brand-500">
<Icon name="close" size={14} />
</button>
)}
<span className="text-[10px] text-gray-400 ml-auto tabular-nums">{filteredRestaurants.length}개</span>
</div>
<div className="flex items-center gap-1.5 text-xs">
<button
onClick={() => setOpenSheet("country")}
className={`inline-flex items-center rounded-full px-3 py-1.5 ${
countryFilter ? "bg-brand-50 dark:bg-brand-900/30 ring-1 ring-brand-300 dark:ring-brand-700" : "bg-gray-100 dark:bg-gray-800"
}`}
>
<Icon name="public" size={14} className={`mr-1 ${countryFilter ? "text-brand-500" : "text-gray-400"}`} />
<span className={countryFilter ? "text-brand-600 dark:text-brand-400 font-medium" : "text-gray-500 dark:text-gray-400"}>
{countryFilter || "나라"}
</span>
<Icon name="expand_more" size={14} className="ml-0.5 text-gray-400" />
</button>
{countryFilter && cities.length > 0 && (
<button
onClick={() => setOpenSheet("city")}
className={`inline-flex items-center rounded-full px-3 py-1.5 ${
cityFilter ? "bg-brand-50 dark:bg-brand-900/30 ring-1 ring-brand-300 dark:ring-brand-700" : "bg-gray-100 dark:bg-gray-800"
}`}
>
<span className={cityFilter ? "text-brand-600 dark:text-brand-400 font-medium" : "text-gray-500 dark:text-gray-400"}>
{cityFilter || "시/도"}
</span>
<Icon name="expand_more" size={14} className="ml-0.5 text-gray-400" />
</button>
)}
{cityFilter && districts.length > 0 && (
<button
onClick={() => setOpenSheet("district")}
className={`inline-flex items-center rounded-full px-3 py-1.5 ${
districtFilter ? "bg-brand-50 dark:bg-brand-900/30 ring-1 ring-brand-300 dark:ring-brand-700" : "bg-gray-100 dark:bg-gray-800"
}`}
>
<span className={districtFilter ? "text-brand-600 dark:text-brand-400 font-medium" : "text-gray-500 dark:text-gray-400"}>
{districtFilter || "구/군"}
</span>
<Icon name="expand_more" size={14} className="ml-0.5 text-gray-400" />
</button>
)}
{countryFilter && (
<button onClick={() => { setCountryFilter(""); setCityFilter(""); setDistrictFilter(""); setRegionFlyTo(null); }} className="text-gray-400 hover:text-brand-500">
<Icon name="close" size={14} />
</button>
)}
<button
onClick={() => {
const next = !boundsFilterOn;
setBoundsFilterOn(next);
if (next) {
setCuisineFilter("");
setPriceFilter("");
setCountryFilter("");
setCityFilter("");
setDistrictFilter("");
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
(pos) => { setUserLoc({ lat: pos.coords.latitude, lng: pos.coords.longitude }); setRegionFlyTo({ lat: pos.coords.latitude, lng: pos.coords.longitude, zoom: 15 }); },
() => setRegionFlyTo({ lat: 37.498, lng: 127.0276, zoom: 15 }),
{ timeout: 5000 },
);
} else {
setRegionFlyTo({ lat: 37.498, lng: 127.0276, zoom: 15 });
}
}
}}
className={`inline-flex items-center gap-0.5 rounded-full px-3 py-1.5 transition-colors ${
boundsFilterOn
? "bg-brand-50 dark:bg-brand-900/30 ring-1 ring-brand-300 dark:ring-brand-700 text-brand-600 dark:text-brand-400"
: "bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400"
}`}
>
<Icon name="location_on" size={14} />
<span>{boundsFilterOn ? "내위치 ON" : "내위치"}</span>
</button>
</div>
</>
)}
</div>
</div>
</header>

143
frontend/src/lib/cuisine-icons.ts
View File

@@ -1,49 +1,154 @@
/**
* Cuisine type → Material Symbols icon name mapping.
* 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",
"중식": "ramen_dining",
"중식": "skillet",
"양식": "dinner_dining",
"아시아": "ramen_dining",
"아시아": "restaurant",
"기타": "flatware",
};
// Sub-category overrides for more specific icons
const SUB_ICON_RULES: { keyword: string; icon: string }[] = [
{ keyword: "회/횟집", icon: "set_meal" },
{ keyword: "해산물", icon: "set_meal" },
{ keyword: "백반/한정식", icon: "rice_bowl" },
{ keyword: "국밥/해장국", icon: "soup_kitchen" },
{ keyword: "찌개/전골/탕", icon: "outdoor_grill" },
{ keyword: "삼겹살/돼지구이", icon: "kebab_dining" },
{ keyword: "소고기/한우구이", icon: "kebab_dining" },
{ keyword: "곱창/막창", icon: "kebab_dining" },
{ keyword: "소고기/한우구이", icon: "local_fire_department" },
{ keyword: "곱창/막창", icon: "local_fire_department" },
{ keyword: "닭/오리구이", icon: "takeout_dining" },
{ keyword: "스테이크", icon: "kebab_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: "sake" },
{ 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: "takeout_dining" },
{ keyword: "주점/포차", icon: "local_bar" },
{ keyword: "이자카야", icon: "sake" },
{ keyword: "라멘", icon: "ramen_dining" },
{ keyword: "국밥/해장국", icon: "soup_kitchen" },
{ keyword: "분식", icon: "ramen_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;
// Check sub-category first
for (const rule of SUB_ICON_RULES) {
if (cuisineType.includes(rule.keyword)) return rule.icon;
}
// Fall back to main category (prefix before |)
const main = cuisineType.split("|")[0];
return CUISINE_ICON_MAP[main] || DEFAULT_ICON;
}
// ── Tabler Icons (for genre card chips) ──
// Returns Tabler icon component name (PascalCase without "Icon" prefix)
const TABLER_CUISINE_MAP: Record<string, string> = {
"한식": "BowlChopsticks",
"일식": "Fish",
"중식": "Soup",
"양식": "Pizza",
"아시아": "BowlSpoon",
"기타": "Cookie",
};
const TABLER_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: "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: "Fish" },
{ keyword: "라멘", icon: "Soup" },
{ keyword: "돈카츠", icon: "Meat" },
{ keyword: "텐동/튀김", icon: "EggFried" },
{ keyword: "이자카야", icon: "GlassCocktail" },
{ keyword: "야키니쿠", icon: "Grill" },
{ keyword: "카레", icon: "BowlSpoon" },
{ keyword: "소바/우동", icon: "BowlChopsticks" },
// 중식
{ keyword: "중화요리", icon: "Soup" },
{ keyword: "마라/훠궈", icon: "Pepper" },
{ keyword: "딤섬/만두", icon: "Egg" },
{ keyword: "양꼬치", icon: "Grill" },
// 양식
{ keyword: "파스타/이탈리안", icon: "BowlSpoon" },
{ keyword: "스테이크", icon: "Meat" },
{ keyword: "햄버거", icon: "Burger" },
{ keyword: "피자", icon: "Pizza" },
{ keyword: "프렌치", icon: "GlassChampagne" },
{ keyword: "바베큐", icon: "GrillSpatula" },
{ keyword: "브런치", icon: "EggFried" },
{ keyword: "비건/샐러드", icon: "Salad" },
// 아시아
{ keyword: "베트남", icon: "BowlChopsticks" },
{ keyword: "태국", icon: "Pepper" },
{ keyword: "인도/중동", icon: "BowlSpoon" },
{ keyword: "동남아기타", icon: "BowlSpoon" },
// 기타
{ keyword: "치킨", icon: "Meat" },
{ keyword: "카페/디저트", icon: "Coffee" },
{ keyword: "베이커리", icon: "Bread" },
{ keyword: "뷔페", icon: "Cheese" },
{ keyword: "퓨전", icon: "Cookie" },
];
export function getTablerCuisineIcon(cuisineType: string | null | undefined): string {
if (!cuisineType) return "Bowl";
for (const rule of TABLER_SUB_RULES) {
if (cuisineType.includes(rule.keyword)) return rule.icon;
}
const main = cuisineType.split("|")[0];
return TABLER_CUISINE_MAP[main] || "Bowl";
}