Merge pull request #10 from StopSoo/forked

단체 홈피 화면 : 맘에 드는 완성 ! 및 메뉴바/알림바 수정 etc.
FF-UNI-SPHERE · Dec 6, 2023 · 412174d · 412174d
2 parents 1269821 + 585f584
commit 412174d
Show file tree

Hide file tree

Showing 18 changed files with 281 additions and 130 deletions.
diff --git 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,
         }
     ])
 );
diff --git a/src/component/main screen/Alert.jsx → src/component/common/Alert.jsx b/src/component/main screen/Alert.jsx → 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 (
       <AlertPosition>
-        <AlertIcon
+        <AlertButton
           onMouseOver={() => setIsAlertHovered(true)}
           onMouseOut={() => setIsAlertHovered(false)}
         >
           <HiBell
-            size='4vh'
+            size='5vh'
             color={ isAlertHovered ? 'white' : 'black' }
           />
-        </AlertIcon>
-        <MessageIcon
+        </AlertButton>
+
+        <MessageButton
           onMouseOver={() => setIsMessageHovered(true)}
           onMouseOut={() => setIsMessageHovered(false)}
         >
           <TbMessage 
-            size='4vh'
+            size='5.3vh'
             color={ isMessageHovered ? 'white' : 'black' }
           />
-        </MessageIcon>
+        </MessageButton>
       </AlertPosition>
     );
   } else {  // 알람이 존재한다면
     return (
       <AlertPosition>
-        <AlertIcon
+        <AlertButton
           onMouseOver={() => setIsAlertHovered(true)}
           onMouseOut={() => setIsAlertHovered(false)}
         >
-          <HiBellAlert
-            size='4vh'
-            color={ isAlertHovered ? 'white' : 'black' }
+          <HiBell
+            size='5vh'
+            color={isAlertHovered ? 'white' : 'black'}
           />
-        </AlertIcon>
-        <MessageIcon
+          <IoMdAlert
+            size='2.5vh'
+            color='red'
+            style={{ position: 'absolute', top: '0', right: '5%' }}
+          />
+        </AlertButton>
+
+        <MessageButton
           onMouseOver={() => setIsMessageHovered(true)}
           onMouseOut={() => setIsMessageHovered(false)}
         >
           <TbMessage 
-            size='4vh'
+            size='5.3vh'
             color={ isMessageHovered ? 'white' : 'black' }
           />
-        </MessageIcon>
+        </MessageButton>
       </AlertPosition>
     );
   }
@@ -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 → src/component/common/Avatar.jsx b/src/component/main screen/Avatar.jsx → src/component/common/Avatar.jsx
@@ -7,7 +7,7 @@ function Avatar(props) {
       marginLeft: props.marginLeft, 
       marginTop: props.marginTop, 
     }}>
-      <img src={props.src} alt='ch'/>
+      <img src={props.src} width={props.width} alt='ch'/>
       <name>{props.name}</name>
     </IsAvatar>
   );
@@ -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 → src/component/common/MenuBar.jsx b/src/component/main screen/RNB.jsx → 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 (
     <Menus>
+      <LeftNavigationBar/>
+      <RightNavigationBar EnterPrise={'KCOC'}/>
+    </Menus>
+  );
+}
+
+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 (
+    <LeftNavigationButton
+      onMouseOver={() => setIsMenuHovered(true)}
+      onMouseOut={() => setIsMenuHovered(false)}
+    >
+      <FiMenu 
+        size='40px'
+        color={ isMenuHovered ? 'white' : 'black' }
+      />
+    </LeftNavigationButton>
+  );
+}
+
+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 (
+    <Navs>
       <Logout>로그아웃</Logout>
       <Bar>|</Bar>
       <Plaza>소통의 광장</Plaza>
       <Bar>|</Bar>
       <EnterprisePage>{EnterPrise} 홈페이지</EnterprisePage>
-    </Menus>
+    </Navs>
   );
 }
 
-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;
+export default MenuBar;
diff --git 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
diff --git a/src/component/header/MenuNav.jsx b/src/component/header/MenuNav.jsx
diff --git a/src/component/header/TopNav.jsx b/src/component/header/TopNav.jsx
diff --git 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() {
       <Avatar 
         name='KOICA' 
         src={ch1Root}
+        width='155vw'
         marginLeft='14.3%'
         marginTop='61vh'
       />
       <Avatar 
         name='UNISPHERE' 
         src={ch2Root}
+        width='155vw'
         marginLeft='45%'
         marginTop='59.5vh'
       />
       <Avatar 
         name='Jisoo' 
         src={ch3Root}
+        width='210vw'
         marginLeft='71.3%'
         marginTop='59.5vh'
       />
@@ -52,9 +55,4 @@ const LogoPart = styled.div`
   position: relative;
 `;
 
-// const AvatarPart = styled.div`
-//   display: flex;
-//   flex-direction: row;
-// `;
-
 export default AfterLoginSet;
diff --git 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() {
       <Avatar 
         name='UNISPHERE' 
         src={chRoot}
+        width='155vw'
         marginLeft='45%'
         marginTop='59.5vh'
       />
@@ -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
@@ -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 (<div><StyledButton>{children}</StyledButton></div>);
 }
 
@@ -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 {