WorkConnect

📝 프로젝트 소개

협업을 위해 여러 서비스를 사용해야 하는 현대인들을 위한 통합 워크스페이스 서비스입니다.

• 상세 소개
  • 사용자들 간 개인 혹은 그룹으로 채팅방을 만들어 메세지나 파일을 전달할 수 있습니다.
  • 화상 채팅을 통해 실시간으로 얼굴을 보며 대화를 할 수 있습니다.
  • 사용자의 일정을 기록해두고, 확인할 수 있습니다.

🌐 배포 주소

WorkConnect 이동하기

Storybook 이동하기

👥 팀원소개

김형빈	김민곤	강해원	유태윤	이예린
리더	부리더	팀원	팀원	팀원
hb9901	MinKonKim	riverSun1	taeyun01	1eeyerin
메인 페이지 프로필 페이지 일정 페이지 레이아웃	화상 채팅	공통 컴포넌트 스토리북	회원 가입 로그인 워크스페이스 생성	실시간 채팅 채널 목록 파일 관리

📖 주요 기능

📌 서비스 아키텍처

📌 ERD

🛠️ Stacks

✔️ Packages Manager

✔️ Language & Framework

✔️ State management

✔️ Design System & Style

✔️ Database

✔️ Solution

✔️ UI Component

✔️ Deployment

✔️ Communication

🚀 시작 가이드

Installation

git clone https://github.com/B03-Killer/WorkConnect.git
cd WorkConnect

version

• node: v20.13.1
• npm: v10.5.2

nvm use

Frontend

npm run dev

StoryBook

npm run build-storybook
npm run storybook

supabase 타입 업데이트

• 토큰 만료시 재 로그인 필요

npx supabase login
npm run gen

🔍로컬 서버 주소

• dev
  • http://localhost:3100
• storybook
  • http://localhost:6006

📁 프로젝트 구조

프로젝트 구조 확인하기

