From 076284c2f40cf939ec2fe8ca29f3e9c75cf8cfdc Mon Sep 17 00:00:00 2001 From: 202212025 Date: Sat, 29 Jun 2024 23:31:41 +0900 Subject: [PATCH] =?UTF-8?q?[#9]=20feat=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?= =?UTF-8?q?=EC=88=98=EC=A0=95=20=EB=B0=8F=20=EB=A6=AC=EB=B7=B0=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 2 +- src/components/Navbar.tsx | 2 +- src/components/Review.tsx | 50 +++++++------ src/pages/KakaoRedirectHandler.tsx | 4 +- src/pages/MyPage.tsx | 34 ++++++++- src/pages/PostReview.tsx | 109 +++++++++++++++++++++++------ src/pages/ReadReview.tsx | 74 ++++++++++++++------ 7 files changed, 205 insertions(+), 70 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 969344f..0ee95ff 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -41,7 +41,7 @@ const App: React.FC = () => { } /> } /> } /> - } /> + } /> ); diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index 33c61d4..897a583 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -31,7 +31,7 @@ const Navbar = () => { - +
diff --git a/src/components/Review.tsx b/src/components/Review.tsx index 2ca6dd3..3f313f4 100644 --- a/src/components/Review.tsx +++ b/src/components/Review.tsx @@ -1,26 +1,36 @@ +import { Link } from "react-router-dom"; import { Review } from "../styles/ReviewStyled"; -const ReviewTheme = () => { +type ReviewProps = { + reviewId: string; + title: string; +}; + +const ReviewTheme = (reviewId: any) => { return ( - -
-

제목

-
-
-

매장

-
-
-

리뷰

-
-
-
-

#탈출 성공

-

#4명

-

#힌트 3번

-

#남은 시간 10분

-
-
- + + + <> +
+

제목

+
+
+

매장

+
+
+

리뷰

+
+
+
+

#탈출 성공

+

#4명

+

#힌트 3번

+

#남은 시간 10분

+
+
+ + + ); }; diff --git a/src/pages/KakaoRedirectHandler.tsx b/src/pages/KakaoRedirectHandler.tsx index 9bef8a8..a85c0ea 100644 --- a/src/pages/KakaoRedirectHandler.tsx +++ b/src/pages/KakaoRedirectHandler.tsx @@ -14,11 +14,11 @@ const KakaoRedirectHandler = () => { const response = await axios.post( "https://api.labyrinth30-edu.link/auth/kakao/redirect", { - params: { code }, + code } ); localStorage.setItem("accessToken", response.data.accessToken); - navigate("/themeRecs"); + navigate("/mypage"); console.log(response); } catch (error) { console.log('123', error); diff --git a/src/pages/MyPage.tsx b/src/pages/MyPage.tsx index c15489b..788f4e6 100644 --- a/src/pages/MyPage.tsx +++ b/src/pages/MyPage.tsx @@ -2,10 +2,39 @@ import React, { useEffect, useState, KeyboardEvent, ChangeEvent } from "react"; import Review from "../components/Review"; import { Container, StartBtn } from "../styles/MyPageStyled"; import Pagination from "../components/BasicPagination"; +import axios from "axios"; +import { Link } from "react-router-dom"; const MyPage = () => { const [take, setTake] = useState(1); // 총 페이지 수 const [page, setPage] = useState(1); // 현재 페이지 + const [reviews, setReviews] = useState(null); + const [accessToken, setAccessToken] = useState(null); + + useEffect(() => { + const token = localStorage.getItem('accessToken'); + if (token) { + setAccessToken(token); + } + console.log(token); + }, []); + + useEffect(() => { + const reviewList = async () => { + const token = localStorage.getItem('accessToken'); + try { + const response = await axios.get("https://api.labyrinth30-edu.link/reviews", + { + headers: {'Authorization': `Bearer ${token}`} + } + ); + setReviews(response.data); + } catch (error) { + console.log(error); + } + }; + reviewList(); + }, []); const handleChangePage = ( event: React.ChangeEvent, @@ -23,9 +52,9 @@ const MyPage = () => {
-
+

리뷰 작성

-
+
@@ -34,6 +63,7 @@ const MyPage = () => { +
diff --git a/src/pages/PostReview.tsx b/src/pages/PostReview.tsx index 2556678..c23ffdb 100644 --- a/src/pages/PostReview.tsx +++ b/src/pages/PostReview.tsx @@ -1,31 +1,98 @@ import React, { useEffect, useState, KeyboardEvent, ChangeEvent } from "react"; import { Container, StartBtn } from "../styles/PostReviewStyled"; +import axios from "axios"; +import { useNavigate } from "react-router-dom"; + +interface reviewInfo { + themeName: String; + isSuccess: Boolean; + numberOfPeople: Number; + numberOfHintsUsed: Number; + remainingTime: Number; + totalThemeTime: Number; + content: String; +} const PostReview = () => { - const onInputHandler = ( - e: ChangeEvent - ) => { - // const value = e.target.value.trim(); // 입력값 앞뒤 공백 제거 - // if (e.target.name === "title") { - // setTitle(value); - // } else if (e.target.name === "content") { - // setContent(value); - // setInputCount(value.length); - // } else if (e.target.name === "tags") { - // const tagArray = value - // .split("#") - // .map((tag) => tag.trim()) - // .filter((tag) => tag !== ""); - // setTags(tagArray); - // } + // const onInputHandler = ( + // _e: ChangeEvent + // ) => { + // // const value = e.target.value.trim(); // 입력값 앞뒤 공백 제거 + // // if (e.target.name === "title") { + // // setTitle(value); + // // } else if (e.target.name === "content") { + // // setContent(value); + // // setInputCount(value.length); + // // } else if (e.target.name === "tags") { + // // const tagArray = value + // // .split("#") + // // .map((tag) => tag.trim()) + // // .filter((tag) => tag !== ""); + // // setTags(tagArray); + // // } + // }; + + const navigate = useNavigate(); + const onChange = (e: any) => { + console.log(e.target.value); + setFormData(e.target.value); + } + + const [formData, setFormData] = useState({ + themeName: "", + isSuccess: true, + numberOfPeople: 0, + numberOfHintsUsed: 0, + remainingTime: 0, + totalThemeTime: 0, + content: "", + }); + + const onInputHandler = (e: ChangeEvent) => { + const { name, value, type } = e.target; + const inputValue = type === "checkbox" && "checked" in e.target ? e.target.checked : value; + setFormData((prevState) => ({ + ...prevState, + [name]: type === "number" ? Number(inputValue) : inputValue, + })); + }; + + const handleSubmit = (event: React.FormEvent) => { + + event.preventDefault(); + + const data = { + ...formData, + }; + console.log(formData); + const token = localStorage.getItem('accessToken'); + if (token) { + axios.post('https://api.labyrinth30-edu.link/reviews', data, { + headers: { + 'Authorization': `Bearer ${token}`, + 'Content-Type': 'application/json' + } + }) + .then(response => { + console.log('Response:', response.data); + navigate('/reviews/${reviewId}'); + }) + .catch(error => { + console.error('Error:', error); + }); + } else { + console.error('No access token found'); + } + }; + return (
-
+

저장

@@ -51,7 +118,7 @@ const PostReview = () => {

인원 수

{

힌트 사용

{

남은 시간

diff --git a/src/pages/ReadReview.tsx b/src/pages/ReadReview.tsx index 5331b12..dd59f18 100644 --- a/src/pages/ReadReview.tsx +++ b/src/pages/ReadReview.tsx @@ -1,24 +1,52 @@ import React, { useEffect, useState, KeyboardEvent, ChangeEvent } from "react"; import { Container, StartBtn } from "../styles/ReadReviewStyled"; +import { useNavigate, useParams } from "react-router-dom"; +import axios from "axios"; const PostReview = () => { - const onInputHandler = ( - e: ChangeEvent - ) => { - // const value = e.target.value.trim(); // 입력값 앞뒤 공백 제거 - // if (e.target.name === "title") { - // setTitle(value); - // } else if (e.target.name === "content") { - // setContent(value); - // setInputCount(value.length); - // } else if (e.target.name === "tags") { - // const tagArray = value - // .split("#") - // .map((tag) => tag.trim()) - // .filter((tag) => tag !== ""); - // setTags(tagArray); - // } - }; + const [accessToken, setAccessToken] = useState(null); + const { reviewId } = useParams<{ reviewId: string }>(); + const [review, setReview] = useState(null); + const navigate = useNavigate(); + const [formData, setFormData] = useState({ + themeName: "", + isSuccess: true, + numberOfPeople: 0, + numberOfHintsUsed: 0, + remainingTime: 0, + totalThemeTime: 0, + content: "", + }); + + useEffect(() => { + const token = localStorage.getItem('accessToken'); + if (token) { + setAccessToken(token); + } + }, []); + + + useEffect(() => { + const fetchReview = async () => { + const token = localStorage.getItem('accessToken'); + try { + const response = await axios.get(`https://api.labyrinth30-edu.link/reviews/${reviewId}`, { + headers: { + 'Authorization': `Bearer ${token}` + } + }); + setReview(response.data); + } catch (error) { + console.error("Error fetching review:", error); + } + }; + + fetchReview(); + }, [reviewId]); + + if (!review) { + return
Loading...
; + } return ( @@ -39,27 +67,27 @@ const PostReview = () => {

테마 이름

-

테마 이름

+

{review.themeName}

성공 여부

-

성공

+

{review.isSuccess}

인원 수

-

0 명

+

{review.numberOfPeople} 명

힌트 사용

-

4 개

+

{review.numberOfHintsUsed} 개

남은 시간

-

1 분

+

{review.remainingTime} 분

한 줄 리뷰

-

재미있어요.

+

{review.content}