Merge pull request #13 from Skhuthon/feature/12

마이페이지 화면 구현

src/App.tsx

@@ -12,6 +12,9 @@ import UserPage from "./pages/UserPage";
 import LoginPage from "./pages/LoginPage";
 import ReviewWriting from "./pages/ReviewWriting";
 import ReviewList from "./pages/ReviewList";
+import MyPage from "./pages/MyPage";
+import PostReview from "./pages/PostReview";
+import ReadReview from "./pages/ReadReview";
 
 const App: React.FC = () => {
     useEffect(() => {
@@ -35,6 +38,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/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/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;

src/styles/MyPageStyled.tsx

@@ -0,0 +1,87 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+    width: 80vw;
+    padding: 10vh 10vw;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    color: white;
+
+    .headerBox {
+        width: inherit;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    .subTitle {
+        color: white;
+        font-size: 2rem;
+    }
+
+    .title {
+        margin-top: 1rem;
+        color: white;
+        font-size: 3rem;
+        font-weight: bold;
+    }
+
+    .reviewBox {
+        width: inherit;
+        margin-top: 7vh;
+
+        display: flex;
+        flex-wrap: wrap;
+    }
+
+    .paginationBox {
+        margin-top: 7vh;
+    }
+`;
+
+export const StartBtn = styled.div<{ isVisible: boolean }>`
+    // 화면 맨 끝에 도착해야만 보이게
+    transition: opacity 0.7s ease-in-out;
+    opacity: ${(props) => (props.isVisible ? 1 : 0)};
+    transform: ${(props) =>
+        props.isVisible ? "translateY(0)" : "translateY(20px)"};
+    visibility: ${(props) => (props.isVisible ? "visible" : "hidden")};
+
+    .startBtn {
+        height: 2rem;
+        padding: 0.4rem 1.6rem;
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        border-radius: 1rem;
+        border: 3px solid white;
+
+        color: white;
+        background-color: #080101;
+        cursor: pointer;
+        filter: drop-shadow(0px 0px 10px #ffffff62);
+        transition: 0.2s all ease-in-out;
+    }
+
+    .startBtn:hover {
+        filter: drop-shadow(0px 0px 10px #ffffff);
+    }
+
+    .start {
+        font-size: 1.2rem;
+        margin-right: 0.3rem;
+    }
+
+    .icon {
+        width: 1.5rem;
+        font-size: 2rem;
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+    }
+`;