v1.4 / v1.5change journal

POP-SPOT v1.4 / v1.5 (11/22) — v1.4 보강 (DTO 15 + 엔티티 7) + v1.5 프론트 Clean Code Wave 1-4, 7

김동현221
#백엔드#프론트엔드#회고#트러블슈팅
v1.4 / v1.5 변경 기록의 이어지는 부분이다. 같은 검증 ID dcc58899695385a55eff935199166df24230ab2430603e6005d057bb3f01fcca를 사용한다.
커밋 8f03504 — feat(music): 글로벌 미니/풀 플레이어 + 홈 탭 통합변경 파일 1

GitHub에서 이 커밋 보기

파일 10. popspot-frontend/src/components/music/MusicTab.tsx

파일 전체 문맥

조각만 보면 알기 어려운 코드를 파일 처음부터 끝까지 보여 준다. 초록은 추가·수정, 빨강은 삭제된 줄이다.

커밋 fce193f — feat(music): 검색창 자동완성 드롭다운변경 파일 1

GitHub에서 이 커밋 보기

쉬운 설명: 검색창 자동완성 드롭다운 작업이다.

바꾼 이유: - 입력 즉시 YouTube Suggest 기반 자동완성 후보 표시 - 키보드 네비게이션 (↑↓/Enter/Esc) 지원 - 후보 클릭 또는 Enter 시점에만 실제 검색 실행 - 외부 클릭으로 드롭다운 자동 닫힘 - 디바운스 250ms 로 자동완성 호출 최적화

파일 수: 1개이다.


파일 1. popspot-frontend/src/components/music/MusicTab.tsx

파일 전체 문맥

조각만 보면 알기 어려운 코드를 파일 처음부터 끝까지 보여 준다. 초록은 추가·수정, 빨강은 삭제된 줄이다.

커밋 ee6305d — feat(music): 검색 자동완성 엔드포인트 + 검색 흐름 단순화변경 파일 4

GitHub에서 이 커밋 보기

쉬운 설명: 검색 자동완성 엔드포인트 + 검색 흐름 단순화 작업이다.

바꾼 이유: - GET /api/music/suggest: YouTube Suggest 프록시 (BFF 패턴, 메모리 캐시) - 음악 관련 키워드 포함 후보 우선 정렬 - searchTracks 의 Groq 정규화/약한 매칭/YouTube 폴백 제거 → 자동완성이 사용자 의도를 정확한 텍스트로 만들어주므로 단순 Spotify 호출로 충분 - MusicQueryNormalizationService 는 deprecated 빈 클래스로 정리

파일 수: 4개이다.


파일 1. popspot-backend/src/main/java/com/example/popspotbackend/controller/MusicController.java

파일 전체 문맥

조각만 보면 알기 어려운 코드를 파일 처음부터 끝까지 보여 준다. 초록은 추가·수정, 빨강은 삭제된 줄이다.

파일 2. popspot-backend/src/main/java/com/example/popspotbackend/service/music/MusicQueryNormalizationService.java

파일 전체 문맥

조각만 보면 알기 어려운 코드를 파일 처음부터 끝까지 보여 준다. 초록은 추가·수정, 빨강은 삭제된 줄이다.

파일 3. popspot-backend/src/main/java/com/example/popspotbackend/service/music/MusicService.java

파일 전체 문맥

조각만 보면 알기 어려운 코드를 파일 처음부터 끝까지 보여 준다. 초록은 추가·수정, 빨강은 삭제된 줄이다.

파일 4. popspot-backend/src/main/java/com/example/popspotbackend/service/music/SearchSuggestService.java

파일 전체 문맥

조각만 보면 알기 어려운 코드를 파일 처음부터 끝까지 보여 준다. 초록은 추가·수정, 빨강은 삭제된 줄이다.

커밋 1dc5695 — fix(music): 곡 클릭 후 video_id 갱신 안 되던 버그 수정변경 파일 1

GitHub에서 이 커밋 보기

쉬운 설명: 곡 클릭 후 video_id 갱신 안 되던 버그 수정 작업이다.

바꾼 이유: /play API 응답에 백엔드가 lazy fetch 로 채운 youtube_video_id 가 포함되는데, 프론트가 setMatch 만 하고 setCurrent 를 다시 안 해서 IFrame Player 가 영원히 null video_id 로 남아있던 문제.

