Skip to content

yjkdev21/studyO-front

 
 

Repository files navigation

image

🚀 프로젝트 개요

StudyO는 스터디(Study)와 스튜디오(Studio)를 결합한 올인원 협업 플랫폼입니다.
스터디 모집부터 활동, 팀 프로젝트까지 복잡한 과정을 손쉽게 관리하고 팀워크를 완성할 수 있습니다.


👥 팀 소개

김환희(팀장) 김예지 백유선 윤고은 이재우 이현섭
UI/UX 디자인
스터디 그룹 관리
FullCalendar 연동
UI/UX 디자인
로그인 인증
계정 관리
멤버 승인/관리
UI/UX 디자인
스터디 그룹 CRUD
AWS S3 연동
썸네일 관리
회원가입 시스템
필터링 기능
추천 시스템
마이페이지
프로필 수정
공용 컴포넌트
AWS 인프라
CI/CD 구축
홍보글 CRUD

✨ 주요 기능

📚 스터디 관리

  • 스터디 모집: 지역과 주제별 필터를 통한 효율적인 스터디 탐색
  • 그룹 관리: 스터디장 권한 기반 멤버 승인/거절 시스템
  • 일정 관리: FullCalendar를 활용한 직관적인 캘린더 인터페이스

👤 사용자 경험

  • 간편한 시작: 쉬운 가입과 로그인 과정
  • 개인화: 마이페이지에서 프로필 관리 및 활동 현황 확인
  • 실시간 소통: 스터디 후 팀 프로젝트로 자연스러운 전환

🎯 협업 도구

  • 파일 관리: AWS S3 기반 안전한 파일 업로드/다운로드
  • 진행 관리: 개인 할 일 관리 및 진척 상황 확인
  • 홍보 시스템: 풍부한 텍스트 에디터를 통한 스터디 홍보

🛠 기술 스택

Environment

Visual Studio Code IntelliJ IDEA Git GitHub

Frontend

Flutter React React Router

Backend

Java Spring Boot MyBatis Lombok

Database

Oracle SQL

Infrastructure

AWS Amazon EC2 Amazon S3

Design & Cooperation

Figma

🏗 시스템 아키텍처

┌─────────────┐    ┌──────────────┐    ┌─────────────┐
│             │    │              │    │             │
│   React     │◄──►│ Spring Boot  │◄──►│ Oracle 11g  │
│  Frontend   │    │   Backend    │    │  Database   │
│             │    │              │    │             │
└─────────────┘    └──────────────┘    └─────────────┘
       │                   │                   
       │                   │                   
       ▼                   ▼                   
┌─────────────┐    ┌──────────────┐           
│             │    │              │           
│   AWS S3    │    │   AWS EC2    │           
│File Storage │    │    Server    │           
│             │    │              │           
└─────────────┘    └──────────────┘           

📂 프로젝트 구조

Frontend (React)

react-study-o/
├── public/
│   ├── index.html
│   └── favicon.ico
├── src/
│   ├── components/     # 재사용 컴포넌트
│   ├── pages/         # 페이지 컴포넌트
│   ├── utils/         # 유틸리티 함수
│   ├── App.js         # 메인 앱 컴포넌트
│   └── index.js       # 엔트리 포인트
├── package.json
└── README.md

Backend (Spring Boot)

tjspring/
├── src/main/java/com/tj/spring/
│   ├── admin/         # 관리자 기능
│   ├── auth/          # 인증/인가
│   ├── study/         # 스터디 관련
│   ├── user/          # 사용자 관리
│   └── common/        # 공통 기능
├── src/main/resources/
│   ├── mybatis/mapper/  # MyBatis 매퍼
│   ├── static/          # 정적 파일
│   └── application.properties
└── pom.xml

🚀 시작하기

설치 및 실행

Frontend 실행

# 레포지토리 클론
git clone https://github.com/hyunsupLee/react-study-o.git
cd react-study-o

# 의존성 설치
npm install

# 개발 서버 실행
npm run dev

Oracle DB 접속정보 설정

  1. 인텔리제이 우상단 configuration Edit
Image

Oracle 환경변수 설정

  1. Environment variables 환경변수에 DB 정보 설정
Image

Backend 실행

# 레포지토리 클론
git clone https://github.com/hyunsupLee/tjspring.git
cd tjspring

🎯 핵심 기능 상세

1. 권한 기반 스터디 관리

  • 스터디장만 캘린더 등록/수정/삭제 권한
  • 멤버 승인/거절 시스템
  • 그룹별 권한 분리

2. 실시간 파일 관리

  • AWS S3 연동을 통한 안전한 파일 저장
  • 썸네일 자동 생성 및 최적화
  • 파일 업로드/다운로드 진행률 표시

3. 직관적인 일정 관리

  • FullCalendar 라이브러리 활용
  • 드래그 앤 드롭으로 일정 수정
  • 개인/그룹 일정 통합 관리

📊 개발 프로세스

Agile 방법론 적용

  • 4주 스프린트: 기획 → 개발 → 테스트 → 배포
  • 일일 스탠드업: 매일 진행 상황 공유
  • 스프린트 리뷰: 주간 피드백 및 개선사항 도출

Git 워크플로우

  • 브랜치 전략: 개인 브랜치 → Main 브랜치
  • CI/CD: GitHub Actions를 통한 자동 배포

🎉 프로젝트 성과

기술적 성과

  • 풀스택 개발: 6명 모든 팀원이 각자 담당 기능을 프론트엔드부터 백엔드까지 완전 구현
  • 클라우드 배포: AWS 인프라를 활용한 실제 서비스 배포
  • 팀 협업: Git을 활용한 6명 규모의 효율적인 협업 경험

사용자 가치

  • 편의성: 스터디 모집부터 활동까지 원스톱 지원
  • 효율성: 직관적인 UI/UX로 학습 관리 시간 단축
  • 확장성: 스터디에서 프로젝트로 자연스러운 전환

StudyO - 모든 스터디의 시작
Study Together, Grow Together

README ⓒ 김환희 · 김예지 · 백유선

About

React 프론트엔드와 Spring Boot REST API 연동 프로젝트

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 78.1%
  • CSS 21.6%
  • Other 0.3%