하위페이지로 넘어가는 기능, csv 파일 다운로드 버튼 style

front/src/components/home/ATCWork.tsx

@@ -6,8 +6,10 @@ import { useSelector } from "react-redux";
 import { SocketContainerByATCData } from "types/api";
 import { DataContentOl } from "styles/components/dataList.style";
 import { WorkByATCContainer } from "styles/components/home/atcWork.style";
+import { useNavigate } from "react-router-dom";
 
 const ATCWork = () => {
+	const navigate = useNavigate();
 	const selectedCranes: AppState["blockCrane"]["crane"] = useSelector(
 		(state: AppState) => state.blockCrane.crane
 	);
@@ -63,7 +65,9 @@ const ATCWork = () => {
 			<WorkByATCContainer $count={selectedCranes.length}>
 				{selectedCranes.map((crane) => (
 					<div key={crane}>
-						<h3>{crane}번 장비</h3>
+						<h3 onClick={() => navigate(`/atcwork?cate=${crane}`)}>
+							{crane}번 장비
+						</h3>
 						<DataList header={cols} />
 						<DataContentOl $count={cols.length}>
 							{workListByAtc

front/src/components/home/YardWork.tsx

@@ -1,10 +1,13 @@
 import React, { useEffect, useState } from "react";
 import DataList from "components/DataList";
-import { SectionContainer, SectionTitle } from "styles/commons";
+import { SectionContainer } from "styles/commons";
 import { SocketYardData } from "types/api";
 import { DataContentOl } from "styles/components/dataList.style";
+import { useNavigate } from "react-router-dom";
+import * as S from "styles/components/home/yardWork.style";
 
 const YardWork = () => {
+	const navigate = useNavigate();
 	const [workList, setWorkList] = useState<SocketYardData[]>([]);
 	const wsUrl = process.env.REACT_APP_SOCKET_YARD;
 	const cols = ["컨테이너번호", "작업코드", "모선항차", "위치", "작업완료시간"];
@@ -36,7 +39,11 @@ const YardWork = () => {
 
 	return (
 		<SectionContainer>
-			<SectionTitle>야드 작업 현황</SectionTitle>
+			<div>
+				<S.YardWorkTitle onClick={() => navigate("/yardwork")}>
+					야드 작업 현황
+				</S.YardWorkTitle>
+			</div>
 			<DataList header={cols} />
 			<DataContentOl $count={cols.length}>
 				{workList.slice(0, 10).map((item, idx) => (

front/src/pages/ATCWorkList.tsx

@@ -5,12 +5,12 @@ import { useSearchParams } from "react-router-dom";
 import apiService from "api";
 import Pagination from "components/Pagination";
 import {
+	CSVDownloadBtn,
 	SectionContainer,
 	SubPageTitle,
 	SubPageTitleContainer,
 	SubpageCateBtn,
 } from "styles/commons";
-import { CSVLink } from "react-csv";
 import { ContainerWorkCSVData } from "types/subpage";
 
 const ATCWorkList = () => {
@@ -102,14 +102,14 @@ const ATCWorkList = () => {
 				</div>
 			</SubPageTitleContainer>
 			<SectionContainer>
-				<CSVLink
+				<CSVDownloadBtn
 					data={ATCWorkList.filter((data) => data.crane === selectedATCNum)}
 					headers={headers}
 					filename={`${selectedATCNum}작업목록.csv`}
 					target="_blank"
 				>
 					ATC별 작업 목록 csv 다운로드
-				</CSVLink>
+				</CSVDownloadBtn>
 				<DataList header={headers.map((header) => header.label)} />
 				<DataContentOl $count={headers.map((header) => header.label).length}>
 					{ATCWorkList.filter((item) => item.crane === selectedATCNum)

front/src/pages/YardWorkList.tsx

@@ -1,10 +1,10 @@
 import apiService from "api";
 import DataList from "components/DataList";
 import Pagination from "components/Pagination";
-import React, { useEffect, useRef, useState } from "react";
-import { CSVLink } from "react-csv";
+import React, { useEffect, useState } from "react";
 import { useSearchParams } from "react-router-dom";
 import {
+	CSVDownloadBtn,
 	SectionContainer,
 	SubPageTitle,
 	SubPageTitleContainer,
@@ -79,14 +79,14 @@ const YardWorkList = () => {
 				<SubPageTitle>야드 작업 목록</SubPageTitle>
 			</SubPageTitleContainer>
 			<SectionContainer>
-				<CSVLink
+				<CSVDownloadBtn
 					data={yardWorkList}
 					headers={headers}
 					filename="야드작업목록.csv"
 					target="_blank"
 				>
 					야드 작업 목록 csv 다운로드
-				</CSVLink>
+				</CSVDownloadBtn>
 				<DataList header={headers.map((header) => header.label)} />
 				<DataContentOl $count={headers.map((header) => header.label).length}>
 					{yardWorkList.slice(offset, offset + 20).map((item, idx) => (

front/src/styles/commons.ts

@@ -1,5 +1,6 @@
 import styled, { css } from "styled-components";
 import { theme } from "./theme";
+import { CSVLink } from "react-csv";
 
 export const MainTitle = styled.h1`
 	margin-bottom: 15px;
@@ -72,3 +73,18 @@ export const SubpageCateBtn = styled.button<{ $active: boolean }>`
 			color: ${theme.color.white};
 		`}
 `;
+
+export const CSVDownloadBtn = styled(CSVLink)`
+	display: inline-block;
+	margin-bottom: 15px;
+	padding: 10px;
+	border-radius: 5px;
+	background-color: ${theme.color.lightPurple};
+	color: ${theme.color.white};
+	font-weight: 600;
+	transition: all 250ms ease-in-out;
+
+	&:hover {
+		background-color: ${theme.color.purple};
+	}
+`;

front/src/styles/components/home/atcWork.style.ts

@@ -13,10 +13,16 @@ export const WorkByATCContainer = styled.div<{ $count: number }>`
 		width: ${({ $count }) => $count > 1 && `${100 / $count - 1}%`};
 
 		& > h3 {
-			margin-bottom: 10px;
+			margin-bottom: 15px;
 			font-size: ${theme.fontSize.lg};
 			font-weight: 600;
 			text-align: center;
+			cursor: pointer;
+			transition: all 250ms ease-in-out;
+
+			&:hover {
+				color: ${theme.color.lightPurple};
+			}
 		}
 	}
 `;

front/src/styles/components/home/yardWork.style.ts

@@ -0,0 +1,12 @@
+import styled from "styled-components";
+import { SectionTitle } from "styles/commons";
+import { theme } from "styles/theme";
+
+export const YardWorkTitle = styled(SectionTitle)`
+	cursor: pointer;
+	transition: all 250ms ease-in-out;
+
+	&:hover {
+		color: ${theme.color.lightPurple};
+	}
+`;