미리보기

한 줄 소개

공통의 할 일을 만들고, 팀 내에서 공유하여 업무의 효율을 높이는 서비스입니다.

인력 구성 - FE 5명

상세 내용

공통 업무를 하는 팀원이나 단체들끼리의 todoList를 공용으로 편리하게 관리할 수 있습니다!

매월, 매주, 매일 반복되는 todo를 생성할 수 있으며 매일 체크하며, 하루 할 일이 얼마나 남았는지의 데이터도 수치로 확인 할 수 있습니다.

사용 기술 및 라이브러리

Typescript, React, Next, ReactQuery, Tailwind CSS

담당 기능 및 개발

팀 페이지 개발

• 팀 내 할 일 목록 구현

  • 할일 목록 데이터 시각화 과정에서 스크롤 위치에 따라 필요한 항목만 렌더링하는 가상 스크롤을 구현하여 목록의 리렌더링시간을 320.59ms에서 19.59ms로 93.89%로 단축 (링크)

• 팀 소속 회원 목록 구현

  • 프론트 단에서 페이지네이션 사용

  • 하루 한 일의 수치 확인이 가능 한 Report 차트를 구현하여 데이터 시각화

  • React Query를 활용하여 팀 데이터, 초대 링크, 사용자 정보에 관한 서버 상태 관리

• 반응형 웹앱

  • Tailwind CSS를 이용한 반응형 웹 구현

• 팀 추가/수정 페이지

  • ReactQuery의 onError 콜백을 통해 일관된 에러 핸들링

  • React Hook Form과 Zod를 활용하여 팀 이름, 이미지의 유효성 검증

  • 에러 바운더리를 이용한 에러처리 (링크)

링크

Github

시연영상

배포링크

한 줄 소개

옷에 관심 있는 사람들이 모여 자신의 룩과 관련된 옷 정보들을 태그로 자세히 공유할 수 있는 웹 애플리케이션입니다.

상세 내용

본인의 옷을 카테고리(착장부위)에 따라 태그를 올리고 가격과 정보를 자세히 공유할 수 있습니다.

옷의 컨셉이나 ootd 들을 등록할 수도 있으면 등록 전에 AI가 본인의 옷 스타일을 평가해줄수도 있습니다!

다른 사용자들이 공유한 게시물을 카테고리 별로 확인 할 수 있습니다.

사용 기술 및 라이브러리

Typescript, React, Firebase, StyledComponent

담당 기능 및 개발

팀 페이지 개발

• 파이어베이스를 이용하여 데이터 관리 (링크)

• 게시물 목록 데이터를 효율적으로 불러오기 위해 IntersectionObserver API를 이용한 무한스크롤 구현 (링크)

• React DND를 사용하여 게시물 위에 올라갈 태그 Drag & Drop 기능 구현 (링크)

• 메인 페이지 이미지 최적화 및 성능 개선

• 모든 이미지를 차세대 형식(WebP)으로 변환하고 Lazy Loading을 적용하여 LCP를 2.4초 → 1.7초로 단축하여 Lighthouse 성능 점수를 68점 → 78점으로 개선

• 이미지 업로드 최적화 (browser-image-compression 활용)

  • 이미지 업로드시 Webp로 변환해 파일 크기를 평균 50% 압축
    ->파이어 스토리지 저장 용량 확보 및 브라우저 이미지 최적화 (링크)

• Gemini API를 사용하여 사용자가 업로드한 이미지의 무드를 AI가 자동으로 평가하도록 기능 개발 (링크)

링크

GitHub

배포링크

한 줄 소개

와인을 좋아하는 사람들이나 관심 있는 사람들이 모여 다양한 와인 정보를 공유할 수 있도록 할 수 있는 웹 애플리케이션입니다.

사용 기술 및 라이브러리

Typescript, React, Next,Tailwind CSS

담당 기능 및 개발

와인 목록 페이지 개발

• 대량의 데이터를 효율적으로 렌더링하기 위해 와인 목록을 무한 스크롤 방식으로 구현

• 와인 검색 및 필터링 기능 구현

  • RangeInput 스크롤시 과도한 API 호출 문제를 useDebounce훅을 구현하여 호출 빈도를 초당 20회 이상에서 1회로 감소시켜 해결 (링크)

• 반응형 웹앱

  • Tailwind CSS를 이용한 반응형 웹 구현

링크

Github

배포링크