미리보기

개요

크래프톤 정글 내 인원들을 위한 메타버스 서비스

• 각 NPC와 상호작용하는 메인 페이지

• 이력 어필을 위한 마이룸 서비스

• 백준 문제 풀이 일일 퀘스트 서비스

• WebRTC를 통한 화상 및 음성 채팅, 공유 캔버스 서비스

• 미니게임 (코딩 타자 연습, 테트리스, 핑퐁 게임) 서비스

담당 역할

• Auth.js를 활용한 구글 로그인 · 게스트 로그인 구현

• 전반적인 UI 디자인과 CSS 처리

  • 공통 컴포넌트 (모달 등) 설계 → 재사용성 및 유지보수성 확보

  • shadcn/ui 및 Tailwind CSS를 활용한 생산성 향상

  • 스타일 일관성 유지

  • 각종 에셋 디자인

• 코딩 테스트 문제 풀이 및 채점 기능 구현

  • Axios 기반 API 작성

  • OPEN AI 기반 채점 시스템 기능 구현 → JSON 기반 프롬프팅, 오답 힌트 또는 모범 답안 출력 구현

• 서비스 전체 사운드 처리

  • useRef 훅을 활용한 효과음 처리

  • Zustand를 활용한 배경음악 온/오프 상태 관리

• 미니게임 서비스

트러블 슈팅

1. 문제 상황: 배경 음악 즉시 재생이 브라우저 정책 상 금지됨

• 시도 1: 공용 컴포넌트로 배경 음악 온/오프 버튼 작성

  • 입장하는 페이지마다 버튼을 클릭해야만 음악을 재생할 수 있는 문제 발생

• 시도 2: Zustand를 이용해 배경 음악 온/오프 상태 관리

• 결과: 한 페이지에서 배경음 상태 변경 시 다른 페이지에서도 상태 유지

2. 문제 상황: Auth.js를 활용한 구글 로그인 구현에서 인증 상태 여부 판단에 오류 발생

• 시도 1: Auth.js가 제공하는 getToekn() 함수 대신 useSession을 이용해 인증 상태 여부 판단

• 결과: https 에서 래핑 된 쿠키를 못 읽어 오던 사용자의 인증 정보를 가져올 수 있게 되며 문제 해결

사용 기술

Next.js, TypeScript, Zustand, React Query, shadcn/ui, Tailwind CSS, Open AI, axios

• 몰입, 팀 프로젝트, 자기주도 학습 키워드를 바탕으로

  컴퓨터 구조, 운영체제 등 전산학의 기초부터 컴퓨팅적 사고에 대해 학습

• Next.js, React 등 프레임워크를 자기주도적으로 학습

• Github, Slack, Notion을 활용한 다수의 팀 프로젝트 진행