Skip to content

Latest commit

 

History

History
452 lines (367 loc) · 27.2 KB

README.md

File metadata and controls

452 lines (367 loc) · 27.2 KB
Raw

🌬 들숨날숨


image

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


들숨날숨 바로가기
Test ID : [email protected]
Test PW : bc12345!

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

🏃 1. 서비스 소개

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

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



👨‍💻👩‍💻 2. 팀 소개

위니드팀을 소개합니다!

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


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




FrontEnd
Development%20Leader		 FrontEnd
Communication%20Leader		 FrontEnd
Design%20Leader		 FrontEnd
Team%20Leader


🛠️ 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 🔗채팅
팔로잉 팔로우 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에서 받아오는 데이터(위도, 경도)를 사용자에게 보여주기 위한 데이터(주소 값)로 변환하는 작업이 필요했는데 새로운 라이브러리를 추가하여 해결했습니다.

버그 문제