나도 배운걸 활용하고 싶다

배운걸 활용하고 싶은데 고민이신가요?
여러 사람들과 체계적으로 스터디를 관리하고 싶으신가요?
걱정마세요. 당신이 원하는 스터디 Ludo가 찾아드릴게요.

📎 Ludo 바로가기

💡 프로젝트 소개

스터디 지원부터 참여, 관리까지
누구나 쉽고 빠르게 지속 가능한 스터디에 참여할 수 있는 스터디 플랫폼입니다.

🎬 프로젝트 진행상황

✔︎ 진행기간 : 2023.12.15 ~ 진행 중

✔︎ MVP 구현 후, 1차 유저 테스트 : 2024.3.26~2024.3.30

📋 프로젝트 자료

🖌 기획

📓 유저 스토리

📓 페이지 Flow Chart

📓 브레인 스토밍

📓 IA(정보 구조도)

📄 기능 명세

📓 API 설계서

📓 페이지 기능명세서

🎨 디자인

📓 페이지 디자인

📓 디자인 시스템

🛠 사용한 기술 스택

🛠 주요 기능

✔︎ 스터디 모집공고 조회

메인페이지에서 원하는 카테고리의 스터디 모집공고를 확인할 수 있어요.

메인페이지에서 스터디 조회

모집공고 모아보기 페이지에서는 필터를 통해 원하는 스터디 모집공고를 확인할 수 있어요.

모집공고 모아보기 페이지에서 필터링을 통한 스터디 모집공고 조회

✔︎ 스터디 지원

스터디 모집공고 상세 페이지에서 원하는 스터디 모집공고에 지원할 수 있어요.

스터디 지원

✔︎ 스터디 생성

로그인한 사용자는 스터디 생성페이지에서 스터디를 생성할 수 있어요.

스터디 생성

✔︎ 스터디 모집공고 생성

생성된 스터디에 대한 모집공고를 생성할 수 있어요.

스터디 모집공고 생성

✔︎ 마이페이지

마이페이지에서 참여중인 스터디, 지원한 스터디, 진행 완료된 스터디를 확인할 수 있어요.

마이페이지

⚙️ 개발환경 설정

1. 의존성 모듈 설치

yarn install

2. Local 개발환경에서의 https 설정

🔨 인증서를 생성하는 도구인 mkcert 설치

Mac OS
```
  brew install mkcert
```
Windows
```
  choco install mkcert
```

🔨 인증서 생성

로컬을 인증된 발급 기관으로 추가
```
  mkcert --install
```
인증서 생성
```
  mkcert local.ludoapi.store
```

생성된 local.ludoapi.store.pem, local.ludoapi.store-key.pem 키를 루트의 cert 폴더로 이동

ludo-frontend
└── cert                         # 인증서 key를 보관하는 폴더
    └── local.ludoapi.store.pem
    └── local.ludoapi.store-key.pem

3. .env 설정

VITE_MOCK_API_URL = Mock API Endpoint
VITE_BASE_API_URL = Base API Endpoint

4. 개발환경 실행

Mac OS
```
  yarn start:mac 
```
Windows
```
  yarn start:windows
```

5. Storybook 실행

yarn storybook

📁 Directory Structure

ludo-frontend
├── .github                         # Feature, PR, Bug template
├── .husky                          # pre-commit hook
├── public                          # public
└── src
    ├── Apis                        # api 호출 Function
    ├── Assets                      # resoucres
    ├── Components                  # 페이지를 구성하는 components           
    ├── Constants                   # api, message, queryStirng, route 및 공통적으로 사용되는 constants                      
    ├── Hooks                       # Custom Hooks                        
    ├── Layout                      # 프로젝트 뼈대를 구성하는 Layout                         
    ├─- Mocks                       # MSW를 활용한 Mock data, handler                         
    ├── Pages                       # Pages     
    ├── Router                      # Routes config
    ├── Providers                   # Login, Query Provider                          
    ├── Shared                      # 공통으로 사용되는 값 및 Dummy data                          
    ├── Store                       # Zustand를 사용한 전역 Store                         
    ├── Styles                      # Global Style                         
    ├── Types                       # 프로젝트 전반에 걸쳐 사용되는 Type 정의                         
    ├── Utils                       # date, axios 관련 util 함수

Files

README.md

Latest commit

History