[Internship] 2025-12 인턴일지

👩🏻‍💻 12월 동안 인턴을 하면서 진행한 작업들

1️⃣  개발 배포 환경 구축 및 메타데이터 리서치

12월에는 dev 배포 환경을 새로 구축하며 전체적인 개발 환경 안정화를 진행했다. 기존에는 main 브랜치 단일 배포 구조로 인해 개발 중 테스트가 제한적인 문제가 있었고, 이를 해결하기 위해 dev 브랜치를 새로 생성하고 prod와 완전히 분리된 배포 파이프라인을 구성했다.

GitHub Actions에서 workflow_run 트리거 조건으로 인해 dev 배포 시에도 main 브랜치가 checkout되는 문제가 발생했으나, github.event.workflow_run.head_sha 기반으로 체크아웃 로직을 수정하고 브랜치 조건을 재정의하여 해결했다. buildx 설정과 스크립트 내 줄바꿈 문제로 인해 발생하던 빌드 오류도 정리하여 배포 안정성을 높였다.

이와 함께 Next.js App Router 기반 메타데이터 설정에 대한 리서치를 진행했다. Open Graph, Twitter 카드 설정 구조를 분석하고, 페이지별로 필요한 metadata 전략을 비교했다. 배포 환경에 따라 OG 이미지가 다르게 노출되는 문제를 방지하기 위해 환경변수 기반 메타데이터 주입 방식도 문서화했다.

2️⃣  인증 · 쿠키 이슈 분석 및 사용자 기능 연동

개발 배포 환경에서 발생하는 인증 및 쿠키 관련 이슈를 집중적으로 분석하고 해결했다. 로컬과 개발 배포 환경에서 인증 동작이 서로 다르게 나타나는 문제를 확인했고, 프록시 설정, 쿠키 도메인, CORS 정책이 복합적으로 얽혀 있음을 파악했다.

먼저 Next.js의 rewrites 기능을 활용해 /api/* 요청이 백엔드 서버로 전달되도록 프록시를 구성했다. 이를 통해 브라우저 기준 동일 출처 요청처럼 동작하게 만들었고, 로컬 환경에서 쿠키 저장 및 접근이 정상적으로 이루어지도록 개선했다.

그러나 개발 배포 환경에서는 쿠키 도메인이 API 호스트로 설정되어 Next.js 미들웨어에서 쿠키를 읽지 못하는 문제가 발생했다. 이를 통해 fetch 및 RTK Query의 baseQuery 설정에 따라 프록시를 우회하는 요청이 존재함을 확인했다. 이후 RTK Query의 baseUrl을 개발·로컬 환경 모두 /api로 통일하여 모든 인증 요청이 프록시를 타도록 수정했고, 쿠키 스코프 문제를 해결했다.

추가로 인증 만료 시 토큰 재발급 로직이 개발 환경에서만 동작하지 않는 이슈를 분석했다. 원인은 401 응답에 포함된 WWW-Authenticate 헤더를 브라우저에서 읽지 못하는 것이었고, CORS 정책으로 인해 해당 헤더가 차단되고 있음을 확인했다. 서버 측에서 Access-Control-Expose-Headers에 WWW-Authenticate를 추가하도록 정리하여, 프론트엔드에서 만료 상태를 정상적으로 감지하고 refresh API를 호출할 수 있도록 개선했다.

이와 함께 설정 페이지와 회원탈퇴 페이지에 API를 연결했다. 탈퇴 사유 선택 UI를 개선하고, 선택된 항목을 Set 기반 타입으로 관리하여 payload를 간결하게 유지하도록 구현했다.

3️⃣ CMS 계좌 등록 플로우 Step2 화면 개선

CMS 계좌 등록 플로우 중 Step2 화면을 중심으로 UX 개선 및 구조 리팩토링 작업을 진행했다. 개인 계좌와 사업자 계좌를 탭으로 전환하며 입력하는 구조로, UX와 코드 구조 모두에서 개선이 필요한 상태였다.

탭 전환 시 화면이 자연스럽게 이동하도록 translateX 기반 슬라이딩 인터랙션을 구현했다. 모바일 환경에서 드래그 시 숨겨진 영역이 노출되는 문제를 발견했고, 컨테이너 구조 및 overflow 처리를 조정하여 화면이 과도하게 이동하지 않도록 개선했다.

입력 폼에서는 은행 선택 → 계좌번호 → 예금주명 → 전화번호 순으로 입력 흐름이 자연스럽게 이어지도록 자동 포커싱 로직을 구현했다. React Hook Form의 setFocus를 활용해 특정 값 입력 또는 Enter 키 입력 시 다음 필드로 포커스가 이동하도록 처리했다.

또한 개인/사업자 폼이 하나의 화면에 공존하면서 포커스가 잘못 이동하는 문제가 발생해, 각 폼이 동일한 form context를 공유하지 않도록 구조를 분리했다. 이 과정에서 발생한 hydration error를 분석했고, Zustand 상태와 form 초기값 설정 시점 차이로 인해 서버·클라이언트 렌더 결과가 달라지는 것이 원인임을 파악했다. 상태 동기화 시점을 조정하여 안정적인 렌더링 구조를 구현했다.

마지막으로 fixed 레이아웃의 CTA 버튼이 form submit과 충돌하는 문제를 해결하며, 외부에 위치한 버튼에서도 정상적으로 submit이 동작하도록 개선했다.

✏️ 총정리

12월에는 dev/prod 배포 환경을 분리하며 개발 안정성을 크게 향상시켰고, 인증·쿠키·CORS 이슈를 실제 서비스 환경 기준으로 분석하며 깊이 있는 이해를 쌓을 수 있었다.