Skip to content

ASAP-as-soon-as-possible/ASAP_Client

Repository files navigation

🏃 모든 회의의 시작, ASAP 💨

BRANDING 3_PLAN

ASAP은 회의를 진행하는 업무시간 외 일련의 사전작업들을 쉽고 빠르고 간편하게 처리해주는 '최적의 회의시간 도출' 웹 서비스입니다. 회의 관련 정보를 하나의 큐카드로 정리해 제공함으로써 회의 시간 외 추가 공지사항을 단톡방에 올리는 수고로움 또한 덜어주고자 합니다.

💡 ASAP 서비스의 핵심 기능

📥 회의 생성하기

1️⃣ 회의명 입력 2️⃣ 날짜 선택 3️⃣ 시간대 선택
4️⃣ 회의 장소 입력 5️⃣ 회의 시간 설정 6️⃣ 방장 정보 입력
7️⃣  준비물 등 추가 내용

📥 가능 시간 입력하기

1️⃣ 일정 등록 2️⃣ 우선 순위 입력

📥 회의 일정 확인하기

1️⃣ 종합 일정 시간표 확인 2️⃣ 최적의 회의시간 추천 3️⃣ 큐카드 공유하기

👨‍👨‍👧‍👦  팀원 소개

이재훈 이동헌 심은서 정찬우
WEB FE 리드개발자 WEB FE WEB FE WEB FE

🏙️  환경 구축

React.js TypeScript Yarn Vite

💅 Style

Styled-Components

🧹 Lint

ESLint Prettier Stylelint

💎 State

Recoil

✅ 커밋 컨벤션

  • type: subject
  • type 종류
    type 명 내용
    init 초기 세팅
    feat 기능 추가, 삭제, 변경
    design 기능 변경 없이 UI 만 변경
    fix 버그 수정
    refactor 코드 리팩토링
    style 코드 형식, 정렬 등의 변경 (동작에 영향 X)
    test 테스트 코드 추가, 삭제 변경
    docs 문서 추가 삭제 변경 (코드 수정 X)
    chore 빌드 테스트 업데이트, 패키지 매니저 변경, 주석 추가 및 삭제
    etc 위에 해당하지 않는 모든 변경 (가능한 한 X)
    • ex) feat: 회원가입 API 추가
  • subject
    • 제목은 최대 50 글자가 넘지 않도록 하고 마침표 및 특수기호는 사용하지 않는다.
    • 영문으로 표기하는 경우 동사(원형)를 가장 앞에 두고 첫 글자는 대문자로 표기한다.(과거 시제를 사용하지 않는다.)
    • 제목은  개조식 구문으로 작성. → 서술형 문장이 아니라, 간결하고 요점적인 서술을 의미. + 명령조
      • 예시
        * Fixed --> Fix
        * Added --> Add
        * Modified --> Modify
  • 최대한 작은 단위의 Commit 지향.

📁 폴더 구조

|-- 📁 node_modules
|-- 📁 public
|-- 📁 src
    |-- 📁 asset
	|-- 📁 svgs
	|-- 📁 images
    |-- 📁 components
	|-- 📁 atomComponents (button , input , Text 등 재사용의 가장 작은 단위)
	|-- 📁 moleculesComponents (Header , TitleComponents 등 재사용될만한 큼지막한 단위)
	|-- 📁 icons(React Icon Components)
    |-- 📁 pages
   	|-- 📁Onboarding
            |-- 📁components
            |-- 📁types
            |-- 📁hooks
            |-- 📁utils
            |-- Onboarding.tsx
        |-- 📁UseFunnel
            |-- 📁components
            |-- 📁types
            |-- 📁hooks
            |-- 📁utils
            |-- UseFunnel.tsx
   |-- 📁 hooks (커스텀 훅을 담아두는 폴더)
   |-- 📁 atoms (Recoil 전역적으로 사용될 상태 폴더)
       |-- atom.ts (ex.유저정보 등 필요 atom)
   |-- 📁 styles ( GlobalStyles , theme.ts )
   |-- 📁 utils ( 재사용이 높은 함수모음 폴더 )
       |-- 📁 apis
       |-- 📁 mocks
   |-- 📁 Routes
       |-- Router.tsx (라우터 파일)
|-- App.tsx
|-- main.tsx
|-- .eslintrc.json
|-- .gitignore
|-- .prettierrc
|-- README.md
|-- package.json
|-- tsconfig.json
|-- yarn.lock