Merge pull request #172 from 100-hours-a-week/dev

Main <- Dev
100-hours-a-week · Aug 29, 2024 · ea95028 · ea95028
2 parents 502ace6 + 23c21e3
commit ea95028
Show file tree

Hide file tree

Showing 29 changed files with 745 additions and 684 deletions.
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -50,10 +50,6 @@ jobs:
         if: github.ref == 'refs/heads/dev'
         run: aws s3 sync build s3://ustock-dev-bucket/react/ --delete
 
-      - name: Invalidate CloudFront Cache for Develop
-        if: github.ref == 'refs/heads/dev'
-        run: aws cloudfront create-invalidation --distribution-id ${{ secrets.CLOUDFRONT_DISTRIBUTION_ID_DEV }} --paths "/*"
-
       - name: Set environment variables for Production
         if: github.ref == 'refs/heads/main'
         run: |
@@ -69,8 +65,4 @@ jobs:
 
       - name: Deploy to S3 for Production
         if: github.ref == 'refs/heads/main'
-        run: aws s3 sync build s3://ustock-bucket/react/ --delete
-
-      - name: Invalidate CloudFront Cache for Production
-        if: github.ref == 'refs/heads/main'
-        run: aws cloudfront create-invalidation --distribution-id ${{ secrets.CLOUDFRONT_DISTRIBUTION_ID_PROD }} --paths "/*"
+        run: aws s3 sync build s3://ustock-bucket/react/ --delete
diff --git a/src/Component/Button/Animation/HyperText.tsx b/src/Component/Button/Animation/HyperText.tsx
@@ -2,6 +2,15 @@
 
 import { useEffect, useRef, useState } from "react";
 import { motion, Variants } from "framer-motion";
