refactor: Update imports and remove unused image files in main section 3

Team-Crops · Jul 3, 2024 · 9d4919c · 9d4919c
1 parent 4a791ed
commit 9d4919c
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 589 deletions.
diff --git a/public/images/main_section3_arrow.svg b/public/images/main_section3_arrow.svg
diff --git a/public/images/main_section3_background.svg b/public/images/main_section3_background.svg
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,12 +1,13 @@
 import { MainSection1 } from '#/components/templates/MainSection1';
 import { MainSection2 } from '#/components/templates/MainSection2';
+import { MainSection3 } from '#/components/templates/MainSection3';
 
 export default function Home() {
   return (
     <>
       <MainSection1 />
       <MainSection2 />
-      {/* <ThirdSection /> */}
+      <MainSection3 />
       {/* <FourthSection /> */}
     </>
   );

diff --git a/src/assets/images/index.ts b/src/assets/images/index.ts
@@ -15,8 +15,8 @@ export { default as mainSection1Fragment2 } from './main-section-1-fragment-2.pn
 export { default as mainSection1Fragment3 } from './main-section-1-fragment-3.png';
 export { default as mainSection1Logo } from './main-section-1-logo.png';
 export { default as mainSection2 } from './main-section-2.png';
-export { default as mainSection3Arrow } from './main-section-3-arrow.svg';
-export { default as mainSection3Background } from './main-section-3-background.svg';
+export { default as MainSection3Arrow } from './main-section-3-arrow.svg';
+export { default as mainSection3Background } from './main-section-3-background.svg?url';
 
 export { default as matchingPageBackground1 } from './matching-page-background-1.png';
 export { default as matchingPageDoughnut } from './matching-page-doughnut.png';

diff --git a/...omponents/templates/main/ThirdSection.tsx → src/components/templates/MainSection3.tsx b/...omponents/templates/main/ThirdSection.tsx → src/components/templates/MainSection3.tsx
@@ -4,7 +4,8 @@ import Image from 'next/image';
 
 import styled from '@emotion/styled';
 
-import { Txt } from '#atoms/Text';
+import { MainSection3Arrow, mainSection3Background } from '#/assets/images';
+import { Txt } from '#/components/atoms';
 
 const StyledSection = styled.section`
   position: relative;
@@ -17,7 +18,7 @@ const StyledSection = styled.section`
   width: 100%;
   max-width: 1920px;
   margin: 0 auto;
-  padding: 552px 0 100px;
+  padding: 550px 0 300px;
 
   text-align: center;
   white-space: pre-wrap;
@@ -41,29 +42,31 @@ const Block = styled.div`
   align-items: center;
   justify-content: center;
 
-  width: 373px;
-  height: 136px;
-  margin-bottom: 46px;
+  width: 100%;
+  max-width: 400px;
+  height: 140px;
+  margin-bottom: 40px;
 
   border: 1px solid #bdbdbd;
-  border-radius: 23px;
+  border-radius: 24px;
 `;
 const FilledBlock = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
 
-  width: 471px;
-  height: 216px;
-  margin: 39px 0 325px;
+  width: 100%;
+  max-width: 500px;
+  height: 220px;
+  margin: 40px 0;
 
   background: #ff706c;
   border: 1px solid #bdbdbd;
-  border-radius: 23px;
+  border-radius: 24px;
 `;
 
-export const ThirdSection = () => {
+export const MainSection3 = () => {
   return (
     <StyledSection>
       <Title size={'main1'} weight={'bold'} color="#000">
@@ -84,7 +87,7 @@ export const ThirdSection = () => {
           여러 구인 사이트에서{`\n`} 일일히 조건과 정보를 파악
         </Txt>
       </Block>
-      <Image src={'/images/main_section3_arrow.svg'} alt={'arrow'} width={118} height={60} />
+      <MainSection3Arrow />
       <FilledBlock>
         <Txt size={'typo3'} weight={'medium'} color="#ffffffc4" marginBottom={12}>
           Sol
@@ -94,11 +97,10 @@ export const ThirdSection = () => {
         </Txt>
       </FilledBlock>
       <BackgroundImage
-        src={'/images/main_section3_background.svg'}
-        alt={'image'}
-        width={0}
-        height={0}
-        sizes="100vw"
+        src={mainSection3Background}
+        alt={'background image'}
+        style={{ objectFit: 'cover' }}
+        fill
       />
     </StyledSection>
   );

diff --git a/svgr.d.ts b/svgr.d.ts
@@ -1,10 +1,11 @@
 declare module '*.svg' {
-  import { FC, SVGProps } from 'react';
+  import type { FC, SVGProps } from 'react';
   const content: FC<SVGProps<SVGElement>>;
   export default content;
 }
 
 declare module '*.svg?url' {
-  const content: unknown;
+  import type { StaticImageData } from 'next/image';
+  const content: StaticImageData;
   export default content;
 }