Compare commits
6 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
d3cd1b5d5f | ||
|
|
51dcacc728 | ||
|
|
dc8a8e9b4c | ||
|
|
43fd931824 | ||
|
|
2d41f22b83 | ||
|
|
2a6d307260 |
31
CHANGELOG.md
31
CHANGELOG.md
@@ -6,6 +6,37 @@
|
|||||||
|
|
||||||
## 2026-06-15
|
## 2026-06-15
|
||||||
|
|
||||||
|
### ♿ #301+#302 모달 접근성 + race condition + 필터 상태 동기화 (v0.1.14)
|
||||||
|
- 공통 훅 `frontend/src/lib/hooks/useModalA11y.ts` 신규 (useEscapeKey, useFocusTrap, useBodyScrollLock)
|
||||||
|
- BottomSheet/FilterSheet: role='dialog', aria-modal, aria-label/labelledby, ESC 닫기, focus trap
|
||||||
|
- RestaurantDetail: useEffect cancelled 플래그로 restaurant.id 변경 시 race condition 차단
|
||||||
|
- page.tsx: `exitSearchMode` 헬퍼 → 검색결과 모드에서 필터 변경 시 자동 검색 모드 해제 + 원본 재로드
|
||||||
|
- 후속 분리: #319 (BottomSheet 매직넘버/UX), #320 (필터 정밀도/접근성/테스트)
|
||||||
|
- Refs: #301 #302 (close)
|
||||||
|
|
||||||
|
### 🔧 #316 — backend resource request 재산정 + RollingUpdate 정책 복귀
|
||||||
|
- **변경 전**: cpu 500m/1, mem 768Mi/1536Mi, strategy maxSurge=0/maxUnavailable=1 (임시 패치)
|
||||||
|
- **변경 후**: cpu 300m/800m, mem 512Mi/1024Mi, strategy 25%/25% (기본 복귀)
|
||||||
|
- **근거**: 실측 idle 0.7% CPU, RSS ~305 MB. peak 30-40% 추정 안에서 안전.
|
||||||
|
- **검증**: rollout 후 노드 잔여 330m → 다음 배포 시 두 Pod 공존 가능, 무중단 RollingUpdate 회복.
|
||||||
|
- **다운타임**: 이번 1회 ~25초 (구 Pod 500m 점유 해제 위해 강제 종료). 다음 배포부터 0초.
|
||||||
|
- **설계서**: `docs/design/316-backend-resource-rightsize/README.md` (Approved).
|
||||||
|
- Refs: #316 (close)
|
||||||
|
|
||||||
|
### 🏗 OKE 인프라 — 노드 다운사이징 + LB 정리
|
||||||
|
- **Orphan Classic LB 삭제**: 132.226.175.247 (100Mbps shape, OKEclusterName 태그만 남고 DNS/Service 참조 없음) → 비용 절감
|
||||||
|
- **노드풀 교체 (블루-그린)**: `pool1` (2 노드 × 2 OCPU / 8 GB) → `pool2` (2 노드 × 1 OCPU / 6 GB)
|
||||||
|
- 사유: ARM64 Always Free 쿼터 변경 (4 OCPU/24 GB → 2 OCPU/12 GB)
|
||||||
|
- 절차: 새 노드풀 생성 → 기존 노드 cordon + drain → 기존 노드풀 삭제 → 무중단 확인
|
||||||
|
- **backend Deployment strategy 임시 패치**: `maxSurge: 25% → 0`, `maxUnavailable: 25% → 1`
|
||||||
|
- 노드당 1 OCPU 환경에서 backend(500m 요청) 두 Pod 공존 불가 → rollingUpdate 데드락 회피
|
||||||
|
- **⚠️ 다음 배포 시 ~30초 다운타임** 발생. 후속 이슈에서 resource request 재산정 권고.
|
||||||
|
|
||||||
|
### 🚀 운영 배포 v0.1.13
|
||||||
|
- 보안 핫픽스 #267 배포 (백엔드만)
|
||||||
|
- OCIR push + kubectl rolling update + git tag v0.1.13 완료
|
||||||
|
- 검증: `Anonymous /api/admin/users → 403`, `Bad-token → 403`, `정상 동작 영향 없음`
|
||||||
|
|
||||||
### 🔴 보안 핫픽스 #267 — AdminUserController GET 4종 권한 우회
|
### 🔴 보안 핫픽스 #267 — AdminUserController GET 4종 권한 우회
|
||||||
- `listUsers`, `userFavorites`, `userReviews`, `userMemos`가 인증만 요구하고 admin 검사를 하지 않아 일반 사용자 토큰으로 전체 사용자 목록 및 타인 활동 조회 가능했음
|
- `listUsers`, `userFavorites`, `userReviews`, `userMemos`가 인증만 요구하고 admin 검사를 하지 않아 일반 사용자 토큰으로 전체 사용자 목록 및 타인 활동 조회 가능했음
|
||||||
- 4개 메서드 첫 줄에 `AuthUtil.requireAdmin()` 추가 → non-admin 호출 시 403
|
- 4개 메서드 첫 줄에 `AuthUtil.requireAdmin()` 추가 → non-admin 호출 시 403
|
||||||
|
|||||||
@@ -3,6 +3,7 @@ package com.tasteby.service;
|
|||||||
import com.tasteby.domain.DaemonConfig;
|
import com.tasteby.domain.DaemonConfig;
|
||||||
import org.slf4j.Logger;
|
import org.slf4j.Logger;
|
||||||
import org.slf4j.LoggerFactory;
|
import org.slf4j.LoggerFactory;
|
||||||
|
import org.springframework.beans.factory.annotation.Value;
|
||||||
import org.springframework.scheduling.annotation.Scheduled;
|
import org.springframework.scheduling.annotation.Scheduled;
|
||||||
import org.springframework.stereotype.Service;
|
import org.springframework.stereotype.Service;
|
||||||
|
|
||||||
@@ -22,6 +23,9 @@ public class DaemonScheduler {
|
|||||||
private final PipelineService pipelineService;
|
private final PipelineService pipelineService;
|
||||||
private final CacheService cacheService;
|
private final CacheService cacheService;
|
||||||
|
|
||||||
|
@Value("${app.daemon.enabled:true}")
|
||||||
|
private boolean instanceEnabled;
|
||||||
|
|
||||||
public DaemonScheduler(DaemonConfigService daemonConfigService,
|
public DaemonScheduler(DaemonConfigService daemonConfigService,
|
||||||
YouTubeService youTubeService,
|
YouTubeService youTubeService,
|
||||||
PipelineService pipelineService,
|
PipelineService pipelineService,
|
||||||
@@ -34,6 +38,10 @@ public class DaemonScheduler {
|
|||||||
|
|
||||||
@Scheduled(fixedDelay = 30_000) // Check every 30 seconds
|
@Scheduled(fixedDelay = 30_000) // Check every 30 seconds
|
||||||
public void run() {
|
public void run() {
|
||||||
|
// 인스턴스 차원 차단(dev/prod 동일 DB 공유 환경에서 dev 쪽 동시 폴링 방지).
|
||||||
|
// dev .env: DAEMON_ENABLED=false → 이 인스턴스는 스케줄러 동작 안 함.
|
||||||
|
// prod: 미설정 → 기본 true.
|
||||||
|
if (!instanceEnabled) return;
|
||||||
try {
|
try {
|
||||||
var config = getConfig();
|
var config = getConfig();
|
||||||
if (config == null) return;
|
if (config == null) return;
|
||||||
|
|||||||
@@ -59,6 +59,7 @@ public class YouTubeService {
|
|||||||
String uploadsPlaylistId = "UU" + channelId.substring(2);
|
String uploadsPlaylistId = "UU" + channelId.substring(2);
|
||||||
List<Map<String, Object>> allVideos = new ArrayList<>();
|
List<Map<String, Object>> allVideos = new ArrayList<>();
|
||||||
String nextPage = null;
|
String nextPage = null;
|
||||||
|
boolean stopPaging = false;
|
||||||
|
|
||||||
try {
|
try {
|
||||||
do {
|
do {
|
||||||
@@ -88,7 +89,7 @@ public class YouTubeService {
|
|||||||
// publishedAfter 필터: 이미 스캔한 영상 이후만
|
// publishedAfter 필터: 이미 스캔한 영상 이후만
|
||||||
if (publishedAfter != null && publishedAt.compareTo(publishedAfter) <= 0) {
|
if (publishedAfter != null && publishedAt.compareTo(publishedAfter) <= 0) {
|
||||||
// 업로드 재생목록은 최신순이므로 이전 날짜 만나면 중단
|
// 업로드 재생목록은 최신순이므로 이전 날짜 만나면 중단
|
||||||
nextPage = null;
|
stopPaging = true;
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -105,7 +106,9 @@ public class YouTubeService {
|
|||||||
}
|
}
|
||||||
allVideos.addAll(pageVideos);
|
allVideos.addAll(pageVideos);
|
||||||
|
|
||||||
if (nextPage != null || data.has("nextPageToken")) {
|
if (stopPaging) {
|
||||||
|
nextPage = null;
|
||||||
|
} else {
|
||||||
nextPage = data.has("nextPageToken") ? data.path("nextPageToken").asText() : null;
|
nextPage = data.has("nextPageToken") ? data.path("nextPageToken").asText() : null;
|
||||||
}
|
}
|
||||||
} while (nextPage != null);
|
} while (nextPage != null);
|
||||||
|
|||||||
@@ -59,6 +59,11 @@ app:
|
|||||||
cache:
|
cache:
|
||||||
ttl-seconds: 600
|
ttl-seconds: 600
|
||||||
|
|
||||||
|
daemon:
|
||||||
|
# 인스턴스 차원 스케줄러 활성화. dev/prod가 같은 DB를 공유하므로
|
||||||
|
# dev .env에 DAEMON_ENABLED=false를 설정해 dev 폴링을 끄고 prod만 동작시킨다.
|
||||||
|
enabled: ${DAEMON_ENABLED:true}
|
||||||
|
|
||||||
mybatis:
|
mybatis:
|
||||||
mapper-locations: classpath:mybatis/mapper/*.xml
|
mapper-locations: classpath:mybatis/mapper/*.xml
|
||||||
config-location: classpath:mybatis/mybatis-config.xml
|
config-location: classpath:mybatis/mybatis-config.xml
|
||||||
|
|||||||
127
docs/design/316-backend-resource-rightsize/README.md
Normal file
127
docs/design/316-backend-resource-rightsize/README.md
Normal file
@@ -0,0 +1,127 @@
|
|||||||
|
# 설계서: backend resource request 재산정 (#316)
|
||||||
|
|
||||||
|
> **상태**: Approved <!-- Draft | Approved | Superseded -->
|
||||||
|
> **작성**: [AI] Architect · **최종수정**: 2026-06-15
|
||||||
|
> **추적성** — Redmine: #316 · 관련 ADR: 없음 · 부모 이슈: #267 (현행화/배포 컨텍스트)
|
||||||
|
> · 구현 파일: `k8s/backend-deployment.yaml`
|
||||||
|
> · 테스트: kubectl rollout 무중단 (수동 검증) · 자동 테스트 없음
|
||||||
|
|
||||||
|
## 1. 목적 (Why)
|
||||||
|
|
||||||
|
노드 다운사이징(2 × 2 OCPU/8 GB → 2 × 1 OCPU/6 GB) 이후 `backend` Deployment의 CPU request 500m이 노드 가용 자원의 절반을 차지하여, RollingUpdate 시 신/구 Pod 공존이 불가능. 임시로 `maxSurge=0, maxUnavailable=1` 패치(매 배포 ~30초 다운타임) 상태를 합리화하여 25%/25% 정책으로 복귀하고 무중단 배포를 회복한다.
|
||||||
|
|
||||||
|
## 2. 범위 (Scope)
|
||||||
|
|
||||||
|
- **포함**
|
||||||
|
- `k8s/backend-deployment.yaml`의 `resources.requests`/`limits` 재산정.
|
||||||
|
- 같은 파일의 `spec.strategy` 또는 라이브 deploy의 strategy를 25%/25%로 복귀(이미 패치되어 있다면 디폴트로 환원).
|
||||||
|
- **제외 (out of scope)**
|
||||||
|
- frontend/redis 등 다른 Deployment.
|
||||||
|
- JVM heap/-XX 옵션(별도 튜닝 이슈).
|
||||||
|
- HPA, VPA 도입.
|
||||||
|
- 노드 수/형상 추가 변경.
|
||||||
|
|
||||||
|
## 3. 인수조건 (Acceptance Criteria)
|
||||||
|
|
||||||
|
- [ ] backend CPU request ≤ 300m, memory request ≤ 512Mi (실측 ~305 MB 사용 기준 여유 포함).
|
||||||
|
- [ ] limit은 노드 한도(1 OCPU / 6 GB) 안에서 cpu ≤ 800m, mem ≤ 1Gi.
|
||||||
|
- [ ] Deployment strategy: `maxSurge: 25%`, `maxUnavailable: 25%`(또는 default).
|
||||||
|
- [ ] `kubectl apply` 직후 새 Pod이 Pending 없이 Running 진입.
|
||||||
|
- [ ] 적용 동안 `https://www.tasteby.net/api/health` 가 끊김 없이 200 응답.
|
||||||
|
- [ ] 변경 사항을 git 커밋·push.
|
||||||
|
|
||||||
|
## 4. 컨텍스트 & 제약
|
||||||
|
|
||||||
|
- 의존성: OKE 1.34.2, ARM64 노드 1 OCPU/6 GB × 2.
|
||||||
|
- 노드 가용 CPU(allocatable, 시스템 데몬 차감 후): 약 940-960m per node.
|
||||||
|
- 노드 가용 메모리(allocatable): 약 5.0-5.3 GiB per node.
|
||||||
|
- 같은 노드에 frontend(200m/256Mi), kube-system DaemonSet들(약 200m/300Mi 합계), 가끔 redis/cert-manager Pod.
|
||||||
|
- 두 backend Pod이 한 노드에 공존하지 않아도 됨(replicas=1이지만 RollingUpdate 동안 일시적으로 2개).
|
||||||
|
- 제약: 비용 X(코드 변경 없음), 운영 영향(작지만 rollout 한 번 발생).
|
||||||
|
- 가정: 운영 실측 idle CPU 0.7%, peak 추정 30-40% (영상 추출·벡터 검색 시).
|
||||||
|
|
||||||
|
## 5. 아키텍처 개요
|
||||||
|
|
||||||
|
```
|
||||||
|
git: k8s/backend-deployment.yaml
|
||||||
|
│
|
||||||
|
▼ (수정)
|
||||||
|
spec.replicas: 1 (변경 없음)
|
||||||
|
spec.strategy:
|
||||||
|
type: RollingUpdate
|
||||||
|
rollingUpdate:
|
||||||
|
maxSurge: 25% (=0 → 25%, 임시 패치 복귀)
|
||||||
|
maxUnavailable: 25% (=1 → 25%, 임시 패치 복귀)
|
||||||
|
spec.template.spec.containers[0].resources:
|
||||||
|
requests: { cpu: 300m, memory: 512Mi } (500m/768Mi → 다운)
|
||||||
|
limits: { cpu: 800m, memory: 1024Mi } (1/1536 → 다운)
|
||||||
|
│
|
||||||
|
▼ (kubectl apply)
|
||||||
|
OKE rolling update → 새 Pod 1개 surge → Ready → 구 Pod 종료
|
||||||
|
│
|
||||||
|
▼
|
||||||
|
www.tasteby.net 트래픽 무중단 (Ingress → Service → Pod, 100ms 응답 유지)
|
||||||
|
```
|
||||||
|
|
||||||
|
I/O 경계: 매니페스트(선언)와 클러스터 상태(런타임)는 `kubectl apply`로 단방향 동기화. 검증은 `rollout status` + 외부 curl.
|
||||||
|
|
||||||
|
## 6. 데이터 모델
|
||||||
|
|
||||||
|
| 필드 | 변경 전 | 변경 후 | 근거 |
|
||||||
|
|------|---------|---------|------|
|
||||||
|
| `resources.requests.cpu` | `500m` | `300m` | idle 0.7%, peak 추정 30%, 1 OCPU 노드에서 frontend(200m) + 잔여 시스템(~200m) 후 여유 |
|
||||||
|
| `resources.requests.memory` | `768Mi` | `512Mi` | 실측 ~305 MB, JVM heap·코드캐시·메타스페이스 여유 |
|
||||||
|
| `resources.limits.cpu` | `1` | `800m` | 1 OCPU 노드에서 throttle 방지 + 다른 Pod 여유 |
|
||||||
|
| `resources.limits.memory` | `1536Mi` | `1024Mi` | OOM 위험 줄이고 노드당 5 GiB allocatable에서 안정 |
|
||||||
|
| `strategy.rollingUpdate.maxSurge` | `0` (임시) | `25%` | 무중단 RollingUpdate 복귀 |
|
||||||
|
| `strategy.rollingUpdate.maxUnavailable` | `1` (임시) | `25%` | 동일 |
|
||||||
|
|
||||||
|
## 7. 함수 명세
|
||||||
|
|
||||||
|
매니페스트 변경이라 코드 함수 없음. **변경 단위 표**:
|
||||||
|
|
||||||
|
| 변경 단위 | 위치 | 책임 | 검증 |
|
||||||
|
|-----------|------|------|------|
|
||||||
|
| `requests.cpu` 다운 | `k8s/backend-deployment.yaml:37` | 새 Pod 스케줄링 가능 | `kubectl describe pod` Events에 FailedScheduling 없음 |
|
||||||
|
| `requests.memory` 다운 | `k8s/backend-deployment.yaml:38` | 같음 + OOM 안전 | Pod RSS / requests = 70% 이하 |
|
||||||
|
| `limits.cpu` 다운 | `k8s/backend-deployment.yaml:40` | throttle 제어 | `cpu.stat` throttled_usec 안 늘어남 |
|
||||||
|
| `limits.memory` 다운 | `k8s/backend-deployment.yaml:41` | OOM 보호 | OOMKilled 없음 |
|
||||||
|
| `strategy` 추가 | `k8s/backend-deployment.yaml` spec | 25%/25% 명시 | live patch와 GitOps 일치 |
|
||||||
|
|
||||||
|
> 모두 단순 선언적 변경. 복잡 함수 별도 fn-*.md 불필요.
|
||||||
|
|
||||||
|
## 8. 흐름 / 알고리즘
|
||||||
|
|
||||||
|
1. `k8s/backend-deployment.yaml` 편집(resources + strategy).
|
||||||
|
2. `kubectl apply -f k8s/backend-deployment.yaml`.
|
||||||
|
3. 신 Pod 1개 surge → Ready 대기 (~30-60초, JVM startup).
|
||||||
|
4. Ready 되면 구 Pod 종료(graceful, terminationGracePeriodSeconds 기본 30초).
|
||||||
|
5. `kubectl rollout status deploy/backend -n tasteby` PASS.
|
||||||
|
6. 외부 `curl https://www.tasteby.net/api/health` 연속 200 확인.
|
||||||
|
|
||||||
|
## 9. 엣지케이스 & 에러 처리
|
||||||
|
|
||||||
|
- **JVM startup이 readinessProbe initialDelaySeconds(30s)보다 길면**: 새 Pod이 Ready 못 받음 → 구 Pod 유지 → rollout 진행 안 됨. 현재 backend는 보통 20-25초에 Ready.
|
||||||
|
- **노드 가용 메모리 부족**: 두 backend Pod이 한 노드에 갈 경우 ~1 GiB 차지. frontend + DaemonSet 합치면 압박 가능. scheduler가 적절히 분산 기대 (replicas=1 surge 시).
|
||||||
|
- **OCIR 풀 실패**: imagePullBackOff 시 rollout 중단. 이미지 이미 풀돼 있으므로 영향 적음.
|
||||||
|
- **rollback**: 문제 시 `kubectl rollout undo deploy/backend` 또는 git revert + apply.
|
||||||
|
|
||||||
|
## 10. 테스트 계획
|
||||||
|
|
||||||
|
- 수동: 적용 직후 새 Pod Running 확인 + 외부 health 200 연속(약 2분간 5초 간격 polling).
|
||||||
|
- 부하 측정 후속: 운영 부하 24시간 관찰 → CPU throttle/OOM 없음 확인 (별도 follow-up).
|
||||||
|
- 자동 테스트: 해당 없음 (인프라 매니페스트).
|
||||||
|
|
||||||
|
## 11. 리스크 & 대안 검토
|
||||||
|
|
||||||
|
- **선택**: cpu 300m / mem 512Mi.
|
||||||
|
- **대안 A**: cpu 250m / mem 384Mi — 더 여유롭지만 peak 시 throttle 가능성.
|
||||||
|
- **대안 B**: cpu 400m / mem 640Mi — 안전 마진 크지만 25%/25% 복귀해도 두 Pod 공존 불가 가능(노드 잔여 CPU 부족).
|
||||||
|
- **대안 C**: replicas=2 + topologySpreadConstraints — 가용성↑이지만 비용·리소스↑, 현재 노드 한도에서 부적합.
|
||||||
|
- **트레이드오프**: 선택안은 peak에서 약간 빠듯하나 limits 800m로 burst 허용. 운영 24시간 관찰 후 재조정.
|
||||||
|
|
||||||
|
## 12. 미해결 질문
|
||||||
|
|
||||||
|
- peak 시(영상 추출 동시 다수) CPU 실제 사용량 — 현재 metrics-server 미설치라 정확 측정 불가. 추후 설치 후 재산정.
|
||||||
|
- HPA 도입 여부 — 노드 1 OCPU에선 의미 적음. 노드 추가 후 검토.
|
||||||
|
- replicas=2 가용성 강화 — 새 노드 형상에서 메모리 압박 우려, 별도 결정 필요.
|
||||||
@@ -13,9 +13,10 @@ import RestaurantDetail from "@/components/RestaurantDetail";
|
|||||||
import MyReviewsList from "@/components/MyReviewsList";
|
import MyReviewsList from "@/components/MyReviewsList";
|
||||||
import BottomSheet from "@/components/BottomSheet";
|
import BottomSheet from "@/components/BottomSheet";
|
||||||
import FilterSheet, { FilterOption } from "@/components/FilterSheet";
|
import FilterSheet, { FilterOption } from "@/components/FilterSheet";
|
||||||
import { getCuisineIcon, getTablerCuisineIcon } from "@/lib/cuisine-icons";
|
import { getCuisineIcon, getPhosphorCuisineIcon } from "@/lib/cuisine-icons";
|
||||||
import Icon from "@/components/Icon";
|
import Icon from "@/components/Icon";
|
||||||
import * as TablerIcons from "@tabler/icons-react";
|
import FoodIcon from "@/components/FoodIcon";
|
||||||
|
import * as PhosphorIcons from "@phosphor-icons/react";
|
||||||
|
|
||||||
function useDragScroll() {
|
function useDragScroll() {
|
||||||
const ref = useRef<HTMLDivElement>(null);
|
const ref = useRef<HTMLDivElement>(null);
|
||||||
@@ -73,16 +74,24 @@ function matchCuisineFilter(cuisineType: string | null, filter: string): boolean
|
|||||||
|
|
||||||
const PRICE_GROUPS: { label: string; test: (p: string) => boolean }[] = [
|
const PRICE_GROUPS: { label: string; test: (p: string) => boolean }[] = [
|
||||||
{
|
{
|
||||||
label: "저렴 (~1만원)",
|
label: "저렴 (~5천원)",
|
||||||
test: (p) => /저렴|가성비|착한|만원 이하|[3-9]천원|^\d[,.]?\d*천원/.test(p) || /^[1]만원대$/.test(p) || /^[5-9],?\d{3}원/.test(p),
|
test: (p) => /저렴|착한|[3-5]천원대?$|^\d천원$/.test(p),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "가성비 (5천~1만원)",
|
||||||
|
test: (p) => /가성비|만원 이하|[6-9]천원|^1만원대$|^[5-9],?\d{3}원/.test(p),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "보통 (1~3만원)",
|
label: "보통 (1~3만원)",
|
||||||
test: (p) => /[1-2]만원대|1-[23]만|인당 [12]\d?,?\d*원|1[2-9],?\d{3}원|2[0-9],?\d{3}원/.test(p),
|
test: (p) => /[1-2]만원대|1-[23]만|인당 [12]\d?,?\d*원|1[2-9],?\d{3}원|2[0-9],?\d{3}원/.test(p),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "고가 (3만원~)",
|
label: "프리미엄 (3~5만원)",
|
||||||
test: (p) => /[3-9]만원|고가|높은|묵직|살벌|10만원|5만원|4만원|6만원/.test(p),
|
test: (p) => /[3-4]만원대?|3-[45]만|인당 [34]\d?,?\d*원|3[0-9],?\d{3}원|4[0-9],?\d{3}원/.test(p),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "럭셔리 (5만원~)",
|
||||||
|
test: (p) => /[5-9]만원|고가|10만원|[1-9]\d만원|인당 [5-9]\d?,?\d*원|5[0-9],?\d{3}원|[6-9][0-9],?\d{3}원/.test(p),
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
@@ -304,16 +313,18 @@ export default function Home() {
|
|||||||
api.recordVisit().then(() => api.getVisits().then(setVisits)).catch(console.error);
|
api.recordVisit().then(() => api.getVisits().then(setVisits)).catch(console.error);
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
// Load all restaurants on mount
|
// Load restaurants on mount and when channel filter changes
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
setIsSearchResult(false);
|
setIsSearchResult(false);
|
||||||
|
const params: { limit: number; channel?: string } = { limit: 500 };
|
||||||
|
if (channelFilter) params.channel = channelFilter;
|
||||||
api
|
api
|
||||||
.getRestaurants({ limit: 500 })
|
.getRestaurants(params)
|
||||||
.then(setRestaurants)
|
.then(setRestaurants)
|
||||||
.catch(console.error)
|
.catch(console.error)
|
||||||
.finally(() => setLoading(false));
|
.finally(() => setLoading(false));
|
||||||
}, []);
|
}, [channelFilter]);
|
||||||
|
|
||||||
// Auto-select region from user's geolocation (once)
|
// Auto-select region from user's geolocation (once)
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@@ -393,7 +404,16 @@ export default function Home() {
|
|||||||
}
|
}
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
// 검색결과 모드에서 필터 변경 시 검색 결과가 무시되는 결함(#302) 해결.
|
||||||
|
// 검색 모드 플래그를 풀고 원본 restaurants를 다시 로드한다.
|
||||||
|
const exitSearchMode = useCallback(() => {
|
||||||
|
setIsSearchResult(false);
|
||||||
|
setResetCount((c) => c + 1);
|
||||||
|
api.getRestaurants({ limit: 500 }).then(setRestaurants).catch(() => {});
|
||||||
|
}, []);
|
||||||
|
|
||||||
const handleCountryChange = useCallback((country: string) => {
|
const handleCountryChange = useCallback((country: string) => {
|
||||||
|
if (isSearchResult) exitSearchMode();
|
||||||
setCountryFilter(country);
|
setCountryFilter(country);
|
||||||
setCityFilter("");
|
setCityFilter("");
|
||||||
setDistrictFilter("");
|
setDistrictFilter("");
|
||||||
@@ -404,9 +424,10 @@ export default function Home() {
|
|||||||
return p && p.country === country;
|
return p && p.country === country;
|
||||||
});
|
});
|
||||||
setRegionFlyTo(computeFlyTo(matched));
|
setRegionFlyTo(computeFlyTo(matched));
|
||||||
}, [restaurants]);
|
}, [restaurants, isSearchResult, exitSearchMode]);
|
||||||
|
|
||||||
const handleCityChange = useCallback((city: string) => {
|
const handleCityChange = useCallback((city: string) => {
|
||||||
|
if (isSearchResult) exitSearchMode();
|
||||||
setCityFilter(city);
|
setCityFilter(city);
|
||||||
setDistrictFilter("");
|
setDistrictFilter("");
|
||||||
if (!city) {
|
if (!city) {
|
||||||
@@ -423,9 +444,10 @@ export default function Home() {
|
|||||||
return p && p.country === countryFilter && p.city === city;
|
return p && p.country === countryFilter && p.city === city;
|
||||||
});
|
});
|
||||||
setRegionFlyTo(computeFlyTo(matched));
|
setRegionFlyTo(computeFlyTo(matched));
|
||||||
}, [restaurants, countryFilter]);
|
}, [restaurants, countryFilter, isSearchResult, exitSearchMode]);
|
||||||
|
|
||||||
const handleDistrictChange = useCallback((district: string) => {
|
const handleDistrictChange = useCallback((district: string) => {
|
||||||
|
if (isSearchResult) exitSearchMode();
|
||||||
setDistrictFilter(district);
|
setDistrictFilter(district);
|
||||||
if (!district) {
|
if (!district) {
|
||||||
const matched = restaurants.filter((r) => {
|
const matched = restaurants.filter((r) => {
|
||||||
@@ -440,7 +462,7 @@ export default function Home() {
|
|||||||
return p && p.country === countryFilter && p.city === cityFilter && p.district === district;
|
return p && p.country === countryFilter && p.city === cityFilter && p.district === district;
|
||||||
});
|
});
|
||||||
setRegionFlyTo(computeFlyTo(matched));
|
setRegionFlyTo(computeFlyTo(matched));
|
||||||
}, [restaurants, countryFilter, cityFilter]);
|
}, [restaurants, countryFilter, cityFilter, isSearchResult, exitSearchMode]);
|
||||||
|
|
||||||
const handleReset = useCallback(() => {
|
const handleReset = useCallback(() => {
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
@@ -789,10 +811,10 @@ export default function Home() {
|
|||||||
{(cuisineFilter || priceFilter) && (
|
{(cuisineFilter || priceFilter) && (
|
||||||
<button
|
<button
|
||||||
onClick={() => { setCuisineFilter(""); setPriceFilter(""); }}
|
onClick={() => { setCuisineFilter(""); setPriceFilter(""); }}
|
||||||
className="text-gray-400 hover:text-brand-500 transition-colors"
|
className="p-1.5 -mr-1 text-gray-400 hover:text-brand-500 transition-colors touch-manipulation"
|
||||||
title="음식 필터 초기화"
|
title="음식 필터 초기화"
|
||||||
>
|
>
|
||||||
<Icon name="close" size={12} />
|
<Icon name="close" size={14} />
|
||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
@@ -848,10 +870,10 @@ export default function Home() {
|
|||||||
{countryFilter && (
|
{countryFilter && (
|
||||||
<button
|
<button
|
||||||
onClick={() => { setCountryFilter(""); setCityFilter(""); setDistrictFilter(""); setRegionFlyTo(null); }}
|
onClick={() => { setCountryFilter(""); setCityFilter(""); setDistrictFilter(""); setRegionFlyTo(null); }}
|
||||||
className="text-gray-400 hover:text-brand-500 transition-colors"
|
className="p-1.5 -mr-1 text-gray-400 hover:text-brand-500 transition-colors touch-manipulation"
|
||||||
title="지역 필터 초기화"
|
title="지역 필터 초기화"
|
||||||
>
|
>
|
||||||
<Icon name="close" size={12} />
|
<Icon name="close" size={14} />
|
||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
@@ -867,9 +889,9 @@ export default function Home() {
|
|||||||
setDistrictFilter("");
|
setDistrictFilter("");
|
||||||
setRegionFlyTo(null);
|
setRegionFlyTo(null);
|
||||||
}}
|
}}
|
||||||
className="flex items-center gap-1 rounded-lg px-2 py-1 bg-gray-50 dark:bg-gray-800/50 text-gray-500 dark:text-gray-400 hover:text-brand-500 transition-colors"
|
className="flex items-center gap-1 rounded-lg px-2.5 py-1.5 bg-gray-50 dark:bg-gray-800/50 text-gray-500 dark:text-gray-400 hover:text-brand-500 transition-colors touch-manipulation"
|
||||||
>
|
>
|
||||||
<Icon name="close" size={12} />
|
<Icon name="close" size={14} />
|
||||||
<span>전체보기</span>
|
<span>전체보기</span>
|
||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
@@ -999,10 +1021,10 @@ export default function 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">
|
<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 = [
|
const allCards = [
|
||||||
{ label: "전체", value: "", icon: "Bowl" },
|
{ label: "전체", value: "", icon: "ForkKnife" },
|
||||||
...CUISINE_TAXONOMY.flatMap((g) => [
|
...CUISINE_TAXONOMY.flatMap((g) => [
|
||||||
{ label: g.category, value: g.category, icon: getTablerCuisineIcon(g.category) },
|
{ label: g.category, value: g.category, icon: getPhosphorCuisineIcon(g.category) },
|
||||||
...g.items.map((item) => ({ label: item, value: `${g.category}|${item}`, icon: getTablerCuisineIcon(`${g.category}|${item}`) })),
|
...g.items.map((item) => ({ label: item, value: `${g.category}|${item}`, icon: getPhosphorCuisineIcon(`${g.category}|${item}`) })),
|
||||||
]),
|
]),
|
||||||
];
|
];
|
||||||
return allCards.map((card) => {
|
return allCards.map((card) => {
|
||||||
@@ -1012,7 +1034,7 @@ export default function Home() {
|
|||||||
: isCategory
|
: isCategory
|
||||||
? cuisineFilter === card.value || cuisineFilter.startsWith(card.value + "|")
|
? cuisineFilter === card.value || cuisineFilter.startsWith(card.value + "|")
|
||||||
: cuisineFilter === 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;
|
const PhIcon = (PhosphorIcons as unknown as Record<string, React.ComponentType<{ size?: number; weight?: string; className?: string }>>)[card.icon] || PhosphorIcons.ForkKnife;
|
||||||
return (
|
return (
|
||||||
<button
|
<button
|
||||||
key={card.value || "__all__"}
|
key={card.value || "__all__"}
|
||||||
@@ -1029,7 +1051,11 @@ export default function Home() {
|
|||||||
: "bg-white border border-gray-100 text-gray-500"
|
: "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"} />
|
{card.icon.startsWith("food:") ? (
|
||||||
|
<FoodIcon name={card.icon.slice(5)} size={22} className={selected ? "text-white" : isCategory ? "text-brand-500" : "text-gray-400"} />
|
||||||
|
) : (
|
||||||
|
<PhIcon size={22} 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>
|
<span className={`text-[11px] whitespace-nowrap ${isCategory ? "font-semibold" : "font-medium"}`}>{card.label}</span>
|
||||||
</button>
|
</button>
|
||||||
);
|
);
|
||||||
@@ -1459,7 +1485,7 @@ export default function Home() {
|
|||||||
title="음식 장르"
|
title="음식 장르"
|
||||||
options={cuisineOptions}
|
options={cuisineOptions}
|
||||||
value={cuisineFilter}
|
value={cuisineFilter}
|
||||||
onChange={(v) => { setCuisineFilter(v); if (v) setBoundsFilterOn(false); }}
|
onChange={(v) => { if (isSearchResult) exitSearchMode(); setCuisineFilter(v); if (v) setBoundsFilterOn(false); }}
|
||||||
/>
|
/>
|
||||||
<FilterSheet
|
<FilterSheet
|
||||||
open={openSheet === "price"}
|
open={openSheet === "price"}
|
||||||
@@ -1467,7 +1493,7 @@ export default function Home() {
|
|||||||
title="가격대"
|
title="가격대"
|
||||||
options={priceOptions}
|
options={priceOptions}
|
||||||
value={priceFilter}
|
value={priceFilter}
|
||||||
onChange={(v) => { setPriceFilter(v); if (v) setBoundsFilterOn(false); }}
|
onChange={(v) => { if (isSearchResult) exitSearchMode(); setPriceFilter(v); if (v) setBoundsFilterOn(false); }}
|
||||||
/>
|
/>
|
||||||
<FilterSheet
|
<FilterSheet
|
||||||
open={openSheet === "country"}
|
open={openSheet === "country"}
|
||||||
|
|||||||
@@ -1,23 +1,28 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { useCallback, useEffect, useRef, useState } from "react";
|
import { useCallback, useEffect, useRef, useState } from "react";
|
||||||
|
import { useEscapeKey, useFocusTrap } from "@/lib/hooks/useModalA11y";
|
||||||
|
|
||||||
interface BottomSheetProps {
|
interface BottomSheetProps {
|
||||||
open: boolean;
|
open: boolean;
|
||||||
onClose: () => void;
|
onClose: () => void;
|
||||||
children: React.ReactNode;
|
children: React.ReactNode;
|
||||||
|
ariaLabel?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
const SNAP_POINTS = { PEEK: 0.4, HALF: 0.55, FULL: 0.92 };
|
const SNAP_POINTS = { PEEK: 0.4, HALF: 0.55, FULL: 0.92 };
|
||||||
const VELOCITY_THRESHOLD = 0.5;
|
const VELOCITY_THRESHOLD = 0.5;
|
||||||
|
|
||||||
export default function BottomSheet({ open, onClose, children }: BottomSheetProps) {
|
export default function BottomSheet({ open, onClose, children, ariaLabel = "상세 정보" }: BottomSheetProps) {
|
||||||
const sheetRef = useRef<HTMLDivElement>(null);
|
const sheetRef = useRef<HTMLDivElement>(null);
|
||||||
const contentRef = useRef<HTMLDivElement>(null);
|
const contentRef = useRef<HTMLDivElement>(null);
|
||||||
const [height, setHeight] = useState(SNAP_POINTS.PEEK);
|
const [height, setHeight] = useState(SNAP_POINTS.PEEK);
|
||||||
const [dragging, setDragging] = useState(false);
|
const [dragging, setDragging] = useState(false);
|
||||||
const dragState = useRef({ startY: 0, startH: 0, lastY: 0, lastTime: 0 });
|
const dragState = useRef({ startY: 0, startH: 0, lastY: 0, lastTime: 0 });
|
||||||
|
|
||||||
|
useEscapeKey(open, onClose);
|
||||||
|
useFocusTrap(open, sheetRef);
|
||||||
|
|
||||||
// Reset to peek when opened
|
// Reset to peek when opened
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (open) setHeight(SNAP_POINTS.PEEK);
|
if (open) setHeight(SNAP_POINTS.PEEK);
|
||||||
@@ -89,6 +94,10 @@ export default function BottomSheet({ open, onClose, children }: BottomSheetProp
|
|||||||
{/* Sheet */}
|
{/* Sheet */}
|
||||||
<div
|
<div
|
||||||
ref={sheetRef}
|
ref={sheetRef}
|
||||||
|
role="dialog"
|
||||||
|
aria-modal="true"
|
||||||
|
aria-label={ariaLabel}
|
||||||
|
tabIndex={-1}
|
||||||
className="fixed bottom-0 left-0 right-0 z-50 md:hidden flex flex-col bg-surface/85 backdrop-blur-xl rounded-t-2xl shadow-2xl"
|
className="fixed bottom-0 left-0 right-0 z-50 md:hidden flex flex-col bg-surface/85 backdrop-blur-xl rounded-t-2xl shadow-2xl"
|
||||||
style={{
|
style={{
|
||||||
height: `${height * 100}vh`,
|
height: `${height * 100}vh`,
|
||||||
|
|||||||
@@ -1,7 +1,8 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { useEffect, useRef } from "react";
|
import { useRef } from "react";
|
||||||
import Icon from "@/components/Icon";
|
import Icon from "@/components/Icon";
|
||||||
|
import { useEscapeKey, useFocusTrap, useBodyScrollLock } from "@/lib/hooks/useModalA11y";
|
||||||
|
|
||||||
export interface FilterOption {
|
export interface FilterOption {
|
||||||
label: string;
|
label: string;
|
||||||
@@ -20,12 +21,11 @@ interface FilterSheetProps {
|
|||||||
|
|
||||||
export default function FilterSheet({ open, onClose, title, options, value, onChange }: FilterSheetProps) {
|
export default function FilterSheet({ open, onClose, title, options, value, onChange }: FilterSheetProps) {
|
||||||
const sheetRef = useRef<HTMLDivElement>(null);
|
const sheetRef = useRef<HTMLDivElement>(null);
|
||||||
|
const titleId = "filter-sheet-title";
|
||||||
|
|
||||||
useEffect(() => {
|
useBodyScrollLock(open);
|
||||||
if (!open) return;
|
useEscapeKey(open, onClose);
|
||||||
document.body.style.overflow = "hidden";
|
useFocusTrap(open, sheetRef);
|
||||||
return () => { document.body.style.overflow = ""; };
|
|
||||||
}, [open]);
|
|
||||||
|
|
||||||
// Group options by group field
|
// Group options by group field
|
||||||
const grouped = options.reduce<Record<string, FilterOption[]>>((acc, opt) => {
|
const grouped = options.reduce<Record<string, FilterOption[]>>((acc, opt) => {
|
||||||
@@ -54,6 +54,10 @@ export default function FilterSheet({ open, onClose, title, options, value, onCh
|
|||||||
{/* Sheet */}
|
{/* Sheet */}
|
||||||
<div
|
<div
|
||||||
ref={sheetRef}
|
ref={sheetRef}
|
||||||
|
role="dialog"
|
||||||
|
aria-modal="true"
|
||||||
|
aria-labelledby={titleId}
|
||||||
|
tabIndex={-1}
|
||||||
className="fixed bottom-0 left-0 right-0 z-[61] md:hidden bg-surface rounded-t-2xl shadow-2xl max-h-[70vh] flex flex-col animate-slide-up"
|
className="fixed bottom-0 left-0 right-0 z-[61] md:hidden bg-surface rounded-t-2xl shadow-2xl max-h-[70vh] flex flex-col animate-slide-up"
|
||||||
>
|
>
|
||||||
{/* Handle */}
|
{/* Handle */}
|
||||||
@@ -63,8 +67,8 @@ export default function FilterSheet({ open, onClose, title, options, value, onCh
|
|||||||
|
|
||||||
{/* Header */}
|
{/* Header */}
|
||||||
<div className="flex items-center justify-between px-4 py-2 border-b border-gray-100 dark:border-gray-800 shrink-0">
|
<div className="flex items-center justify-between px-4 py-2 border-b border-gray-100 dark:border-gray-800 shrink-0">
|
||||||
<h3 className="font-bold text-base text-gray-900 dark:text-gray-100">{title}</h3>
|
<h3 id={titleId} className="font-bold text-base text-gray-900 dark:text-gray-100">{title}</h3>
|
||||||
<button onClick={onClose} className="p-1 text-gray-400 hover:text-gray-600">
|
<button onClick={onClose} aria-label="필터 닫기" className="p-2 -mr-1 text-gray-400 hover:text-gray-600">
|
||||||
<Icon name="close" size={20} />
|
<Icon name="close" size={20} />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -23,19 +23,20 @@ export default function RestaurantDetail({
|
|||||||
const [favLoading, setFavLoading] = useState(false);
|
const [favLoading, setFavLoading] = useState(false);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
let cancelled = false;
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
api
|
api
|
||||||
.getRestaurantVideos(restaurant.id)
|
.getRestaurantVideos(restaurant.id)
|
||||||
.then(setVideos)
|
.then((v) => { if (!cancelled) setVideos(v); })
|
||||||
.catch(() => setVideos([]))
|
.catch(() => { if (!cancelled) setVideos([]); })
|
||||||
.finally(() => setLoading(false));
|
.finally(() => { if (!cancelled) setLoading(false); });
|
||||||
|
|
||||||
// Load favorite status if logged in
|
|
||||||
if (getToken()) {
|
if (getToken()) {
|
||||||
api.getFavoriteStatus(restaurant.id)
|
api.getFavoriteStatus(restaurant.id)
|
||||||
.then((r) => setFavorited(r.favorited))
|
.then((r) => { if (!cancelled) setFavorited(r.favorited); })
|
||||||
.catch(() => {});
|
.catch(() => {});
|
||||||
}
|
}
|
||||||
|
return () => { cancelled = true; };
|
||||||
}, [restaurant.id]);
|
}, [restaurant.id]);
|
||||||
|
|
||||||
const handleToggleFavorite = async () => {
|
const handleToggleFavorite = async () => {
|
||||||
@@ -57,12 +58,12 @@ export default function RestaurantDetail({
|
|||||||
<button
|
<button
|
||||||
onClick={handleToggleFavorite}
|
onClick={handleToggleFavorite}
|
||||||
disabled={favLoading}
|
disabled={favLoading}
|
||||||
className={`text-xl leading-none transition-colors ${
|
className={`p-1.5 -m-1.5 transition-colors touch-manipulation ${
|
||||||
favorited ? "text-rose-500" : "text-gray-300 dark:text-gray-600 hover:text-rose-400"
|
favorited ? "text-rose-500" : "text-gray-300 dark:text-gray-600 hover:text-rose-400"
|
||||||
}`}
|
}`}
|
||||||
title={favorited ? "찜 해제" : "찜하기"}
|
title={favorited ? "찜 해제" : "찜하기"}
|
||||||
>
|
>
|
||||||
<Icon name="favorite" size={20} filled={favorited} />
|
<Icon name="favorite" size={22} filled={favorited} />
|
||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
{restaurant.business_status === "CLOSED_PERMANENTLY" && (
|
{restaurant.business_status === "CLOSED_PERMANENTLY" && (
|
||||||
@@ -218,7 +219,7 @@ export default function RestaurantDetail({
|
|||||||
<Icon name="play_circle" size={16} filled className="flex-shrink-0" />
|
<Icon name="play_circle" size={16} filled className="flex-shrink-0" />
|
||||||
{v.title}
|
{v.title}
|
||||||
</a>
|
</a>
|
||||||
{v.foods_mentioned.length > 0 && (
|
{v.foods_mentioned?.length > 0 && (
|
||||||
<div className="flex flex-wrap gap-1 mt-2">
|
<div className="flex flex-wrap gap-1 mt-2">
|
||||||
{v.foods_mentioned.map((f, i) => (
|
{v.foods_mentioned.map((f, i) => (
|
||||||
<span
|
<span
|
||||||
@@ -235,7 +236,7 @@ export default function RestaurantDetail({
|
|||||||
{v.evaluation.text}
|
{v.evaluation.text}
|
||||||
</p>
|
</p>
|
||||||
)}
|
)}
|
||||||
{v.guests.length > 0 && (
|
{v.guests?.length > 0 && (
|
||||||
<p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
<p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
||||||
게스트: {v.guests.join(", ")}
|
게스트: {v.guests.join(", ")}
|
||||||
</p>
|
</p>
|
||||||
|
|||||||
74
frontend/src/lib/hooks/useModalA11y.ts
Normal file
74
frontend/src/lib/hooks/useModalA11y.ts
Normal file
@@ -0,0 +1,74 @@
|
|||||||
|
import { useEffect } from "react";
|
||||||
|
|
||||||
|
export function useEscapeKey(active: boolean, onEscape: () => void) {
|
||||||
|
useEffect(() => {
|
||||||
|
if (!active) return;
|
||||||
|
const handler = (e: KeyboardEvent) => {
|
||||||
|
if (e.key === "Escape") {
|
||||||
|
e.stopPropagation();
|
||||||
|
onEscape();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
document.addEventListener("keydown", handler);
|
||||||
|
return () => document.removeEventListener("keydown", handler);
|
||||||
|
}, [active, onEscape]);
|
||||||
|
}
|
||||||
|
|
||||||
|
const FOCUSABLE = [
|
||||||
|
"a[href]",
|
||||||
|
"button:not([disabled])",
|
||||||
|
"input:not([disabled])",
|
||||||
|
"select:not([disabled])",
|
||||||
|
"textarea:not([disabled])",
|
||||||
|
'[tabindex]:not([tabindex="-1"])',
|
||||||
|
].join(",");
|
||||||
|
|
||||||
|
export function useFocusTrap<T extends HTMLElement>(active: boolean, containerRef: React.RefObject<T | null>) {
|
||||||
|
useEffect(() => {
|
||||||
|
if (!active) return;
|
||||||
|
const node = containerRef.current;
|
||||||
|
if (!node) return;
|
||||||
|
const previouslyFocused = document.activeElement as HTMLElement | null;
|
||||||
|
const focusables = () => Array.from(node.querySelectorAll<HTMLElement>(FOCUSABLE));
|
||||||
|
const first = focusables()[0];
|
||||||
|
first?.focus();
|
||||||
|
const handler = (e: KeyboardEvent) => {
|
||||||
|
if (e.key !== "Tab") return;
|
||||||
|
const list = focusables();
|
||||||
|
if (list.length === 0) {
|
||||||
|
e.preventDefault();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const head = list[0];
|
||||||
|
const tail = list[list.length - 1];
|
||||||
|
const current = document.activeElement as HTMLElement | null;
|
||||||
|
if (e.shiftKey) {
|
||||||
|
if (current === head || !node.contains(current)) {
|
||||||
|
e.preventDefault();
|
||||||
|
tail.focus();
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (current === tail) {
|
||||||
|
e.preventDefault();
|
||||||
|
head.focus();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
document.addEventListener("keydown", handler);
|
||||||
|
return () => {
|
||||||
|
document.removeEventListener("keydown", handler);
|
||||||
|
previouslyFocused?.focus();
|
||||||
|
};
|
||||||
|
}, [active, containerRef]);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useBodyScrollLock(active: boolean) {
|
||||||
|
useEffect(() => {
|
||||||
|
if (!active) return;
|
||||||
|
const prev = document.body.style.overflow;
|
||||||
|
document.body.style.overflow = "hidden";
|
||||||
|
return () => {
|
||||||
|
document.body.style.overflow = prev;
|
||||||
|
};
|
||||||
|
}, [active]);
|
||||||
|
}
|
||||||
@@ -5,6 +5,11 @@ metadata:
|
|||||||
namespace: tasteby
|
namespace: tasteby
|
||||||
spec:
|
spec:
|
||||||
replicas: 1
|
replicas: 1
|
||||||
|
strategy:
|
||||||
|
type: RollingUpdate
|
||||||
|
rollingUpdate:
|
||||||
|
maxSurge: 25%
|
||||||
|
maxUnavailable: 25%
|
||||||
selector:
|
selector:
|
||||||
matchLabels:
|
matchLabels:
|
||||||
app: backend
|
app: backend
|
||||||
@@ -34,11 +39,11 @@ spec:
|
|||||||
readOnly: true
|
readOnly: true
|
||||||
resources:
|
resources:
|
||||||
requests:
|
requests:
|
||||||
cpu: 500m
|
cpu: 300m
|
||||||
memory: 768Mi
|
memory: 512Mi
|
||||||
limits:
|
limits:
|
||||||
cpu: "1"
|
cpu: 800m
|
||||||
memory: 1536Mi
|
memory: 1024Mi
|
||||||
readinessProbe:
|
readinessProbe:
|
||||||
tcpSocket:
|
tcpSocket:
|
||||||
port: 8000
|
port: 8000
|
||||||
|
|||||||
Reference in New Issue
Block a user