RescueWalk — 유기견 산책 매칭 MVP 🐾

산책이 필요한 아이와, 함께 걸어줄 당신을 연결합니다.

보호소가 승인하는 유기견 산책 봉사 매칭 플랫폼입니다. 사진만 보고 고르는 서비스가 아니라, 신뢰(보호소 승인·운영 정보) + 안전(성향 공개·경험 매칭) + 참여 동기(내가 만든 영향) + 감정적 연결(다시 만나는 아이) 을 제품 루프 안에 넣었습니다.

탐색(오늘·이번 주 가능, 나에게 맞는 조건) → 상세(누구에게 맞는지·가능한 일정·반응·주의사항)
  → 신청 3단계(일정 → 참여자 정보 → 확인·약속) → 접수
  → 승인 → 방문 예정(만나는 곳·준비물·연락 흐름) → 산책 → 완료 기록(관찰 포함)
  → 활동 기록(함께 걸은 시간·다시 만난 아이·보호소에 전한 관찰) → 다시 산책

• 일정은 실제 운영 규칙으로 계산합니다: 보호소 휴무일, 아이별 산책 요일, 운영 시간, 당일 30분 마감, 이미 신청한 시간.
• 처음인 봉사자는 '경험자만' 아이를 신청할 수 없습니다(힘이 센 대형견 — 안전 규칙).
• 신청 상태는 4개만 저장하고, 화면에는 방문 시각과 비교해 5단계(접수·승인·방문 예정·산책·완료)로 보여줍니다.

기술 스택

• Next.js 14 (App Router) + TypeScript
• Tailwind CSS — Soft Green / Cream / Warm White / Orange Accent 디자인 토큰
• Lucide Icons
• 상태: React Context + localStorage 영속화 (데모 모드)
• 배포: Vercel 바로 배포 가능 (vercel 또는 GitHub 연동)

실행

npm install
npm run dev        # http://localhost:3000
npm run build      # 프로덕션 빌드

npm run check      # lint + typecheck + 단위 테스트 (커밋 전 한 번)
npm test           # 단위 테스트 (Vitest, 도메인 규칙)
npm run test:e2e   # E2E (Playwright, 데스크톱·모바일) — build 후 실행

E2E 는 next start 를 직접 띄웁니다. 이미 서버가 떠 있으면 E2E_PORT=3000 npm run test:e2e 로 재사용합니다. 처음 한 번은 npx playwright install chromium 이 필요합니다.

구조

화면(app·components)과 규칙(lib/domain)을 나눴습니다. 규칙은 React·브라우저에 의존하지 않는 순수 함수라서 단위 테스트로 고정하고, 화면은 그 결과를 그리기만 합니다.

app/                       라우트 (App Router)
  dogs/page.tsx            목록 — 필터·정렬 상태는 URL 쿼리가 원본
  dogs/[id]/apply/
    useApplyFlow.ts        신청 흐름 상태·URL 단계·임시 저장·제출
    steps.tsx              단계별 화면 (표현만)
  error.tsx, not-found.tsx 오류·404 화면
  sitemap.ts, robots.ts, manifest.ts
components/                공용 UI (Dialog: 포커스 트랩·Esc·스크롤 잠금 / DogRail / Stepper …)
lib/
  domain/
    schedule.ts            운영 일정 — 휴무일·산책 요일·운영 시간·당일 마감·중복 → 가능한 시간, 다음 일정, 2주 창
    dogSearch.ts           필터(언제·나에게 맞는 조건·지역…), URL ↔ 필터 직렬화, 정렬(빠른 일정 순, 쉬는 아이는 항상 뒤)
    apply.ts               3단계 진입 조건, 연락처 형식·검증, 경험 매칭(경험자만), 안전 약속, 임시 저장 복원·미리 고른 일정
    requests.ts            신청 상태 전이(승인·취소·완료+관찰), 진행 5단계 계산, 목록 묶기, 다음 산책
    impact.ts              활동 영향(함께 걸은 시간·다시 만난 아이·보호소·관찰), 아이별 관계, 이정표
    persist.ts             브라우저 저장값 검증 (깨진 항목만 걸러냄)
    *.test.ts              위 규칙의 단위 테스트
  store.tsx                React Context 스토어 — 액션은 domain 함수를 호출만, 탭 간 동기화
  storageKeys.ts           저장소 키 + 막힌 환경에서도 안전한 접근자
  data/                    정적 데이터(보호소 운영·방문 안내, 아이별 매칭 정보)와 일정 규칙에 맞는 상대 날짜 시드
    data.test.ts           데이터 무결성 — 모든 시간이 운영 시간 안, 시드가 휴무일에 잡히지 않음
  labels.ts, visitGuide.ts 매칭 정보 표기, 방문 안내 공통 문구
  calendar.ts              방문 일정 → 캘린더 파일(.ics, RFC 5545) — 한국 시각을 UTC 로, 하루 전 알림, 긴 줄 접기
  useClock.ts              방문자의 지금 시각(서버 렌더 날짜와 다를 수 있어 브라우저에서만)
  routes.ts                집중 화면(상세·신청) — 모바일에서 공용 헤더·하단 내비를 빼는 경로
