tweety-hh/readme

🚨위용위용

위험할 때 용이하게

🖥️ 계정 ID : [email protected] , 🔒 PW : 칼든병아리
📆 개발 기간 : 2023.06.01 ~ 2023.06.30

프로젝트 소개

위급할때 ! 용이하게 !

  전국적으로 재난이 지속적으로 발생되는 상황에서 국민들은 아직 재난에 무관심하고 재난 관련 정보 제공 또한 미흡해 이러한 상황을 극복하기 위한 대책안을 세워보았습니다.
  위용위용은 스마트폰 및 디지털 플랫폼의 기능을 활용하여 사용자가 사전 조치를 취할 수 있게하며, 제공되는 정보에 입각한 결정을 내리고 중요한 상황에서 안전을 보장받을 수 있도록 합니다.

🔥남양홍🔥

저희는 4명의 프론트엔드 개발자로 구성된 '남양홍' 입니다.
팀원들의 이름에서 하나씩 가져와서 합친 팀명으로, 팀원들이 트러블 없이 함께 헤쳐나가자는 의미에서 지은 팀명입니다.

홍승표	남현희	안양진	홍수지
Jaharim	tweety-hh	anyangjin	g1azed
팀장 & Tech Leader	팀원 & Document Operator	팀원 & Communication Manager	팀원 & Project Manager

🐥홍승표

• 개발 파트
  • 개발 환경 세팅
    • ESLint 적용
    • Prettier 적용
    • styled-component
      • GlobalStyle 적용
      • theme 적용
  • 공통 컴포넌트 구현
    • Carousel
    • NavBar
    • Slider
    • NewsFrame
  • HelpPage 구현
  • DonationPage 구현
    • DonationDetail
    • DonationInform
    • DonationsInput
  • ContextAPI 적용
  • Router 처리
    • Router와 Component 연결
    • 비로그인 상태에서 url로 페이지 접근 불가 및 유효하지 않은 url 처리
  • CSS 처리
    • 모바일 기반으로 데스크탑, 모바일 대응
    • 팀원 간 merge시 깨지는 CSS 수정
      • SplashPage, LoginPage, SignUpPage, MainPage, PreventPage, HelpPage, BottomNavBar, SectionHeader, TopBar
  • API 연결 및 기능 구현
    • 이미지 업로드 기능
      • AddPost
    • 개인 프로필 불러오기 기능 및 마크업
      • ProfilePage
    • 팔로우 / 언팔로우 기능 및 마크업
      • MainPage, SearchPage
    • 팔로잉 / 팔로워 리스트 기능 및 마크업
      • MainPage, ProfilePage
    • 유저 검색 기능 및 마크업
      • SearchPage
    • 게시글 작성 기능 및 AddPost Page 마크업
      • AddPost
    • 팔로잉 게시글 / 나의 게시글 목록 기능 및 마크업
      • PostPage
    • 게시글 상세 기능 및 마크업
      • PostDetail
    • 좋아요 / 좋아요 취소 기능
      • PostPage, PostDetail
    • 댓글 리스트 불러오기 기능 및 마크업
      • PostDetail
    • 댓글 작성 기능 및 마크업
      • PostDetail
    • 로그아웃 기능

🐰남현희

• PreventPage
  • PreventPage
  • EmergencySuppliesPage
  • ActionTipsPage

🐻안양진

• App Intro
  • IntroScreenPage
  • Login&SignUpStartPage
• Login&SignUpPage
  • Login
    • LoginPage
  • SignUpPage
    • AccountSettingPage
    • AccountNameForm
    • ProfileSettingPage
    • ProfileSettingEndPage
• ChatPage
  • ChatIntroPage
  • ChatRoomPage
• ErrorPage
  • 404 ErrorPage
• ETC
  • LoginPageCommonStyle

🐸홍수지

• MainPage
• PostPage
  • AddPost
  • PostDetail
• CommonComponent
  • BottomNavBar
  • PostDetailModal
  • PostNavBar
  • SectionHeader
  • TopBar
