diff --git a/config-overrides.js b/config-overrides.js index 5b39f09..ed81e79 100644 --- a/config-overrides.js +++ b/config-overrides.js @@ -5,7 +5,7 @@ module.exports = override( 'babel-plugin-styled-components', { displayName: true, - fileName: false + fileName: false, } ]) ); \ No newline at end of file diff --git a/src/component/main screen/Alert.jsx b/src/component/common/Alert.jsx similarity index 67% rename from src/component/main screen/Alert.jsx rename to src/component/common/Alert.jsx index 285b86e..e50feaa 100644 --- a/src/component/main screen/Alert.jsx +++ b/src/component/common/Alert.jsx @@ -1,58 +1,65 @@ import React, { useState } from 'react'; import styled from 'styled-components'; import { HiBell } from "react-icons/hi2"; -import { HiBellAlert } from "react-icons/hi2"; import { TbMessage } from "react-icons/tb"; +import { IoMdAlert } from "react-icons/io"; function AlertBar() { - const [isAlertExist, setIsAlertExist] = useState(false); // 알람 존재 여부에 따라 아이콘 변경 + const [isAlertExist, setIsAlertExist] = useState(true); // 알람 존재 여부에 따라 아이콘 변경 const [isAlertHovered, setIsAlertHovered] = useState(false); // 알림 버튼 hover 여부 const [isMessageHovered, setIsMessageHovered] = useState(false); // 채팅 버튼 hover 여부 - if (!isAlertExist) { // 알람이 존재하지 않으면 + if (!isAlertExist) { // 알람이 존재하지 않는다면 return ( - setIsAlertHovered(true)} onMouseOut={() => setIsAlertHovered(false)} > - - + + setIsMessageHovered(true)} onMouseOut={() => setIsMessageHovered(false)} > - + ); } else { // 알람이 존재한다면 return ( - setIsAlertHovered(true)} onMouseOut={() => setIsAlertHovered(false)} > - - - + + + setIsMessageHovered(true)} onMouseOut={() => setIsMessageHovered(false)} > - + ); } @@ -65,13 +72,12 @@ const AlertPosition = styled.div` justify-content: flex-end; `; -const AlertIcon = styled.button` - width: 40px; +const AlertButton = styled.button` + width: 50px; background: none; border: none; position: relative; - margin: 0 1% 0 2%; - padding: 1% 0 0 0; + margin: 0 1.3% 0 3%; cursor: pointer; &:active, @@ -80,13 +86,12 @@ const AlertIcon = styled.button` } `; -const MessageIcon = styled.button` +const MessageButton = styled.button` width: 50px; background: none; border: none; position: relative; - margin: 0 2% 0 1%; - padding: 1% 0 0 0; + margin: 0 3% 0 1.3%; display: flex; cursor: pointer; diff --git a/src/component/main screen/Avatar.jsx b/src/component/common/Avatar.jsx similarity index 88% rename from src/component/main screen/Avatar.jsx rename to src/component/common/Avatar.jsx index 78000a6..1d4b4d4 100644 --- a/src/component/main screen/Avatar.jsx +++ b/src/component/common/Avatar.jsx @@ -7,7 +7,7 @@ function Avatar(props) { marginLeft: props.marginLeft, marginTop: props.marginTop, }}> - ch + ch {props.name} ); @@ -17,7 +17,7 @@ const IsAvatar = styled.div` align-items: center; width: 10vw; text-align: center; - position: fixed; + position: absolute; display: flex; flex-direction: column; // 캐릭터의 이름 diff --git a/src/component/main screen/RNB.jsx b/src/component/common/MenuBar.jsx similarity index 63% rename from src/component/main screen/RNB.jsx rename to src/component/common/MenuBar.jsx index 516800a..cb3f5d4 100644 --- a/src/component/main screen/RNB.jsx +++ b/src/component/common/MenuBar.jsx @@ -1,21 +1,76 @@ import React, { useState } from 'react'; import styled from 'styled-components'; +import { FiMenu } from "react-icons/fi"; -function RightNavigationBar({ EnterPrise }) { +// 화면 최상단에 위치한 전체 메뉴 바 +function MenuBar({ EnterPrise }) { const [isMenuHovered, setIsMenuHovered] = useState(false); // 버튼 hover 여부 return ( + + + + ); +} + +const Menus = styled.div` + width: auto; + height: 8vh; + background: none; + border: none; + display: flex; + flex-direction: row; +`; + +// LNB +function LeftNavigationBar({}) { + const [isMenuHovered, setIsMenuHovered] = useState(false); // 버튼 hover 여부 + + return ( + setIsMenuHovered(true)} + onMouseOut={() => setIsMenuHovered(false)} + > + + + ); +} + +const LeftNavigationButton = styled.button` + width: 5vw; + height: 8vh; + background: none; + border: none; + position: relative; + justify-content: flex-start; + cursor: pointer; + + &:active, + &:hover { + transition: 0.7s; + } +`; + +// RNB +function RightNavigationBar({ EnterPrise }) { + const [isMenuHovered, setIsMenuHovered] = useState(false); // 버튼 hover 여부 + + return ( + 로그아웃 | 소통의 광장 | {EnterPrise} 홈페이지 - + ); } -const Menus = styled.div` +const Navs = styled.div` width: 31vw; height: 4vh; background: white; @@ -75,13 +130,6 @@ const Plaza = styled.button` &:hover { transition: 0.7s; } - // 고도체 - @font-face { - font-family: 'Godo'; - font-style: normal; - font-weight: 700; - src: url('//cdn.jsdelivr.net/korean-webfonts/1/corps/godo/Godo/GodoB.woff2') format('woff2'), url('//cdn.jsdelivr.net/korean-webfonts/1/corps/godo/Godo/GodoB.woff') format('woff'); - } `; const EnterprisePage = styled.button` @@ -98,13 +146,6 @@ const EnterprisePage = styled.button` &:hover { transition: 0.7s; } - // 고도체 - @font-face { - font-family: 'Godo'; - font-style: normal; - font-weight: 700; - src: url('//cdn.jsdelivr.net/korean-webfonts/1/corps/godo/Godo/GodoB.woff2') format('woff2'), url('//cdn.jsdelivr.net/korean-webfonts/1/corps/godo/Godo/GodoB.woff') format('woff'); - } `; -export default RightNavigationBar; \ No newline at end of file +export default MenuBar; \ No newline at end of file diff --git a/src/component/guide/GuideTemplate.jsx b/src/component/guide/GuideTemplate.jsx index 2cf6f1d..ac9546c 100644 --- a/src/component/guide/GuideTemplate.jsx +++ b/src/component/guide/GuideTemplate.jsx @@ -1,8 +1,8 @@ import React, { useRef, useEffect, useState } from "react"; import styled from 'styled-components'; -import MenuBar from '../main screen/MenuBar'; -import AlertBar from '../main screen/Alert'; -import {imglist, GuideContents} from './GuideContents.jsx'; +import MenuBar from '../common/MenuBar'; +import AlertBar from '../common/Alert'; +import { imglist, GuideContents } from './GuideContents.jsx'; import GrayNavBar from "./GrayNavBar.jsx"; function GuideTemplate() { diff --git a/src/component/header/Header.jsx b/src/component/header/Header.jsx deleted file mode 100644 index e69de29..0000000 diff --git a/src/component/header/MenuNav.jsx b/src/component/header/MenuNav.jsx deleted file mode 100644 index e69de29..0000000 diff --git a/src/component/header/TopNav.jsx b/src/component/header/TopNav.jsx deleted file mode 100644 index e69de29..0000000 diff --git a/src/component/main screen/AfterLogin.jsx b/src/component/main screen/AfterLogin.jsx index 0cb9313..d086f71 100644 --- a/src/component/main screen/AfterLogin.jsx +++ b/src/component/main screen/AfterLogin.jsx @@ -1,12 +1,12 @@ import React from 'react'; import styled from 'styled-components'; -import Avatar from './Avatar.jsx'; +import Avatar from '../common/Avatar.jsx'; import logoRoot from '../resource/unisphere_logo.png'; import ch1Root from '../resource/avatar_koica.png'; import ch2Root from '../resource/avatar_unisphere.png'; import ch3Root from '../resource/avatar_individual.png'; -import MenuBar from './MenuBar.jsx'; -import AlertBar from './Alert.jsx'; +import MenuBar from '../common/MenuBar.jsx'; +import AlertBar from '../common/Alert.jsx'; /* 사용자가 로그인한 후 화면 배치 */ function AfterLoginSet() { @@ -20,18 +20,21 @@ function AfterLoginSet() { @@ -52,9 +55,4 @@ const LogoPart = styled.div` position: relative; `; -// const AvatarPart = styled.div` -// display: flex; -// flex-direction: row; -// `; - export default AfterLoginSet; \ No newline at end of file diff --git a/src/component/main screen/BeforeLogin.jsx b/src/component/main screen/BeforeLogin.jsx index fdc41ba..8617949 100644 --- a/src/component/main screen/BeforeLogin.jsx +++ b/src/component/main screen/BeforeLogin.jsx @@ -1,7 +1,7 @@ import React from 'react'; import styled from 'styled-components'; import Button from './ButtonSet.jsx' -import Avatar from './Avatar.jsx'; +import Avatar from '../common/Avatar.jsx'; import logoRoot from '../resource/unisphere_logo.png'; import chRoot from '../resource/avatar_unisphere.png'; @@ -27,6 +27,7 @@ function BeforeLoginSet() { @@ -70,7 +71,7 @@ const BubblePart = styled.div` -moz-border-radius: 10px; border-radius: 10px; text-align: center; - position: fixed; + position: absolute; text { font-family: 'Godo', sans-serif; font-size: 10px; diff --git a/src/component/main screen/ButtonSet.jsx b/src/component/main screen/ButtonSet.jsx index 30015a9..020bf39 100644 --- a/src/component/main screen/ButtonSet.jsx +++ b/src/component/main screen/ButtonSet.jsx @@ -2,10 +2,6 @@ import styled from "styled-components"; import { BrowserRouter as Router, Route, Switch, Link } from "react-router-dom"; function Button({ children, onClick }) { - // function handleClick(e) { - // if (onClick == 'navigateToLogin') - // window.location.href = '/login' - // } return (
{children}
); } @@ -14,7 +10,6 @@ const StyledButton = styled.button` width: 16.53%; height: 8vh; border: none; - cursor: pointer; font-family: 'Godo', sans-serif; font-size: 1.6vw; padding: var(--button-padding, 12px 16px); @@ -23,6 +18,7 @@ const StyledButton = styled.button` color: var(--button-color, #ffffff); box-shadow: 5px 5px 5px 0px gray; + cursor: pointer; &:active, &:hover, &:focus { diff --git a/src/component/main screen/LNB.jsx b/src/component/main screen/LNB.jsx deleted file mode 100644 index 09b024f..0000000 --- a/src/component/main screen/LNB.jsx +++ /dev/null @@ -1,36 +0,0 @@ -import React, { useState } from 'react'; -import styled from 'styled-components'; -import { FiMenu } from "react-icons/fi"; - -function LeftNavigationBar({}) { - const [isMenuHovered, setIsMenuHovered] = useState(false); // 버튼 hover 여부 - - return ( - setIsMenuHovered(true)} - onMouseOut={() => setIsMenuHovered(false)} - > - - - ); -} - -const LeftNavigationButton = styled.button` - width: 5vw; - height: 8vh; - background: none; - border: none; - position: relative; - justify-content: flex-start; - cursor: pointer; - - &:active, - &:hover { - transition: 0.7s; - } -`; - -export default LeftNavigationBar; \ No newline at end of file diff --git a/src/component/main screen/MenuBar.jsx b/src/component/main screen/MenuBar.jsx deleted file mode 100644 index f9c2978..0000000 --- a/src/component/main screen/MenuBar.jsx +++ /dev/null @@ -1,26 +0,0 @@ -import React, { useState } from 'react'; -import styled from 'styled-components'; -import LeftNavigationBar from './LNB.jsx'; -import RightNavigationBar from './RNB.jsx'; - -function MenuBar({ EnterPrise }) { - const [isMenuHovered, setIsMenuHovered] = useState(false); // 버튼 hover 여부 - - return ( - - - - - ); -} - -const Menus = styled.div` - width: auto; - height: 8vh; - background: none; - border: none; - display: flex; - flex-direction: row; -`; - -export default MenuBar; \ No newline at end of file diff --git a/src/component/resource/koica_logo.png b/src/component/resource/koica_logo.png new file mode 100644 index 0000000..4dbc569 Binary files /dev/null and b/src/component/resource/koica_logo.png differ diff --git a/src/component/resource/koica_need.png b/src/component/resource/koica_need.png new file mode 100644 index 0000000..243a65c Binary files /dev/null and b/src/component/resource/koica_need.png differ diff --git a/src/component/resource/unisphere_logo_hand.png b/src/component/resource/unisphere_logo_hand.png new file mode 100644 index 0000000..d9671e9 Binary files /dev/null and b/src/component/resource/unisphere_logo_hand.png differ diff --git a/src/screen/HomepageScreen.jsx b/src/screen/HomepageScreen.jsx index 3a2d395..9ee9c7b 100644 --- a/src/screen/HomepageScreen.jsx +++ b/src/screen/HomepageScreen.jsx @@ -1,11 +1,46 @@ import React from 'react'; import styled from 'styled-components'; +import MenuBar from '../component/common/MenuBar.jsx'; +import AlertBar from '../component/common/Alert.jsx'; +import Avatar from '../component/common/Avatar.jsx'; +import chRoot from '../component/resource/avatar_koica.png'; +import logoRoot from '../component/resource/koica_logo.png'; +import koicaNeedRoot from '../component/resource/koica_need.png'; +import handIconRoot from '../component/resource/unisphere_logo_hand.png'; function HomepageScreen() { return ( + + + + logo + + 홈피 + 공지사항 - + + + KOICA 홈페이지에
+ 방문한 걸 환영해 ~ + + + + + + +

우리 단체의 목적

+
개발도상국의 빈곤감소 및 삶의 질 향상, 여성, 아동, 장애인, 청소년의 인권향상, 성평등 실현, 지속가능한 발전 및 인도주의를 실현하고, 협력대상국과의 경제 협력 및 우호협력관계 증진, 국제사회의 평화와 번영에 기여함.
+ +

이런 사람들을 원해요!

+ + ); @@ -14,14 +49,151 @@ function HomepageScreen() { const HomepagePosition = styled.div` display: flex; flex-direction: column; + width: 100vw; + height: 100vh; `; const WhiteBox = styled.div` - width: 77.5%; + width: 77.5vw; + height: 58.1vh; background-color: white; opacity: 90%; - border-radius: 30 30 0 0; - margin: auto; // 가운데 정렬 + border-radius: 30px 30px 0 0; + margin: auto auto 0 auto; // 가운데 하단 정렬 + position: relative; + z-index: 0; +`; + +const LogoPart = styled.div` + width: 13vw; + height: 13vw; + background-color: white; + border-radius: 100px; + margin: 0 auto 0 auto; + display: flex; + flex-direction: column; + position: relative; + justify-content: center; + + img { + margin: 0 auto 0 auto; + } +`; + +const BubblePart = styled.div` + width: 140px; + height: 50px; + border: none; + border-radius: var(--button-radius, 20px); + background-color: var(--bubble-bg-color, #d9d9d9); + margin-top: 11vh; + margin-left: 10vw; + padding: 3px 10px 3px 10px; + box-shadow: 4px 4px 4px 0px gray; + -webkit-border-radius: 10px; + -moz-border-radius: 10px; + border-radius: 10px; + text-align: center; + position: absolute; + text { + font-family: 'Godo', sans-serif; + font-size: 10px; + } +`; + +const BubbleBubble = styled.div` + position: absolute; + border-style: solid; + border-width: 22px 14px 0; + border-color: #D9D9D9 transparent; + display: block; + width: 0; + z-index: 1; + bottom: -22px; + left: 29px; +`; + +const ButtonOne = styled.button` + width: 8.5vw; + height: 11vh; + background: var(--button-bg-color, #FAFF00); + opacity: 85%; + border: none; + border-radius: 20px 20px 0 0; + position: absolute; + z-index: 3; // 컴포넌트 상대적으로 배치 + top: 34vh; + left: 17vw; + font-family: 'Godo', sans-serif; + font-size: 15px; + box-shadow: 5px 5px 5px 0px gray; + + cursor: pointer; + &:active, + &:hover, + &:focus { + opacity: 100%; + } + // 고도체 + @font-face { + font-family: 'Godo'; + font-style: normal; + font-weight: 700; + src: url('//cdn.jsdelivr.net/korean-webfonts/1/corps/godo/Godo/GodoB.woff2') format('woff2'), url('//cdn.jsdelivr.net/korean-webfonts/1/corps/godo/Godo/GodoB.woff') format('woff'); + } +`; + +const ButtonTwo = styled.button` + width: 8.5vw; + height: 11vh; + background: var(--button-bg-color, #0029FF); + opacity: 85%; + border: none; + border-radius: 20px 20px 0 0; + position: absolute; + z-index: 0; // 컴포넌트 상대적으로 배치 + top: 34vh; + left: 26.5vw; + font-family: 'Godo', sans-serif; + font-size: 15px; + color: white; + box-shadow: 5px 5px 5px 0px gray; + + cursor: pointer; + &:active, + &:hover, + &:focus { + opacity: 100%; + } +`; + +const TextPart = styled.div` + width: 50vw; + height: 50vh; + border: none; + position: relative; + left: 26vw; + top: 4vh; + + h1 { + font-family: 'Malgun Gothic', sans-serif; + font-weight: 700; + font-size: 24px; + margin-left: 36px; + margin-top: 0; + } + + main { + font-family: 'Malgun Gothic', sans-serif; + font-weight: 300; + font-size: 18px; + padding: 0 14px 40px 14px; + } + + icon { + width: 30px; + position: absolute; + } `; export default HomepageScreen; \ No newline at end of file diff --git a/src/screen/MainScreen.jsx b/src/screen/MainScreen.jsx index 2233a21..866defc 100644 --- a/src/screen/MainScreen.jsx +++ b/src/screen/MainScreen.jsx @@ -7,7 +7,7 @@ import AfterLoginSet from '../component/main screen/AfterLogin'; function MainScreen(props) { const [IsLogin, setIsLogin] = useState(0); - if (!IsLogin) { + if (IsLogin) { return( );