Merge pull request #18 from Skhuthon/feature/17

모달창 구현
Skhuthon · Jun 29, 2024 · ba3f8fa · ba3f8fa
2 parents ceb9cfe + c09300e
commit ba3f8fa
Show file tree

Hide file tree

Showing 9 changed files with 204 additions and 23 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.2.1",
+    "react-modal": "^3.16.1",
     "react-router-dom": "^6.24.0",
     "react-scripts": "5.0.1",
     "styled-components": "^6.1.11",
@@ -51,6 +52,7 @@
   },
   "devDependencies": {
     "@types/aos": "^3.0.7",
+    "@types/react-modal": "^3.16.3",
     "@types/styled-components": "^5.1.34",
     "@types/three": "^0.165.0",
     "typescript": "^4.9.5"

diff --git a/src/components/ErrorModal.tsx b/src/components/ErrorModal.tsx
@@ -0,0 +1,24 @@
+import React, { useState } from "react";
+import Modal from "react-modal";
+
+const ErrorModal = () => {
+    // 모달의 상태를 관리하기 위해 useState 훅 사용
+    const [modalIsOpen, setModalIsOpen] = useState(false);
+
+    // 모달을 열기 위한 함수
+    const openModal = () => {
+        setModalIsOpen(true);
+    };
+
+    // 모달을 닫기 위한 함수
+    const closeModal = () => {
+        setModalIsOpen(false);
+    };
+
+    return (
+        <Modal isOpen={modalIsOpen} onRequestClose={closeModal}>
+            <div className="error">3개 이상은 안됩니다.</div>
+        </Modal>
+    );
+};
+export default ErrorModal;
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -8,9 +8,11 @@ import { BsPersonFill } from "react-icons/bs";
 const Navbar = () => {
     return (
         <Container>
-            <div className="logoBox">
-                <img src={logo} alt="logo" className="logo"></img>
-            </div>
+            <NavLink to={`/themeList`}>
+                <div className="logoBox">
+                    <img src={logo} alt="logo" className="logo"></img>
+                </div>
+            </NavLink>
 
             <div className="navBox">
                 <NavLink to={`/themeRecs`}>

diff --git a/src/pages/ThemeRecsQuestions.tsx b/src/pages/ThemeRecsQuestions.tsx
@@ -5,6 +5,7 @@ import {
     StartBtn,
     Select,
 } from "../styles/ThemeRecsQuestionsStyled";
+import { StyledModal, customStyles } from "../styles/StyledModal";
 import { IoIosArrowForward } from "react-icons/io";
 import { regions } from "../props/Regions";
 import { genres } from "../props/Genres";
@@ -20,6 +21,7 @@ const ThemeRecsQuestions = () => {
     const [selectedDifficulty, setSelectedDifficulty] = useState<string | null>(
         null
     );
+    const [isModal, setIsModal] = useState<boolean>(false);
 
     const handleScroll = () => {
         const bottom =
@@ -65,7 +67,7 @@ const ThemeRecsQuestions = () => {
                     },
                 });
             } else {
-                alert("아직 선택되지 않은 문항이 있습니다.");
+                setIsModal(true);
             }
         };
 
@@ -150,6 +152,27 @@ const ThemeRecsQuestions = () => {
                     </div>
                 </div>
             </StartBtn>
+
+            {isModal ? (
+                <StyledModal
+                    isOpen={true}
+                    shouldFocusAfterRender={false}
+                    onRequestClose={() => setIsModal(false)}
+                    style={customStyles}
+                >
+                    <div className="error">
+                        아직 선택되지 않은 문항이 있습니다.
+                    </div>
+                    <div
+                        className="okBtn"
+                        onClick={(event: React.MouseEvent<HTMLDivElement>) =>
+                            setIsModal(false)
+                        }
+                    >
+                        확인
+                    </div>
+                </StyledModal>
+            ) : null}
         </>
     );
 };

diff --git a/src/pages/ThemeRecsResult.tsx b/src/pages/ThemeRecsResult.tsx
@@ -1,5 +1,9 @@
 import React, { useState, useEffect } from "react";
