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 ( +
+ main +
+
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', }, ]);