Merge pull request #9 from team-pofo/style/#7-style_unify

Style/#7 style unify
team-pofo · Nov 6, 2024 · 2fddf82 · 2fddf82
2 parents 3057671 + 88074b3
commit 2fddf82
Show file tree

Hide file tree

Showing 6 changed files with 194 additions and 45 deletions.
diff --git a/public/icons/hamburger.svg b/public/icons/hamburger.svg
diff --git a/src/components/LoginModal/loginModel.tsx b/src/components/LoginModal/loginModel.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode, useState } from "react";
+import React, { ReactNode, useEffect, useState } from "react";
 import * as S from "./styles";
 import close from "../../../public/icons/close.svg";
 import chevron_left from "../../../public/icons/chevron_left.svg";
@@ -7,12 +7,20 @@ import Image from "next/image";
 interface ModalProps {
   onClose: () => void;
   children?: ReactNode;
+  initialStep?:
+    | "main"
+    | "emailLogin"
+    | "signup"
+    | "emailSignup"
+    | "passwordReset";
 }
 
-const Modal: React.FC<ModalProps> = ({ onClose }) => {
-  const [modalStep, setModalStep] = useState<
-    "main" | "emailLogin" | "signup" | "emailSignup" | "passwordReset"
-  >("main");
+const Modal: React.FC<ModalProps> = ({ onClose, initialStep = "main" }) => {
+  const [modalStep, setModalStep] = useState(initialStep);
+
+  useEffect(() => {
+    setModalStep(initialStep);
+  }, [initialStep]);
 
   const handleBackdropClick = (event: React.MouseEvent<HTMLDivElement>) => {
     if (event.target === event.currentTarget) {

diff --git a/src/components/Navigation/navigation.tsx b/src/components/Navigation/navigation.tsx
@@ -1,37 +1,99 @@
-// components/Navigation.tsx
 import React, { useState } from "react";
 import {
-  LoginButton,
+  LoginText,
+  SignUpButton,
   Logo,
   NavContainer,
   NavItems,
   StyledNavLink,
+  HamburgerButton,
+  DrawerMenu,
+  Overlay,
 } from "./styles";
-import Link from "next/link";
 import LoginModal from "../LoginModal/loginModel";
+import hamburger from "../../../public/icons/hamburger.svg";
+import Image from "next/image";
 
 const Navigation: React.FC = () => {
   const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [initialStep, setInitialStep] = useState<"main" | "signup">("main");
 
-  const handleOpenModal = () => {
+  const handleOpenLoginModal = () => {
+    setInitialStep("main");
+    setIsModalOpen(true);
+  };
+
+  const handleOpenSignupModal = () => {
+    setInitialStep("signup");
     setIsModalOpen(true);
   };
 
   const handleCloseModal = () => {
     setIsModalOpen(false);
   };
+
+  const toggleMenu = () => {
+    setIsMenuOpen((prev) => !prev);
+  };
+
   return (
     <NavContainer>
-      <Link href="/" passHref>
-        <Logo>POFO</Logo>
-      </Link>
-      <NavItems>
-        <StyledNavLink href="/counter">Home</StyledNavLink>
-        <StyledNavLink href="/mypage">MyPage</StyledNavLink>
-      </NavItems>
-      <LoginButton onClick={handleOpenModal}>Login</LoginButton>{" "}
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+        }}
+      >
+        <HamburgerButton onClick={toggleMenu}>
+          <Image
+            style={{ cursor: "pointer" }}
+            src={hamburger}
+            width={20}
+            height={20}
+            alt="close button"
+          />
+        </HamburgerButton>
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+          }}
+        >
+          <Logo href="/">POFO</Logo>
+          <NavItems>
+            <StyledNavLink href="/counter">Home</StyledNavLink>
+            <StyledNavLink href="/mypage">MyPage</StyledNavLink>
+          </NavItems>
+        </div>
+      </div>
+      <div className="auth-buttons">
+        <LoginText onClick={handleOpenLoginModal}>로그인</LoginText>
+        <SignUpButton onClick={handleOpenSignupModal}>회원가입</SignUpButton>
+      </div>
+      {isMenuOpen && (
+        <>
+          <Overlay onClick={toggleMenu} />
+          <DrawerMenu className={isMenuOpen ? "open" : ""}>
+            <StyledNavLink href="/counter" onClick={toggleMenu}>
+              Home
+            </StyledNavLink>
+            <StyledNavLink href="/mypage" onClick={toggleMenu}>
+              MyPage
+            </StyledNavLink>
+            <SignUpButton
+              onClick={() => {
+                handleOpenSignupModal();
+                toggleMenu();
+              }}
+            >
+              회원가입
+            </SignUpButton>
+          </DrawerMenu>
+        </>
+      )}
       {isModalOpen && (
-        <LoginModal onClose={handleCloseModal}>로그인 폼</LoginModal>
+        <LoginModal onClose={handleCloseModal} initialStep={initialStep} />
       )}
     </NavContainer>
   );

diff --git a/src/components/Navigation/styles.ts b/src/components/Navigation/styles.ts
@@ -1,59 +1,126 @@
-// styles/Navigation.styles.ts
 import styled from "@emotion/styled";
 import Link from "next/link";
 
 export const NavContainer = styled.nav`
   display: flex;
   align-items: center;
-  padding: 16px;
-  background-color: #333;
+  padding: 20px;
   color: white;
+  border-bottom: 1px solid rgba(90, 101, 119, 0.15);
+  background-color: #ffffff;
+  position: sticky;
+  top: 0;
+  width: 100%;
+  z-index: 1000;
+  justify-content: space-between;
+
+  @media (max-width: 768px) {
+    padding: 10px;
+  }
 `;
 
-export const Logo = styled.h1`
-  margin: 0;
+export const HamburgerButton = styled.button`
+  background: none;
+  border: none;
+  font-size: 24px;
+  cursor: pointer;
+  display: none;
+
+  @media (max-width: 768px) {
+    display: block;
+  }
+`;
+
+export const Logo = styled(Link)`
+  text-decoration: none;
   font-size: 1.5rem;
-  color: white;
-  margin-right: 16px;
+  margin-right: 20px;
+  color: #000000;
+  font-weight: 700;
+  flex-grow: 1;
+
+  @media (max-width: 768px) {
+    margin-left: 16px;
+  }
 `;
 
 export const NavItems = styled.ul`
   display: flex;
   list-style: none;
   margin-left: 16px;
   flex: 1;
+  font-size: 16px;
+
+  @media (max-width: 768px) {
+    display: none;
+  }
 `;
 
 export const StyledNavLink = styled(Link)`
   margin-right: 15px;
   cursor: pointer;
-  color: #ddd;
+  color: #000000;
   text-decoration: none;
 
   &:hover {
-    color: #fff;
+    color: #555;
   }
 `;
 
-export const NavItem = styled.li`
-  margin-right: 32px;
+export const LoginText = styled.span`
   cursor: pointer;
-  color: #ddd;
+  color: #000000;
+  margin-right: 15px;
+  font-size: 16px;
 
   &:hover {
-    color: #fff;
+    color: #555;
+  }
+
+  @media (max-width: 768px) {
+    margin-left: auto;
   }
 `;
 
-export const LoginButton = styled.button`
-  background-color: #555;
+export const SignUpButton = styled.button`
+  background-color: #000000;
   color: white;
-  padding: 8px 16px;
+  padding: 12px 20px;
   border: none;
-  border-radius: 4px;
+  border-radius: 10px;
   cursor: pointer;
+  font-size: 16px;
+  margin-left: 16px;
 
   &:hover {
-    background-color: #777;
+    background-color: #333;
+  }
+
+  @media (max-width: 768px) {
+    display: none;
   }
 `;
+
+export const DrawerMenu = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 250px;
+  height: 100%;
+  background-color: #ffffff;
+  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
+  z-index: 1100;
+  display: flex;
+  flex-direction: column;
+  padding: 20px;
+`;
+
+export const Overlay = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 1099;
+`;
diff --git a/src/components/ProjectCard/styles.ts b/src/components/ProjectCard/styles.ts
@@ -1,7 +1,7 @@
 import styled from "@emotion/styled";
 
 export const Card = styled.div`
-  width: 300px;
+  width: 100%;
   border: 1px solid #ddd;
   border-radius: 8px;
   overflow: hidden;

diff --git a/src/pages/styles.ts b/src/pages/styles.ts
@@ -1,23 +1,32 @@
-// styles/styles.ts
 import styled from "@emotion/styled";
 
 export const GridContainer = styled.div`
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
   gap: 16px;
   padding: 20px;
   max-width: 1800px;
+  margin: 0 auto;
+  width: 100%;
+  place-items: center;
 
-  @media (min-width: 1200px) {
+  // 1920px 이상일 때 5열
+  @media (min-width: 1920px) {
     grid-template-columns: repeat(5, 1fr);
   }
-  @media (max-width: 1200px) and (min-width: 768px) {
-    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  // 1200px 이상 1920px 미만일 때 4열
+  @media (min-width: 1200px) and (max-width: 1919px) {
+    grid-template-columns: repeat(4, 1fr);
   }
-  @media (max-width: 768px) {
-    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  // 768px 이상 1200px 미만일 때 3열
+  @media (min-width: 768px) and (max-width: 1299px) {
+    grid-template-columns: repeat(3, 1fr);
   }
-  @media (max-width: 480px) {
+  // 480px 이상 768px 미만일 때 2열
+  @media (min-width: 480px) and (max-width: 999px) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  // 480px 미만일 때 1열
+  @media (max-width: 699px) {
     grid-template-columns: 1fr;
   }
 `;