Compare commits

..

16 Commits

Author SHA1 Message Date
sb 38ac028c15 fix: frequent-breeds 실패해도 한줄평/메이트 로딩 안 깨지게 (catch)
CI / build (push) Waiting to run
통계 엔드포인트 미배포(구버전 백엔드) 시에도 홈 화면 정상 동작.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-07-11 19:18:18 +09:00
sb c3231c59ac feat: 도착 버튼 아래 '이 시간대 자주 보이는 견종' 한 줄 표시
CI / build (push) Waiting to run
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-07-11 19:15:41 +09:00
sb 3bebe77cab chore: UI 문구 '우리 개' → '우리 강아지'
CI / build (push) Failing after 15m8s
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-07-11 19:00:34 +09:00
sb eac3098680 fix: 상/하단 이중 safe-area 여백 제거
네이티브 웹뷰가 이미 노치/홈바 아래로 배치되는데 CSS safe-top/safe-bottom 이
env inset 을 한 번 더 더해 헤더/푸터 여백이 이중으로 잡히던 문제.
CSS 추가 여백을 0으로 하여 네이티브 인셋만 사용.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-07-11 19:00:34 +09:00
ByungCheol 08743892d4 refactor: 관리자 콘솔을 별도 프로젝트(dognation_AT)로 분리 — PT에서 관리자 코드 제거
CI / build (push) Failing after 13m56s
- 관리자 페이지/스토어/API 삭제(adminAuth·adminMembers·adminStats·AdminLayout·pages/admin)
- 라우터에서 /admin 경로·관리자 가드 제거 (사용자 앱 라우팅만 유지)
- 공용 저수준(http put/del 등)은 dogs API 등이 사용하므로 유지

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-07-11 18:06:37 +09:00
sb 36f17be03a style: 상/하단 safe-area 여백 축소 (헤더 위·탭바 아래 공백 감소)
CI / build (push) Failing after 11m34s
다이나믹 아일랜드는 화면 중앙에만 있어 헤더 양옆 콘텐츠는 full inset 불필요.
상태바/홈바 최소 여백만 남기고 safe-top/safe-bottom 을 줄임.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-07-11 17:54:08 +09:00
sb 35d26e3563 fix(ios): 상단 이중 인셋 제거(contentInset never) + 광고 배너를 footer 안으로
CI / build (push) Failing after 13m33s
- contentInset: always→never — CSS safe-area(env inset)와 겹쳐 상하단 여백이
  이중으로 잡히던 문제 해결
- AdBanner 를 q-footer 안(탭바 위)으로 이동 — 콘텐츠가 광고에 가리지 않고
  레이아웃이 footer 높이를 정상 예약. 유료 티어는 배너 숨김으로 공간 회수.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-07-11 15:37:08 +09:00
sb 16d7cf4332 chore: 체크인 옆 스팟 채팅 버튼 제거 (매칭 1:1 채팅만 유지)
CI / build (push) Failing after 11m53s
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-07-11 15:08:50 +09:00
sb cc3a0fa836 feat: 매칭 플로우 프론트 (진행중·알림·수락/거절·1:1 채팅)
CI / build (push) Failing after 14m12s
- 매칭 버튼: 신청 후 "진행중" 표시, 무료 소진(429) 안내
- 헤더 알림 벨: 받은 매칭 신청 목록 + 수락/거절
- 실시간 알림: STOMP /topic/users/{id} 구독(신청/수락/거절/만료 토스트)
- 수락 시 1:1 매칭 채팅(MatchChatDialog, /topic/matches/{id})

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-07-11 15:04:21 +09:00
sb 12dd26c47f feat: 지도 클릭 시 최근접 스팟 선택 + 현재위치 기능 제거
CI / build (push) Failing after 13m37s
마커가 겹쳐도 선택되도록 지도 클릭 지점에서 가장 가까운 스팟을 선택.
현재위치(Geolocation) 버튼은 스팟 선택 간섭 소지로 현 단계에서 비활성.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-07-11 14:04:56 +09:00
sb 0f77f71869 feat: 산책 메이트에서 본인 강아지 제외 (mates 에 userId 전달)
CI / build (push) Failing after 15m8s
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-07-11 13:58:30 +09:00
sb 56255c0ae6 feat: 체크인 후 AI 궁합 추천 표시
CI / build (push) Failing after 13m34s
체크인 성공 시 /api/spots/{id}/ai-mates 를 호출해 사이좋게 지낼 만한
강아지를 궁합점수·이유와 함께 표시. 로딩 스피너·빈 상태 처리 포함.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-07-11 13:44:46 +09:00
sb 0e69218710 feat: 지도 카카오로 전환 + 확대/축소·현재위치 (네이버 코드 유지)
CI / build (push) Failing after 11m24s
홈 지도를 Kakao Maps JS SDK 로 교체. ZoomControl(확대/축소)과
현재위치 버튼(@capacitor/geolocation → 파란 점 표시) 추가.
naverMap.ts / NaverMap.vue 는 미사용으로 보존.
시뮬레이터에서 렌더·현재위치 확인.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-07-11 13:26:42 +09:00
sb b5f394a7bc fix: 로그인 화면 QLayout 래핑 (QPage 렌더 오류 → 빈 화면 수정)
CI / build (push) Failing after 11m27s
LoginPage 가 MainLayout(QLayout) 밖 독립 라우트라 QPage 조상이 없어
"QPage needs to be a deep child of QLayout" 로 빈 화면이 됐다.
자체 QLayout/QPageContainer 로 감싼다. (관리자 로그인은 이미 래핑됨)
시뮬레이터 실행으로 확인.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-07-11 11:59:16 +09:00
ByungCheol 5f849c552e feat(admin): 관리자 대시보드 + 회원 상세 화면
CI / build (push) Failing after 11m12s
- 대시보드(/admin/dashboard, 기본 랜딩): 요약 카드(총회원·금일 신규/탈퇴·DAU/WAU/MAU),
  접속자 추이(일/주/월 토글), 티어별 회원수, 시군구 지역 분포 — 모두 체크인 기반
