각자가 구현한 페이지 or 기능에 대한 설명 ❗금요일 밤 10시까지❗

[JeonDoGyun]

각자가 구현한 페이지 or 기능에 대한 설명 ❗금요일 밤 10시까지❗

[hjiwon]

• 홈 화면

  • 주요 기능
    자동재생 / 일시정지 / 음소거 / 드래그 등의 기능을 가진 숏폼의 형태로, 동영상을 사용자에게 보여준다.
  • 신경 쓴 점
    데스크톱의 크롬과 사파리, 모바일의 크롬과 사파리 등에서 동영상이 의도한대로 동작
    유튜브 쇼츠, 틱톡과 같은 슬라이더 형태의 숏폼

• 등록하기, 수정하기 페이지의 사진/동영상 업로드 + 모달

  • 주요 기능
    사용자가 업로드한 사진과 동영상을 formData를 통해서 서버로 전송한다.
    로딩 등의 과정을 모달에서 보여준다.
  • 신경 쓴 점
    DOM 분리 및 스타일링을 위해서 react portal 사용
    json 데이터, 이미지, 동영상을 한꺼번에 보내기 위해 formData 사용

• 내 주변 보호소 찾기

  • 주요 기능
    주변의 동물보호소 중 애니모리에 등록된 보호소만 보여주기
  • 신경 쓴 점
    카카오맵 api를 리액트에서 사용하기 위해서는 useEffect 안에 모든 코드를 집약시켜야 하는 문제가 있었고, 이를 해결하기 위해 커스텀 훅 만들어서 사용

• 동물 상세정보

  • 주요 기능
    해당 동물에 대한 사진을 비롯한 상세정보를 조회할 수 있다.
  • 신경 쓴 점
    반응형 css

• GNB 및 카테고리 선택 모달

  • 주요 기능
    반응형 GNB
    홈화면에서 조회할 동물 조건(지역, 종 등)을 적용하기 위한 카테고리 모달
  • 신경 쓴 점
    반응형 css
    DOM 분리 및 스타일링을 위해서 react portal 사용

[LimSumi]

• 프로필리스트(홈, 긴급, 신규)

  • 주요기능
    유기동물의 사진과 간단한 정보를 리스트 형태로 보여준다.
  • 신경쓴 점
    비슷한 구성이 여러군데에서 나오는 부분이라서 컴포넌트 재사용을 위해 신경썼다.

• 보호소 프로필리스트

  • 주요기능
    보호소의 간단한 정보와 해당 보호소에서 관리중인 유기동물 리스트를 보여준다.
    로그인된 계정의 경우 본인 보호소 정보로 이동하면 유기동물 수정하기 버튼이 보인다.
  • 신경쓴 점
    반응형 ui 와 수정하기 버튼 처리 위치에 대해 고민하였다.

• 등록하기/ 수정하기 상세정보

  • 주요기능
    등록하기의 상세 정보를 입력받을 수 있다.
  • 신경쓴점
    input 방식이 다른 값들을 모아서 autoComplete 값을 주는 방식을 많이 고민했다.

• 카테고리 필터 기능

  • 주요기능
    원하는 지역/종의 동물의 숏폼만 볼 수 있다.
  • 신경쓴점
    백엔드에 보내야할 값과 지정해둔 recoilState가 달라 통일시켜 상태를 관리해주었다.

[JeonDoGyun]

• 프로필리스트(홈, 긴급, 신규)

이거 홈이 어디 말하는건가요?