style: svg 코드 수정

sopt-makers · Nov 22, 2023 · 35d18de · 35d18de
1 parent 3a05876
commit 35d18de
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 8 deletions.
diff --git a/src/views/MainPage/components/IntroSection/IntroContent/index.tsx b/src/views/MainPage/components/IntroSection/IntroContent/index.tsx
@@ -41,12 +41,7 @@ export default function IntroContent({ content }: IntroContentProps) {
     <S.IntroWrapper>
       <S.Intro>
         {content.id !== INTRO_CONTENT_LENGTH && (
-          <S.AnimatedLine
-            viewBox="0 0 20 calc(100vh + 2px)"
-            initial="initial"
-            whileInView="visible"
-            viewport={{ amount: 0.2 }}
-          >
+          <S.AnimatedLine initial="initial" whileInView="visible" viewport={{ amount: 0.2 }}>
             <motion.line x1="10" y1="10" x2="10" y2="100%" stroke="#d7f5ff" variants={lineDraw} />
           </S.AnimatedLine>
         )}
@@ -69,7 +64,13 @@ export default function IntroContent({ content }: IntroContentProps) {
           >
             <S.ContentTitle>{content.title}</S.ContentTitle>
             <S.ContentDetail>{content.detail}</S.ContentDetail>
-            <S.ContentImage src={content.src} width={707} height={471} alt="SOPT 소개 이미지" />
+            <S.ContentImage
+              src={content.src}
+              width={707}
+              height={471}
+              loading="lazy"
+              alt="SOPT 소개 이미지"
+            />
           </S.Content>
         </motion.div>
       </S.Intro>

diff --git a/src/views/MainPage/components/IntroSection/IntroContent/style.ts b/src/views/MainPage/components/IntroSection/IntroContent/style.ts
@@ -27,7 +27,7 @@ export const AnimatedLine = styled(motion.svg)`
   z-index: -1;
 
   width: 20px;
-  height: calc(100vh + 2px);
+  height: 100vh;
   stroke-width: 4px;
   stroke-linecap: round;