공정거래 정책 정보 포털
보도자료·입법 동향·일정 달력·경쟁저널 e-북 열람·도서 주문과 결제·회원 마이페이지·통합 검색을 한 사이트로 묶은 사용자 쪽 홈페이지 MVP를 구현합니다.
프로젝트 개요
보도자료·입법 동향·일정 달력·경쟁저널 e-북 열람·도서 주문과 결제·회원 마이페이지·통합 검색을 한 사이트로 묶은 사용자 쪽 홈페이지 MVP를 구현합니다. 결제는 표준 결제 API 연동 구조로 제안하며 서버 측 결과 검증과 실패 기록을 기본 흐름에 포함합니다. 반응형 상단 메뉴 구조로 PC·태블릿·스마트폰에서 같은 흐름을 제공합니다.
작업 범위
- 소식·일정: 첫 화면에서 이번 주 보도자료, 새로 올라온 입법 동향, 이번 달 교육·행사 일정을 한 장면에서 확인하고 상세로 이동합니다
- 저널 e-북: 경쟁저널 호수 목록에서 한 호를 열어 페이지를 넘기며 읽고, 회원 등급에 따라 열람 가능한 범위가 달라집니다
- 도서 주문·결제: 도서와 저널 상품을 보고 장바구니에 담아 주문하고 결제하며, 결제 결과가 검증된 뒤에만 주문이 확정됩니다
- 마이페이지: 회원이 가입 정보 수정, 주문·배송 내역, 구독 열람 기간, 문의 접수 내역을 한곳에서 확인합니다
주요 업무
- 소식·일정 화면: 게시판 3종(보도자료·입법 동향·공지)과 월간 달력을 하나의 목록 모델로 묶고, 홈 화면은 최신 글과 다가오는 일정을 자동 노출하도록 구현합니다
- 저널 e-북 화면: PDF를 페이지 단위로 렌더링하는 리더를 구현하고 서버가 회원 등급과 구독 기간을 확인한 뒤에만 페이지 데이터를 내려줍니다
- 도서 주문·결제 화면: 표준 결제 API 연동 구조를 제안하는 데모로, 결제 승인 결과를 서버에서 다시 검증하고 승인 후 주문 저장이 실패하면 취소 요청을 보내는 흐름을 구현합니다
- 마이페이지 화면: 약관 동의형 회원가입과 로그인, 비밀번호 찾기 흐름 위에 주문 내역과 열람 권한 기간을 보여주는 마이페이지를 구현합니다




프로젝트 핵심 과제
결제 승인 후 주문 저장이 실패하는 경우를 막기 위해 취소 요청과 주문 상태 복구 순서를 설계할 필요가 있으며
상태 기록과 취소 요청을 한 흐름으로 묶어 대응합니다
PDF를 쪽 단위로 내려주면서 권한 없는 쪽이 노출되지 않도록 응답 단계 검사를 설계할 필요가 있으며
쪽별 토큰 검사로 대응합니다
회원 등급별 우대 방식이 확정되지 않아 등급 정책을 테이블로 분리해 정책 변경에 대응할 계획입니다
예약 게시물과 일정이 홈·검색·달력에 일관되게 노출되
공개 조건을 한 계층에 모을 계획입니다
핵심 기능 상세
소식·일정
첫 화면에서 이번 주 보도자료, 새로 올라온 입법 동향, 이번 달 교육·행사 일정을 한 장면에서 확인하고 상세로 이동합니다.
- Prisma 단일 게시물 모델에 분류·게시 시각 필드를 두어 보도자료·입법 동향·공지를 한 쿼리 구조로 조회
- 월간 달력과 목록 보기를 같은 일정 데이터에서 파생하는 React 컴포넌트 구성
- Tailwind 반응형 중단점으로 상단 메뉴를 모바일 시트 메뉴로 전환
게시 시각 기준으로 예약 게시물이 자동 노출되는 조회 조건을 서버에서 적용해 홈·목록·검색이 같은 공개 규칙을 공유하도록 설계합니다.


저널 e-북
경쟁저널 호수 목록에서 한 호를 열어 페이지를 넘기며 읽고, 회원 등급에 따라 열람 가능한 범위가 달라집니다.
- PDF.js 기반 페이지 렌더링과 이전·다음·쪽 번호 이동 컨트롤 구현
- 열람 요청마다 서버에서 등급·구독 기간을 검사하는 Express 미들웨어 적용
- 미리보기 범위(일부 쪽)와 전체 열람을 등급별 정책 테이블로 분리 설계
열람 권한을 화면이 아니라 서버 응답 단계에서 판정해 URL을 알아도 권한 없는 쪽은 내려받지 못하는 구조로 구현합니다.


도서 주문·결제
도서와 저널 상품을 보고 장바구니에 담아 주문하고 결제하며, 결제 결과가 검증된 뒤에만 주문이 확정됩니다.
- 주문 번호를 먼저 발급하고 결제 요청·승인 결과를 같은 번호로 묶는 주문 상태 머신 설계
- 승인 응답의 금액·주문 번호를 서버가 주문 원장과 대조하는 결과 검증 단계 구현
- 승인 후 저장 실패나 화면 이탈이 생기면 취소 요청을 보내는 망취소 흐름과 실패 기록 테이블 설계
결제 요청 전·승인 후·확정 후 세 시점의 상태를 기록해 중단된 결제도 주문과 대조할 수 있는 결제 진단 구조를 기본으로 포함합니다.


마이페이지
회원이 가입 정보 수정, 주문·배송 내역, 구독 열람 기간, 문의 접수 내역을 한곳에서 확인합니다.
- JWT 액세스 토큰과 리프레시 토큰을 분리한 로그인 세션 구조 구현
- bcrypt 해시 저장과 재설정 토큰 만료 시각 검사를 적용한 비밀번호 찾기 흐름
- 주문·구독·문의 내역을 탭별 지연 조회하는 React Query 구성
주문 결제 결과와 열람 권한 기간이 같은 화면에서 연결되어 결제가 확정되면 권한 기간이 자동으로 부여되는 흐름을 보여줍니다.


프로젝트 진행 단계
사이트맵 분석과 회원·상품 DB 설계 · 2026.11
메뉴 구조와 게시물·회원·주문·구독 테이블을 설계하고 Prisma 스키마와 관계를 정의합니다.
게시판·일정·자료실 구현 · 2026.11
보도자료·입법 동향·공지 게시판과 월간 달력, 통합 검색, 첨부 다운로드를 구현합니다.
저널 e-북과 등급별 열람 권한 · 2026.11
PDF 페이지 리더와 서버 측 등급·구독 기간 검사를 구현합니다.
상품 주문과 결제 검증 흐름 · 2026.11
장바구니·주문 상태 머신과 결제 결과 검증, 망취소 요청 흐름을 구현합니다. 세 가지 화면 폭 점검과 결제 실패 시나리오 테스트 케이스도 함께 작성합니다.
개발 결과
기술적 주안점
- 게시 시각 기준으로 예약 게시물이 자동 노출되는 조회 조건을 서버에서 적용해 홈·목록·검색이 같은 공개 규칙을 공유하도록 설계합니다
- 열람 권한을 화면이 아니라 서버 응답 단계에서 판정해 URL을 알아도 권한 없는 쪽은 내려받지 못하는 구조로 구현합니다
- 결제 요청 전·승인 후·확정 후 세 시점의 상태를 기록해 중단된 결제도 주문과 대조할 수 있는 결제 진단 구조를 기본으로 포함합니다