Merge pull request #29 from codeit-maso/feature/seoung

홈 화면 레이아웃 구성(단 공통컴포넌트인 버튼이랑 헤더는 빼고 한 상태)

Author: minimo-9

src/App.jsx

@@ -2,12 +2,14 @@ import './assets/styles/base.scss';
 import { Route, Routes } from 'react-router-dom';
 import Header from './components/layout/Header/Header';
 import Test from './pages/List-page/Test';
+import Home from './pages/Home/home';
 
 export default function App() {
   return (
     <>
       <Header />
       <Routes>
+        <Route path="/" element={<Home />} />
         <Route path="/" element={<Test />} />
       </Routes>
     </>

src/assets/images/img_01.png

@@ -0,0 +1,95 @@
+body {
+  margin: 0;
+  padding: 0;
+}
+
+.header-box {
+  width: 100%;
+  max-width: 1920px;
+  height: 64px;
+  background-color: #f5f5f5;
+  margin: 0 auto;
+}
+
+.intro-box {
+  display: flex;
+  align-items: center;
+  width: 1200px;
+  height: 324px;
+  background-color: #f6f8ff;
+  border-radius: 16px;
+  margin: 0 auto 30px;
+  padding: 40px;
+  box-sizing: border-box;
+  justify-content: space-between;
+  padding: 0;
+}
+
+.first-section {
+  margin-top: 60px;
+  padding-left: 60px;
+}
+
+.first-section .intro-left {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-right: 152px;
+  width: 268px;
+}
+
+.second-section {
+  flex-direction: row-reverse;
+  padding-right: 192px;
+  justify-content: flex-end;
+}
+
+.second-section .intro-right {
+  gap: 10px;
+}
+
+.intro-image {
+  width: 720px;
+  height: 204px;
+  object-fit: contain;
+  margin-right: 0;
+}
+
+.right-image {
+  margin-right: 0;
+}
+
+.intro-right {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.point-badge {
+  background-color: #9935ff;
+  color: #ffffff;
+  font-size: 14px;
+  font-weight: 600;
+  padding: 7px 12px;
+  border-radius: 50px;
+  width: fit-content;
+  margin-bottom: 10px;
+}
+
+.intro-title {
+  font-family: 'Pretendard', sans-serif;
+  font-size: 23px;
+  font-weight: 700;
+  line-height: 36px;
+  color: #181818;
+  margin: 0;
+}
+
+.intro-subtext {
+  font-family: 'Pretendard', sans-serif;
+  font-size: 17px;
+  font-weight: 400;
+  line-height: 28px;
+  color: #555555;
+  margin: 0;
+}

src/assets/images/img_02.png

@@ -0,0 +1,53 @@
+import './Home.css';
+import '../../assets/images/img_01.png';
+import '../../assets/images/img_02.png';
+
+export default function Home() {
+  return (
+    <>
+      <div className="header-box"></div>
+      <section>
+        <div className="intro-box first-section">
+          <div className="intro-left">
+            <div className="point-badge">Point.01</div>
+            <h2 className="intro-title">
+              누구나 손쉽게, 온라인
+              <br />
+              롤링 페이퍼를 만들 수 있어요
+            </h2>
+            <p className="intro-subtext">로그인 없이 자유롭게 만들어요.</p>
+          </div>
+          <div>
+            <img
+              src="/src/assets/images/img_01.png"
+              className="intro-image"
+              alt="롤링 이미지"
+            />
+          </div>
+        </div>
+      </section>
+      <section>
+        <div className="intro-box second-section">
+          <div>
+            <div className="point-badge">Point.02</div>
+            <h2 className="intro-title">
+              서로에게 이모지로 감정을
+              <br />
+              표현해주세요
+            </h2>
+            <p className="intro-subtext">
+              롤링 페이퍼에 이모지를 추가할 수 있어요.
+            </p>
+          </div>
+          <div>
+            <img
+              src="/src/assets/images/img_02.png"
+              className="intro-image"
+              alt="이모지 이미지"
+            />
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}