e2e/                       사용자 흐름 E2E + 접근성·레이아웃·콘솔 기준

설계 메모

• '가능'의 뜻은 한 곳에서 — 카드·상세·보호소·신청이 모두 schedule.ts 로 계산해 화면마다 다르지 않습니다. 시각은 인자로 받고, 화면은 브라우저에서만 넣어 정적 페이지의 빌드 날짜가 섞이지 않게 합니다.
• URL 이 상태의 원본 — 목록 조건(?when=today&need=beginner)과 신청 단계(?step=2)를 주소에 둬서 공유·새로고침·브라우저 뒤로가기가 모두 자연스럽게 동작합니다. 알 수 없는 쿼리 값은 버립니다.
• 전이 함수는 멱등 — 허용되지 않는 상태에서 호출되면 원본을 그대로 돌려줘, 중복 클릭·다른 탭과의 경합에도 상태가 꼬이지 않습니다. 같은 아이·같은 시간의 열린 신청은 두 번 생기지 않습니다.
• 제출 직전 재검증 — 확인 화면에 머무는 사이 당일 시간이 지났거나 다른 탭에서 같은 시간을 신청했다면, 제출하지 않고 시간 단계로 돌려보내며 이유를 알려줍니다.
• 저장값은 신뢰하지 않음 — localStorage 는 이전 버전·직접 수정으로 깨져 있을 수 있어 불러올 때 항목 단위로 검증합니다. 다른 탭의 변경은 storage 이벤트로 반영합니다.

주요 화면

경로	화면
/	홈 — 지금 나에게 필요한 것 하나(다가오는 내 산책 / 다시 만나기 / 처음이라면), 지금 산책 가능한 아이(오늘·이번 주, 관심 지역 우선 — PC 는 좌우 화살표로 넘기는 한 줄), 안전 운영 방식, 보호소, 후기
/dogs	강아지 목록 — 이름·품종·보호소 검색(?q=, 띄어쓰기 무시), 카드에서 난이도·사람 친화·필요한 경험·다음 일정·위치를 바로 비교(모바일은 가로형 행). 필터: 언제(오늘·이번 주) · 나에게 맞는 조건(초보 가능·힘이 약한 편·다른 강아지 OK·아이 동반, AND) · 지역·보호소 · 크기 · 난이도 · 성격(OR)
/dogs/[id]	강아지 상세 — 공유(휴대폰 공유 시트, 안 되면 링크 복사), 모바일은 사진을 지나면 이름·뒤로·찜과 섹션 목차(추천·일정·성격·산책·주의·보호소)가 위에 붙음. 이런 분께 추천(필요한 경험·리드줄 힘·사람·다른 강아지) → 가능한 일정(시간을 누르면 바로 신청) → 성격·이야기 → 산책할 때 모습 → 사람·동물 반응 → 꼭 지켜주세요 → 챙겨 오세요 → 보호소 안내
/dogs/[id]/apply	신청 3단계 — 일정(7칸 달력: 같은 열 = 같은 요일이라 휴무 요일이 세로로 줄지어 보임, 날짜·시간이 스크롤 없이 한 화면) → 참여자 정보(각 칸이 왜 필요한지, 경험 매칭) → 확인·안전 약속 3가지. 상세에서 고른 일정은 채워진 채 시작, ?step= 뒤로가기, 새로고침 복원, 접수 후 뒤로가기 중복 방지
/complete/[rid]	신청 접수 — 아이 얼굴 위 완료 표시, 진행 단계(지금은 승인 대기), 방문 정보·만나는 곳, 준비물, 캘린더에 추가([승인 대기] 표시)
/requests	신청 내역 — 진행 중 / 지난 신청, 방문일 지난 신청 표시
/requests/[id]	신청 상세 — 접수·승인·방문 예정·산책·완료 진행 단계와 지금 할 일 하나, 바로가기(길찾기·보호소 전화·캘린더에 추가), 방문 정보(만나는 곳·오시는 길·주차·연락처·지도), 준비물 체크리스트(신청별로 이 브라우저에 기억), 연락 흐름, 기록(관찰 포함)·다시 산책
/activity	활동 기록 — 함께 걸은 시간, 산책·만난 아이·다시 만난 아이·보호소, 보호소에 전한 관찰, 함께 걸은 아이 사진 카드와 다시 산책, 이정표(진행 막대), 달마다 묶은 타임라인 일지
/shelters, /shelters/[id]	보호소 — 지금 운영 여부, 휴무, 바로가기(길찾기·전화·아이들 보기), 특징, 이번 주 날짜별 산책 가능 아이 수, 산책을 기다리는 아이, 방문 안내 전체
/guide	봉사 가이드 — 참여 방법, 준비물, 현장 가이드, FAQ (목차가 헤더 아래 붙어 지금 읽는 곳을 표시)
/me	마이페이지 — 요약, 찜한 아이들(작은 사진 카드), 설정과 안내 목록(관심 지역·가이드·보호소·활동 기록·데모 데이터 초기화)