파일 수: 1개이다.


파일 1. popspot-frontend/src/components/music/MusicPlayerProvider.tsx

파일 전체 문맥

조각만 보면 알기 어려운 코드를 파일 처음부터 끝까지 보여 준다. 초록은 추가·수정, 빨강은 삭제된 줄이다.

커밋 c9a2a03 — fix(music): 플레이어 닫기/내리기 버튼 클릭 시 페이지 이동 방지변경 파일 1

GitHub에서 이 커밋 보기

쉬운 설명: 플레이어 닫기/내리기 버튼 클릭 시 페이지 이동 방지 작업이다.

바꾼 이유: 풀스크린 플레이어가 다른 페이지(예: 팝업 상세) 위에 떠 있을 때 ChevronDown / X 버튼 클릭이 부모 element 의 link/router 까지 전파되어 의도치 않은 페이지 이동이 발생하던 문제.

파일 수: 1개이다.


파일 1. popspot-frontend/src/components/music/GlobalMusicPlayer.tsx

파일 전체 문맥

조각만 보면 알기 어려운 코드를 파일 처음부터 끝까지 보여 준다. 초록은 추가·수정, 빨강은 삭제된 줄이다.

커밋 c4ec65d — fix(music): YouTube IFrame 과 React DOM reconciler 충돌 해결변경 파일 1

GitHub에서 이 커밋 보기

쉬운 설명: YouTube IFrame 과 React DOM reconciler 충돌 해결 작업이다.

바꾼 이유: 증상: 풀 플레이어 내리기/닫기 또는 라우트 이동 시 'Failed to execute insertBefore/removeChild' NotFoundError 후 화이트 스크린.

파일 수: 1개이다.


파일 1. popspot-frontend/src/components/music/useYouTubePlayer.ts

파일 전체 문맥

조각만 보면 알기 어려운 코드를 파일 처음부터 끝까지 보여 준다. 초록은 추가·수정, 빨강은 삭제된 줄이다.

커밋 54c404f — feat(music): 자동완성 드롭다운 + 글로벌 플레이어 + 한국어 검색 정상화변경 파일 4

GitHub에서 이 커밋 보기

쉬운 설명: 자동완성 드롭다운 + 글로벌 플레이어 + 한국어 검색 정상화 작업이다.

바꾼 이유: 검색 UX: - 자동완성 드롭다운 (YouTube Suggest 기반, 키보드 ↑↓ Enter Esc 지원) - 입력만으로도 자동 검색 (디바운스 250ms), 후보 클릭 시 정확한 결과로 갈아탐 - 외부 클릭 시 드롭다운 자동 닫힘

파일 수: 4개이다.


파일 1. popspot-backend/src/main/java/com/example/popspotbackend/service/music/MusicQueryNormalizationService.java

파일 전체 문맥

조각만 보면 알기 어려운 코드를 파일 처음부터 끝까지 보여 준다. 초록은 추가·수정, 빨강은 삭제된 줄이다.

파일 2. popspot-backend/src/main/java/com/example/popspotbackend/service/music/SearchSuggestService.java

파일 전체 문맥

조각만 보면 알기 어려운 코드를 파일 처음부터 끝까지 보여 준다. 초록은 추가·수정, 빨강은 삭제된 줄이다.

파일 3. popspot-backend/src/main/java/com/example/popspotbackend/service/music/SpotifySearchService.java

파일 전체 문맥

조각만 보면 알기 어려운 코드를 파일 처음부터 끝까지 보여 준다. 초록은 추가·수정, 빨강은 삭제된 줄이다.

파일 4. popspot-frontend/src/components/music/MusicTab.tsx

파일 전체 문맥

조각만 보면 알기 어려운 코드를 파일 처음부터 끝까지 보여 준다. 초록은 추가·수정, 빨강은 삭제된 줄이다.

커밋 f2bc977 — feat(map): 카테고리 enum DB 일치 + 좌표 중복 자동 분산 + 항상 이름 보이는 핀변경 파일 1

GitHub에서 이 커밋 보기

