[FEAT] MoreInfo proto (#3)

job1/package.json

@@ -10,6 +10,7 @@
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.14.1",
     "react-scripts": "5.0.1",
+    "styled-components": "^6.0.4",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

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;
+`