TypeScript any 17 → 0, 편집 흔적 84 → 1 — POP-SPOT v1.5 프론트 클린코드 (+v1.5.1, v1.5.2)

// v1.5 — src/types/sdk.ts. 외부 스크립트 경계 하나에만 선언 집중
declare global {
//      ^^^^^^ 글로벌 스코프에 타입 추가 — window.kakao, window.YT 처럼 외부가 주입하는 객체
  interface Window {
//          ^^^^^^ 다른 파일에 쓰인 Window 와 병합됨 (interface merging)
    kakao?: KakaoMaps;
//  ^^^^^^ Kakao Maps SDK 가 로드되면 채워짐. ? 는 "아직 들어있지 않을 수 있음" 표시
    YT?: YouTubeIframeAPI;
//  ^^^ YouTube IFrame API. 둘 다 외부 <script> 로 주입되므로 초기엔 undefined
  }
}
// 포인트: any 가 필요한 경우는 이 파일 하나에서만 을 궁지·관리. 다른 컴포넌트에서는 절대 쓰지 않는다.

// v1.5 — src/lib/api.ts. 호출하는 도메인 타입은 모두 구체적으로 정의
export interface PopupStore { id: number; name: string; }
//                            ^^^^^^^^^^  ^^^^^^^^^^^^^
//                            DB 의 테이블 popup_store 컬럼 구조와 동일
//                            id 가 number 로 확정되어 store.id.toUpperCase() 같은 잘못된 쓰기를 차단
// any 안 쓴다 — 이 파일부터 서비스 전반에 구체 타입만 전파됨

// v1.4 까지 — 같은 이름 User 이 두 스코프에 충돌
import { User } from 'lucide-react';
//       ^^^^                          아이콘 컴포넌트 (React.FC)
import { User } from '@/types/user';
//       ^^^^                          도메인 타입 (사용자 테이블 구조)
// 두 임포트 동시 등장 시 TypeScript: "Duplicate identifier 'User'"
// 한 쪽을 주석 처리하고 다른 곳으로 옮기는 회피가 자주 일어남

// v1.5 — as 로 이름 분리. 의도가 명확해짐
import { User as UserIcon } from 'lucide-react';
//       ^^^^ ^^ ^^^^^^^^
//       |    |  +-- 사용 시의 이름: <UserIcon /> — 누가 봐도 아이콘임
//       |    +-- "에이리어스" 키워드
//       +-- 원래 이름 (레퍼런스 명세)
import type { User as DomainUser } from '@/types/user';
//     ^^^^                                              import type — 타입 전용 임포트·컴파일 후 코드에서 제거됨
//                       ^^^^^^^^^^                       <DomainUser> 로 쓰면 도메인 객체임이 분명

// 갈아엎기 전 — user?.id 가 undefined 면 그대로 URL 에 붙음
await fetch(`/api/wishlist?userId=${user?.id}`);

// 갈아엎은 후 — 없으면 일찍 종료
if (!user?.id) return;
await fetch(`/api/wishlist?userId=${user.id}`);

// v1.5.1 까지 — Controller 가 Repository 를 직접 호출
@GetMapping("/my")
public List<Wishlist> my(@AuthenticationPrincipal Long userId) {
//          ^^^^^^^^                                 ^^^^^^      JWT 필터에서 추출한 사용자 PK
//          엔티티를 그대로 노출 — LAZY 관계가 쓰여있으면 직렬화 중 LazyInitializationException
    return wishlistRepository.findByUserId(userId);
//         ^^^^^^^^^^^^^^^^^^                       JPA Repository 자동 쿼리. SELECT * FROM wishlist WHERE user_id=?
//         문제1: 트랜잭션 경계가 어떻게 시작되는지 애매 (Spring 의 기본 설정에 의존)
//         문제2: 권한 검증 없이 user_id 만 일치하면 반환 (타 사용자 조회 분기 추가 어려움)
}

// v1.5.2 — Service 계층에 트랜잭션·인가·DTO 변환 권한 귀속
@GetMapping("/my")
public List<WishlistResponseDto> my(@AuthenticationPrincipal Long userId) {
//          ^^^^^^^^^^^^^^^^^^^^^^                                          이제 반환형에 엔티티가 안 나옴
//          노출하면 안 되는 필드를 DTO 매핑 단계에서 걸러냄 (콘트롤러가 이제 처리 안 해도 됨)
    return wishlistService.findByOwner(userId);
//         ^^^^^^^^^^^^^^^                       @Transactional(readOnly = true) 서비스 메서드
//                         ^^^^^^^^^^^             이름이 의도를 드러냄 — user_id 가 아닌 owner
//                                                 (권한 검증 의미를 포함. "소유자 기준")
//                                                 v2.7/v2.9 의 IDOR 차단 계층 여기에 추가됨
}