문서

# <span id="top"> 🐱 애니멀톡</span> <!-- 추후 수정 필요 --> [🔗 배포 URL](https://beyonddevelops.github.io/AnimalTalk/) ## 개요 - 🏫 멋쟁이사자처럼 프론트엔드스쿨 3기 팀 프로젝트로 진행한 애니멀톡입니다. - 🐱 애니멀톡 서비스는 참여하고 싶은 반려동물 모임(산책, 미용 등)을 등록하여 소통할 수 있는 SNS입니다. - ✉️ 모임을 등록하지 않아도 일상을 공유하며 즐거운 SNS 활동을 할 수 있습니다. - 📝 글과 사진을 함께 게시물로 작성하여 자신의 일상을 공유할 수 있습니다. 다른 사용자를 팔로우하면 유저가 올린 게시물을 홈 피드에서 소식을 확인할 수도 있습니다. - 💕 피드를 구경하다가 마음에 드는 게시물을 발견했다면 좋아요를 누를 수 있고 댓글을 남기거나 공유할 수도 있습니다. ## 팀원 구성 | 이지형 | 이재영 | 정수현 | | :-------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------: | | <img src="https://avatars.githubusercontent.com/u/90930391?v=4" height=150 width=150> | <img src="https://avatars.githubusercontent.com/u/103429329?v=4" height=150 width=150> | <img src="https://avatars.githubusercontent.com/u/68059880?v=4" height=150 width=150> | | <a href="https://github.com/July249"><img src="https://img.shields.io/badge/GitHub-181717?style=flat&logo=GitHub&logoColor=white"/></a> | <a href="https://github.com/GreattitJY"><img src="https://img.shields.io/badge/GitHub-181717?style=flat&logo=GitHub&logoColor=white"/></a> | <a href="https://github.com/IntHyun"><img src="https://img.shields.io/badge/GitHub-181717?style=flat&logo=GitHub&logoColor=white"/></a> | <details> <summary>목차</summary> 1. [프로젝트 목표](#goal) 2. [팀 문화](#culture) 3. [개발 환경 및 배포 URL](#dev) 4. [프로젝트 구조](#tree) 5. [역할 분담](#role) 6. [프로젝트 진행 사항](#task) 7. [UI](#ui) 8. [페이지 기능](#pages) 9. [개발 이슈 해결 로그](#trouble-shoot) 10. [개선할 점](#issues) </details> --- ## <span id="goal">1. 프로젝트 목표</span> - React와 TailwindCSS의 결합을 통해 마크업과 디자인 구현을 통합적으로 관리하고자 합니다. - 라우팅과 상태관리 및 비동기 통신을 이해하며 프로젝트를 진행합니다. - React Hook에 대한 동작 원리와 구현 과정을 이해하며 프로젝트를 진행합니다. - 사용자의 웹 접근성을 고려하여 시맨틱하게 개발합니다. - 컴포넌트 분리를 통한 재활용성 향상을 지향합니다. - 적극적인 코드리뷰를 통해 서로의 정보를 공유하고, 직접 코드를 설명하는 시간을 가져봅니다. - "참여하고 싶은 프로젝트", "자랑하고 싶은 프로젝트" 만들기를 팀 문화로 지정하였습니다. <p align="right"><a href="#top">(Top)</a></p> ## <span id="culture">2. 팀 문화</span> ### 원칙 1. 참여하고 싶은 프로젝트 만들기 2. 자랑하고 싶은 프로젝트 만들기 ### 규칙 1.1 서로의 다름을 인정하기 서로의 감정과 생각을 솔직하게 말하자! => 매주 금요일 마감회의 때 감정회고 시간을 가져보기 => 자유로운 의견 제시 불편한 점이 있으면 “나는 이러저러한 불편함이 있었어요~”라고 말하기 => 금요일 저녁 10시에 맥주 회고 가지기 1.2 언제나 마음 편하게 페어프로그래밍 요청하기 1.3 주중 오후 4시에 코드 리뷰하기 1.4 자기 시간을 확보하도록 하기 => 주중 오후 8시 이후, 주말에는 최대한 자기 시간 확보하기 1.5 불참을 하게 되는 경우에는 하루 전에 말해주기 2.1 타인에게 설명할 수 있을 정도로 하나의 기능이라도 구현하려고 노력하기 2.2 내 실력을 온전히 보여줄 수 있는 수준의 코드 작성하기 => 배우면서 적용하되, 따라하지 말자! <p align="right"><a href="#top">(Top)</a></p> ## <span id="dev">3. 개발 환경 및 배포 URL</span> ### 개발 환경 - Front : React, TailwindCSS, React-router-dom, Axios - Back : 제공된 API 사용 - 버전 관리 및 이슈 : 🔗[GitHub](https://github.com/beyondDevelops/AnimalTalk), 🔗[GitHub Issues](https://github.com/beyondDevelops/AnimalTalk/issues), 🔗[GitHub Project](https://github.com/orgs/beyondDevelops/projects/3) - 서비스 배포 환경 : [🔗 GitHub](https://github.com/) ### 배포 URL URL : 🔗 https://beyonddevelops.github.io/AnimalTalk/ <p align="right"><a href="#top">(Top)</a></p> ## <span id="tree">4. 프로젝트 구조</span> - public/assets/ : 이미지, svg 등 - src/api/ : axios API 관리 - src/components/ : 단일 페이지의 하위 요소로 들어가는 컴포넌트 - src/context/ : 사용자 정보 등 상태관리 - src/hooks/ : 컴포넌트에서 사용되는 훅 관리 - src/pages/ : 화면에 렌더링 되는 컴포넌트 - src/shared/ : 페이지에서 공통적으로 쓰이는 컴포넌트 ```bash AnimalTalk │ ├─public │ └─assets │ ├─img │ └─index.html │ └─src ├─api │ └─axios.jsx │ ├─components │ ├─ChatDummyData │ ├─ChatModule │ ├─CheckAuth │ ├─ModalModule │ ├─NoFeed │ ├─PostTypeSelectBar │ ├─SimpleClub │ └─Textarea │ ├─context │ └─UserContext.jsx │ ├─hooks │ └─useIntersect.jsx │ ├─pages │ ├─ChatList │ ├─ChatRoom │ ├─ClubUpload │ ├─EditProfile │ ├─Follows │ ├─Home │ ├─LoginEmail │ ├─LoginHome │ ├─NotFound │ ├─PostDetail │ ├─PostUpload │ ├─SignUp │ ├─SignupProfile │ ├─SplashScreen │ ├─UserFeed │ └─UserSearch │ ├─shared │ ├─Footer │ ├─Header │ ├─Post │ ├─Profile │ ├─SimpleUserList │ └─UserClub │ ├─App.jsx ├─index.css └─index.js ``` <p align="right"><a href="#top">(Top)</a></p> ## <span id="role">5. 역할 분담</span> ### 🛠 공통 담당 - 라우팅, 로그인 API, 헤더 부분 ### 🙋‍♀️ 이지형 - 🔗[github/July249](https://github.com/July249) - 홈, 검색 페이지, 팔로우 페이지, 사용자 피드 페이지 및 해당 페이지 구현을 위한 하위 컴포넌트 등 ### 🙋🏼‍♀️ 이재영 - 🔗[github/GreattitJY)](https://github.com/GreattitJY) - 게시글 페이지, 모임 페이지, 채팅 페이지, 푸터, 유저 프로필, 댓글 및 좋아요 기능 및 해당 페이지 및 기능 구현을 위한 하위 컴포넌트 등 ### 🙋🏻‍♀️ 정수현 - 🔗[github/IntHyun](https://github.com/IntHyun) - 회원가입 기능 및 페이지, 회원정보 수정 기능 및 페이지, 모달 컴포넌트, 채팅 목록 페이지 및 해당 페이지 구현을 위한 하위 컴포넌트 등 <p align="right"><a href="#top">(Top)</a></p> ## <span id="task">6. 프로젝트 진행 사항</span> - 전체 개발 기간 : 2022.12.09 ~ - 버전 v.1.1.0 : 2023.01.05 ~ - 버전 v.1.0.0 : 2022.12.09 ~ 2023.01.04 ### 작업 관리 - 🔗[GitHub Projects](https://github.com/orgs/beyondDevelops/projects/3)를 사용하여 진행도와 상황을 꾸준히 공유하였습니다. <img src="https://user-images.githubusercontent.com/68059880/210364564-19f5dcfa-46f0-44cf-b9e4-3352ad30b813.png"> - 적극적인 코드리뷰를 통하여 서로의 지식 공유를 하였습니다. <img src="https://user-images.githubusercontent.com/90930391/210543029-0bcbbe22-c213-47ac-8b68-cc103eb8fdaf.png"> - 이슈에서 무엇을 진행할지에 대해 로그를 남기며 진행하였습니다. <img src="https://user-images.githubusercontent.com/90930391/210544324-a2b95f78-1db6-4909-bce0-fd1ee589a70c.png"> - Pull Request를 보낼 때 이슈번호와 연동하여 issue 관리를 진행, 스크린샷을 통해 코드리뷰의 효율성을 높였습니다. <img src="https://user-images.githubusercontent.com/90930391/210544854-b9b43ddc-9fcf-4bfd-b1b2-d23f428fc3be.png"> - GitHub Discussions를 활용하여 서로의 지식과 정보를 공유하고 의논을 나누었습니다. <img src="https://user-images.githubusercontent.com/90930391/210545863-f03b335f-1b28-4261-b82a-2dac9079a5c4.png"> ### 진행과정 - 22.12.09 ~ 22.12.13 : 기본 환경 설정 및 공통 스타일 작업 (레이아웃, 헤더, 푸터 등) - 22.12.14 ~ 22.12.20 : 기본적인 페이지, 컴포넌트 스타일 및 디자인 UI 기능 구현 - 22.12.21 ~ 23.01.03 : 핵심 기능 구현(게시글, 팔로우, 좋아요, 댓글, 프로필 수정 등) - 23.01.04 ~ : 추가 기능 구현 및 리팩토링 ### 주간회의 주간회의를 진행하여 작업 방향이나 코드 고민에 대해 나누었고 GitHub Wiki를 사용하여 기록하였습니다. - 🔗[221125 회의록 1회차](https://github.com/beyondDevelops/AnimalTalk/wiki/221125-%ED%9A%8C%EC%9D%98%EB%A1%9D-1%ED%9A%8C%EC%B0%A8) - 사용할 기술 스택에 대한 논의 - 물리적 거리의 한계를 극복하고자 Discord에서 주로 회의 진행 - GitHub Orgarization 생성 - GitHub Wiki, Projects, Discussions를 적극적으로 활용하여 회의록 및 프로젝트 진행사항 확인 - GitHub Flow 방식 차용하여 진행 - 🔗[221127 회의록 2회차](https://github.com/beyondDevelops/AnimalTalk/wiki/221127-%ED%9A%8C%EC%9D%98%EB%A1%9D-2%ED%9A%8C%EC%B0%A8) - 조 이름, 조장 정하기, GitHub Origanization 생성 및 등록 - 🔗[221130 회의록 3회차](https://github.com/beyondDevelops/AnimalTalk/wiki/221130-%ED%9A%8C%EC%9D%98%EB%A1%9D--3%ED%9A%8C%EC%B0%A8) - 커밋 컨벤션 지정 - 코드 컨벤션 지정 - GitHub flow 방식에 따라 Pull Request 연습하기 - 🔗[221207 회의록 4회차](https://github.com/beyondDevelops/AnimalTalk/wiki/221207-%ED%9A%8C%EC%9D%98%EB%A1%9D-4%ED%9A%8C%EC%B0%A8) - 이미지 assets 폴더 public vs. src 논의 => public 지정 - TailwindCSS 공통 스타일, 초기 설정 지정 - 🔗[221209 회의록 5회차](https://github.com/beyondDevelops/AnimalTalk/wiki/221209-%ED%9A%8C%EC%9D%98%EB%A1%9D-5%ED%9A%8C%EC%B0%A8) - Commit, PR, Issue 템플릿 적용 - PR 단위 의논 - Merge 할 때 규칙 1. Approve 이후 셀프Merge 진행 2. 다음 기능 구현을 위한 빠른 Merge 요구시 즉각적인 셀프 머지 진행 3. Merge 전에는 항상 코멘트 남기기 - Branch 명 정하기 => (커밋 컨벤션)/issue_(이슈번호) ex. feat/issue_120 - 코드리뷰 시간은 주중 오후 4시 - 🔗[221212 회의록 6회차](https://github.com/beyondDevelops/AnimalTalk/wiki/221212-%ED%9A%8C%EC%9D%98%EB%A1%9D-6%ED%9A%8C%EC%B0%A8) - VSCode prettier 설정 동기화를 통해 esLint 미적용 - 🔗[221220 회의록 7회차](https://github.com/beyondDevelops/AnimalTalk/wiki/221220-%ED%9A%8C%EC%9D%98%EB%A1%9D-7%ED%9A%8C%EC%B0%A8) - API 명세 및 피그마 디자인을 기준으로 폴더구조 설정 - 라우터 설정 - 서버 데이터 생성 논의 (썬더 클라이언트 이용) - 디자인 작업 종료 시점 논의 - 기능 구현 업무 분담 => 페이지 단위로 진행 - 로그인 기능 구현 페어프로그래밍 - 🔗[221222 회의록 8회차](https://github.com/beyondDevelops/AnimalTalk/wiki/221222-%ED%9A%8C%EC%9D%98%EB%A1%9D-8%ED%9A%8C%EC%B0%A8) - 페이지 업무 분담 및 추가 업무 분담 - 🔗[221229 회의록 9회차](https://github.com/beyondDevelops/AnimalTalk/wiki/221229-%ED%9A%8C%EC%9D%98%EB%A1%9D-9%ED%9A%8C%EC%B0%A8) - 작업한 페이지 확인 - 버그 및 미완성 기능 확인 - 추가 작업 사항 논의 - 🔗[230106 회의록 10회차](https://github.com/beyondDevelops/AnimalTalk/wiki/231228-%ED%9A%8C%EC%9D%98%EB%A1%9D-10%ED%9A%8C%EC%B0%A8) - 교육기간 내 프로젝트에 대한 서로의 회고 - 서로에 대한 추천서 써주기 - 교육 이후 프로젝트 진행 방향 및 방식 논의 <p align="right"><a href="#top">(Top)</a></p> ## <span id="ui">7. UI</span> <img src="https://user-images.githubusercontent.com/68059880/210367588-a936e2a1-2d58-4037-8906-973a8dee8002.png"> <p align="right"><a href="#top">(Top)</a></p> ## <span id="pages">8. 페이지 기능</span> ### 1. Login | 🔗[splash](https://github.com/beyondDevelops/AnimalTalk/wiki/%ED%8E%98%EC%9D%B4%EC%A7%80%EB%B3%84-%EA%B8%B0%EB%8A%A5-%EC%83%81%EC%84%B8-%EC%84%A4%EB%AA%85#splash) | 🔗[로그인](https://github.com/beyondDevelops/AnimalTalk/wiki/%ED%8E%98%EC%9D%B4%EC%A7%80%EB%B3%84-%EA%B8%B0%EB%8A%A5-%EC%83%81%EC%84%B8-%EC%84%A4%EB%AA%85#%EB%A1%9C%EA%B7%B8%EC%9D%B8-%ED%8E%98%EC%9D%B4%EC%A7%80) | 🔗[회원가입](https://github.com/beyondDevelops/AnimalTalk/wiki/%ED%8E%98%EC%9D%B4%EC%A7%80%EB%B3%84-%EA%B8%B0%EB%8A%A5-%EC%83%81%EC%84%B8-%EC%84%A4%EB%AA%85#%ED%9A%8C%EC%9B%90%EA%B0%80%EC%9E%85-%ED%8E%98%EC%9D%B4%EC%A7%80) | | :----------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | | 짤 | 짤 | 짤 | ### 2. Home | 🔗[홈](https://github.com/beyondDevelops/AnimalTalk/wiki/%ED%8E%98%EC%9D%B4%EC%A7%80%EB%B3%84-%EA%B8%B0%EB%8A%A5-%EC%83%81%EC%84%B8-%EC%84%A4%EB%AA%85#%ED%99%88-%ED%8E%98%EC%9D%B4%EC%A7%80) | 🔗[검색](https://github.com/beyondDevelops/AnimalTalk/wiki/%ED%8E%98%EC%9D%B4%EC%A7%80%EB%B3%84-%EA%B8%B0%EB%8A%A5-%EC%83%81%EC%84%B8-%EC%84%A4%EB%AA%85#%EA%B2%80%EC%83%89-%ED%8E%98%EC%9D%B4%EC%A7%80) | 🔗[채팅](https://github.com/beyondDevelops/AnimalTalk/wiki/%ED%8E%98%EC%9D%B4%EC%A7%80%EB%B3%84-%EA%B8%B0%EB%8A%A5-%EC%83%81%EC%84%B8-%EC%84%A4%EB%AA%85#%EC%B1%84%ED%8C%85-%ED%8E%98%EC%9D%B4%EC%A7%80) | | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | | 짤 | 짤 | 짤 | ### 3. 게시글 | 🔗[작성](https://github.com/beyondDevelops/AnimalTalk/wiki/%ED%8E%98%EC%9D%B4%EC%A7%80%EB%B3%84-%EA%B8%B0%EB%8A%A5-%EC%83%81%EC%84%B8-%EC%84%A4%EB%AA%85#%EA%B2%8C%EC%8B%9C%EA%B8%80-%EC%9E%91%EC%84%B1-%ED%8E%98%EC%9D%B4%EC%A7%80) | 🔗[상세](https://github.com/beyondDevelops/AnimalTalk/wiki/%ED%8E%98%EC%9D%B4%EC%A7%80%EB%B3%84-%EA%B8%B0%EB%8A%A5-%EC%83%81%EC%84%B8-%EC%84%A4%EB%AA%85#%EA%B2%8C%EC%8B%9C%EA%B8%80-%EC%83%81%EC%84%B8-%ED%8E%98%EC%9D%B4%EC%A7%80) | | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | | 짤 | 짤 | | 🔗[수정](링크) | 🔗[삭제](링크) | | :------------: | :------------: | | 짤 | 짤 | ### 4. 프로필 | 🔗[내 프로필](링크) | 🔗[유저 프로필](링크) | 🔗[팔로워](링크) | | :-----------------: | :-------------------: | :--------------: | | 짤 | 짤 | 짤 | | 🔗[내 프로필](링크) | 🔗[유저 프로필](링크) | 🔗[팔로워](링크) | | :-----------------: | :-------------------: | :--------------: | | 짤 | 짤 | 짤 | ### 5. 좋아요 및 댓글 | 🔗[좋아요](링크) | 🔗[댓글](링크) | | :-----------------: | :-------------------: | | 짤 | 짤 | ### 6. 모임 | 🔗[모임 만들기](링크) | 🔗[모임 수정](링크) | 🔗[모임 삭제](링크) | | :-----------------: | :-------------------: | :--------------: | | 짤 | 짤 | 짤 | <p align="right"><a href="#top">(Top)</a></p> ## <span id="trouble-shoot">9. 개발 이슈 해결 로그</span> ### <p align="right"><a href="#top">(Top)</a></p> ## <span id="issues">10. 개선할 점</span> ### <p align="right"><a href="#top">(Top)</a></p>