To Sea

UMC Hackathon

개발기간: 2026.01.10 pm 1:30 ~ 2026.01.11 pm 1:30

배포 주소 : [https://web-hazel-nine-45.vercel.app/]

웹개발팀 소개

박지예	서채연	이현정
@parkjiye	@ChaeyeonSeo	@hyunjeong408
성균관대학교 소프트웨어학과 4학년	성균관대학교 소프트웨어학과 4학년	성균관대학교 소프트웨어학과 4학년

프로젝트 소개

시작 가이드

Requirements

Installation

$ 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

---

화면 구성 📺

메인 페이지	소개 페이지
강좌 소개 페이지	강의 영상 페이지

---

주요 기능 📦

⭐️ 강좌 선택 및 강의 영상 시청 기능

• Scratch, Python 2개 강좌 및 각 강좌마다 10개 가량의 강의 영상 제공
• 추후 지속적으로 강좌 추가 및 업로드 예정

⭐️ 강의 관련 및 단체에 대한 자유로운 댓글 작성 가능

• Disqus를 이용하여 강의 관련 질문이나 단체에 대한 질문 작성 가능

⭐️ 이어 학습하기 기능

• Cookie 기능을 이용하여 이전에 학습했던 내용 이후부터 바로 학습 가능

---

아키텍쳐

디렉토리 구조

├── 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