Skip to content
/ Team16_FE Public
forked from Step3-kakao-tech-campus/Team16_FE

[카카오테크캠퍼스 1기 3단계 16조 FE] 새로운 가족을 기다리는 유기동물을 연결하는 서비스 Animory 입니다.

0 stars 4 forks Branches Tags Activity
Star
Notifications You must be signed in to change notification settings

LimSumi/Team16_FE

BranchesTags
 
 

Repository files navigation

전남대 16조 TEAM 다글다글🐶🐱

LOGO_IMAGE

새로운 가족을 기다리는 유기동물을 연결하는 서비스 Animory 입니다.


🔗 목차


💻 프로젝트 소개

💡 반려인이 되고자 하는 사람들과 새로운 가족을 기다리는 유기동물을 연결하는 웹서비스입니다.

🙋‍♂️ 저희의 메인 기능은 이렇게 되어있어요!!

  • 저희 서비스의 타겟층은 민간 유기동물 보호소입니다.
  • 유기동물의 정적인 이미지뿐만 아닌 동적인 숏폼 영상을 통한 컨텐츠로 사용자의 접근성을 높이는 것을 목표로 하고 있습니다.
  • 지역, 동물별 카테고리를 통해 내가 원하는 지역 내 보호소에서 등록한 유기 동물의 사진과 영상을 확인할 수 있습니다.
  • 근처 위치에 있는 동물 보호소를 검색할 수 있고, 서비스를 이용하여 유기 동물을 등록한 보호소를 구분하여 찾아볼 수 있습니다.

👨‍💻👩‍💻 FE 팀원 소개

테크리더 : 전도균
테크리더 : 전도균
 팀원 : 임수미
팀원 : 임수미
 팀원 : 황지원
팀원 : 황지원

📚 기술 스택

stackticon

  • Typescript 언어를 사용한 React 라이브러리 통해 SPA 방식의 웹 애플리케이션입니다.
  • Recoil과 React Query를 통해 상태 관리를 하고 있습니다.
  • CSS 스타일 작업을 위해 Tailwind CSS를 사용하고 있습니다.

🗃️ 디자인 패턴 & 디렉토리 구조 소개

디자인 패턴 설명

  • VAC Pattern과 Atomic Design Pattern을 병합하여 사용하고 있습니다.
    • VAC 패턴을 사용하여 UI를 담당하는 부분과 비즈니스 로직을 담당하는 부분을 분리하여 사용하고 있습니다.
    • 컴포넌트 및 페이지는 Atomin 디자인 패턴을 사용하여 컴포넌트의 재사용성을 염두에 두고 관리하고 있습니다.

디렉토리 구조

  • 아래의 구조는 디자인 패턴을 고려하여 작성한 가이드라인입니다.
  • 폴더명은 바뀌지 않지만, 내부 파일의 이름은 변경될 수 있습니다.
├── /public
│   ├── index.html
│   ├── /assets
│   │   ├── /images
│   │   │   ├── image1
│   │   │   └── image2
│   │   ├── /logos
│   │   │   ├── logo1
│   └── └── └── logo2
├── /src
│   ├── /apis
│   ├── /components
│   │   ├── /atoms
│   │   ├── /molecules
│   │   ├── /organisms
│   │   ├── /templates
│   │   │   ├── SomeTemplate.tsx
│   │   └── └── VSomeTemplate.tsx
│   ├── /pages
│   │   ├── HomePage.tsx
│   │   └── DetailedPetPage.tsx
│   ├── /layouts
│   └── └── GNB.tsx
│   ├── /recoil
│   │   ├── PetShelterState.tsx
│   └── └── PetInfoState.tsx
│   ├── /commons
│   │   ├── someFunction.ts
│   └── └── regex.ts
│   ├── /hooks
│   └── └── useFetch.ts
│   ├── App.css
│   ├── App.tsx
│   ├── App.test.tsx
│   ├── index.css
└── └── index.tsx
├── .eslintrc
├── .gitignore
├── .prettierrc
├── package-lock.json
├── package.json
├── README.md
├── tailwind.config.js
└── tsconfig.json

