From 1aa41a0eb22b2d186723ce7e14694bb35199b995 Mon Sep 17 00:00:00 2001 From: klmhyeonwooo Date: Fri, 21 Jul 2023 00:28:41 +0900 Subject: [PATCH] =?UTF-8?q?feat=20:=20v1.0.1=20=EB=B3=80=EA=B2=BD=20?= =?UTF-8?q?=EC=82=AC=ED=95=AD=20=EC=9E=91=EC=97=85=20(#36)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../branding/component/component.tsx | 14 ++-- src/components/common/component/component.tsx | 64 ++++++++++++++----- src/components/ending/Ending.tsx | 8 +-- src/components/ideal/component/component.tsx | 14 ++-- src/components/main/component/component.tsx | 18 ++++-- src/components/opening/Opening.tsx | 1 - src/components/skill/component/component.tsx | 42 ++++++++---- styles/globals.css | 1 + 8 files changed, 112 insertions(+), 50 deletions(-) diff --git a/src/components/branding/component/component.tsx b/src/components/branding/component/component.tsx index 4201580..1227c31 100644 --- 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(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 index 4f390a6..567263c 100644 --- a/src/components/common/component/component.tsx +++ b/src/components/common/component/component.tsx @@ -27,10 +27,12 @@ import { useRouter } from "next/router"; export const TitleOfBlue = forwardRef( ({ text, scrollState }: textProps, ref: any) => { const blueRef = useRef(null); + const [checked, setChecked] = useState(false); useEffect(() => { if (scrollState && blueRef.current) { - blueRef.current.style.display = "block"; + blueRef.current.style.visibility = "visible"; + setChecked(true); } }, [scrollState]); @@ -38,12 +40,15 @@ export const TitleOfBlue = forwardRef(
@@ -62,10 +67,12 @@ export const TitleOfBlack = forwardRef( const topText = text.split("\n")[0]; const bottomText = text.split("\n")[1]; const blackRef = useRef(null); + const [checked, setChecked] = useState(false); useEffect(() => { if (scrollState && blackRef.current) { - blackRef.current.style.display = "block"; + blackRef.current.style.visibility = "visible"; + setChecked(true); } }, [scrollState]); @@ -73,7 +80,8 @@ export const TitleOfBlack = forwardRef(
{ const descriptionRef = useRef(null); + const [checked, setChecked] = useState(false); useEffect(() => { if (scrollState && descriptionRef.current) { - descriptionRef.current.style.display = "block"; + descriptionRef.current.style.visibility = "visible"; + setChecked(true); } }, [scrollState]); @@ -119,13 +132,17 @@ export const Description = forwardRef(
@@ -155,10 +172,12 @@ export const ItemOfCategory = forwardRef( const topText = text.split("\n")[0]; const bottomText = text.split("\n")[1]; const categoryRef = useRef(null); + const [checked, setChecked] = useState(false); useEffect(() => { if (scrollState && categoryRef.current) { - categoryRef.current.style.display = "flex"; + categoryRef.current.style.visibility = "visible"; + setChecked(true); } }, [scrollState]); @@ -166,7 +185,8 @@ export const ItemOfCategory = forwardRef(
{ (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(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 ? ( { 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 index f37b346..225e051 100644 --- a/src/components/ideal/component/component.tsx +++ b/src/components/ideal/component/component.tsx @@ -8,15 +8,17 @@ 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(null); + const [checked, setChecked] = useState(false); useEffect(() => { if (scrollState && contentRef.current) { - contentRef.current.style.display = "grid"; + contentRef.current.style.visibility = "visible"; + setChecked(true); } }, [scrollState]); @@ -24,10 +26,14 @@ export const IdealArticle = forwardRef(
{ if (TitleRef.current) { TitleRef.current.style.display = "flex"; } - }, 2000); + }, 1000); return (
{
{ 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; `} > - 팀에 합류하고 싶으신가요? + 멋쟁이사자처럼 팀에 합류하고 싶으신가요?
@@ -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) => { <> { 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 index f3c4276..902f110 100644 --- a/src/components/opening/Opening.tsx +++ b/src/components/opening/Opening.tsx @@ -71,7 +71,6 @@ export default function Opening() { display: block; } `} - ref={scrollRef} > { const skillRef = useRef(null); + const [checked, setChecked] = useState(false); useEffect(() => { if (scrollState && skillRef.current) { - skillRef.current.style.display = "block"; + skillRef.current.style.visibility = "visible"; + setChecked(true); } }, [scrollState]); @@ -62,10 +64,14 @@ export const SkillSection = forwardRef( ref={skillRef} css={css` width: auto; - display: none; + display: block; + visibility: hidden; // padding: 10em; // box-sizing: border-box; - animation: ${TextfadeUp} 1.5s ease-in-out; + ${checked && + css` + animation: ${TextfadeUp} 1.5s ease-in-out; + `} `} > @@ -76,8 +82,12 @@ export const SkillSection = forwardRef(
{" "} @@ -89,8 +99,12 @@ export const SkillSection = forwardRef(
{" "} @@ -238,12 +252,12 @@ const FrontendSkill = () => { const BackendSkill = () => { const backendRef = useRef(null); - useEffect(() => { - if (backendRef.current) { - console.log("!!!!", backendRef); - console.log("??", backendRef.current?.offsetWidth); - } - }); + // useEffect(() => { + // if (backendRef.current) { + // console.log("!!!!", backendRef); + // console.log("??", backendRef.current?.offsetWidth); + // } + // }); return (