• App UIUX Design
• Service Planning

기술 및 개발 환경

사용 기술

• Front-end :
  
• Back-end : 멋쟁이 사자처럼 제공 API 사용

협업 툴

Git-flow 전략

• 기본적으로 5가지 브랜치를 활용하는 Git-flow 전략이나, 프로젝트 규모에 맞춰서 3가지로 축소해 활용했습니다.
  • main : 배포하기 위한 브랜치
  • develop : 기능 구현, 버그 수정과 같은 기능 단위별 브랜치
  • feature : 세부 기능을 위한 브랜치
    • 각 브랜치의 이름은 feature/#이슈번호-세부기능으로 이름 지어 어떠한 기능의 브랜치인지를 알 수 있도록 했습니다.
    • push 완료 후에는 해당 브랜치를 삭제하여 브랜치를 잘못 사용하는 경우를 방지했습니다.

컨벤션

Git Commit Convention

- Initial : 시스템 초기 설정
- Feat : 새로운 기능 추가
- Design: HTML, CSS 등 UI 디자인 변경
- Perf: 성능 개선
- Refactor: 프로덕션 코드 리팩토링
- Fix: 버그(코드 오류 수정)
- Docs: 문서 작성 및 수정
- Remove: 파일만 삭제
- Rename: 파일 및 폴더명 수정
- Dir: 파일 및 폴더 구조 변경 시(추가, 삭제)
- Style: 코드 포맷 변경, 세미 콜론 누락, 코드 수정이 없는 경우
- Merge: 파일 또는 브랜치 병합할 경우
- Wip: 완료되지 않은 중간에 커밋이 필요한 경우
- Chore : 빌드 업무 수정, 패키지 매니저 수정, 개발 환경 세팅
- Assets : Image, Icon 등 Assets 파일 변동 사항이 있을 경우

ESLint

{
  "plugins": ["react", "react-hooks", "prettier"],
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended",
    "prettier"
  ],
  "parserOptions": {
    "ecmaVersion": 2021,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "rules": {
    // 들여쓰기를 2 칸으로 설정
    "indent": ["error", 2],
    // var 키워드를 금지
    "no-var": "error",
    // async 함수에서 항상 await를 사용
    "require-await": "error",
    // ==와 != 연산자 대신 ===와 !== 연산자를 사용
    "eqeqeq": "warn",
    // React 컴포넌트의 prop 타입 체크를 무시
    "react/prop-types": 0,
    // 사용되지 않은 변수에 대한 경고 끄기
    "no-unused-vars": "off",
    // 카멜 케이스 명명 규칙 강제
    "camelcase": "error",
    // 문장 끝에 세미콜론을 사용하도록 설정
    "semi": ["error", "always"],
    // 추가적인 세미콜론 사용을 금지
    "no-extra-semi": "error"
  }
}

prettier

{
  // 객체 리터럴의 중괄호 주위에 공백 추가
  "bracketSpacing": true,
  // JSX 요소의 여는 꺾쇠 괄호(<)를 같은 줄에 위치시킬지 여부
  "jsxBracketSameLine": false,
  //  JSX 속성 값에 싱글 쿼테이션(')을 사용
  "jsxSingleQuote": true,
  // 문자열에 싱글 쿼테이션(')을 사용
  "singleQuote": true,
  // 텍스트 길어질 경우 줄 바꿈 유지
  "proseWrap": "preserve",
  // 문장 끝에 세미콜론 추가
  "semi": true,
  // 한 줄의 최대 길이 설정, 코드가 이 길이를 초과하면 줄 바꿈 발생
  "printWidth": 100,
  // 줄 바꿈 문자로 LF(Line Feed)를 사용
  "endOfLine": "lf",
  // 들여쓰기에 탭을 사용할지 여부 설정
  "useTabs": false,
  // 탭 문자 하나의 너비 설정
  "tabWidth": 2,
  // 객체나 배열의 마지막 요소 뒤에 쉼표를 추가할지 여부 설정
  "trailingComma": "all",
  // 화살표 함수의 매개변수가 단일 매개변수인 경우 괄호를 사용할지 여부 설정
  "arrowParens": "always"
}

