feat : v1.0.1 변경 사항 작업 (#36)

klmhyeonwoo · Jul 20, 2023 · bfd1d5a · bfd1d5a
2 parents 9072d51 + 1aa41a0
commit bfd1d5a
Show file tree

Hide file tree

Showing 8 changed files with 112 additions and 50 deletions.
diff --git a/src/components/branding/component/component.tsx b/src/components/branding/component/component.tsx
@@ -3,15 +3,17 @@ import { catergoryProps, imgProps, textProps } from "@/@types/type";
 import { css, keyframes } from "@emotion/react";
 import { brandImgProps } from "@/@types/type";
 import Image from "next/image";
-import React, { forwardRef, useEffect, useRef } from "react";
+import React, { forwardRef, useEffect, useRef, useState } from "react";
 import { fadeUp } from "@/styles/effect";
 
 export const BrandingImage = forwardRef(
   ({ src, alt, scrollState }: brandImgProps, ref: any) => {
     const imageRef = useRef<HTMLImageElement>(null);
+    const [checked, setChecked] = useState(false);
     useEffect(() => {
       if (scrollState && imageRef.current) {
-        imageRef.current.style.display = "flex";
+        imageRef.current.style.visibility = "visible";
+        setChecked(true);
       }
     }, [scrollState]);
     return (
@@ -51,7 +53,8 @@ export const BrandingImage = forwardRef(
           src={src}
           priority
           css={css`
-            display: none;
+            visibility: hidden;
+            display: flex;
             width: auto;
             height: 26em;
 
@@ -65,7 +68,10 @@ export const BrandingImage = forwardRef(
             css`
               height: 24em;
             `}
-            animation: ${fadeUp} 1.4s ease-in-out;
+            ${checked &&
+            css`
+              animation: ${fadeUp} 1.4s ease-in-out;
+            `}
           `}
           alt={alt}
           ref={imageRef}

diff --git a/src/components/common/component/component.tsx b/src/components/common/component/component.tsx
@@ -27,23 +27,28 @@ import { useRouter } from "next/router";
 export const TitleOfBlue = forwardRef(
   ({ text, scrollState }: textProps, ref: any) => {
     const blueRef = useRef<HTMLSpanElement>(null);
+    const [checked, setChecked] = useState(false);
 
     useEffect(() => {
       if (scrollState && blueRef.current) {
-        blueRef.current.style.display = "block";
+        blueRef.current.style.visibility = "visible";
+        setChecked(true);
       }
     }, [scrollState]);
 
     return (
       <div ref={ref}>
         <span
           css={css`
-            display: none;
+            display: block;
             color: #4f85e8;
             font-family: "Pretendard-Bold";
             letter-spacing: -0.03em;
             font-size: 1.43em;
-            animation: ${TextfadeUp} 1s ease-in-out;
+            ${checked &&
+            css`
+              animation: ${TextfadeUp} 1s ease-in-out;
+            `}
           `}
           ref={blueRef}
         >
@@ -62,26 +67,32 @@ export const TitleOfBlack = forwardRef(
     const topText = text.split("\n")[0];
     const bottomText = text.split("\n")[1];
     const blackRef = useRef<HTMLSpanElement>(null);
+    const [checked, setChecked] = useState(false);
 
     useEffect(() => {
       if (scrollState && blackRef.current) {
-        blackRef.current.style.display = "block";
+        blackRef.current.style.visibility = "visible";
+        setChecked(true);
       }
     }, [scrollState]);
 
     return (
       <div ref={ref}>
         <span
           css={css`
-            display: none;
+            visibility: hidden;
+            display: block;
             color: #333d4b;
             font-family: "Pretendard-ExtraBold";
             letter-spacing: -0.03em;
             font-size: 35px;
             margin-top: 0.5em;
             line-height: 1.3em;
             margin-bottom: 1.6em;
-            animation: ${TextfadeUp} 1.3s ease-in-out;
+            ${checked &&
+            css`
+              animation: ${TextfadeUp} 1.3s ease-in-out;
+            `}
 
             @media (max-width: 481px) {
               font-size: 22px;
@@ -108,24 +119,30 @@ TitleOfBlack.displayName = "TitleOfBlack";
 export const Description = forwardRef(
   ({ text, scrollState }: textProps, ref: any) => {
     const descriptionRef = useRef<HTMLSpanElement>(null);
+    const [checked, setChecked] = useState(false);
 
     useEffect(() => {
       if (scrollState && descriptionRef.current) {
-        descriptionRef.current.style.display = "block";
+        descriptionRef.current.style.visibility = "visible";
+        setChecked(true);
       }
     }, [scrollState]);
 
     return (
       <div ref={ref}>
         <span
           css={css`
-            display: none;
+            visibility: hidden;
+            display: block;
             color: #333d4b;
             font-family: "Pretendard-Medium";
             letter-spacing: -0.03em;
             font-size: 1.1em;
             line-height: 1.5em;
-            animation: ${TextfadeUp} 1.5s ease-in-out;
+            ${checked &&
+            css`
+              animation: ${TextfadeUp} 1.5s ease-in-out;
+            `}
           `}
           ref={descriptionRef}
         >
@@ -155,18 +172,21 @@ export const ItemOfCategory = forwardRef(
     const topText = text.split("\n")[0];
     const bottomText = text.split("\n")[1];
     const categoryRef = useRef<HTMLDivElement>(null);
+    const [checked, setChecked] = useState(false);
 
     useEffect(() => {
       if (scrollState && categoryRef.current) {
-        categoryRef.current.style.display = "flex";
+        categoryRef.current.style.visibility = "visible";
+        setChecked(true);
       }
     }, [scrollState]);
 
     return (
       <div ref={ref}>
         <div
           css={css`
-            display: none;
+            visibility: hidden;
+            display: flex;
             box-sizing: border-box;
             font-size: 1.68em;
             height: 16.2em;
@@ -185,7 +205,10 @@ export const ItemOfCategory = forwardRef(
 
             flex-direction: column;
             align-items: center;
-            animation: ${fadeUp} 1.7s ease-in-out;
+            ${checked &&
+            css`
+              animation: ${fadeUp} 1.7s ease-in-out;
+            `}
             transition: 0.4s all;
 
             &:hover {
@@ -311,7 +334,7 @@ export const Header = () => {
     (state: RootState) => state.scroll.openingScroll
   );
 
-  console.log(openingScroll);
+  // console.log(openingScroll);
 
   const handleScroll = () => {
     if (window.scrollY || document.documentElement.scrollTop > 0) {
@@ -322,7 +345,7 @@ export const Header = () => {
     }
 
     if (window.scrollY > openingScroll) {
-      console.log(window.scrollY, openingScroll);
+      // console.log(window.scrollY, openingScroll);
       setOpeningState(true);
       setScrollState(false);
     } else {
@@ -340,6 +363,13 @@ export const Header = () => {
   }, [openingScroll]);
 
   const router = useRouter();
+  const indexRef = useRef<HTMLDivElement>(null);
+
+  setTimeout(() => {
+    if (indexRef.current) {
+      indexRef.current.style.display = "flex";
+    }
+  }, 1000);
 
   return (
     <>
@@ -348,13 +378,14 @@ export const Header = () => {
           position: fixed;
           z-index: 999;
           width: 100%;
-          display: flex;
+          display: none;
           justify-content: center;
           align-items: center;
           padding-top: 0.5em;
           padding-bottom: 0.5em;
           column-gap: 30em;
           font-size: 18px;
+          transition: 0.5s all;
 
           @media (max-width: 388px) {
             font-size: 10px;
@@ -376,7 +407,7 @@ export const Header = () => {
             font-size: 18px;
           }
 
-          background-color: none;
+          background-color: transparent;
 
           a {
             @media all and (min-width: 768px) and (max-width: 1099px) {
@@ -425,6 +456,7 @@ export const Header = () => {
             }
           `}
         `}
+        ref={indexRef}
       >
         {openingState ? (
           <Image

diff --git a/src/components/ending/Ending.tsx b/src/components/ending/Ending.tsx
@@ -25,13 +25,13 @@ export default function Ending() {
   const handleScroll = () => {
     if (backgroundRef.current) {
       scaledScroll = Math.abs(window.scrollY - scroll);
-      console.log("background:", backgroundRef.current.offsetWidth);
-      console.log("현재 스크롤:", scaledScroll);
-      console.log(window.innerWidth);
+      // console.log("background:", backgroundRef.current.offsetWidth);
+      // console.log("현재 스크롤:", scaledScroll);
+      // console.log(window.innerWidth);
       if (backgroundRef.current.offsetWidth <= window.innerWidth) {
         backgroundRef.current.style.width = `${1000 + scaledScroll}px`;
       }
-      console.log(backgroundRef.current.style);
+      // console.log(backgroundRef.current.style);
     }
   };
 

diff --git a/src/components/ideal/component/component.tsx b/src/components/ideal/component/component.tsx
@@ -8,26 +8,32 @@ import {
 } from "@/@types/type";
 import { TextfadeUp } from "@/styles/effect";
 import { css, keyframes } from "@emotion/react";
-import { forwardRef, useEffect, useRef } from "react";
+import { forwardRef, useEffect, useRef, useState } from "react";
 
 export const IdealArticle = forwardRef(
   ({ scrollState }: refProps, ref: any) => {
     const contentRef = useRef<HTMLDivElement>(null);
+    const [checked, setChecked] = useState(false);
 
     useEffect(() => {
       if (scrollState && contentRef.current) {
-        contentRef.current.style.display = "grid";
+        contentRef.current.style.visibility = "visible";
+        setChecked(true);
       }
     }, [scrollState]);
 
     return (
       <div ref={ref}>
         <article
           css={css`
-            display: none;
+            visibility: hidden;
+            display: grid;
             grid-template-columns: 1fr 1fr;
             row-gap: 4em;
-            animation: ${TextfadeUp} 1.5s ease-in-out;
+            ${checked &&
+            css`
+              animation: ${TextfadeUp} 1.5s ease-in-out;
+            `}
             column-gap: 2em;
           `}
           ref={contentRef}

diff --git a/src/components/main/component/component.tsx b/src/components/main/component/component.tsx
@@ -53,7 +53,7 @@ export const MainArticle = () => {
     if (TitleRef.current) {
       TitleRef.current.style.display = "flex";
     }
-  }, 2000);
+  }, 1000);
   return (
     <div
       css={css`
@@ -87,7 +87,8 @@ export const ApplyButton = () => {
         <div
           css={css`
             margin-top: 3em;
-            width: 17em;
+            width: auto;
+            min-width: 17em;
             height: 3.5em;
             border: none;
             border-radius: 0.7em;
@@ -100,6 +101,8 @@ export const ApplyButton = () => {
             padding-right: 0.1em;
             transition: 0.5s all;
             cursor: pointer;
+            padding-left: 1.2em;
+            padding-right: 1.2em;
 
             &:hover {
               background-color: rgb(78, 89, 104);
@@ -125,7 +128,7 @@ export const ApplyButton = () => {
               color: white;
             `}
           >
-            팀에 합류하고 싶으신가요?
+            멋쟁이사자처럼 팀에 합류하고 싶으신가요?
           </span>
         </div>
       </Link>
@@ -150,7 +153,7 @@ export const Icon = ({ src, alt }: imgProps) => {
 
   setTimeout(() => {
     if (imageRef.current) {
-      imageRef.current.style.display = "block";
+      imageRef.current.style.visibility = "visible";
     }
   }, 1500);
 
@@ -164,7 +167,8 @@ export const Icon = ({ src, alt }: imgProps) => {
     <>
       <Image
         css={css`
-          display: none;
+          visibility: hidden;
+          display: block;
           position: absolute !important;
           animation: ${fadeIn} 0.5s ease-in-out;
           transition: 1s all;
@@ -234,8 +238,8 @@ export const BackGroundImg = ({ src }: imgProps) => {
         alt="백그라운드 이미지"
         css={css`
           position: absolute;
-          width: 100% !important;
-          height: 100% !important;
+          width: 100vw !important;
+          height: 100vh !important;
           animation: ${fadeIn} 0.7s ease-in-out;
           object-fit: cover;
         `}

diff --git a/src/components/opening/Opening.tsx b/src/components/opening/Opening.tsx
@@ -71,7 +71,6 @@ export default function Opening() {
             display: block;
           }
         `}
-        ref={scrollRef}
       >
         <Image
           src={lion}