Coding Cherry

항해99 12기 1조 클론코딩 👨‍💻

기간 ⏰

2023.03.03 ~ 23.03.09  

팀원 😀

팀원	스택	팀원구분	깃허브
이한결	프론트엔드	팀장	Tbug-debug
음지훈	프론트엔드	팀원	JiHun-yam
권도민	프론트엔드	팀원	9mean2
유영우	백엔드	팀장	Heukwu
나도관	백엔드	팀원	DOGWANNA
김정규	백엔드	팀원	kimregular
강민규	백엔드	팀원	Kimchi_person

FE 폴더구조 ⚒

📦src  
 ┣ 📂asset  
 ┃ ┣ 📜DataBase.png  
 ┃ ┣ 📜Spinner.gif  
 ┃ ┣ 📜codingcherrylogo.png  
 ┃ ┣ 📜explain.png  
 ┃ ┣ 📜footerimage.png  
 ┃ ┣ 📜mainpagebanner.png  
 ┃ ┣ 📜mainpagedesign31.png  
 ┃ ┗ 📜tablet.png  
 ┣ 📂components  
 ┃ ┣ 📂Mypage  
 ┃ ┃ ┗ 📜MyinfoEdit.jsx  
 ┃ ┣ 📜Aboutmymodal.jsx  
 ┃ ┣ 📜App.js  
 ┃ ┣ 📜Button.jsx  
 ┃ ┣ 📜Checkout.jsx  
 ┃ ┣ 📜Footer.jsx  
 ┃ ┣ 📜Header.jsx  
 ┃ ┣ 📜HomeCateogry.jsx  
 ┃ ┣ 📜ListContainer.jsx  
 ┃ ┣ 📜Loading.js  
 ┃ ┣ 📜Modallogin.jsx  
 ┃ ┗ 📜UserListContainer.jsx  
 ┣ 📂pages  
 ┃ ┣ 📜Curriculum.jsx  
 ┃ ┣ 📜Detail.jsx  
 ┃ ┣ 📜Fixcurriculum.jsx  
 ┃ ┣ 📜Home.jsx  
 ┃ ┣ 📜Mypage.jsx  
 ┃ ┣ 📜Notfound.jsx  
 ┃ ┣ 📜Registration.jsx  
 ┃ ┗ 📜Signup.jsx  
 ┣ 📂redux  
 ┃ ┣ 📂config  
 ┃ ┃ ┗ 📜configStore.jsx  
 ┃ ┗ 📂module  
 ┃ ┃ ┣ 📜addReview.js  
 ┃ ┃ ┣ 📜deleteCurriculum.js  
 ┃ ┃ ┣ 📜deleteReview.js  
 ┃ ┃ ┣ 📜editReview.js  
 ┃ ┃ ┣ 📜fixCurriculum.js  
 ┃ ┃ ┣ 📜getCurriculum.js  
 ┃ ┃ ┣ 📜getDetailCurriculum.js  
 ┃ ┃ ┣ 📜infinitiScroll.js  
 ┃ ┃ ┣ 📜login.js  
 ┃ ┃ ┣ 📜mymodal.js  
 ┃ ┃ ┣ 📜postLogin.js  
 ┃ ┃ ┣ 📜postRegisterCourse.js  
 ┃ ┃ ┣ 📜registration.js  
 ┃ ┃ ┣ 📜signup.js  
 ┃ ┃ ┣ 📜updateUserInfo.js  
 ┃ ┃ ┗ 📜userCurriculum.js  
 ┣ 📂router  
 ┃ ┗ 📜router.jsx  
 ┣ 📂style  
 ┃ ┣ 📜Globalstyles.js  
 ┃ ┣ 📜Home.js  
 ┃ ┣ 📜resetcss.js  
 ┃ ┗ 📜theme.js  
 ┣ 📂util  
 ┃ ┣ 📜HandleToken.js  
 ┃ ┣ 📜axiosbase.js  
 ┃ ┗ 📜token.js  
 ┣ 📜App.css  
 ┣ 📜index.css  
 ┗ 📜index.js

BE 폴더구조 ⚒

