POP-SPOT v2.34 (1/4) — 팝스팟 UI 리디자인 배포 — 홈·상세·MY·여권·코스·음악·동행·관리자 (redesign/test 병합)
v2.34 릴리즈에 포함된 Git 기록을 빠짐없이 펼친 기술 기록이다. 전문 용어는 바로 풀어 쓰고, 바뀐 모든 코드 줄을 Before → After로 비교했다.
먼저 쉽게 설명하면
팝스팟 UI 리디자인 배포 — 홈·상세·MY·여권·코스·음악·동행·관리자 (redesign/test 병합) 작업이 중심이다. 이 릴리즈는 눈에 보이는 결과뿐 아니라 그 결과를 만든 파일과 코드까지 모두 추적했다.
읽는 법
Git 기준 범위
커밋 7003342 — redesign(홈 1차): 팝업 사진 카드 레일 + 한글화 + 지도 확대변경 파일 2개
쉬운 설명: 팝업 사진 카드 레일 + 한글화 + 지도 확대 작업이다.
바꾼 이유: 디자인 진단서 P0 기반 홈 재설계 테스트 (redesign/test 브랜치, 롤백 체크포인트): - PopupCard 신규 (사진+D-day+지역+카테고리+♥) - 다크 글래스 섹션 제거 → "지금 뜨는 팝업" 사진 카드 레일 - 한글화: REAL-TIME RANKING→실시간 랭킹, LIVE DATA→실시간, Welcome to POP-SPOT→환영문구, Daily Style Forecast→오늘의 스타일, NEW·BETA→새 기능 - 지도 데스크톱 확대 (min-h 560) - 영상 배경(/bg.mp4) 유지
파일 수: 2개이다.
파일 1. popspot-frontend/app/HomeClient.tsx
파일 전체 문맥
조각만 보면 알기 어려운 코드를 파일 처음부터 끝까지 보여 준다. 초록은 추가·수정, 빨강은 삭제된 줄이다.
파일 2. popspot-frontend/src/components/main/PopupCard.tsx
파일 전체 문맥
조각만 보면 알기 어려운 코드를 파일 처음부터 끝까지 보여 준다. 초록은 추가·수정, 빨강은 삭제된 줄이다.
커밋 6b9639f — redesign(홈 2차): 지도 히어로화 + 정리변경 파일 1개
쉬운 설명: 지도 히어로화 + 정리 작업이다.
바꾼 이유: 디자인 진단서 P0 "지도를 홈의 주인공으로": - 지도 전체폭·크게(58vh) + 검색바 그 위 전체폭 - 보조 정보(실시간 랭킹·캘린더·실시간 혼잡도)를 지도 아래 3열로 정리 - 음악 프로모 배너 제거(디클러터) - "AI Report" → "실시간 혼잡도" 한글화 - 미사용 Music 아이콘 import 정리 - 영상 배경·팝업 카드 레일 유지
파일 수: 1개이다.
파일 1. popspot-frontend/app/HomeClient.tsx
파일 전체 문맥
조각만 보면 알기 어려운 코드를 파일 처음부터 끝까지 보여 준다. 초록은 추가·수정, 빨강은 삭제된 줄이다.
커밋 d7c7914 — redesign(테스트 편의): 개발 환경 게스트 자동진입 우회변경 파일 1개
쉬운 설명: 개발 환경 게스트 자동진입 우회 작업이다.
바꾼 이유: 로컬(백엔드 없음)에서 로그인 없이 재설계 홈을 바로 보려고, 유저·게스트 둘 다 없을 때 개발 환경에서만 startGuestMode() 자동 시작 (기존엔 /login 이동). process.env.NODE_ENV==='development' 가드 → 실배포에는 영향 없음. ⚠️ redesign/test 전용. main 병합 전 제거 권장.
파일 수: 1개이다.
파일 1. popspot-frontend/app/HomeClient.tsx
파일 전체 문맥
조각만 보면 알기 어려운 코드를 파일 처음부터 끝까지 보여 준다. 초록은 추가·수정, 빨강은 삭제된 줄이다.
커밋 34c5ace — redesign(카드): 사진 없을 때 카테고리 플레이스홀더변경 파일 1개
쉬운 설명: 사진 없을 때 카테고리 플레이스홀더 작업이다.
바꾼 이유: 자동수집 팝업은 imageUrl 이 없어(관리자 PopupImage 등록 시에만 채워짐). 밋밋한 핀 대신 카테고리별 브랜드 그라디언트 + 아이콘으로 "의도된 카드" 표현. 틀린 사진을 붙이는 대신, 사진 없으면 카테고리 색으로 채움.
파일 수: 1개이다.
파일 1. popspot-frontend/src/components/main/PopupCard.tsx
파일 전체 문맥
조각만 보면 알기 어려운 코드를 파일 처음부터 끝까지 보여 준다. 초록은 추가·수정, 빨강은 삭제된 줄이다.
커밋 73774d9 — redesign(홈): 카테고리 커버 사진 + 로컬 목업변경 파일 3개
쉬운 설명: 카테고리 커버 사진 + 로컬 목업 작업이다.
바꾼 이유: - PopupCard: 이미지 로드 실패 시 카테고리 그라디언트로 폴백(onError) — 외부 커버 깨져도 안전 - devMockPopups: 백엔드 없는 로컬(dev)에서 카드 레일을 채우는 목업. 카테고리별 다른 무료 커버(LoremFlickr, 키워드 매칭 + 고정 seed)로 "각각 다른 팝업 사진" 시연. process.env.NODE_ENV==='development' 에서만 주입 → 프로덕션 무영향. - 실배포 정식 커버는 백엔드 Pexels(무료·상업 OK·출처 불필요)로 채울 예정(디자인 확정 후).
파일 수: 3개이다.
파일 1. popspot-frontend/app/HomeClient.tsx
파일 전체 문맥
조각만 보면 알기 어려운 코드를 파일 처음부터 끝까지 보여 준다. 초록은 추가·수정, 빨강은 삭제된 줄이다.
파일 2. popspot-frontend/src/components/main/PopupCard.tsx
파일 전체 문맥
조각만 보면 알기 어려운 코드를 파일 처음부터 끝까지 보여 준다. 초록은 추가·수정, 빨강은 삭제된 줄이다.
파일 3. popspot-frontend/src/lib/devMockPopups.ts
파일 전체 문맥
조각만 보면 알기 어려운 코드를 파일 처음부터 끝까지 보여 준다. 초록은 추가·수정, 빨강은 삭제된 줄이다.
커밋 eddddf4 — redesign(체크포인트1): 커버 사물중심(얼굴↓) + 네비 확대변경 파일 2개
쉬운 설명: 커버 사물중심(얼굴↓) + 네비 확대 작업이다.
바꾼 이유: - devMockPopups: 커버 키워드를 사물·인테리어 중심으로 교체(사람 얼굴 최소화) - Header 데스크톱 네비: 17px→20px, gap-8→10, 로고 h-12→h-14
파일 수: 2개이다.
파일 1. popspot-frontend/src/components/layout/Header.tsx
파일 전체 문맥
조각만 보면 알기 어려운 코드를 파일 처음부터 끝까지 보여 준다. 초록은 추가·수정, 빨강은 삭제된 줄이다.
파일 2. popspot-frontend/src/lib/devMockPopups.ts
파일 전체 문맥
조각만 보면 알기 어려운 코드를 파일 처음부터 끝까지 보여 준다. 초록은 추가·수정, 빨강은 삭제된 줄이다.
커밋 3ff8864 — redesign(체크포인트2): 실시간 랭킹 → 눌러서 여는 사진 카드 모달변경 파일 3개
쉬운 설명: 실시간 랭킹 → 눌러서 여는 사진 카드 모달 작업이다.
바꾼 이유: - 랭킹 카드(항상 리스트) → 캘린더·혼잡도처럼 "눌러서 여는 타일"(상위3 썸네일 미리보기 + CTA) - AllTrendingModal: 텍스트 리스트 → PopupCard 사진 그리드(사진+이름) + 랭킹 배지, 조회수(인기) 내림차순 - PopupCard: cn() 도입해 폭 오버라이드 가능(레일 w-220 / 모달 w-full) - 랭킹/모달 모두 viewCount(인기)순 — "진짜 인기순" 반영
파일 수: 3개이다.
파일 1. popspot-frontend/app/HomeClient.tsx
파일 전체 문맥
조각만 보면 알기 어려운 코드를 파일 처음부터 끝까지 보여 준다. 초록은 추가·수정, 빨강은 삭제된 줄이다.
파일 2. popspot-frontend/src/components/main/PopupCard.tsx
파일 전체 문맥
조각만 보면 알기 어려운 코드를 파일 처음부터 끝까지 보여 준다. 초록은 추가·수정, 빨강은 삭제된 줄이다.
파일 3. popspot-frontend/src/features/popup/AllTrendingModal.tsx
파일 전체 문맥
조각만 보면 알기 어려운 코드를 파일 처음부터 끝까지 보여 준다. 초록은 추가·수정, 빨강은 삭제된 줄이다.
커밋 7dd406e — redesign(체크포인트3): 커버를 느낌 맞춤 큐레이션 사진으로 (사람 없음)변경 파일 1개
쉬운 설명: 커버를 느낌 맞춤 큐레이션 사진으로 (사람 없음) 작업이다.
바꾼 이유: - LoremFlickr 랜덤 → 각 팝업 느낌에 맞춰 손으로 고른 Pexels 특정 사진(사람 없는 인테리어/제품) - 부티크·토이·향수·베이커리·선글라스·전시·테크·커피 등 vibe 매칭, URL 고정(랜덤 X) - Pexels License 상업 무료·출처 불필요. 키 불필요 CDN URL.
파일 수: 1개이다.
파일 1. popspot-frontend/src/lib/devMockPopups.ts
파일 전체 문맥
조각만 보면 알기 어려운 코드를 파일 처음부터 끝까지 보여 준다. 초록은 추가·수정, 빨강은 삭제된 줄이다.
커밋 8d23307 — redesign(체크포인트4): 서치존 검색 → 지도 자동 이동변경 파일 2개
쉬운 설명: 서치존 검색 → 지도 자동 이동 작업이다.
바꾼 이유: - SearchZone: onSelectPopup 콜백 추가. 히트 클릭 시 상세 이동 대신 콜백 호출 + 검색 닫기(refine 초기화) - HomeClient: mapCenter 상태 + allPopups 에서 좌표 찾아 InteractiveMap center 로 전달 - InteractiveMap 은 기존 center prop→panTo 지원(무변경) - 실데이터에서 동작(로컬은 Algolia 실인덱스 vs 목업 id 불일치로 데모 제한)
파일 수: 2개이다.
파일 1. popspot-frontend/app/HomeClient.tsx
파일 전체 문맥
조각만 보면 알기 어려운 코드를 파일 처음부터 끝까지 보여 준다. 초록은 추가·수정, 빨강은 삭제된 줄이다.
파일 2. popspot-frontend/src/features/popup/SearchBox.tsx
파일 전체 문맥
조각만 보면 알기 어려운 코드를 파일 처음부터 끝까지 보여 준다. 초록은 추가·수정, 빨강은 삭제된 줄이다.
커밋 829c2b4 — redesign(체크포인트5): 기능 소개 개별 섹션 4종 (#6)변경 파일 2개
쉬운 설명: 기능 소개 개별 섹션 4종 (#6) 작업이다.
바꾼 이유: - FeatureSections 신규: 코스·음악·여권·동행을 작전지도 스타일 풀폭 다크 섹션으로, 각각 다른 액센트(라임/핑크/앰버/스카이) + 비주얼(경로/LP·파형/스탬프/채팅) + 좌우 교차 - 4개 한뭉치(짜침) → 각각 다른 느낌 개별 섹션 - 구 협업 프로모(작전지도)는 hidden 처리(FeatureSections 로 대체) — 미사용 블록 추후 정리 - CTA → handleTabChange(코스/음악/여권/동행)
파일 수: 2개이다.
파일 1. popspot-frontend/app/HomeClient.tsx
파일 전체 문맥
조각만 보면 알기 어려운 코드를 파일 처음부터 끝까지 보여 준다. 초록은 추가·수정, 빨강은 삭제된 줄이다.
파일 2. popspot-frontend/src/components/main/FeatureSections.tsx
파일 전체 문맥
조각만 보면 알기 어려운 코드를 파일 처음부터 끝까지 보여 준다. 초록은 추가·수정, 빨강은 삭제된 줄이다.
커밋 44d54ac — redesign(체크포인트6): 기능 섹션 사이 브레이커 인터스티셜변경 파일 1개
쉬운 설명: 기능 섹션 사이 브레이커 인터스티셜 작업이다.
바꾼 이유: 다크 섹션 4개 연속의 단조로움 해소 — 사이사이 라이트 중앙정렬 인터스티셜 3개: - 코스→[유저 후기]→음악→[매일 업데이트 스탯]→여권→[마감 알림 한마디]→동행 - 다음 섹션 액센트로 divider·eyebrow 를 물들여 자연스레 연결. 다크↔라이트 대비로 리듬 생성.
파일 수: 1개이다.
파일 1. popspot-frontend/src/components/main/FeatureSections.tsx
파일 전체 문맥
조각만 보면 알기 어려운 코드를 파일 처음부터 끝까지 보여 준다. 초록은 추가·수정, 빨강은 삭제된 줄이다.
커밋 6f5829c — redesign(체크포인트7): 기능 배치 재구성 — 코스 풀폭 유지 + 음악·여권·동행 타일화변경 파일 2개
쉬운 설명: 기능 배치 재구성 — 코스 풀폭 유지 + 음악·여권·동행 타일화 작업이다.
바꾼 이유: 요청대로 재배치: - 코스("하나의 코스로 잇다")는 풀폭 다크 섹션 그대로 유지(작전지도) - 음악·여권·동행 → 실시간랭킹/캘린더/혼잡도와 같은 크기 타일(col-4, h-340) 3열로 실시간 랭킹행 바로 밑 · 지금 뜨는 팝업 위에 배치. 디자인(다크+액센트+미니 비주얼) 유지 - FeatureTiles 신규 export, 미니 비주얼(파형/스탬프/아바타) - 인터스티셜 제거(이제 풀폭 섹션은 코스 하나뿐이라 불필요)
파일 수: 2개이다.
파일 1. popspot-frontend/app/HomeClient.tsx
파일 전체 문맥
조각만 보면 알기 어려운 코드를 파일 처음부터 끝까지 보여 준다. 초록은 추가·수정, 빨강은 삭제된 줄이다.
파일 2. popspot-frontend/src/components/main/FeatureSections.tsx
파일 전체 문맥
조각만 보면 알기 어려운 코드를 파일 처음부터 끝까지 보여 준다. 초록은 추가·수정, 빨강은 삭제된 줄이다.
커밋 1d32fa4 — redesign(시안): 홈 하단 1a안 (히어로 + 서브 타일)변경 파일 2개
쉬운 설명: 홈 하단 1a안 (히어로 + 서브 타일) 작업이다.
바꾼 이유: 6칸 벤토 → 3칸으로: 실시간 랭킹을 큰 히어로(필터칩+사진 랭킹 리스트+전체보기)로, 나의 기록(여권)·같이 갈 사람(동행)을 사이드 타일로. HomeBento1a 신규. - 지도 그리드에서 랭킹/캘린더/혼잡도 타일 제거 → 검색+지도(히어로)만 - 음악은 이 존 제외(1a: 검색 옆으로), 캘린더·혼잡도도 제외(1a: 지도 필터칩 — 미구현) - 코스 풀폭 섹션은 아래 유지. FeatureTiles 는 export 만 남김(1b/1c 대비) ※ 방향 확정 후 미사용 import/캘린더·혼잡도 진입점 정리
파일 수: 2개이다.
파일 1. popspot-frontend/app/HomeClient.tsx
파일 전체 문맥
조각만 보면 알기 어려운 코드를 파일 처음부터 끝까지 보여 준다. 초록은 추가·수정, 빨강은 삭제된 줄이다.
파일 2. popspot-frontend/src/components/main/HomeBento1a.tsx
파일 전체 문맥
조각만 보면 알기 어려운 코드를 파일 처음부터 끝까지 보여 준다. 초록은 추가·수정, 빨강은 삭제된 줄이다.
커밋 d7ed53a — redesign(1a 수정): 필터 칩 작동 + 유저별 가짜값 제거변경 파일 1개
쉬운 설명: 필터 칩 작동 + 유저별 가짜값 제거 작업이다.
바꾼 이유: - 필터 칩(전체/이번주/마감임박/혼잡) 실제 동작 — 랭킹을 endDate·status로 필터, 활성 칩 하이라이트, 빈 결과 안내 - 나의 기록/같이 갈 사람: 하드코딩 "스탬프 5개·매칭중 2/4" 제거(유저마다 다른 값) → 기능 설명 중립 문구 + 일반 일러스트. 실제 수치는 로그인 데이터 배선 시 별도 추가
파일 수: 1개이다.
파일 1. popspot-frontend/src/components/main/HomeBento1a.tsx
파일 전체 문맥
조각만 보면 알기 어려운 코드를 파일 처음부터 끝까지 보여 준다. 초록은 추가·수정, 빨강은 삭제된 줄이다.