From 0bc8a4627771a1dc1191b3e85fd8045071954e70 Mon Sep 17 00:00:00 2001
From: greenfrog616 <greenfrog0616@gmail.com>
Date: Wed, 14 Feb 2024 20:48:46 +0900
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F::=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Main/MainIntro.tsx | 27 ++++++++++++++-------------
 src/pages/Offer/Offer.tsx    |  2 +-
 2 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/src/pages/Main/MainIntro.tsx b/src/pages/Main/MainIntro.tsx
index 50cd8145..e415a1bb 100644
--- a/src/pages/Main/MainIntro.tsx
+++ b/src/pages/Main/MainIntro.tsx
@@ -1,6 +1,6 @@
 import React, { useRef, useState, useEffect } from "react";
 import MainHeader from "../../components/Header1/Header1";
-import * as s from "../Main/MainIntro.style.js";
+import * as s from "../Main/MainIntro.style";
 import Top from "../../assets/img/imsi.svg";
 import Success from "../../assets/img/Success.svg";
 import Challenge from "../../assets/img/Challenge.svg";
@@ -8,16 +8,22 @@ import Navigate from "../../assets/img/Navigate.svg";
 import Last from "../../assets/img/Last.svg";
 
 const MainIntro = (): JSX.Element => {
-  const element1 = useRef<HTMLElement>(null);
-  const element2 = useRef<HTMLElement>(null);
-  const element3 = useRef<HTMLElement>(null);
+  const element1 = useRef<HTMLImageElement>(null);
+  const element2 = useRef<HTMLImageElement>(null);
+  const element3 = useRef<HTMLImageElement>(null);
   const [visibleElements, setVisibleElements] = useState<number>(0);
 
   useEffect(() => {
     const handleScroll = () => {
-      const { top: top1 } = element1.current!.getBoundingClientRect();
-      const { top: top2 } = element2.current!.getBoundingClientRect();
-      const { top: top3 } = element3.current!.getBoundingClientRect();
+      const { top: top1 } = element1.current?.getBoundingClientRect() || {
+        top: 0,
+      };
+      const { top: top2 } = element2.current?.getBoundingClientRect() || {
+        top: 0,
+      };
+      const { top: top3 } = element3.current?.getBoundingClientRect() || {
+        top: 0,
+      };
       const isInViewPort1 = top1 >= 0 && top1 <= window.innerHeight;
       const isInViewPort2 = top2 >= 0 && top2 <= window.innerHeight;
       const isInViewPort3 = top3 >= 0 && top3 <= window.innerHeight;
@@ -51,14 +57,9 @@ const MainIntro = (): JSX.Element => {
           당신의 시작을 가치있게, <br />
           입학 원서 접수 사이트를 개발하는 <s.CNS>CNS</s.CNS> 입니다.
         </s.CNSText2>
-        
       </s.MainTop>
-      
+
       <s.Imsi src={Top} alt="error" />
-      
-      
-      
-      
 
       <s.MainMiddle>
         <s.MainMiddleImg
diff --git a/src/pages/Offer/Offer.tsx b/src/pages/Offer/Offer.tsx
index ab714d38..7f55559b 100644
--- a/src/pages/Offer/Offer.tsx
+++ b/src/pages/Offer/Offer.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from "react";
 import { useNavigate, useLocation } from "react-router-dom";
 
-import Header from "src/components/Header2/Header2";
+import Header from "../../components/Header2/Header2";
 import Footer from "src/components/Footer/Footer";
 import * as S from "../Offer/Offer.style";