Merge pull request #42 from mnsinri/dev

Dev
mnsinri · Aug 20, 2023 · ccb0b82 · ccb0b82
2 parents 4c719c9 + 5ef6654
commit ccb0b82
Show file tree

Hide file tree

Showing 25 changed files with 376 additions and 294 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/Background.tsx b/src/components/Background.tsx
@@ -1,19 +1,14 @@
 import React from "react";
 import styled from "styled-components";
-import { animated } from "@react-spring/web";
 import { ChildrenNode } from "../types";
-import { useTheme } from "../hooks";
 
-const Container = styled(animated.div)`
+const Container = styled.div`
   height: 100svh;
   width: 100svw;
+  background-color: ${(p) => p.theme.bg.primary};
+  transition: background-color 0.3s ease;
 `;
 
 export const Background = React.memo<ChildrenNode>(({ children, ...props }) => {
-  const { springColors } = useTheme();
-  return (
-    <Container style={{ background: springColors.base.primary }} {...props}>
-      {children}
-    </Container>
-  );
+  return <Container {...props}>{children}</Container>;
 });
diff --git a/src/components/DateBorder.tsx b/src/components/DateBorder.tsx
@@ -1,9 +1,9 @@
-import React from "react";
+import React, { useEffect } from "react";
 import styled from "styled-components";
-import { animated, useSpring } from "@react-spring/web";
-import { DateBorderProps } from "../types";
-import { useTheme } from "../hooks";
+import { animated, useSpring, useSpringRef } from "@react-spring/web";
+import { DateBorderProps, ColorLevel } from "../types";
 import { getFormattedDate, parseToJST } from "../utils";
+import { springConfig } from "../configs";
 
 const Container = styled.div`
   display: flex;
@@ -18,12 +18,14 @@ const Icon = styled.div`
   aspect-ratio: 1;
 `;
 
-const Bar = styled(animated.div)`
+const Bar = styled(animated.div)<{ type: keyof ColorLevel }>`
   margin-top: auto;
   width: 5px;
