sy-paik/final-17-breath-connect

🏃함께 달리는 즐거움을 나눌 수 있는 공간, 들숨날숨

🌬 들숨날숨

함께 달리는 즐거움을 나눌 수 있는 공간, 들숨날숨 🏃‍♀️🏃‍♂️

들숨날숨 바로가기
Test ID : bc30@naver.com
Test PW : bc12345!

목차

1. 서비스 소개
2. 팀 소개
3. 기술 및 개발 환경
4. 개발 일정
5. 역할 분담
6. 구현 기능
7. 컨벤션
8. 프로젝트 구조
9. 협업 문화
10. 이슈 관리
11. 버그 관리

🏃 1. 서비스 소개

'들숨날숨'은 같은 동네 혹은 서로 다른 동네에서 새로운 사람들과 함께 달리거나 소식을 공유할 수 있는 SNS/커뮤니티 서비스입니다.

• 자유롭게 뛰는 날짜와 장소만 게시한다면 누구든지 함께 달릴 수 있습니다.
• 팔로잉하는 사용자 뿐만 아니라 사용자 검색을 통해 팔로잉하지 않은 사용자의 소식을 확인할 수 있습니다.
• 내가 달린 기록과 사람들을 이웃들에게 공유할 수 있습니다.
• 사용자의 게시글에 좋아요, 댓글을 통해 활발하게 소통할 수 있습니다.

👨‍💻👩‍💻 2. 팀 소개

위니드팀을 소개합니다!

"우리는 개발자로 성장이 필요하다"라는 의미로
위니브라는 회사의 도움을 얻고
함께 프로젝트를 진행하면서 서로가 필요한 부분을 채워주기 위해
다음과 같은 팀명을 짓게 되었습니다.

🐿 김용덕	💜 박연주	🌿 백수연	🐕 이양래

🛠️ 3. 기술 및 개발 환경

FrontEnd	BackEnd	Design	협업방식	컨벤션
	제공된 API

📅 4. 개발 일정

📝 5. 역할 분담

김용덕

🎨 UI

• 마이 프로필 페이지
• 사용자 프로필 페이지
• 홈 피드 페이지
• 지도 상세 페이지
  

🎶 공통 컴포넌트

• Button
• Header
• Footer
• Map
• Modal
  

✨ 기능 구현

• 홈피드와 무한 스크롤
• 내 프로필 및 사용자 프로필
• 카카오 지도 api를 이용한 path 그리기
• 댓글 수정
• 게시글 삭제, 게시글 수정
  

🤝 기타

• 프로젝트 아이디어의 근원
• 지도 api 자료조사

박연주

🎨 UI

• 팔로잉 목록 페이지
• 팔로워 목록 페이지
• 채팅 페이지
• 404 페이지
  

🎶 공통 컴포넌트

• Follow
• Search
  

✨ 기능 구현

• 팔로잉과 팔로워 리스트
• 채팅 리스트
• 채팅 룸
• 검색 debounce를 통한 성능 최적화
  

🤝 기타

• 데일리 스크럼, 번개 회의록 작성
• 노션 관리

백수연

🎨 UI

• Splash 페이지
• 회원가입 페이지
• 로그인 페이지
• 프로필 설정 및 수정 페이지
  

🎶 공통 컴포넌트

• Input
• Loading
  

✨ 기능 구현

• 로그인, 회원가입, 프로필 설정 및 수정 시 유효성 검사
• 참여하기와 참여하기 취소
• 댓글 작성
• 이미지 압축을 통한 이미지 최적화
• api 모듈화 및 카카오 지도 api 주소값으로 변환
  

🤝 기타

• 프로젝트 디자인 관리
• 깃헙 이슈 및 PR 정리

이양래

🎨 UI

• 검색 페이지
• 게시물 작성 페이지
• 게시물 상세 페이지
  

🎶 공통 컴포넌트

• Comment
• Modal
• Alert
  

✨ 기능 구현

• 유저 검색
• 게시글 업로드
• 댓글 삭제
• 사용자 프로필 이미지 유효성 검사
• 다크모드 구현
  

🤝 기타

• 데일리 스크럼, 번개 회의 리더
• 프로젝트 일정 관리

🌻 6. 구현 기능

• 홈

🔗스플래쉬	🔗회원가입	🔗프로필 설정

🔗로그인	🔗홈 피드	🔗계정 검색

🔗팔로잉 팔로우	🔗404	🔗채팅

• 게시글

🔗게시글 작성	🔗게시글 수정	🔗게시글 삭제

🔗댓글 작성	🔗댓글 삭제	🔗댓글 신고

🔗게시글 상세	🔗게시글 좋아요	🔗게시글 좋아요 취소

• 프로필

🔗내 프로필	🔗내 프로필 수정	🔗유저 프로필 팔로우

