/2024_BEOTKKOTTHON_TEAM_27_FE

[kakao X goorm] 벚꽃톤 대상 수상작 🧑‍🌾 소상공인을 위한 동반자, 소동 FE 🧑‍🌾

Primary LanguageTypeScript

🧑‍🌾 소상공인 동반자, 소동 🧑‍🌾

image

☁️ TEAM

FE FE
가천대학교 가천대학교
가영 유신
@imeureka @yusiny
📂 프로젝트 초기 세팅, 홈, 포스트 생성, 히스토리 리스트 📂 CI/CD 구축, 포스트 완료/상세, 가게 등록, 이용 가이드, 로그인

☁️ TECH ☁️

역할 종류
Library React React Query
Programming Language TypeScript
Styling Styled Components
State Management Context-API
Formatting ESLint Prettier
Version Control Git GitHub
ETC Mock Service Worker Badge
Deployment Cloudflare

💡 주요 라이브러리

    "react-confetti": "^6.1.0",
    "react-spinners": "^0.13.8",
    "react-spring-bottom-sheet": "^3.4.1",
    "vite-plugin-svgr": "^4.2.0"

☁️ SCREEN ☁️

포스팅 생성

포스팅 생성 동영상
image
2024-03-24.5.10.22.mov
  • step 1 ~ 6 까지 퍼블리싱 완료 되었고 한 페이지에서 값들을 관리하기 위해 Funnel 패턴을 적용시켜보았습니다.

  • Context API 사용 이유 : 동적으로 늘고 줄어드는 form을 관리를 위해서 적용시켰습니다.


포스팅 결과 공유

포스팅 공유 동영상 SNS 원터치 공유
image
KakaoTalk_Video_2024-03-24-05-28-25.mp4
KakaoTalk_Video_2024-03-24-05-39-07.mp4
  • 안드로이드 웹뷰 세팅 및 브릿지함수로 통신

  • 인스타그램 공유하기 API 사용


기타

포스팅 히스토리 가게 등록 이용 가이드
image KakaoTalk_Photo_2024-03-24-05-09-10 KakaoTalk_Photo_2024-03-24-05-09-10
  • 리액트 쿼리를 통한 데이터 패칭

  • isPending 로딩 처리 구현


📄 컨벤션 및 브랜치 전략

🔽💙 소동 웨비들 공간💙🔽

1️⃣ Commit 컨벤션
  • 기본적인것 (feat, fix, chore, ..) 위주로만 지키기!
제목 내용
init 브랜치 첫 커밋
feat 새로운 기능을 추가할 경우
style 기능에 영향을 주지 않는 커밋, 코드 순서, css 등의 포맷에 관한 커밋
fix 버그를 고친 경우
refactor 코드 리팩토링에 대한 커밋
docs 문서를 수정한 경우, 파일 삭제, 파일명 수정 등
chore 빌드 테스트 업데이트, 패키지 매니저를 설정하는 경우, 주석 추가, 자잘한 문서 수정
code review 코드 리뷰 반영

브랜치 전략

페이지명/#이슈번호

브랜치 운영

  • main: 최종 Merge를 하는 곳 ❗️
  • develop: 개발용 브랜치, 모든 페이지를 Merge 하는 곳
  • feature/#이슈번호: 각 페이지별 기능을 개발할 때 사용한 브랜치
  • fix/#이슈번호: 리팩토링 및 오류 해결 사용 브랜치