diff --git a/src/assets/images/home_addimoji_lg.png b/src/assets/images/home_addimoji_lg.png deleted file mode 100644 index 4a505de..0000000 Binary files a/src/assets/images/home_addimoji_lg.png and /dev/null differ diff --git a/src/assets/images/home_addimoji_lg.webp b/src/assets/images/home_addimoji_lg.webp new file mode 100644 index 0000000..e8b5529 Binary files /dev/null and b/src/assets/images/home_addimoji_lg.webp differ diff --git a/src/assets/images/home_addimoji_sm.png b/src/assets/images/home_addimoji_sm.png deleted file mode 100644 index ef19929..0000000 Binary files a/src/assets/images/home_addimoji_sm.png and /dev/null differ diff --git a/src/assets/images/home_addimoji_sm.webp b/src/assets/images/home_addimoji_sm.webp new file mode 100644 index 0000000..a1a25e1 Binary files /dev/null and b/src/assets/images/home_addimoji_sm.webp differ diff --git a/src/assets/images/home_makepaper_lg.webp b/src/assets/images/home_makepaper_lg.webp new file mode 100644 index 0000000..25852b6 Binary files /dev/null and b/src/assets/images/home_makepaper_lg.webp differ diff --git a/src/assets/images/home_makepaper_sm.svg b/src/assets/images/home_makepaper_sm.svg deleted file mode 100644 index 09b36ba..0000000 --- a/src/assets/images/home_makepaper_sm.svg +++ /dev/null @@ -1,89 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/assets/images/home_makepaper_sm.webp b/src/assets/images/home_makepaper_sm.webp new file mode 100644 index 0000000..76942b5 Binary files /dev/null and b/src/assets/images/home_makepaper_sm.webp differ diff --git a/src/pages/HomePage/HomePage.jsx b/src/pages/HomePage/HomePage.jsx index 4954896..582e097 100644 --- a/src/pages/HomePage/HomePage.jsx +++ b/src/pages/HomePage/HomePage.jsx @@ -1,46 +1,58 @@ +import React from 'react'; import styles from './HomePage.module.scss'; import { Link } from 'react-router-dom'; -import imgPaperLg from '../../assets/images/home_makepaper_lg.svg'; -import imgPaperSm from '../../assets/images/home_makepaper_sm.svg'; -import imgImojiLg from '../../assets/images/home_addimoji_lg.png'; -import imgImojiSm from '../../assets/images/home_addimoji_sm.png'; -import PointsContainer from './PointsContainer'; +import imgPaperLg from '@/assets/images/home_makepaper_lg.webp'; +import imgPaperSm from '@/assets/images/home_makepaper_sm.webp'; +import imgImojiLg from '@/assets/images/home_addimoji_lg.webp'; +import imgImojiSm from '@/assets/images/home_addimoji_sm.webp'; import Button from '../../components/Button/Button'; -const HomePage = () => { - return ( -
-
- {landingData.map((card, index) => ( - - ))} - - - -
-
- ); -}; +//import Button from '@/components/Button/Button'; -const landingData = [ - { - point: 'Point. 01', - title: '누구나 손쉽게, 온라인 롤링 페이퍼를 만들 수 있어요', - desc: '로그인 없이 자유롭게 만들어요.', - imgLg: imgPaperLg, - imgSm: imgPaperSm, - alt: '롤링페이퍼 이미지', - }, - { - point: 'Point. 02', - title: '서로에게 이모지로 감정을 표현해보세요', - desc: '롤링 페이퍼에 이모지를 추가할 수 있어요.', - imgLg: imgImojiLg, - imgSm: imgImojiSm, - alt: '이모지 이미지', - reverse: true, - }, -]; +const HomePage = () => ( +
+
+ {/* Point 01 */} +
+
+ Point. 01 +

누구나 손쉽게, 온라인 롤링 페이퍼를 만들 수 있어요

+

로그인 없이 자유롭게 만들어요.

+
+
+ 롤링페이퍼 이미지 +
+
+ + {/* Point 02 */} +
+
+ Point. 02 +

서로에게 이모지로 감정을 표현해보세요

+

롤링 페이퍼에 이모지를 추가할 수 있어요.

