codeit-FE-18-part2 · cskime · Aug 25, 2025 · Aug 23, 2025 · Aug 25, 2025
diff --git a/env.development b/env.development
@@ -0,0 +1,3 @@
+VITE_API_BASE_URL=https://rolling-api.vercel.app
+VITE_KAKAO_JAVASCRIPT_KEY=96d45a096ca60ab6ab02381934d8931d
+VITE_KAKAO_MESSAGE_TEMPLATE_ID=123537 
diff --git a/env.production b/env.production
@@ -0,0 +1,3 @@
+VITE_API_BASE_URL=https://rolling-api.vercel.app
+VITE_KAKAO_JAVASCRIPT_KEY=17836dd1144957610d3ad75f6c352274
+VITE_KAKAO_MESSAGE_TEMPLATE_ID=123533
diff --git a/index.html b/index.html
@@ -1,10 +1,11 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="ko">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" href="/src/styles/global.css" />
     <link rel="stylesheet" href="/src/styles/colors.css" />
+    <link rel="stylesheet" href="/src/styles/style.css" />
     <link
       rel="stylesheet"
       as="style"

diff --git a/package.json b/package.json
@@ -19,7 +19,7 @@
     "react-router-dom": "^7.8.0",
     "styled-components": "^6.1.19"
   },
-  "devDependencies": {
+  "devDepenpmndencies": {
     "@eslint/js": "^9.32.0",
     "@types/react": "^19.1.9",
     "@types/react-dom": "^19.1.7",

diff --git a/src/assets/ld-emoji.png b/src/assets/ld-emoji.png
diff --git a/src/assets/ld-emoji2.png b/src/assets/ld-emoji2.png
diff --git a/src/assets/ld-emoji23.png b/src/assets/ld-emoji23.png
diff --git a/src/assets/ld-emoji3.png b/src/assets/ld-emoji3.png
diff --git a/src/assets/ld-emoji4.png b/src/assets/ld-emoji4.png
diff --git a/src/assets/ld-ic-man.png b/src/assets/ld-ic-man.png
diff --git a/src/assets/ld-img01.png b/src/assets/ld-img01.png
diff --git a/src/assets/ld-img02.png b/src/assets/ld-img02.png
diff --git a/src/assets/ld-img03.png b/src/assets/ld-img03.png
diff --git a/src/assets/ld-point01.png b/src/assets/ld-point01.png
diff --git a/src/assets/ld-point02.png b/src/assets/ld-point02.png
diff --git a/src/pages/main-page.jsx b/src/pages/main-page.jsx
@@ -1,5 +1,170 @@
+import React from 'react';
+import Header from '../components/header/header';
+import emojiImg from '../assets/ld-emoji.png';
+import cardImg1 from '../assets/ld-img01.png';
+import cardImg2 from '../assets/ld-img02.png';
+import cardImg3 from '../assets/ld-img03.png';
+import styled from 'styled-components';
+import { Link } from 'react-router-dom';
+
+const Content = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  padding: 40px 20px;
+  max-width: 1200px;
+  margin: 0 auto;
+  border-radius: 10px;
+`;
+
+const ContentDetail = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 20px;
+  gap: 30px;
+
+  /* Mobile */
+  @media (max-width: 767px) {
+    gap: 16px;
+  }
+`;
+
+const CardContainer = styled.div`
+  display: flex;
+  align-items: left;
+  justify-content: space-between;
+  background-color: #f6f8ff;
+  padding: 30px;
+  gap: 40px;
+
+  /* Mobile */
+  @media (max-width: 767px) {
+    flex-direction: column;
+    padding: 30px 20px;
+    text-align: center;
+    gap: 16px;
+  }
+`;
+
+const CardContainerImage = styled.div`
+  display: flex;
+  position: relative;
+  width: 100%;
+  max-width: 720px;
+  gap: 0px;
+  background-color: #f6f8ff;
+
+  /* Mobile */
+  @media (max-width: 768px) {
+    max-width: 100%;
+    height: 250px;
+    margin-top: 20px;
+  }
+`;
+
+const EmojiContainerImage = styled.div`
+  display: flex;
+  gap: 10px;
+  border-radius: 6px;
+  background-color: #f6f8ff;
+  padding: 20px;
+  align-items: center;
+`;
+
+const CardImage = styled.img`
+  width: 205px;
+  height: 162px;
+  border-radius: 12px;
+  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.1);
+  object-fit: cover;
+  margin: 0px auto;
+
+  /* Mobile */
+  @media (max-width: 767px) {
+    &:nth-child(1) {
+      width: 65%;
+      top: 0;
+      left: 50%;
+    }
+    &:nth-child(2) {
+      width: 70%;
+      bottom: 0;
+      right: unset;
+      left: 50%;
+    }
+    &:nth-child(3) {
+      width: 70%;
+      bottom: 0;
+      right: unset;
+      left: 50%;
+    }
+  }
+`;
+
+const EmojiContainer = styled.div`
+  display: flex;
+  background-color: #f6f8ff;
+`;
+
+const PointBadge = styled.div`
+  background-color: #7f00ff;
+  padding: 6px 10px;
+  border-radius: 50px;
+  color: white;
+  font-size: 14px;
+  text-align: center;
+  width: fit-content;
+`;
+
 function MainPage() {
-  return <h1>Main Page</h1>;
+  return (
+    <Content>
+      <ContentDetail>
+        <CardContainer>
+          <div className="CardContainerText">
+            <div style={{ margin: '0px', display: 'flex', gap: '0px' }}>
+              <PointBadge>Point. 01</PointBadge>
+            </div>
+            <h2>누구나 손쉽게, 온라인 롤링페이퍼를 만들 수 있어요</h2>
+            <p>로그인 없이 자유롭게 만들어요.</p>
+          </div>
+          <CardContainerImage>
+            <CardImage src={cardImg1} alt="ld-img01.png" />
+            <CardImage src={cardImg2} alt="ld-img02.png" />
+            <CardImage src={cardImg3} alt="ld-img03.png" />
+          </CardContainerImage>
+        </CardContainer>
+        <EmojiContainer>
+          <EmojiContainerImage>
+            <div className="EmojiContainerImage">
+              <img src={emojiImg} alt="올이모지" />
+            </div>
+            <div className="EmojiContainerText">
+              <div style={{ margin: '0px', display: 'flex', gap: '0px' }}>
+                <PointBadge>Point. 02</PointBadge>
+              </div>
+              <h2>서로에게 이모지로 감정을 표현해보세요</h2>
+              <p>롤링 페이지에 이모지를 추가할 수 있어요.</p>
+            </div>
+          </EmojiContainerImage>
+        </EmojiContainer>
+      </ContentDetail>
+      <div
+        className="Footer"
+        style={{
+          textAlign: 'center',
+          marginTop: '20px',
+          padding: '20px',
+          backgroundColor: '#ffffff',
+        }}
+      >
+        <Link to="/list">
+          <button className="cta-button">구경해 보기</button>
+        </Link>
+      </div>
+    </Content>
+  );
 }
 
 export default MainPage;