🔗 동철 코딩 링크

<aside> <img src="attachment:a2de88f0-d7fe-4440-93ae-99e3ca1d7187:cropped2.png" alt="attachment:a2de88f0-d7fe-4440-93ae-99e3ca1d7187:cropped2.png" width="40px" />

Service Link : https://www.dongcheolcoding.life/

Github Link : https://github.com/DongCheol-Coding

FrontEnd: https://github.com/East-Iron/ei_frontend

BackEnd: https://github.com/East-Iron/ei_backend

</aside>

📋 프로젝트 관련 문서

<aside> 📖

프로젝트 기획

API 명세서

✅ Swager UI

강의 생성API 프론트엔드 연결 참고자료

📌 카카오페이 결제 연동 정리 (React + Spring Boot 백엔드)

카카오페이 흐름

durationSec 프론트엔드

</aside>

🧑‍🧑‍🧒‍🧒 팀원

<aside> 🙋‍♂️

이동현(FrontEnd)

깃허브: https://github.com/soohofather

기술 슬라이드: https://docs.google.com/presentation/d/18P28rdpdo9f2oW-hrUWaJ1T8JO0amZMDPEHZ1zLLr8Y/edit?usp=sharing

하민철(BackEnd)

깃허브: https://github.com/Mincheol-Ha

기술 슬라이드: https://docs.google.com/presentation/d/1kQGSV7yhWl9K-MK0XthJyIhMG43EVJL5PhiigVL-ZdU/edit?slide=id.p#slide=id.p

팀 OKR Link

https://docs.google.com/spreadsheets/d/1Mkt41xtLCJvQTfMI8wboeEgElSZT53MENJVzMW5MdL8/edit?usp=sharing

</aside>

📌 프로젝트 목표

현재 참여중인 팀 프로젝트를 제공하는 슈퍼코딩의 홈페이지를 클론코딩하며 아래의 경험들을 학습한다.

1. 기술 스택 숙련
   • 프론트엔드 : JavaScript + React
   • 백엔드 : Java + Spring Boot
2. 프론트엔드와 백엔드가 RESTful 원칙에 따라 API 설계 및 구현한다.
3. 회원가입, 로그인 과정 구현
   • Email과 비밀번호를 이용 하거나 또는 카카오톡을 로그인을 사용한 회원가입과 로그인
   • Email 회원가입시 해당 Email로 인증 메일을 보내 Email로 인증 시 회원가입 처리
   • Email과 비밀번호를 이용한 회원가입시 비밀번호 변경
   • 단, 카카오 톡을 이용한 회원가입인 경우 비밀번호 변경 불가
   • 회원 탈퇴
   • 로그인은 JWT 토큰을 발행하여, HttpOnly Cookie로 전달하는 방법을 사용
4. 일반 유저와 관리자(Admin)의 권한 구분
   • 관리자(Admin)인 경우에만 강의 및 강의 영상 등록
   • 관리자(Admin)인 경우 전체 회원 목록 조회 및 회원 탈퇴 처리
5. 강의 서비스
   • 유저는 결제한 강의만 시청할 수 있다.
   • 강의 결제시 카카오 페이 이용이 가능하다
   • 유저가 시청한 강의 영상에 대하여 진도율을 볼 수 있다.
   • 각 강의에 대하여 각 강의 영상의 진도율을 계산하여, 해당 강의의 전체 진도율도 볼 수 있다.

🛠️ 기술스택

프론트엔드

백엔드

💁🏻‍♀️ 유저 사용 구조도

🧑🏻‍🏫 프론트엔드 구조도

🧑🏻‍💻 백엔드 구조도

ERD