feat: intro section 개선

depromeet · Nov 26, 2024 · 4fd38e6 · 4fd38e6
1 parent 7b1189a
commit 4fd38e6
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 27 deletions.
diff --git a/src/components/Intro/Intro.tsx b/src/components/Intro/Intro.tsx
@@ -1,5 +1,5 @@
 import Image from 'next/image';
-import { css } from '@emotion/react';
+import { css, keyframes } from '@emotion/react';
 
 import { colors } from '~/styles/colors';
 import { mediaQuery } from '~/styles/media';
@@ -30,28 +30,38 @@ export function Intro({ imageUrl, title, width, height, color }: IntroProps) {
 
     return current;
   };
+
   return (
-    <section css={containerCss({ color: getColor(color) })}>
+    <section css={[containerCss({ color: getColor(color) })]}>
       <div css={bgImageCss}>
-        <Image src={imageUrl} alt={title} width={width} height={height} priority />
+        <Image src={imageUrl} alt={title} width={width} height={height} priority css={fadeInCss} />
       </div>
     </section>
   );
 }
 
+const fadeInAnimation = keyframes`
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+`;
+
+const fadeInCss = css`
+  animation: ${fadeInAnimation} 500ms ease-in-out;
+  opacity: 1;
+`;
+
 const containerCss = ({ color }: { color: string }) => css`
-  padding-top: 60px;
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: ${color};
-
-  ${mediaQuery('mobile')} {
-    padding-top: 72px;
-  }
 `;
 
-const bgImageCss = () => css`
+const bgImageCss = css`
   top: 20px;
   width: 100%;
   overflow: hidden;

diff --git a/src/features/Common/sections/IntroSection.tsx b/src/features/Common/sections/IntroSection.tsx
@@ -1,5 +1,9 @@
+import { useEffect, useState } from 'react';
+import { css } from '@emotion/react';
+
 import { Intro } from '~/components/Intro';
 import { useCheckWindowSize } from '~/hooks/useCheckWindowSize';
+import { mediaQuery } from '~/styles/media';
 
 type ImageSize = {
   width: number;
@@ -20,25 +24,48 @@ export const IntroSection = ({
   mobileSize,
 }: IntroSectionProps) => {
   const { isTargetSize: isMobileSize } = useCheckWindowSize('mobile');
+  const [isClientReady, setIsClientReady] = useState<boolean>(false);
+
+  useEffect(() => {
+    setIsClientReady(true);
+  }, []);
+
   return (
-    <>
-      {isMobileSize ? (
-        <Intro
-          imageUrl={mobileImgUrl}
-          title="16기 정보 인트로"
-          width={mobileSize?.width ?? 720}
-          height={mobileSize?.height ?? 360}
-          color="black"
-        />
-      ) : (
-        <Intro
-          imageUrl={defaultImgUrl}
-          title="16기 정보 인트로"
-          width={pcSize?.width ?? 1920}
-          height={pcSize?.height ?? 300}
-          color="black"
-        />
+    <div css={containerCss}>
+      {isClientReady && (
+        <>
+          {isMobileSize ? (
+            <Intro
+              imageUrl={mobileImgUrl}
+              title="16기 정보 인트로"
+              width={mobileSize?.width ?? 720}
+              height={mobileSize?.height ?? 360}
+              color="black"
+            />
+          ) : (
+            <Intro
+              imageUrl={defaultImgUrl}
+              title="16기 정보 인트로"
+              width={pcSize?.width ?? 1920}
+              height={pcSize?.height ?? 300}
+              color="black"
+            />
+          )}
+        </>
       )}
-    </>
+    </div>
   );
 };
+
+const containerCss = css`
+  width: 100%;
+  min-height: 300px;
+  height: auto;
+  margin-top: 60px;
+
+  ${mediaQuery('mobile')} {
+    min-height: 0;
+    aspect-ratio: 2/1;
+    margin-top: 72px;
+  }
+`;