From aad0ff31f79e63eebb16268e716757f05664bd53 Mon Sep 17 00:00:00 2001 From: jiseung-kang Date: Sun, 20 Feb 2022 13:46:49 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20season=20=ED=83=80=EC=9E=85=EB=B3=84=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=B6=84=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 + src/App.tsx | 17 +++- src/lib/Season/Autumn/index.tsx | 0 src/lib/Season/Autumn/styled.ts | 0 src/lib/Season/Spring/index.tsx | 0 src/lib/Season/Spring/styled.ts | 0 src/lib/Season/Summer/index.tsx | 17 ++++ src/lib/Season/Summer/styled.ts | 48 ++++++++++ src/lib/Season/Winter/index.tsx | 0 src/lib/Season/Winter/styled.ts | 0 src/lib/Season/index.tsx | 52 +++++++---- src/lib/Season/styled.tsx | 65 +------------ src/lib/Season/utils/typeHander.ts | 18 ++++ src/lib/Time/index.tsx | 109 ---------------------- src/lib/Time/styled.tsx | 142 ----------------------------- src/lib/index.tsx | 6 +- 16 files changed, 140 insertions(+), 336 deletions(-) create mode 100644 src/lib/Season/Autumn/index.tsx create mode 100644 src/lib/Season/Autumn/styled.ts create mode 100644 src/lib/Season/Spring/index.tsx create mode 100644 src/lib/Season/Spring/styled.ts create mode 100644 src/lib/Season/Summer/index.tsx create mode 100644 src/lib/Season/Summer/styled.ts create mode 100644 src/lib/Season/Winter/index.tsx create mode 100644 src/lib/Season/Winter/styled.ts create mode 100644 src/lib/Season/utils/typeHander.ts delete mode 100644 src/lib/Time/index.tsx delete mode 100644 src/lib/Time/styled.tsx diff --git a/package.json b/package.json index 24f91cd..342ef63 100644 --- a/package.json +++ b/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" diff --git a/src/App.tsx b/src/App.tsx index 3c4f0cd..c016ff0 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,11 +1,19 @@ import React from "react"; 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 ( - test + test + {/* + + {/* */} ); } @@ -14,4 +22,9 @@ export default App; // 사용자 중심에서 생각하기 -const Container = styled.nav``; +const Container = styled.div` +top: 0; +left: 0; +width: 100px; +height: 100px; +`; diff --git a/src/lib/Season/Autumn/index.tsx b/src/lib/Season/Autumn/index.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/lib/Season/Autumn/styled.ts b/src/lib/Season/Autumn/styled.ts new file mode 100644 index 0000000..e69de29 diff --git a/src/lib/Season/Spring/index.tsx b/src/lib/Season/Spring/index.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/lib/Season/Spring/styled.ts b/src/lib/Season/Spring/styled.ts new file mode 100644 index 0000000..e69de29 diff --git a/src/lib/Season/Summer/index.tsx b/src/lib/Season/Summer/index.tsx new file mode 100644 index 0000000..9a8051f --- /dev/null +++ b/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 = ({ children, type = "auto", typeChangeTerm = 10000, imagePosition, animation }) => { + return ( + +
+
+
+
{children}
+
+ + ); +}; + +export default Summer; diff --git a/src/lib/Season/Summer/styled.ts b/src/lib/Season/Summer/styled.ts new file mode 100644 index 0000000..69f894d --- /dev/null +++ b/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); + } + } +`; diff --git a/src/lib/Season/Winter/index.tsx b/src/lib/Season/Winter/index.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/lib/Season/Winter/styled.ts b/src/lib/Season/Winter/styled.ts new file mode 100644 index 0000000..e69de29 diff --git a/src/lib/Season/index.tsx b/src/lib/Season/index.tsx index ff35966..7438adf 100644 --- a/src/lib/Season/index.tsx +++ b/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 = ({ - children, - type = "auto", - typeChangeTerm = 10000, - imagePosition, - animation, -}) => { - return ( - -
-
-
-
{children}
-
- - ); +const Season: React.FC = ({ 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 ; + case "summer": + return ; + case "autumn": + return ; + case "winter": + return ; + } + }; + + return {handleSeasonType(type)}; }; export default Season; diff --git a/src/lib/Season/styled.tsx b/src/lib/Season/styled.tsx index 7552be5..d63b8c7 100644 --- a/src/lib/Season/styled.tsx +++ b/src/lib/Season/styled.tsx @@ -1,7 +1,7 @@ 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; @@ -9,65 +9,4 @@ export const Container = styled.div<{ type: string }>` 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; - } -}; diff --git a/src/lib/Season/utils/typeHander.ts b/src/lib/Season/utils/typeHander.ts new file mode 100644 index 0000000..7827888 --- /dev/null +++ b/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; \ No newline at end of file diff --git a/src/lib/Time/index.tsx b/src/lib/Time/index.tsx deleted file mode 100644 index 0af6bec..0000000 --- a/src/lib/Time/index.tsx +++ /dev/null @@ -1,109 +0,0 @@ -import React, { useEffect, useState } from "react" -import * as Styled from "./styled" -import { Time as TimeProps } from "../types/common" - -const MORNING_GRADIENT = "linear-gradient(90deg, #FFCB87 0%, #FF805D 100%)" -const DAY_GRADIENT = "linear-gradient(270deg, #63B2F4 0%, #BDD4ED 100%)" -const EVENING_GRADIENT = "linear-gradient(90deg, #042D60 0%, #456BD7 101.04%)" -const NIGHT_GRADIENT = "linear-gradient(270deg, #787676 0%, #000000 100%)" - -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 = ({ - children, - type = "auto", - animationRoundTime = 10000, - typeChangeTerm = 10000, - imagePosition, - animation, - background, -}) => { - const [currentType, setCurrentType] = useState(type) - const [currentImage, setCurrentImage] = useState(MORNING_IMAGE) - const [currentBackground, setCurrentBackground] = - useState(MORNING_GRADIENT) - - const [x, y] = imagePosition.split("-") - const date = new Date().getHours() - useEffect(() => { - console.log(date) - if (type === "auto") { - if (date <= 6) { - setCurrentType("night") - } else if (date <= 12) { - setCurrentType("morning") - } else if (date <= 18) { - setCurrentType("day") - } else if (date < 20) { - setCurrentType("evening") - } else { - setCurrentType("night") - } - } - }, [type]) - - useEffect(() => { - switch (currentType) { - case "morning": - setCurrentImage(MORNING_IMAGE) - setCurrentBackground(MORNING_GRADIENT) - break - case "day": - setCurrentImage(DAY_IMAGE) - setCurrentBackground(DAY_GRADIENT) - break - case "evening": - setCurrentImage(EVENING_NIGHT_IMAGE) - setCurrentBackground(EVENING_GRADIENT) - break - case "night": - setCurrentImage(EVENING_NIGHT_IMAGE) - setCurrentBackground(NIGHT_GRADIENT) - break - } - }, [currentType]) - - return ( - - - {children} - - ) -} - -export default Time - -function getX(x: string) { - switch (x) { - case "left": - return "left : 0;" - case "right": - return "right : 0;" - case "center": - return "left : 50%; transform : translateX(-50%);" - } - return "" -} - -function getY(y: string) { - switch (y) { - case "top": - return "top : 0;" - case "bottom": - return "bottom : 0;" - case "center": - return "top : 50%; transform : translateY(-50%);" - } - return "" -} diff --git a/src/lib/Time/styled.tsx b/src/lib/Time/styled.tsx deleted file mode 100644 index ad08668..0000000 --- a/src/lib/Time/styled.tsx +++ /dev/null @@ -1,142 +0,0 @@ -import styled, { css, keyframes } from "styled-components" - -interface ImgPositionProps { - x: string - y: string - animation: string - duration: number - iteration: number -} - -interface ContainerProps { - background: boolean - backgroundGradient: string -} - -const leftToRight = keyframes` - 0% { - transform: translateX(0); - } - 50% { - transform: translateX(50%); - } - 100% { - transform: translateX(0); - } -` - -const rightToLeft = keyframes` - 0% { - transform: translateX(0); - } - 50% { - transform: translateX(-50%); - } - 100% { - transform: translateX(0); - } -` - -const topToBottom = keyframes` - 0% { - transform: translateY(0); - box-shadow: 0 0 100px 100px white; - } - 50% { - transform: translateY(-50%); - box-shadow: 0 0 100px 50px Rgba(255,244,25,0.3); - } - 100% { - transform: translateY(0); - box-shadow: 0 0 100px 100px white; - } -` - -const bottomToTop = keyframes` - 0% { - transform: translateY(0); - } - 50% { - transform: translateY(50%); - } - 100% { - transform: translateY(0); - } -` - -const round = keyframes` -0% { - opacity: 0; - transform: translate(0,0); -} -25% { - opacity: 1; - transform: translate(100px, -100px); -} -50%{ - opacity: 1; - transform: translate(250px ,-250px); -} -75%{ - opacity: 1; - transform: translate(400px, -100px); -} -100% { - opacity: 0; - transform: translate(500px, 0); -} -` - -function getKeyframes(param: string) { - switch (param) { - case "left-to-right": - return leftToRight - case "right-to-left": - return rightToLeft - case "top-to-bottom": - return topToBottom - case "bottom-to-top": - return bottomToTop - } -} - -const imgPositionStyle = ({ - x, - y, - animation, - duration, - iteration, -}: ImgPositionProps) => css` - position: absolute; - ${x}; - ${y}; - animation: ${getKeyframes(animation)} ${duration}s infinite linear - ${iteration}s; - width: 50%; -` - -export const Container = styled.div` - background: ${({ background, backgroundGradient }) => - background ? backgroundGradient : "transparent"}; - position: relative; - left: 0; - top: 0; - width: 100%; - height: 100%; - z-index: 10; -` - -export const Image = styled.div` - ${imgPositionStyle}; - display: inline-block; - width: 50px; - height: 50px; - background: white; - border-radius: 50%; - box-shadow: 0 0 100px 50px white; - z-index: -100; -` - -export const Children = styled.div` - z-index: 100; -` diff --git a/src/lib/index.tsx b/src/lib/index.tsx index 8223640..8b8db37 100644 --- a/src/lib/index.tsx +++ b/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";