[FEAT] Card 외부 링크 연결 (#3)

Hongmoon-gak · Jul 22, 2023 · 57e640a · 57e640a
1 parent 994076f
commit 57e640a
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 13 deletions.
diff --git a/job1/src/Component/InfoCard.js b/job1/src/Component/InfoCard.js
@@ -1,14 +1,17 @@
 
 import styled from "styled-components";
+import { Link } from "react-router-dom";
 
 function InfoCard(props){
     return(
         <Card>
-            <Img src={props.img} alt={props.name} />
-            <Text>
-                <Institution>{props.name}</Institution>
-                <Tel href='tel:{props.tel}' >☎️ Tel: {props.tel}</Tel>
-            </Text>
+            <InfoLink to={props.url} target="_blank">
+                <Img src={props.img} alt={props.name} />
+                <Text>
+                    <Institution>{props.name}</Institution>
+                    <Tel href='tel:{props.tel}' >☎️ Tel: {props.tel}</Tel>
+                </Text>
+            </InfoLink>
         </Card>
     )
 }
@@ -25,6 +28,11 @@ const Card=styled.div`
     box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.12);
 `
 
+const InfoLink=styled(Link)`
+    text-decoration: none;
+    color: inherit;
+`
+
 const Text=styled.div`
     padding-left: 1.5rem;
     text-align: left;

diff --git a/job1/src/Main/MoreInfo.js b/job1/src/Main/MoreInfo.js
@@ -5,35 +5,65 @@ import styled from "styled-components";
 
 function MoreInfo(){
     return(
-        <div align="center">
-            <div>
-                <h3>해결 방법을 찾지 못했나요?</h3>
-                <p>아래 기관에서 전문적인 도움을 받아보세요</p>
-            </div>
-            <MoreInfoContainer>
+        <MoreInfoContainer>
+            <InfoText>
+                <InfoTitle>해결 방법을 찾지 못했나요?</InfoTitle>
+                <InfoContent>아래 기관에서 전문적인 도움을 받아보세요</InfoContent>
+            </InfoText>
+            <MoreInfoCardContainer>
                 <InfoCard
                     img='/Images/MoreInfo1.png'
                     name='고용노동부 고객 상담 센터'
                     tel='1350'
+                    url='https://1350.moel.go.kr/home/'
                 />
                 <InfoCard
                     img='/Images/MoreInfo2.png'
                     name='직장 내 괴롭힘 상담센터'
                     tel='1522-9000'
+                    url='https://www.moel.go.kr/common/downloadFile.do?file_seq=20230101624&bbs_seq=20230101072&bbs_id=29'
                 />
                 <InfoCard
                     img='/Images/MoreInfo3.png'
                     name='근로 복지 공단'
                     tel='1588-0075'
+                    url='https://www.comwel.or.kr/'
                 />
-            </MoreInfoContainer>
-        </div>
+            </MoreInfoCardContainer>
+        </MoreInfoContainer>
     )
 }
 
 export default MoreInfo;
 
 const MoreInfoContainer=styled.div`
+    text-align: center;
+    padding: 4rem;
+    margin: 8rem 0 0 0;
+    background: #E4EEE3;
+`
+
+const InfoText=styled.div``
+
+const InfoTitle=styled.h3`
+    color: #000;
+    font-feature-settings: 'clig' off, 'liga' off;
+    font-family: DM Sans;
+    font-size: 1.75rem;
+    font-style: normal;
+    font-weight: 700;
+`
+
+const InfoContent=styled.p`
+    color: var(--my-dark-green, #174D16);
+    font-feature-settings: 'clig' off, 'liga' off;
+    font-family: DM Sans;
+    font-size: 1rem;
+    font-style: normal;
+    font-weight: 400;
+`
+
+const MoreInfoCardContainer=styled.div`
     display: flex;
     justify-content: center;
     align-items: center;