style: 글꼴 변경

세종체, 샐러드체

Author: BeanMouse

public/fonts/S-Core_Dream/SCDream1.ttf

@@ -142,7 +142,8 @@ const Dropbox = styled.div<DropboxProps>`
   position: absolute;
   width: 100px;
   max-height: ${({ isOpened }) => (isOpened ? "200px" : "0px")};
-  transition: max-height 0.3s ease-in-out;
+  padding: ${({ isOpened }) => (isOpened ? "10px" : "0px")};
+  transition: max-height, padding 0.3s ease-in-out;
   border-radius: 10px;
   overflow-y: scroll;
   overflow-x: hidden;
@@ -152,7 +153,7 @@ const Dropbox = styled.div<DropboxProps>`
   z-index: 1;
   gap: 5px;
   top: 30px;
-  padding: 10px;
+
   background-color: #fff;
 
   ${({ isOpened }) =>

public/fonts/S-Core_Dream/SCDream2.ttf

@@ -0,0 +1,47 @@
+import styled from "@emotion/styled";
+
+interface MobileMenuProps {
+  isOpened: boolean;
+}
+const MobileMenu = styled.div<MobileMenuProps>`
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  width: 100%;
+  height: ${({ isOpened }) => (isOpened ? "175px" : "0px")};
+  transition: height 0.3s ease-in-out;
+  z-index: 1;
+  gap: 5px;
+  top: 55px;
+
+  overflow: hidden;
+  background-color: #fff;
+  ${({ isOpened }) =>
+    isOpened &&
+    `
+      box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.05);
+    `}
+`;
+const Menu = styled.div<MenuProps>`
+  position: fixed;
+  @media (max-width: 768px) {
+    gap: 0px;
+  }
+  gap: 200px;
+  z-index: 3;
+  width: calc(100%);
+  height: 55px;
+  background-color: white;
+  box-sizing: border-box;
+  top: 0px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  ${({ isMove }) =>
+    isMove ? `border-bottom:1px solid #E6E8EA` : `box-shadow:none`}
+`;
+interface MenuProps {
+  isMove: boolean;
+}
+
+export { MobileMenu, Menu };

public/fonts/S-Core_Dream/SCDream3.ttf

@@ -0,0 +1,31 @@
+import styled from "@emotion/styled";
+
+const Space = styled.div<{ isActive?: boolean }>`
+  cursor: pointer;
+  font-family: SejongGeulggot;
+  display: flex;
+  align-items: center;
+  height: 110%;
+  border: none;
+  color: ${({ isActive }) => (isActive ? "#ffaa00" : "inherit")};
+  border-bottom: ${({ isActive }) => (isActive ? "1px solid #ffaa00" : "none")};
+  &:hover {
+    color: #ffaa00;
+    border-bottom: 1px solid #ffaa00;
+  }
+  @media (max-width: 768px) {
+    padding: 10px 30px;
+    margin-top: 10px;
+    &:hover {
+      background-color: #f1f1f1;
+      border-bottom: none;
+      color: black;
+    }
+  }
+  font-weight: 300;
+  font-size: 16px;
+  padding: 5px;
+  width: auto;
+`;
+
+export default Space;

public/fonts/S-Core_Dream/SCDream4.ttf

@@ -1,43 +1,10 @@
-import styled from "@emotion/styled";
 import { css } from "@emotion/css";
 import React, { useEffect, useState, useContext } from "react";
 import logo from "/image/logo.svg";
 import { Link, useLocation } from "react-router-dom";
 import { AuthContext } from "../../contexts/AuthContext";
-
-const Menu = styled.div<MenuProps>`
-  position: fixed;
-  z-index: 3;
-  width: calc(100%);
-  height: 55px;
-  background-color: white;
-  box-sizing: border-box;
-  top: 0px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  ${({ isMove }) =>
-    isMove ? `border-bottom:1px solid #E6E8EA` : `box-shadow:none`}
-`;
-type MenuProps = {
-  isMove: boolean;
-};
-
-const Space = styled.div<{ isActive?: boolean }>`
-  cursor: pointer;
-  box-sizing: border-box;
-  border: none;
-  color: ${({ isActive }) => (isActive ? "#ffaa00" : "inherit")};
-  border-bottom: ${({ isActive }) => (isActive ? "3px solid #ffaa00" : "none")};
-  &:hover {
-    color: #ffaa00;
-    border-bottom: 3px solid #ffaa00;
-  }
-  font-weight: 300;
-  font-size: 16px;
-  padding: 5px;
-  width: auto;
-`;
+import { Menu } from "./Menu.tsx";
+import Space from "./Space.tsx";
 
 const NavBar: React.FC = () => {
   const { user } = useContext(AuthContext);

public/fonts/S-Core_Dream/SCDream5.ttf

@@ -5,56 +5,20 @@ import logo from "/image/logo.svg";
 import { Link, useLocation } from "react-router-dom";
 import useIsMobile from "../mobile/useIsMobile";
 import { IoClose, IoMenu } from "react-icons/io5";
+import Space from "./Space.tsx";
+import { Menu, MobileMenu } from "./Menu.tsx";
 
-const Menu = styled.div<MenuProps>`
-  position: fixed;
-  @media (max-width: 768px) {
-    gap: 0px;
-  }
-  gap: 200px;
-  z-index: 3;
-  width: calc(100%);
-  height: 55px;
-  background-color: white;
-  box-sizing: border-box;
-  top: 0px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  ${({ isMove }) =>
-    isMove ? `border-bottom:1px solid #E6E8EA` : `box-shadow:none`}
-`;
-type MenuProps = {
-  isMove: boolean;
-};
-
-const Space = styled.div<{ isActive?: boolean; isMobile?: boolean }>`
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  height: 110%;
-  border: none;
-
-  color: ${({ isActive }) => (isActive ? "#ffaa00" : "inherit")};
-  border-bottom: ${({ isActive }) => (isActive ? "3px solid #ffaa00" : "none")};
-  &:hover {
-    color: ${({ isMobile }) => (isMobile ? "inherit" : "#ffaa00")};
-    border-bottom: ${({ isMobile }) =>
-      isMobile ? "none" : "3px solid #ffaa00"};
-    background-color: ${({ isMobile }) => (isMobile ? "#f1f1f1" : "none")};
-  }
-  font-weight: 300;
-  font-size: 16px;
-  padding: ${({ isMobile }) => (isMobile ? "10px 30px" : "5px")};
-  margin-top: ${({ isMobile }) => (isMobile ? "10px" : "0px")};
-  width: auto;
-`;
 const NavBar2: React.FC = () => {
   const [isMove, setIsMove] = useState(false);
   const location = useLocation();
   const isMobile = useIsMobile();
   const [isOpen, setIsOpen] = useState(false);
-
+  const LogoutUser = () => {
+    localStorage.removeItem("accessToken");
+    localStorage.removeItem("refreshToken");
+    localStorage.removeItem("accessTokenExpireTime");
+    window.location.href = "/";
+  };
   useEffect(() => {
     const handleScroll = () => {
       setIsMove(window.scrollY > 0);
@@ -93,26 +57,15 @@ const NavBar2: React.FC = () => {
           `}
         >
           <Link to="/book">