데모 데이터

• 강아지 18마리 · 보호소 6곳 · 후기 12개 · 신청 내역 5건 · 활동 기록 4건
• 데모 사용자(김지우)가 자동 제공되며, 신청·찜·기록·관심 지역은 브라우저 localStorage에 저장됩니다.
• 시드 날짜는 오늘 기준 상대값이고, 그 아이의 실제 산책 일정(보호소 휴무·산책 요일)에 맞는 날로 잡습니다 (lib/data/seed.ts). 고정 날짜를 쓰면 "지난 날짜인데 방문예정", "휴무일에 방문" 같은 모순이 생기기 때문입니다.
• 시연 시나리오: 송이(방문예정)를 기록하면 다섯 번째 친구가 되어 '5마리 친구' 이정표에 닿고, 보리(신청완료)는 데모 승인 → 기록하면 한 달 전에 만난 아이를 다시 만나 '다시 만난 친구'가 됩니다.
• 실제로 연동되지 않은 동작은 화면에 데모 표시를 붙였습니다(보호소 승인, 방문일 전 기록).
• 마이페이지의 "처음 상태로 되돌리기"로 언제든 초기 데이터로 돌아갑니다.

이미지

실제 사진이 적용되어 있으며, 모두 WebP로 최적화되어 총 2.6MB입니다.

public/images/
├── dogs/          강아지 전신 사진 18장 (900×900)
│   └── face/      얼굴 중심 크롭 썸네일 18장 (320×320) — 작은 아바타용
├── shelters/      보호소 외관 사진 5장 (1200×900)
├── guide/         봉사 가이드 사진 7장 (1200×900)
└── brand/         제작사(미래에이아이랩) 로고 — 원본 그대로, 투명 배경

교체·추가 방법:

• 강아지: public/images/dogs/ 에 넣고 lib/data/dogs.ts 의 image 필드에 파일명 지정. 작은 아바타에 쓰이는 얼굴 썸네일은 같은 파일명으로 dogs/face/ 에 함께 넣습니다.
• 보호소: public/images/shelters/ + lib/data/shelters.ts 의 image 필드.
• 표시 비율은 컴포넌트가 담당합니다 — 카드 4:3, 상세 히어로 4:3(모바일)/16:10(PC), 보호소 16:9. 원본 비율과 무관하게 object-fit: cover 로 크롭되므로 레이아웃이 무너지지 않습니다.
• image 가 null 이면 자동 폴백: 강아지는 팔레트 기반 일러스트, 보호소는 소속 아이들의 얼굴 콜라주. (현재 '행복한 쉼터'만 외관 사진이 없어 이 폴백이 적용되어 있습니다.)

브랜딩

