feat: season 타입별 컴포넌트 분기

package.json

@@ -10,8 +10,10 @@
     "url": "https://github.com/Awesome-Sprinters/react-season-component"
   },
   "dependencies": {
+    "gsap": "^3.9.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-gsap": "^3.2.1",
     "react-scripts": "5.0.0",
     "styled-components": "^5.3.3",
     "typescript": "^4.5.5"

src/App.tsx

@@ -1,7 +1,31 @@
 import React from "react";
+<<<<<<< HEAD
+import { Season } from "./lib";
+import styled from "styled-components";
+import { Weather } from "./lib";
+import Sunny from "./lib/Weather/Sunny";
+import Snowy from "./lib/Weather/Snowy";
+import Rainy from "./lib/Weather/Rainy";
+import Cloudy from "./lib/Weather/Cloudy";
 
 function App() {
-  return <></>;
+  return (
+    <Container>
+      <Season type="spring">test</Season>
+      {/* <Sunny />
+      <Snowy />
+      {/* <Rainy /> */}
+    </Container>
+  );
 }
 
 export default App;
+
+// 사용자 중심에서 생각하기
+
+const Container = styled.div`
+top: 0;
+left: 0;
+width: 100px;
+height: 100px;
+`;

src/lib/Season/Summer/index.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import * as Styled from "./styled";
+import { Season as SeasonProps } from "../../types/common";
+
+const Summer: React.FC<SeasonProps> = ({ children, type = "auto", typeChangeTerm = 10000, imagePosition, animation }) => {
+  return (
+    <Styled.Container type={type}>
+      <div className="ocean">
+        <div className="wave"></div>
+        <div className="wave"></div>
+        <div>{children}</div>
+      </div>
+    </Styled.Container>
+  );
+};
+
+export default Summer;

src/lib/Season/Summer/styled.ts

@@ -0,0 +1,48 @@
+import styled from "styled-components";
+import typeHandler from "../utils/typeHander";
+
+export const Container = styled.div<{ type: string }>`
+  & .ocean {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+  }
+
+  & .wave {
+    background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/85486/wave.svg) repeat-x;
+    position: absolute;
+    bottom: 0;
+    width: 3000%;
+    height: 100%;
+    animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
+    transform: translateY(60%);
+  }
+
+  & .wave:nth-of-type(2) {
+    position: absolute;
+    bottom: -70%;
+    animation: wave 5s cubic-bezier(0.36, 0.45, 0.63, 0.53) -0.125s infinite, swell 7s ease -1.25s infinite;
+    opacity: 1;
+  }
+
+  @keyframes wave {
+    0% {
+      margin-left: 0;
+    }
+    100% {
+      margin-left: -1600px;
+    }
+  }
+
+  @keyframes swell {
+    0%,
+    100% {
+      transform: translate3d(0, -25px, 0);
+    }
+    50% {
+      transform: translate3d(0, 5px, 0);
+    }
+  }
+`;

src/lib/Season/index.tsx

@@ -1,23 +1,41 @@
 import React from "react";
-import * as Styled from "./styled";
 import { Season as SeasonProps } from "../types/common";
+import Summer from "./Summer";
+import { SeasonContainer } from "./styled";
 
-const Season: React.FC<SeasonProps> = ({
-  children,
-  type = "auto",
-  typeChangeTerm = 10000,
-  imagePosition,
-  animation,
-}) => {
-  return (
-    <Styled.Container type={type}>
-      <div className="ocean">
-        <div className="wave"></div>
-        <div className="wave"></div>
-        <div>{children}</div>
-      </div>
-    </Styled.Container>
-  );
+const Season: React.FC<SeasonProps> = ({ children, type = "auto", typeChangeTerm = 10000, imagePosition, animation }) => {
+  const getSeason = () => {
+    let mon = new Date().getMonth() + 1;
+
+    if (3 <= mon && mon <= 5) {
+      return "spring";
+    } else if (6 <= mon && mon <= 8) {
+      return "summer";
+    } else if (9 <= mon && mon <= 11) {
+      return "autumn";
+    } else {
+      return "winter";
+    }
+  };
+
+  const handleSeasonType = (type: string) => {
+    if (type === "auto") {
+      type = getSeason();
+    }
+    console.log(type);
+    switch (type) {
+      case "spring":
+        return <Summer type="summer" />;
+      case "summer":
+        return <Summer type="summer" />;
+      case "autumn":
+        return <Summer type="summer" />;
+      case "winter":
+        return <Summer type="summer" />;
+    }
+  };
+
+  return <SeasonContainer type={type}>{handleSeasonType(type)}</SeasonContainer>;
 };
 
 export default Season;

src/lib/Season/styled.tsx

@@ -1,73 +1,12 @@
 import styled from "styled-components";
-import { SPRING, SUMMER, AUTUMN, WINTER } from "./constants";
+import typeHandler from "./utils/typeHander";
 
-export const Container = styled.div<{ type: string }>`
+export const SeasonContainer = styled.div<{ type: string }>`
   background: ${({ type }) => typeHandler(type)};
   overflow: hidden;
   position: relative;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
-
-  & .ocean {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    height: 100%;
-    width: 100%;
-  }
-
-  & .wave {
-    background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/85486/wave.svg)
-      repeat-x;
-    position: absolute;
-    bottom: 0;
-    width: 3000%;
-    height: 100%;
-    animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
-    transform: translateY(60%);
-  }
-
-  & .wave:nth-of-type(2) {
-    position: absolute;
-    bottom: -70%;
-    animation: wave 5s cubic-bezier(0.36, 0.45, 0.63, 0.53) -0.125s infinite,
-      swell 7s ease -1.25s infinite;
-    opacity: 1;
-  }
-
-  @keyframes wave {
-    0% {
-      margin-left: 0;
-    }
-    100% {
-      margin-left: -1600px;
-    }
-  }
-
-  @keyframes swell {
-    0%,
-    100% {
-      transform: translate3d(0, -25px, 0);
-    }
-    50% {
-      transform: translate3d(0, 5px, 0);
-    }
-  }
 `;
-
-const typeHandler = (type: string) => {
-  switch (type) {
-    case "spring":
-      return SPRING;
-    case "summer":
-      return SUMMER;
-    case "autumn":
-      return AUTUMN;
-    case "winter":
-      return WINTER;
-    default:
-      return;
-  }
-};

src/lib/Season/utils/typeHander.ts

@@ -0,0 +1,18 @@
+import { SPRING, SUMMER, AUTUMN, WINTER } from "../constants";
+
+const typeHandler = (type: string) => {
+  switch (type) {
+    case "spring":
+      return SPRING;
+    case "summer":
+      return SUMMER;
+    case "autumn":
+      return AUTUMN;
+    case "winter":
+      return WINTER;
+    default:
+      return;
+  }
+};
+
+export default typeHandler;

src/lib/Time/index.tsx

@@ -11,19 +11,10 @@ const MORNING_IMAGE = "/images/morning_icon.png";
 const DAY_IMAGE = "/images/day_icon.png";
 const EVENING_NIGHT_IMAGE = "/images/night_icon.png";
 
-const Time: React.FC<TimeProps> = ({
-  children,
-  type = "auto",
-  animationRoundTime = 10000,
-  typeChangeTerm = 10000,
-  imagePosition = "left-top",
-  animation = "left-to-right",
-  background,
-}) => {
+const Time: React.FC<TimeProps> = ({ children, type = "auto", animationRoundTime = 10000, typeChangeTerm = 10000, imagePosition = "left-top", animation = "left-to-right", background }) => {
   const [currentType, setCurrentType] = useState<string>(type);
   const [currentImage, setCurrentImage] = useState<string>(MORNING_IMAGE);
-  const [currentBackground, setCurrentBackground] =
-    useState<string>(MORNING_GRADIENT);
+  const [currentBackground, setCurrentBackground] = useState<string>(MORNING_GRADIENT);
 
   const [x, y] = imagePosition.split("-");
 
@@ -66,18 +57,8 @@ const Time: React.FC<TimeProps> = ({
   }, [currentType]);
 
   return (
-    <Styled.Container
-      backgroundGradient={currentBackground}
-      background={background}
-    >
-      <Styled.Image
-        src={currentImage}
-        x={getX(x)}
-        y={getY(y)}
-        animation={animation}
-        duration={animationRoundTime}
-        iteration={typeChangeTerm}
-      />
+    <Styled.Container backgroundGradient={currentBackground} background={background}>
+      <Styled.Image src={currentImage} x={getX(x)} y={getY(y)} animation={animation} duration={animationRoundTime} iteration={typeChangeTerm} />
       <Styled.Children>{children}</Styled.Children>
     </Styled.Container>
   );

src/lib/Time/styled.tsx

@@ -100,24 +100,16 @@ function getKeyframes(param: string) {
   }
 }
 
-const imgPositionStyle = ({
-  x,
-  y,
-  animation,
-  duration,
-  iteration,
-}: ImgPositionProps) => css`
+const imgPositionStyle = ({ x, y, animation, duration, iteration }: ImgPositionProps) => css`
   position: absolute;
   ${x};
   ${y};
-  animation: ${getKeyframes(animation)} ${duration}s infinite linear
-    ${iteration}s;
+  animation: ${getKeyframes(animation)} ${duration}s infinite linear ${iteration}s;
   width: 50%;
 `;
 
 export const Container = styled.div<ContainerProps>`
-  background: ${({ background, backgroundGradient }) =>
-    background ? backgroundGradient : "transparent"};
+  background: ${({ background, backgroundGradient }) => (background ? backgroundGradient : "transparent")};
   position: relative;
   left: 0;
   top: 0;

src/lib/index.tsx

@@ -1,3 +1,3 @@
-export { default as Season } from './Season';
-export { default as Time } from './Time';
-export { default as Weather } from './Weather';
+export { default as Season } from "./Season";
+// export { default as Time } from './Time';
+export { default as Weather } from "./Weather";