+
+
+ 이모지 이미지 +
+
+ + + +
+
+); export default HomePage; diff --git a/src/pages/HomePage/HomePage.module.scss b/src/pages/HomePage/HomePage.module.scss index ade1fed..99f966c 100644 --- a/src/pages/HomePage/HomePage.module.scss +++ b/src/pages/HomePage/HomePage.module.scss @@ -3,18 +3,111 @@ body { font-family: var(--font-family-base); } +/* 전체 페이지 포인트 섹션 레이아웃 */ .page-points { display: flex; flex-direction: column; align-items: center; gap: 30px; padding: 0 120px; + min-height: 100dvh; + @media screen and (max-width: 1199px) { + padding-bottom: 40px; + } +} + +/* 포인트 컨테이너 */ +.points-container { + display: flex; + align-items: center; + justify-content: space-evenly; + gap: 50px; + background-color: var(--color-surface); + border-radius: 16px; + width: 1200px; + padding: 90px; + overflow: hidden; + + &--reverse { + flex-direction: row-reverse; + } + + &__context { + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: center; + gap: 16px; + + span { + border-radius: 50px; + background-color: var(--color-purple-600); + font-size: var(--font-size-14); + font-weight: var(--font-weight-bold); + color: var(--color-white); + padding: 6px 12px; + } + + h1 { + font-size: var(--font-size-24); + font-weight: var(--font-weight-bold); + line-height: 36px; + letter-spacing: -0.24px; + color: var(--color-gray-900); + } + + p { + font-size: var(--font-size-18); + line-height: 28px; + letter-spacing: -0.18px; + color: var(--color-gray-500); + } + + &__view { + @media screen and (max-width: 1199px) { + width: 100%; + } + } + } + + &__img-wrapper { + width: 100%; + display: flex; + justify-content: center; + + img { + width: 100%; + max-width: 720px; + height: auto; + } + } + + /* 태블릿 화면 */ @media screen and (min-width: 768px) and (max-width: 1199px) { - padding: 0 60px; + flex-direction: column; + align-items: flex-start; + width: 100%; + gap: 36px; + padding: 40px; + + &--reverse { + flex-direction: column; + align-items: flex-start; + } } - @media screen and (max-width: 767px) { - padding: 0 24px; + /* 모바일 화면 */ + @media screen and (min-width: 355px) and (max-width: 767px) { + flex-direction: column; + align-items: flex-start; + width: 100%; + gap: 50px; + padding: 24px; + + &--reverse { + flex-direction: column; + align-items: flex-start; + } } } diff --git a/src/pages/HomePage/PointsContainer.jsx b/src/pages/HomePage/PointsContainer.jsx deleted file mode 100644 index 6be37ef..0000000 --- a/src/pages/HomePage/PointsContainer.jsx +++ /dev/null @@ -1,26 +0,0 @@ -import styles from './PointsContainer.module.scss'; - -const PointsContainer = ({ point, title, desc, imgLg, imgSm, alt, reverse }) => { - return ( -
-
- {point} -

{title}

-

{desc}

-
-
- {alt} -
-
- ); -}; - -export default PointsContainer; diff --git a/src/pages/HomePage/PointsContainer.module.scss b/src/pages/HomePage/PointsContainer.module.scss deleted file mode 100644 index 551b2b4..0000000 --- a/src/pages/HomePage/PointsContainer.module.scss +++ /dev/null @@ -1,84 +0,0 @@ -.points-container { - display: flex; - align-items: center; - justify-content: space-evenly; - gap: 50px; - background-color: var(--color-surface); - border-radius: 16px; - width: 1200px; - padding: 90px; - overflow: hidden; - - &--reverse { - flex-direction: row-reverse; - } - - &__context { - display: flex; - flex-direction: column; - align-items: flex-start; - justify-content: center; - gap: 16px; - - span { - border-radius: 50px; - background-color: var(--color-purple-600); - font-size: var(--font-size-14); - font-weight: var(--font-weight-bold); - color: var(--color-white); - padding: 6px 12px; - } - - h1 { - font-size: var(--font-size-24); - font-weight: var(--font-weight-bold); - line-height: 36px; - letter-spacing: -0.24px; - color: var(--color-gray-900); - } - - p { - font-size: var(--font-size-18); - line-height: 28px; - letter-spacing: -0.18px; - color: var(--color-gray-500); - } - } - - &__img-wrapper { - width: 100%; - display: flex; - justify-content: center; - } - - &__img { - width: 720px; - height: auto; - } - - @media screen and (min-width: 768px) and (max-width: 1199px) { - flex-direction: column; - align-items: flex-start; - width: 100%; - gap: 36px; - padding: 40px; - - &.reverse { - flex-direction: column; - align-items: flex-start; - } - } - - @media screen and (min-width: 375px) and (max-width: 767px) { - flex-direction: column; - align-items: flex-start; - width: 100%; - gap: 50px; - padding: 24px; - - &--reverse { - flex-direction: column; - align-items: flex-start; - } - } -}