DOHOON®
페이지를 이동하고 있습니다

개인 프로젝트 2026

Dog Atlas

Dog Atlas 프로젝트 대표 이미지

이름 검색과 생활 조건 필터로 탐색하는 견종도감

PROJECT OVERVIEW

견종 이름·별칭 검색과 체구·활동량 등 생활 조건 필터를 구현한 견종도감입니다. 상세 화면은 과거 역할·행동 경향·돌봄과 맞이 준비 정보를 나눠 보여줍니다. 서비스 카탈로그에는 고유 slug 기준 376개 항목을 수록했습니다.

구현한 기능

  • 견종 이름·별칭 검색과 생활 조건 필터
  • 필터 URL 연동·목록 단계별 렌더링
  • 견종 상세 구성·Zod 데이터 구조 검증
담당 역할
개인 프로젝트 · 기획, 디자인, 프론트엔드 개발
작업 기간
2026
작업 유형
개인 프로젝트
01

2026

주요 구현 내용

개인 프로젝트 · 기획, 디자인, 프론트엔드 개발

Next.jsTypeScriptCSS ModulesZod
01

한글·영문·별칭 검색과 생활 조건 필터

견종 이름과 별칭을 검색할 수 있도록 공백·하이픈·대소문자를 정규화하고 일치도에 따라 결과를 정렬했습니다. 체구·활동량 등 필터는 URL과 연결해 조건을 공유하거나 다시 열 수 있도록 구성했습니다.

02

필터 URL 호환성과 목록의 단계별 렌더링

체구 선택에서 초소형을 소형에 통합하면서 기존 URL 값도 소형으로 해석하도록 처리했습니다. 목록은 일부 결과부터 렌더링하고 스크롤에 따라 추가로 보여주도록 구성했습니다.

변경
기존 extra-small 필터 URL을 small로 변환해 읽도록 처리하고, 중복되거나 유효하지 않은 선택값을 정리했습니다.
확인
현재 공개 화면에서 URL의 체구·활동량 조건이 선택 상태와 검색 결과에 반영되는 것을 확인했습니다.
03

상세 정보와 인터랙션용 데이터 분리

견종의 과거 역할·생활 경향·돌봄·맞이 준비 정보를 구분해 화면을 구성했습니다. 인터랙션 컴포넌트에는 필요한 필드만 새 객체로 전달하도록 바꿔 상세 데이터 전체가 넘어가지 않도록 했습니다.

04

376개 항목 집계와 Zod 구조 검증

376은 서비스 카탈로그의 고유 항목 수로, 국제 등록 견종 외 국내 보존견·교잡견 등의 항목도 포함합니다. Zod로 필수 필드·형식·slug 중복을 검사하고 출처 정보를 별도로 관리했습니다. 이 구조 검사는 견종 설명의 사실성이나 전문가 검수를 보장하는 검증과는 구분했습니다.

다음 프로젝트LEXUS상담·예약 UI 개발과 운영 신청 흐름 개선