Merge pull request #19 from TABA-4th/dev

merge dev branch
TABA-4th · Nov 22, 2023 · b04a37c · b04a37c
2 parents 8b64d1b + 61f3600
commit b04a37c
Show file tree

Hide file tree

Showing 13 changed files with 138 additions and 62 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@hookform/resolvers": "^3.3.2",
     "@mui/icons-material": "^5.14.16",
     "@mui/material": "^5.14.18",
     "@mui/styles": "^5.14.17",
@@ -23,7 +24,8 @@
     "react-slick": "^0.29.0",
     "slick-carousel": "^1.8.1",
     "styled-components": "^5.3.10",
-    "web-vitals": "^2.1.4"
+    "web-vitals": "^2.1.4",
+    "yup": "^1.3.2"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/src/App.jsx b/src/App.jsx
@@ -27,27 +27,27 @@ function App() {
 
   return (
     <div className='wrap'>
-      <div className="main-contents">
-        <div className='content'>
-        <Router>
-          <Navbar isLoggedIn={isLoggedIn} handleLogout={handleLogout} />
-          <div>
-            <Routes>
-              <Route path="/" element={<Home />} />
-              <Route path="/about" element={isLoggedIn ? <About /> : <Navigate to="/" />} />
-              <Route path="/calender" element={isLoggedIn ? <Calender/> : <Navigate to="/" />} />
-              <Route path="/magazine" element={isLoggedIn ? <Magazine/> : <Navigate to="/" />} />
-              <Route path="*" element={<NotFound/>} />
-              <Route path="/wishlist" element={isLoggedIn ? <WishlistPage/> : <Navigate to="/" />} />
-              <Route path="/survey" element={isLoggedIn ? <Survey/> : <Navigate to="/" />} />
-              <Route path="/login" element={<LoginPage setIsLoggedIn={setIsLoggedIn} handleLogout={handleLogout} />} />
-              <Route path="/register" element={<RegisterPage/>}/>
-              <Route path="/register_success" element={<Register_success/>}/>
-            </Routes>
+      <Router>
+        <Navbar isLoggedIn={isLoggedIn} handleLogout={handleLogout} />
+        <div className="main-contents">
+          <div className='content'>
+            <div>
+              <Routes>
+                <Route path="/" element={<Home />} />
+                <Route path="/about" element={isLoggedIn ? <About /> : <Navigate to="/" />} />
+                <Route path="/calender" element={isLoggedIn ? <Calender/> : <Navigate to="/" />} />
+                <Route path="/magazine" element={isLoggedIn ? <Magazine/> : <Navigate to="/" />} />
+                <Route path="*" element={<NotFound/>} />
+                <Route path="/wishlist" element={isLoggedIn ? <WishlistPage/> : <Navigate to="/" />} />
+                <Route path="/survey" element={isLoggedIn ? <Survey/> : <Navigate to="/" />} />
+                <Route path="/login" element={<LoginPage setIsLoggedIn={setIsLoggedIn} handleLogout={handleLogout} />} />
+                <Route path="/register" element={<RegisterPage/>}/>
+                <Route path="/register_success" element={<Register_success/>}/>
+              </Routes>
+            </div>
           </div>
-        </Router>
         </div>
-      </div>
+      </Router>
     </div>
   );
 }