📑 페이지별 기능 소개

  • 기획 단계에서 Figma을 통해 UI에 대한 와이어프레임을 제작하였습니다.
  • 아래 이미지는 페이지별 UI 설계 이미지와 사용되는 컴포넌트 및 기능에 대한 설명입니다.
  • 자세한 사항은 TEAM-16-Wireframe을 통해 확인하실 수 있습니다.

  1. 메인 페이지

    main-page
  • 메인 홈 화면입니다.
  • 마우스 휠, 드래그 제스처를 통해 위아래로 숏폼을 랜덤하게 보여줄 수 있습니다.
  • 영상에 마우스를 올렸을 때 상세 정보를 볼 수 있는 화살표 기호가 나오게 되고, 기호를 누르게 되면 오른쪽으로 넘어가면서 영상에 나오는 동물의 상세 정보를 볼 수 있습니다.

  1. 상세 정보 페이지

    image
  • 영상에서 화살표 기호를 눌렀을 때 나오는 페이지입니다.
  • 등록된 동물의 상세 정보를 볼 수 있고, 보호소 연락하기 버튼을 누르게 되면 등록된 번호로 전화를 연결해줍니다.
  • 동물의 성격에 대해 오각형 형태로 보여주어 사용자가 보기 편한 직관성을 가지고 있습니다.

  1. 근처 동물 보호소 찾기 페이지

    image
  • 사용자의 현재 위치를 중심으로 근처 동물 보호소 위치를 알려주는 페이지입니다.
  • 검색된 보호소는 보호소의 이름, 주소, 연락처를 보여주게 됩니다.
  • 검색된 보호소 중 현재 서비스를 이용하여 동물을 등록한 보호소는 별도의 표시를 통해 구분합니다.

  1. 보호소 프로필 페이지

    image
  • 보호소에 대한 정보와 보호소에서 등록한 유기 동물을 그룹화하여 보여주는 페이지입니다.
  • 페이지네이션을 통해 등록된 유기 동물 리스트를 관리합니다.

  1. 프로필 리스트 페이지

    image image
  • 사이트에 등록된 유기 동물의 리스트를 사진과 함께 볼 수 있는 페이지입니다.
  • 안락사 예정이 가까운 동물을 따로 분류해서 보여주고 있습니다.
  • 새롭게 추가된 유기 동물을 볼 수 있는 탭을 따로 만들었습니다.
  • 더보기를 누르면 추가로 등록된 유기 동물을 찾아볼 수 있고, 페이지네이션을 통해 등록된 유기 동물 리스트를 관리합니다.

  1. 등록하기 페이지

    image image
  • 유기 동물의 정보를 입력하여 사이트에 등록하는 페이지입니다.
  • 비디오와 이미지를 등록할 수 있는 버튼이 있고, 제한 용량에 대해 텍스트로 명시해주고 있습니다.
  • 등록하기 버튼을 통해 정보를 등록하고, 추가로 등록할 동물이 있는지 물어보는 모달창을 통해 사용자가 확인할 수 있도록 합니다.

  1. 수정하기 페이지

    image
  • 등록하기 페이지에서 등록했던 정보를 수정할 수 있는 페이지입니다.
  • 수정완료 버튼을 통해 정보를 수정하여 다시 등록할 수 있습니다.

  1. 로그인 페이지

    image
  • 이메일, 비밀번호, 보호소 정보를 입력하여 회원가입 할 수 있습니다.
  • 이메일 중복 확인 요청을 보냈을 때 validation 처리를 사용자에게 알려줍니다.
  • 회원가입 버튼을 눌렀을 때, 이메일 형식에 맞지 않음, 비밀번호 형식에 어긋남 등의 validation 처리를 사용자에게 알려줍니다.
  • 우편번호 찾기를 통해 보호소의 우편번호, 주소를 기입할 수 있는 모달창이 화면에 나오게 됩니다.
  • 로그인 버튼을 통해 로그인 페이지로 이동할 수 있습니다.

  1. 회원가입 페이지

    image
  • 이메일, 비밀번호를 입력하여 로그인할 수 있습니다.
  • 로그인 요청을 보냈을 때 등록되지 않은 이메일, 비밀번호가 다름 등의 validation 처리를 사용자에게 알려줍니다.
  • 회원가입 버튼을 통해 회원가입 페이지로 이동할 수 있습니다.

  1. GNB(Global Navigation Bar)

    image
  • 카테고리, 프로필 목록, 주변 보호소 찾기, 등록하기, 로그인, 회원가입 페이지입니다.
  • 각 기능에 대한 버튼을 누르게 되면, 해당 역할을 하는 페이지로 이동하게 됩니다.
  • Layout으로 홈 화면과 같은 계층으로 두어서 동작합니다.

  1. 카테고리 Modal

    image image
  • GNB에 있는 카테고리 탭을 누르게 되면, 지역과 동물 카테고리를 지정할 수 있는 모달창이 나오게 됩니다.
  • 선택된 카테고리에 따라 홈 화면에서 보여지는 동물 숏폼 리스트가 변경됩니다.