+  background-color: ${(p) => p.theme.vspo[p.type]};
+  transition: background-color 0.3s ease;
 `;
 
-const DateLabel = styled(animated.div)`
+const DateLabel = styled.div`
   font-size: 48px;
   font-family: "Itim", cursive;
   letter-spacing: -0.03em;
@@ -32,8 +34,6 @@ const DateLabel = styled(animated.div)`
 
 export const DateBorder = React.memo<DateBorderProps>(
   ({ dateString, ...props }) => {
-    const { springColors, colors } = useTheme();
-
     const parseToViewDate = (dateString: string) => {
       const today = parseToJST(Date.now());
       if (getFormattedDate(today) === dateString) {
@@ -63,7 +63,9 @@ export const DateBorder = React.memo<DateBorderProps>(
 
     const calcHeight = (max: number) => max - 7 * Math.random();
 
+    const animApi = useSpringRef();
     const { lh, mh, rh } = useSpring({
+      ref: animApi,
       from: {
         lh: 0,
         mh: 0,
@@ -74,25 +76,22 @@ export const DateBorder = React.memo<DateBorderProps>(
         mh: calcHeight(20),
         rh: calcHeight(16),
       },
-      config: colors.config,
+      delay: 200,
+      config: springConfig,
     });
 
+    useEffect(() => {
+      animApi.start();
+    }, []);
+
     return (
       <Container {...props}>
         <Icon>
-          <Bar
-            style={{ height: lh, backgroundColor: springColors.main.primary }}
-          />
-          <Bar
-            style={{ height: mh, backgroundColor: springColors.main.secondary }}
-          />
-          <Bar
-            style={{ height: rh, backgroundColor: springColors.main.primary }}
-          />
+          <Bar style={{ height: lh }} type="primary" />
+          <Bar style={{ height: mh }} type="secondary" />
+          <Bar style={{ height: rh }} type="primary" />
         </Icon>
-        <DateLabel style={{ color: springColors.text.primary }}>
-          {parseToViewDate(dateString)}
-        </DateLabel>
+        <DateLabel>{parseToViewDate(dateString)}</DateLabel>
       </Container>
     );
   }

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -1,10 +1,9 @@
 import React from "react";
 import styled from "styled-components";
 import { ThemeButton, GithubLinkButton } from "./buttons";
-import { theme } from "../theme";
+import { breakpoints } from "../configs";
 import logo from "../logo.png";
-import { useTheme, useWindowSize } from "../hooks";
-import { animated } from "@react-spring/web";
+import { useWindowSize } from "../hooks";
 
 const Container = styled.div`
   width: 100%;
@@ -15,7 +14,7 @@ const Container = styled.div`
   display: flex;
   align-items: center;
 
-  ${theme.breakpoints.mediaQueries.md`
+  ${breakpoints.mediaQueries.md`
     height: 100px;
   `}
 `;
@@ -26,7 +25,7 @@ const Title = styled.div`
   display: flex;
   justify-content: center;
 
-  ${theme.breakpoints.mediaQueries.md`
+  ${breakpoints.mediaQueries.md`
     justify-content: start;
   `}
 `;
@@ -35,13 +34,13 @@ const Icon = styled.img`
   width: 60px;
   height: 60px;
 
-  ${theme.breakpoints.mediaQueries.md`
+  ${breakpoints.mediaQueries.md`
     width: 50px;
     height: 50px;
   `}
 `;
 
-const TitleText = styled(animated.div)`
+const TitleText = styled.div`
   margin-left: 10px;
   margin-top: 8px;
   font-size: 28px;
@@ -54,24 +53,19 @@ const Wrapper = styled.div`
   display: flex;
   justify-content: center;
 
-  ${theme.breakpoints.mediaQueries.md`
+  ${breakpoints.mediaQueries.md`
     width: 120px;
     justify-content: flex-end;
   `}
 `;
 
 export const Header: React.FC = () => {
   const { isPhoneSize } = useWindowSize();
-  const { springColors } = useTheme();
   return (
     <Container>
       <Title>
         <Icon src={logo} alt="logo" />
-        {!isPhoneSize ? (
-          <TitleText style={{ color: springColors.text.primary }}>
-            Vspo stream schedule
-          </TitleText>
-        ) : null}
+        {!isPhoneSize && <TitleText>Vspo stream schedule</TitleText>}
       </Title>
       <Wrapper style={{ order: isPhoneSize ? -1 : 0 }}>
         <GithubLinkButton />

diff --git a/src/components/MainContainer.tsx b/src/components/MainContainer.tsx
@@ -1,17 +1,18 @@
 import React from "react";
 import styled from "styled-components";
-import { animated } from "@react-spring/web";
-import { theme } from "../theme";
+import { breakpoints } from "../configs";
 import { StreamingTable } from "./StreamingTable";
 import { DateBorder } from "./DateBorder";
 import { useVspoStreams } from "../hooks";
 import { StreamInfo, StreamList } from "../types";
 import { Header } from "./Header";
 
-const Container = styled(animated.div)`
+const Container = styled.div`
   margin: 0 auto;
   background: rgba(240, 240, 240, 0.08);
   box-shadow: 0px 0px 4px 4px rgba(0, 0, 0, 0.2);
+  color: ${(p) => p.theme.text.primary};
+  transition: color 0.3s ease;
 
   height: 100%;
   overflow: scroll;
@@ -22,40 +23,40 @@ const Container = styled(animated.div)`
     display: none;
   }
 
-  ${theme.breakpoints.mediaQueries.sm`
-    width: ${theme.breakpoints.values.sm}px;
+  ${breakpoints.mediaQueries.sm`
+    width: ${breakpoints.values.sm}px;
   `}
 
-  ${theme.breakpoints.mediaQueries.md`
-    width: ${theme.breakpoints.values.md}px;
+  ${breakpoints.mediaQueries.md`
+    width: ${breakpoints.values.md}px;
   `}
 
-  ${theme.breakpoints.mediaQueries.lg`
-    width: ${theme.breakpoints.values.lg}px;
+  ${breakpoints.mediaQueries.lg`
+    width: ${breakpoints.values.lg}px;
   `}
 
-  ${theme.breakpoints.mediaQueries.xl`
-    width: ${theme.breakpoints.values.xl}px;
+  ${breakpoints.mediaQueries.xl`
+    width: ${breakpoints.values.xl}px;
   `}
 
-  ${theme.breakpoints.mediaQueries.xxl`
-    width: ${theme.breakpoints.values.xxl}px;
+  ${breakpoints.mediaQueries.xxl`
+    width: ${breakpoints.values.xxl}px;
   `}
 `;
 
-const InnerContainer = styled(animated.div)`
+const InnerContainer = styled.div`
   margin: 0 auto;
   width: 90%;
 
-  ${theme.breakpoints.mediaQueries.sm`
+  ${breakpoints.mediaQueries.sm`
     width: 88%;
   `}
 
-  ${theme.breakpoints.mediaQueries.lg`
+  ${breakpoints.mediaQueries.lg`
     width: 73%;
   `}
 
-  ${theme.breakpoints.mediaQueries.xl`
+  ${breakpoints.mediaQueries.xl`
     width: 88%;
   `}
 `;

diff --git a/src/components/StreamingTable.tsx b/src/components/StreamingTable.tsx
@@ -3,7 +3,7 @@ import styled from "styled-components";
 import { StreamingTableProps } from "../types";
 import { StreamingCard } from "./card";
 import { useWindowSize } from "../hooks";
-import { theme } from "../theme";
+import { breakpoints } from "../configs";
 
 const Container = styled.div<{ height: number }>`
   min-height: ${(p) => p.height}px;
@@ -17,7 +17,7 @@ const FlexBox = styled.div`
   flex-direction: column;
   gap: 20px;
 
-  ${theme.breakpoints.mediaQueries.md`
+  ${breakpoints.mediaQueries.md`
     gap: 40px;
   `}
 `;

diff --git a/src/components/buttons/BaseButton.tsx b/src/components/buttons/BaseButton.tsx
@@ -1,9 +1,9 @@
 import React from "react";
+import styled from "styled-components";
 import { animated, useSpring } from "@react-spring/web";
 import { IconContext } from "react-icons";
-import { useHover, useTheme, useWindowSize } from "../../hooks";
+import { useHover, useWindowSize } from "../../hooks";
 import { BaseButtonProps } from "../../types";
-import styled from "styled-components";
 
 const Container = styled.div`
   width: 27px;
@@ -15,7 +15,6 @@ export const BaseButton: React.FC<BaseButtonProps> = ({
   children,
   ...props
 }) => {
-  const { springColors } = useTheme();
   const { hovered, hoverSpread } = useHover();
   const { isMobile } = useWindowSize();
 
@@ -32,7 +31,6 @@ export const BaseButton: React.FC<BaseButtonProps> = ({
         <animated.div
           style={{
             transform,
-            color: springColors.text.primary,
             height: "100%",
           }}
         >