리덕스 로직 수정 및 채널톡 로고, 사용자경험을 위한 접근성 설계 (#42)

리덕스 로직 수정 및 채널톡 로고, 사용자경험을 위한 접근성 설계 (#42)

package.json

@@ -18,6 +18,7 @@
     "react": "^18.2.0",
     "react-canvas-confetti": "^1.3.0",
     "react-dom": "^18.2.0",
+    "react-intersection-observer": "^9.4.3",
     "react-redux": "^8.0.5",
     "react-router-dom": "^6.6.2",
     "react-scripts": "5.0.1",

src/component/404/NotTime.tsx

@@ -1,36 +1,46 @@
 /** @jsxImportSource @emotion/react */
 import { css, keyframes } from "@emotion/react";
-import React from 'react'
-import { Button, Modal, Section } from '../emotion/component'
-import oops from '../../images/oops.png';
+import React from "react";
+import { Button, Modal, Section } from "../emotion/component";
+import notTime from "../../images/notTime.png";
 import { Link } from "react-router-dom";
 import { fadeUp } from "../../styles/Keyframes";
 
 export default function NotTime() {
-    return (
-        <div css={css`
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            width: 60%;
+  return (
+    <div
+      css={css`
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 60%;
 
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-        `}>
-            <img alt="404" src={oops} css={css`
-                width: 8.5em;
-                animation: ${fadeUp} 1s ease-in-out;
-            `} />
-            <span css={css`
-                font-family: 'Pretendard-Bold';
-                letter-spacing: -0.03em;
-                color: #333d4b;
-                margin-top: 1em;
-                font-size: 15px;
-                animation: ${fadeUp} 1s ease-in-out;
-            `}>현재는 예비 사자 모집 기간이 아니에요!</span>
-        </div>
-    )
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      `}
+    >
+      <img
+        alt="404"
+        src={notTime}
+        css={css`
+          width: 19.5em;
+          animation: ${fadeUp} 1s ease-in-out;
+        `}
+      />
+      {/* <span
+        css={css`
+          font-family: "Pretendard-Bold";
+          letter-spacing: -0.03em;
+          color: #333d4b;
+          margin-top: 1em;
+          font-size: 15px;
+          animation: ${fadeUp} 1s ease-in-out;
+        `}
+      >
+        현재는 예비 사자 모집 기간이 아니에요!
+      </span> */}
+    </div>
+  );
 }

src/component/404/NotWidth.tsx

@@ -1,40 +1,50 @@
 /** @jsxImportSource @emotion/react */
 import { css, keyframes } from "@emotion/react";
-import React from 'react'
-import { Button, Modal, Section } from '../emotion/component'
-import oops from '../../images/oops.png';
+import React from "react";
+import { Button, Modal, Section } from "../emotion/component";
+import oops from "../../images/oops.png";
 import { Link } from "react-router-dom";
 import { fadeUp } from "../../styles/Keyframes";
 
 export default function NotWidth() {
-    return (
-        <div css={css`
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            width: 60%;
+  return (
+    <div
+      css={css`
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 60%;
 
-            display: none;
-            flex-direction: column;
-            align-items: center;
+        display: none;
+        flex-direction: column;
+        align-items: center;
 
-            @media (max-width: 1024px) {
-                display: flex;
-            }
-        `}>
-            <img alt="404" src={oops} css={css`
-                width: 8.5em;
-                animation: ${fadeUp} 1s ease-in-out;
-            `} />
-            <span css={css`
-                font-family: 'Pretendard-Bold';
-                letter-spacing: -0.03em;
-                color: #333d4b;
-                margin-top: 1em;
-                font-size: 15px;
-                animation: ${fadeUp} 1s ease-in-out;
-            `}>원활한 지원환경을 위해 <br /> PC 또는 태블릿으로 접속해주세요!</span>
-        </div>
-    )
+        @media (max-width: 1024px) {
+          display: flex;
+        }
+      `}
+    >
+      <img
+        alt="404"
+        src={oops}
+        css={css`
+          width: 8.5em;
+          animation: ${fadeUp} 1s ease-in-out;
+        `}
+      />
+      <span
+        css={css`
+          font-family: "Pretendard-Bold";
+          letter-spacing: -0.03em;
+          color: #333d4b;
+          margin-top: 1em;
+          font-size: 15px;
+          animation: ${fadeUp} 1s ease-in-out;
+        `}
+      >
+        원활한 지원환경을 위해 <br /> PC 또는 태블릿으로 접속해주세요!
+      </span>
+    </div>
+  );
 }