[FEAT] MoreInfo proto (#3)

job1/src/Component/InfoCard.js

@@ -0,0 +1,24 @@
+
+import styled from "styled-components";
+
+function InfoCard(props){
+    return(
+        <Card>
+            <img src={props.img} alt={props.name} />
+            <p>{props.name}</p>
+            <a href='tel:{props.tel}' >Tel: {props.tel}</a>
+        </Card>
+    )
+}
+
+export default InfoCard;
+
+const Card=styled.div`
+    width: 16.1875rem;
+    height: 22.6875rem;
+    margin: 2rem;
+    flex-shrink: 0;
+    border-radius: 1.5rem;
+    background: var(--neutral-colors-white, #FFF);
+    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.12);
+`

job1/src/Main/MoreInfo.js

@@ -0,0 +1,40 @@
+
+import InfoCard from "../Component/InfoCard";
+
+import styled from "styled-components";
+
+function MoreInfo(){
+    return(
+        <div align="center">
+            <div>
+                <h3>해결 방법을 찾지 못했나요?</h3>
+                <p>아래 기관에서 전문적인 도움을 받아보세요</p>
+            </div>
+            <MoreInfoContainer>
+                <InfoCard
+                    img=''
+                    name='고용노동부 고객 상담 센터'
+                    tel='1350'
+                />
+                <InfoCard
+                    img=''
+                    name='직장 내 괴롭힘 상담센터'
+                    tel='1522-9000'
+                />
+                <InfoCard
+                    img=''
+                    name='근로 복지 공단'
+                    tel='1588-0075'
+                />
+            </MoreInfoContainer>
+        </div>
+    )
+}
+
+export default MoreInfo;
+
+const MoreInfoContainer=styled.div`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+`

job1/src/View/Home.js

@@ -1,12 +1,14 @@
 import Preview from "../Main/Preview";
+import MoreInfo from "../Main/MoreInfo";
 
-function Home() {
-  return (
-    <div>
-      home
-      <Preview />
-    </div>
-  );
+function Home(){
+    return(
+        <div>
+            home
+            <Preview />
+            <MoreInfo/>
+        </div>
+    )
 }
 
 export default Home;