[HOTSPOT] 2026.06.01 - 주요 작업 요약

1) 오늘의 작업 요약

오늘 개발하면서 가장 헷갈렸던 부분은 OAuth 로그인 흐름과 기존 로그인/회원가입 흐름을 어디까지 분리하고, 어디부터 합쳐야 하는지였다. 구글과 카카오 로그인은 사용자가 버튼을 누르면 외부 인증 서버를 거쳐 다시 서비스로 돌아오는 구조라서, 단순히 로그인 버튼만 추가한다고 끝나는 작업이 아니었다. 나는 프론트엔드, 백엔드, 컨테이너 환경변수까지 이어지는 전체 흐름을 맞추는 데 집중했다.

• 구글/카카오 OAuth 소셜 로그인 기능을 백엔드에 추가했다.
• 프론트엔드 로그인 화면에 구글/카카오 로그인 UI를 추가했다.
• OAuth 완료 페이지의 브랜드명을 HOTSPOT으로 통일하고, 불필요한 닉네임 자동 입력을 제거했다.
• 백엔드 컨테이너에 Google/Kakao OAuth 환경변수가 전달되도록 수정했다.
• 서비스 전반의 로고 표기를 HOTSPOT으로 통일했다.
• 사업자등록번호 입력과 어드민 승인/거절 UI를 추가해 사기 판매자 방지 1단계를 구현했다.
• 인플루언서 조회 시 닉네임뿐 아니라 loginId 기준 검색도 가능하게 했다.
• 팔로워/팔로잉 목록을 다른 사용자 기준으로도 조회할 수 있도록 userId 파라미터를 지원했다.
• 프로필 소유자 여부에 따라 팔로워/팔로잉 이동 동작이 올바르게 동작하도록 수정했다.
• 상품 상세 페이지의 실시간 판매 배너와 팔로우 목록 하단의 불필요한 문구를 제거했다.

2) 주요 변경사항 상세

2-1. OAuth 구글/카카오 소셜 로그인 추가

OAuth는 사용자가 HOTSPOT에 직접 비밀번호를 입력하지 않고, 구글이나 카카오 같은 외부 인증 제공자를 통해 본인 확인을 하는 방식이다. 핵심은 사용자가 외부 서비스에서 인증을 마치면, 우리 서비스는 인증 결과로 받은 코드나 토큰을 이용해 사용자 정보를 확인하고 로그인 처리를 이어간다는 점이다.

나는 백엔드에서 구글/카카오 OAuth 설정을 받을 수 있도록 구성하고, 프론트엔드에서는 로그인 화면에 소셜 로그인 버튼을 추가했다. 이때 중요한 것은 프론트엔드 버튼의 URL, 백엔드 OAuth 엔드포인트, 외부 서비스에 등록된 redirect URI가 모두 같은 흐름을 바라봐야 한다는 점이었다.

// OAuth 로그인 흐름 예시
// 1. 사용자가 프론트엔드에서 구글 로그인 버튼 클릭
// 2. 백엔드 OAuth 엔드포인트로 이동
// 3. Google 인증 페이지로 리다이렉트
// 4. 인증 성공 후 redirect URI로 code 전달
// 5. 백엔드가 code로 사용자 정보를 조회하고 로그인 처리

2-2. OAuth 환경변수 컨테이너 전달 문제 해결

문제는 로컬 설정에는 OAuth client id, secret 등이 있어도 백엔드 컨테이너 내부에서는 해당 값이 전달되지 않으면 OAuth 설정이 비어 있는 상태로 실행된다는 점이었다.

• 문제: Google/Kakao OAuth 설정값이 백엔드 컨테이너에서 정상적으로 참조되지 않았다.
• 원인: 애플리케이션 설정은 환경변수를 기대하고 있었지만, 컨테이너 실행 환경에 해당 변수가 전달되지 않았다.
• 해결: 백엔드 컨테이너 실행 설정에 Google/Kakao OAuth 관련 환경변수를 명시적으로 전달했다.

backend:
  environment:
    GOOGLE_CLIENT_ID: ${GOOGLE_CLIENT_ID}
    GOOGLE_CLIENT_SECRET: ${GOOGLE_CLIENT_SECRET}
    KAKAO_CLIENT_ID: ${KAKAO_CLIENT_ID}
    KAKAO_CLIENT_SECRET: ${KAKAO_CLIENT_SECRET}

이번 작업을 하면서 OAuth는 코드 구현뿐 아니라 실행 환경 설정까지 하나의 기능으로 봐야 한다고 느꼈다. 인증 기능은 설정값 하나가 빠져도 전체 흐름이 깨지기 쉽다.

2-3. 브랜드명 HOTSPOT 통일

서비스 곳곳에 브랜드명이 다르게 보이면 사용자 입장에서는 같은 서비스인지 헷갈릴 수 있다. 그래서 백엔드와 프론트엔드의 로고 및 OAuth 완료 페이지에서 브랜드명을 HOTSPOT으로 통일했다.

특히 OAuth 완료 페이지는 사용자가 외부 인증을 끝내고 다시 서비스로 돌아오는 지점이기 때문에, 브랜드명이 일관되게 보이는 것이 중요하다고 판단했다.

2-4. 사업자등록번호 입력 및 어드민 승인/거절 UI