- 회원 상세(/admin/members/:id): 프로필 + 강아지/체크인/매칭/구독 이력, 목록에서 상세 버튼
- adminStats API 모듈, 좌측 메뉴에 대시보드 추가

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-07-11 11:38:56 +09:00
sb c1fb8625e7 ci: Gitea Actions 로 전환 (dev 전용, .gitlab-ci.yml 제거)
CI / build (push) Failing after 13m53s
이 인스턴스는 Gitea → .gitlab-ci.yml 미사용. sb-front 컨벤션 따라 .gitea/workflows/ci.yaml.
npm run build(vue-tsc 타입체크 + vite build).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-07-11 11:29:42 +09:00
28 changed files with 909 additions and 746 deletions
+6 -1
View File
@@ -1,7 +1,12 @@
# 백엔드 API 주소 (dognation_BT)
VITE_API_BASE_URL=http://localhost:8080
# 네이버 지도 (네이버 클라우드 플랫폼 > Maps 에서 발급)
# 지도: 현재 카카오 지도 사용 (홈 화면). 네이버 키는 참고용으로 남겨둠.
# 카카오 지도 (Kakao Developers > 내 애플리케이션 > 앱 키 > JavaScript 키)
# 콘솔 > 플랫폼 > Web 에 서비스 도메인 등록 필요 (개발: http://localhost:9000)
VITE_KAKAO_MAP_KEY=your_kakao_javascript_key
# 네이버 지도 (네이버 클라우드 플랫폼 > Maps) — 현재 미사용, 코드는 유지
VITE_NAVER_MAP_CLIENT_ID=your_ncp_key_id
# 신규 키는 ncpKeyId(기본), 구형 키면 ncpClientId 로 변경
# VITE_NAVER_MAP_AUTH_PARAM=ncpKeyId
+33
View File
@@ -0,0 +1,33 @@
name: CI
# dev 브랜치 전용 CI (요청: dev 에만).
on:
push:
branches: [dev]
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Setup Node
uses: actions/setup-node@v4
with:
node-version: '22'
# cache 제거: Gitea 캐시 서버 미연결 시 'Save cache' 후처리가 수 분 hang → '가짜 실패' 유발(sb-front 와 동일)
- name: Install dependencies
run: npm ci
# build = vue-tsc 타입체크 + vite 빌드 (test/lint 스크립트는 아직 없음)
- name: Build
run: npm run build
- name: Upload build output
uses: actions/upload-artifact@v3
with:
name: dist
path: dist
retention-days: 7
-26
View File
@@ -1,26 +0,0 @@
# GitLab CI — dognation 프론트 (Vue3 + TS + Vite / Capacitor)
# dev 브랜치 푸시에서만 실행. build 스크립트가 vue-tsc 타입체크 + vite 빌드를 함께 수행.
image: node:22
variables:
npm_config_cache: "$CI_PROJECT_DIR/.npm"
cache:
key: "$CI_COMMIT_REF_SLUG"
paths:
- .npm/
stages:
- build
build:
stage: build
rules:
- if: '$CI_COMMIT_BRANCH == "dev"'
script:
- npm ci
- npm run build # vue-tsc --noEmit && vite build
artifacts:
paths:
- dist/
expire_in: 1 week
+2 -1
View File
@@ -5,7 +5,8 @@ const config: CapacitorConfig = {
appName: '산책갈개',
webDir: 'dist',
ios: {
contentInset: 'always',
// never + CSS safe-area(env inset)로 노치/홈바 여백 처리 (이중 인셋 방지)
contentInset: 'never',
},
server: {
androidScheme: 'https',
+19 -65
View File
@@ -11,6 +11,7 @@
"@capacitor-community/apple-sign-in": "^7.1.0",
"@capacitor/app": "^8.0.0",
"@capacitor/core": "^8.3.4",
"@capacitor/geolocation": "^8.2.0",
"@quasar/extras": "^1.16.12",
"@stomp/stompjs": "^7.3.0",
"pinia": "^2.3.0",
@@ -158,6 +159,18 @@
"tslib": "^2.1.0"
}
},
"node_modules/@capacitor/geolocation": {
"version": "8.2.0",
"resolved": "https://registry.npmjs.org/@capacitor/geolocation/-/geolocation-8.2.0.tgz",
"integrity": "sha512-N29QcoIPmme0xSxRkm7+3hjoHp6mBAOarxecvtCCZKyOBeKiJsFUq981cezg2XWBa6fhCXJMCCjQPngKK/dIag==",
"license": "MIT",
"dependencies": {
"@capacitor/synapse": "^1.0.4"
},
"peerDependencies": {
"@capacitor/core": ">=8.0.0"
}
},
"node_modules/@capacitor/ios": {
"version": "8.4.1",
"resolved": "https://registry.npmjs.org/@capacitor/ios/-/ios-8.4.1.tgz",
@@ -168,6 +181,12 @@
"@capacitor/core": "^8.4.0"
}
},
"node_modules/@capacitor/synapse": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/@capacitor/synapse/-/synapse-1.0.4.tgz",
"integrity": "sha512-/C1FUo8/OkKuAT4nCIu/34ny9siNHr9qtFezu4kxm6GY1wNFxrCFWjfYx5C1tUhVGz3fxBABegupkpjXvjCHrw==",
"license": "ISC"
},
"node_modules/@esbuild/aix-ppc64": {
"version": "0.25.12",
"resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.12.tgz",
@@ -906,9 +925,6 @@
"arm"
],
"dev": true,
"libc": [
"glibc"
],
"license": "MIT",
"optional": true,
"os": [
@@ -930,9 +946,6 @@
"arm"
],
"dev": true,
"libc": [
"musl"
],
"license": "MIT",
"optional": true,
"os": [
@@ -954,9 +967,6 @@
"arm64"
],
"dev": true,
"libc": [
"glibc"
],
"license": "MIT",
"optional": true,
"os": [
@@ -978,9 +988,6 @@
"arm64"
],
"dev": true,
"libc": [
"musl"
],
"license": "MIT",
"optional": true,
"os": [
@@ -1002,9 +1009,6 @@
"x64"
],
"dev": true,
"libc": [
"glibc"
],
"license": "MIT",
"optional": true,
"os": [
@@ -1026,9 +1030,6 @@
"x64"
],
"dev": true,
"libc": [
"musl"
],
"license": "MIT",
"optional": true,
"os": [
@@ -1227,9 +1228,6 @@
"arm"
],
"dev": true,
"libc": [
"glibc"
],
"license": "MIT",
"optional": true,
"os": [
@@ -1244,9 +1242,6 @@
"arm"
],
"dev": true,
"libc": [
"musl"
],
"license": "MIT",
"optional": true,
"os": [
@@ -1261,9 +1256,6 @@
"arm64"
],
"dev": true,
"libc": [
"glibc"
],
"license": "MIT",
"optional": true,
"os": [
@@ -1278,9 +1270,6 @@
"arm64"
],
"dev": true,
"libc": [
"musl"
],
"license": "MIT",
"optional": true,
"os": [
@@ -1295,9 +1284,6 @@
"loong64"
],
"dev": true,
"libc": [
"glibc"
],
"license": "MIT",
"optional": true,
"os": [
@@ -1312,9 +1298,6 @@
"loong64"
],
"dev": true,
"libc": [
"musl"
],
"license": "MIT",
"optional": true,
"os": [
@@ -1329,9 +1312,6 @@
"ppc64"
],
"dev": true,
"libc": [
"glibc"
],
"license": "MIT",
"optional": true,
"os": [
@@ -1346,9 +1326,6 @@
"ppc64"
],
"dev": true,
"libc": [
"musl"
],
"license": "MIT",
"optional": true,
"os": [
@@ -1363,9 +1340,6 @@
"riscv64"
],
"dev": true,
"libc": [
"glibc"
],
"license": "MIT",
"optional": true,
"os": [
@@ -1380,9 +1354,6 @@
"riscv64"
],
"dev": true,
"libc": [
"musl"
],
"license": "MIT",
"optional": true,
"os": [
@@ -1397,9 +1368,6 @@
"s390x"
],
"dev": true,
"libc": [
"glibc"
],
"license": "MIT",
"optional": true,
"os": [
@@ -1414,9 +1382,6 @@
"x64"
],
"dev": true,
"libc": [
"glibc"
],
"license": "MIT",
"optional": true,
"os": [
@@ -1431,9 +1396,6 @@
"x64"
],
"dev": true,
"libc": [
"musl"
],
"license": "MIT",
"optional": true,
"os": [
@@ -3017,7 +2979,6 @@
"arm"
],
"dev": true,
"libc": "glibc",
"license": "MIT",
"optional": true,
"os": [
@@ -3035,7 +2996,6 @@
"arm64"
],
"dev": true,
"libc": "glibc",
"license": "MIT",
"optional": true,
"os": [
@@ -3053,7 +3013,6 @@
"arm"
],
"dev": true,
"libc": "musl",
"license": "MIT",
"optional": true,
"os": [
@@ -3071,7 +3030,6 @@
"arm64"
],
"dev": true,
"libc": "musl",
"license": "MIT",
"optional": true,
"os": [
@@ -3089,7 +3047,6 @@
"riscv64"
],
"dev": true,
"libc": "musl",
"license": "MIT",
"optional": true,
"os": [
@@ -3107,7 +3064,6 @@
"x64"
],
"dev": true,
"libc": "musl",
"license": "MIT",
"optional": true,
"os": [
@@ -3125,7 +3081,6 @@
"riscv64"
],
"dev": true,
"libc": "glibc",
"license": "MIT",
"optional": true,
"os": [
@@ -3143,7 +3098,6 @@
"x64"
],
"dev": true,
"libc": "glibc",
"license": "MIT",
"optional": true,
"os": [
+1
View File
@@ -15,6 +15,7 @@
"@capacitor-community/apple-sign-in": "^7.1.0",
"@capacitor/app": "^8.0.0",
"@capacitor/core": "^8.3.4",
"@capacitor/geolocation": "^8.2.0",
"@quasar/extras": "^1.16.12",
"@stomp/stompjs": "^7.3.0",
"pinia": "^2.3.0",
-8
View File
@@ -1,8 +0,0 @@
import { http } from './http'
import type { LoginResponse } from './auth'
/** 관리자 콘솔 전용 인증 API (사용자 authApi 와 분리). */
export const adminAuthApi = {
/** 개발자 로그인 — local 백엔드 전용(구글 없이 이메일로 세션 발급). */
devLogin: (email: string) => http.post<LoginResponse>('/api/auth/dev-login', { email }),
}
-22
View File
@@ -1,22 +0,0 @@
import { http } from './http'
import type { Member } from './auth'
export type MemberStatus = 'ACTIVE' | 'DORMANT' | 'BANNED'
export type MemberTier = 'FREE' | 'AD_FREE' | 'PREMIUM'
export type MemberRole = 'USER' | 'ADMIN'
/** 관리자 회원관리 API — /api/admin/members (ADMIN 전용) */
export const adminMembersApi = {
list: () => http.get<Member[]>('/api/admin/members'),
updateStatus: (id: number, status: MemberStatus) =>
http.put<Member>(`/api/admin/members/${id}/status`, { status }),
updateTier: (id: number, tier: MemberTier) =>
http.put<Member>(`/api/admin/members/${id}/tier`, { tier }),
updateRole: (id: number, role: MemberRole) =>
http.put<Member>(`/api/admin/members/${id}/role`, { role }),
remove: (id: number) => http.del<void>(`/api/admin/members/${id}`),
}
+4 -1
View File
@@ -2,7 +2,8 @@ import { http } from './http'
export interface ChatMessage {
id: number
spotId: number
spotId: number | null
matchId: number | null
senderId: number
senderNickname: string
content: string
@@ -11,4 +12,6 @@ export interface ChatMessage {
export const chatApi = {
history: (spotId: number) => http.get<ChatMessage[]>(`/api/chat/spots/${spotId}/messages`),
matchHistory: (matchId: number) =>
http.get<ChatMessage[]>(`/api/chat/matches/${matchId}/messages`),
}
+21 -1
View File
@@ -6,13 +6,33 @@ export interface Match {
targetDogId: number
status: string
createdAt: string
expiresAt: string | null
respondedAt: string | null
}
/** 받은 매칭 신청 (신청 견 정보 포함) — 수락/거절 UI용. */
export interface ReceivedMatch {
id: number
requesterDogId: number
requesterDogName: string
requesterDogBreed: string | null
createdAt: string
expiresAt: string | null
}
/** STOMP /topic/users/{userId} 로 오는 매칭 알림. */
export interface MatchNotification {
type: 'NEW_REQUEST' | 'ACCEPTED' | 'REJECTED' | 'EXPIRED'
matchId: number
title: string
message: string
}
export const matchesApi = {
create: (requesterDogId: number, targetDogId: number) =>
http.post<Match>('/api/matches', { requesterDogId, targetDogId }),
accept: (id: number) => http.post<Match>(`/api/matches/${id}/accept`),
reject: (id: number) => http.post<Match>(`/api/matches/${id}/reject`),
received: (dogId: number) => http.get<Match[]>(`/api/matches/received/${dogId}`),
received: (dogId: number) => http.get<ReceivedMatch[]>(`/api/matches/received/${dogId}`),
sent: (dogId: number) => http.get<Match[]>(`/api/matches/sent/${dogId}`),
}
+14 -1
View File
@@ -14,6 +14,14 @@ export interface Mate {
breed: string | null
}
export interface AiMate {
dogId: number
name: string
breed: string | null
score: number
reason: string
}
export interface Review {
id: number
tag: string | null
@@ -30,7 +38,12 @@ export interface CheckInResult {
export const spotsApi = {
list: () => http.get<Spot[]>('/api/spots'),
mates: (spotId: number) => http.get<Mate[]>(`/api/spots/${spotId}/mates`),
mates: (spotId: number, userId?: number) =>
http.get<Mate[]>(`/api/spots/${spotId}/mates${userId ? `?userId=${userId}` : ''}`),
aiMates: (spotId: number, dogId: number) =>
http.get<AiMate[]>(`/api/spots/${spotId}/ai-mates?dogId=${dogId}`),
frequentBreeds: (spotId: number) =>
http.get<{ breeds: string[] }>(`/api/spots/${spotId}/frequent-breeds`),
reviews: (spotId: number) => http.get<Review[]>(`/api/spots/${spotId}/reviews`),
checkIn: (spotId: number, userId: number, dogId: number) =>
http.post<CheckInResult>(`/api/spots/${spotId}/checkins`, { userId, dogId }),
+153
View File
@@ -0,0 +1,153 @@
<template>
<div class="map-wrap">
<div ref="mapEl" class="map-canvas"></div>
<!-- SDK 미로드/ 미설정 폴백 -->
<div v-if="errorMsg" class="map-fallback flex flex-center column text-grey-6">
<q-icon name="map" size="40px" color="secondary" />
<div class="q-mt-sm text-caption text-center">{{ errorMsg }}</div>
</div>
</div>
</template>
<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
import { loadKakaoMaps } from '@/lib/kakaoMap'
import type { Spot } from '@/api/spots'
const props = defineProps<{
spots: Spot[]
selectedId: number | null
}>()
const emit = defineEmits<{ (e: 'select', id: number): void }>()
// 기본 중심: 서울시청
const DEFAULT_CENTER = { lat: 37.5666, lng: 126.9784 }
const mapEl = ref<HTMLElement | null>(null)
const errorMsg = ref('')
let map: kakao.maps.Map | null = null
let infoWindow: kakao.maps.InfoWindow | null = null
const markers = new Map<number, kakao.maps.Marker>()
onMounted(async () => {
try {
const kk = await loadKakaoMaps()
if (!mapEl.value) return
const center = firstCenter()
map = new kk.maps.Map(mapEl.value, {
center: new kk.maps.LatLng(center.lat, center.lng),
level: 5, // 네이버 zoom 14 ≈ 카카오 level 5
})
// 확대/축소 +/- 컨트롤 (핀치 줌도 함께 동작)
map.addControl(new kk.maps.ZoomControl(), kk.maps.ControlPosition.RIGHT)
infoWindow = new kk.maps.InfoWindow({ removable: false })
// 지도 아무 곳이나 탭하면 가장 가까운 스팟 선택 (마커가 겹쳐도 선택 가능)
kk.maps.event.addListener(map, 'click', (e) => {
if (!e) return
const spot = nearestSpot(e.latLng.getLat(), e.latLng.getLng())
if (spot) emit('select', spot.id)
})
renderMarkers(kk)
} catch (e) {
errorMsg.value = `${(e as Error).message} 지도 키(VITE_KAKAO_MAP_KEY)를 설정하세요.`
}
})
onBeforeUnmount(() => {
markers.forEach((m) => m.setMap(null))
markers.clear()
})
// 스팟 목록이 갱신되면 마커 다시 그림
watch(
() => props.spots,
() => {
if (map && window.kakao?.maps) renderMarkers(window.kakao)
},
)
// 외부에서 선택된 스팟이 바뀌면 지도 중심 이동 + 정보창
watch(
() => props.selectedId,
(id) => {
if (!map || id == null) return
const spot = props.spots.find((s) => s.id === id)
const marker = markers.get(id)
if (spot?.latitude != null && spot?.longitude != null) {
map.panTo(new window.kakao.maps.LatLng(spot.latitude, spot.longitude))
}
if (spot && marker) openInfo(spot, marker)
},
)
function firstCenter() {
const withCoord = props.spots.find((s) => s.latitude != null && s.longitude != null)
return withCoord ? { lat: withCoord.latitude!, lng: withCoord.longitude! } : DEFAULT_CENTER
}
/** 클릭 좌표에서 가장 가까운 스팟(위경도 제곱거리 최소). */
function nearestSpot(lat: number, lng: number): Spot | null {
let best: Spot | null = null
let bestDist = Infinity
for (const s of props.spots) {
if (s.latitude == null || s.longitude == null) continue
const dLat = s.latitude - lat
const dLng = s.longitude - lng
const dist = dLat * dLat + dLng * dLng
if (dist < bestDist) {
bestDist = dist
best = s
}
}
return best
}
function renderMarkers(kk: typeof kakao) {
markers.forEach((m) => m.setMap(null))
markers.clear()
for (const spot of props.spots) {
if (spot.latitude == null || spot.longitude == null) continue
const marker = new kk.maps.Marker({
position: new kk.maps.LatLng(spot.latitude, spot.longitude),
map: map!,
title: spot.name,
})
kk.maps.event.addListener(marker, 'click', () => {
openInfo(spot, marker)
emit('select', spot.id)
})
markers.set(spot.id, marker)
}
}
function openInfo(spot: Spot, marker: kakao.maps.Marker) {
if (!infoWindow || !map) return
infoWindow.setContent(
`<div style="padding:6px 12px;font-size:13px;font-weight:600;color:#3E92CC;white-space:nowrap;">📍 ${spot.name}</div>`,
)
infoWindow.open(map, marker)
}
</script>
<style scoped>
.map-wrap {
position: relative;
height: 240px;
border-radius: 8px;
overflow: hidden;
}
.map-canvas {
width: 100%;
height: 100%;
}
.map-fallback {
position: absolute;
inset: 0;
background: linear-gradient(160deg, #eaf5fe 0%, #d7ecfb 100%);
padding: 16px;
}
</style>
+144
View File
@@ -0,0 +1,144 @@
<template>
<q-dialog :model-value="modelValue" @update:model-value="$emit('update:modelValue', $event)" maximized>
<q-card class="column no-wrap">
<q-toolbar class="bg-primary text-white">
<q-icon name="favorite" class="q-mr-sm" />
<q-toolbar-title>매칭 채팅</q-toolbar-title>
<q-chip dense :color="connected ? 'positive' : 'grey-5'" text-color="white">
{{ connected ? '실시간' : '연결 중…' }}
</q-chip>
<q-btn flat round dense icon="close" @click="close" />
</q-toolbar>
<q-scroll-area ref="scrollArea" class="col q-pa-md" style="background: #f4faff">
<div v-if="!messages.length" class="text-center text-grey-5 q-mt-lg">
매칭된 메이트와 인사를 나눠보세요.
</div>
<div
v-for="m in messages"
:key="m.id"
class="q-mb-sm row"
:class="isMine(m) ? 'justify-end' : 'justify-start'"
>
<div :class="isMine(m) ? 'msg mine' : 'msg'">
<div v-if="!isMine(m)" class="text-caption text-weight-medium text-accent">
{{ m.senderNickname }}
</div>
<div>{{ m.content }}</div>
<div class="text-caption text-grey-6 text-right">{{ time(m.createdAt) }}</div>
</div>
</div>
</q-scroll-area>
<div class="row q-pa-sm q-gutter-sm bg-white items-center">
<q-input
v-model="draft"
class="col"
dense
outlined
placeholder="메시지 입력…"
maxlength="1000"
:disable="!connected"
@keyup.enter="send"
/>
<q-btn round color="primary" icon="send" :disable="!connected || !draft.trim()" @click="send" />
</div>
</q-card>
</q-dialog>
</template>
<script setup lang="ts">
import { nextTick, onBeforeUnmount, ref, watch } from 'vue'
import { QScrollArea } from 'quasar'
import { chatApi, type ChatMessage } from '@/api/chat'
import { createMatchChat } from '@/lib/chatSocket'
import { useAuthStore } from '@/stores/auth'
const props = defineProps<{ modelValue: boolean; matchId: number }>()
const emit = defineEmits<{ (e: 'update:modelValue', v: boolean): void }>()
const auth = useAuthStore()
const messages = ref<ChatMessage[]>([])
const draft = ref('')
const connected = ref(false)
const scrollArea = ref<QScrollArea | null>(null)
let chat: ReturnType<typeof createMatchChat> | null = null
watch(
() => props.modelValue,
async (open) => {
if (open) await start()
else stop()
},
)
onBeforeUnmount(stop)
async function start() {
messages.value = []
try {
messages.value = await chatApi.matchHistory(props.matchId)
scrollToBottom()
} catch {
// 히스토리 실패해도 실시간 연결은 시도
}
chat = createMatchChat(
props.matchId,
(m) => {
messages.value.push(m)
scrollToBottom()
},
(c) => (connected.value = c),
)
chat.activate()
}
function stop() {
chat?.deactivate()
chat = null
connected.value = false
}
function send() {
const text = draft.value.trim()
if (!text || !chat) return
chat.send(text)
draft.value = ''
}
function close() {
emit('update:modelValue', false)
}
function isMine(m: ChatMessage) {
return m.senderId === auth.member?.id
}
function time(iso: string) {
const d = new Date(iso)
return d.toLocaleTimeString('ko-KR', { hour: '2-digit', minute: '2-digit' })
}
function scrollToBottom() {
nextTick(() => {
const el = scrollArea.value
if (el) el.setScrollPercentage('vertical', 1, 150)
})
}
</script>
<style scoped>
.msg {
max-width: 76%;
padding: 8px 12px;
border-radius: 12px;
background: #ffffff;
border: 1px solid #e3eef7;
word-break: break-word;
}
.msg.mine {
background: #d7ecfb;
border-color: #cfe8fb;
}
</style>
+5 -3
View File
@@ -7,10 +7,12 @@ body {
color: #3E92CC;
}
// iOS 노치/홈바 safe-area 대응
// iOS 노치/홈바 safe-area 대응.
// 네이티브 웹뷰가 이미 safe-area 아래로 배치돼(이중 여백 방지) CSS 추가 여백은 0.
// (제목이 상태바에 겹치면 이 값을 소폭 늘린다)
.safe-top {
padding-top: env(safe-area-inset-top);
padding-top: 0;
}
.safe-bottom {
padding-bottom: env(safe-area-inset-bottom);
padding-bottom: 0;
}
+2
View File
@@ -11,6 +11,7 @@ interface ImportMetaEnv {
readonly VITE_API_BASE_URL: string
readonly VITE_NAVER_MAP_CLIENT_ID: string
readonly VITE_NAVER_MAP_AUTH_PARAM?: string
readonly VITE_KAKAO_MAP_KEY: string
}
interface ImportMeta {
@@ -19,4 +20,5 @@ interface ImportMeta {
interface Window {
naver: typeof naver
kakao: typeof kakao
}
-67
View File
@@ -1,67 +0,0 @@
<template>
<q-layout view="hHh Lpr lFf">
<!-- 헤더 -->
<q-header elevated class="bg-primary text-white">
<q-toolbar>
<q-btn flat dense round icon="menu" aria-label="메뉴" @click="drawer = !drawer" />
<q-toolbar-title class="text-weight-bold">
<q-icon name="pets" class="q-mr-sm" />산책갈개 관리자
</q-toolbar-title>
<q-chip dense color="white" text-color="primary" icon="admin_panel_settings">
{{ admin.member?.nickname ?? '관리자' }}
</q-chip>
<q-btn flat dense round icon="logout" aria-label="로그아웃" @click="onLogout" />
</q-toolbar>
</q-header>
<!-- 좌측 사이드 메뉴 -->
<q-drawer v-model="drawer" show-if-above bordered :width="240" class="bg-grey-1">
<q-list padding>
<q-item-label header class="text-grey-7">관리 메뉴</q-item-label>
<q-item
v-for="item in menu"
:key="item.name"
clickable
:to="{ name: item.name }"
active-class="text-primary bg-blue-1"
exact
>
<q-item-section avatar>
<q-icon :name="item.icon" />
</q-item-section>
<q-item-section>{{ item.label }}</q-item-section>
</q-item>
</q-list>
</q-drawer>
<!-- 바디 -->
<q-page-container>
<router-view />
</q-page-container>
<!-- 풋터 -->
<q-footer class="bg-white text-grey-6">
<div class="text-caption text-center q-py-sm">© 2026 산책갈개 · 관리자 콘솔</div>
</q-footer>
</q-layout>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useAdminAuthStore } from '@/stores/adminAuth'
const router = useRouter()
const admin = useAdminAuthStore()
const drawer = ref(true)
const menu = [{ name: 'admin-members', label: '회원 관리', icon: 'group' }]
async function onLogout() {
await admin.logout()
await router.replace({ name: 'admin-login' })
}
</script>
+87 -5
View File
@@ -8,6 +8,37 @@
<q-chip dense color="white" text-color="primary" icon="bolt">
{{ tierLabel }}
</q-chip>
<!-- 받은 매칭 알림 -->
<q-btn flat round dense icon="notifications" class="q-mr-xs">
<q-badge v-if="matching.received.length" color="red" floating>
{{ matching.received.length }}
</q-badge>
<q-menu anchor="bottom right" self="top right">
<q-list style="min-width: 260px">
<q-item-label header>받은 매칭 신청</q-item-label>
<q-item v-if="!matching.received.length">
<q-item-section class="text-grey-6">받은 신청이 없어요.</q-item-section>
</q-item>
<q-item v-for="r in matching.received" :key="r.id">
<q-item-section avatar>
<q-avatar color="secondary" text-color="accent" icon="pets" />
</q-item-section>
<q-item-section>
<q-item-label class="text-weight-medium">{{ r.requesterDogName }}</q-item-label>
<q-item-label caption>{{ r.requesterDogBreed || '견종 미상' }} · 매칭 신청</q-item-label>
</q-item-section>
<q-item-section side>
<div class="row q-gutter-xs">
<q-btn dense unelevated color="primary" label="수락" @click="onAccept(r.id)" />
<q-btn dense flat color="grey-7" label="거절" @click="onReject(r.id)" />
</div>
</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
<q-btn flat round dense icon="account_circle">
<q-menu>
<q-list style="min-width: 160px">
@@ -32,10 +63,9 @@
<router-view />
</q-page-container>
<!-- FREE 티어 하단 배너 광고 -->
<AdBanner />
<q-footer class="bg-white text-grey-8 safe-bottom">
<!-- FREE 티어 하단 배너 광고 (탭바 ). 유료 티어는 숨김 콘텐츠 공간 회수 -->
<AdBanner />
<q-tabs
v-model="tab"
active-color="primary"
@@ -43,25 +73,76 @@
class="text-grey-6"
>
<q-route-tab name="home" :to="{ name: 'home' }" icon="map" label="산책 스팟" />
<q-route-tab name="profile" :to="{ name: 'profile' }" icon="pets" label="우리 " />
<q-route-tab name="profile" :to="{ name: 'profile' }" icon="pets" label="우리 강아지" />
</q-tabs>
</q-footer>
<!-- 매칭 수락 1:1 채팅 -->
<MatchChatDialog v-if="matchChatId != null" v-model="matchChatOpen" :match-id="matchChatId" />
</q-layout>
</template>
<script setup lang="ts">
import { computed, ref } from 'vue'
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import { useQuasar } from 'quasar'
import AdBanner from '@/components/AdBanner.vue'
import MatchChatDialog from '@/components/MatchChatDialog.vue'
import { useSubscriptionStore } from '@/stores/subscription'
import { useAuthStore } from '@/stores/auth'
import { useDogsStore } from '@/stores/dogs'
import { useMatchingStore } from '@/stores/matching'
import { ApiError } from '@/api/http'
const tab = ref('home')
const subscription = useSubscriptionStore()
const auth = useAuthStore()
const dogs = useDogsStore()
const matching = useMatchingStore()
const router = useRouter()
const $q = useQuasar()
const matchChatOpen = ref(false)
const matchChatId = ref<number | null>(null)
onMounted(async () => {
await dogs.loadMyDogs()
if (auth.member && dogs.currentDogId != null) {
matching.connect(auth.member.id, dogs.currentDogId)
}
})
onBeforeUnmount(() => matching.disconnect())
// 수락(내가/상대가) → 1:1 채팅 열기
watch(
() => matching.openChatMatchId,
(id) => {
if (id != null) {
matchChatId.value = id
matchChatOpen.value = true
matching.openChatMatchId = null
}
},
)
async function onAccept(id: number) {
try {
await matching.accept(id)
} catch (e) {
notifyError(e)
}
}
async function onReject(id: number) {
try {
await matching.reject(id)
} catch (e) {
notifyError(e)
}
}
function notifyError(e: unknown) {
const message = e instanceof ApiError ? e.message : '처리 중 오류가 발생했습니다.'
$q.notify({ color: 'negative', message, icon: 'error', position: 'top' })
}
const tierLabel = computed(() => {
switch (subscription.tier) {
@@ -75,6 +156,7 @@ const tierLabel = computed(() => {
})
async function onLogout() {
matching.disconnect()
await auth.logout()
dogs.reset()
router.replace({ name: 'login' })
+57
View File
@@ -1,6 +1,7 @@
import { Client, type IMessage } from '@stomp/stompjs'
import { tokenStore } from '@/lib/token'
import type { ChatMessage } from '@/api/chat'
import type { MatchNotification } from '@/api/matches'
function wsUrl(): string {
const base = import.meta.env.VITE_API_BASE_URL ?? 'http://localhost:8080'
@@ -8,6 +9,21 @@ function wsUrl(): string {
return base.replace(/^http/, 'ws') + '/ws'
}
function stompClient(onConnect: (c: Client) => void, onStatus?: (connected: boolean) => void) {
const client = new Client({
brokerURL: wsUrl(),
connectHeaders: { Authorization: `Bearer ${tokenStore.get() ?? ''}` },
reconnectDelay: 3000,
onConnect: () => {
onStatus?.(true)
onConnect(client)
},
onDisconnect: () => onStatus?.(false),
onWebSocketClose: () => onStatus?.(false),
})
return client
}
/**
* 스팟 채팅용 STOMP 클라이언트.
* connect 후 스팟 토픽을 구독하고, send 로 메시지를 전송한다.
@@ -43,3 +59,44 @@ export function createSpotChat(
isConnected: () => client.connected,
}
}
/** 매칭 수락으로 열린 1:1 채팅용 STOMP 클라이언트. */
export function createMatchChat(
matchId: number,
onMessage: (m: ChatMessage) => void,
onStatus?: (connected: boolean) => void,
) {
const client = stompClient((c) => {
c.subscribe(`/topic/matches/${matchId}`, (msg: IMessage) => {
onMessage(JSON.parse(msg.body) as ChatMessage)
})
}, onStatus)
return {
activate: () => client.activate(),
deactivate: () => client.deactivate(),
send: (content: string) => {
client.publish({
destination: `/app/matches/${matchId}/chat`,
body: JSON.stringify({ content }),
})
},
isConnected: () => client.connected,
}
}
/** 로그인 사용자용 매칭 실시간 알림 구독 (/topic/users/{userId}). */
export function createUserNotifications(
userId: number,
onNotification: (n: MatchNotification) => void,
) {
const client = stompClient((c) => {
c.subscribe(`/topic/users/${userId}`, (msg: IMessage) => {
onNotification(JSON.parse(msg.body) as MatchNotification)
})
})
return {
activate: () => client.activate(),
deactivate: () => client.deactivate(),
}
}
+41
View File
@@ -0,0 +1,41 @@
// 카카오 지도 JS SDK 동적 로더 (싱글턴)
// JavaScript 키는 Kakao Developers > 내 애플리케이션 > 앱 키 > JavaScript 키.
// .env 의 VITE_KAKAO_MAP_KEY 로 주입. 콘솔 > 플랫폼 > Web 에 서비스 도메인 등록 필요
// (개발: http://localhost:9000 / 라이브리로드 IP, 배포: 실제 도메인·capacitor 스킴).
let loadPromise: Promise<typeof kakao> | null = null
export function loadKakaoMaps(): Promise<typeof kakao> {
if (typeof window !== 'undefined' && window.kakao?.maps) {
return Promise.resolve(window.kakao)
}
if (loadPromise) {
return loadPromise
}
const appKey = import.meta.env.VITE_KAKAO_MAP_KEY
loadPromise = new Promise<typeof kakao>((resolve, reject) => {
if (!appKey) {
reject(new Error('VITE_KAKAO_MAP_KEY 가 설정되지 않았습니다.'))
return
}
const script = document.createElement('script')
// autoload=false → 스크립트 로드 후 kakao.maps.load 로 명시적으로 초기화한다.
script.src = `https://dapi.kakao.com/v2/maps/sdk.js?appkey=${appKey}&autoload=false`
script.async = true
script.onload = () => {
// 키/도메인이 유효하지 않으면 load 콜백이 호출되지 않을 수 있어 타임아웃으로 방어.
const timer = setTimeout(
() => reject(new Error('카카오 지도 초기화 실패 · 키/도메인 등록을 확인하세요.')),
8000,
)
window.kakao.maps.load(() => {
clearTimeout(timer)
resolve(window.kakao)
})
}
script.onerror = () => reject(new Error('카카오 지도 SDK 를 불러오지 못했습니다.'))
document.head.appendChild(script)
})
return loadPromise
}
+101 -34
View File
@@ -1,8 +1,8 @@
<template>
<q-page class="q-pa-md">
<!-- 네이버 지도: 스팟 마커 표시, 마커 클릭 해당 스팟 선택 -->
<!-- 카카오 지도: 스팟 마커 표시, 마커 클릭 해당 스팟 선택 -->
<q-card flat bordered class="q-mb-md overflow-hidden">
<NaverMap :spots="spots" :selected-id="currentSpot?.id ?? null" @select="onSelectSpot" />
<KakaoMap :spots="spots" :selected-id="currentSpot?.id ?? null" @select="onSelectSpot" />
</q-card>
<!-- 로딩 / 에러 -->
@@ -11,9 +11,7 @@
백엔드에 연결하지 못했습니다. (서버 실행 여부를 확인하세요)
</q-banner>
<!-- 체크인 + 채팅 -->
<div class="row q-col-gutter-sm">
<div class="col">
<!-- 체크인 -->
<q-btn
color="primary"
class="full-width q-py-sm"
@@ -24,27 +22,45 @@
:label="checkedIn ? '체크인 완료' : '나 지금 여기 도착!'"
@click="onCheckIn"
/>
</div>
<div class="col-auto">
<q-btn
color="accent"
class="full-height q-px-md"
outline
:disable="!currentSpot"
icon="chat"
label="채팅"
@click="chatOpen = true"
/>
</div>
<!-- 시간대 자주 오는 견종 (통계) -->
<div
v-if="frequentBreeds.length"
class="text-caption text-grey-7 q-mt-sm row items-center no-wrap"
>
<q-icon name="pets" size="16px" color="primary" class="q-mr-xs" />
시간대 자주 보이는 견종 · {{ frequentBreeds.join(', ') }}
</div>
<!-- 스팟 채팅 -->
<ChatDialog
v-if="currentSpot"
v-model="chatOpen"
:spot-id="currentSpot.id"
:spot-name="currentSpot.name"
/>
<!-- AI 궁합 추천 (체크인 , 스팟 강아지 사이좋게 지낼 만한 목록) -->
<div v-if="aiLoading || aiTried" class="q-mt-lg">
<div class="text-subtitle1 text-weight-bold q-mb-sm">
<q-icon name="auto_awesome" color="primary" class="q-mr-xs" />AI 궁합 추천
</div>
<div v-if="aiLoading" class="row items-center q-gutter-sm text-grey-6">
<q-spinner-dots size="24px" color="primary" />
<span class="text-caption">사이좋게 지낼 강아지를 찾는 </span>
</div>
<template v-else>
<q-card v-for="m in aiMates" :key="m.dogId" flat bordered class="q-mb-sm">
<q-item>
<q-item-section avatar>
<q-avatar color="primary" text-color="white" icon="favorite" />
</q-item-section>
<q-item-section>
<q-item-label class="text-weight-medium">
{{ m.name }}
<q-badge color="primary" class="q-ml-xs">궁합 {{ m.score }}</q-badge>
</q-item-label>
<q-item-label caption>{{ m.breed || '견종 미상' }} · {{ m.reason }}</q-item-label>
</q-item-section>
</q-item>
</q-card>
<div v-if="!aiMates.length" class="text-caption text-grey-5">
지금 스팟엔 맞는 강아지가 없어요.
</div>
</template>
</div>
<!-- 스팟 한줄평 (네이버 지도식 태그형) -->
<div class="text-subtitle1 text-weight-bold q-mt-lg q-mb-sm">
@@ -77,6 +93,16 @@
</q-item-section>
<q-item-section side>
<q-btn
v-if="matching.isPending(mate.dogId)"
dense
outline
color="grey-7"
icon="hourglass_top"
label="진행중"
disable
/>
<q-btn
v-else
dense
unelevated
color="primary"
@@ -94,19 +120,18 @@
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useQuasar } from 'quasar'
import { spotsApi, type Mate, type Review, type Spot } from '@/api/spots'
import { spotsApi, type AiMate, type Mate, type Review, type Spot } from '@/api/spots'
import { matchesApi } from '@/api/matches'
import { ApiError } from '@/api/http'
import { useAuthStore } from '@/stores/auth'
import { useDogsStore } from '@/stores/dogs'
import NaverMap from '@/components/NaverMap.vue'
import ChatDialog from '@/components/ChatDialog.vue'
import { useMatchingStore } from '@/stores/matching'
import KakaoMap from '@/components/KakaoMap.vue'
const $q = useQuasar()
const auth = useAuthStore()
const dogs = useDogsStore()
const chatOpen = ref(false)
const matching = useMatchingStore()
// 체크인/매칭 주체: 로그인 회원 + 대표 강아지
const currentUserId = () => auth.member?.id ?? 0
@@ -115,11 +140,17 @@ const spots = ref<Spot[]>([])
const currentSpot = ref<Spot | null>(null)
const reviews = ref<Review[]>([])
const mates = ref<Mate[]>([])
const frequentBreeds = ref<string[]>([])
const checkedIn = ref(false)
const checkingIn = ref(false)
const matchingDogId = ref<number | null>(null)
const loadError = ref(false)
// AI 궁합 추천 (체크인 후 로드)
const aiMates = ref<AiMate[]>([])
const aiLoading = ref(false)
const aiTried = ref(false)
onMounted(load)
async function load() {
@@ -142,19 +173,27 @@ async function onSelectSpot(spotId: number) {
if (!spot) return
currentSpot.value = spot
checkedIn.value = false
aiMates.value = []
aiTried.value = false
await refreshSpot(spotId)
}
async function refreshSpot(spotId: number) {
const [r, m] = await Promise.all([spotsApi.reviews(spotId), spotsApi.mates(spotId)])
const [r, m, fb] = await Promise.all([
spotsApi.reviews(spotId),
spotsApi.mates(spotId, currentUserId()),
// 통계 엔드포인트는 부가 정보 — 실패(구버전 백엔드 등)해도 나머지 화면은 정상 표시
spotsApi.frequentBreeds(spotId).catch(() => ({ breeds: [] })),
])
reviews.value = r
mates.value = m
frequentBreeds.value = fb.breeds
}
async function onCheckIn() {
if (!currentSpot.value) return
if (dogs.currentDogId == null) {
$q.notify({ color: 'warning', message: '먼저 우리 를 등록해 주세요.', icon: 'pets', position: 'top' })
$q.notify({ color: 'warning', message: '먼저 우리 강아지를 등록해 주세요.', icon: 'pets', position: 'top' })
return
}
checkingIn.value = true
@@ -163,6 +202,7 @@ async function onCheckIn() {
checkedIn.value = true
await refreshSpot(currentSpot.value.id)
$q.notify({ color: 'primary', message: '체크인 완료! 스팟 채팅이 열렸어요.', icon: 'place', position: 'top' })
loadAiMates() // 체크인 후 AI 궁합 추천 (비동기)
} catch (e) {
notifyError(e)
} finally {
@@ -170,17 +210,44 @@ async function onCheckIn() {
}
}
/** 체크인 후 AI 궁합 추천 로드 — 이 스팟의 강아지 중 내 개와 사이좋게 지낼 만한 목록. */
async function loadAiMates() {
if (!currentSpot.value || dogs.currentDogId == null) return
aiLoading.value = true
aiTried.value = true
try {
aiMates.value = await spotsApi.aiMates(currentSpot.value.id, dogs.currentDogId)
} catch {
aiMates.value = []
} finally {
aiLoading.value = false
}
}
async function onMatch(mate: Mate) {
if (dogs.currentDogId == null) {
$q.notify({ color: 'warning', message: '먼저 우리 를 등록해 주세요.', icon: 'pets', position: 'top' })
$q.notify({ color: 'warning', message: '먼저 우리 강아지를 등록해 주세요.', icon: 'pets', position: 'top' })
return
}
matchingDogId.value = mate.dogId
try {
await matchesApi.create(dogs.currentDogId, mate.dogId)
$q.notify({ color: 'positive', message: `${mate.name}에게 매칭을 신청했어요!`, icon: 'favorite', position: 'top' })
matching.markSent(mate.dogId) // 버튼 "진행중" 표시
$q.notify({
color: 'positive',
message: `${mate.name}에게 매칭을 신청했어요! (상대 수락 시 채팅)`,
icon: 'favorite',
position: 'top',
})
} catch (e) {
notifyError(e)
// 429: 무료 매칭 횟수 소진
const msg = e instanceof ApiError ? e.message : '매칭 신청에 실패했습니다.'
$q.notify({
color: e instanceof ApiError && e.status === 429 ? 'warning' : 'negative',
message: msg,
icon: e instanceof ApiError && e.status === 429 ? 'block' : 'error',
position: 'top',
})
} finally {
matchingDogId.value = null
}
+6 -1
View File
@@ -1,10 +1,13 @@
<template>
<!-- 로그인은 MainLayout(QLayout) 밖의 독립 화면 QPage 자체 QLayout 으로 감싼다. -->
<q-layout view="hHh lpR fFf">
<q-page-container>
<q-page class="flex flex-center column q-pa-lg bg-brand">
<div class="column items-center q-mb-xl">
<q-avatar size="88px" color="white" text-color="primary" icon="pets" />
<div class="text-h4 text-weight-bold text-white q-mt-md">산책갈개</div>
<div class="text-white q-mt-xs" style="opacity: 0.9">
우리 성향에 맞는 동네 산책 메이트
우리 강아지 성향에 맞는 동네 산책 메이트
</div>
</div>
@@ -48,6 +51,8 @@
계속 진행하면 이용약관 개인정보 처리방침에 동의하게 됩니다.
</div>
</q-page>
</q-page-container>
</q-layout>
</template>
<script setup lang="ts">
+3 -3
View File
@@ -22,13 +22,13 @@
<q-card v-if="!dogs.myDogs.length" flat bordered class="q-pa-lg text-center text-grey-6">
<q-icon name="pets" size="40px" color="secondary" />
<div class="q-mt-sm q-mb-md">아직 등록된 강아지가 없어요.</div>
<q-btn color="primary" unelevated icon="add" label="우리 등록" @click="openCreate" />
<q-btn color="primary" unelevated icon="add" label="우리 강아지 등록" @click="openCreate" />
</q-card>
<template v-else>
<!-- 강아지 선택 (여러 마리) -->
<div class="row items-center q-mb-sm">
<div class="text-subtitle1 text-weight-bold">우리 </div>
<div class="text-subtitle1 text-weight-bold">우리 강아지</div>
<q-space />
<q-btn dense flat color="primary" icon="add" label="추가" @click="openCreate" />
</div>
@@ -89,7 +89,7 @@
<!-- 강아지 등록 다이얼로그 -->
<q-dialog v-model="createOpen">
<q-card style="min-width: 300px">
<q-card-section class="text-subtitle1 text-weight-bold">우리 등록</q-card-section>
<q-card-section class="text-subtitle1 text-weight-bold">우리 강아지 등록</q-card-section>
<q-card-section class="q-gutter-sm">
<q-input v-model="form.name" label="이름 *" dense outlined />
<q-input v-model="form.breed" label="견종" dense outlined />
-143
View File
@@ -1,143 +0,0 @@
<template>
<q-layout view="lHh Lpr lFf">
<q-page-container>
<q-page class="flex flex-center bg-grey-2">
<q-card flat bordered class="login-card q-pa-lg">
<div class="text-center q-mb-lg">
<q-icon name="pets" size="42px" color="primary" />
<div class="text-h6 text-weight-bold q-mt-sm">산책갈개 관리자</div>
<div class="text-caption text-grey-6">관리자 계정으로 로그인하세요</div>
</div>
<!-- 구글 로그인 버튼 렌더 위치 -->
<div class="flex flex-center">
<div ref="googleBtn" />
</div>
<!-- 개발자 로그인 (local 백엔드 전용, dev 빌드에서만 노출) -->
<div v-if="isDev" class="q-mt-lg">
<q-separator class="q-mb-md" />
<div class="text-caption text-grey-6 text-center q-mb-sm">개발용 (local 백엔드)</div>
<q-btn
outline
color="primary"
class="full-width"
icon="developer_mode"
label="개발자 로그인 (admin@dog.com)"
:loading="loading"
@click="onDevLogin"
/>
</div>
<q-inner-loading :showing="loading" />
<q-banner v-if="error" dense class="bg-red-1 text-red-8 q-mt-md rounded-borders">
<template #avatar><q-icon name="error" /></template>
{{ error }}
</q-banner>
<div v-if="!clientId && ready" class="text-caption text-grey-6 text-center q-mt-md">
구글 로그인이 설정되지 않았습니다. (서버 GOOGLE_CLIENT_ID 확인)
</div>
</q-card>
</q-page>
</q-page-container>
</q-layout>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { authApi } from '@/api/auth'
import { ApiError } from '@/api/http'
import { useAdminAuthStore } from '@/stores/adminAuth'
const router = useRouter()
const admin = useAdminAuthStore()
const googleBtn = ref<HTMLElement | null>(null)
const clientId = ref('')
const ready = ref(false)
const loading = ref(false)
const error = ref('')
const isDev = import.meta.env.DEV
const GSI_SRC = 'https://accounts.google.com/gsi/client'
onMounted(async () => {
try {
clientId.value = (await authApi.googleClientId()).clientId
} catch {
error.value = '서버에 연결하지 못했습니다.'
ready.value = true
return
}
ready.value = true
if (!clientId.value) return
try {
await loadGsi()
window.google!.accounts.id.initialize({
client_id: clientId.value,
callback: onCredential,
})
window.google!.accounts.id.renderButton(googleBtn.value as HTMLElement, {
type: 'standard',
theme: 'outline',
size: 'large',
text: 'signin_with',
shape: 'pill',
width: 260,
})
} catch {
error.value = '구글 로그인 초기화에 실패했습니다.'
}
})
function loadGsi(): Promise<void> {
return new Promise((resolve, reject) => {
if (window.google?.accounts?.id) return resolve()
const el = document.createElement('script')
el.src = GSI_SRC
el.async = true
el.defer = true
el.onload = () => resolve()
el.onerror = () => reject(new Error('GSI load failed'))
document.head.appendChild(el)
})
}
function onCredential(response: GsiCredentialResponse) {
finishLogin(() => admin.loginWithGoogle(response.credential))
}
function onDevLogin() {
finishLogin(() => admin.loginDev('admin@dog.com'))
}
/** 로그인 실행 → ADMIN 확인 → 회원관리로 이동. 공용. */
async function finishLogin(login: () => Promise<{ role: string }>) {
loading.value = true
error.value = ''
try {
const member = await login()
if (member.role !== 'ADMIN') {
await admin.logout()
error.value = '관리자 권한이 없는 계정입니다.'
return
}
await router.replace({ name: 'admin-members' })
} catch (e) {
error.value = e instanceof ApiError ? e.message : '로그인 중 오류가 발생했습니다.'
} finally {
loading.value = false
}
}
</script>
<style scoped>
.login-card {
width: 360px;
max-width: 90vw;
}
</style>
-248
View File
@@ -1,248 +0,0 @@
<template>
<q-page class="q-pa-md">
<!-- 상단 툴바 -->
<div class="row items-center q-mb-md">
<div class="text-h6 text-weight-bold">회원 관리</div>
<q-chip dense color="blue-1" text-color="primary" class="q-ml-sm">
{{ members.length }}
</q-chip>
<q-space />
<q-input
v-model="filter"
dense
outlined
debounce="200"
placeholder="이메일·닉네임 검색"
class="q-mr-sm"
style="min-width: 220px"
>
<template #prepend><q-icon name="search" /></template>
</q-input>
<q-btn flat round icon="refresh" :loading="loading" @click="load" />
</div>
<q-banner v-if="loadError" dense class="bg-red-1 text-red-8 q-mb-md rounded-borders">
<template #avatar><q-icon name="wifi_off" /></template>
회원 목록을 불러오지 못했습니다.
</q-banner>
<q-table
:rows="members"
:columns="columns"
row-key="id"
:loading="loading"
:filter="filter"
:pagination="{ rowsPerPage: 20 }"
flat
bordered
>
<!-- 회원(이메일+닉네임+아바타) -->
<template #body-cell-member="props">
<q-td :props="props">
<div class="row items-center no-wrap">
<q-avatar size="32px" color="blue-1" text-color="primary">
<img v-if="props.row.profileImage" :src="props.row.profileImage" alt="" />
<q-icon v-else name="person" />
</q-avatar>
<div class="q-ml-sm">
<div class="text-weight-medium">
{{ props.row.nickname }}
<q-chip v-if="isSelf(props.row)" dense size="sm" color="grey-3" text-color="grey-8">본인</q-chip>
</div>
<div class="text-caption text-grey-6">{{ props.row.email }}</div>
</div>
</div>
</q-td>
</template>
<!-- 제공자 -->
<template #body-cell-provider="props">
<q-td :props="props">
<q-chip dense square size="sm" :color="props.row.provider === 'APPLE' ? 'grey-9' : 'red-2'"
:text-color="props.row.provider === 'APPLE' ? 'white' : 'red-9'">
{{ props.row.provider }}
</q-chip>
</q-td>
</template>
<!-- 상태 -->
<template #body-cell-status="props">
<q-td :props="props">
<q-select
dense options-dense outlined emit-value map-options
:model-value="props.row.status"
:options="statusOptions"
:disable="isSelf(props.row) || busyId === props.row.id"
style="min-width: 110px"
@update:model-value="(v: MemberStatus) => onStatus(props.row, v)"
/>
</q-td>
</template>
<!-- 구독 티어 -->
<template #body-cell-tier="props">
<q-td :props="props">
<q-select
dense options-dense outlined emit-value map-options
:model-value="props.row.subscriptionTier"
:options="tierOptions"
:disable="busyId === props.row.id"
style="min-width: 120px"
@update:model-value="(v: MemberTier) => onTier(props.row, v)"
/>
</q-td>
</template>
<!-- 권한 -->
<template #body-cell-role="props">
<q-td :props="props">
<q-select
dense options-dense outlined emit-value map-options
:model-value="props.row.role"
:options="roleOptions"
:disable="isSelf(props.row) || busyId === props.row.id"
style="min-width: 110px"
@update:model-value="(v: MemberRole) => onRole(props.row, v)"
/>
</q-td>
</template>
<!-- 삭제 -->
<template #body-cell-actions="props">
<q-td :props="props">
<q-btn
flat dense round icon="delete" color="negative"
:disable="isSelf(props.row) || busyId === props.row.id"
@click="onDelete(props.row)"
/>
</q-td>
</template>
</q-table>
</q-page>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useQuasar, type QTableColumn } from 'quasar'
import {
adminMembersApi,
type MemberRole,
type MemberStatus,
type MemberTier,
} from '@/api/adminMembers'
import type { Member } from '@/api/auth'
import { ApiError } from '@/api/http'
import { useAdminAuthStore } from '@/stores/adminAuth'
const $q = useQuasar()
const admin = useAdminAuthStore()
const members = ref<Member[]>([])
const loading = ref(false)
const loadError = ref(false)
const filter = ref('')
const busyId = ref<number | null>(null)
const statusOptions = [
{ label: '활성', value: 'ACTIVE' },
{ label: '휴면', value: 'DORMANT' },
{ label: '정지', value: 'BANNED' },
]
const tierOptions = [
{ label: 'FREE', value: 'FREE' },
{ label: '광고제거', value: 'AD_FREE' },
{ label: 'PREMIUM', value: 'PREMIUM' },
]
const roleOptions = [
{ label: '일반', value: 'USER' },
{ label: '관리자', value: 'ADMIN' },
]
const columns: QTableColumn<Member>[] = [
{ name: 'member', label: '회원', field: 'email', align: 'left', sortable: true },
{ name: 'provider', label: '가입', field: 'provider', align: 'center' },
{ name: 'status', label: '상태', field: 'status', align: 'center' },
{ name: 'tier', label: '구독', field: 'subscriptionTier', align: 'center' },
{ name: 'role', label: '권한', field: 'role', align: 'center' },
{
name: 'createdAt',
label: '가입일',
field: 'createdAt',
align: 'center',
sortable: true,
format: (v: string) => new Date(v).toLocaleDateString('ko-KR'),
},
{ name: 'actions', label: '', field: 'id', align: 'center' },
]
onMounted(load)
function isSelf(m: Member): boolean {
return m.id === admin.member?.id
}
async function load() {
loading.value = true
loadError.value = false
try {
members.value = await adminMembersApi.list()
} catch (e) {
loadError.value = true
console.error(e)
} finally {
loading.value = false
}
}
/** 변경 API 공통 실행 — 성공 시 해당 행 갱신, 실패 시 알림. */
async function run(id: number, fn: () => Promise<Member>, done: string) {
busyId.value = id
try {
const updated = await fn()
const i = members.value.findIndex((m) => m.id === id)
if (i >= 0) members.value[i] = updated
$q.notify({ color: 'positive', message: done, icon: 'check', position: 'top' })
} catch (e) {
const msg = e instanceof ApiError ? e.message : '변경에 실패했습니다.'
$q.notify({ color: 'negative', message: msg, icon: 'error', position: 'top' })
} finally {
busyId.value = null
}
}
function onStatus(m: Member, status: MemberStatus) {
if (status === m.status) return
run(m.id, () => adminMembersApi.updateStatus(m.id, status), '상태를 변경했습니다.')
}
function onTier(m: Member, tier: MemberTier) {
if (tier === m.subscriptionTier) return
run(m.id, () => adminMembersApi.updateTier(m.id, tier), '구독 티어를 변경했습니다.')
}
function onRole(m: Member, role: MemberRole) {
if (role === m.role) return
run(m.id, () => adminMembersApi.updateRole(m.id, role), '권한을 변경했습니다.')
}
function onDelete(m: Member) {
$q.dialog({
title: '회원 삭제',
message: `${m.nickname}(${m.email}) 회원을 삭제할까요? 되돌릴 수 없습니다.`,
cancel: true,
ok: { label: '삭제', color: 'negative' },
}).onOk(async () => {
busyId.value = m.id
try {
await adminMembersApi.remove(m.id)
members.value = members.value.filter((x) => x.id !== m.id)
$q.notify({ color: 'positive', message: '회원을 삭제했습니다.', icon: 'check', position: 'top' })
} catch (e) {
const msg = e instanceof ApiError ? e.message : '삭제에 실패했습니다.'
$q.notify({ color: 'negative', message: msg, icon: 'error', position: 'top' })
} finally {
busyId.value = null
}
})
}
</script>
-42
View File
@@ -1,7 +1,6 @@
import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router'
import MainLayout from '@/layouts/MainLayout.vue'
import { useAuthStore } from '@/stores/auth'
import { useAdminAuthStore } from '@/stores/adminAuth'
const routes: RouteRecordRaw[] = [
{
@@ -18,25 +17,6 @@ const routes: RouteRecordRaw[] = [
{ path: 'profile', name: 'profile', component: () => import('@/pages/ProfilePage.vue') },
],
},
// 관리자 콘솔 (웹 전용) — 사용자 앱과 분리
{
path: '/admin/login',
name: 'admin-login',
component: () => import('@/pages/admin/AdminLoginPage.vue'),
},
{
path: '/admin',
component: () => import('@/layouts/AdminLayout.vue'),
meta: { requiresAdmin: true },
children: [
{ path: '', redirect: { name: 'admin-members' } },
{
path: 'members',
name: 'admin-members',
component: () => import('@/pages/admin/AdminMembersPage.vue'),
},
],
},
]
const router = createRouter({
@@ -46,10 +26,6 @@ const router = createRouter({
// 소셜 로그인 전용 앱: 미로그인 시 보호 경로 접근 → 로그인으로
router.beforeEach((to) => {
// 관리자 경로는 아래 관리자 가드가 처리 (사용자 가드는 관여하지 않음)
if (to.matched.some((r) => r.meta.requiresAdmin) || to.name === 'admin-login') {
return true
}
const auth = useAuthStore()
if (to.meta.requiresAuth && !auth.isAuthenticated) {
return { name: 'login', query: { redirect: to.fullPath } }
@@ -59,22 +35,4 @@ router.beforeEach((to) => {
}
})
// 관리자 콘솔 가드 — 토큰/회원 복원 후 ADMIN 여부 확인 (사용자 인증과 분리)
router.beforeEach(async (to) => {
const needsAdmin = to.matched.some((r) => r.meta.requiresAdmin)
if (!needsAdmin && to.name !== 'admin-login') return true
const admin = useAdminAuthStore()
if (admin.hasToken() && !admin.member) {
await admin.fetchMe()
}
if (needsAdmin && !admin.isAdmin) {
return { name: 'admin-login' }
}
if (to.name === 'admin-login' && admin.isAdmin) {
return { name: 'admin-members' }
}
return true
})
export default router
-62
View File
@@ -1,62 +0,0 @@
import { defineStore } from 'pinia'
import { computed, ref } from 'vue'
import { authApi, type Member } from '@/api/auth'
import { adminAuthApi } from '@/api/adminAuth'
import { tokenStore } from '@/lib/token'
/**
* 관리자 콘솔 전용 인증 스토어 (사용자 auth 스토어와 분리).
* 저수준 토큰 저장소(tokenStore)와 소셜 로그인/조회(authApi)는 공용을 재사용한다.
*/
export const useAdminAuthStore = defineStore('adminAuth', () => {
const member = ref<Member | null>(null)
const isAdmin = computed(() => member.value?.role === 'ADMIN')
function hasToken(): boolean {
return !!tokenStore.get()
}
/** 구글 로그인 → 토큰 저장 + 회원 세팅. */
async function loginWithGoogle(idToken: string): Promise<Member> {
const res = await authApi.google(idToken)
tokenStore.set(res.token)
member.value = res.member
return res.member
}
/** 개발자 로그인 (local 백엔드 전용). */
async function loginDev(email: string): Promise<Member> {
const res = await adminAuthApi.devLogin(email)
tokenStore.set(res.token)
member.value = res.member
return res.member
}
/** 토큰으로 회원 복원(새로고침/가드). 실패 시 세션 정리. */
async function fetchMe(): Promise<Member | null> {
if (!tokenStore.get()) return null
try {
member.value = await authApi.me()
return member.value
} catch {
clear()
return null
}
}
async function logout(): Promise<void> {
try {
await authApi.logout()
} catch {
/* 서버 실패해도 로컬 세션은 정리 */
}
clear()
}
function clear(): void {
tokenStore.clear()
member.value = null
}
return { member, isAdmin, hasToken, loginWithGoogle, loginDev, fetchMe, logout, clear }
})
+122
View File
@@ -0,0 +1,122 @@
import { defineStore } from 'pinia'
import { ref } from 'vue'
import { Notify } from 'quasar'
import { matchesApi, type MatchNotification, type ReceivedMatch } from '@/api/matches'
import { createUserNotifications } from '@/lib/chatSocket'
/**
* 매칭 상태/알림 스토어.
* - 로그인 시 connect(userId, myDogId): 실시간 알림 구독 + 받은/보낸 매칭 로드
* - received: 내 개가 받은 대기중 신청 (수락/거절 대상)
* - sentPendingTargetIds: 내가 신청한 진행중 대상 dogId (버튼 "진행중" 표시)
* - openChatMatchId: 수락된 매칭 → 1:1 채팅 열기 신호
*/
export const useMatchingStore = defineStore('matching', () => {
const received = ref<ReceivedMatch[]>([])
const sentPendingTargetIds = ref<Set<number>>(new Set())
const openChatMatchId = ref<number | null>(null)
let socket: ReturnType<typeof createUserNotifications> | null = null
let myDogId: number | null = null
async function refresh(dogId: number): Promise<void> {
myDogId = dogId
try {
const [rec, snt] = await Promise.all([matchesApi.received(dogId), matchesApi.sent(dogId)])
received.value = rec
sentPendingTargetIds.value = new Set(snt.map((m) => m.targetDogId))
} catch {
// 무시 (미로그인/네트워크)
}
}
function connect(userId: number, dogId: number): void {
disconnect()
myDogId = dogId
void refresh(dogId)
socket = createUserNotifications(userId, onNotification)
socket.activate()
}
function disconnect(): void {
socket?.deactivate()
socket = null
received.value = []
sentPendingTargetIds.value = new Set()
}
function onNotification(n: MatchNotification): void {
Notify.create({
message: n.message,
caption: n.title,
color: colorFor(n.type),
icon: iconFor(n.type),
position: 'top',
timeout: 4000,
})
if (n.type === 'ACCEPTED') {
openChatMatchId.value = n.matchId // 신청자: 수락됨 → 채팅 열기
}
if (myDogId != null) void refresh(myDogId) // 목록/진행중 동기화
}
async function accept(id: number): Promise<void> {
await matchesApi.accept(id)
received.value = received.value.filter((m) => m.id !== id)
openChatMatchId.value = id // 수락자도 바로 채팅 열기
}
async function reject(id: number): Promise<void> {
await matchesApi.reject(id)
received.value = received.value.filter((m) => m.id !== id)
}
/** 매칭 신청 직후 낙관적으로 진행중 표시. */
function markSent(targetDogId: number): void {
const next = new Set(sentPendingTargetIds.value)
next.add(targetDogId)
sentPendingTargetIds.value = next
}
function isPending(targetDogId: number): boolean {
return sentPendingTargetIds.value.has(targetDogId)
}
return {
received,
sentPendingTargetIds,
openChatMatchId,
connect,
disconnect,
refresh,
accept,
reject,
markSent,
isPending,
}
})
function colorFor(type: MatchNotification['type']): string {
switch (type) {
case 'ACCEPTED':
return 'positive'
case 'REJECTED':
case 'EXPIRED':
return 'grey-8'
default:
return 'primary'
}
}
function iconFor(type: MatchNotification['type']): string {
switch (type) {
case 'NEW_REQUEST':
return 'favorite'
case 'ACCEPTED':
return 'celebration'
case 'EXPIRED':
return 'schedule'
default:
return 'heart_broken'
}
}
+76
View File
@@ -0,0 +1,76 @@
// 카카오 지도 JS SDK 최소 타입 선언 (프로젝트에서 사용하는 API 서브셋).
// 공식 @types 가 없어 필요한 부분만 선언한다.
declare namespace kakao.maps {
class LatLng {
constructor(lat: number, lng: number)
getLat(): number
getLng(): number
}
class Map {
constructor(container: HTMLElement, options: { center: LatLng; level?: number })
panTo(latlng: LatLng): void
setCenter(latlng: LatLng): void
setLevel(level: number): void
getLevel(): number
addControl(control: ZoomControl, position: ControlPosition): void
}
// 지도 확대/축소 +/- 위젯
class ZoomControl {}
enum ControlPosition {
TOP,
TOPLEFT,
TOPRIGHT,
LEFT,
RIGHT,
BOTTOMLEFT,
BOTTOM,
BOTTOMRIGHT,
}
// 현재위치 표시용 원(파란 점)
class Circle {
constructor(options: {
center: LatLng
radius: number
strokeWeight?: number
strokeColor?: string
strokeOpacity?: number
fillColor?: string
fillOpacity?: number
})
setMap(map: Map | null): void
setPosition(latlng: LatLng): void
}
class Marker {
constructor(options: { position: LatLng; map?: Map; title?: string })
setMap(map: Map | null): void
getPosition(): LatLng
}
class InfoWindow {
constructor(options: { content?: string; removable?: boolean })
setContent(content: string): void
open(map: Map, marker?: Marker): void
close(): void
}
// 지도 클릭 등 좌표를 포함하는 이벤트
interface MouseEvent {
latLng: LatLng
}
namespace event {
function addListener(
target: unknown,
type: string,
handler: (event?: MouseEvent) => void,
): void
}
// autoload=false 로 로드한 뒤 SDK 초기화 콜백.
function load(callback: () => void): void
}