✨feat: ContentHeader.jsx - 연관 주식 탭으로 가는 네비게이션 추가

#54
CheatSOL · Jun 20, 2024 · a3fc600 · a3fc600
1 parent 3d2861f
commit a3fc600
Show file tree

Hide file tree

Showing 2 changed files with 86 additions and 14 deletions.
diff --git a/src/pages/main/contents-item/ContentHeader.jsx b/src/pages/main/contents-item/ContentHeader.jsx
@@ -1,20 +1,53 @@
 import React from "react";
-import { HeaderContentDiv } from "./ContentHeader.style";
+import { HeaderContentDiv, GlowIcon } from "./ContentHeader.style";
+import { HiChevronDoubleRight } from "react-icons/hi";
+import { Link, useLocation } from "react-router-dom";
 
 export default function ContentHeader(props) {
+  const location = useLocation();
   return (
     <HeaderContentDiv>
-      <img style={{ width: "60px", height: "60px" }} src={props.imgUrl}></img>
-      <span style={{ fontSize: "24px", color: "#2E2E30" }}>
-        <strong
-          style={{
-            fontSize: "30px",
-          }}
-        >
-          "{props.keyword}"
-        </strong>
-        {props.description}
-      </span>
+      <div
+        style={{
+          textAlign: "top",
+          alignItems: "center",
+          justifyContent: "center",
+          display: "flex",
+        }}
+      >
+        <img style={{ width: "60px", height: "60px" }} src={props.imgUrl}></img>
+        <span style={{ fontSize: "24px", color: "#2E2E30" }}>
+          <strong
+            style={{
+              fontSize: "30px",
+            }}
+          >
+            "{props.keyword}"
+          </strong>
+          {props.description}
+        </span>
+      </div>
+      <div
+        style={{
+          textAlign: "top",
+          alignItems: "center",
+          justifyContent: "center",
+          display: "flex",
+        }}
+      >
+        <Link to="/main/stock">
+          <GlowIcon>
+            <HiChevronDoubleRight
+              style={{
+                cursor: "pointer",
+                width: "40px",
+                height: "40px",
+                color: "#00537A",
+              }}
+            ></HiChevronDoubleRight>
+          </GlowIcon>
+        </Link>
+      </div>
     </HeaderContentDiv>
   );
 }
diff --git a/src/pages/main/contents-item/ContentHeader.style.js b/src/pages/main/contents-item/ContentHeader.style.js
@@ -2,6 +2,45 @@ import styled from "styled-components";
 
 export const HeaderContentDiv = styled.div`
   display: flex;
-  flex-direction: row;
-  margin-bottom: 1rem;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px;
+`;
+
+export const GlowIcon = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  svg {
+    width: 40px;
+    height: 40px;
+    color: #00537a;
+    transition: filter 0.3s ease-in-out;
+
+    &:hover {
+      filter: drop-shadow(0 0 3px rgba(0, 83, 122, 0.8));
+    }
+  }
+`;
+
+export const ContentText = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: top;
+
+  img {
+    width: 60px;
+    height: 60px;
+  }
+
+  span {
+    font-size: 24px;
+    color: #2e2e30;
+
+    strong {
+      font-size: 30px;
+    }
+  }
 `;