사기 판매자 방지 1단계로 사업자등록번호를 입력받고, 어드민이 승인 또는 거절할 수 있는 UI를 추가했다. 판매자 권한을 무조건 자동 부여하는 방식은 편리하지만 위험하다. 반대로 관리자가 검토할 수 있는 단계를 두면 초기 운영 비용은 생기지만, 신뢰도를 높일 수 있다.

public enum SellerApprovalStatus {
    PENDING,
    APPROVED,
    REJECTED
}

상태값을 분리하면 화면에서도 현재 판매자 신청이 대기 중인지, 승인되었는지, 거절되었는지를 명확하게 표현할 수 있다. 승인/거절 UI는 단순한 버튼처럼 보이지만 실제로는 판매자 권한 부여 정책과 연결되는 중요한 관리 기능이다.

2-5. 인플루언서 검색과 팔로워/팔로잉 조회 개선

인플루언서 조회에서 기존에는 특정 경로 기준이 맞지 않거나 닉네임 중심으로만 처리되는 부분이 있었다. 나는 API 경로를 정리하고, loginId로도 검색할 수 있게 수정했다. 사용자가 닉네임을 바꿀 수 있는 구조라면 loginId 같은 고정 식별자로 조회할 수 있는 여지를 두는 것이 더 안정적이다.

팔로워/팔로잉 목록도 개선했다. 기존에는 내 프로필 기준 조회에 가까웠지만, 다른 사용자의 프로필에서 팔로워나 팔로잉 목록을 볼 때는 대상 사용자의 userId를 기준으로 조회해야 한다.

// 개념 예시
GET /api/follows/followers?userId=10
GET /api/follows/followings?userId=10

이 구조에서는 현재 로그인한 사용자가 누구인지와, 목록을 조회하려는 대상 사용자가 누구인지를 분리해서 생각해야 한다. 내가 로그인한 사용자라고 해서 항상 내 팔로워 목록만 봐야 하는 것은 아니기 때문이다.

2-6. UI 세부 정리

• 로그인 화면에 뒤로가기 버튼을 추가했다. 히스토리가 있으면 이전 페이지로 이동하고, 없으면 홈으로 이동하도록 했다.
• 팔로우 목록 하단의 “모두 불러왔습니다.” 문구를 제거해 화면을 더 간결하게 만들었다.
• 상품 상세 페이지에서 실시간 판매 배너를 제거했다. 현재 화면의 핵심 정보와 직접 관련이 낮다고 판단했다.

3) 기술 메모/배운 점

Q&A. OAuth 로그인과 일반 로그인은 무엇이 다른가?

Q. 일반 로그인은?

사용자가 HOTSPOT에 아이디와 비밀번호를 직접 입력하고, 백엔드가 해당 정보를 검증해 로그인시키는 방식이다.

Q. OAuth 로그인은?

사용자가 구글이나 카카오에서 먼저 인증하고, HOTSPOT은 외부 인증 결과를 바탕으로 사용자를 식별한다. 서비스가 사용자의 외부 계정 비밀번호를 직접 다루지 않는다는 점이 핵심이다.

Q. 왜 redirect URI가 중요한가?

OAuth 제공자는 인증이 끝난 뒤 사용자를 어디로 돌려보낼지 알아야 한다. 이 주소가 서비스 설정, 백엔드 설정, 외부 개발자 콘솔 설정에서 서로 다르면 인증 후 복귀가 실패한다.

Q&A. userId와 loginId는 언제 구분해서 써야 할까?

Q. userId는?

데이터베이스에서 사용자를 구분하는 내부 식별자다. 보통 숫자 PK로 관리되며, API 내부 처리나 관계 조회에 적합하다.

Q. loginId는?

사용자가 로그인하거나 검색할 때 인식하기 쉬운 외부 식별자에 가깝다. 닉네임보다 변경 가능성이 낮다면 검색 키로 활용하기 좋다.

Q. 팔로워/팔로잉 조회에서는 무엇이 중요한가?

현재 로그인한 사용자와 조회 대상 사용자를 분리하는 것이다. 내 계정으로 로그인해 있더라도 다른 사용자의 팔로워 목록을 볼 수 있어야 하므로, 조회 API에는 대상 userId가 필요하다.

트러블슈팅 정리

• OAuth 설정 문제: 컨테이너 내부 환경변수가 누락되어 인증 설정이 비어 있었다. 컨테이너 실행 설정에 OAuth 환경변수를 전달해 해결했다.
• 브랜드명 불일치: 화면마다 표기가 달라 서비스 일관성이 떨어졌다. HOTSPOT으로 통일했다.
• 팔로워/팔로잉 이동 오류: 프로필 소유자 기준과 조회 대상 사용자 기준이 섞여 있었다. userId 파라미터를 명확히 전달하도록 수정했다.
• 인플루언서 API 경로 문제: 잘못된 by-nickname 경로 사용을 제거하고 올바른 API 경로로 정리했다.

오늘 작업은 단순히 기능을 추가한 날이라기보다, 로그인, 사용자 식별, 브랜드 일관성, 판매자 검증 흐름을 한 번에 정리한 날이었다. 특히 OAuth는 프론트엔드 버튼, 백엔드 인증 처리, 외부 제공자 설정, 컨테이너 환경변수가 모두 맞아야 완성되는 기능이라는 점을 다시 확인했다. 앞으로 인증이나 권한 관련 기능을 다룰 때는 코드만 보지 말고 실행 환경과 사용자 흐름까지 함께 점검해야겠다고 느꼈다.