📦cherrycoding
 ┣ 📂config
 ┃ ┣ 📜SecurityConfig.java
 ┃ ┗ 📜SwaggerConfig.java
 ┣ 📂controller
 ┃ ┣ 📜EnrollController.java
 ┃ ┣ 📜LectureController.java
 ┃ ┣ 📜ReviewController.java
 ┃ ┗ 📜UserController.java
 ┣ 📂dto
 ┃ ┣ 📜CurriculumResponseDto.java
 ┃ ┣ 📜DetailResponseDto.java
 ┃ ┣ 📜LectureRequestDto.java
 ┃ ┣ 📜LectureResponseDto.java
 ┃ ┣ 📜LoginRequestDto.java
 ┃ ┣ 📜LoginResponseDto.java
 ┃ ┣ 📜MainResponseDto.java
 ┃ ┣ 📜ResponseDto.java
 ┃ ┣ 📜ReviewRequestDto.java
 ┃ ┣ 📜ReviewResponseDto.java
 ┃ ┣ 📜SignupRequestDto.java
 ┃ ┗ 📜UserRequestDto.java
 ┣ 📂entity
 ┃ ┣ 📜Enroll.java
 ┃ ┣ 📜Lecture.java
 ┃ ┣ 📜Review.java
 ┃ ┣ 📜TimeStamped.java
 ┃ ┣ 📜User.java
 ┃ ┗ 📜UserRoleEnum.java
 ┣ 📂exception
 ┃ ┣ 📜CustomException.java
 ┃ ┣ 📜ErrorCode.java
 ┃ ┗ 📜GlobalExceptionHandler.java
 ┣ 📂jwt
 ┃ ┣ 📜JwtAuthFilter.java
 ┃ ┗ 📜JwtUtil.java
 ┣ 📂repository
 ┃ ┣ 📜EnrollRepository.java
 ┃ ┣ 📜LectureRepository.java
 ┃ ┣ 📜ReviewRepository.java
 ┃ ┗ 📜UserRepository.java
 ┣ 📂s3
 ┃ ┣ 📜AwsS3Config.java
 ┃ ┗ 📜S3Uploader.java
 ┣ 📂security
 ┃ ┣ 📜UserDetailsImpl.java
 ┃ ┗ 📜UserDetailsServiceImpl.java
 ┣ 📂service
 ┃ ┣ 📜EnrollService.java
 ┃ ┣ 📜LectureService.java
 ┃ ┣ 📜ReviewService.java
 ┃ ┗ 📜UserService.java
 ┗ 📜CherryCodingApplication.java

View

홈페이지 View

커리큘럼

마이페이지

1. 내강의

2. 내정보 설정

상세페이지

• 관리자 일떄

• 일반 회원일때

수강 신청하기를 누르면 토스페이먼트로 이동

• 결제 하기

Footer

스택

프론트엔드 스택 ⚒

  

프론트엔드 라이브러리

• react-router-dom
• react-hook-form
• js-cookie
• react-icons
• browser-image-compression (이미지용량 줄여줌)
• tosspayments/payment-widget-sdk (결제기능)
• react-intersection-observer (무한스크롤)

백엔드 스택 ⚒

      

팀노션 📚

https://www.notion.so/1-e342bb96f7f242e5975eb437798bf10d#beedbf4fd9594b62bf5b66bea008bd7f

Feat-기능 👻

• 회원가입 (유저 or 관리자)
• 로그인
• 강좌 조회
• 강좌 리뷰
• 강좌 수강
• 강좌 등록 (관리자만)
• 강좌 수정 (등록한관리자만)
• 강좌 삭제 (등록한관리자만)
• 강좌 결제 (토스 페이먼트)
• 내정보 수정
• 이미지 업로드
• 무한 스크롤
• Swagger

트러블 슈팅 ⚽

FE

무한스크롤 이전페이지 정보가 누적되는 현상

• 이전페이지 정보를 초기화시키는 함수를 만들어서 해결

GET으로 값을 가져올떄 바로 가져오지 않고 조금 시간이지나서 값이 들어오는 현상

• 옵셔널체이닝을 사용하여 문제 해결

DE

Lombok @Getter사용시, boolean 타입 is로 시작하는 변수를 사용할 경우 정상적으로 동작하지 않음

• Getter가 is~~ 로 변수를 생성하기 때문. 기본형 boolean 타입을 래퍼클래스 Boolean으로 변경

회원정보 수정 시, 적용되지 않음. JPA에서는 영속화하여 1차캐시에 저장된 엔티티에 대해서만 더티체킹이 적용된다.

• UserId에 해당하는 User 엔티티를 조회하여 영속화 한 후, 엔티티를 변경