미리보기

브랜드 디자인 및 골판지 제품 개발 및 판매

3d프린트를 사용한 전시 소품 및 제작 문화재 복제 제작

골판지 가구 및 전시용 인테리어 제품 개발 및 설치

3d 모델링 제작 프리랜서

여행 체험 예약 플랫폼, 다양한 활동과 비용 정보를 제공하여 손쉽게 여행을 계획하고 예약할 수 있는 서비스

▪ 효율적인 상태 관리 및 데이터 fetching

◦ React Query를 활용 하여 공통 API 연동 로직을 구조화하여 컴포넌트 재사용성과 유지보수성 향상

◦ useInfiniteQuery 무한 스크롤 구현 시 useInView와 커스텀 IntersectionObserver 훅을 각각 적용하여 트리거 방식의 UX/성능 비교 구현

▪ 체험 등록/수정 통합 폼 컴포넌트 설계 및 검증 로직 최적화

◦ activityId 유무에 따른 등록/수정 모드 자동 전환, reset() 기반 초기값 설정으로 단일 컴포넌트 구조화 및 유지보수성 향상

◦ 시간 겹침 방지를 위한 커스텀 훅(useGetAvailableTimeRanges, useGetDropdownTimeRanges) 설계 → 예약 가능한 시간대만 동적 제공, 사용자 실수 방지

◦ 일정 입력은 useFieldArray, 이미지 업로드는 상태 기반 컴포넌트로 분리하여 동적 입력 관리 및 API 통신 처리

▪ Zustand + Portal 기반 재사용 가능한 동적 모달 시스템 구축

◦ 전역 상태(Zustand)로 모달 제어 일원화, 페이지 간 상태 유지 및 다양한 뷰에서 호출 가능

◦ React Portal을 통해 DOM 외부에 독립적으로 렌더링, 레이아웃 침범 없이 유연하게 배치

◦ ESC 키, 배경 클릭, 라우팅 시 자동 닫힘 처리로 UX 오류 방지

◦ 모달 진입 시 외부 스크롤 차단 + 오버레이 적용으로 몰입감 있는 사용자 경험 구현

▪ 체험 예약 및 관리 캘린더 시스템 구축

◦ react-datepicker + Zustand로 날짜 선택 및 예약 가능일 동기화 (highlightDates, onMonthChange 활용)

◦ react-big-calendar 기반 예약 현황 시각화, 상태별 색상 구분 및 날짜 클릭 시 상세 모달 연동

◦ React Query로 예약 데이터 캐싱 + 예약 신청 및 완료 알림 처리 → 사용자 예약 흐름 전반 자동화 및 UX 강화

기술 스택: Next.js, react-query, Tailwind CSS, Typescript, Zustand

배포 링크 - https://www.vivitrip.net/home

깃허브 - https://github.com/vivi-trip/vivitrip

트러블 슈팅 - https://velog.io/@kingdawn/VIVITRIP

팀 생성, 팀원 구성, 공동 할 일 관리, 자유게시판을 통합한 협업 효율화 플랫폼 서비스

▪ 효율적인 상태 관리 및 데이터 fetching

◦ React Query의 자동 캐싱 및 상태 관리 기능을 활용하여 상세 게시글 데이터 로딩 및 갱신 처리

◦ 댓글 등록/삭제 기능 구현 시 useMutation을 통해 서버 동기화 및 UI 상태 업데이트 자동화

◦ useInfiniteQuery 및 트리거로 useInView 적용하여 무한스크롤 구현

◦ 게시글 상세 데이터와 댓글 목록의 쿼리 키 분리 및 invalidateQueries 전략을 활용해 성능 저하 없이 데이터 일관성 유지

▪ 유연한 스타일링 및 접근성 강화

◦Button 공통 컴포넌트를 색상 및 크기에 따른 스타일 분기처리 disabled시 스타일링 및 접근성 고려, 추가적인 사용자 정의를 위한 className 속성 제공

◦Input 공통 컴포넌트를 기본 스타일(baseClasses)과 상태별 스타일(placeholder, focus, disabled, error)을 체계적으로 관리 할 수 있도록 구현

▪ Framer Motion과 TailwindCSS를 활용해 애니메이션과 반응형 설계, 랜딩 페이지 구현

◦ Framer Motion 라이브러리 사용 뷰포트 진입 시 부드러운 진입 애니메이션으로 콘텐츠 표현

기술 스택: Next.js, react-query, Tailwind CSS, Typescript, Zustand

배포 링크 - https://coworkers-1.netlify.app/

깃허브 - https://github.com/part4-1st-team/coworkers

트러블 슈팅 - https://velog.io/@kingdawn/coworers

지인들의 위키를 작성하고 공유하는 SNS 플랫폼 서비스

▪ 사용자 인증 플로우 (로그인 / 회원가입 페이지)

◦JWT 기반 인증 로그인 시 accessToken, refreshToken 을 localStorage에 저장 페이지 로드 시 저장된 토큰을 확인하여 자동 로그인을 구현

◦로그인 성공 시, AuthContext의 login() 호출 → accessToken, refreshToken 저장 및 전역 상태 동기화

◦useState, useEffect, useDebounce를 조합하여 입력 상태 및 유효성 검사 로직 구성

◦인증 후 자동 리디렉션 처리: useRouter를 통해 로그인 후 메인 페이지(/landing), 회원가입 후 로그인 페이지로 유도

◦전체 인증 흐름이 UX 단절 없이 부드럽게 이어지도록 설계

▪ 유연한 스타일링 및 접근성 강화

◦미디어 쿼리를 사용하여 데스크톱, 태블릿, 모바일 환경에 맞춘 반응형 레이아웃 조정 및 SCSS의 @mixin을 활용한 효율적인 스타일 관리

◦모바일 퍼스트 반응형 UI : 모바일 환경에서 자연스럽게 동작하도록 뷰포트에 최적화된 레이아웃 구성 주요 버튼을 사용자 손 위치에 맞춰 배치하여 클릭 유도

▪ 디바이스 해상도에 따른 반응형 및 HeroSection, FeatureCard, CTA 단위 설계 렌딩 페이지 구현

기술 스택: Next.js, react-query, Tailwind CSS, Typescript, Zustand

배포 링크 - https://wikied-7.vercel.app/

깃허브 - https://github.com/sprint7-part3-team7/wikied

아이돌 팬들을 위한 실시간 후원 및 인기투표 플랫폼으로, 크레딧 시스템을 통해 지지하는 아티스트를 응원하고 관리할 수 있는 서비스

◦ 아이돌 리스트에서 원하는 아이돌을 클릭 (다수 선택 가능)을 localStorage에 저장하고 추가하기 버튼을 클릭 하면 선택된 아이돌이 관심 있는 아이돌로 이동

◦ 아이돌 리스트 전체 아이돌 중 데스크 사이즈 기준 16개씩 화면에 보여 지도록 useRef 훅을 사용하여 DOM 요소에 직접 접근하고 스크롤 위치를 제어

◦ Module.Scss 를 사용하여 반응형 구현

기술 스택: React, Axios, javaScript, SCSS

배포 링크 - https://fandom-k-706.netlify.app/

깃허브 - https://github.com/yellowjang/Fandom-K