- 저희는 보호소에 입양된 동물들에 대한 사회적 인식을 개선시키고, 사용자에게 접근성이 좋은 컨텐츠를 제공하는 것을 초점에 두고 서비스를 기획, 개발했습니다.
- 동영상 숏폼을 통해 사용자의 진입 장벽을 낮춰 컨텐츠를 이용할 수 있게 만들었습니다.

- 주요 기능
   - 자동재생 / 클릭을 통한 일시정지, 음소거 컨트롤 / 드래그를 통한 페이지 이동의 기능을 가진 숏폼을 사용자에게 제공합니다.
   - 영상을 기다리는 동안 로더가 동작하도록 만들었습니다.
- 개발 주안점
   - 데스크톱의 크롬과 사파리, 모바일의 크롬과 사파리 등 브라우저의 영상 정책에 맞게 동영상이 의도한대로 동작하도록 개발했습니다.
   - 유튜브 shorts, 틱톡과 같은 슬라이더 형태의 숏폼을 만들었습니다.

- 주요 기능
   - 카카오 맵 api를 연결하여, 애니모리에 등록된 보호소를 포함한 주변 동물 보호소를 보여주도록 개발했습니다.
   - 보호소 리스트에서 등록된 보호소를 클릭하면, 해당 보호소 페이지로 이동할 수 있습니다.
   - 등록되지 않은 보호소의 경우, 페이지 이동을 할 수 없음을 사용자에게 보여주도록 했습니다.
- 개발 주안점
   - 카카오맵 api를 리액트에서 사용하기 위해서 useEffect 안에 모든 코드를 집약시켜야 하는 문제가 있었고, 이를 해결하기 위해 커스텀 훅을 만들어 개발했습니다.
   - 애니모리에 등록된 보호소는 구분할 수 있도록 만들었습니다.

- 주요 기능
   - 해당 동물의 사진을 비롯한 상세정보를 조회할 수 있습니다.
   - 보호소 정보 하단에 있는 "정보 보기"를 통해 해당 동물이 등록된 보호소 페이지로 이동할 수 있습니다.
- 개발 주안점
   - 반응형을 고려하여 UI가 변경되도록 구현했습니다.

- 주요 기능
   - 유기 동물의 사진과 간단한 정보를 리스트 형태로 보여줍니다.
   - "더보기"를 누르면 신규, 긴급으로 묶인 유기 동물의 리스트 페이지로 이동합니다.
- 개발 주안점
   - 비슷한 구조가 반복되는 부분이라서 컴포넌트 재사용을 신경써서 구현했습니다.
   - 긴급의 경우, 사용자가 더 많이 접할 수 있도록 신규 리스트보다 상단에 위치시켰습니다.

- 주요 기능
   - 보호소의 간단한 정보와 해당 보호소에서 관리중인 유기동물 리스트를 보여줍니다.
   - 로그인된 계정의 경우 본인 보호소 정보로 이동하면 유기동물 수정하기 버튼이 띄워집니다.
- 개발 주안점
   - 반응형 ui와 수정하기 버튼 처리를 구현했습니다.

- 주요 기능
   - 보호소 회원 정보를 수정할 수 있습니다.
   - 보호소 정보를 가져오는 동안 스켈레톤을 보여줍니다.
- 개발 주안점
   - get, put 방식의 api fetch를 코드의 가독성을 높이기 위해 custom hook으로 만들어 구현했습니다.
   - "정보 수정하기" 버튼을 통해 api가 동작하는 동안 로더를 통해 동작 중임을 보여줍니다.

- 주요 기능
   - 사용자가 업로드한 사진과 동영상을 formData로 관리하여 서버 api와 연결합니다.
   - input, radio button group을 통해 동물의 상세 정보를 입력받을 수 있습니다.
   - 안락사 일자를 고를 수 있는 Calendar를 직접 구현했습니다.
   - 등록, 수정 과정을 보여주는 모달을 만들었습니다.
- 개발 주안점
   - json 데이터, 이미지, 동영상을 한꺼번에 보내기 위해 formData 사용
   - input 방식이 다른 값들을 모아서 필수정보에 대한 autoComplete 값을 제어하는 부분을 신경썼습니다.
   - 필수 정보(안락사 일자, 동물 특성 점수 선택을 제외한 정보) 중 일부가 입력되지 않았을 때에는 안내 텍스트를 통해 사용자에게 알려줍니다.
   - api status code에 따라 적절한 에러 메시지를 사용자에게 보여줍니다.
   - 민간 동물 보호소의 경우 안락사 예정 일자가 지난 동물도 데리고 있을 수 있기 때문에, Calendar에서 과거 날짜도 설정할 수 있도록 했습니다.
   - 모달에서 api가 동작하는 동안 로딩의 과정을 보여주어 UX가 끊기지 않게 만들었습니다.

- 주요 기능
   - 이메일, 비밀번호를 입력하여 로그인을 요청할 수 있습니다.
   - 로그인 api가 진행되는 동안 로더를 보여주도록 만들었습니다.
- 개발 주안점
   - 이메일 형식을 프론트에서 확인하고, 로그인 결과를 백에서 확인하여 사용자에게 에러를 보여줄 수 있도록 구현했습니다.
   - 사용자의 편의성을 고려하여 로그인 완료 시 바로 메인 페이지로 이동하도록 했습니다.