서비스 브랜드는 RescueWalk, 제작사 브랜드는 미래에이아이랩으로 층을 나눠 씁니다. 한 화면에 제작사 표기가 반복되지 않도록 두 곳으로만 제한했습니다.

위치	형태
모든 페이지 하단	SampleBridgeCTA — 제작 표기 + 소개 + 상담 CTA (텍스트만, 로고 없음)
푸터	MiraeWordmark — 원본 로고 1회 (밝은 배경 전용: 로고가 짙은 남색)

app/layout.tsx 의 metadata(creator/publisher/OpenGraph)에도 제작사를 명시해 링크 공유 시 노출됩니다.

샘플 공통 CTA 브릿지

샘플을 다 본 사용자를 제작사 인지 → 상담 전환 → 다른 샘플·홈페이지로 이어주는 공통 섹션입니다. app/layout.tsx 에 한 번 삽입되어 모든 페이지 하단(푸터 위)에 동일하게 노출됩니다.

components/SampleBridgeCTA.tsx   CTA 섹션 본문 (다른 샘플에 그대로 복사 가능)
components/SampleBridgeSlot.tsx  경로별 노출 제어 (신청 폼 단계에서만 숨김)
lib/brand.ts                     링크 · 문구 상수 ← 여기만 고치면 전체 반영

링크를 바꾸려면 → lib/brand.ts 의 MIRAE_LINKS

키	현재 값	쓰이는 곳
consult	miraeailab.com/business-diagnosis	메인 CTA "우리 회사도 만들어보기"
samples	miraeailab.com/business-services	서브 "다른 샘플 보기"
home	miraeailab.com/	서브 "미래AI랩 홈페이지"

문구를 바꾸려면 → lib/brand.ts 의 MIRAE_CTA_COPY (eyebrow 배지 / kicker 제작 표기 / title 헤드라인 / description 회사 소개 / note 버튼 보조문구 / consultLabel·samplesLabel·homeLabel 버튼 라벨). 특정 페이지에서만 다르게 쓰려면 <SampleBridgeCTA title="..." consultHref="..." /> 처럼 같은 이름의 props 로 덮어쓸 수 있습니다.

노출 경로를 바꾸려면 → components/SampleBridgeSlot.tsx 의 HIDDEN_PATHS. 현재 /dogs/[id]/apply 만 제외되어 있습니다(3단계 신청 폼 진행 중에 외부 링크를 노출하면 샘플의 핵심 전환 흐름을 중간에 이탈시키기 때문). 신청이 끝난 /complete/[rid] 에서는 정상 노출되어, 흐름을 다 본 직후에 CTA를 만납니다.

디자인·모션 원칙

• 샘플 본문(크림 톤)과 구분되는 딥네이비 AX 톤 밴드 — "여기부터는 제작사 영역"이 한눈에 읽힘
• CTA 안에는 로고 이미지를 넣지 않음(푸터에 이미 노출). 브랜드명과 소개 문구만 텍스트로 전달
• 애니메이션은 두 개뿐: 메인 CTA의 light sweep(6초 주기, 실제 발광 약 1.5초)과 배지 점의 느린 호흡(3.2초). hover 시 살짝 lift + glow
• prefers-reduced-motion 에서는 sweep이 숨고 무한 애니메이션이 모두 정지

모바일 하단 sticky mini CTA는 넣지 않았습니다. 이 샘플은 이미 하단 Bottom Navigation과 강아지 상세의 Sticky 신청 버튼을 쓰고 있어, 세 번째 고정 바가 겹치면 핵심 전환(산책 신청)을 가립니다.

Supabase 연동 포인트

MVP는 데모 모드로 동작하지만, 데이터 계층이 교체 가능하게 분리되어 있습니다.