TOP👆🏼

☁️ 7. 컨벤션

Git 컨벤션

Emoji	Code	기능	Description
✨	:sparkles:	Feat	새 기능
♻️	:recycle:	Refactor	코드 리팩토링
📦	:wrench:	Chore	리소스 수정/삭제
🐛	:bug:	Fix	버그 수정
📝	:memo:	Docs	문서 추가/수정
🎨	:lipstick:	Style	UI/스타일 파일 추가/수정
🎉	:tada:	Init	프로젝트 시작 / Init
✅	:white_check_mark:	Test	테스트 추가/수정
⏪	:rewind:	Rewind	변경 사항 되돌리기
🔀	:twisted_rightwards_arrows:	Merge	브랜치 합병
🗃	:card_file_box:	DB	데이터베이스 관련 수정
💡	:bulb:	Comment	주석 추가/수정
🚀	:rocket:	Deploy	배포

Code 컨벤션

• 작은 따옴표 사용 '' 사용
• 전체를 묶는 스타일 컴포넌트 명은 끝에 container 사용
• 이미지를 가져오는 컴포넌트 명은 파스칼 표기법 사용
• 일치 연산자 사용

ESLint와 Prettier

ESLint

{
  "extends": ["react-app", "react-app/jest", "prettier"],
  "rules": {
    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
    "linebreak-style": 0
  }
}

• "extends": ["react-app", "react-app/jest", "prettier"] : 다른 ESLint 구성을 확장하는 역할로, Create React App 프로젝트에서 제공하는 기본적인 규칙을 사용하고, Jest 관련 규칙도 함께 확장하며, 마지막으로 Prettier와 관련된 규칙도 추가합니다.
• "rules": { ... } ****: ESLint의 규칙을 지정합니다.
  • "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }] ****: 이 설정은 JSX를 사용하는 React 컴포넌트 파일의 확장자를 지정하는 규칙입니다.
  • [1, { "extensions": [".js", ".jsx"] }] 은 경고로 설정되어 ‘.js’ 또는 ‘.jsx’ 확장자가 아닌 파일에서 JSX를 사용하면 경고가 표시됩니다.
  • "linebreak-style": 0 : 개행 문자 스타일을 지정하는 규칙입니다. 0 으로 설정되어 있어, 개행 문자 스타일에 대한 경고 또는 오류를 표시하지 않습니다.

Prettier

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true
}

• "trailingComma" : 마지막 요소 뒤에 쉼표를 추가할지 여부를 결정합니다. es5 값은 ES5 문법에 따라 마지막 요소 뒤에 쉼표를 추가합니다.
• "tabWidth" : 탭 문자의 너비를 결정합니다. 들여쓰기에 탭 대신 2개의 공백을 사용합니다.
• "semi" : 문장 끝에 세미콜론을 추가할지 여부를 결정합니다. true 로 설정되어 있으므로, 세미콜론을 추가합니다.
• "singleQuote" : 이 설정은 문자열을 작은 따옴표로 감쌀지 큰 따옴표로 감쌀지 결정합니다. true 로 설정되어 있으므로, 문자열을 작은 따옴표로 감쌉니다.

🌱 7. 프로젝트 구조

• public/favicon/ : 파비콘
• src/assets/ : 전역에서 사용하는 폰트, 스프라이트 이미지, 로고 이미지
• src/atoms/ : 전역 상태 관리를 위한 아톰 (UserAtom, LoginAtom)
• src/components/ : 공통 컴포넌트와 Map 컴포트
• src/pages/ : 서비스에 사용되는 각 페이지
• src/routes/ : 페이지 라우팅
• src/styles/ : 전역 스타일 (layout, globalstyle, theme)

🌬️ 들숨날숨
🌱public
 ┣ 🌿favicon.ico
 ┗ 🌿index.html
🌱src
 ┣ 🌿assets
 ┃ ┣ 🪴fonts
 ┃ ┣ 🪴images
 ┃ ┗ 🪴sprite
 ┣ 🌿atoms
 ┣ 🌿components
 ┃ ┣ 🪴common
 ┃ ┃ ┣ 🌳Alert
 ┃ ┃ ┣ 🌳Button
 ┃ ┃ ┣ 🌳Comment
 ┃ ┃ ┣ 🌳Input
 ┃ ┃ ┣ 🌳Loading
 ┃ ┃ ┣ 🌳Modal
 ┃ ┃ ┗ 🌳User
 ┃ ┃ ┃ ┣ 🌳Follow
 ┃ ┃ ┃ ┗ 🌳Search
 ┃ ┣ 🪴Footer
 ┃ ┣ 🪴Header
 ┃ ┗ 🪴Map
 ┣ 🌿hooks
 ┣ 🌿pages
 ┃ ┣ 🪴ChatPage
 ┃ ┣ 🪴FeedPage
 ┃ ┣ 🪴FollowListPage
 ┃ ┣ 🪴LoginPage
 ┃ ┣ 🪴NotFoundPage
 ┃ ┣ 🪴PostPage
 ┃ ┣ 🪴ProfilePage
 ┃ ┃ ┣ 🌳ProfileEdit
 ┃ ┣ 🪴ProfileSettingPage
 ┃ ┣ 🪴SearchPage
 ┃ ┣ 🪴SignupPage
 ┃ ┣ 🪴SnsLoginPage
 ┃ ┣ 🪴SplashPage
 ┃ ┗ 🪴UploadPage
 ┣ 🌿routes
 ┣ 🌿styles
 ┣ 🌿utils
 ┣ 📜App.js
 ┗ 📜index.js