쉬운 설명: 카테고리 enum 데이터 저장소 일치 + 좌표 중복 자동 분산 + 항상 이름 보이는 핀 작업이다.

바꾼 이유: 문제: - 활성 팝업 27개 좌표 있는데 지도엔 13개만 표시 - 핀 클릭해야 어느 팝업인지 알 수 있음

파일 수: 1개이다.


파일 1. popspot-frontend/src/components/Map/InteractiveMap.tsx

파일 전체 문맥

조각만 보면 알기 어려운 코드를 파일 처음부터 끝까지 보여 준다. 초록은 추가·수정, 빨강은 삭제된 줄이다.

커밋 cd17244 — fix(map): TypeScript 빌드 에러 — Map 이름 충돌 회피변경 파일 1

GitHub에서 이 커밋 보기

쉬운 설명: TypeScript 빌드 에러 — Map 이름 충돌 회피 작업이다.

바꾼 이유: react-kakao-maps-sdk 의 Map 컴포넌트와 JS 내장 Map 자료구조가 같은 이름이라 'new Map<...>()' 호출이 컴포넌트 생성으로 해석되어 'lacks a construct signature' 컴파일 에러 발생.

파일 수: 1개이다.


파일 1. popspot-frontend/src/components/Map/InteractiveMap.tsx

파일 전체 문맥

조각만 보면 알기 어려운 코드를 파일 처음부터 끝까지 보여 준다. 초록은 추가·수정, 빨강은 삭제된 줄이다.

커밋 f1d3380 — feat(map): 데스크톱 우측에 항상 보이는 팝업 리스트 패널변경 파일 1

GitHub에서 이 커밋 보기

쉬운 설명: 데스크톱 우측에 항상 보이는 팝업 리스트 패널 작업이다.

바꾼 이유: - 데스크톱(md+): 지도 우측에 300px 사이드 패널 항상 표시 - 모바일(< md): 기존 토글 방식 그대로 (화면 좁아서 항상 표시 X) - 패널 항목에 카테고리 색상/아이콘/이름/주소/카테고리 뱃지 표시 - 클릭 시 지도 해당 위치로 이동 + 마커 강조 - 우측 상단에 총 마커 수 표시

파일 수: 1개이다.


파일 1. popspot-frontend/src/components/Map/InteractiveMap.tsx

파일 전체 문맥

조각만 보면 알기 어려운 코드를 파일 처음부터 끝까지 보여 준다. 초록은 추가·수정, 빨강은 삭제된 줄이다.

커밋 3664524 — feat(map): 우측 사이드 패널을 지도 바깥쪽 분할 영역으로 + 접기/펼치기변경 파일 1

GitHub에서 이 커밋 보기

쉬운 설명: 우측 사이드 패널을 지도 바깥쪽 분할 영역으로 + 접기/펼치기 작업이다.

바꾼 이유: - root 컨테이너를 flex row 로 변경 → 지도(flex-1) + 사이드(w-300) 분할 - 사이드 패널이 지도 위 오버레이가 아니라 별도 영역으로 분리 - 좌측 가장자리 손잡이로 접기/펼치기 토글 (ChevronLeft/Right) - 접으면 폭 0 으로 부드럽게 transition, 지도가 전체 너비 - 모바일은 기존 토글 사이드바 그대로

파일 수: 1개이다.


파일 1. popspot-frontend/src/components/Map/InteractiveMap.tsx

파일 전체 문맥

조각만 보면 알기 어려운 코드를 파일 처음부터 끝까지 보여 준다. 초록은 추가·수정, 빨강은 삭제된 줄이다.

커밋 d2dd08c — fix(map): 사이드 패널 펼칠 때 grid 셀이 컨텐츠로 늘어나는 문제변경 파일 2

GitHub에서 이 커밋 보기

쉬운 설명: 사이드 패널 펼칠 때 grid 셀이 컨텐츠로 늘어나는 문제 작업이다.

바꾼 이유: 증상: 사이드 패널 펼치면 카드 리스트가 부모 영역 넘쳐서 지도 grid 셀 자체가 세로로 길게 늘어나 레이아웃 깨짐

파일 수: 2개이다.


파일 1. popspot-frontend/app/page.tsx

파일 전체 문맥

