미리보기

우리 동네 믿을 수 있는 생활전문가를 쉽게 찾아주고 매칭해주는 수리 견적 비교 서비스 수리의 달인

React와 TypeScript를 활용한 각각 전용 사이트를 개발 및 관리

회사 관리자 사이트

• 수리상품 승인, 거부 개발

• 앱 설명 이미지 등록 수정 삭제 개발

수리 전문가 전용 사이트

• 카카오 에드핏 반응형 추가

• 구독권 페이지 전체 UI 수정

• 첫 결제 이벤트일 때 분기

지역별 수리 전문가를 관리하는 총판 사이트

• 달인 카테고리 용도, 면적 구분

일을 통해 자신의 뿌리를 내리며 성장하는 구인구직 서비스

배포링크 https://www.workroot.life/

workroot 회고

• sitemap 제출로 검색엔진 최적화(SEO) 100% 달성

• 카카오톡 공유하기 Meta tag 설정

• 소셜 간편 로그인 구현

• react-query 캐시 설정을 통한 성능 최적화, staleTime과 gcTime 설정으로 서버 요청 최소화 및 불필요한 데이터 재로딩 방지

• getNextPageParam으로 다음 페이지의 커서를 관리, 사용자가 스크롤 할 때마다 데이터를 동적으로 로드하여 성능 최적화

• 로고, 랜딩페이지 기획

• 스토리북 및 Chromatic Github Action CI/CD 세팅

협업툴 및 일정관리 서비스

배포링크 https://taskify-9-1.vercel.app/

Taskify 회고

Lighthouse

FCP 0.3s | CLS 0.025 | SI 0.6s

Zustand와 쿠키 활용 로그인 상태 안전하게 관리

• httpOnly 쿠키를 백엔드가 제공하지 않는 환경에서 js-cookie를 활용하여 인증 상태 전역 관리 트러블 슈팅

• Secure, SameSite 속성을 활용해 XSS, CSRF 공격 위험 70% 감소

코드 중복 제거

• 새로 고침 시 인증 상태 유지, authStore로 전역 관리하여 유지보수 용이성 80% 향상

• useErrorModal을 사용하여 에러 처리 로직 통합 에러 코드 중복 90% 제거, 사용자에게 정확한 서버 에러 메시지를 일관되게 전달

그 외

• 댓글 기능 개발

• 공통 모달 사용 useModal 커스텀 훅 개발

• 카드 상세 디자인 및 기능 개발

롤링 페이퍼를 만들고 친구들에게 공유할 수 있는 웹 서비스

배포링크 https://rolling-codeit-fe93.netlify.app/

Rolling 회고

• PostPage 포스트페이지, PostPage/edit 페이지 CRUD

• Modal 컴포넌트

• Emoji 컴포넌트, Chip 구현

• Toast 알림

• 모달과 알림 직접구현, emoji는 emoji-picker-react 라이브러리 사용