💪 협업 문화

- Daily Scrum

• 일시: 평일 오전 9시 (15분 내외)
• 장소: [회의실] 프로젝트 17조 디스코드 (카메라On)
• 내용: 회고 및 작업 계획
• 대화방식: 정보 전달이 아닌 대화 주제가 가져오는 효과나 해결책에 토론

TOP👆🏼

핵심 코드

API 모듈 Axios

Axios를 사용하여 API 요청을 처리했습니다. 이 모듈은 API 요청을 보내기 위해 여러가지 함수와 Axios의 인스턴스를 내보는 것으로 구성되어 있고 각 함수는 특정한 API에 대한 요청을 보내고 응답을 처리하여 데이터를 반환합니다.

import axios from 'axios';

const URL = 'https://api.mandarin.weniv.co.kr/';

/* 기본 인스턴스 */
export const instance = axios.create({
  baseURL: URL,
  headers: {
    'Content-Type': 'application/json',
  },
});

/* 이미지 인스턴스 */
export const imgInstance = axios.create({
  baseURL: URL,
  headers: {
    'Content-Type': 'multipart/form-data',
  },
});

/* auth 인스턴스 */
export const authInstance = axios.create({
  baseURL: URL,
  headers: {
    Authorization: `Bearer ${localStorage.getItem('token')}`,
    'Content-Type': 'application/json',
  },
});

/* content 업로드 */
export const postContentUpload = async (token, post) => {
  const response = await authInstance.post(`/post/`, post, {
    headers: {
      Authorization: `B다

Axios를 이용하여 간편하게 API 요청을 보낼 수 있었고 요청을 담당하는 인스턴스와 각각의 API 요청 함수를 별도로 관리할 수 있었습니다. 요청을 할 때 사용하는 함수의 형식도 통일했기 때문에 코드의 일관성과 가독성을 높일 수 있었다.

kakao Map API & react-kakao-maps-sdk

사용자들을 위해 시작 위치와 종류 위치를 얻어오는 기능, path를 그리고 그 데이터를 기반으로 주소를 값이 불러올 수 있도록 처리했습니다. 카카오 맵을 사용할 수 있도록 도와주는 카카오 지도 API와 React 애플리케이션에서 사용할 수 있도록 도와주는 리액트 카카오 지도 라이브러리를 함께 사용했습니다.

useEffect(() => {
    if (data.image) {
      try {
        const parsing = JSON.parse(data.image);
        const startLat = parsing[0].lat;
        const startLng = parsing[0].lng;
        const geocoder = new window.kakao.maps.services.Geocoder();
        const startLatlng = new window.kakao.maps.LatLng(startLat, startLng);

        geocoder.coord2Address(
          startLatlng.getLng(),
          startLatlng.getLat(),
          (result, status) => {
            if (status === window.kakao.maps.services.Status.OK) {
              const startPoint = result[0].address.address_name;
              setStartPoint(startPoint);
            }
          }
        );

        const endLat = parsing[parsing.length - 2].lat;
        const endLng = parsing[parsing.length - 2].lng;
        const endLatlng = new window.kakao.maps.LatLng(endLat, endLng);
				/* 마지막 요소 = 총 거리 */

        geocoder.coord2Address(
          endLatlng.getLng(),
          endLatlng.getLat(),
          (result, status) => {
            if (status === window.kakao.maps.services.Status.OK) {
              const endPoint = result[0].address.address_name;
              setEndPoint(endPoint);
            }
          }
        );
      } catch (error) {
        console.error(error);
      }
    }
  }, [data.image]);

모두가 지도 API를 처음 사용하면서 새로운 경험을 할 수 있었습니다. 기존 카카오 지도 API에서 받아오는 데이터(위도, 경도)를 사용자에게 보여주기 위한 데이터(주소 값)로 변환하는 작업이 필요했는데 새로운 라이브러리를 추가하여 해결했습니다.

버그 문제