From 67759755d3cc9d7ba14acab4a9f516685fdbd3bb Mon Sep 17 00:00:00 2001
From: nocheol <qkdl60@gmail.com>
Date: Sat, 16 Mar 2024 14:37:13 +0900
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20:=20#490=20-=20=EB=A9=94=EC=9D=B8?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EA=B5=AC=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/main/index.scss | 21 +++++++++++++++
 src/app/main/layout.tsx | 57 +++++++++++++++++++++++++++++++++++++++++
 2 files changed, 78 insertions(+)
 create mode 100644 src/app/main/index.scss
 create mode 100644 src/app/main/layout.tsx

diff --git a/src/app/main/index.scss b/src/app/main/index.scss
new file mode 100644
index 00000000..225b1e2a
--- /dev/null
+++ b/src/app/main/index.scss
@@ -0,0 +1,21 @@
+.outside-box {
+  border: 2px solid var(--origin-secondary);
+  box-shadow: var(--origin-shadow);
+  padding: 1rem 1.5rem;
+  border-radius: 2rem;
+}
+
+.main {
+  &__item {
+    &__header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+    &--link {
+      text-decoration: none;
+
+      color: var(--origin-text-300);
+    }
+  }
+}
diff --git a/src/app/main/layout.tsx b/src/app/main/layout.tsx
new file mode 100644
index 00000000..d6bac2df
--- /dev/null
+++ b/src/app/main/layout.tsx
@@ -0,0 +1,57 @@
+import Link from 'next/link';
+import { ReactElement } from 'react';
+import MainHeader from './_components/MainHeader/MainHeader';
+import './index.scss';
+
+interface LayoutProps {
+  createButtons: ReactElement;
+  feedback: ReactElement;
+  plan: ReactElement;
+  footprint: ReactElement;
+}
+
+export default function Layout({
+  createButtons,
+  feedback,
+  plan,
+  footprint,
+}: LayoutProps) {
+  return (
+    <div style={{ height: '100%', overflowY: 'scroll' }}>
+      <MainHeader />
+      <div
+        style={{
+          padding: '1.5rem 0',
+
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '1.5rem',
+        }}>
+        {createButtons}
+        <div className="outside-box">
+          <h1 className="font-size-lg ">피드백</h1>
+          {feedback}
+        </div>
+        <div className="outside-box">
+          <div className="main__item__header">
+            <h1 className="font-size-lg ">내 계획</h1>
+            <Link className="main__item--link font-size-xs" href={'/'}>
+              전체보기
+            </Link>
+          </div>
+          {plan}
+        </div>
+
+        <div className="outside-box">
+          <div className="main__item__header">
+            <h1 className="font-size-lg ">발자취</h1>
+            <Link className="main__item--link font-size-xs" href={'/'}>
+              전체보기
+            </Link>
+          </div>
+          {footprint}
+        </div>
+      </div>
+    </div>
+  );
+}