모든 프로젝트숭실대학교 두드림 프로젝트
GreenWave 친환경 커뮤니티
2024.09 — 2024.12
Frontend Lead & UI/UX Design
FE 2명, BE 1명, PO 1명
프로젝트 개요
숭실대학교 두드림 프로젝트의 일환으로 개발한 친환경 커뮤니티 플랫폼입니다. 프론트엔드 리딩과 UI/UX 설계를 함께 담당했으며, AI 기반의 분리수거 가이드 기능이 핵심 차별점입니다.
주요 기능
- Tiptap 리치 텍스트 에디터: 커스터마이징 가능한 에디터 구현으로 사용자 콘텐츠 작성 경험 향상
- OpenAI API 분리수거 AI: 이미지 인식 기반 재활용 분류 가이드 기능 개발
- Optimistic UI: 좋아요/스크랩 기능에 적용하여 즉각적인 UI 반응성 제공
- InfiniteQuery + SSR 최적화: 무한 스크롤 + prefetchQuery 기반 성능 개선
- 카카오 소셜 로그인 및 공유하기 기능 통합
기술 아키텍처
Turborepo 기반 모노레포 구조로 팀 협업 효율성을 극대화했습니다. Shadcn/UI를 커스터마이징하여 일관된 디자인 시스템을 구축했으며, Framer-Motion으로 부드러운 인터랙션 애니메이션을 구현했습니다.
사용 기술
Next.js 14TypeScriptTailwindTurborepoShadcn/UIReact-QueryZustandTiptapFramer-MotionZodOpenAI APIKakao SDK