조각만 보면 알기 어려운 코드를 파일 처음부터 끝까지 보여 준다. 초록은 추가·수정, 빨강은 삭제된 줄이다.

파일 2. popspot-frontend/src/components/Map/InteractiveMap.tsx

파일 전체 문맥

조각만 보면 알기 어려운 코드를 파일 처음부터 끝까지 보여 준다. 초록은 추가·수정, 빨강은 삭제된 줄이다.

커밋 4b4129c — revert(map): 사이드 리스트 분할 layout 롤백변경 파일 2

GitHub에서 이 커밋 보기

쉬운 설명: 사이드 리스트 분할 layout 롤백 작업이다.

바꾼 이유: 데스크톱 우측 분할 사이드 패널을 제거하고 예전 토글 방식으로 복원. (부모 grid 셀이 컨텐츠로 늘어나서 레이아웃 깨지는 문제 발생)

파일 수: 2개이다.


파일 1. popspot-frontend/app/page.tsx

파일 전체 문맥

조각만 보면 알기 어려운 코드를 파일 처음부터 끝까지 보여 준다. 초록은 추가·수정, 빨강은 삭제된 줄이다.

파일 2. popspot-frontend/src/components/Map/InteractiveMap.tsx

파일 전체 문맥

조각만 보면 알기 어려운 코드를 파일 처음부터 끝까지 보여 준다. 초록은 추가·수정, 빨강은 삭제된 줄이다.

커밋 71b228a — fix: UX 5종 (인트로 버튼/마이페이지 정리/PASSPORT 리워드/음악 톤/다크모드 가독성)변경 파일 6

GitHub에서 이 커밋 보기

쉬운 설명: UX 5종 (인트로 버튼/마이페이지 정리/PASSPORT 리워드/음악 톤/다크모드 가독성) 작업이다.

바꾼 이유: 커밋 제목에 적힌 문제를 해결하기 위해 코드를 바꿨다.

파일 수: 6개이다.


파일 1. popspot-frontend/app/globals.css

파일 전체 문맥

조각만 보면 알기 어려운 코드를 파일 처음부터 끝까지 보여 준다. 초록은 추가·수정, 빨강은 삭제된 줄이다.

파일 2. popspot-frontend/app/intro/page.tsx

파일 전체 문맥

조각만 보면 알기 어려운 코드를 파일 처음부터 끝까지 보여 준다. 초록은 추가·수정, 빨강은 삭제된 줄이다.

파일 3. popspot-frontend/app/page.tsx

파일 전체 문맥

조각만 보면 알기 어려운 코드를 파일 처음부터 끝까지 보여 준다. 초록은 추가·수정, 빨강은 삭제된 줄이다.

파일 4. popspot-frontend/src/components/Passport/PassportView.tsx

파일 전체 문맥

조각만 보면 알기 어려운 코드를 파일 처음부터 끝까지 보여 준다. 초록은 추가·수정, 빨강은 삭제된 줄이다.

파일 5. popspot-frontend/src/components/music/MusicForPopup.tsx

파일 전체 문맥

조각만 보면 알기 어려운 코드를 파일 처음부터 끝까지 보여 준다. 초록은 추가·수정, 빨강은 삭제된 줄이다.

파일 6. popspot-frontend/src/components/music/MusicTab.tsx

파일 전체 문맥

조각만 보면 알기 어려운 코드를 파일 처음부터 끝까지 보여 준다. 초록은 추가·수정, 빨강은 삭제된 줄이다.

커밋 657a9ea — feat: 등급 시스템 + 다크모드 가독성 보강변경 파일 1

GitHub에서 이 커밋 보기

쉬운 설명: 등급 시스템 + 다크모드 가독성 보강 작업이다.

바꾼 이유: 1) 밝은 라임/크림 배경 위 텍스트 가독성 - globals.css 에 보호 룰: bg-lime-/cream- 위 텍스트는 강제로 ink-900 - text-white/muted-foreground 도 덮어쓰기

파일 수: 8개이다.


파일 1. PROJECT_CHANGELOG.md

파일 전체 문맥

조각만 보면 알기 어려운 코드를 파일 처음부터 끝까지 보여 준다. 초록은 추가·수정, 빨강은 삭제된 줄이다.

공유XLinkedIn

댓글