Colio

Plers · 2025.04 – 2026.02

Frontend · FE 3 / BE 1 / 기획 / 디자인

포트폴리오 기반 채용 제안 플랫폼

Next.jsTypeScriptEmotionTanStack QueryZustandCraft.js

구현 기능

Next.js Route Handler 기반 BFF 인증 프록시 도입
StyleBuilder 타입 안정성 개선 (any 11곳 → 0곳)
마이페이지 (내가 쓴 초안 · 좋아요 목록 · 포트폴리오 · 프로젝트 관리, 회원정보 수정)
노코드 에디터(Craft.js) StyleBuilder 및 공통 UI 컴포넌트(모달 · 버튼 · 인풋) 다수 구현
로그인 · 회원가입 정보 입력 플로우
휴대폰 인증 기반 비밀번호 재설정

트러블슈팅

1. 인증 토큰 보안 계층(BFF) 도입

문제: SSR 환경에서 localStorage 토큰에 접근하다 하이드레이션 에러가 발생했고, 토큰이 클라이언트에 노출되어 XSS 위협도 있었습니다.
원인: 인증 토큰을 localStorage/전역 상태로 관리하며 API 모듈 최상단에서 typeof window 분기로 토큰을 직접 읽고 있었습니다.
해결: Next.js Route Handler 기반 BFF 프록시를 도입해 인증 경로를 하나로 통일하고, 토큰을 httpOnly 쿠키로 격리했습니다.
여러 요청이 동시에 401을 받아도 refresh가 한 번만 일어나도록 Single Flight 패턴을 적용했습니다.

src/app/api/auth/refresh/route.ts

res.cookies.set("plers_access", data.access, {
  httpOnly: true,
  secure: process.env.NODE_ENV === "production",
  sameSite: "lax",
});

src/api/authRefresh.ts

let refreshPromise: Promise<boolean> | null = null;

const refreshAccessToken = (): Promise<boolean> => {
  if (!refreshPromise) {
    refreshPromise = doRefresh().finally(() => {
      refreshPromise = null;
    });
  }
  return refreshPromise;
};

결과: 동시 다발 401 상황에서도 refresh 요청 1회로 처리, SSR 하이드레이션 에러 제거

2. StyleBuilder 타입 안정성 개선

문제: 노코드 에디터의 스타일 속성이 any 기반이라 타입 추적이 불가능했고, 셀렉터 로직과 파생 계산이 한 곳에 뒤섞여 있었습니다.
원인: useEditor 셀렉터가 거대한 인라인 객체를 반환하며 노드 조회부터 색상 파싱까지 모든 계산을 그 안에서 처리하고 있었습니다.
해결: NodeProps / SelectedNode 타입을 새로 설계하고, 셀렉터를 resolveSelectedNode 순수 함수로 분리했습니다.
색상 파싱 등 파생 값에는 useMemo를, 변경 핸들러에는 useCallback을 적용해 계산과 렌더링을 정리했습니다.

src/components/editor/StyleBuilder/useStyleControls.ts

export type NodeProps = {
  color?: string;
  backgroundColor?: string;
  fontSize?: number;
  theme?: "dark" | "light";
};

export type SelectedNode = {
  id: string;
  props: NodeProps;
  name: string;
};

function resolveSelectedNode(state: EditorState): SelectedNode | null { ... }

결과: any 사용 11곳 → 0곳