LobbyCase FilesArchives
© 2026 Seonu
Editorial x Engineering
Case File·2026-01-06·SOLVED

개인 블로그 개발

GitHub 스타일 활동 그래프와 폴더 구조를 결합한 아카이브형 블로그. 검색 최적화, 계층형 댓글 구조, 인증 및 재사용 가능한 UI 시스템 구축을 중심으로 개발했다.

Next.jsMySQLPrismaORMNextAuth.jsStorybookFullText SearchView Project
개인 블로그 개발

Contents

아카이브 구조 설계

폴더 기반 탐색 구조와 GitHub 스타일 활동 그래프를 결합하여 사용자가 기록 흐름 자체를 탐색할 수 있는 아카이브 형태로 재구성했다.

계층형 댓글 추적

Comment 테이블에 parentId와 depth 구조를 도입하여 무한 대댓글 구조를 설계했다. flat 형태로 저장된 댓글 데이터를 parentId 기준 재귀 트리로 복원하고 depth 기반 들여쓰기를 적용하여 계층 구조를 시각적으로 표현했다.

Fig 1: 무한 대댓글 ERD 구조
Fig 1: 무한 대댓글 ERD 구조

검색 인덱스 재구성

Post 테이블의 title과 content 기반 FullText Index를 구성했다. MySQL innodb_ft_user_stopword_table에 한국어 불용어를 등록하여 검색 정확도를 개선했고, 검색 결과와 폴더 목록은 페이지네이션 기반으로 처리하여 데이터 흐름을 최적화했다.

재사용 가능한 UI 시스템

Shadcn UI Select 컴포넌트를 확장하여 폴더 생성 기능이 포함된 SelectWithCreate 컴포넌트를 제작했다. icon, label, defaultValue 등을 props 기반으로 분리하여 다양한 입력 흐름에 재사용 가능하도록 설계했고 Storybook 기반 UI 테스트를 함께 구성했다.

Fig 2: StoryBook Select 컴포넌트 활용 예시
Fig 2: StoryBook Select 컴포넌트 활용 예시

인증 및 검증 흐름

NextAuth.js 기반 OAuth 인증 구조를 적용하고 회원가입 및 로그인 과정에는 zod validation 객체를 사용했다. 비밀번호는 bcryptjs 기반 hash 처리 후 저장했으며 compare 검증 흐름으로 로그인 인증을 구성했다.

DOCUMENT ID: CASE-0003
END OF FILE