Feat "Add container"

이후 구현해야할 부분 : 이미지 호버링으로 카드이미지 바꾸기, 컨테이너 제목 아래에 있는 의문의 파란색줄, 카드이미지 위에 글쓰기, 서버(결정적)
EFUB-6team · Jun 3, 2021 · 939f50e · 939f50e
1 parent 59918ca
commit 939f50e
Show file tree

Hide file tree

Showing 5 changed files with 105 additions and 19 deletions.
diff --git a/frontend/frontend/src/Container.js b/frontend/frontend/src/Container.js
@@ -2,8 +2,53 @@ import React from "react";
 import styled from "styled-components";
 import axios from "axios";
 import {useState, useEffect} from "react";
+import active from "./assets/active.png";
+import notactive from "./assets/notactive.png";
+
+const Wrapper = styled.div `
+display: flex;
+flex-direction: row;
+justify-content: center;
+font-size: 13px;
+`
+
+const Context = styled.div `
+display: flex;
+flex-direction: column;
+padding:15px;
+`
+
+const Title = styled.div`
+border-bottom: 1px;
+border-bottom-color: var(--point);
+
+a:link{
+    color : var(--content);
+    text-decoration: none;
+}
+a:visited{
+    text-decoration: none;
+    color : var(--content);
+}
+a:hover  {
+    text-decoration: underline;
+}
+    
+`
+
+const Card = styled.div`
+img{
+    width:255px;
+    height:40px;
+    margin-bottom:10px;
+}
+
+
+`
+
 
 function Header() {
+
     //const [data, setData] = useState();
 
     //useEffect(async() =>{
@@ -14,11 +59,58 @@ function Header() {
         //}
 	//},[]);
 
+
     return (
-        <div>
-            useEffect Contaner ~
-        </div>
+
+        <Wrapper>
+            <Context>
+                <Title><h2><a href=''>새로운 글</a></h2></Title>
+                <Card><img src={notactive} style={{height:"77px"}}/></Card>
+                <Card><img src={notactive} style={{height:"77px"}}/></Card>
+                <Card><img src={notactive} style={{height:"77px"}}/></Card>
+                <Card><img src={notactive} style={{height:"77px"}}/></Card>
+
+            </Context>
+
+            <Context>
+                <Title><h2><a href=''>추가된 문제</a></h2></Title>
+                <Card><img src={notactive}/></Card>
+                <Card><img src={notactive}/></Card>
+                <Card><img src={notactive}/></Card>
+                <Card><img src={notactive}/></Card>
+                <Card><img src={notactive}/></Card>
+                <Card><img src={notactive}/></Card>
+                <Card><img src={notactive}/></Card>
+            </Context>
+
+            <Context>
+                <Title><h2><a href=''>추가된 영어문제</a></h2></Title>
+                <Card><img src={notactive}/></Card>
+                <Card><img src={notactive}/></Card>
+                <Card><img src={notactive}/></Card>
+                <Card><img src={notactive}/></Card>
+                <Card><img src={notactive}/></Card>
+                <Card><img src={notactive}/></Card>
+                <Card><img src={notactive}/></Card>
+            </Context>
+
+            <Context>
+                <Title><h2><a href=''>문제 순위</a></h2></Title>
+                <Card><img src={notactive}/></Card>
+                <Card><img src={notactive}/></Card>
+                <Card><img src={notactive}/></Card>
+                <Card><img src={notactive}/></Card>
+                <Card><img src={notactive}/></Card>
+                <Card><img src={notactive}/></Card>
+                <Card><img src={notactive}/></Card>
+            </Context>
+
+            <Context>
+
+            </Context>
+        </Wrapper>
     );
+
 }
 
 export default Header;
diff --git a/frontend/frontend/src/Footer.css b/frontend/frontend/src/Footer.css
@@ -2,20 +2,6 @@
 :root {
     --bigtext : #FFFFFF;
     --text : #BBBBBB;
+    --content : #585f69;
+    --point : #0076C0;
 }
-
-
-a:link {
-    font-size: 13px;
-    color: var(--text);
-    text-decoration: none;
-}
-
-a:visited {
-    color: var(--text);
-}
-
-a:hover {
-    color: #1270C0;
-    text-decoration: underline; 
-}
diff --git a/frontend/frontend/src/Footer.js b/frontend/frontend/src/Footer.js
@@ -41,6 +41,14 @@ const Copyright = styled.div`
     display: flex;
     flex-direction: column;
     padding-left:310px;
+    a:link{
+        color: var(--text);
+        text-decoration: none;
+    }
+    a:visited{
+        color: var(--text);
+        text-decoration: none;
+    }
     a:hover{
         color: var(--text);
         text-decoration : underline;

diff --git a/frontend/frontend/src/assets/active.png b/frontend/frontend/src/assets/active.png
diff --git a/frontend/frontend/src/assets/notactive.png b/frontend/frontend/src/assets/notactive.png