📦WorkConnect
 ┣ 📂.storybook
 ┣ 📂.vscode
 ┣ 📂public
 ┃ ┣ 📂images
 ┃ ┃ ┣ 📂common
 ┃ ┃ ┣ 📂favicons
 ┃ ┃ ┗ 📂onboarding
 ┃ ┣ 📂lotties
 ┣ 📂src
 ┃ ┣ 📂api
 ┃ ┣ 📂app
 ┃ ┃ ┣ 📂(providers)
 ┃ ┃ ┃ ┣ 📂(root)
 ┃ ┃ ┃ ┃ ┣ 📂auth
 ┃ ┃ ┃ ┃ ┃ ┣ 📂kakao
 ┃ ┃ ┃ ┃ ┃ ┣ 📂signup
 ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂verify
 ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂_hooks
 ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂_utils
 ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂_components
 ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂_hooks
 ┃ ┃ ┃ ┃ ┃ ┗ 📂_utils
 ┃ ┃ ┃ ┃ ┣ 📂password-find
 ┃ ┃ ┃ ┃ ┃ ┣ 📂reset
 ┃ ┃ ┃ ┃ ┃ ┣ 📂verify
 ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂_components
 ┃ ┃ ┃ ┃ ┃ ┣ 📂_hooks
 ┃ ┃ ┃ ┃ ┣ 📂welcome
 ┃ ┃ ┃ ┃ ┣ 📂workspace
 ┃ ┃ ┃ ┃ ┃ ┣ 📂landing
 ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂_hooks
 ┃ ┃ ┃ ┃ ┃ ┗ 📂new
 ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂_hook
 ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂_utils
 ┃ ┃ ┃ ┃ ┣ 📂[workspaceId]
 ┃ ┃ ┃ ┃ ┃ ┣ 📂(home)
 ┃ ┃ ┃ ┃ ┃ ┣ 📂channels
 ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂(chat)
 ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂[id]
 ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂(home)
 ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂_components
 ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂_hooks
 ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂_provider
 ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂_util
 ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┗ 📂(resource)
 ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂file
 ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂media
 ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂notice
 ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂_components
 ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂_components
 ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂_constants
 ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂_hook
 ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┗ 📂_utils
 ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂(home)
 ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂add
 ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂(home)
 ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂group-setting
 ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂_components
 ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂_components
 ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂_hooks
 ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂_provider
 ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂_utils
 ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂_components
 ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂_constants
 ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂_hooks
 ┃ ┃ ┃ ┃ ┃ ┃ ┗ 📂_utils
 ┃ ┃ ┃ ┃ ┃ ┣ 📂profile
 ┃ ┃ ┃ ┃ ┃ ┃ ┗ 📂[targetWorkspaceUserId]
 ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂@home
 ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂(..)(..)(home)
 ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂edit
 ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂_components
 ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂_hooks
 ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂_components
 ┃ ┃ ┃ ┃ ┃ ┣ 📂to-do-list
 ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂(home)
 ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂add
 ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┗ 📂[id]
 ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂@todolist
 ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂(..)(..)(..)(to-do-list)
 ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂_components
 ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂_hooks
 ┃ ┃ ┃ ┃ ┃ ┃ ┗ 📂_components
 ┃ ┃ ┃ ┃ ┃ ┣ 📂user
 ┃ ┃ ┃ ┃ ┃ ┣ 📂video-channel
 ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂(main)
 ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂prejoin
 ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂_components
 ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂[name]
 ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂_components
 ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂_hooks
 ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂_store
 ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂_types
 ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂_utils
 ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂_components
 ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┗ 📂_constants
 ┃ ┃ ┃ ┃ ┃ ┃ ┗ 📂_hooks
 ┃ ┃ ┃ ┃ ┃ ┗ 📂_components
 ┃ ┃ ┃ ┃ ┣ 📂_components
 ┃ ┃ ┃ ┃ ┃ ┗ 📂Splash
 ┃ ┃ ┃ ┃ ┣ 📂_hook
 ┃ ┃ ┃ ┃ ┣ 📂_utils
 ┃ ┃ ┣ 📂api
 ┃ ┃ ┃ ┣ 📂channel
 ┃ ┃ ┃ ┃ ┣ 📂(home)
 ┃ ┃ ┃ ┃ ┣ 📂existing-id
 ┃ ┃ ┃ ┃ ┣ 📂id
 ┃ ┃ ┃ ┃ ┗ 📂[id]
 ┃ ┃ ┃ ┃ ┃ ┣ 📂info
 ┃ ┃ ┃ ┃ ┃ ┣ 📂resource
 ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂documents
 ┃ ┃ ┃ ┃ ┃ ┃ ┣ 📂media
 ┃ ┃ ┃ ┃ ┃ ┃ ┗ 📂notices
 ┃ ┃ ┃ ┃ ┃ ┣ 📂update-active-at
 ┃ ┃ ┃ ┃ ┃ ┗ 📂users
 ┃ ┃ ┃ ┣ 📂channel-user
 ┃ ┃ ┃ ┣ 📂channels
 ┃ ┃ ┃ ┃ ┗ 📂(home)
 ┃ ┃ ┃ ┣ 📂chat
 ┃ ┃ ┃ ┃ ┗ 📂[id]
 ┃ ┃ ┃ ┃ ┃ ┣ 📂latest-notice
 ┃ ┃ ┃ ┣ 📂contact
 ┃ ┃ ┃ ┣ 📂get-participant-token
 ┃ ┃ ┃ ┣ 📂signup
 ┃ ┃ ┃ ┃ ┣ 📂emai
 ┃ ┃ ┃ ┃ ┗ 📂kakao
 ┃ ┃ ┃ ┣ 📂storage
 ┃ ┃ ┃ ┣ 📂supabase-storage-profile
 ┃ ┃ ┃ ┣ 📂todo
 ┃ ┃ ┃ ┣ 📂workspace
 ┃ ┃ ┃ ┃ ┗ 📂[id]
 ┃ ┃ ┃ ┃ ┃ ┗ 📂users
 ┃ ┃ ┃ ┃ ┃ ┃ ┗ 📂search
 ┃ ┃ ┃ ┣ 📂workspace-list
 ┃ ┃ ┃ ┣ 📂workspace-user
 ┃ ┃ ┃ ┗ 📂workspace-userlist
 ┃ ┣ 📂assets
 ┃ ┣ 📂components
 ┃ ┣ 📂constants
 ┃ ┣ 📂icons
 ┃ ┣ 📂providers
 ┃ ┣ 📂services
 ┃ ┣ 📂store
 ┃ ┣ 📂styles
 ┃ ┣ 📂types
 ┃ ┣ 📂utils
 ┃ ┃ ┣ 📂cookie
 ┃ ┃ ┣ 📂middleware
 ┃ ┃ ┣ 📂supabase
 ┃ ┣ 📜instrumentation.ts
 ┃ ┗ 📜middleware.ts
 ┣ 📂supabase

🔗참고 사이트

• Notion: 팀 노션 방문하기

• Notion: 브로셔 확인하기