diff --git a/app/frontend/src/App.tsx b/app/frontend/src/App.tsx
index d02f829c..f92beaea 100644
--- a/app/frontend/src/App.tsx
+++ b/app/frontend/src/App.tsx
@@ -1,13 +1,19 @@
-import { RouterProvider, createBrowserRouter } from 'react-router-dom';
+import { RouterProvider, createBrowserRouter, Outlet } from 'react-router-dom';
import { Header } from '@/components';
-import '@/styles/reset.css';
+import { Main } from '@/pages';
const router = createBrowserRouter([
{
path: '/',
- element: ,
+ element: (
+ <>
+
+
+ >
+ ),
children: [
+ { path: '/', element: },
{
path: 'mogaco',
element: <>모각코>,
diff --git a/app/frontend/src/assets/icons/google.svg b/app/frontend/src/assets/icons/google.svg
new file mode 100644
index 00000000..55a88c41
--- /dev/null
+++ b/app/frontend/src/assets/icons/google.svg
@@ -0,0 +1,11 @@
+
\ No newline at end of file
diff --git a/app/frontend/src/assets/images/main.png b/app/frontend/src/assets/images/main.png
new file mode 100644
index 00000000..bf5fc392
Binary files /dev/null and b/app/frontend/src/assets/images/main.png differ
diff --git a/app/frontend/src/components/commons/Button/index.css.ts b/app/frontend/src/components/commons/Button/index.css.ts
index d421e809..8bdf7719 100644
--- a/app/frontend/src/components/commons/Button/index.css.ts
+++ b/app/frontend/src/components/commons/Button/index.css.ts
@@ -7,6 +7,7 @@ export const button = recipe({
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
+ gap: '1rem',
fontFamily: vars.font.family.pretendard,
fontWeight: vars.font.weight.semibold,
border: '1px solid transparent',
diff --git a/app/frontend/src/components/index.ts b/app/frontend/src/components/index.ts
index 02c67f5f..d17d65dd 100644
--- a/app/frontend/src/components/index.ts
+++ b/app/frontend/src/components/index.ts
@@ -1,3 +1,4 @@
+export * from './commons/Button';
export * from './commons/Header';
export * from './commons/Input';
export * from './commons/Popover';
diff --git a/app/frontend/src/constants/Main.ts b/app/frontend/src/constants/Main.ts
new file mode 100644
index 00000000..8ffc9fcf
--- /dev/null
+++ b/app/frontend/src/constants/Main.ts
@@ -0,0 +1 @@
+export const MAIN_IMAGE = '/src/assets/images/main.png';
diff --git a/app/frontend/src/constants/index.ts b/app/frontend/src/constants/index.ts
index 266dec8a..4991ca7b 100644
--- a/app/frontend/src/constants/index.ts
+++ b/app/frontend/src/constants/index.ts
@@ -1 +1,2 @@
export * from './Header';
+export * from './Main';
diff --git a/app/frontend/src/pages/Main/index.css.ts b/app/frontend/src/pages/Main/index.css.ts
new file mode 100644
index 00000000..a3b031c3
--- /dev/null
+++ b/app/frontend/src/pages/Main/index.css.ts
@@ -0,0 +1,54 @@
+import { style } from '@vanilla-extract/css';
+
+import { vars, fontStyle } from '@/styles';
+
+export const container = style({
+ position: 'relative',
+ display: 'flex',
+ margin: '8.5rem auto',
+ width: '104rem',
+ height: '81.7rem',
+ color: vars.color.grayscale400,
+ background: vars.color.grayscaleWhite,
+});
+
+export const login = style({
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+});
+
+export const mainImage = style({
+ width: '69.7rem',
+ height: '69.7rem',
+ alignSelf: 'flex-end',
+ objectFit: 'contain',
+});
+
+export const text = style([
+ fontStyle.sansRegular24,
+ {
+ color: vars.color.grayscale400,
+ textAlign: 'right',
+ lineHeight: '3.5rem',
+ },
+]);
+
+export const textArea = style({
+ position: 'absolute',
+ right: '0',
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'flex-end',
+ gap: '1.2rem',
+});
+
+export const title = style([
+ fontStyle.poppinsBold96,
+ {
+ display: 'flex',
+ justifyContent: 'center',
+ textAlign: 'center',
+ color: vars.color.morakGreen,
+ },
+]);
diff --git a/app/frontend/src/pages/Main/index.tsx b/app/frontend/src/pages/Main/index.tsx
new file mode 100644
index 00000000..700f28f6
--- /dev/null
+++ b/app/frontend/src/pages/Main/index.tsx
@@ -0,0 +1,27 @@
+import { ReactComponent as GoogleIcon } from '@/assets/icons/google.svg';
+import { Button } from '@/components';
+import { MAIN_IMAGE } from '@/constants';
+
+import * as styles from './index.css';
+
+export function Main() {
+ return (
+
+
+
+
morak
+
+ 함께라서 더 빛나는 코드의 세계
+
+ 모락과 함께하세요
+
+
+
+
+
+
+ );
+}
diff --git a/app/frontend/src/pages/index.ts b/app/frontend/src/pages/index.ts
index 04e1261e..a1a31000 100644
--- a/app/frontend/src/pages/index.ts
+++ b/app/frontend/src/pages/index.ts
@@ -1 +1 @@
-// export * from "";
+export { Main } from './Main';
diff --git a/app/frontend/src/styles/font.css.ts b/app/frontend/src/styles/font.css.ts
index 7b933e56..75cd5810 100644
--- a/app/frontend/src/styles/font.css.ts
+++ b/app/frontend/src/styles/font.css.ts
@@ -17,17 +17,24 @@ const poppinsBold = style({
fontWeight: vars.font.weight.bold,
});
-export const sansBold12 = style([
- sansBold,
+export const poppinsBold30 = style([
+ poppinsBold,
{
- fontSize: '1.2rem',
+ fontSize: '3rem',
},
]);
-export const poppinsBold30 = style([
+export const poppinsBold96 = style([
poppinsBold,
{
- fontSize: '3rem',
+ fontSize: '9.6rem',
+ },
+]);
+
+export const sansBold12 = style([
+ sansBold,
+ {
+ fontSize: '1.2rem',
},
]);