UI

페이지 기능

Login & SignUp

Splash	Login	SignUp

Main

메인페이지	후원금

MyPage

마이 페이지	팔로잉/팔로워 리스트

Prevent

Prevent	EmergencySupplies	ActionTips

Post

게시글 업로드	게시글 좋아요와 댓글	게시글 피드

Neighbor

팔로잉/팔로워

Help

첫페이지	후원금 기부

프로젝트 소감

🐥 홍승표

API를 사용하면서 백엔드와의 데이터 통신과 데이터 처리를 경험할 수 있었습니다. API를 통해 데이터를 요청하고 응답을 받아오는 과정에서 비동기 처리와 에러 핸들링 등을 다루며, 실제 서비스 개발에 필수적인 요소들을 배울 수 있었습니다. 이를 통해 프론트엔드와 백엔드 간의 협업 방식과 데이터 흐름을 이해하는 데 큰 도움이 되었습니다. 또, 커밋 컨벤션과 코드 컨벤션을 준수하며 프로젝트를 진행하였는데 일관된 커밋 메시지 형식과 코드 스타일을 유지하는 것을 통해 팀 내에서 일관성 있는 개발 환경을 유지할 수 있었고 코드 리뷰와 협업 과정에서 원활한 소통과 이해가 가능했습니다. Git을 활용하여 코드 변경 사항을 추적하고 병합하는 과정에서 충돌 해결과 브랜치 관리를 배울 수 있었습니다. 이번 프로젝트를 통해 실제 개발 환경에서의 경험을 쌓을 수 있었고 개발 역량과 협업 능력, 문제 해결 능력 등을 향상시킬 수 있었습니다.

🐰 남현희

여러가지로 부족함이 많던 저에게 항상 다정하게 응원해준 남양홍 팀원 분들 다 너무너무 감사합니다. 첫 프로젝트라 걱정이 많았는데 너무 좋은 분들을 만나서 끝까지 달려올 수 있었던거같습니다! 이번 프로젝트를 계기로 저의 부족한 점을 돌아보고 더 성장할 수 있는 기회가 될거같아서 너무 뜻 깊은 경험이었습니다! 다들 더 멋진 곳으로 올라가는 그 날까지 파이팅입니다!

🐻 안양진

❤️ 9팀 “남양홍” 최고 최고 ❤️ 첫 만남부터 범상치 않던 우리 팀 여러분들과 함께해서 너무 영광이자 행복했어요!! 팀원 한 명 한 명에게 배울 점들이 너무 많았고 서로 부족한 부분들을 알려주며 한층 더 성장하는 계기가 되었어요!😊 어려운 부분도 여러분들과 함께해서 해결하고 고쳐 나갈 수 있었던 것 같습니다!! 협업의 진정한 의미를 이해하게 되었어요🥹 이번 프로젝트를 진행하며 스스로 어떤 부분이 많이 부족한지 그리고 필요한 부분은 어떤 것들이 있는지 확실히 알 수 있는 계기가 되어 좋았고, 이를 계기로 좀 더 성장할 수 있는 기회가 되었습니다. 9팀 이번 프로젝트를 시작으로 모두가 개발자로서 최고의 자리로 올라가는 날까지 파이팅입니다!!🔥🔥

🐸 홍수지

지나치게 부족한 저를 옆에서 응원해주고 용기를 북돋아준 우리 남양홍 팀원들 너무너무 고맙습니다. 첫번째 팀개발프로젝트라 아무것도 몰라서 많이 버거웠지만 팀원분들 덕분에 버틸 수 있었습니다. 너무 많이 아쉽고 채우고싶었던게 많았던 프로젝트지만 이번 경험을 통해서 저에게 부족한 점이 무엇인지 확실히 짚고 넘어갈 수 있었던 기간이었습니다. 감사합니다.