refactor: TdDay,Th파일 Hourly/Graph로 이동 , Hourly.tsx 파일명 변경(Hourly.ts->…

… index.tsx) 및 코드 정리

src/component/ScrollBtn.tsx

@@ -13,6 +13,7 @@ const BtnStyled = styled.button`
   -webkit-box-shadow: 0px 0px 10x 1px rgba(112, 112, 112, 0.28);
   box-shadow: 0px 0px 10px 1px rgba(112, 112, 112, 0.28);
 `;
+
 type BtnProperty = {
   clickEvent: () => void;
   className: string;

src/component/index.tsx

@@ -1,4 +1,6 @@
+import Content from "./Content";
+import Footer from "./Footer";
 import Loading from "./Loading";
 import Location from "./Location";
 import None from "./None";
-export { Loading, Location, None };
+export { Content, Footer, Loading, Location, None };

src/component/weatherContents/Hourly/Graph/GraphTr.tsx

@@ -1,8 +1,8 @@
 import React from "react";
-import TdDay from "../TdDay";
-import Th from "../Th";
+import TdDay from "./TdDay";
+import Th from "./Th";
 import { DailyWeather, HourWeather } from "../../../../modules";
-import TdWindy from "../TdWindy";
+import TdWindy from "./TdWindy";
 
 type TrTarget = "pop" | "pcp" | "sno" | "reh" | "windy";
 type GraphTrProperty = {

src/component/weatherContents/Hourly/TdWindy.tsx → src/component/weatherContents/Hourly/Graph/TdWindy.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 import { TiLocationArrow } from "react-icons/ti";
 import { CSSProperties } from "styled-components";
-import { WIND_DIRECTION, WIND_DIRECTION_ARRAY } from "../../../constants";
-import { WindType } from "../../../modules";
+import { WIND_DIRECTION, WIND_DIRECTION_ARRAY } from "../../../../constants";
+import { WindType } from "../../../../modules";
 
 type TdWindyProperty = {
   date: string;

src/component/weatherContents/Hourly/Hourly.tsx → src/component/weatherContents/Hourly/index.tsx

@@ -41,12 +41,15 @@ const Hourly = ({ todaySunInform, threeDay }: HourlyProperty) => {
     return Number(value);
   }, [tableStyle.transform]);
 
-  const startScroll = useCallback((clientX: number) => {
-    scrollChart.current = true;
-    startX.current = clientX;
-    const value = getTranslateXValue();
-    translateX.current = Number(value);
-  }, []);
+  const startScroll = useCallback(
+    (clientX: number) => {
+      scrollChart.current = true;
+      startX.current = clientX;
+      const value = getTranslateXValue();
+      translateX.current = Number(value);
+    },
+    [getTranslateXValue]
+  );
 
   const moveScroll = useCallback((clientX: number) => {
     if (scrollChart.current) {
@@ -66,21 +69,24 @@ const Hourly = ({ todaySunInform, threeDay }: HourlyProperty) => {
     translateX.current = 0;
   }, []);
 
-  const clickScrollBtn = (pre: boolean) => {
-    const value = getTranslateXValue();
-    const scrollWidth = scrollAreaWidth.current - 40;
-    const x = pre ? value + scrollWidth : value - scrollWidth;
-    scrollAfterOn.current = x > -min.current;
-    scrollBeforeOn.current = x < 0;
-    setTableStyle({
-      transform:
-        x <= -min.current
-          ? `translateX(${-min.current}px)`
-          : x >= 0
-          ? "translateX(0px)"
-          : `translateX(${x}px)`,
-    });
-  };
+  const clickScrollBtn = useCallback(
+    (pre: boolean) => {
+      const value = getTranslateXValue();
+      const scrollWidth = scrollAreaWidth.current - 40;
+      const x = pre ? value + scrollWidth : value - scrollWidth;
+      scrollAfterOn.current = x > -min.current;
+      scrollBeforeOn.current = x < 0;
+      setTableStyle({
+        transform:
+          x <= -min.current
+            ? `translateX(${-min.current}px)`
+            : x >= 0
+            ? "translateX(0px)"
+            : `translateX(${x}px)`,
+      });
+    },
+    [getTranslateXValue]
+  );
 
   useEffect(() => {
     if (tableRef.current !== null) {

src/component/weatherContents/index.tsx

@@ -1,4 +1,4 @@
-import Hourly from "./Hourly/Hourly";
+import Hourly from "./Hourly";
 import Nation from "./Nation/Nation";
 import Now from "./Now/Now";
 import NoneWeather from "./NoneWeather";