feat: board 페이지 구현 (#23) (#24)

src/app/board/_components/board.css.ts

@@ -0,0 +1,40 @@
+import { style } from '@vanilla-extract/css';
+import { globalTheme } from '@/shared/styles/globalTheme.css';
+
+export const boardContainerStyle = style({
+  display: 'flex',
+  flexDirection: 'column',
+  border: `0.1rem solid ${globalTheme.colors.gray_stroke_E2}`,
+  borderRadius: 8,
+  width: '57.6rem',
+  height: '81.6rem',
+  backgroundColor: globalTheme.colors.white,
+  boxShadow: '0px 0px 4px 0px rgba(0, 0, 0, 0.25)',
+});
+
+export const boardHeaderStyle = style({
+  ...globalTheme.fonts.bodyReg16,
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  padding: '1.4rem 0',
+  borderBottom: `0.1rem solid ${globalTheme.colors.blue_main}`,
+  height: '4.8rem',
+  color: globalTheme.colors.gray_71,
+});
+
+export const boardListStyle = style({
+  display: 'flex',
+  flexDirection: 'column',
+  overflow: 'auto',
+});
+
+export const boardRowStyle = style({
+  ...globalTheme.fonts.bodyReg16,
+  display: 'flex',
+  alignItems: 'center',
+  gap: '1.6rem',
+  padding: '2.4rem 5rem',
+  borderBottom: `0.1rem solid ${globalTheme.colors.gray_stroke_E2}`,
+  color: globalTheme.colors.gray_19,
+});

src/app/board/_components/board.tsx

@@ -0,0 +1,91 @@
+import CircleImage from '@/shared/components/circleImage/circleImage';
+import {
+  boardContainerStyle,
+  boardHeaderStyle,
+  boardRowStyle,
+  boardListStyle,
+} from './board.css';
+
+const USER_RANK = [
+  {
+    id: 1,
+    contents:
+      ' 모바일 기준 최대 2줄 글자수 확인 필요 필요 필요 필요 필요 필요 필요',
+    src: 'https://avatars.githubusercontent.com/u/127329855?v=4',
+  },
+  {
+    id: 2,
+    contents:
+      ' 모바일 기준 최대 2줄 글자수 확인 필요 필요 필요 필요 필요 필요 필요',
+    src: 'https://avatars.githubusercontent.com/u/127329855?v=4',
+  },
+  {
+    id: 3,
+    contents:
+      ' 모바일 기준 최대 2줄 글자수 확인 필요 필요 필요 필요 필요 필요 필요',
+    src: 'https://avatars.githubusercontent.com/u/127329855?v=4',
+  },
+  {
+    id: 4,
+    contents:
+      ' 모바일 기준 최대 2줄 글자수 확인 필요 필요 필요 필요 필요 필요 필요',
+    src: 'https://avatars.githubusercontent.com/u/127329855?v=4',
+  },
+  {
+    id: 5,
+    contents:
+      ' 모바일 기준 최대 2줄 글자수 확인 필요 필요 필요 필요 필요 필요 필요',
+    src: 'https://avatars.githubusercontent.com/u/127329855?v=4',
+  },
+  {
+    id: 6,
+    contents:
+      ' 모바일 기준 최대 2줄 글자수 확인 필요 필요 필요 필요 필요 필요 필요',
+    src: 'https://avatars.githubusercontent.com/u/127329855?v=4',
+  },
+  {
+    id: 7,
+    contents:
+      ' 모바일 기준 최대 2줄 글자수 확인 필요 필요 필요 필요 필요 필요 필요',
+    src: 'https://avatars.githubusercontent.com/u/127329855?v=4',
+  },
+  {
+    id: 8,
+    contents:
+      ' 모바일 기준 최대 2줄 글자수 확인 필요 필요 필요 필요 필요 필요 필요',
+    src: 'https://avatars.githubusercontent.com/u/127329855?v=4',
+  },
+  {
+    id: 9,
+    contents:
+      ' 모바일 기준 최대 2줄 글자수 확인 필요 필요 필요 필요 필요 필요 필요',
+    src: 'https://avatars.githubusercontent.com/u/127329855?v=4',
+  },
+  {
+    id: 10,
+    contents:
+      ' 모바일 기준 최대 2줄 글자수 확인 필요 필요 필요 필요 필요 필요 필요',
+    src: 'https://avatars.githubusercontent.com/u/127329855?v=4',
+  },
+];
+
+const Board = () => {
+  return (
+    <div className={boardContainerStyle}>
+      <div className={boardHeaderStyle}>
+        <h3>최근 30개의 멘트만 표시됩니다.</h3>
+      </div>
+
+      <ul className={boardListStyle}>
+        {USER_RANK.map((item) => (
+          <li key={item.id} className={boardRowStyle}>
+            <CircleImage src={item.src} />
+            <p>{item.contents}</p>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default Board;

src/app/board/boardPage.css.ts

@@ -0,0 +1,53 @@
+import { style } from '@vanilla-extract/css';
+import { globalTheme } from '@/shared/styles/globalTheme.css';
+
+export const containerStyle = style({
+  display: 'flex',
+  justifyContent: 'space-between',
+  flexWrap: 'wrap',
+
+  margin: '12rem auto',
+  padding: '0 3.8rem',
+  width: '1180px',
+
+  '@media': {
+    '(max-width: 1180px)': {
+      justifyContent: 'center',
+      gap: '3rem',
+
+      width: '100%',
+    },
+  },
+});
+
+export const leftDivStyle = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '2.8rem',
+
+  '@media': {
+    '(max-width: 1180px)': {
+      width: '57.6rem',
+    },
+  },
+});
+
+export const headingStyle = style({
+  ...globalTheme.fonts.titleSemiBold56,
+  color: globalTheme.colors.gray_19,
+});
+
+export const spanStyle = style({
+  color: globalTheme.colors.blue_main,
+});
+
+export const paragraphStyle = style({
+  ...globalTheme.fonts.bodySemiBold26,
+  color: globalTheme.colors.gray_19,
+});
+
+export const rightDivStyle = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '2.4rem',
+});

src/app/board/page.tsx

@@ -1,5 +1,42 @@
+import React from 'react';
+import Input from '@/shared/components/input/input';
+import RankBoard from '@/shared/components/rankBoard/rankBoard';
+import Board from './_components/board';
+import {
+  containerStyle,
+  headingStyle,
+  leftDivStyle,
+  paragraphStyle,
+  rightDivStyle,
+  spanStyle,
+} from './boardPage.css';
+
 const BoardPage = () => {
-  return <div>BoardPage</div>;
+  return (
+    <div className={containerStyle}>
+      <div className={leftDivStyle}>
+        <h1 className={headingStyle}>
+          고지를
+          <br />
+          선점하기 위해
+          <br />
+          싸워라.
+        </h1>
+        <p className={paragraphStyle}>
+          rankit에서
+          <br />
+          분석한 깃허브 점수를
+          <br />
+          보여드려요(가제)
+        </p>
+      </div>
+
+      <div className={rightDivStyle}>
+        <Input placeholder="enter을 입력해서 등록합니다. (최대  60byte)" />
+        <Board />
+      </div>
+    </div>
+  );
 };
 
 export default BoardPage;