미리보기

• 매장 CS 및 POS 운영 리더 경험을 통해 빠른 문제 해결과 협업 역량 강화

• 신입 OJT 교육 담당을 통해 문서화 능력과 커뮤니케이션 능력 향상

링크

• GitHub Repository

• 배포 URL

기술 스택

• Next.js (App Router), TypeScript, TailwindCSS (shadcn/ui), Zustand, Auth.js, Supabase, Jest, Vercel

참여 인원

• 1인 개인 프로젝트

주요 기능

• Apple Music RSS 기반 국가별 인기곡 중 1곡 랜덤 추천

• 미리듣기 오디오 플레이어 (재생/정지/진행 상태 표시), 추천 히스토리 저장

• 소셜 로그인 (Google)

• 회원/ 비회원 찜 기능 구현 및 상태 분리 저장 (비회원: localStorage, 회원: Supabase DB)

• 찜 목록 Pagination 적용, 프라이빗 라우팅 미들웨어 구성

성과

• 오디오 플레이어 진행 상태의 과도한 리렌더링 발생 문제를 useRef, useCallback, React.memo로 최적화하여 리렌더링 횟수 약 85% 감소

• 테스트 코드(Jest + MSW)로 유틸 함수, 커스텀 훅, 전역 스토어 단위 검증

향후 계획

• 아티스트/ 앨범 상세 페이지 구현

• 다국어 지원

• 점진적 테스트 커버리지 강화

링크

• GitHub Repository

• 배포 URL

기술 스택

• Next.js (App Router), TypeScript, TailwindCSS, Zustand, Supabase

참여 인원

• 1인 개발 프로젝트

주요 기능

• 이메일 회원가입/ 로그인 및 소셜 로그인

• 원하는 유저와 1:1 채팅방 생성, 메시지 실시간 전송

• 기 생성된 채팅방 중복 생성 방지

• 본인이 보낸 메시지 삭제 가능 (삭제 UI)

• 잘못된 접근 시 자동 리다이렉트 및 토스트 알림 제공

성과

• 인증된 유저 간에만 채팅 가능하도록 URL 제어 및 상태 초기화 로직 구현

• 다양한 라우팅 / 인증 이슈 해결 경험 (e.g. Realtime 구독 유효성 검증, 미들웨어 matcher 수정 등)

향후 계획

• 메시지 전송 시 낙관적 업데이트 적용 -> 딜레이 없는 자연스러운 UX 제공

• Next.js + Supabase 기반 과제 프로젝트 수행 (SSR, OAuth, 실시간 기능 구현 및 상태 관리 적용)

• SRP 원칙 기반 리팩토링 및 사용자 경험 개선

• 우수러너로 선정

• Next.js + Firebase 기반 과제 프로젝트 수행 (OAuth, 게시물 실시간 기능 구현)

• 서비스 레이어를 통해 Firebase와 직접 통신하는 구조로 설계

• 우수작으로 선정