🎧️ 글을 보고 듣다, 보다 🎧️

원하는 목소리로 글을 들어봐요

🎧️ VODA의 핵심기능

1️⃣ 방생성 기능 및 초대기능

1. 여행 스페이스를 생성합니다.
2. 생성된 스페이스에서 링크를 공유합니다.
2. 링크를 통해 입장하며 자신의 역할을 선택합니다.

---

2️⃣ 여행 스페이스의 종합요약 확인 및 의견달기

1. 해당 스페이스의 종합요약을 볼 수 있습니다.
2. Comment 를 통해 팀원들과 의견을 공유할 수 있습니다.

---

3️⃣ 일정 스케쥴

1. 여행지를 검색해보고 찜한여행지에 추가할 수 있습니다.
2. 여행일정역할자가 여행일정을 추가할 수 있습니다.

---

4️⃣ 일정에서 연동된 예약카드 예약 및 예약정보 입력기능

1. 예약이 필요한 일정은 예약탭에 연동됩니다.
2. 예약정보를 입력할수 있습니다.

---

5️⃣ 회계페이지

1. 예약에서 비용이 입력되면 회계페이지로 연동됩니다
2. 회계내역을 직접추가할 수 있습니다.

---

6️⃣ 준비물페이지- 개인스페이스

1. 템플릿을 통해 준비물을 추가할 수 있습니다.
2. 직접 추가 삭제도 가능합니다.

👩‍💻 VODA Role

민지 Web FE	규원 Web FE

⚒️ 기술 스택

    "@hookform/resolvers": "^3.3.4",
    "@tanstack/react-query": "^5.40.1",
    "@tanstack/react-query-devtools": "^5.40.1",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "aws-sdk": "^2.1619.0",
    "axios": "^1.6.8",
    "dompurify": "^3.1.5",
    "immutability-helper": "^3.1.1",
    "quill-image-drop-and-paste": "^1.3.0",
    "quill-image-resize": "^3.0.9",
    "react": "^18.2.0",
    "react-beautiful-dnd": "^13.1.1",
    "react-dnd": "^16.0.1",
    "react-dnd-html5-backend": "^16.0.1",
    "react-dom": "^18.2.0",
    "react-h5-audio-player": "^3.9.1",
    "react-hook-form": "^7.51.3",
    "react-icons": "^5.0.1",
    "react-markdown": "^9.0.1",
    "react-player": "^2.16.0",
    "react-quill": "^2.0.0",
    "react-router-dom": "^6.22.3",
    "react-type-animation": "^3.2.0",
    "recoil": "^0.7.7",
    "recoil-persist": "^5.1.0",
    "recoilize": "^3.2.0",
    "styled-components": "^6.1.9",
    "swiper": "^11.1.0",
    "vite-plugin-svgr": "^4.2.0",
    "yup": "^1.4.0"

📁 폴더 구조

    |-- 📁 node_modules
    |-- 📁 public
    |-- 📁 src
         |-- 📁 app
              |-- store.js
         |-- 📁 asset
              |-- 📁 icon
              |-- 📁 images
         |-- 📁 components (공통사용 컴포넌트)
         |-- 📁 features
              |-- 📁 Authorization
              |-- 📁 Landing
              |-- 📁 layout
              |-- 📁 Login
              |-- 📁 NotFound
              |-- 📁 Role
              |-- 📁 SearchIDPW
              |-- 📁 Sign
              |-- 📁 SpaceList
              |-- 📁 UserAccount
          	|-- 📁 lib
            |-- Router.jsx (라우터 파일) 
            |-- App.js
            |-- index.tsx
    |-- .gitignore
    |-- README.md
    |-- package.json
    |-- package-lock.json

❤️ 설치

npm install
npm run dev

✍️ 아쉬웠던점

1. 디자인 패턴 부재
2. 깃브랜치 전략 부재
3. 리액트가 다들 처음이라 스파게티 코드 등 최적화 해야할 요소 다량발생