+import styled from "styled-components";
+
+const MotionH1 = styled(motion.h1)`
+  font-size: 25px;
+
+  @media (max-width: 768px) {
+    font-size: 20px;
+  }
+`;
 
 interface HyperTextProps {
   text: string;
@@ -37,54 +46,47 @@ export default function HyperText({
   };
 
   useEffect(() => {
-    const interval = setInterval(
-      () => {
-        if (!animateOnLoad && isFirstRender.current) {
-          clearInterval(interval);
-          isFirstRender.current = false;
-          return;
-        }
-        if (interations.current < text.length) {
-          setDisplayText((t) =>
-            t
-              .split("")
-              .map((l, i) =>
-                l === " "
-                  ? l
-                  : i <= interations.current
-                  ? text[i]
-                  : numbers[getRandomInt(10)]
-              )
-              .join("")
-          );
-          interations.current = interations.current + 0.1;
-        } else {
-          setTrigger(false);
-          clearInterval(interval);
-        }
-      },
-      duration / (text.length * 10)
-    );
+    const interval = setInterval(() => {
+      if (!animateOnLoad && isFirstRender.current) {
+        clearInterval(interval);
+        isFirstRender.current = false;
+        return;
+      }
+      if (interations.current < text.length) {
+        setDisplayText((t) =>
+          t
+            .split("")
+            .map((l, i) =>
+              l === " "
+                ? l
+                : i <= interations.current
+                ? text[i]
+                : numbers[getRandomInt(10)]
+            )
+            .join("")
+        );
+        interations.current = interations.current + 0.1;
+      } else {
+        setTrigger(false);
+        clearInterval(interval);
+      }
+    }, duration / (text.length * 10));
     // Clean up interval on unmount
     return () => clearInterval(interval);
   }, [text, duration, trigger, animateOnLoad]);
-    
-    useEffect(() => {
-        setDisplayText(text);
-    }, [text]);
+
+  useEffect(() => {
+    setDisplayText(text);
+  }, [text]);
 
   return (
     <div
       className="overflow-hidden py-2 flex cursor-default scale-100"
       onMouseEnter={triggerAnimation}
     >
-        <motion.h1
-              style={{ fontSize: "32px", marginLeft: "-100px" }}
-        className={`font-mono ${className}`}
-        {...framerProps}
-        >
+      <MotionH1 className={`font-mono ${className}`} {...framerProps}>
         {displayText}
-      </motion.h1>
+      </MotionH1>
     </div>
   );
 }
diff --git a/src/Component/Button/Animation/rotatioin.tsx b/src/Component/Button/Animation/rotatioin.tsx
@@ -5,7 +5,7 @@ import { FaCaretDown } from "react-icons/fa";
 
 interface SlidingDivProps {
   isSliding: boolean;
-  isNegative: boolean;
+  $isNegative: boolean;
 }
 
 const slideUp = keyframes`
@@ -48,7 +48,7 @@ const SlidingDiv = styled.div<SlidingDivProps>`
   padding: 16px;
   animation: ${({ isSliding }) => (isSliding ? slideUp : slideDown)} 0.5s
     forwards;
-  color: ${({ isNegative }) => (isNegative ? "#615EFC" : "#FF5759")};
+  color: ${({ $isNegative }) => ($isNegative ? "#615EFC" : "#FF5759")};
 `;
 
 const InfoText = styled.div`
@@ -139,7 +139,7 @@ const RotationAnimation: React.FC<MarketDataProps> = ({ kospi, kosdaq }) => {
     <Container isExpanded={isExpanded}>
       <SlidingDiv
         isSliding={isSliding}
-        isNegative={currentMarket.changeRate < 0}
+        $isNegative={currentMarket.changeRate < 0}
       >
         <InfoText>{label}:</InfoText>
         <PriceText>{currentMarket.price}</PriceText>

diff --git a/src/Component/Button/DeleteButton.tsx b/src/Component/Button/DeleteButton.tsx
@@ -7,19 +7,18 @@ interface AnimatedButtonProps {
 
 const DeleteButton: React.FC<AnimatedButtonProps> = ({ onClick }) => {
     return (
-        <button
+        <div
             className="delete"
             onClick={onClick}
             style={{
-                position: "absolute",
                 left: "410px",
                 cursor: "pointer",
                 top: "-2px",
             }}
         >
             <div className="top"></div>
             <div className="bottom"></div>
-        </button>
+        </div>
     );
 };
 

diff --git a/src/Component/Button/DeleteButton2.tsx b/src/Component/Button/DeleteButton2.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+import "./DeleteButtonStyle.css";
+
+interface AnimatedButtonProps {
+    onClick: () => void;
+}
+
+const DeleteButton2: React.FC<AnimatedButtonProps> = ({ onClick }) => {
+    return (
+        <div
+            className="delete"
+            onClick={onClick}
+            style={{
+                left: "410px",
+                cursor: "pointer",
+                top: "-2px",
+            }}
+        >
+            <div className="top"></div>
+            <div className="bottom"></div>
+        </div>
+    );
+};
+
+export default DeleteButton2;
diff --git a/src/Component/Button/DeleteButtonStyle.css b/src/Component/Button/DeleteButtonStyle.css
@@ -1,101 +1,101 @@
 /* Variables converted to standard CSS */
 
 .deleteContainer > button {
-    position: relative;
-    display: block;
-    width: 25%;
-    height: 100%;
-    border: none;
-    background: transparent;
-    cursor: pointer;
-    z-index: 99;
-    outline: none;
-    backface-visibility: hidden;
-    -webkit-touch-callout: none;
+  position: relative;
+  display: block;
+  width: 25%;
+  height: 100%;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  z-index: 99;
+  outline: none;
+  backface-visibility: hidden;
+  -webkit-touch-callout: none;
 }
 
 .deleteContainer > button > div {
-    position: absolute;
-    top: 10px;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    margin: auto;
+  position: absolute;
+  top: 10px;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  margin: auto;
 }
 
 /* Delete Button Styles */
 .delete:hover .top {
-    animation: delete 0.8s ease-out;
-    background: #615efc;
+  animation: delete 0.8s ease-out;
+  background: #615efc;
 }
 
 .delete:hover .top::before {
-    background: #615efc;
+  background: #615efc;
 }
 
 .delete:hover .bottom {
-    background: #615efc;
+  background: #615efc;
 }
 
 .delete .top {
-    position: absolute;
-    top: 2px;
-    width: 24px;
-    height: 4px;
-    background: rgb(88, 88, 88);
-    z-index: 1;
+  position: absolute;
+  top: 2px;
+  width: 24px;
+  height: 4px;
+  background: rgb(88, 88, 88);
+  z-index: 1;
 }
 
 .delete .top::before {
-    content: "";
-    position: absolute;
-    top: -2px;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    margin: auto;
-    width: 14px;
-    height: 6px;
-    background: rgb(88, 88, 88);
-    border-radius: 8px;
+  content: "";
+  position: absolute;
+  top: -2px;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+  width: 14px;
+  height: 6px;
+  background: rgb(88, 88, 88);
+  border-radius: 8px;
 }
 
 .delete .bottom {
-    position: absolute;
-    top: 8px;
-    width: 24px;
-    height: 26px;
-    background: rgb(88, 88, 88);
-    border-radius: 0 0 6px 6px;
+  position: absolute;
+  top: 8px;
+  width: 24px;
+  height: 26px;
+  background: rgb(88, 88, 88);
+  border-radius: 0 0 6px 6px;
 }
 
 /* Keyframes for Delete */
 @keyframes delete {
-    0% {
-        transform: rotate(0) translateY(0);
-    }
-    20% {
-        transform: rotate(0) translateY(-4px);
-    }
-    30% {
-        transform: rotate(20deg) translateY(-4px);
-    }
-    40% {
-        transform: rotate(-20deg) translateY(-4px);
-    }
-    50% {
-        transform: rotate(20deg) translateY(-4px);
-    }
-    60% {
-        transform: rotate(-10deg) translateY(-4px);
-    }
-    70% {
-        transform: rotate(10deg) translateY(-4px);
-    }
-    80% {
-        transform: rotate(0) translateY(-4px);
-    }
-    100% {
-        transform: rotate(0) translateY(0);
-    }
+  0% {
+    transform: rotate(0) translateY(0);
+  }
+  20% {
+    transform: rotate(0) translateY(-4px);
+  }
+  30% {
+    transform: rotate(20deg) translateY(-4px);
+  }
+  40% {
+    transform: rotate(-20deg) translateY(-4px);
+  }
+  50% {
+    transform: rotate(20deg) translateY(-4px);
+  }
+  60% {
+    transform: rotate(-10deg) translateY(-4px);
+  }
+  70% {
+    transform: rotate(10deg) translateY(-4px);
+  }
+  80% {
+    transform: rotate(0) translateY(-4px);
+  }
+  100% {
+    transform: rotate(0) translateY(0);
+  }
 }