미리보기

개인 포토폴리오 사이트 (jihostudy)

상세 역할

1인 개발, Design, Frontend

기술 스택

Typescript, Next.js, TailwindCSS, framer-motion, usehooks-jihostudy

기여

Custom Hook npm 패키지 usehooks-jihostudy 개발 · 적용

• 기존 라이브러리의 단점을 보완한 npm 라이브러리 개발 및 적용

  • useOutsideClick -> 모달의 존재 여부를 설정할 수 있는 훅

  • useEscClose -> Escape 버튼을 통한 Unmount 훅

• esbuild 기반의 번들링을 통한 ES6 · CJS 지원

• 400+ 다운로드 유저 확보

최적화 진행

• nextjs Image 컴포넌트 preload · srcset(sizes) 설정을 통해 LCP 요소 최적화

  • 렌더링 시간 4.33s -> 524ms 85.57% 감축

• subset 폰트 제공을 통한 FOUT 현상 완화

• 최종 Lighthouse 결과 [83,100,100,100]까지 성능 향상

프로젝트 경로

• 배포사이트 (https://www.jihostudy.site/)

• 깃허브 (https://github.com/jihostudy/jiho_portfolio)

여행 계획 생성 및 공유 플랫폼

상세 역할

팀장, Frontend, Design

기술 스택

Typescript, Next.js, TailwindCSS, Zustand, next-auth, Tanstack-query, Husky, framer-motion

기여

메인 로직(여행 계획 생성) 전과정 개발

• Zustand를 활용하여 여행 계획 전역 데이터 관리 · 라우트간 공유 프로세스 개발

• KakaoMap · KakaoMobility

  API를 활용, 여행 경로 표시 · 경로간 이동 시간 표시하여 계획 플랫폼 핵심 기능 제공

• Tanstack Query를 사용하여 서버 데이터 캐싱 · Key 관리
  -> (블로그) 우리 팀이 setMutationDefaults로 Query Key 관리한 방법

• 백엔드팀과 소통을 통해 Entity Type(여행 계획, 여행지, 유저, 댓글) 구체화

DX 개선을 위한 노력

• shadcn 기반의 재사용성에 중심을 둔 공용 컴포넌트 (Modal · Toast · Filter) 개발

• Framer-Motion Wrapper를 활용한 애니메이션 코드를 메인 로직과 분리하여 코드 복잡도 완화

• Modal · Filter · Toggle 등 커스텀 훅 제작을 통한 코드 간소화

도메인 구매 · 등록, UI/UX 디자인

• 가비아 · Vercel에 각각 도메인 구매 · 배포

• 디자이너 공백을 채우기 위한 Figma 웹 디자인 진행 (1인)

프로젝트 경로

• 배포사이트 (https://www.trabook.site/)

• 깃허브 (https://github.com/Tra-Book/Frontend)

성대 라운지 좌석 및 스터디룸 예약 시스템

상세 역할

팀장, Frontend, Design

기술 스택

Typescript, Next.js, TailwindCSS, Zustand, Tanstack-query, next-pwa

기여

좌석 배정 · 자동반납 시스템 구현

• QR코드 인식을 통해 라우팅간 데이터 전달하여 간편 배정 시스템 구축

• PWA 기반의 아키텍쳐를 통해 웹 · 앱 프로세스 구축

  • 설치 권유 로직 구현 및 예비 이용자의 피드백을 반영한 설치 권유 시기 조절

  • zustand를 활용한 설치 미권유 유저 구분 · local-storage 저장

• FCM을 활용하여 좌석 자동 반납 백그라운드 알림 제공하여 유저 경험 향상

스터디룸 예약 페이지

• Tanstack Query를 활용하여 일자별 스터디룸 현황 조회 · 예약 시스템 구현

Auth 로직 구축 (로그인 · 회원가입)

• 회원가입 시도 유저의 재학증명서를 AI서버에 전달하여 증명서 위변조 여부 · 내용 일치 여부 확인

위클리 스크럼 스프린트 개발론 도입

• 스프린트 우선순위 지정, 매주 스프린트 후 회의 진행

프로젝트 경로

• 배포사이트 (https://sokk-skku.vercel.app/)

• 깃허브 (https://github.com/skkuswEng/Frontend)