나도 배운걸 활용하고 싶다

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

📎 Ludo 바로가기

🧑‍🎨 Ludo 소개 페이지

🗂 Ludo Backend 저장소

💡 프로젝트 소개

누구나 쉽고 빠르게 지속 가능한 스터디에 참여할 수 있는 플랫폼입니다. 스터디 지원부터 참여, 관리까지 모든 과정을 한 곳에서 통합적으로 관리해 지속 가능한 학습 환경을 제공합니다.

🎬 프로젝트 타임라인

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

• ✔︎ 1차 마일스톤 : 2023.12.15 ~ 2024.03.15

  • ✔︎ 1차 유저 테스트 : 2024.03.26 ~ 2024.03.30 [21건]

• ✔︎ 2차 마일스톤 : 2024.04.02 ~ 2024.07.11

  • ✔︎ 2차 유저 테스트 : 2024.05.04 ~ 2024.05.11 [9건] . 랜딩 페이지 [링크]

  • ✔︎ 3차 유저 테스트 : 2024.07.04 ~ 2024.07.11 [32건]

• ✔︎ 3차 마일스톤 : 2024.07.16 ~ 2024.09.03

📋 프로젝트 자료

🖌 기획

📓 유저 스토리

📓 페이지 Flow Chart

📓 브레인 스토밍

📓 IA(정보 구조도)

📄 기능 명세

📓 API 설계서

📓 페이지 기능명세서

🎨 디자인

📓 페이지 디자인

📓 디자인 시스템

🛠 기술 스택

FE

Collaboration

🔨 주요 기능 및 특장점

🛠 아키텍처

⚙️ 개발환경 설정

1. 의존성 모듈 설치

yarn install

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

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

• Mac OS

    brew install mkcert
  

• Windows

    choco install mkcert
  

🔨 인증서 생성

• 로컬을 인증된 발급 기관으로 추가

    mkcert --install
  

• 인증서 생성

    mkcert local.ludo.study
  

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

  ludo-frontend
  └── cert                         # 인증서 key를 보관하는 폴더
      └── local.ludo.study.pem
      └── local.ludo.study-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
├── .storybook                      # Storybook setting
├── 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 함수                       

🙋🏻‍♂️ FE 팀원

성현(Hyun)

효신(Claire)

현의(Abiria)