01 / 04
01
메인 히어로 화면
우리 웹사이트의 성격을 한눈에 보여주는 메인 랜딩 화면입니다.
02 / 04
02
관심 주제 선택 화면
눈 건강, 수면, 피로 등 관심 있는 건강 주제를 선택해 탐색을 시작할 수 있는 카테고리 화면입니다.
03 / 04
03
제품 목록 화면
검색과 필터를 통해 조건에 맞는 건강기능식품을 비교하고 탐색할 수 있는 목록 화면입니다.
04 / 04
04
제품 상세 화면
성분, 기능성 정보, 섭취 방법, 주의사항을 구조화해 제공하는 상세 정보 화면입니다.
한눈에 보기
공공데이터 기반 건강기능식품 안심 정보 서비스
역할
Frontend Part Leader
범위
12개
//핵심 포인트4개
01
Tailwind v4 기반 디자인 시스템(타이포/브레이크포인트/유틸) 설계 및 문서화
02
Storybook 도입으로 공통 컴포넌트 개발/검증/공유
03
소셜 로그인 구현(OAuth, 쿠키/도메인, CORS 포함)
04
이벤트 로그 설계(체류시간/퍼널) 및 지표 산출을 위한 데이터 전송 구조 설계
//기술 스택12개
//FRONTEND(6)
탭을 바꿔가며 역할과 설명을 한 범주씩 확인할 수 있습니다.
Next.js(App Router)
도구(Utility)Next.js(App Router)을(를) 프로젝트의 안정성과 구현 속도를 위해 활용했다.
TypeScript
타입 안정성API 응답/컴포넌트 Props 계약을 타입으로 고정해 런타임 오류를 줄이고 협업 시 실수를 예방했다.
React
UI 상태/컴포넌트상태 변화에 따라 UI를 컴포넌트 단위로 조합하고, 재사용 가능한 화면 구조로 유지보수를 쉽게 했다.
Tailwind CSS
디자인 시스템/스타일토큰(색/타이포/간격)과 유틸 기반으로 스타일 규칙을 표준화해 화면 간 일관성을 유지했다.
TanStack React Query
서버 상태 관리캐싱/로딩/에러/리패칭 정책을 표준화해 데이터 패칭 코드를 단순화하고 사용자 경험을 안정화했다.
Storybook
컴포넌트 문서화페이지와 분리된 UI 컴포넌트를 독립적으로 개발/검증하고 상태 케이스를 문서화해 협업 효율을 높였다.