Merge pull request #15 from StopSoo/forked

메인 화면 버튼 연결 및 로그인 페이지에 back button 추가 ! etc.

src/component/common/BackBar.jsx

@@ -0,0 +1,64 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { GoChevronLeft } from "react-icons/go";
+import { useNavigate } from 'react-router-dom';
+
+// 전 페이지로 돌아갈 수 있는 버튼이 있는 상단 바
+function BackBar() {
+  return (
+    <Menus>
+      <LeftBackBar/>
+    </Menus>
+  );
+}
+
+const Menus = styled.div`
+  width: auto;
+  height: 8vh;
+  background: none;
+  border: none;
+  display: flex;
+  flex-direction: row;
+  margin-right: auto;
+  margin-top: 1vh;
+`;
+
+function LeftBackBar({}) {
+  const [isBackHovered, setIsMenuHovered] = useState(false);  // 버튼 hover 여부
+  const navigate = useNavigate();
+
+  const isBackClick = () => {
+    navigate(-1); // 바로 이전 페이지로 가기
+  };
+
+  return (
+    <BackButton
+      onMouseOver={() => setIsMenuHovered(true)}
+      onMouseOut={() => setIsMenuHovered(false)}
+      onClick={isBackClick}
+    >
+      <GoChevronLeft
+          size='40px'
+          color={ isBackHovered ? 'white' : 'black' }
+      />
+    </BackButton>
+  );
+}
+
+const BackButton = styled.button`
+  width: 5vw;
+  height: 8vh;
+  background: none;
+  border: none;
+  position: relative;
+  justify-content: flex-start;
+  cursor: pointer;
+  z-index: 3000;
+
+  &:active,
+  &:hover {
+    transition: 0.7s;
+  }
+`;
+
+export default BackBar;

src/component/guide/GuideContents.jsx

@@ -20,7 +20,7 @@ const GuideContents = forwardRef(({detail, img, name}, ref) => {
         <ContentBox ref={ref}>
             <h4>{name}</h4>
             <pre>{detail}</pre>
-            <div style={{height: 'auto', marginBottom: '5vh'}} >
+            <div style={{ height: 'auto', marginBottom: '5vh' }} >
                 <GuideImage src={img.first} alt="First"/>
                 { img.second === null ? null : <GuideImage src={img.second} alt="Second"/>}
             </div>

src/component/guide/GuideTemplate.jsx

@@ -74,15 +74,17 @@ const TranslucentBox = styled.div`
 
     background-color: rgba(255, 255, 255, 0.90);
     border-radius: 1rem 1rem 0 0;
-
+    position: absolute;
 `;
 
 const ContentsContainer = styled.div`
     overflow: auto;
     height: calc(100% - 15vh);
-    width: 90%;
+    width: 83vw;
+    height: 65vh;
     margin-left: auto;
     margin-right: auto;
+    position: relative;
 `;
 
 export {GuideTemplate, TranslucentBox, ContentsContainer};

src/component/login/LoginTemplate.jsx

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import naverLogo from '../resource/logo_naver.png';
 import kakaoLogo from '../resource/logo_kakao.png';
 import googleLogo from '../resource/logo_google.png';
-
+import BackBar from '../common/BackBar.jsx';
 import WhiteBox from './WhiteBox'
 
 function LoginTemplate() {
@@ -18,13 +18,13 @@ function LoginTemplate() {
   };
 
   return (
-    //align-items: center -> 적용이 안되는 문제로 우선 삭제
-    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%' }}>
-      <WhiteBox >
+    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', height: '100%' }}>
+      <BackBar/>
+      <WhiteBox>
         <h1 className="title">로그인하기</h1>
         <h3>소셜 로그인으로 진행하세요</h3>
         <HorizontalLine position="top" />
-        <ButtonContainer >
+        <ButtonContainer>
           <SocialLoginButton socialtype="kakao" onClick={() => login('kakao')}>
             <SocialButtonIcon src={kakaoLogo} alt="카카오 로고" className="social-icon" />
             카카오 로그인
@@ -37,11 +37,11 @@ function LoginTemplate() {
             <SocialButtonIcon src={googleLogo} alt="구글 로고" className="social-icon" />
             &nbsp; 구글 로그인
           </SocialLoginButton>
-        </ButtonContainer >
+        </ButtonContainer>
         <HorizontalLine position="top" />
         {/* <HorizontalLine position="bottom"/>
                 <SignInButton >회원가입하기</SignInButton > */}
-      </WhiteBox >
+      </WhiteBox>
     </div>
   );
 };

src/component/login/WhiteBox.jsx

@@ -1,9 +1,11 @@
 import styled from 'styled-components';
 
 const WhiteBox  = styled.div`
+    justify-Content: 'center';
     width: 55%;
     height: auto;
     padding: 2% 5% 3% 5%;
+    margin: auto;
     border-radius: 30px;
     background-color: var(--white);
     h1 {

src/component/main screen/BeforeLogin.jsx

@@ -1,21 +1,36 @@
 import React from 'react';
 import styled from 'styled-components';
+import { useNavigate } from 'react-router-dom';
 import Button from './ButtonSet.jsx'
 import Avatar from '../common/Avatar.jsx';
 import logoRoot from '../resource/unisphere_logo.png';
 import chRoot from '../resource/avatar_unisphere.png';
 
 /* 사용자가 로그인하기 전 화면 배치 */
 function BeforeLoginSet() {
+  const navigate = useNavigate();
+
+  const navigateToLogin = () => {
+    navigate('/login');
+  };
+
+  const navigateToGuide = () => {
+    navigate('/guide');
+  }
+
+  const navigateToArticle = () => {
+    navigate('/article');
+  }
+
   return (
     <MainScreenPosition>
       <LogoPart>
         <img src={logoRoot} alt="logo"/>
       </LogoPart>
       <ButtonPart>
-        <Button children='로그인 / 회원가입'></Button>
-        <Button children='이용 안내'></Button>
-        <Button children='뉴스 레터'></Button>
+        <Button children='로그인 / 회원가입' onClickFunction={navigateToLogin}></Button>
+        <Button children='이용 안내' onClickFunction={navigateToGuide}></Button>
+        <Button children='뉴스 레터' onClickFunction={navigateToArticle}></Button>
       </ButtonPart>
       <BubblePart>
         <text>

src/component/main screen/ButtonSet.jsx

@@ -1,8 +1,7 @@
 import styled from "styled-components";
-import { BrowserRouter as Router, Route, Switch, Link } from "react-router-dom";
 
-function Button({ children, onClick }) {
-  return (<div><StyledButton>{children}</StyledButton></div>);
+function Button({ children, onClickFunction }) {
+  return (<div><StyledButton onClick={onClickFunction}>{children}</StyledButton></div>);
 }
 
 const StyledButton = styled.button`
@@ -20,8 +19,7 @@ const StyledButton = styled.button`
   
   cursor: pointer;
   &:active,
-  &:hover,
-  &:focus {
+  &:hover {
     background: var(--button-hover-bg-color, #5e5e5e);
   }
   // 고도체

src/screen/LoginScreen.jsx

@@ -2,7 +2,6 @@ import React from 'react';
 import LoginTemplate from "../component/login/LoginTemplate";
 
 function LoginScreen() {
-    // 여기서 뭔가 url이나 요청 보내는걸로
     return (
         <LoginTemplate />
     );