Merge branch 'main' into feature/9

src/App.tsx

@@ -13,6 +13,9 @@ import LoginPage from "./pages/LoginPage";
 import ReviewWriting from "./pages/ReviewWriting";
 import ReviewList from "./pages/ReviewList";
 import KakaoRedirectHandler from "./pages/KakaoRedirectHandler";
+import MyPage from "./pages/MyPage";
+import PostReview from "./pages/PostReview";
+import ReadReview from "./pages/ReadReview";
 
 const App: React.FC = () => {
     useEffect(() => {
@@ -36,6 +39,9 @@ const App: React.FC = () => {
                 <Route path="/reviewList" element={<ReviewList />} />
                 <Route path="/reviewWriting" element={<ReviewWriting />} />
                 <Route path="/themeList" element={<ThemeList />} />
+                <Route path="/mypage" element={<MyPage />} />
+                <Route path="/postReview" element={<PostReview />} />
+                <Route path="/readReview" element={<ReadReview />} />
             </Routes>
         </Router>
     );

src/api/ThemeListApi.tsx

@@ -0,0 +1,26 @@
+import axios from "axios";
+
+// [get] 유저의 전체 다이어리 조회
+export const getThemeList = async (
+    page: number,
+    title: string,
+    region: string
+) => {
+    try {
+        const response = await axios({
+            method: "GET",
+            url: "https://api.labyrinth30-edu.link/themes",
+            params: {
+                page: page,
+                title: title,
+                region: region,
+            },
+        });
+        // 응답 결과 : id / title / difficulty / genre / store { id / name / reservationSite }
+        // console.log(response.data);
+
+        return response.data;
+    } catch (error) {
+        console.log(error);
+    }
+};

src/components/Review.tsx

@@ -0,0 +1,27 @@
+import { Review } from "../styles/ReviewStyled";
+
+const ReviewTheme = () => {
+    return (
+        <Review>
+            <div className="titleBox">
+                <p>제목</p>
+            </div>
+            <div className="addressBox">
+                <p>매장</p>
+            </div>
+            <div className="contentBox">
+                <p>리뷰</p>
+            </div>
+            <div className="cardFooter">
+                <div className="hashtagBox">
+                    <p>#탈출 성공</p>
+                    <p>#4명</p>
+                    <p>#힌트 3번</p>
+                    <p>#남은 시간 10분</p>
+                </div>
+            </div>
+        </Review>
+    );
+};
+
+export default ReviewTheme;

src/components/RoomTheme2.tsx

@@ -1,23 +1,35 @@
 import React from "react";
 import { Theme } from "../styles/RoomTheme2Styled";
+import { ThemeProps } from "../props/ThemeProps";
 
-const RoomTheme2 = () => {
+const RoomTheme2: React.FC<ThemeProps> = ({
+    title,
+    difficulty,
+    genre,
+    store,
+}) => {
     return (
         <Theme data-aos="fade-up" data-aos-duration="1000">
             <div className="titleBox">
-                <p>방탈출 테마 이름</p>
+                <p>{title}</p>
             </div>
             <div className="addressBox">
-                <p>매장 정보</p>
+                <p>{store.name}</p>
             </div>
             <div className="cardFooter">
                 <div className="hashtagBox">
-                    <p>#난이도</p>
-                    <p>#장르</p>
-                </div>
-                <div className="linkBtn">
-                    <p>예약</p>
+                    <p>#{difficulty}</p>
+                    <p>#{genre}</p>
                 </div>
+                <a
+                    href={store.reservationSite}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                >
+                    <div className="linkBtn">
+                        <p>예약</p>
+                    </div>
+                </a>
             </div>
         </Theme>
     );

src/pages/MyPage.tsx

@@ -0,0 +1,49 @@
+import React, { useEffect, useState, KeyboardEvent, ChangeEvent } from "react";
+import Review from "../components/Review";
+import { Container, StartBtn } from "../styles/MyPageStyled";
+import Pagination from "../components/BasicPagination";
+
+const MyPage = () => {
+    const [take, setTake] = useState<number>(1); // 총 페이지 수
+    const [page, setPage] = useState<number>(1); // 현재 페이지
+
+    const handleChangePage = (
+        event: React.ChangeEvent<unknown>,
+        value: number
+    ) => {
+        setPage(value); // 페이지 변경 시 현재 페이지 상태 업데이트
+    };
+
+    return (
+        <Container>
+            <div className="headerBox">
+                <div className="textBox">
+                    <div className="subTitle">당신을 위한 방,</div>
+                    <div className="title">username님의 방탈출 일지</div>
+                </div>
+
+                <StartBtn isVisible={true}>
+                    <div className="startBtn">
+                        <p className="start">리뷰 작성</p>
+                    </div>
+                </StartBtn>
+            </div>
+
+            <div className="reviewBox">
+                <Review />
+                <Review />
+                <Review />
+                <Review />
+            </div>
+
+            <div className="paginationBox">
+                <Pagination
+                    count={take}
+                    page={page}
+                    onChange={handleChangePage}
+                />
+            </div>
+        </Container>
+    );
+};
+export default MyPage;

src/pages/PostReview.tsx

@@ -0,0 +1,93 @@
+import React, { useEffect, useState, KeyboardEvent, ChangeEvent } from "react";
+import { Container, StartBtn } from "../styles/PostReviewStyled";
+
+const PostReview = () => {
+    const onInputHandler = (
+        e: ChangeEvent<HTMLTextAreaElement | HTMLInputElement>
+    ) => {
+        // 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);
+        // }
+    };
+
+    return (
+        <Container>
+            <div className="postBox">
+                <div className="btnBox">
+                    <StartBtn isVisible={true}>
+                        <div className="startBtn">
+                            <p className="start">저장</p>
+                        </div>
+                    </StartBtn>
+                </div>
+
+                <div className="posting">
+                    <p className="postTitle">테마 이름</p>
+                    <input
+                        name="themeName"
+                        placeholder="방탈출 지점과 테마 이름"
+                        onChange={onInputHandler}
+                        className="postThemeTitle"
+                    ></input>
+                </div>
+                <div className="posting">
+                    <p className="postTitle">성공 여부</p>
+                    <select>
+                        <option value="success">성공</option>
+                        <option value="fail">실패</option>
+                    </select>
+                </div>
+                <div className="posting">
+                    <p className="postTitle">인원 수</p>
+                    <input
+                        type="number"
+                        name="themeName"
+                        placeholder="플레이 인원"
+                        onChange={onInputHandler}
+                        className="postTagsBox"
+                    ></input>
+                </div>
+                <div className="posting">
+                    <p className="postTitle">힌트 사용</p>
+                    <input
+                        type="number"
+                        name="themeName"
+                        placeholder="힌트 사용 개수"
+                        onChange={onInputHandler}
+                        className="postTagsBox"
+                    ></input>
+                </div>
+                <div className="posting">
+                    <p className="postTitle">남은 시간</p>
+                    <input
+                        name="themeName"
+                        placeholder="남은 시간 (탈출 성공시)"
+                        onChange={onInputHandler}
+                        className="postTagsBox"
+                    ></input>
+                </div>
+                <div className="posting">
+                    <p className="postTitle">한 줄 리뷰</p>
+                    <textarea
+                        name="content"
+                        placeholder="내용을 입력해주세요"
+                        onChange={onInputHandler}
+                        maxLength={2000}
+                        className="postContent"
+                    ></textarea>
+                </div>
+            </div>
+        </Container>
+    );
+};
+export default PostReview;

src/pages/ReadReview.tsx

@@ -0,0 +1,68 @@
+import React, { useEffect, useState, KeyboardEvent, ChangeEvent } from "react";
+import { Container, StartBtn } from "../styles/ReadReviewStyled";
+
+const PostReview = () => {
+    const onInputHandler = (
+        e: ChangeEvent<HTMLTextAreaElement | HTMLInputElement>
+    ) => {
+        // 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);
+        // }
+    };
+
+    return (
+        <Container>
+            <div className="postBox">
+                <div className="btnBox">
+                    <StartBtn isVisible={true}>
+                        <div className="startBtn">
+                            <p className="start">수정</p>
+                        </div>
+                    </StartBtn>
+
+                    <StartBtn isVisible={true}>
+                        <div className="startBtn">
+                            <p className="start">삭제</p>
+                        </div>
+                    </StartBtn>
+                </div>
+
+                <div className="posting">
+                    <p className="postTitle">테마 이름</p>
+                    <p className="read">테마 이름</p>
+                </div>
+                <div className="posting">
+                    <p className="postTitle">성공 여부</p>
+                    <p className="read">성공</p>
+                </div>
+                <div className="posting">
+                    <p className="postTitle">인원 수</p>
+                    <p className="read">0 명</p>
+                </div>
+                <div className="posting">
+                    <p className="postTitle">힌트 사용</p>
+                    <p className="read">4 개</p>
+                </div>
+                <div className="posting">
+                    <p className="postTitle">남은 시간</p>
+                    <p className="read">1 분</p>
+                </div>
+                <div className="posting">
+                    <p className="postTitle">한 줄 리뷰</p>
+                    <p className="read">재미있어요.</p>
+                </div>
+            </div>
+        </Container>
+    );
+};
+export default PostReview;