From 5737739e7da712f78bc6e09a103ef8dcb4ec7660 Mon Sep 17 00:00:00 2001 From: sichoi42 <42.4.sichoi@gmail.com> Date: Wed, 13 Dec 2023 13:16:05 +0900 Subject: [PATCH] : left-side bar font to Godo --- src/component/article/ArticleCard.jsx | 126 +++++++++++++------------- src/component/common/LeftSideBar.jsx | 98 +++++++++++++------- 2 files changed, 132 insertions(+), 92 deletions(-) diff --git a/src/component/article/ArticleCard.jsx b/src/component/article/ArticleCard.jsx index 517441f..c83a198 100644 --- 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 ( - - - {title} - - {date} - 작성자 : {reporter} - - + + + {title} + + {date} + 작성자 : {reporter} + + - ); + ); } 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 index f86c02a..616bca9 100644 --- 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,10 +25,9 @@ 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}`; } }; @@ -36,36 +35,71 @@ function LeftSideBar({isOpen}) { return ( toggleItem(1)} children="유니스피어" /> - {(toggleStates[1]) && ( + {toggleStates[1] && ( - {moveToPage("intro")}}>플랫폼 소개 - {moveToPage("guide")}}>이용 안내 + { + moveToPage("intro"); + }} + > + 플랫폼 소개 + + { + moveToPage("guide"); + }} + > + 이용 안내 + 공지 사항 - + )} toggleItem(2)} children="뉴스 레터" /> - {(toggleStates[2]) && ( + {toggleStates[2] && ( - {moveToPage("article")}}>이달의 소식지 + { + moveToPage("article"); + }} + > + 이달의 소식지 + 소식지 투고 광고 문의 - + )} toggleItem(3)} children="단체 활동" /> - {(toggleStates[3]) && ( + {toggleStates[3] && ( - {moveToPage("myhomepage")}}>단체 홈페이지 - {moveToPage("plaza")}}>소통의 광장 + { + moveToPage("myhomepage"); + }} + > + 단체 홈페이지 + + { + moveToPage("plaza"); + }} + > + 소통의 광장 + 모든 단체 보기 - + )} - {moveToPage(" ")}} children="메인 화면" /> + { + moveToPage(" "); + }} + children="메인 화면" + /> ); } -const SideBarItems = ({onToggle, children}) => { +const SideBarItems = ({ onToggle, children }) => { return ( 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; } `;