 |
 |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 김희연 | 김진아 | 김채연 | 윤혜진 | 이예은 | 오세민 | 전효진 |
프로젝트 총괄, 결제 서비스 구현 |
콘텐츠 서비스 구현 |
SNS 서비스 구현 |
JWT 이용한 이메일&카카오 로그인 및 지도 화면 구현 |
구독 서비스 구현 |
검색 서비스 구현 |
공지 서비스 구현 |
- Spring Security 기반으로 사용자 인증을 처리합니다.
- 로그인 시 사용자 인증 정보로 Access Token / Refresh Token 생성합니다.
- Access Token: 클라이언트에서 요청 시 Authorization 헤더에 Bearer 방식으로 전달
- Refresh Token: 서버 DB에 저장 및 만료 시 토큰 재발급 요청 처리
- JWT 유효성 검사는 JwtAuthenticationFilter에서 처리합니다. -인증된 사용자 정보는 SecurityContextHolder에 저장되어 전역 인증 처리 가능
- 카카오 OAuth 2.0 인가 코드를 통해 Access Token 발급 (RestTemplate 또는 WebClient 사용)받습니다.
- 발급받은 카카오 Access Token으로 사용자 프로필 요청 (카카오 API)합니다.
- 이메일 기준으로 기존 회원 여부 판단합니다.
- 이후 JWT 토큰 발급 방식은 이메일 로그인과 동일하게 적용합니다.
- 회원 정보를 조회하고 수정할 수 있습니다.
- 회원의 역할이 창작자인지 일반 회원인지 구분해 제공되는 서비스를 다르게 하엿습니다.
- Toast UI Editor을 이용해 콘텐츠 본문을 작성합니다.
- 마크다운 형식으로 작성할 수 있고 일반 텍스트 형식으로도 작성할 수 있습니다.
- 사진이 포함된 게시물을 생성할 수 있습니다.
- AWS S3 스토리지 서비스를 이용하여 이미지 업로드를 구현하였습니다.
- S3에 이미지를 저장하고 URL을 반환받아 DB에 저장합니다.
- 이미지가 포함된 콘텐츠를 조회할 경우 DB에 저장된 URL을 통해 S3 스토리지에 저장된 이미지를 불러올 수 있습니다.
- 특정 콘텐츠는 창작자가 구독자 전용으로 설정할 수 있습니다.
- 창작자를 구독한 일반 회원만 열람할 수 있습니다.
- 구독 전용 콘텐츠일 경우 다이아몬드 표시를 추가하여 사용자가 구분할 수 있도록 하였습니다.
- 회원의 구독 요청에 따른 적절한 결제 요청을 보냅니다.
- 창작자 구독 여부에 따라 공지 기능을 활용할 수 있습니다.
- 창작자에 대한 구독 여부에 따라 열람할 수 있는 콘텐츠에 제한을 둡니다.
- 구독을 해지한 후 일주일 이내 재구독할 수 있습니다.
- PortOne SDK를 이용해 결제 수단을 등록할 수 있습니다.
- 발급된 BillingKey를 이용해 DB에 결제수단을 등록합니다.
- 등록된 결제수단은 구독 시 결제 수단을 선택할 때 사용됩니다.
- API 요청을 통해 결제를 요청할 수 있습니다.
- 결제가 완료되면 결제 내역과 구독 내역을 업데이트 해 다음 결제일을 설정합니다.
- 구독 내역에 저장된 다음 결제일 정보를 이용해 매월 00시에 자동 결제가 진행됩니다.
- 다음 구독 상태에 따라 결제가 진행됩니다.
- ACTIVE : 결제 요청
- CANCELLED : 상태를 EXPIRED로 변경
- EXPIRED : 일주일이 지난 구독 내역일 경우 구독 내역 DB에서 삭제
- 모든 사람들은 게시물에 대해 댓글을 입력할 수 있습니다.
- 한 댓글에 대해 추가로 댓글을 작성할 수 있습니다.
- 댓글을 삭제할 경우 "삭제된 댓글입니다" 라고 표시됩니다.
- 댓글에 하트 버튼을 클릭해 좋아요 반응을 보낼 수 있습니다.
- 마이페이지에서 자신이 좋아요 누른 콘텐츠 목록을 확인할 수 있습니다.
- 회원은 크리에이터에 한정해 검색할 수 있습니다.
- 필터를 선택해 자신이 원하는 크리에이터 정보를 찾을 수 있습니다.
- 회원은 콘텐츠에 한정해 검색할 수 있습니다.
- 회원은 카테고리를 선택해 원하는 콘텐츠를 검색할 수 있습니다.
- 페이지네이션을 통해 검색 과정에서 서버 부하를 막을 수 있습니다.
- 페이지 로딩 속도를 향상시킬 수 있습니다.
creationstack/
├── backend/ ← Spring Boot 프로젝트
│ └── target ← .jar 파일 생성 위치
├── frontend/ ← React 프로젝트
│ └── dist/ ← 정적 리소스(build된 React)
-
React 앱을 build해서 정적 파일로 만듬
-
Spring Boot 프로젝트의 resources/static에 React build 결과물을 넣음
-
Spring Boot 프로젝트를 빌드해서 .jar 생성
-
.jar 파일 실행
[1] React 프로젝트 build
cd frontend
npm run build
→ frontend/dist 폴더가 생성됨
[2] React 빌드 결과물을 Spring에 넣기 아래 명령으로 React 결과물을 Spring Boot 프로젝트에 복사하세요:
# frontend/build를 backend의 static 폴더로 복사
rm -rf ../backend/src/main/resources/static/*
cp -r dist/* ../backend/src/main/resources/static/
[3] Spring Boot 프로젝트 빌드 (JAR 만들기)
cd ../backend
./mvn clean package
→ target/ 아래에 .jar 생성됨
예시: target/backend-0.0.1-SNAPSHOT.jar
[4] JAR 파일 실행
cd target
java -jar backend-0.0.1-SNAPSHOT.jar
실행 후 브라우저에서 http://localhost:8080 접속하면 React가 렌더링됩니다.