• 스키마 대응: lib/types.ts — shelters, dogs, walk_slots(availableTimes), walk_requests, favorites, activity_logs, testimonials
• 교체 지점: lib/store.tsx 의 addRequest / cancelRequest / confirmRequest / completeWalk / toggleFavorite / toggleInterestRegion 액션을 Supabase 쿼리로 대체 (confirmRequest 는 데모 전용 — 실제 서비스에서는 보호소 관리자 화면이 호출)
• 규칙(lib/domain/*)은 저장소와 무관하므로 그대로 재사용합니다. 서버로 옮길 때도 같은 함수로 입력을 검증하면 화면과 서버의 판단이 어긋나지 않습니다.
• 정적 데이터: lib/data/*.ts → Supabase 테이블 fetch로 대체

상태 정의

pending(신청완료) ─ confirmRequest ─▶ confirmed(방문예정) ─ completeWalk ─▶ completed(산책완료)
      └──────────── cancelRequest ────────┴──▶ cancelled(취소)

• 구현과 테스트: lib/domain/requests.ts, lib/domain/requests.test.ts

• completeWalk 는 activity_logs 에 기록(requestId 연결, 관찰 포함)을 추가해 활동 영향·이정표에 바로 반영됩니다.

• 각 전이 시각(confirmedAt / completedAt / cancelledAt)을 저장해 신청 상세의 진행 단계에 씁니다.

• 화면의 진행 단계는 저장 상태 + 방문 시각으로 계산합니다(visitStages): pending→승인 대기, confirmed+방문 전→방문 예정, confirmed+방문 시각 이후→산책(기록 대기), completed→완료.

• Dog Availability: available(일정에 따라 신청 가능) / unavailable(치료·휴식으로 신청 중단)

디자인 원칙

• 화면 목적에 따라 비주얼과 기능의 비중을 다르게(하이브리드)
  • 감정이 결정을 이끄는 곳은 사진이 먼저: 홈 첫 화면(산책 장면 위에 문구), 강아지 상세(모바일에서 사진이 화면 끝까지 차고 본문이 시트처럼 올라옴), 보호소 상세(사진 위에 이름·운영 상태), 사진이 없는 보호소는 소속 아이들 사진 콜라주
  • 판단·실행하는 곳은 기능이 먼저: 목록(필터 줄이 헤더 아래 고정, 비교하기 쉬운 가로형 카드), 신청 3단계, 신청 내역(가장 가까운 산책을 주문 추적처럼 다섯 칸 진행 막대로), 활동 기록(브랜드 색 요약 한 장)
  • 같은 정보 줄 패턴을 반복해 학습 비용을 줄임: 상세·보호소·홈의 '한눈에 세 가지'(값 위, 이름 아래)
• 집중 화면: 모바일의 강아지 상세·신청 흐름은 공용 헤더·하단 내비·푸터를 빼고 자체 뒤로가기·하단 행동 하나만(lib/routes.ts). 상세는 사진을 지나면 접히는 앱 바 + 섹션 목차(지금 읽는 섹션 표시, 이동해도 주소에 #을 남기지 않음)
• 같은 것은 같은 모양으로: 신청 1단계와 상세 '가능한 일정'은 같은 날짜 칸(DateCell)·같은 표기(휴무/마감/–)
• 피드백: 찜하면 하트가 한 번 튀어 오름, 헤더는 내리기 시작할 때만 그림자, 빈 화면·404 에는 아이들 얼굴, 접수 완료는 '누구를 만나러 가는지'(아이 얼굴 + 완료 표시)
• 확인 창보다 되돌리기: 찜 해제처럼 가벼운 일은 묻지 않고 바로 하되 토스트의 '되돌리기'로 되살림. 되돌릴 수 없는 일(신청 취소·데이터 초기화)만 확인 창
• 움직임은 의미가 있을 때만: 신청 단계는 앞으로 가면 오른쪽에서, 뒤로 가면 왼쪽에서 들어옴(단계가 바뀐 순간에만 방향 결정), 화면 이동은 0.24초 투명도만(채우기를 남기지 않아 고정·스티키 요소에 영향 없음), 동작 줄이기 설정이면 모두 생략
• 손에 맞게: 모바일 바텀시트는 머리를 끌어내려 닫음(110px 이상 또는 빠르게 쓸어내림, 조금이면 제자리), 입력 칸은 떠날 때 바로 확인(입력 중에는 방해하지 않음)하고 맞으면 작은 확인 표시
• 색: 브랜드 sage + 강조 tangerine(화면당 주요 행동에만) + cream/ink 중립 + 의미 색 (완료=sage, 대기=tangerine, 취소·위험=red). 선택 상태는 sage, 태그는 중립색으로 통일
• 대비: 글자가 올라가는 색은 모두 WCAG AA(4.5:1) 이상 — 주요 버튼 tangerine-600 #B9520C 위 흰 글자 4.9:1, 보조 글자 ink-400 #766C62 는 크림 배경에서 5.0:1. 밝은 tangerine-500 은 장식(아이콘·하트)에만
• 키보드: 본문으로 건너뛰기 링크, 모든 링크·버튼에 같은 포커스 링(:focus-visible), 신청 단계가 바뀌면 새 단계 제목으로 포커스 이동, 대화상자는 포커스 트랩·Esc
• 한 화면 한 행동: 강아지 카드에는 버튼을 두지 않고 카드 전체를 상세 링크로, 신청은 상세의 단일 CTA로 모음. 신청 상세는 상태별로 행동 하나만 노출
• 카드 최소화: 독립된·클릭 가능한 객체에만 카드. 정보 묶음은 구분선·여백·타이포로 구분
• 고정 바는 한 겹: 상세·신청 흐름에서는 하단 내비를 숨기고 그 화면의 주요 행동만 하단에 고정(상세는 다음 가능 일정 + 신청)
• 오류·예외: 깨진 저장값은 불러올 때 걸러내고(lib/store.tsx), 그래도 화면 오류가 나면 app/error.tsx에서 다시 시도 / 데모 데이터 되돌리기를 제공
• 터치 기기: hoverOnlyWhenSupported로 탭한 버튼에 hover 색이 남지 않게
• 조사 자동 처리: 이름 뒤 조사는 withJosa()로 받침에 맞게("장군과", "보리와")
• 떠 있는 요소끼리 겹치지 않게: 바텀시트·모달이 열리면 공용 뒤로/앞으로 버튼을 잠시 숨김(body[data-modal-open]), 푸터 하단은 그 버튼 높이만큼 여백 확보
• 토큰은 app/globals.css 상단 주석에 정리(radius 12/16/20/24, shadow card/card-hover/overlay, = 숫자·날짜 한 덩어리의 줄바꿈 금지 — 여러 항목이 이어지는 목록에는 쓰지 않음)

품질 기준

CI(.github/workflows/ci.yml)가 push·PR 마다 아래를 모두 통과해야 합니다.

단계	내용
Lint · Typecheck	ESLint(next/core-web-vitals), tsc --noEmit (strict)
단위 테스트	lib/**/*.test.ts 165개 — 캘린더 파일(시간대 변환·글자 이스케이프·75바이트 접기·[승인 대기]), 이정표 진행률, 검색(이름·품종·보호소·지역, 띄어쓰기 무시, 다른 조건과 AND), 운영 일정(휴무·산책 요일·당일 마감·중복·다음 일정), 필터·정렬·URL 왕복(이전 주소 호환), 3단계 진입·경험 매칭·약속, 임시 저장 복원·미리 고른 일정, 상태 전이 멱등성·진행 5단계, 활동 영향·이정표, 저장값 검증, 데이터 무결성(모든 시간이 운영 시간 안, 시드가 휴무일에 잡히지 않음)
E2E (데스크톱 1280 · 모바일 Pixel 7, 45개 × 2)	신규 사용자 전체 여정(처음 방문 → 초보 가능한 아이 → 상세에서 일정 선택 → 신청 → 승인 → 기록 → 첫 이정표), 캘린더 파일 내려받기·준비물 체크 유지, 찜 해제 되돌리기, 바텀시트 끌어 닫기, 칸을 떠날 때 검증·고른 일정 바꾸기, 이정표 진행 막대·달별 일지, 가이드 목차, 카드 판단 정보, 검색(새로고침 유지·칩으로 해제), 모바일 상세 목차, 필터 주소 유지, 경험자만 아이 신청 차단, 휴무일 선택 불가(같은 요일은 같은 열), 뒤로/앞으로·새로고침 복원, 중복 신청 방지, 진행 단계, 관찰 기록, 다시 만난 친구, 취소(Esc), 초기화, 빈·깨진 데이터, 404
접근성	axe-core WCAG 2.1 AA + best-practice 위반 0건 (주요 11개 화면 × 2개 기기, 별도 점검 22개 화면 × 2개 기기 + 대화상자 + 목차가 펼쳐진 모바일 상세)
레이아웃 · 콘솔	3601440px 5개 폭 × 11개 화면 가로 스크롤 0(별도로 3201440px 7개 폭 × 14개 화면, 위·아래로 내린 상태까지), 일반 탐색 중 콘솔 오류·하이드레이션 경고 0