정적 HTML/CSS 퍼블리싱 코드의 React 컴포넌트 전환과 반응형 재구성
문제
전달받은 외주 HTML/CSS 퍼블리싱 결과물이 정적 페이지 기준으로 작성되어 있어, 그대로 복사해 넣는 것만으로는 Next.js 컴포넌트 구조와 상태 연동, 화면별 반응형 레이아웃에 맞지 않았습니다.
구현
전달받은 HTML/CSS에 결제·멤버십 상태와 API를 연결해야 했습니다. 마크업을 화면·기능 단위의 React 컴포넌트로 나누고, 데스크톱과 모바일에서 깨지던 레이아웃을 수정하면서 미완성 화면을 보완했습니다.
미완성 화면을 보완하고 신규 페이지를 개발하면서 일부 작업에 Figma MCP의 도움을 받았습니다. 디자인 시안과 대조해 마크업 구조와 CSS를 조정하고 결제 등 백엔드 API를 연동했습니다.
결과
출시 3주 전 합류해 랜딩·멤버십·마이페이지 화면을 일관된 반응형 구조로 완성해 정식 출시를 지원했습니다.