목차
1. 프로젝트 개요
| 항목 |
내용 |
| 프로젝트명 |
BFK (Bibles For Korea) |
| 유형 |
종교 콘텐츠 플랫폼 (웹사이트) |
| 역할 |
프론트엔드 개발 |
| 기간 |
2023.04 ~ 2023.09 |
| 팀 구성 |
프론트엔드: 1명, 백엔드: 1명 |
프로젝트 소개
BFK는 한국인을 위한 성경 보급 단체의 공식 웹사이트입니다. 성경/소책자 신청, 블로그 콘텐츠 관리, 후원 시스템을 제공하며, 관리자용 CMS(블로그 관리, 리소스 관리, 사용자 관리)를 포함합니다.
2. 기술 스택
Core
| 기술 |
버전 |
선택 이유 |
| React |
18.2.0 |
Concurrent 렌더링, Suspense 활용 |
| TypeScript |
4.8.4 |
타입 안정성으로 런타임 에러 방지 |
| React Router |
6.4.2 |
선언적 라우팅, 중첩 라우트 지원 |
상태 관리 & 데이터
| 기술 |
용도 |
| Redux Toolkit |
전역 상태 관리 (로그인, 블로그 게시글) |
| SWR |
서버 데이터 패칭 (캐싱, 자동 재검증) |
| react-hook-form |
폼 상태 관리 및 유효성 검사 |
UI & 스타일링
| 기술 |
용도 |
| SCSS Modules |
컴포넌트 단위 스타일 캡슐화 |
| classnames |
조건부 클래스 바인딩 |
| react-icons |
아이콘 라이브러리 |
기타 라이브러리
| 기술 |
용도 |
| Axios |
HTTP 클라이언트 |
| react-quill |
블로그 에디터 (WYSIWYG) |
| react-helmet-async |
SEO 메타태그 관리 |
| react-share |
SNS 공유 기능 |
| date-fns |
날짜 포맷팅 |
3. 폴더 구조
src/ (77개 TS/TSX 파일)
├── components/ # 공통 재사용 컴포넌트
│ ├── AppLayout.tsx # 레이아웃 (Navigation + Footer)
│ ├── Navigation.tsx # 반응형 네비게이션
│ ├── Pagination.tsx # 페이지네이션 컴포넌트
│ ├── MetaTag.tsx # SEO 메타태그
│ ├── Loading.tsx # 로딩 스피너
│ ├── Error.tsx # 에러 페이지
│ └── NotFound.tsx # 404 페이지
│
├── pages/ # 페이지 컴포넌트
│ ├── Home/ # 메인 페이지 (섹션 분리)
│ ├── Blog/ # 블로그 (검색, 목록, 상세)
│ ├── Admin/ # 관리자 (로그인, 블로그/리소스/유저 관리)
│ ├── Bible/ # 성경 신청
│ ├── Books/ # 소책자 신청
│ └── About/ # 단체 소개
│
├── redux/ # Redux 스토어
│ ├── configureStore.ts # 스토어 설정
│ └── reducer/ # 슬라이스 모듈
│ ├── admin/ # 로그인, 카테고리 검색
│ └── pages/Blog/ # 게시글 상태
│
├── modules/ # 유틸리티 모듈
│ ├── components.ts # Lazy import 모음
│ └── adminBlog.ts # 블로그 카테고리 상수
│
└── styles/ # SCSS 모듈
├── components/ # 컴포넌트 스타일
└── pages/ # 페이지별 스타일
4. 주요 기능
1) 블로그 시스템