점주로

문제

점주와 예비 점주를 위한 커뮤니티에서 사용자 화면과 관리자 기능이 함께 확장되고 있었습니다. 알림과 인증 재발급의 요청 경로, 관리자 검색 조건과 페이지 상태, 글쓰기 경험을 팀 코드베이스 안에서 개선해야 했습니다.

선택한 방법

알림과 인증 재발급의 요청 경계

Next.js Route Handler 기반 프록시를 알림과 인증 재발급 경로에 도입했습니다. 인증 쿠키와 Authorization을 전달하고 백엔드의 Set-Cookie를 응답에 반영했습니다. 브라우저 EventSource가 인증 헤더를 직접 넣을 수 없는 조건은 같은 출처의 프록시에서 처리했습니다. 기존 API 연결을 유지하면서 요청 경계가 필요한 흐름부터 적용했습니다.

관리자 검색과 삭제·복구

사용자·게시글·댓글 검색 API와 댓글 삭제·복구를 연결했습니다. 입력 중인 검색어와 실제 적용한 검색어를 분리하고, 검색 조건이 바뀌면 페이지를 초기화했습니다. 잘못된 게시글 ID 요청을 막고 작업 후 관련 목록을 갱신하도록 했습니다. 공통 UI 컴포넌트와 Storybook 예제를 보강하고 CI와 Storybook 워크플로우의 실행 기준을 pnpm으로 정리했습니다.

게시글 작성 경험

기존 Markdown 입력기를 Tiptap 기반 에디터로 교체했습니다. 서식, 링크, 색상과 이미지 업로드를 작성 흐름에 연결하고 팝오버의 외부 클릭·Escape 닫기를 처리했습니다. 렌더링 쪽에는 허용된 색상 표현과 sanitization을 연결했습니다.

사용자 화면의 렌더링과 인증 상태

공개 화면의 렌더링 비용을 줄이고 홈의 초기 hydration 작업과 광고 배너의 hydration 동작을 보완했습니다. 로그아웃에서는 서버 요청에 필요한 토큰을 유지한 채 종료 처리를 마친 뒤 클라이언트 세션을 정리하도록 순서를 조정했습니다. 사용자가 보는 상태와 아직 진행 중인 인증 요청이 어긋나지 않도록 한 작업입니다.

확인한 결과

알림·인증 BFF와 관리자 도구 개선은 develop에서 main으로 승격된 뒤 consumer와 admin의 운영 배포에 반영됐습니다. 사용자 화면의 렌더링·로그아웃 개선도 같은 운영 배포 코드에 포함되어 있습니다.

이후 게시글 에디터를 확장하고 공통 UI와 Storybook 예제를 함께 갱신했습니다. 팀의 소셜 로그인·배포 기반과 협업하면서, 사용자 기능부터 관리자 운영 도구까지 제품의 양쪽 흐름을 개선한 경험입니다.