<fix>: left-side bar font to Godo

FF-UNI-SPHERE · Dec 13, 2023 · 5737739 · 5737739
1 parent c0c8e65
commit 5737739
Show file tree

Hide file tree

Showing 2 changed files with 132 additions and 92 deletions.
diff --git a/src/component/article/ArticleCard.jsx b/src/component/article/ArticleCard.jsx
@@ -1,90 +1,94 @@
-import React from 'react';
-import styled from 'styled-components';
+import React from "react";
+import styled from "styled-components";
 
-function ArticleCard({width, imgheight, image, title, date, reporter}) {
-    const oceanlink = "https://www.ohmynews.com/NWS_Web/Series/series_premium_pg.aspx?CNTN_CD=A0002846891";
+function ArticleCard({ width, imgheight, image, title, date, reporter }) {
+  const oceanlink =
+    "https://www.ohmynews.com/NWS_Web/Series/series_premium_pg.aspx?CNTN_CD=A0002846891";
 
-    const handlePopup = () => {
-        const popup = window.open(oceanlink, 'CardNews', 'width=800, height=600');
-    }
+  const handlePopup = () => {
+    const popup = window.open(oceanlink, "CardNews", "width=800, height=600");
+  };
 
-    return (
+  return (
     <CardWrapper $width={width} onClick={handlePopup}>
-        <ImageDiv $height={imgheight} src={image} alt="NewsThumbnail" />
-        <DescriptionWrapper>
-            <TitleText>{title}</TitleText>
-            <SubTextContainer>
-                <SubText>{date}</SubText>
-                <SubText>작성자 : {reporter}</SubText>
-            </SubTextContainer>
-        </DescriptionWrapper>
+      <ImageDiv $height={imgheight} src={image} alt="NewsThumbnail" />
+      <DescriptionWrapper>
+        <TitleText>{title}</TitleText>
+        <SubTextContainer>
+          <SubText>{date}</SubText>
+          <SubText>작성자 : {reporter}</SubText>
+        </SubTextContainer>
+      </DescriptionWrapper>
     </CardWrapper>
-    );
+  );
 }
 
 const CardWrapper = styled.button`
-    all: unset;
+  all: unset;
 
-    width: ${({$width}) => $width};
-    height: 80%;
-    border: 1px solid #ddd;
-    border-radius: 1vw;
-    overflow: hidden;
-    margin: 2vh 1vw;
-    box-shadow: 0.2vw 0.2vh 0.4vw rgba(0,0,0,0.1);
-    &:hover {
-        cursor: pointer;
-        transform: translateY(-0.5vh);
-        transition: transform 0.2s ease-in-out;
-        box-shadow: 0.2vw 0.2vh 0.4vw rgba(0,0,0,0.2);
-    }
+  width: ${({ $width }) => $width};
+  height: 80%;
+  border: 1px solid #ddd;
+  border-radius: 1vw;
+  overflow: hidden;
+  margin: 2vh 1vw;
+  box-shadow: 0.2vw 0.2vh 0.4vw rgba(0, 0, 0, 0.1);
+  &:hover {
+    cursor: pointer;
+    transform: translateY(-0.5vh);
+    transition: transform 0.2s ease-in-out;
+    box-shadow: 0.2vw 0.2vh 0.4vw rgba(0, 0, 0, 0.2);
+  }
+  &:active {
+    cursor: pointer;
+    transform: translateY(0.5vh);
+    transition: transform 0.2s ease-in-out;
+    box-shadow: 0.2vw 0.2vh 0.4vw rgba(0, 0, 0, 0.2);
     &:active {
-        cursor: pointer;
-        transform: translateY(0.5vh);
-        transition: transform 0.2s ease-in-out;
-        box-shadow: 0.2vw 0.2vh 0.4vw rgba(0,0,0,0.2);
-        &:active { opacity: 0.8; }
+      opacity: 0.8;
     }
+  }
 `;
 
 const ImageDiv = styled.div`
-    width: 100%;
-    height: ${({$height}) => $height};
-    background-image: url(${({src}) => src});
-    background-size: cover;        
-    background-position: center;   
-    background-repeat: no-repeat;
+  width: 100%;
+  height: ${({ $height }) => $height};
+  background-image: url(${({ src }) => src});
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
 `;
 
 const DescriptionWrapper = styled.div`
-    padding: 1vw;
-    white-space: pre-line;
+  padding: 1vw;
+  white-space: pre-line;
 `;
 
 const TitleText = styled.pre`
-    margin: 0;
-    color: #333;
-    font-size: 1.375rem;
-    font-weight: 700;
-    line-height: 1.875rem;
-    letter-spacing: -0.03125rem;
-    white-space: pre-line;
+  margin: 0;
+  color: #333;
+  font-size: 1.375rem;
+  font-weight: 700;
+  line-height: 1.875rem;
+  letter-spacing: -0.03125rem;
+  white-space: pre-line;
+  font-family: "Godo", sans-serif;
 `;
 
 const SubTextContainer = styled.div`
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    height: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  height: 100%;
 `;
 
 const SubText = styled.p`
-    color: #373737;
-    font-size: 1rem;
-    font-weight: 300;
-    line-height: 1.875rem;
-    letter-spacing: 0.03125rem;
-    margin-top: 0.5rem;
+  color: #373737;
+  font-size: 1rem;
+  font-weight: 300;
+  line-height: 1.875rem;
+  letter-spacing: 0.03125rem;
+  margin-top: 0.5rem;
 `;
 
 export default ArticleCard;
diff --git a/src/component/common/LeftSideBar.jsx b/src/component/common/LeftSideBar.jsx
@@ -1,22 +1,22 @@
-import React, {useState, useEffect} from 'react';
-import styled from 'styled-components';
-import unisphereHand from '../resource/unisphere_logo_hand.png';
+import React, { useState, useEffect } from "react";
+import styled from "styled-components";
+import unisphereHand from "../resource/unisphere_logo_hand.png";
 
-function LeftSideBar({isOpen}) {
+function LeftSideBar({ isOpen }) {
   const [toggleStates, setToggleStates] = useState({});
-  
+
   const toggleItem = (idx) => {
-    setToggleStates(prevState => ({
+    setToggleStates((prevState) => ({
       ...prevState,
-      [idx]: !prevState[idx]
+      [idx]: !prevState[idx],
     }));
   };
 
   useEffect(() => {
-    if(!isOpen) {
-      setToggleStates(prevState => {
+    if (!isOpen) {
+      setToggleStates((prevState) => {
         const newState = {};
-        for(const key in prevState) {
+        for (const key in prevState) {
           newState[key] = false;
         }
         return newState;
@@ -25,47 +25,81 @@ function LeftSideBar({isOpen}) {
   }, [isOpen]);
 
   const moveToPage = (link) => {
-    if(link === "plaza") {
-      window.location.href ="https://zep.us/play/87zbJV";
-    }
-    else {
+    if (link === "plaza") {
+      window.location.href = "https://zep.us/play/87zbJV";
+    } else {
       window.location.href = `/${link}`;
     }
   };
 
   return (
     <SideBar $isopen={isOpen}>
       <SideBarItems onToggle={() => toggleItem(1)} children="유니스피어" />
-      {(toggleStates[1]) && (
+      {toggleStates[1] && (
         <SubItemContents>
-          <SubItemBtn onClick={()=>{moveToPage("intro")}}>플랫폼 소개</SubItemBtn>
-          <SubItemBtn onClick={()=>{moveToPage("guide")}}>이용 안내</SubItemBtn>
+          <SubItemBtn
+            onClick={() => {
+              moveToPage("intro");
+            }}
+          >
+            플랫폼 소개
+          </SubItemBtn>
+          <SubItemBtn
+            onClick={() => {
+              moveToPage("guide");
+            }}
+          >
+            이용 안내
+          </SubItemBtn>
           <SubItemBtn>공지 사항</SubItemBtn>
-        </SubItemContents> 
+        </SubItemContents>
       )}
       <SideBarItems onToggle={() => toggleItem(2)} children="뉴스 레터" />
-      {(toggleStates[2]) && (
+      {toggleStates[2] && (
         <SubItemContents>
-          <SubItemBtn onClick={()=>{moveToPage("article")}}>이달의 소식지</SubItemBtn>
+          <SubItemBtn
+            onClick={() => {
+              moveToPage("article");
+            }}
+          >
+            이달의 소식지
+          </SubItemBtn>
           <SubItemBtn>소식지 투고</SubItemBtn>
           <SubItemBtn>광고 문의</SubItemBtn>
-        </SubItemContents> 
+        </SubItemContents>
       )}
       <SideBarItems children="기부 / 모금" />
       <SideBarItems onToggle={() => toggleItem(3)} children="단체 활동" />
-      {(toggleStates[3]) && (
+      {toggleStates[3] && (
         <SubItemContents>
-          <SubItemBtn onClick={()=>{moveToPage("myhomepage")}}>단체 홈페이지</SubItemBtn>
-          <SubItemBtn onClick={()=>{moveToPage("plaza")}}>소통의 광장</SubItemBtn>
+          <SubItemBtn
+            onClick={() => {
+              moveToPage("myhomepage");
+            }}
+          >
+            단체 홈페이지
+          </SubItemBtn>
+          <SubItemBtn
+            onClick={() => {
+              moveToPage("plaza");
+            }}
+          >
+            소통의 광장
+          </SubItemBtn>
           <SubItemBtn>모든 단체 보기</SubItemBtn>
-        </SubItemContents> 
+        </SubItemContents>
       )}
-      <SideBarItems onToggle={() => {moveToPage(" ")}} children="메인 화면" />
+      <SideBarItems
+        onToggle={() => {
+          moveToPage(" ");
+        }}
+        children="메인 화면"
+      />
     </SideBar>
   );
 }
 
-const SideBarItems = ({onToggle, children}) => {
+const SideBarItems = ({ onToggle, children }) => {
   return (
     <SideBarItemBtn onClick={onToggle}>
       <img src={unisphereHand} alt="UniSphereHand" />
@@ -86,7 +120,8 @@ const SideBar = styled.div`
   display: flex;
   flex-direction: column;
 
-  transform: ${({$isopen}) => $isopen ? 'translateX(0)' : 'translateX(-100%)'};
+  transform: ${({ $isopen }) =>
+    $isopen ? "translateX(0)" : "translateX(-100%)"};
   transition: transform 0.3s ease-in-out;
   z-index: 2000;
 `;
@@ -117,7 +152,7 @@ const SideBarItemBtn = styled.button`
     margin-top: 1.15rem;
   }
   &:hover {
-    color: #FFF;
+    color: #fff;
   }
 `;
 
@@ -126,10 +161,11 @@ const SubItemContents = styled.div`
   height: 13vh;
   display: flex;
   flex-direction: column;
+  font-family: "Godo", sans-serif;
 `;
 
 const SubItemBtn = styled.button`
-  width: 6.875rem;
+  width: 10rem;
   height: 1.8rem;
   font-size: 1rem;
   font-weight: 400;
@@ -145,7 +181,7 @@ const SubItemBtn = styled.button`
   border: none;
   cursor: pointer;
   &:hover {
-    color: #FFF;
+    color: #fff;
   }
 `;