feat: add basic main page layout

src/components/main/MainSection/MainSection.css.ts

@@ -0,0 +1,45 @@
+import { style, styleVariants } from '@vanilla-extract/css';
+import { MEDIA_QUERY } from '@/constants/styles';
+
+const wrapperBase = style({
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: '100%',
+  maxWidth: '1280px',
+  height: '100vh',
+  padding: '0 51px',
+  gap: '128px',
+
+  [`@media ${MEDIA_QUERY.tabletLg}`]: {
+    padding: '0 24px',
+    gap: '53px',
+  },
+  [`@media ${MEDIA_QUERY.tabletSm}`]: {
+    flexDirection: 'column',
+    padding: '0',
+    gap: '150px',
+  },
+  [`@media ${MEDIA_QUERY.mobile}`]: {
+    flexDirection: 'column',
+    padding: '0',
+    gap: '88px',
+  },
+});
+
+const wrapperReverse = style({
+  flexDirection: 'row-reverse',
+
+  [`@media ${MEDIA_QUERY.tabletSm}`]: {
+    flexDirection: 'column',
+  },
+  [`@media ${MEDIA_QUERY.mobile}`]: {
+    flexDirection: 'column',
+  },
+});
+
+export const wrapper = styleVariants({
+  default: [wrapperBase],
+  reverse: [wrapperBase, wrapperReverse],
+});

src/components/main/MainSection/MainSection.tsx

@@ -0,0 +1,13 @@
+import * as styles from './MainSection.css';
+
+interface MainSectionProps {
+  children: React.ReactNode;
+  reverse?: boolean;
+}
+
+const MainSection = ({ children, reverse }: MainSectionProps) => {
+  const direction = reverse ? 'reverse' : 'default';
+  return <div className={styles.wrapper[direction]}>{children}</div>;
+};
+
+export default MainSection;

src/components/main/MainSection/index.ts

@@ -0,0 +1,3 @@
+import MainSection from './MainSection';
+
+export default MainSection;