- 주요 기능
   - 이메일, 비밀번호, 비밀번호 입력 등 회원 정보를 입력하여 회원 가입을 요청할 수 있습니다.
   - react-daum-postcode를 통해 주소를 검색하여 입력 받을 수 있도록 만들었습니다.
   - 회원가입 api가 진행되는 동안 로더를 보여주도록 만들었습니다.
- 개발 주안점
   - api를 통해 이메일이 중복되었는지 확인하고, 적절한 안내 텍스트가 나오도록 만들었습니다.
   - 비밀번호 확인의 경우, 값을 입력할 때 바로 비밀번호와 일치하는지 확인할 수 있도록 구현했습니다.
   - 적절한 에러 텍스트를 사용자에게 보여주는 부분을 신경 썼습니다.
   - 사용자의 편의성을 고려하여 회원가입 완료 시 바로 로그인 페이지로 이동하도록 했습니다.

- 주요 기능
   - GNB: 메인 로고, 카테고리, 내 주변 보호소 찾기, 로그인 상태를 담고 있는 GNB를 만들었습니다.
   - ValidationCheckLayout: 로그인 정보를 담고 있는 토큰의 유무에 따라 나타나는 ValidationCheckLayout을 만들었습니다.
   - ValidationCheckLayout: 해당 레이아웃을 통해 로그인 페이지로 이동하거나, 로그아웃을 유지한 채로 서비스를 이용할 수 있습니다.
- 개발 주안점
   - GNB: 로그인 상태에 따라 GNB에 보이는 컨텐츠가 다르도록 구현했습니다.
   - GNB: 반응형을 고려하여 구현했습니다.
   - ValidationCheckLayout: 로그인 토큰이 만료된 후 로그인 상태에서 접근할 수 있는 api 기능을 사용하기 전에, 사용자가 미리 파악할 수 있도록 구현했습니다.
   - ValidationCheckLayout: useLocation을 통해 url이 변경이 되었을 때, 가지고 있는 쿠키 정보를 활용하여 판단하도록 구현했습니다.
   - ValidationCheckLayout: 속도 개선을 위해 로그인 안내 모달이 미리 랜더링 되지 않도록 lazy loading을 적용했습니다.

- 주요 기능
   - 카테고리: 동영상의 지역과 동물을 고를 수 있는 카테고리 선택 모달을 만들었습니다.
   - 로그인 확인 모달: 토큰 만료에 따라 로그아웃된 사용자가 api에 접근하기 전 안내하는 모달을 만들었습니다.
- 개발 주안점
   - 카테고리: DOM 분리 및 스타일링을 위해서 react portal을 이용했습니다.
   - 로그인 확인 모달: 쿠키를 세션으로 저장하는 방식을 이용해서 "첫 화면 로딩 시", "로그아웃을 유지" 했을 때 모달이 나오지 않는 것에 신경 썼습니다.

- 주요 기능
   - page를 감싸는 layout tree를 관리하도록 createBrowserRouter를 사용해 구현했습니다.
- 개발 주안점
   - "layout의 props로 children을 넣는 구조 => createBrowserRouter를 사용하는 구조"로
      레이아웃이 필요한 부분과 필요하지 않은 부분을 구별하여 사용하기 용이한 방법을 선택해 구현했습니다.
   - react-router-dom에서 지원하는 lazy 방식을 사용하여 속도 부분 개선을 고려했습니다.
     (메인 페이지의 경우, 영상을 받는 방식에 문제가 있어 lazy 방식을 사용하지 않았습니다. )

├── /public
│   ├── favicon.ico
│   ├── index.html
│   ├── /assets
│   │   ├── /fonts
│   │   │   └── font1
│   │   ├── /images
│   │   │   └── image1
│   │   ├── /logos
│   └── └── └── logo1
├── /src
│   ├── /commons
│   │   ├── apis
│   │   │   ├── useFetch.ts
│   │   │   ├── useGetFetch.ts
│   │   │   └── usePostFetch.ts
│   │   ├── components
│   │   │   ├── Input.tsx
│   │   │   ├── UserToggleBox.tsx
│   │   │   └── LogoButton.tsx
│   │   ├── cookie
│   │   │   └── cookie.ts
│   │   ├── modals
│   │   │   ├── AutoplayGuideModal.tsx
│   │   │   └── CategoryModal.tsx
│   ├── /pages
│   │   ├── home
│   │   │   ├── homeType.d.ts
│   │   │   ├── /components
│   │   │   │   ├── VHomeComponent.tsx
│   │   │   │   └── homeComponent.tsx
│   │   │   └── Home.tsx
│   │   ├── map
│   │   │   ├── mapType.d.ts
│   │   │   ├── /components
│   │   │   │   ├── VMapComponent.tsx
│   │   │   │   └── mapComponent.tsx
│   │   │   └── Map.tsx
│   ├── /layouts
│   │   ├── VGNB.tsx
│   │   └── GNB.tsx
│   ├── /recoil
│   │   ├── registerState.tsx
│   │   └── regionState.tsx
│   ├── /hooks
│   │   └── useFetch.ts
│   ├── App.css
│   ├── App.tsx
│   ├── App.test.tsx
│   ├── index.css
│   └── index.tsx
├── .env
├── .eslintrc
├── .gitignore
├── .prettierrc
├── package-lock.json
├── package.json
├── README.md
├── tailwind.config.js
└── tsconfig.json