Skip to content

lucykim05/rock-FE

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 

Repository files navigation

우아한 테크 코스 4주차 & 5주차 오픈 미션

목차

  1. 프로젝트 개요
  2. 팀원 구성
  3. 기술 스택
  4. 프로젝트 문서
  5. 주요 기능
  6. 플로우 차트

🎯 프로젝트 개요

항목 내용
프로젝트명 스터디 헬퍼 봇 & 웹 대시보드
기간 2025.11.4 ~ 2025.11.25
담당 김희주, 이여빈
목적 DiscordJS 기반 스터디 헬퍼 봇을 개발하여 서버별 맞춤 기능과 출석/공부 시간 기록 기능을 제공하며,
사용자 개인의 데이터 확인용 웹 대시보드 구축 및 배포

📖 r0ck:FE 이야기

📌 주제 선정

오픈 미션에 들어가며 저희는 프론트엔드의 가장 중요한 언어인 Javascript를 이용해 색다른 경험을 해보고자 하는 공통된 의견을 갖고 있습니다. 이에 다양한 고민들을 하다 문뜩 생각난 내용은 1~3주차 미션을 진행하며 디스코드 음성채널을 이용하여 모각코(모두 각자 코딩)을 진행했었는데 이 때 공부 시간을 측정할 수 있는 기능이 있으면 좋겠다는 생각이었습니다. 디스코드 봇을 프로그래밍할 때 주로 사용하는 언어는 javascript과 python이 있었고, 목표였던 javascript의 색다른 경험에 어울리는 프로젝트가 될 것 같다는 생각이 들었습니다.
처음 생각한 기능은 공부시간측정이었기에 함께 테스트를 해보며 공부도 같이 진행할 동료가 있으면 더욱 좋을 것 같다는 생각이 들었습니다. 또한 3주 동안 미션을 진행하며 코드 리뷰에서 많은 영향을 받았고, 실제로 리뷰를 통해 얻은 인사이트가 많았기에 프로젝트를 진행하며 서로에게 코드 리뷰를 원활하게 진행하면 성장에 더욱 도움이 되고, 다른 사람의 코드를 이해할 수 있는 능력 또한 향상시킬 수 있을 것이라는 생각이 들었습니다.

이에 코드 리뷰를 많이 주고 받았으며, 모각코에서 함께 작업을 한 경험이 있는 김희주, 이여빈 이렇게 두 사람이 함께 프로젝트를 진행하게 되었습니다.

📌 프로젝트 소개

돌쇠는 디스코드를 기반으로 함께 스터디를 진행하는 사람들을 위해 만들어진 디스코드 봇입니다. 옛 이야기에는 늘 마님들의 수발을 옆에서 들어주는 '돌쇠'가 등장했습니다. 현대에 와서는 그 역할이 디지털 조수로 바뀌어, 공부를 하는 마님들에게 도움을 주는 봇이 되었습니다. 이러한 돌쇠의 이름에서 탄생한 프로젝트 명은 r0ck:FE 입니다. rock(돌)Fe(쇠)를 결합한 이름으로, 팀원 2명이 모두 프론트엔드(FE) 지원자라는 점과, 'rock'을 발음했을 때 '락'이라 즐겁게 스터디를 즐긴다는 의미까지 담고 있습니다. 옛날 돌쇠가 마님을 도왔듯, r0ck:FE는 현대의 스터디 참여자들을 디지털 방식으로 즐겁게 활동할 수 있도록 돕는 역할을 수행합니다.


📗 프로그램 실행 방법

디스보드 봇 설치

  1. 원하는 디스코드 서버에 돌쇠 초대
  2. 디스코드에서 /도움말 명령어 실행
  3. /세팅 공부채널설정 명령어로 공부시간을 측정할 음성채널 설정
  4. /세팅 출석채널설정 명령어로 출석을 감지할 수 있는 채널 설정
  5. (선택) /세팅 출석시간설정 명령어로 출석 알람 설정

(로컬 실행 시) 기초 패키지 설정

  1. 로컬에 clone repository 진행
  2. 각 폴더(rock-FE, dashboard) 진입
  3. 터미널에 npm install입력하여 라이브러리 각각 적용
  4. .env 설정 후 실행 (필요 시 관리자에게 문의)

🧑‍🤝‍🧑 팀원 구성


이여빈

김희주
- 디스코드 봇 생성
- 개발 환경 초기 설정 및 프로젝트 세팅
- 공부 시간 기록 및 부가 명령어 구현
- 로고 & 봇 디자인
- 사용자 인증 및 데이터 연동 구현
- DB 설계 및 구축
- 리드미, 노션 문서화
- 출석 및 봇 세팅 명령어 구현
- UI 컴포넌트 구현 및 웹 레이아웃 구축
- 봇 & 대시보드 배포

🛠️ 기술 스택

개발 환경

VS Code JavaScript Node.js

라이브러리

discord.js node-schedule React ReactDOM Vite React Calendar

데이터베이스

PostgreSQL Supabase

배포 & 협업

Koyeb Vercel Git Notion


📑 프로젝트 문서

repo notion
Repository Notion

🖥️ 주요 기능

봇 세팅 (관리자 전용)


출석 채널 설정
출석 알람 시 설정
공부 음성채널 설정

출석


출석 체크 출석 현황
출석 순위 출석 알람
attendance alarm

음성 채널 입퇴장


음성채널 입장 음성채널 퇴장
KakaoTalk_20251118_170802876 음성채널_퇴장

공부 시간 측정 및 통계


측정 시간 DM 전송

명령어 입력 칸 공부시간 명령어 별 통계
공부시간_명령어_실행

부가 명령어


인사 대시보드
오늘의 유머 백준 문제 추천

대시보드

대시보드 링크
대시보드 바로가기


서비스 화면


📉 봇 플로우 차트

출석
출_다이어그램
공부 시간 측정
공부시간측정_다이어그램
공부 시간 통계
공부시간통계_다이어그램

About

우아한 테크 코스 4주차 & 5주차 오픈 미션

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 87.6%
  • CSS 7.0%
  • TypeScript 5.0%
  • HTML 0.4%