diff --git a/src/components/Navbar.css b/src/components/Navbar.css
@@ -1,7 +1,7 @@
 /* Navbar의 기본 스타일 */
 .navbar {
   background-color: #fff;
-  padding: 10px;
+  padding: 20px;
   color: white;
   display: flex;
   justify-content: space-between; /* 로고와 메뉴를 좌우에 배치 */
@@ -10,8 +10,11 @@
 
 /* 로고 이미지의 스타일 */
 .logo {
-  width: 90px; /* 로고 이미지의 너비 설정 */
+  width: 120px; /* 로고 이미지의 너비 설정 */
   height: auto; /* 높이 자동 조정 */
+  margin-left: 100px;
+  margin-right: 100px;
+  right: 10;
 }
 
 .logo-link {
@@ -39,10 +42,14 @@ a {
 }
 
 .mobile-menu {
+  width: 100%;
+  height: 200%;
+  background: #fff;
   display: none;
   list-style: none;
   padding: 0;
   margin: 0;
+  z-index: 999;
 }
 
 .mobile-menu-align {
@@ -53,10 +60,10 @@ a {
   display: flex;
   flex-direction: column;
   position: absolute;
-  top: 60px; /* 로고와 메뉴 간의 간격을 조절 */
+  top: 110px; /* 로고와 메뉴 간의 간격을 조절 */
   left: 0;
   width: 100%;
-  background-color: #96cbee;
+  padding-bottom: 30px;
   overflow:hidden;
 }
 
@@ -66,9 +73,12 @@ a {
 
 /* 모바일 화면에서 보여질 메뉴 아이콘의 스타일 */
 .mobile-menu-icon {
-  color:black;
+  color:#808080;
+  position: fixed;
+  top: 5%;
+  right: 5%;
   display: block;
-  font-size: 24px;
+  font-size: 28px;
   cursor: pointer;
 }
 
@@ -94,9 +104,9 @@ a {
 /* 모바일 화면에서 로고가 중앙에 오도록 스타일 조정 */
 .navbar.mobile {
   flex-direction: column;
-  align-items: center;
+  margin-left: 0;
 }
 
 body.menu-open {
-  overflow: hidden; /* 스크롤을 막아 메뉴가 열린 상태에서는 스크롤이 되지 않도록 함 */
+  /* overflow: hidden; 스크롤을 막아 메뉴가 열린 상태에서는 스크롤이 되지 않도록 함 */
 }
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
@@ -4,20 +4,35 @@ import { useMediaQuery } from 'react-responsive';
 import "./Navbar.css";
 import UserMenu from './UserMenu';
 
+// 웹 뷰에서의 css
 function getLinkStyle({isActive}){
   return {
-    textDecoration: isActive ? 'underline' : undefined,
-
+    borderBottom: isActive? '3px solid #7EBFFF' : 'none',
+    color: isActive? '#7EBFFF' : 'black',
+    fontWeight: isActive? 700 : 'normal',
+    fontSize: '30px',
+    marginLeft: '25px',
+    marginRight: '25px',
+  }
+}
+
+// 모바일 및 태블릿 뷰에서의 css
+function getResponsiveLinkStyle({isActive}) {
+  return {
+    color: isActive ? '#7EBFFF' : 'black',
+    fontWeight: isActive ? 700 : 'normal',
+    fontSize: '26px',
+    marginLeft: '50px',
   }
 }
 
 const Navbar = ({ isLoggedIn, handleLogout }) => {
   const [isMenuOpen, setMenuOpen] = useState(false);
 
   const isDesktopOrLaptop = useMediaQuery({
-    query: '(min-device-width: 1224px)',
+    query: '(min-device-width: 1424px)', // 기존 1224였던 min-device-width를 1424로 바꿈.
   });
-  const isTabletOrMobile = useMediaQuery({ query: '(max-width: 1224px)' });
+  const isTabletOrMobile = useMediaQuery({ query: '(max-width: 1424px)' }); // 기존 1224였던 max-width를 1424로 바꿈.
 
   const handleMenuToggle = () => {
     setMenuOpen(!isMenuOpen);
@@ -40,10 +55,10 @@ const Navbar = ({ isLoggedIn, handleLogout }) => {
             ☰
           </div>
           <ul className={`mobile-menu ${isMenuOpen ? 'open' : ''}`}>
-            <li><NavLink to="/" onClick={handleMenuToggle} style={getLinkStyle}>Home</NavLink></li>
-            <li><NavLink to="/about" onClick={handleMenuToggle} style={getLinkStyle}>About</NavLink></li>
-            <li><NavLink to="/magazine" onClick={handleMenuToggle} style={getLinkStyle}>Magazine</NavLink></li>
-            <li><NavLink to="/calender" onClick={handleMenuToggle} style={getLinkStyle}>Calender</NavLink></li>
+            <li><NavLink to="/" onClick={handleMenuToggle} style={getResponsiveLinkStyle}>Home</NavLink></li>
+            <li><NavLink to="/about" onClick={handleMenuToggle} style={getResponsiveLinkStyle}>About</NavLink></li>
+            <li><NavLink to="/magazine" onClick={handleMenuToggle} style={getResponsiveLinkStyle}>Magazine</NavLink></li>
+            <li><NavLink to="/calender" onClick={handleMenuToggle} style={getResponsiveLinkStyle}>Calender</NavLink></li>
           </ul>
         </div>
       ) : (
@@ -52,10 +67,9 @@ const Navbar = ({ isLoggedIn, handleLogout }) => {
           <li><NavLink to="/about" style={getLinkStyle}>About</NavLink></li>
           <li><NavLink to="/magazine" style={getLinkStyle}>Magazine</NavLink></li>
           <li><NavLink to="/calender" style={getLinkStyle}>Calender</NavLink></li>
+          <UserMenu isLoggedIn={isLoggedIn} handleLogout={handleLogout}/>
         </ul>
-
       )}
-            <UserMenu isLoggedIn={isLoggedIn} handleLogout={handleLogout}/>
     </nav>
   );
 }

diff --git a/src/components/UserMenu.module.css b/src/components/UserMenu.module.css
@@ -6,14 +6,16 @@
   background-color: transparent;
   border: none;
   cursor: pointer;
-  padding: 0;
-
+  float: right;
+  padding-left: 17em;
+  padding-right: 3em;
+  padding-bottom: 1em;
 }
 
 
 .iconButton img {
-  width: 30px;
-  height: 30px;
+  width: 43px;
+  height: 43px;
 }
 
 ul.popup {
@@ -41,11 +43,12 @@ ul.popup li {
   font-size:15px;
   padding: 15px 19px;
   font-family: var(--noto-sans);
-  color:aqua;
+  color:black;
 }
 
 ul.popup li:hover {
   background-color: #f4f4f4;
+  color: #7EBFFF;
   cursor: pointer;
 }
 

diff --git a/src/index.css b/src/index.css
@@ -9,9 +9,9 @@
 }
 
 .content {
-  width: 90%;
-  margin: 0% 5%;
-  padding: 0% 10%;
+  width: 95%;
+  margin: 0% 2.5%;
+  padding: 0% 5%;
 }
 
 .container {

diff --git a/src/pages/About.jsx b/src/pages/About.jsx
@@ -3,8 +3,8 @@ import { useMediaQuery } from 'react-responsive';
 
 const About = () => {
   const isMobile = useMediaQuery({ maxWidth: 899 });
-  const isTablet = useMediaQuery({ minWidth: 900, maxWidth: 1199 });
-  const isDesktop = useMediaQuery({ minWidth: 1200 });
+  const isTablet = useMediaQuery({ minWidth: 900, maxWidth: 1423 });
+  const isDesktop = useMediaQuery({ minWidth: 1424 });
 
   return (
     <div>

diff --git a/src/pages/Calender.jsx b/src/pages/Calender.jsx
@@ -4,8 +4,8 @@ import { useMediaQuery } from 'react-responsive';
 
 const Calender = () => {
   const isMobile = useMediaQuery({ maxWidth: 899 });
-  const isTablet = useMediaQuery({ minWidth: 900, maxWidth: 1199 });
-  const isDesktop = useMediaQuery({ minWidth: 1200 });
+  const isTablet = useMediaQuery({ minWidth: 900, maxWidth: 1423 });
+  const isDesktop = useMediaQuery({ minWidth: 1424 });
 
   return (
     <div >