-            <Space isActive={location.pathname === "/book"} isMobile={isMobile}>
-              예약하기
-            </Space>
+            <Space isActive={location.pathname === "/book"}>연습실</Space>
           </Link>
           <Link to="/board">
-            <Space
-              isActive={location.pathname === "/board"}
-              isMobile={isMobile}
-            >
-              게시판
-            </Space>
+            <Space isActive={location.pathname === "/board"}>게시판</Space>
           </Link>
           <Link to="/mypage">
-            <Space
-              isActive={location.pathname === "/mypage"}
-              isMobile={isMobile}
-            >
-              마이페이지
-            </Space>
+            <Space isActive={location.pathname === "/mypage"}>마이페이지</Space>
           </Link>
+          <LogOutButton onClick={LogoutUser}>로그아웃</LogOutButton>
         </div>
       ) : (
         <>
@@ -125,19 +78,13 @@ const NavBar2: React.FC = () => {
           </Button>
           <MobileMenu isOpened={isOpen}>
             <Link to="/book">
-              <Space isActive={false} isMobile={isMobile}>
-                예약하기
-              </Space>
+              <Space isActive={false}>예약하기</Space>
             </Link>
             <Link to="/board">
-              <Space isActive={false} isMobile={isMobile}>
-                게시판
-              </Space>
+              <Space isActive={false}>게시판</Space>
             </Link>
             <Link to="/mypage">
-              <Space isActive={false} isMobile={isMobile}>
-                마이페이지
-              </Space>
+              <Space isActive={false}>마이페이지</Space>
             </Link>
           </MobileMenu>
         </>
@@ -155,25 +102,12 @@ const Button = styled.button`
   font-size: 20px;
   margin-right: 30px;
 `;
-interface MobileMenuProps {
-  isOpened: boolean;
-}
-const MobileMenu = styled.div<MobileMenuProps>`
-  display: flex;
-  flex-direction: column;
-  position: absolute;
-  width: 100%;
-  height: ${({ isOpened }) => (isOpened ? "175px" : "0px")};
-  transition: height 0.3s ease-in-out;
-  z-index: 1;
-  gap: 5px;
-  top: 55px;
-
-  overflow: hidden;
-  background-color: #fff;
-  ${({ isOpened }) =>
-    isOpened &&
-    `
-    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.05);
-  `}
+const LogOutButton = styled.button`
+  background-color: transparent;
+  border: 1.5px solid #fec511;
+  border-radius: 25px;
+  padding: 5px 15px;
+  cursor: pointer;
+  font-size: 13px;
+  margin-right: 30px;
 `;

public/fonts/S-Core_Dream/SCDream6.ttf

@@ -1,43 +1,9 @@
-import styled from "@emotion/styled";
 import { css } from "@emotion/css";
 import React, { useEffect, useState } from "react";
 import logo from "/image/logo.svg";
 import { Link, useLocation } from "react-router-dom";
-
-const Menu = styled.div<MenuProps>`
-  position: fixed;
-  z-index: 3;
-  width: calc(100%);
-  height: 55px;
-  background-color: white;
-  box-sizing: border-box;
-  top: 0px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  ${({ isMove }) =>
-    isMove ? `border-bottom:1px solid #E6E8EA` : `box-shadow:none`}
-`;
-type MenuProps = {
-  isMove: boolean;
-};
-
-const Space = styled.div<{ isActive?: boolean }>`
-  cursor: pointer;
-  box-sizing: border-box;
-  border: none;
-  color: ${({ isActive }) => (isActive ? "#ffaa00" : "inherit")};
-  border-bottom: ${({ isActive }) => (isActive ? "3px solid #ffaa00" : "none")};
-  &:hover {
-    color: #ffaa00;
-    border-bottom: 3px solid #ffaa00;
-  }
-  font-weight: 300;
-  font-size: 16px;
-  padding: 5px;
-  width: auto;
-`;
-
+import Space from "./Space";
+import { Menu } from "./Menu";
 const NavBar3: React.FC = () => {
   const [isMove, setIsMove] = useState(false);
   const location = useLocation();

public/fonts/S-Core_Dream/SCDream7.ttf

@@ -11,19 +11,21 @@ interface NavProps {
   isActive: boolean;
 }
 const Nav = styled.button<NavProps>`
+SejongGeulggot
   font-size: 17px;
+  font-family: S-CoreDream, sans-serif;
   min-width: 80px;
+  font-weight: 100;
+  font-size: 15px;
   @media (max-width: 768px) {
     min-width: 40px;
     font-size: 15px;
   }
   background-color: ${({ isActive }) => (isActive ? "#FFF4D5" : "transparent")};
-  font-weight: 300;
   white-space: nowrap;
   border-radius: 10px;
   padding: 10px;
   color: black;
-
   &:hover,
   &:active {
     background-color: #fff4d5;

public/fonts/S-Core_Dream/SCDream8.ttf

@@ -1,6 +1,6 @@
 import { css } from "@emotion/css";
 import NavBar from "../components/navBar/navBar.tsx";
-import monkey from "/monkey.svg";
+import monkey from "/image/monkey.svg";
 import { useNavigate } from "react-router-dom";
 import { useEffect } from "react";
 const HomePage = () => {

public/fonts/S-Core_Dream/SCDream9.ttf

@@ -3,10 +3,22 @@ import fonts from "../assets/font/font.ts";
 const GlobalStyle = () => (
   <Global
     styles={css`
+      @font-face {
+        font-family: "S-CoreDream";
+        src: url(/fonts/S-Core_Dream/SCDream2.ttf) format("trueType");
+        font-weight: 200;
+        font-style: normal;
+      }
+      @font-face {
+        font-family: SejongGeulggot;
+        src: url(/fonts/SejongGeulggot.ttf) format("truetype");
+        font-weight: 300;
+        font-style: normal;
+      }
       ${fonts}
       * {
         box-sizing: border-box;
-        font-family: "Spoqa Han Sans Neo", "Spoqa Han Sans JP", sans-serif;
+        font-family: "S-CoreDream", "Spoqa Han Sans JP", sans-serif;
         font-size: 15px;
         font-weight: 300;
       }