From 6d8c3a23c1f35217add33a54f045a7131b2816d6 Mon Sep 17 00:00:00 2001
From: JeonDogyun <81916309+JeonDoGyun@users.noreply.github.com>
Date: Sat, 11 Nov 2023 00:12:37 +0900
Subject: [PATCH] =?UTF-8?q?=08docs:=20=EC=B5=9C=EC=A2=85=EB=B3=B8=20?=
=?UTF-8?q?=EC=A0=9C=EC=B6=9C=EC=9D=84=20=EC=9C=84=ED=95=9C=20README.md=20?=
=?UTF-8?q?=EC=9E=91=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
이슈에 적힌 내용을 바탕으로 최종본 관련 내용 작성했습니다.
---
README.md | 462 ++++++++++++++++++++++--------------------------------
1 file changed, 188 insertions(+), 274 deletions(-)
diff --git a/README.md b/README.md
index cdf368e2..10f67026 100644
--- a/README.md
+++ b/README.md
@@ -4,6 +4,7 @@
## 🔗 목차
+- [📰 최종 기획서 제출](#-최종-기획서-제출)
- [👨💻👩💻 FE 팀원 소개](#-fe-%ED%8C%80%EC%9B%90-%EC%86%8C%EA%B0%9C)
- [💻 프로젝트 소개](#-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%86%8C%EA%B0%9C)
- [📚 기술 스택](#-%EA%B8%B0%EC%88%A0-%EC%8A%A4%ED%83%9D)
@@ -11,7 +12,146 @@
- [⌨️ 네이밍 컨벤션](#%EF%B8%8F-네이밍-컨벤션)
- [📑 페이지별 기능 소개](#-%ED%8E%98%EC%9D%B4%EC%A7%80%EB%B3%84-%EA%B8%B0%EB%8A%A5-%EC%86%8C%EA%B0%9C)
- [📝 요구사항 명세서](https://github.com/Step3-kakao-tech-campus/Team16_BE/wiki/%EC%9A%94%EA%B5%AC%EC%82%AC%ED%95%AD-%EB%AA%85%EC%84%B8)
-- [📒 카카오 테크 캠퍼스 3단계 진행 커리큘럼 안내 사항](#-%EC%B9%B4%EC%B9%B4%EC%98%A4-%ED%85%8C%ED%81%AC-%EC%BA%A0%ED%8D%BC%EC%8A%A4-3%EB%8B%A8%EA%B3%84-%EC%A7%84%ED%96%89-%EB%B3%B4%EB%93%9C)
+
+
+## 📰 최종 기획서 제출
+### 1️⃣ 팀 내 배포 링크 모음
+
+
+
+### 2️⃣ 최신 ERD 이미지 파일
+
+
+
+### 3️⃣ 각 트랙별 코딩에 대한 간략한 설명
+### 기획 주안점 및 서비스 기획 의도
+```
+- 저희는 보호소에 입양된 동물들에 대한 사회적 인식을 개선시키고, 사용자에게 접근성이 좋은 컨텐츠를 제공하는 것을 초점에 두고 서비스를 기획, 개발했습니다.
+- 동영상 숏폼을 통해 사용자의 진입 장벽을 낮춰 컨텐츠를 이용할 수 있게 만들었습니다.
+```
+### 세부적인 개발 내용
+- 메인 페이지
+```
+- 주요 기능
+ - 자동재생 / 클릭을 통한 일시정지, 음소거 컨트롤 / 드래그를 통한 페이지 이동의 기능을 가진 숏폼을 사용자에게 제공합니다.
+ - 영상을 기다리는 동안 로더가 동작하도록 만들었습니다.
+- 개발 주안점
+ - 데스크톱의 크롬과 사파리, 모바일의 크롬과 사파리 등 브라우저의 영상 정책에 맞게 동영상이 의도한대로 동작하도록 개발했습니다.
+ - 유튜브 shorts, 틱톡과 같은 슬라이더 형태의 숏폼을 만들었습니다.
+```
+- 내 주변 보호소 찾기 페이지
+```
+- 주요 기능
+ - 카카오 맵 api를 연결하여, 애니모리에 등록된 보호소를 포함한 주변 동물 보호소를 보여주도록 개발했습니다.
+ - 보호소 리스트에서 등록된 보호소를 클릭하면, 해당 보호소 페이지로 이동할 수 있습니다.
+ - 등록되지 않은 보호소의 경우, 페이지 이동을 할 수 없음을 사용자에게 보여주도록 했습니다.
+- 개발 주안점
+ - 카카오맵 api를 리액트에서 사용하기 위해서 useEffect 안에 모든 코드를 집약시켜야 하는 문제가 있었고, 이를 해결하기 위해 커스텀 훅을 만들어 개발했습니다.
+ - 애니모리에 등록된 보호소는 구분할 수 있도록 만들었습니다.
+```
+- 동물 상세 정보 페이지
+```
+- 주요 기능
+ - 해당 동물의 사진을 비롯한 상세정보를 조회할 수 있습니다.
+ - 보호소 정보 하단에 있는 "정보 보기"를 통해 해당 동물이 등록된 보호소 페이지로 이동할 수 있습니다.
+- 개발 주안점
+ - 반응형을 고려하여 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 방식을 사용하지 않았습니다. )
+```
### 💻 프로젝트 소개
@@ -51,7 +191,7 @@
-### ▶️ 디자인 패턴 설명 [변경 후]
+### ▶️ 디자인 패턴 설명 [1차 변경]
- 기존 방식의 문제점
1. `Component의 Level`을 정하는 기준이 모호하다는 문제점이 있었습니다.
2. 재사용할 수 있는 컴포넌트가 한정적이어서 모든 컴포넌트를 나누는 것에 어려움이 있었습니다.
@@ -61,45 +201,73 @@
-디렉토리 구조
-- 아래의 구조는 디자인 패턴을 고려하여 작성한 가이드라인입니다.
-- `Atomic Design Pattern`의 문제로 인해 변경 사항이 반영된 구조입니다.
-- 폴더명은 바뀌지 않지만, 내부 파일의 이름은 변경될 수 있습니다.
+- 디렉토리 구조
+ - 아래의 구조는 디자인 패턴을 고려하여 작성한 가이드라인입니다.
+ - `Atomic Design Pattern`의 문제로 인해 변경 사항이 반영된 구조입니다.
+ - 폴더명은 바뀌지 않지만, 내부 파일의 이름은 변경될 수 있습니다.
+
+### ▶️ 디자인 패턴 설명 [2차 변경]
+- 기존 방식의 문제점
+ 1. page 디렉토리 내 컴포넌트의 수가 많아지면서 파일에 대한 가독성이 저하되는 문제가 있었습니다.
+ 2. Type, Interface를 작성하는 과정에서 중복되는 내용이 있었습니다.
+- 변경된 방식
+ 1. page 디렉토리 내 components 디렉토리를 만들어서 페이지 내 사용되는 컴포넌트를 정리했습니다.
+ 2. page에 대한 `pageType.d.ts` 파일을 만들어서 Type과 Interface를 관리하도록 했습니다.
+
+
```
├── /public
+│ ├── favicon.ico
│ ├── index.html
│ ├── /assets
+│ │ ├── /fonts
+│ │ │ └── font1
│ │ ├── /images
-│ │ │ ├── image1
-│ │ │ └── image2
+│ │ │ └── image1
│ │ ├── /logos
-│ │ │ ├── logo1
-│ └── └── └── logo2
+│ └── └── └── 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
-│ │ ├── login
-│ │ │ ├── VLoginPage.tsx
-│ │ │ └── LoginPage.tsx
│ │ ├── map
-│ │ │ ├── Map.tsx
-│ ├── └── └── MapPage.tsx
+│ │ │ ├── mapType.d.ts
+│ │ │ ├── /components
+│ │ │ │ ├── VMapComponent.tsx
+│ │ │ │ └── mapComponent.tsx
+│ │ │ └── Map.tsx
│ ├── /layouts
│ │ ├── VGNB.tsx
│ │ └── GNB.tsx
│ ├── /recoil
│ │ ├── registerState.tsx
-│ └── └── regionState.tsx
+│ │ └── regionState.tsx
│ ├── /hooks
-│ └── └── useFetch.ts
+│ │ └── useFetch.ts
│ ├── App.css
│ ├── App.tsx
│ ├── App.test.tsx
│ ├── index.css
-├── └── index.tsx
+│ └── index.tsx
├── .env
├── .eslintrc
├── .gitignore
@@ -137,7 +305,8 @@
### 📑 페이지별 기능 소개
-- 기획 단계에서 `Figma`을 통해 UI에 대한 와이어프레임을 제작하였습니다.
+- 기획 단계에서 `Figma`를 통해 UI에 대한 와이어프레임을 제작하였습니다.
+- 사전 기획 상태와 개발 후 상태를 비교하기 위해 작성했습니다.
- 아래 이미지는 페이지별 UI 설계 이미지와 사용되는 컴포넌트 및 기능에 대한 설명입니다.
- 자세한 사항은 [TEAM-16-Wireframe](https://www.figma.com/file/A0w3m1DU5JJm2zzvo9lnGE/16%EC%A1%B0-%EC%83%88%EA%B8%B0%ED%9A%8D?type=design&node-id=684%3A1302&mode=design&t=OXljL8TPJH6AsihE-1)을 통해 확인하실 수 있습니다.
@@ -255,258 +424,3 @@
- 선택된 카테고리에 따라 홈 화면에서 보여지는 동물 숏폼 리스트가 변경됩니다.
-
-***
-
-
-## 📒 카카오 테크 캠퍼스 3단계 진행 보드
-
-
-
-## 배포와 관련하여
-
-```
-
-최종 배포는 크램폴린으로 배포해야 합니다.
-
-하지만 배포 환경의 불편함이 있는 경우를 고려하여
-
-임의의 배포를 위해 타 배포 환경을 자유롭게 이용해도 됩니다. (단, 금액적인 지원은 어렵습니다.)
-
-아래는 추가적인 설정을 통해 (체험판, 혹은 프리 티어 등)무료로 클라우드 배포가 가능한 서비스입니다.
-
-ex ) AWS(아마존), GCP(구글), Azure(마이크로소프트), Cloudtype
-
-```
-## Notice
-
-```
-필요 산출물들은 수료 기준에 영향을 주는 것은 아니지만,
-주차 별 산출물을 기반으로 평가가 이루어 집니다.
-
-주차 별 평가 점수는 추 후 최종 평가에 최종 합산 점수로 포함됩니다.
-```
-
-
-
-
-[git flowchart_FE.pdf](https://github.com/Step3-kakao-tech-campus/practice/files/12521045/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주차
->
-
-
-
-
-
----