Merge pull request #5 from ongheong/ongheong-main

이용안내 화면 : 주요 컴포넌트 배치, head&body css 수정
FF-UNI-SPHERE · Nov 22, 2023 · a93c7a7 · a93c7a7
2 parents 3d9be21 + 8e7b2bd
commit a93c7a7
Show file tree

Hide file tree

Showing 11 changed files with 118 additions and 84 deletions.
diff --git a/src/App.css b/src/App.css
@@ -1,42 +1,8 @@
 .App {
-  text-align: center;
-  max-width: 100%;
-  height: 100%;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
   display: flex;
-  flex-direction: column;
+  text-align: center;
   align-items: center;
   justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
 }
 
 /* 절대 위치 수정할 것 */

diff --git a/src/App.js b/src/App.js
@@ -3,6 +3,7 @@ import React from 'react';
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 import MainScreen from './screen/InitialScreen';
 import LoginScreen from './screen/LoginScreen';
+// import GuideScreen from './screen/GuideScreen';
 
 class App extends React.Component {
   render() {
@@ -11,6 +12,7 @@ class App extends React.Component {
         <Routes>
           <Route path="/" element={<MainScreen />} />
           <Route path="/login" element={<LoginScreen />} />
+          {/* <Route path="/guide" element={<GuideScreen />} /> */}
         </Routes>
       </Router>
     );

diff --git a/src/component/guide/GuideTemplate.jsx b/src/component/guide/GuideTemplate.jsx
@@ -0,0 +1,49 @@
+import React from "react";
+import styled from 'styled-components';
+
+function GuideTemplate() {
+    const detail = [
+        "메인 화면에서 단체 아바타를 클릭하면 해당 단체의 홈페이지로 이동할 수 있습니다. 단체 계정을 통해 접속하면 해당 단체의 홈페이지를 원하는 방식대로 꾸밀 수 있습니다.",
+        "메인 화면에서 단체 아바타를 클릭하면 해당 단체의 홈페이지로 이동할 수 있습니다. 단체 계정을 통해 접속하면 해당 단체의 홈페이지를 원하는 방식대로 꾸밀 수 있습니다.",
+        "메인 화면에서 단체 아바타를 클릭하면 해당 단체의 홈페이지로 이동할 수 있습니다. 단체 계정을 통해 접속하면 해당 단체의 홈페이지를 원하는 방식대로 꾸밀 수 있습니다.",
+        "메인 화면에서 단체 아바타를 클릭하면 해당 단체의 홈페이지로 이동할 수 있습니다. 단체 계정을 통해 접속하면 해당 단체의 홈페이지를 원하는 방식대로 꾸밀 수 있습니다."
+    ]
+
+    return (
+        <>
+        {/* <Header /> */}
+        {/* <TranslucentBox>
+            <InnerTopBar />
+                <InnerText />
+                <InnerText />
+                <InnerText />
+                <InnerText />
+        </TranslucentBox> */}
+        </>
+    );
+};
+
+function InnerTopBar() {
+    return (
+        <>
+        <h3>이용안내</h3>
+        <NavButton>개인/단체 아바타</NavButton>
+        <NavButton>단체 홈페이지</NavButton>
+        <NavButton>뉴스레터</NavButton>
+        <NavButton>광장</NavButton>
+        </>
+    );
+}
+
+function InnerText() {
+    return (
+        <>
+        <h4>단체 홈페이지</h4>
+        <h5>{detail[0]}</h5>
+        {/* <GuideImage src={} alt="단체홈페이지"/>
+        <GuideImage src={} alt="단체홈페이지"/> */}
+        </>
+    );
+}
+
+export default 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/login/LoginTemplate.jsx b/src/component/login/LoginTemplate.jsx
@@ -4,6 +4,8 @@ import naverLogo from '../../resource/naverLogo.png';
 import kakaoLogo from '../../resource/kakaoLogo.svg';
 import googleLogo from '../../resource/googleLogo.svg';
 
+import WhiteBox from './WhiteBox'
+
 function LoginTemplate () {
     //추후 api 변경 시 같이 변경하기
     const login = ({socialType}) => {
@@ -18,7 +20,7 @@ function LoginTemplate () {
 
     return (
         //align-items: center -> 적용이 안되는 문제로 우선 삭제
-        <div style={{ display: 'flex', justifyContent: 'center' }}>
+        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%'}}>
             <WhiteBox >
                 <h1 className="title">로그인하기</h1>
                 <h3>소셜 로그인으로 진행하세요</h3>
@@ -37,37 +39,14 @@ function LoginTemplate () {
                         &nbsp; 구글 로그인
                     </SocialLoginButton>
                 </ButtonContainer >
-                <HorizontalLine position="bottom"/>
-                <SignInButton >회원가입하기</SignInButton >
+                <HorizontalLine position="top"/>
+                {/* <HorizontalLine position="bottom"/>
+                <SignInButton >회원가입하기</SignInButton > */}
             </WhiteBox >
         </div>
     );
 };
 
-const WhiteBox  = styled.div`
-    margin-top: 7%;
-    margin-bottom: 7%;
-    width: 55%;
-    height: 60%;
-    padding: 2% 5% 3% 5%;
-    border-radius: 30px;
-    background-color: var(--white);
-    h1 {
-        font-family: var(--main-font);
-        font-size: 40px;
-        letter-spacing: -4px;
-        margin-bottom: 0;
-    }
-    h3 {
-        font-family: var(--main-font);
-        font-size: 20px;
-        font-weight: 400;
-        letter-spacing: -2px;
-        margin-top: 10px;
-        margin-bottom: 37px;
-    }
-`;
-
 const LineStyled = styled.span `
     flex: 1;
     border-top: 1px solid var(--light-gray);
@@ -140,24 +119,25 @@ const SocialButtonIcon = styled.img`
     margin-right: 27%;
 `;
 
-const SignInButton  = styled.button`
-    margin-left: auto;
-    margin-right: auto;
+//사이트 자체 로그인 지원 안하므로 삭제됨
+// const SignInButton  = styled.button`
+//     margin-left: auto;
+//     margin-right: auto;
 
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 400px;
-    height: 50px;
-    margin-top: 5%;
-    border-radius: 12px;
-    border : 1px solid var(--light-gray);
-    background-color: var(--white);
-    font-size: 14px;
-    font-weight: 700;
-    &:active { opacity: 0.4; }
-    &:hover { filter: brightness(95%); }
-`;
+//     display: flex;
+//     align-items: center;
+//     justify-content: center;
+//     width: 400px;
+//     height: 50px;
+//     margin-top: 5%;
+//     border-radius: 12px;
+//     border : 1px solid var(--light-gray);
+//     background-color: var(--white);
+//     font-size: 14px;
+//     font-weight: 700;
+//     &:active { opacity: 0.4; }
+//     &:hover { filter: brightness(95%); }
+// `;
 
 export default LoginTemplate;
 
diff --git a/src/component/login/WhiteBox.jsx b/src/component/login/WhiteBox.jsx
@@ -0,0 +1,25 @@
+import styled from 'styled-components';
+
+const WhiteBox  = styled.div`
+    width: 55%;
+    height: auto;
+    padding: 2% 5% 3% 5%;
+    border-radius: 30px;
+    background-color: var(--white);
+    h1 {
+        font-family: var(--main-font);
+        font-size: 40px;
+        letter-spacing: -4px;
+        margin-bottom: 0;
+    }
+    h3 {
+        font-family: var(--main-font);
+        font-size: 20px;
+        font-weight: 400;
+        letter-spacing: -2px;
+        margin-top: 10px;
+        margin-bottom: 37px;
+    }
+`;
+
+export default WhiteBox;
diff --git a/src/index.css b/src/index.css
@@ -1,23 +1,25 @@
-:root {
+#root {
   /* color variable */
   --light-gray : #686868;
   --white: #fff;
   --black: #000;
+  height: 100%;
 }
 
+html,
 body {
   margin: 0;
+  width: auto;
+  height: 100%;
+
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   position: relative;
-  width: auto;
-  height: auto;
   background-image: url('./resource/main_background.png');
   background-size: cover;
-
 }
 
 code {

diff --git a/src/screen/GuideScreen.jsx b/src/screen/GuideScreen.jsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import GuideTemplate from "../component/guide/GuideTemplate";
+
+function GuideScreen() {
+    return (
+        <GuideTemplate />
+    );
+};
+
+export default GuideScreen;
diff --git a/src/screen/InitialScreen.jsx b/src/screen/InitialScreen.jsx
@@ -5,7 +5,7 @@ import chRoot from "../resource/character_unisphere.png";
 
 function MainScreen() {
     return (
-        <div>
+        <div style={{height:'100%'}}>
             <div><img id="logo" src={logoRoot} alt="logo"/></div>
             <div id = "buttons">
                 <Button children='로그인 / 회원가입'></Button>