Featured Project

팜젠사이언스 홈페이지

제약회사 (주)팜젠사이언스의 신규 반응형 홈페이지와 관리자페이지 구축. 레거시 사이트(MySQL)의 데이터를 신규 플랫폼(PostgreSQL)으로 이관하는 것까지 포함한 프로젝트로, PL로서 견적·계약 협상부터 납품·하자보수까지 총괄하며 Next.js 프론트엔드 전체를 직접 개발했다.

Project Overview

역할

PL/CTO — 견적·계약 협상부터 납품까지 프로젝트 전체 총괄 + 프론트엔드(Next.js) 전체 직접 개발. 나비이가 수주한 프로젝트다.

담당 경계

백엔드(Spring Boot 2.7 admin/api)와 MySQL→PostgreSQL DB 이관은 팀원 담당 — 이 영역은 직접 구현이 아니라 PL로서 총괄한 범위로 구분한다.

Project Story

프로젝트 이야기

배경과 과정, 그리고 판단의 기록

배경

제약회사 팜젠사이언스의 신규 반응형 홈페이지와 관리자페이지를 구축하는 프로젝트였다. 화면만 새로 만드는 것이 아니라, 레거시 사이트(MySQL)의 데이터를 신규 플랫폼(PostgreSQL)으로 이관하는 것까지가 범위였다. PL로서 견적·계약 협상부터 납품까지 전체를 총괄했고, 그중 프론트엔드는 전체를 직접 개발했다 — 백엔드와 DB 이관은 팀원 담당으로, 직접 구현과 총괄 범위를 구분해 둔다.

반복되는 화면을 계층으로 눌러 담다

기업 홈페이지는 게시판·제품 목록·상세처럼 구조가 반복되는 화면이 많다. apis → hooks → templates 3단 계층을 세우고 클라이언트 상태(Recoil)와 서버 상태(react-query)를 이원화해, 공통 템플릿을 도메인마다 재사용하는 구조로 설계했다.

다국어(한/영)는 next-i18next로 지원했고, Google Maps·공공데이터포털·KOSCOM API를 연동한 데이터 시각화는 @ant-design/plots로 구성했다. 배포는 next export 정적 방식을 채택했다.

Technology Stack

이 프로젝트를 구성한 기술들

Next.js 12

React 18

Recoil

TanStack Query (React Query)

next-i18next (i18n)

Ant Design Plots

Technical Implementation

Architecture decisions and code highlights

Architecture

System Design

apis → hooks → templates 3단 계층 + Recoil·react-query 상태 이원화, next export 정적 배포

Key Highlights

클라이언트/서버 상태 이원화(Recoil + react-query)와 apis → hooks → templates 3단 계층 구조 설계 — 게시판·제품·메인 등 공통 템플릿을 재사용
next-i18next 기반 한/영 다국어 지원
Google Maps·공공데이터포털·KOSCOM API 연동 시각화(@ant-design/plots)

Impact Analysis

Project Impact & Results

Real-world outcomes and measurable results

Achievements

계약(2022.07)부터 납품·하자보수(2023.04)까지 완주 (pharmgenscience.com)

Explore the Project

운영 중인 사이트와 소스 코드에서 실제 결과물을 확인할 수 있습니다.

Next Project

PPCWIZ

SaaS Frontend →