📒 카카오 테크 캠퍼스 3단계 진행 보드


배포와 관련하여


최종 배포는 크램폴린으로 배포해야 합니다.

하지만 배포 환경의 불편함이 있는 경우를 고려하여 

임의의 배포를 위해 타 배포 환경을 자유롭게 이용해도 됩니다. (단, 금액적인 지원은 어렵습니다.)

아래는 추가적인 설정을 통해 (체험판, 혹은 프리 티어 등)무료로 클라우드 배포가 가능한 서비스입니다.

ex ) AWS(아마존), GCP(구글), Azure(마이크로소프트), Cloudtype

Notice

필요 산출물들은 수료 기준에 영향을 주는 것은 아니지만, 
주차 별 산출물을 기반으로 평가가 이루어 집니다.

주차 별 평가 점수는 추 후 최종 평가에 최종 합산 점수로 포함됩니다.

레포지토리 운영-001 (1) image

git flowchart_FE.pdf


필요 산출물

Step3. Week-1

✅1주차

    - 5 Whys
    - 마켓 리서치
    - 페르소나 & 저니맵
    - 와이어 프레임
    - 칸반보드
Step3. Week-2

✅2주차

    - ERD 설계서
    
    - API 명세서
Step3. Week-3

✅3주차

    - 최종 기획안
Step3. Week-4

✅4주차

    - 4주차 github
    
    - 4주차 노션
Step3. Week-5

✅5주차

    - 5주차 github
    
    - 5주차 노션
Step3. Week-6

✅6주차

    - 6주차 github
    
    - 중간발표자료
    
    - 피어리뷰시트
Step3. Week-7

✅7주차

    - 7주차 github
    
    - 7주차 노션
Step3. Week-8

✅8주차

    - 중간고사
Step3. Week-9

✅9주차

    - 9주차 github
    
    - 9주차 노션
Step3. Week-10

✅10주차

    - 10주차 github
    
    - 테스트 시나리오 명세서
    
    - 테스트 결과 보고서
Step3. Week-11

✅11주차

    - 최종 기획안
    
    - 배포 인스턴스 링크

과제 상세 : 수강생들이 과제를 진행할 때, 유념해야할 것

1. README.md 파일은 동료 개발자에게 프로젝트에 쉽게 랜딩하도록 돕는 중요한 소통 수단입니다.
해당 프로젝트에 대해 아무런 지식이 없는 동료들에게 설명하는 것처럼 쉽고, 간결하게 작성해주세요.

2. 좋은 개발자는 디자이너, 기획자, 마케터 등 여러 포지션에 있는 분들과 소통을 잘합니다.
UI 컴포넌트의 명칭과 이를 구현하는 능력은 필수적인 커뮤니케이션 스킬이자 필요사항이니 어떤 상황에서 해당 컴포넌트를 사용하면 좋을지 고민하며 코드를 작성해보세요.

코드리뷰 관련: review branch로 PR시, 아래 내용을 포함하여 코멘트 남겨주세요.

1. PR 제목과 내용을 아래와 같이 작성 해주세요.

PR 제목 : 부산대_0조_아이템명_0주차

About

[카카오테크캠퍼스 1기 3단계 16조 FE] 새로운 가족을 기다리는 유기동물을 연결하는 서비스 Animory 입니다.

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 98.2%
  • Other 1.8%