$$config title: [풀스택 - 프로젝트]북유럽 조 미션 안내 페이지 keywords: - IT - ... $$ # 프론트 ## 프론트엔드 요구사항 - 백엔드 api 연동 - 회원가입 폼 처리 - 로그인 폼 JWT 처리 - 로그인 성공시 메인화면으로 리다이렉트 - 비동기 통신, 리코일, 리액트 쿼리 학습 ## USER 리더기 앱 만들기 - [코드펜 셋팅](https://to2.kr/eFI) ## 백엔드 요구사항 - JWT 로그인 구현(POST /api/member/login) - 내 도서 리스트 구현(GET /api/myBooks) - 내 도서 상세정보 구현(GET /api/myBooks/{id}) - 로그인 한 회원의 정보 구현(GET /api/member/me) - Spring Doc 으로 API 문서화(크롬 /swagger-ui/index.html ) +) - 엑세스 토큰 화이트리스트 구현(Member 엔티티에 accessToken 필드 추가) - 리액트에서 작동되도록(cors 처리) - 아래 API 명세에 맞게 구현하기 ### GET /api/myBooks - 로그인 필요 - 현재 로그인한 회원이 소유한 책정보들을 리스팅 - 현재 1번 회원이 로그인 되었다고 가정 - 로그인 방식은 JWT 엑세스 토큰 ```json { "resultCode": "S-1", "msg": "성공", "data": { "myBooks": [ { "id": 4, "createDate": [ 2022, 11, 3, 17, 3, 22, 162538000 ], "modifyDate": [ 2022, 11, 3, 17, 3, 22, 162538000 ], "ownerId": 2, "product": { "id": 3, "createDate": [ 2022, 11, 3, 17, 3, 22, 62061000 ], "modifyDate": [ 2022, 11, 3, 17, 3, 22, 62061000 ], "authorId": 1, "authorName": "user1", "subject": "상품명3" } }, { "id": 5, "createDate": [ 2022, 11, 3, 17, 3, 22, 162538000 ], "modifyDate": [ 2022, 11, 3, 17, 3, 22, 162538000 ], "ownerId": 2, "product": { "id": 4, "createDate": [ 2022, 11, 3, 17, 3, 22, 66057000 ], "modifyDate": [ 2022, 11, 3, 17, 3, 22, 66057000 ], "authorId": 2, "authorName": "홍길순", "subject": "상품명4" } } ] }, "fail": false, "success": true } ``` ## GET /api/myBooks/{myBookId} - 로그인 필요 ```json { "resultCode": "S-1", "msg": "성공", "data": { "myBook": { "id": 3, "createDate": [ 2022, 11, 3, 17, 21, 5, 730612000 ], "modifyDate": [ 2022, 11, 3, 17, 21, 5, 730612000 ], "ownerId": 1, "product": { "id": 5, "createDate": [ 2022, 11, 3, 17, 21, 5, 625079000 ], "modifyDate": [ 2022, 11, 3, 17, 21, 5, 625079000 ], "authorId": 1, "authorName": "user1", "subject": "상품명5", "bookChapters": [ { "id": 6, "subject": "제목 6", "content": "내용 6", "contentHtml": "내용 6" }, { "id": 5, "subject": "제목 5", "content": "내용 5", "contentHtml": "내용 5" }, { "id": 2, "subject": "자바스크립트를 우아하게 사용하는 방법", "content": "# 자바스크립트는 이렇게 쓰세요.\n\n```js\nconst a = 10;\nconsole.log(a);\n```\n", "contentHtml": "

자바스크립트는 이렇게 쓰세요.

const a = 10;\nconsole.log(a);

\n" }, { "id": 1, "subject": "자바를 우아하게 사용하는 방법", "content": "# 내용 1", "contentHtml": "

내용 1

" } ] } } }, "fail": false, "success": true } ``` ### **POST /api/member/login** - username과 password 를 입력하면 그에 해당하는 accessToken 을 생성 ```json { "resultCode": "S-1", "msg": "로그인 성공, Access Token을 발급합니다.", "data": { "accessToken": "eyJhbGciOiJIUzUxMiJ9.eyJib2R5Ijoie1wiaWRcIjoyLFwiY3JlYXRlRGF0ZVwiOlsyMDIyLDExLDMsMTcsMywyMSw5NTk0MzAwMDBdLFwibW9kaWZ5RGF0ZVwiOlsyMDIyLDExLDMsMTcsMywyMiwxNjI1MzgwMDBdLFwidXNlcm5hbWVcIjpcInVzZXIyXCIsXCJlbWFpbFwiOlwidXNlcjJAdGVzdC5jb21cIixcImVtYWlsVmVyaWZpZWRcIjpmYWxzZSxcIm5pY2tuYW1lXCI6XCLtmY3quLjsiJxcIixcImF1dGhMZXZlbFwiOlwiTk9STUFMXCIsXCJhdXRob3JpdGllc1wiOlt7XCJhdXRob3JpdHlcIjpcIk1FTUJFUlwifSx7XCJhdXRob3JpdHlcIjpcIkFVVEhPUlwifV19IiwiZXhwIjo0ODIxMDYyNzcxfQ.LinAN3u8IrXSzJejLCYKMQE84LMWOOzbfi0giVoN647ciodIXMT1TvLq0oxIPs-fD0ZdBRUikt_jq193bgyFeg" }, "fail": false, "success": true } ``` ### GET /api/member/me - 로그인 필요 - 현재 로그인된 회원의 정보를 출력 ```json { "resultCode": "S-1", "msg": "성공", "data": { "member": { "id": 2, "createDate": [ 2022, 11, 3, 17, 3, 21, 959430000 ], "modifyDate": [ 2022, 11, 3, 17, 6, 11, 429765000 ], "username": "user2", "email": "user2@test.com", "emailVerified": false, "nickname": "홍길순" } }, "fail": false, "success": true } ```