Merge branch 'main' of https://github.com/Skhuthon/Skhuthon_0th_TEAM0…

…3_FE

package.json

@@ -3,6 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
+    "@mui/material": "^5.15.21",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -11,6 +14,7 @@
     "@types/react-dom": "^18.3.0",
     "@types/react-router-dom": "^5.3.3",
     "axios": "^1.7.2",
+    "aos": "^2.3.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.2.1",
@@ -46,6 +50,7 @@
     ]
   },
   "devDependencies": {
+    "@types/aos": "^3.0.7",
     "@types/styled-components": "^5.1.34",
     "@types/three": "^0.165.0",
     "typescript": "^4.9.5"

src/App.tsx

@@ -1,16 +1,23 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
+import AOS from "aos";
+import "aos/dist/aos.css";
 import MainPage from "./pages/MainPage";
 import ThemeRecs from "./pages/ThemeRecs";
 import ThemeRecsQuestions from "./pages/ThemeRecsQuestions";
 import ThemeRecsResult from "./pages/ThemeRecsResult";
+import ThemeList from "./pages/ThemeList";
 import Navbar from "./components/Navbar";
 import UserPage from "./pages/UserPage";
 import LoginPage from "./pages/LoginPage";
 import ReviewWriting from "./pages/ReviewWriting";
 import ReviewList from "./pages/ReviewList";
 
 const App: React.FC = () => {
+    useEffect(() => {
+        AOS.init(); // AOS 초기화
+    }, []);
+
     return (
         <Router>
             <Navbar />
@@ -27,6 +34,7 @@ const App: React.FC = () => {
                 <Route path="/auth/kakao/redirect" element={<UserPage />} />
                 <Route path="/reviewList" element={<ReviewList />} />
                 <Route path="/reviewWriting" element={<ReviewWriting />} />
+                <Route path="/themeList" element={<ThemeList />} />
             </Routes>
         </Router>
     );

src/components/BasicPagination.tsx

@@ -0,0 +1,36 @@
+import * as React from "react";
+import Pagination from "@mui/material/Pagination";
+
+interface BasicPaginationProps {
+    count: number; // 총 페이지 수
+    page: number; // 현재 페이지 번호
+    onChange: (event: React.ChangeEvent<unknown>, page: number) => void; // 페이지 변경 이벤트 핸들러
+}
+
+const BasicPagination: React.FC<BasicPaginationProps> = ({
+    count,
+    page,
+    onChange,
+}) => {
+    return (
+        <Pagination
+            count={count}
+            page={page}
+            onChange={onChange}
+            sx={{
+                "& .MuiPaginationItem-root": {
+                    color: "#fff", // 원하는 색상
+                },
+                "& .Mui-selected": {
+                    backgroundColor: "#03ff8e13", // 선택된 페이지 번호의 배경 색상
+                    color: "#03FF8D", // 선택된 페이지 번호의 글자 색상
+                },
+                "& .MuiPaginationItem-icon": {
+                    fill: "#fff", // 화살표 등 아이콘 색상
+                },
+            }}
+        />
+    );
+};
+
+export default BasicPagination;

src/components/Navbar.tsx

@@ -22,7 +22,7 @@ const Navbar = () => {
                     </div>
                 </NavLink>
 
-                <NavLink to={`/`}>
+                <NavLink to={`/themeList`}>
                     <div className="nav">
                         <div>
                             <BsCollectionFill />

src/components/RoomTheme.tsx

@@ -3,7 +3,11 @@ import { Theme } from "../styles/RoomThemeStyled";
 
 const RoomTheme = () => {
     return (
-        <Theme>
+        <Theme
+            data-aos="flip-right"
+            data-aos-duration="3000"
+            data-aos-easing="ease-out-cubic"
+        >
             <div className="titleBox">
                 <p>방탈출 테마 이름</p>
             </div>

src/components/RoomTheme2.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { Theme } from "../styles/RoomTheme2Styled";
+
+const RoomTheme2 = () => {
+    return (
+        <Theme data-aos="fade-up" data-aos-duration="1000">
+            <div className="titleBox">
+                <p>방탈출 테마 이름</p>
+            </div>
+            <div className="addressBox">
+                <p>매장 정보</p>
+            </div>
+            <div className="cardFooter">
+                <div className="hashtagBox">
+                    <p>#난이도</p>
+                    <p>#장르</p>
+                </div>
+                <div className="linkBtn">
+                    <p>예약</p>
+                </div>
+            </div>
+        </Theme>
+    );
+};
+
+export default RoomTheme2;

src/index.css

@@ -1,6 +1,7 @@
 body {
     margin: 0;
     margin-top: 10vh;
+    background-color: #080101;
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
         "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
         "Helvetica Neue", sans-serif;

src/pages/ThemeList.tsx

@@ -0,0 +1,89 @@
+import React, { useEffect, useState, KeyboardEvent, ChangeEvent } from "react";
+import { Container } from "../styles/ThemeListStyled";
+import { useNavigate } from "react-router-dom";
+import RoomTheme2 from "../components/RoomTheme2";
+import Pagination from "../components/BasicPagination";
+
+const ThemeList = () => {
+    const navigate = useNavigate();
+    const [inputKeyword, setInputKeyword] = useState("");
+    const [searchKeyword, setSearchKeyword] = useState("");
+    const [totalPages, setTotalPages] = useState<number>(10); // 총 페이지 수
+    const [page, setPage] = useState<number>(0); // 현재 페이지
+
+    const handleInputKeyword = (event: React.ChangeEvent<HTMLInputElement>) => {
+        setInputKeyword(event.target.value);
+    };
+
+    const handleKeyDown = async (event: KeyboardEvent<HTMLInputElement>) => {
+        // 엔터 키가 눌렸는지 확인
+        if (event.key === "Enter") {
+            // 엔터 키가 눌렸을 때 실행할 동작
+            navigate(`/postBoard?keyword=${inputKeyword}`);
+
+            event.preventDefault(); // 폼 자동 제출 방지
+        }
+    };
+
+    const submit = () => {
+        console.log("Submitted:", inputKeyword);
+        // 여기에 제출 로직 추가
+    };
+
+    const handleChangePage = (
+        event: React.ChangeEvent<unknown>,
+        value: number
+    ) => {
+        setPage(value - 1); // 페이지 변경 시 현재 페이지 상태 업데이트
+    };
+
+    return (
+        <Container>
+            <div className="headerBox">
+                <p className="title">방탈출 테마 정보</p>
+                <div className="searchBox">
+                    <div className="searchBar">
+                        <input
+                            placeholder="검색"
+                            type="text"
+                            value={inputKeyword}
+                            onChange={handleInputKeyword}
+                            onKeyDown={handleKeyDown}
+                        ></input>
+                    </div>
+                </div>
+            </div>
+            <div className="categoryBox">
+                <div className="category">서울 전체</div>
+                <div className="category">홍대</div>
+                <div className="category">강남</div>
+                <div className="category">건대</div>
+                <div className="category">대학로</div>
+                <div className="category">신촌</div>
+                <div className="category">잠실</div>
+                <div className="category">신림</div>
+                <div className="category">노원</div>
+                <div className="category">서울 (기타)</div>
+            </div>
+
+            <div className="themeBox">
+                <RoomTheme2 />
+                <RoomTheme2 />
+                <RoomTheme2 />
+                <RoomTheme2 />
+                <RoomTheme2 />
+                <RoomTheme2 />
+            </div>
+
+            <div className="paginationBox">
+                <Pagination
+                    count={totalPages}
+                    page={page + 1}
+                    onChange={handleChangePage}
+                />
+            </div>
+        </Container>
+    );
+};
+
+export default ThemeList;

src/styles/NavbarStyled.tsx

@@ -13,7 +13,7 @@ export const Container = styled.div`
     justify-content: space-between;
 
     background-color: #080101;
-    box-shadow: 0px 4px 50px rgba(45, 45, 45, 0.126);
+    box-shadow: 0px 4px 3rem rgba(93, 93, 93, 0.265);
     color: #3b3b3b;
 
     .logoBox {

src/styles/RoomTheme2Styled.tsx

@@ -0,0 +1,67 @@
+import styled from "styled-components";
+import { Link } from "react-router-dom";
+
+export const Theme = styled.div`
+    width: 15vw;
+    height: 20vh;
+    padding: 1.5vh 2vw;
+    margin: 1vh 0.5vw;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+
+    background-color: #1c1c1c;
+    color: white;
+    border-radius: 1rem;
+
+    .titleBox > p {
+        font-size: 1.4rem;
+        border-left: 5px solid #03ff8d;
+        padding-left: 0.5rem;
+        font-weight: bold;
+    }
+
+    .addressBox > p {
+        margin-top: 1rem;
+        font-size: 1rem;
+    }
+
+    .cardFooter {
+        width: inherit;
+        margin-top: 1.5rem;
+
+        display: flex;
+        justify-content: space-between;
+    }
+
+    .hashtagBox {
+        display: flex;
+    }
+
+    .hashtagBox > p {
+        margin-right: 1rem;
+    }
+
+    .linkBtn {
+        padding: 0.2rem 1rem;
+        border-radius: 1rem;
+        color: #080101;
+        background-color: #03ff8d;
+
+        cursor: pointer;
+    }
+`;
+
+export const StyledLink = styled(Link)`
+    text-decoration: none;
+
+    &:focus,
+    &:hover,
+    &:visited,
+    &:link,
+    &:active {
+        text-decoration: none;
+    }
+`;

src/styles/ThemeListStyled.tsx

@@ -0,0 +1,71 @@
+import styled from "styled-components";
+import { Link } from "react-router-dom";
+
+export const Container = styled.div`
+    width: 80vw;
+    /* height: 90vh; */
+    padding: 10vh 10vw;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    background-color: #080101;
+
+    color: white;
+
+    .headerBox {
+        width: inherit;
+
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    .title {
+        font-size: 2.3rem;
+        font-weight: bold;
+    }
+
+    .searchBar > input {
+        width: 17rem;
+        padding: 0.7rem 1.5rem;
+        background-color: #3b3b3b;
+        color: white;
+        border: none;
+        border-radius: 0.8rem;
+    }
+
+    input:focus {
+        outline: none;
+    }
+
+    .categoryBox {
+        width: inherit;
+        margin-top: 5vh;
+        display: flex;
+    }
+
+    .category {
+        margin-right: 1rem;
+        padding: 0.5rem 1rem;
+        border: 1px solid white;
+        border-radius: 0.8rem;
+    }
+
+    .category:hover {
+        cursor: pointer;
+        background: rgba(255, 255, 255, 0.3);
+    }
+
+    .themeBox {
+        width: 80vw;
+        margin-top: 7vh;
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+    }
+
+    .paginationBox {
+        margin-top: 7vh;
+    }
+`;