InteractiveKICA / 한국사내변호사회 / 2023
Membership Platform
회원 웹사이트 · 관리자 · API
한국사내변호사회 웹서비스의 프론트엔드와 백엔드를 혼자 설계하고 개발했습니다. 국문·영문 사이트와 회원 가입, 회비 결제, 게시판·모임 기능을 구현하고 이를 운영할 관리자 화면도 만들었습니다.
국문·영문 페이지와 SSR
Next.js로 국문·영문 사이트를 개발했습니다. 메인 페이지의 게시물과 배너는 서버에서 조회해 렌더링하고, 회원 상태에 따라 사용할 수 있는 기능을 구분했습니다.
회비 결제와 회원 상태
결제 창의 완료 응답을 그대로 회원 상태에 반영하지 않고, 서버에서 PG 결제 내역을 다시 조회했습니다. 주문 금액과 결제 상태를 확인한 뒤 회원의 결제·등급 정보를 갱신하도록 구현했습니다.
회원·콘텐츠 관리
관리자에서 회원·회비·게시판·모임을 관리하고 PC·모바일 배너와 표시 순서를 바꿀 수 있게 했습니다. 글 편집기는 Tiptap으로 구현하고 서식, 링크, 이미지 업로드를 지원했습니다. 통계 화면에는 Google Analytics Data API로 조회한 데이터를 표시했습니다.
Next.js · React · NestJS · TypeORM · PostgreSQL · Tiptap
ENC / 법무법인 웹사이트 & CMS
Website & CMS
웹사이트 · 콘텐츠 편집 · 게시 관리
법무법인 ENC의 웹사이트와 CMS를 개발했습니다. 업무 소개와 인사이트 페이지를 만들고, 운영자가 배너를 교체하거나 글을 편집하면 사이트에 반영되도록 API를 연동했습니다.
공통 레이아웃과 페이지 템플릿
Next.js App Router의 공통 레이아웃과 페이지 템플릿으로 업무 소개 페이지를 구성했습니다. URL 쿼리에 따라 해당 섹션으로 이동하고, 인사이트 페이지에는 API로 조회한 본문과 이전·다음 글을 표시했습니다.
반응형 배너와 노출 순서
배너마다 PC·모바일 이미지를 따로 등록하고 링크와 노출 순서를 설정할 수 있게 했습니다. 드래그로 순서를 바꿔 저장하면 데이터를 다시 조회해 편집 결과를 표시했습니다.
본문 이미지 크기와 정렬
Tiptap의 이미지 확장을 커스터마이즈해 크기와 정렬 정보를 저장했습니다. React NodeView에서 이미지 너비를 드래그로 조절할 수 있도록 구현하고, 편집한 HTML과 첨부파일 정보를 API로 전송했습니다.
Next.js · React · TanStack Query · Tiptap · Tailwind CSS
