나도 배운걸 활용하고 싶다

배운걸 활용하고 싶은데 고민이신가요?
여러 사람들과 체계적으로 스터디를 관리하고 싶으신가요?
걱정마세요. 당신이 원하는 스터디 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 함수

Name		Name	Last commit message	Last commit date
Latest commit History 879 Commits
.github		.github
.husky		.husky
.storybook		.storybook
public		public
src		src
.eslintignore		.eslintignore
.eslintrc.cjs		.eslintrc.cjs
.gitignore		.gitignore
.node-version		.node-version
.prettierignore		.prettierignore
.prettierrc.cjs		.prettierrc.cjs
README.md		README.md
index.html		index.html
jest.config.ts		jest.config.ts
jest.setup.ts		jest.setup.ts
netlify.toml		netlify.toml
package-lock.json		package-lock.json
package.json		package.json
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
vite.config.ts		vite.config.ts
yarn.lock		yarn.lock

Ludo-SMP/ludo-frontend

Folders and files

Latest commit

History

Repository files navigation