From cf17884850fa8562bfbeb6268a410528b3c42ad0 Mon Sep 17 00:00:00 2001 From: MyungJiwoo <1206jiwoo@gmail.com> Date: Sat, 29 Jun 2024 21:36:06 +0900 Subject: [PATCH 1/3] =?UTF-8?q?[#17]=20=EB=AA=A8=EB=8B=AC=EC=B0=BD=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84=20=EB=B0=8F=20=EB=82=A8=EC=9D=80=20=EC=84=A0?= =?UTF-8?q?=ED=83=9D=20=EB=AC=B8=ED=95=AD=20=EB=AA=A8=EB=8B=AC=EC=B0=BD=20?= =?UTF-8?q?=EB=9D=84=EC=9A=B0=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 52 +++++++++++++++++++++++++++ package.json | 2 ++ src/components/ErrorModal.tsx | 24 +++++++++++++ src/pages/ThemeRecsQuestions.tsx | 25 ++++++++++++- src/styles/StyledModal.tsx | 60 ++++++++++++++++++++++++++++++++ 5 files changed, 162 insertions(+), 1 deletion(-) create mode 100644 src/components/ErrorModal.tsx create mode 100644 src/styles/StyledModal.tsx diff --git a/package-lock.json b/package-lock.json index 2becf8b..d9cc137 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23,6 +23,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", @@ -32,6 +33,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" @@ -4962,6 +4964,16 @@ "@types/react": "*" } }, + "node_modules/@types/react-modal": { + "version": "3.16.3", + "resolved": "https://registry.npmjs.org/@types/react-modal/-/react-modal-3.16.3.tgz", + "integrity": "sha512-xXuGavyEGaFQDgBv4UVm8/ZsG+qxeQ7f77yNrW3n+1J6XAstUy5rYHeIHPh1KzsGc6IkCIdu6lQ2xWzu1jBTLg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/react": "*" + } + }, "node_modules/@types/react-router": { "version": "5.1.20", "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.20.tgz", @@ -8884,6 +8896,12 @@ "url": "https://github.com/sindresorhus/execa?sponsor=1" } }, + "node_modules/exenv": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz", + "integrity": "sha512-Z+ktTxTwv9ILfgKCk32OX3n/doe+OcLTRtqK9pcL+JsP3J1/VW8Uvl4ZjLlKqeW4rzK4oesDOGMEMRIZqtP4Iw==", + "license": "BSD-3-Clause" + }, "node_modules/exit": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz", @@ -15740,6 +15758,31 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" }, + "node_modules/react-lifecycles-compat": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", + "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==", + "license": "MIT" + }, + "node_modules/react-modal": { + "version": "3.16.1", + "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.16.1.tgz", + "integrity": "sha512-VStHgI3BVcGo7OXczvnJN7yT2TWHJPDXZWyI/a0ssFNhGZWsPmB8cF0z33ewDXq4VfYMO1vXgiv/g8Nj9NDyWg==", + "license": "MIT", + "dependencies": { + "exenv": "^1.2.0", + "prop-types": "^15.7.2", + "react-lifecycles-compat": "^3.0.0", + "warning": "^4.0.3" + }, + "engines": { + "node": ">=8" + }, + "peerDependencies": { + "react": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18", + "react-dom": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18" + } + }, "node_modules/react-refresh": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", @@ -18211,6 +18254,15 @@ "makeerror": "1.0.12" } }, + "node_modules/warning": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", + "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "license": "MIT", + "dependencies": { + "loose-envify": "^1.0.0" + } + }, "node_modules/watchpack": { "version": "2.4.1", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.1.tgz", diff --git a/package.json b/package.json index 69d801d..eec8ef2 100644 --- 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 new file mode 100644 index 0000000..a54428f --- /dev/null +++ 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 ( + +
3개 이상은 안됩니다.
+ + ); +}; +export default ErrorModal; diff --git a/src/pages/ThemeRecsQuestions.tsx b/src/pages/ThemeRecsQuestions.tsx index 1ec3550..e4413ea 100644 --- 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( null ); + const [isModal, setIsModal] = useState(false); const handleScroll = () => { const bottom = @@ -65,7 +67,7 @@ const ThemeRecsQuestions = () => { }, }); } else { - alert("아직 선택되지 않은 문항이 있습니다."); + setIsModal(true); } }; @@ -150,6 +152,27 @@ const ThemeRecsQuestions = () => { + + {isModal ? ( + setIsModal(false)} + style={customStyles} + > +
+ 아직 선택되지 않은 문항이 있습니다. +
+
) => + setIsModal(false) + } + > + 확인 +
+ + ) : null} ); }; diff --git a/src/styles/StyledModal.tsx b/src/styles/StyledModal.tsx new file mode 100644 index 0000000..46efe48 --- /dev/null +++ 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)", // 배경 블러 효과 추가 + }, +}; From 9ece6f6faa2325430a805915e29397cfeb5d0ea0 Mon Sep 17 00:00:00 2001 From: MyungJiwoo <1206jiwoo@gmail.com> Date: Sat, 29 Jun 2024 21:40:03 +0900 Subject: [PATCH 2/3] =?UTF-8?q?[#17]=20=ED=85=8C=EB=A7=88=20=EC=B6=94?= =?UTF-8?q?=EC=B2=9C=20=EA=B2=B0=EA=B3=BC=20=EC=97=86=EC=9D=84=20=EB=95=8C?= =?UTF-8?q?=20=EC=97=90=EB=9F=AC=20=EB=A9=94=EC=8B=9C=EC=A7=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/ThemeRecsResult.tsx | 23 ++++++++++++----------- src/styles/ThemeRecsResultStyled.tsx | 6 ++++++ 2 files changed, 18 insertions(+), 11 deletions(-) diff --git a/src/pages/ThemeRecsResult.tsx b/src/pages/ThemeRecsResult.tsx index 333187f..3420685 100644 --- a/src/pages/ThemeRecsResult.tsx +++ b/src/pages/ThemeRecsResult.tsx @@ -36,17 +36,18 @@ const ThemeRecsResult = () => {
- {/* - - */} - {themeList?.map((theme) => ( - - ))} + {themeList.length > 0 ? ( + themeList.map((theme) => ( + + )) + ) : ( +

조건에 맞는 테마가 없습니다. 🥲

+ )}
diff --git a/src/styles/ThemeRecsResultStyled.tsx b/src/styles/ThemeRecsResultStyled.tsx index f2c76af..b21c619 100644 --- 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 }>` From c09300e66ce746adce8e09fbbbc87dd7bed0fa17 Mon Sep 17 00:00:00 2001 From: MyungJiwoo <1206jiwoo@gmail.com> Date: Sat, 29 Jun 2024 21:44:01 +0900 Subject: [PATCH 3/3] =?UTF-8?q?[#17]=20=EB=A7=81=ED=81=AC=20=EC=97=B0?= =?UTF-8?q?=EA=B2=B0=20=EB=B0=8F=20nav=20=EC=8A=A4=ED=83=80=EC=9D=BC=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Navbar.tsx | 8 +++++--- src/pages/ThemeRecsResult.tsx | 22 ++++++++++++++-------- src/styles/NavbarStyled.tsx | 5 +++++ 3 files changed, 24 insertions(+), 11 deletions(-) diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index 33c61d4..8f34cb0 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -8,9 +8,11 @@ import { BsPersonFill } from "react-icons/bs"; const Navbar = () => { return ( -
- logo -
+ +
+ logo +
+
diff --git a/src/pages/ThemeRecsResult.tsx b/src/pages/ThemeRecsResult.tsx index 3420685..c7e23dc 100644 --- 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"; @@ -50,14 +54,16 @@ const ThemeRecsResult = () => { )}
- -
-

홈으로

-
- + + +
+

홈으로

+
+ +
-
- + + ); }; diff --git a/src/styles/NavbarStyled.tsx b/src/styles/NavbarStyled.tsx index fa8cf68..2a956aa 100644 --- 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;