프리랜스
BFK (Bibles For Korea)
한국인을 위한 성경 보급 단체의 공식 웹사이트입니다. 성경/소책자 신청, 블로그 콘텐츠 관리, 후원 시스템 및 관리자용 CMS를 제공합니다.
기간
2023.04 ~ 2023.09
역할
프론트엔드 개발
팀 규모
2
기술 스택
ReactTypeScriptRedux ToolkitSWRSCSS Modulesreact-hook-formreact-quillreact-helmet-asyncreact-share
프로젝트 상세 소개
BFK(Bibles For Korea)는 한국인을 위한 성경 보급 단체의 공식 웹사이트입니다. 성경/소책자 신청, 블로그 콘텐츠 관리, 후원 시스템을 제공하며, 관리자용 CMS(블로그 관리, 리소스 관리, 사용자 관리)를 포함합니다. SWR로 서버 데이터 캐싱 및 자동 재검증을, Redux Toolkit으로 클라이언트 상태를 관리하는 하이브리드 상태 관리 전략을 적용했습니다.
주요 기능
- 블로그 시스템 (카테고리별 필터링, 키워드 검색, SNS 공유)
- 관리자 CMS (블로그 CRUD, WYSIWYG 에디터)
- 반응형 네비게이션 (데스크톱/모바일)
- SEO 최적화 (동적 메타태그)
- 성경/소책자 신청 시스템
담당 업무
전체
- •React + TypeScript 기반 웹 프론트엔드 전체 구현
- •반응형 웹 디자인 (Desktop, Tablet, Mobile)
- •PHP 백엔드 API 연동
블로그 시스템
- •SWR 기반 데이터 패칭 및 캐싱 전략 설계
- •카테고리/키워드 검색 기능 구현
- •게시글 상세 페이지 및 SNS 공유 기능
- •무한 스크롤/페이지네이션 구현
관리자 시스템
- •로그인 인증 및 보호된 라우트 구현
- •react-hook-form 기반 폼 유효성 검사
- •react-quill WYSIWYG 에디터 통합
- •복합 조건 검색 (날짜, 카테고리, 키워드)
공통 컴포넌트
- •반응형 네비게이션 (햄버거 메뉴)
- •재사용 가능한 페이지네이션 컴포넌트
- •SEO 메타태그 컴포넌트
- •로딩/에러/404 페이지
상태 관리
- •Redux Toolkit 스토어 설계
- •로그인 상태, 게시글 목록, 검색 조건 슬라이스 구현
- •SWR과 Redux 간 데이터 동기화
프로젝트 구조
src/