-import { Container, StartBtn } from "../styles/ThemeRecsResultStyled";
+import {
+    Container,
+    StartBtn,
+    StyledLink,
+} from "../styles/ThemeRecsResultStyled";
 import { IoIosArrowForward } from "react-icons/io";
 import RoomTheme from "../components/RoomTheme";
 import { useLocation } from "react-router-dom";
@@ -36,27 +40,30 @@ const ThemeRecsResult = () => {
             </div>
 
             <div className="resultBox">
-                {/* <RoomTheme />
-                <RoomTheme />
-                <RoomTheme /> */}
-                {themeList?.map((theme) => (
-                    <RoomTheme
-                        title={theme.title}
-                        difficulty={theme.difficulty}
-                        genre={theme.genre}
-                        store={theme.store}
-                    />
-                ))}
+                {themeList.length > 0 ? (
+                    themeList.map((theme) => (
+                        <RoomTheme
+                            title={theme.title}
+                            difficulty={theme.difficulty}
+                            genre={theme.genre}
+                            store={theme.store}
+                        />
+                    ))
+                ) : (
+                    <p className="notFound">조건에 맞는 테마가 없습니다. 🥲</p>
+                )}
             </div>
 
-            <StartBtn isVisible={true}>
-                <div className="startBtn">
-                    <p className="start">홈으로</p>
-                    <div className="icon">
-                        <IoIosArrowForward />
+            <StyledLink to="/themeList">
+                <StartBtn isVisible={true}>
+                    <div className="startBtn">
+                        <p className="start">홈으로</p>
+                        <div className="icon">
+                            <IoIosArrowForward />
+                        </div>
                     </div>
-                </div>
-            </StartBtn>
+                </StartBtn>
+            </StyledLink>
         </Container>
     );
 };

diff --git a/src/styles/NavbarStyled.tsx b/src/styles/NavbarStyled.tsx
@@ -8,6 +8,7 @@ export const Container = styled.div`
 
     position: fixed;
     top: 0;
+    z-index: 2;
 
     display: flex;
     justify-content: space-between;
@@ -37,6 +38,10 @@ export const Container = styled.div`
 export const NavLink = styled(Link)`
     text-decoration: none;
 
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
     .nav {
         display: flex;
         justify-content: center;

diff --git a/src/styles/StyledModal.tsx b/src/styles/StyledModal.tsx
@@ -0,0 +1,60 @@
+import styled from "styled-components";
+import ReactModal from "react-modal";
+
+export const StyledModal = styled(ReactModal)`
+    width: 25rem;
+    height: 15rem;
+
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+
+    background: radial-gradient(50% 50% at 50% 50%, #3b3b3b 0%, #080101 100%);
+    filter: drop-shadow(0px 0px 10px #03ff8e73);
+
+    border-radius: 1rem;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    .error {
+        font-size: 1.2rem;
+        /* font-weight: bold; */
+        color: #03ff8d;
+        /* #080101 */
+    }
+
+    .warningIcon {
+        width: 3rem;
+    }
+
+    .okBtn {
+        margin-top: 2rem;
+        padding: 0.4rem 1.2rem;
+        border-radius: 1rem;
+        font-size: 0.9rem;
+        color: #080101;
+        background-color: #03ff8d;
+        border: 1px solid #03ff8d;
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .okBtn:hover {
+        color: #03ff8d;
+        background-color: #080101;
+        cursor: pointer;
+    }
+`;
+
+export const customStyles = {
+    overlay: {
+        background: "rgba(0, 0, 0, 0.5)",
+        backdropFilter: "blur(10px)", // 배경 블러 효과 추가
+    },
+};
diff --git a/src/styles/ThemeRecsResultStyled.tsx b/src/styles/ThemeRecsResultStyled.tsx
@@ -51,6 +51,12 @@ export const Container = styled.div`
         display: flex;
         justify-content: center;
     }
+
+    .notFound {
+        margin-top: 5vh;
+        color: white;
+        font-size: 1.3rem;
+    }
 `;
 
 export const StartBtn = styled.div<{ isVisible: boolean }>`