🏃 모든 회의의 시작, ASAP 💨

ASAP 은 회의를 진행하는 업무시간 외 일련의 사전작업들을 쉽고 빠르고 간편하게 처리해주는 웹서비스입니다.

ASAP은 회의를 진행하는 업무시간 외 일련의 사전작업들을 쉽고 빠르고 간편하게 처리해주는 '최적의 회의시간 도출' 웹서비스입니다.

2. 회의 관련 정보를 하나의 큐카드로 정리해 제공함으로써 회의 시간 외 추가 공지사항을 단톡방에 올리는 수고로움 또한 덜어주고자 합니다.

💡 ASAP 서비스의 핵심 기능

📥 회의 생성하기

1️⃣ 회의명 입력	2️⃣ 날짜 선택	3️⃣ 시간대 선택

4️⃣ 회의 장소 입력	5️⃣ 회의 시간 설정	6️⃣ 방장 정보 입력

7️⃣  준비물 등 추가 내용

📥  가능 시간 입력하기

📥 가능 시간 입력하기

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

📥 회의 일정 확인하기

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

👨‍👨‍👧‍👦  팀원 소개

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

⚒️ 기술 스택

    "@types/axios": "^0.14.0",
    "@types/react-copy-to-clipboard": "^5.0.4",
    "axios": "^1.4.0",
    "copy-text-to-clipboard": "^3.2.0",
    "html2canvas": "^1.4.1",
    "postcss-syntax": "^0.36.2",
    "prettier": "1.13",
    "react": "^18.2.0",
    "react-copy-to-clipboard": "^5.1.0",
    "react-dom": "^18.2.0",
    "react-error-boundary": "^4.0.10",
    "react-multi-date-picker": "^4.1.2",
    "react-router-dom": "6",
    "react-toastify": "^9.1.3",
    "recoil": "^0.7.7",
    "recoil-persist": "^5.1.0",
    "styled-reset": "^4.5.1",
    "swiper": "^10.0.4",
    "vite-plugin-svgr": "^3.2.0"
    "@stylelint/postcss-css-in-js": "^0.38.0",
    "@types/node": "^20.3.2",
    "@types/react": "^18.0.37",
    "@types/react-dom": "^18.0.11",
    "@types/styled-components": "^5.1.26",
    "@typescript-eslint/eslint-plugin": "^5.60.1",
    "@typescript-eslint/parser": "^5.60.1",
    "@vitejs/plugin-react": "^4.0.0",
    "babel-plugin-styled-components": "^2.1.4",
    "eslint": "^8.43.0",
    "eslint-plugin-import": "^2.27.5",
    "eslint-plugin-jsx-a11y": "^6.7.1",
    "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.3.4",
    "postcss": "^8.4.24",
    "prettier-plugin-style-order": "^0.2.2",
    "styled-components": "^6.0.1",
    "stylelint": "15.5.0",
    "stylelint-config-concentric-order": "^5.1.0",
    "stylelint-config-prettier": "^9.0.5",
    "stylelint-config-recommended": "^12.0.0",
    "stylelint-config-styled-components": "^0.1.1",
    "typescript": "^5.0.2",
    "vite": "^4.3.9",
    "vite-plugin-babel-macros": "^1.0.6"

🏙️  환경 구축

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