-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
0f138f5
commit 18fa658
Showing
1 changed file
with
227 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,227 @@ | ||
| # MEME_SERVICE | ||
| # MEME-SERVICE | ||
|
|
||
| <div align="center"> | ||
|
|
||
| </div> | ||
| <br> **UMC 5기 프로젝트** <br/> **개발기간: 2024.01 ~ 진행중** | ||
|
|
||
| ## 배포 주소 | ||
|
|
||
| > **개발 버전** : 링크예시 <br> | ||
| > **백엔드 서버** : [http://voluntain.cs.skku.edu:2223/](http://voluntain.cs.skku.edu:2223/)<br> | ||
| ## 팀 소개 | ||
|
|
||
| | 임재영 | 김다은 | 김승엽 | 박선우 | | ||
| | :------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | | ||
| | <img src="https://avatars.githubusercontent.com/u/55044278?v=4" width=90px alt="제이스(임재영)"/> | <img src="https://avatars.githubusercontent.com/u/122000839?v=4" width=90px alt="돌리(김다은)"/> | <img src="https://avatars.githubusercontent.com/u/61226778?v=4" width=90px alt="요비(김승엽)"/> | <img src="https://avatars.githubusercontent.com/u/52268188?v=4" width=90px alt="썬(박선우)"/> | ||
| | [@parkjiye](https://github.com/parkjiye) | [@ChaeyeonSeo](https://github.com/ChaeyeonSeo) | [@hyunjeong408](https://github.com/hyunjeong408) | | ||
| | 상명대학교 컴퓨터과학과 | 숭실대학교 컴퓨터공학과 | 상명대학교 컴퓨터과학과 | 경희대학교 컴퓨터공학과 | | ||
|
|
||
| ## 프로젝트 소개 | ||
|
|
||
| ## 시작 가이드 | ||
|
|
||
| ### Requirements | ||
| For building and running the application you need: | ||
|
|
||
|
|
||
| ### Installation | ||
|
|
||
| ``` bash | ||
| $ git clone https://github.com/Voluntain-SKKU/Voluntain-2nd.git | ||
| $ cd Voluntain-2nd | ||
| ``` | ||
| #### Backend | ||
| ``` | ||
| $ cd strapi-backend | ||
| $ nvm use v.14.19.3 | ||
| $ npm install | ||
| $ npm run develop | ||
| ``` | ||
|
|
||
| #### Frontend | ||
| ``` | ||
| $ cd voluntain-app | ||
| $ nvm use v.14.19.3 | ||
| $ npm install | ||
| $ npm run dev | ||
| ``` | ||
|
|
||
| --- | ||
|
|
||
| ## Stacks 🐈 | ||
|
|
||
| ### Environment | ||
|  | ||
|  | ||
|  | ||
|
|
||
| ### Config | ||
|  | ||
|
|
||
| ### Development | ||
|  | ||
|  | ||
|  | ||
|  | ||
|  | ||
|  | ||
|
|
||
| ### Communication | ||
|  | ||
|  | ||
|  | ||
|
|
||
| --- | ||
| ## 화면 구성 📺 | ||
| | 메인 페이지 | 소개 페이지 | | ||
| | :-------------------------------------------: | :------------: | | ||
| | <img width="329" src="https://user-images.githubusercontent.com/50205887/208036155-a57900f7-c68a-470d-923c-ff3c296ea635.png"/> | <img width="329" src="https://user-images.githubusercontent.com/50205887/208036645-a76cf400-85bc-4fa2-af72-86d2abf61366.png"/>| | ||
| | 강좌 소개 페이지 | 강의 영상 페이지 | | ||
| | <img width="329" src="https://user-images.githubusercontent.com/50205887/208038737-2b32b7d2-25f4-4949-baf5-83b5c02915a3.png"/> | <img width="329" src="https://user-images.githubusercontent.com/50205887/208038965-43a6318a-7b05-44bb-97c8-b08b0495fba7.png"/> | | ||
|
|
||
| --- | ||
| ## 주요 기능 📦 | ||
|
|
||
| ### ⭐️ 강좌 선택 및 강의 영상 시청 기능 | ||
| - Scratch, Python 2개 강좌 및 각 강좌마다 10개 가량의 강의 영상 제공 | ||
| - 추후 지속적으로 강좌 추가 및 업로드 예정 | ||
|
|
||
| ### ⭐️ 강의 관련 및 단체에 대한 자유로운 댓글 작성 가능 | ||
| - Disqus를 이용하여 강의 관련 질문이나 단체에 대한 질문 작성 가능 | ||
|
|
||
| ### ⭐️ 이어 학습하기 기능 | ||
| - Cookie 기능을 이용하여 이전에 학습했던 내용 이후부터 바로 학습 가능 | ||
|
|
||
| --- | ||
| ## 아키텍쳐 | ||
|
|
||
| ### 디렉토리 구조 | ||
| ```bash | ||
| ├── README.md | ||
| ├── package-lock.json | ||
| ├── package.json | ||
| ├── strapi-backend : | ||
| │ ├── README.md | ||
| │ ├── api : db model, api 관련 정보 폴더 | ||
| │ │ ├── about | ||
| │ │ ├── course | ||
| │ │ └── lecture | ||
| │ ├── config : 서버, 데이터베이스 관련 정보 폴더 | ||
| │ │ ├── database.js | ||
| │ │ ├── env : 배포 환경(NODE_ENV = production) 일 때 설정 정보 폴더 | ||
| │ │ ├── functions : 프로젝트에서 실행되는 함수 관련 정보 폴더 | ||
| │ │ └── server.js | ||
| │ ├── extensions | ||
| │ │ └── users-permissions : 권한 정보 | ||
| │ ├── favicon.ico | ||
| │ ├── package-lock.json | ||
| │ ├── package.json | ||
| │ └── public | ||
| │ ├── robots.txt | ||
| │ └── uploads : 강의 별 사진 | ||
| └── voluntain-app : 프론트엔드 | ||
| ├── README.md | ||
| ├── components | ||
| │ ├── CourseCard.js | ||
| │ ├── Footer.js | ||
| │ ├── LectureCards.js | ||
| │ ├── MainBanner.js : 메인 페이지에 있는 남색 배너 컴포넌트, 커뮤니티 이름과 슬로건을 포함. | ||
| │ ├── MainCard.js | ||
| │ ├── MainCookieCard.js | ||
| │ ├── NavigationBar.js : 네비게이션 바 컴포넌트, _app.js에서 공통으로 전체 페이지에 포함됨. | ||
| │ ├── RecentLecture.js | ||
| │ └── useWindowSize.js | ||
| ├── config | ||
| │ └── next.config.js | ||
| ├── lib | ||
| │ ├── context.js | ||
| │ └── ga | ||
| ├── next.config.js | ||
| ├── package-lock.json | ||
| ├── package.json | ||
| ├── pages | ||
| │ ├── _app.js | ||
| │ ├── _document.js | ||
| │ ├── about.js | ||
| │ ├── course | ||
| │ ├── index.js | ||
| │ ├── lecture | ||
| │ ├── newcourse | ||
| │ ├── question.js | ||
| │ └── setting.js | ||
| ├── public | ||
| │ ├── favicon.ico | ||
| │ └── logo_about.png | ||
| └── styles | ||
| └── Home.module.css | ||
|
|
||
| ``` | ||
|
|
||
| <!-- | ||
| ```bash | ||
| ├── README.md : 리드미 파일 | ||
| │ | ||
| ├── strapi-backend/ : 백엔드 | ||
| │ ├── api/ : db model, api 관련 정보 폴더 | ||
| │ │ └── [table 이름] : database table 별로 분리되는 api 폴더 (table 구조, 해당 table 관련 api 정보 저장) | ||
| │ │ ├── Config/routes.json : api 설정 파일 (api request에 따른 handler 지정) | ||
| │ │ ├── Controllers/ [table 이름].js : api controller 커스텀 파일 | ||
| │ │ ├── Models : db model 관련 정보 폴더 | ||
| │ │ │ ├── [table 이름].js : (사용 X) api 커스텀 파일 | ||
| │ │ │ └── [table 이름].settings.json : model 정보 파일 (field 정보) | ||
| │ │ └─── Services/ course.js : (사용 X) api 커스텀 파일 | ||
| │ │ | ||
| │ ├── config/ : 서버, 데이터베이스 관련 정보 폴더 | ||
| │ │ ├── Env/production : 배포 환경(NODE_ENV = production) 일 때 설정 정보 폴더 | ||
| │ │ │ └── database.js : production 환경에서 database 설정 파일 | ||
| │ │ ├── Functions : 프로젝트에서 실행되는 함수 관련 정보 폴더 | ||
| │ │ │ │ ├── responses : (사용 X) 커스텀한 응답 저장 폴더 | ||
| │ │ │ │ ├── bootstrap.js : 어플리케이션 시작 시 실행되는 코드 파일 | ||
| │ │ │ │ └── cron.js : (사용 X) cron task 관련 파일 | ||
| │ │ ├── database.js : 기본 개발 환경(NODE_ENV = development)에서 database 설정 파일 | ||
| │ │ └── server.js : 서버 설정 정보 파일 | ||
| │ │ | ||
| │ ├── extensions/ | ||
| │ │ └── users-permissions/config/ : 권한 정보 | ||
| │ │ | ||
| │ └── public/ | ||
| │ └── uploads/ : 강의 별 사진 | ||
| │ | ||
| └── voluntain-app/ : 프론트엔드 | ||
| ├── components/ | ||
| │ ├── NavigationBar.js : 네비게이션 바 컴포넌트, _app.js에서 공통으로 전체 페이지에 포함됨. | ||
| │ ├── MainBanner.js : 메인 페이지에 있는 남색 배너 컴포넌트, 커뮤니티 이름과 슬로건을 포함. | ||
| │ ├── RecentLecture.js : 사용자가 시청 정보(쿠키)에 따라, 현재/다음 강의를 나타내는 컴포넌트 [호출: MainCookieCard] | ||
| │ ├── MainCookieCard.js : 상위 RecentLecture 컴포넌트에서 전달받은 props를 나타내는 레이아웃 컴포넌트. | ||
| │ ├── MainCard.js : 현재 등록된 course 정보를 백엔드에서 받아서 카드로 나타내는 컴포넌트 [호출: CourseCard] | ||
| │ └── CourseCard.js : 상위 MainCard 컴포넌트에서 전달받은 props를 나타내는 레이아웃 컴포넌트 | ||
| │ | ||
| ├── config/ | ||
| │ └── next.config.js | ||
| │ | ||
| ├── lib/ | ||
| │ └── ga/ | ||
| │ │ └── index.js | ||
| │ └── context.js | ||
| │ | ||
| ├── pages/ | ||
| │ ├── courses/ | ||
| │ │ └── [id].js : 강의 페이지 | ||
| │ ├── _app.js : Next.js에서 전체 컴포넌트 구조를 결정, 공통 컴포넌트(navbar, footer)가 선언되도록 customizing 됨. | ||
| │ ├── _document.js : Next.js에서 전체 html 문서의 구조를 결정, lang 속성과 meta tag가 customizing 됨. | ||
| │ ├── about.js : 단체 소개 페이지 | ||
| │ ├── index.js : 메인 페이지 | ||
| │ ├── question.js : Q&A 페이지 | ||
| │ └── setting.js : 쿠키, 구글 애널리틱스 정보 수집 정책 페이지 | ||
| │ | ||
| ├── public/ | ||
| │ ├── favicon.ico : 네비게이션바 이미지 | ||
| │ └── logo_about.png : about 페이지 로고 이미지 | ||
| │ | ||
| └── styles/ | ||
| └── Home.module.css | ||
| ``` | ||
| --> |