refactor<Week>: Week 컴포넌트 여러 컴포넌트로 분리 및 컴포넌트 개별 파일로 이동, Week.tsx 파일명 …

…index.tsx로 변경

src/component/weatherContents/Week/AmPm.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { AmPmType } from "../../../modules";
+import SkyIcon from "../SkyIcon";
+
+type AmPmProperty = {
+  data: AmPmType;
+  am: boolean;
+};
+
+const AmPm = ({ data, am }: AmPmProperty) => {
+  return (
+    <div className={`weather_inner ${am ? "am" : "pm"}`}>
+      <strong className="inner_text left">
+        <span className="time-part">{am ? "오전" : "오후"}</span>
+        <span className={`rainfall ${data.pop === 0 ? "none" : ""}`}>
+          {Math.round(data.pop)}%
+        </span>
+      </strong>
+      <SkyIcon skyType={data.sky} daytime={true} />
+    </div>
+  );
+};
+
+export default React.memo(AmPm);

src/component/weatherContents/Week/Week.tsx → src/component/weatherContents/Week/Item.tsx

@@ -1,24 +1,8 @@
 import React from "react";
-import { AmPmType, Day } from "../../../modules/weather";
-import SkyIcon from "../SkyIcon";
+import { Day } from "../../../modules";
 import { WEEK } from "../../../constants";
-type AmPmProperty = {
-  data: AmPmType;
-  am: boolean;
-};
-const AmPm = ({ data, am }: AmPmProperty) => {
-  return (
-    <div className={`weather_inner ${am ? "am" : "pm"}`}>
-      <strong className="inner_text left">
-        <span className="time-part">{am ? "오전" : "오후"}</span>
-        <span className={`rainfall ${data.pop === 0 ? "none" : ""}`}>
-          {Math.round(data.pop)}%
-        </span>
-      </strong>
-      <SkyIcon skyType={data.sky} daytime={true} />
-    </div>
-  );
-};
+import AmPm from "./AmPm";
+
 type ItemProperty = {
   item: Day;
 };
@@ -32,6 +16,7 @@ const Item = ({ item }: ItemProperty) => {
   const item_day = itemDay > 6 ? WEEK[itemDay - 6] : WEEK[itemDay];
   const day: string =
     item.daysLater === 0 ? "오늘" : item.daysLater === 1 ? "내일" : item_day;
+
   return (
     <li className={`item day${item.daysLater}`}>
       <div className="day_data">
@@ -56,28 +41,5 @@ const Item = ({ item }: ItemProperty) => {
     </li>
   );
 };
-type WeekProperty = {
-  week: Day[];
-};
-const Week = ({ week }: WeekProperty) => {
-  const twoDays = week.slice(0, 2);
-  return (
-    <div className="week" aria-details="주간 예보">
-      <h2 className="title">주간 예보</h2>
-      <ul className="box">
-        {twoDays.map((d: Day) => (
-          <Item item={d} />
-        ))}
-      </ul>
-      <div className="scrollControl">
-        <ul className="scrollArea">
-          {week.map((d: Day) => (
-            <Item item={d} />
-          ))}
-        </ul>
-      </div>
-    </div>
-  );
-};
 
-export default React.memo(Week);
+export default React.memo(Item);

src/component/weatherContents/Week/index.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { Day } from "../../../modules/weather";
+import Item from "./Item";
+
+type WeekProperty = {
+  week: Day[];
+};
+
+const Week = ({ week }: WeekProperty) => {
+  const twoDays = week.slice(0, 2);
+  return (
+    <div className="week" aria-details="주간 예보">
+      <h2 className="title">주간 예보</h2>
+      <ul className="box">
+        {twoDays.map((d: Day) => (
+          <Item item={d} />
+        ))}
+      </ul>
+      <div className="scrollControl">
+        <ul className="scrollArea">
+          {week.map((d: Day) => (
+            <Item item={d} />
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+export default React.memo(Week);

src/component/weatherContents/index.tsx

@@ -4,6 +4,6 @@ import Now from "./Now";
 import NoneWeather from "./NoneWeather";
 import Sun from "./Sun";
 import SkyIcon from "./SkyIcon";
-import Week from "./Week/Week";
+import Week from "./Week";
 
 export { Hourly, Nation, NoneWeather, Now, Sun, SkyIcon, Week };