From 9d4919c64ed059082bf9a327432f9bc004217155 Mon Sep 17 00:00:00 2001 From: Seheon Yu Date: Thu, 4 Jul 2024 00:23:46 +0900 Subject: [PATCH] refactor: Update imports and remove unused image files in main section 3 --- public/images/main_section3_arrow.svg | 4 - public/images/main_section3_background.svg | 563 ------------------ src/app/page.tsx | 3 +- src/assets/images/index.ts | 4 +- .../ThirdSection.tsx => MainSection3.tsx} | 36 +- svgr.d.ts | 5 +- 6 files changed, 26 insertions(+), 589 deletions(-) delete mode 100644 public/images/main_section3_arrow.svg delete mode 100644 public/images/main_section3_background.svg rename src/components/templates/{main/ThirdSection.tsx => MainSection3.tsx} (80%) diff --git a/public/images/main_section3_arrow.svg b/public/images/main_section3_arrow.svg deleted file mode 100644 index 924bbc20..00000000 --- a/public/images/main_section3_arrow.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/public/images/main_section3_background.svg b/public/images/main_section3_background.svg deleted file mode 100644 index f28f48d9..00000000 --- a/public/images/main_section3_background.svg +++ /dev/null @@ -1,563 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/app/page.tsx b/src/app/page.tsx index 6a40fc88..53dad546 100644 --- 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 ( <> - {/* */} + {/* */} ); diff --git a/src/assets/images/index.ts b/src/assets/images/index.ts index edbd2b79..3cbb1618 100644 --- 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/src/components/templates/main/ThirdSection.tsx b/src/components/templates/MainSection3.tsx similarity index 80% rename from src/components/templates/main/ThirdSection.tsx rename to src/components/templates/MainSection3.tsx index 9ad183e0..a1f81157 100644 --- a/src/components/templates/main/ThirdSection.tsx +++ b/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,12 +42,13 @@ 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; @@ -54,16 +56,17 @@ const FilledBlock = styled.div` 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 ( @@ -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 index f54954ce..5985398a 100644 --- 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; }