feat: setup mainpage

packages/web/package.json

@@ -20,6 +20,7 @@
     "@mui/material": "5.15.12",
     "@mui/material-nextjs": "5.15.11",
     "@tanstack/react-query": "^5.28.4",
+    "@tanstack/react-table": "^8.20.5",
     "axios": "^1.6.7",
     "axios-mock-adapter": "^1.22.0",
     "classnames": "^2.3.2",

packages/web/src/app/page.tsx

@@ -1,4 +1,6 @@
 "use client";
 
-const Home = () => <div>Welcome to SPARCS Students!</div>;
+import MainPageMainFrame from "../features/landing/frames/MainFrame";
+
+const Home = () => <MainPageMainFrame />;
 export default Home;

packages/web/src/common/components/Buttons/TextButton.tsx

@@ -9,13 +9,14 @@ const StyledTextButton = styled.button<ButtonProps>`
   background: none;
   border: none;
   color: ${({ theme, disabled }) =>
-    disabled ? theme.colors.GRAY[100] : theme.colors.PRIMARY};
+    disabled ? theme.colors.GRAY[100] : theme.colors.WHITE};
   cursor: ${({ disabled }) => (disabled ? "not-allowed" : "pointer")};
   font-size: 16px;
   line-height: 20px;
-  font-weight: ${({ theme }) => theme.fonts.WEIGHT.MEDIUM};
+  font-weight: ${({ theme }) => theme.fonts.WEIGHT.REGULAR};
   font-family: ${({ theme }) => theme.fonts.FAMILY.PRETENDARD};
   text-decoration: underline;
+  flex-shrink: 0;
 `;
 
 interface TextButtonProps {

packages/web/src/common/components/Table/TableCell.tsx

@@ -18,13 +18,13 @@ const CommonCellWrapper = styled.div<{
   width: ${({ width }) => (typeof width === "number" ? `${width}px` : width)};
   min-width: ${({ minWidth }) => `${minWidth}px`};
   display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 48px;
-  padding: 12px 8px;
+  justify-content: flex-start;
+  align-items: flex-start;
+  height: 40px;
+  padding: 8px 20px;
   font-family: ${({ theme }) => theme.fonts.FAMILY.PRETENDARD};
   background-color: ${({ theme, isHeader }) =>
-    isHeader ? theme.colors.PRIMARY : "transparent"};
+    isHeader ? theme.colors.GREEN[600] : "transparent"};
 `;
 
 const CellText = styled.div<{ isGray: boolean }>`
@@ -41,6 +41,7 @@ const CellText = styled.div<{ isGray: boolean }>`
 const HeaderInner = styled.div`
   font-weight: ${({ theme }) => theme.fonts.WEIGHT.MEDIUM};
   color: ${({ theme }) => theme.colors.WHITE};
+  width: 100%;
 `;
 
 const SortWrapper = styled.div`
@@ -54,7 +55,7 @@ const SortWrapper = styled.div`
 const TableCell: React.FC<TableCellProps> = ({
   type,
   children,
-  width = "150px",
+  width = "567px",
   minWidth = 100,
 }) => {
   const isHeader = type === "Header" || type === "HeaderSort";

packages/web/src/features/landing/components/SingleColumnTable.tsx

@@ -0,0 +1,80 @@
+import React from "react";
+import styled from "styled-components";
+import TableCell from "@sparcs-students/web/common/components/Table/TableCell";
+import { Typography } from "@mui/material";
+import TextButton from "@sparcs-students/web/common/components/Buttons/TextButton";
+
+interface TableRowData {
+  id: string;
+  contents: string;
+}
+
+const data: TableRowData[] = [
+  { id: "1", contents: "첫 번째 내용" },
+  { id: "2", contents: "두 번째 내용" },
+  { id: "3", contents: "세 번째 내용" },
+];
+
+const TableWrapper = styled.div`
+  width: 100%;
+  max-width: 567px;
+  border-radius: 4px;
+  overflow: hidden;
+`;
+
+const HeaderWrapper = styled.div`
+  width: 100%;
+  align-self: stretch;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+const ContentsWrapper = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: flex-start;
+`;
+
+const TableRow = styled.div`
+  display: flex;
+  cursor: pointer;
+  border-bottom: 2px solid ${({ theme }) => theme.colors.GRAY[100]};
+  border-left: 2px solid ${({ theme }) => theme.colors.GRAY[100]};
+  border-right: 2px solid ${({ theme }) => theme.colors.GRAY[100]};
+  &:first-child {
+    border-bottom: none;
+    border-left: 2px solid ${({ theme }) => theme.colors.GREEN[600]};
+    border-right: 2px solid ${({ theme }) => theme.colors.GREEN[600]};
+    cursor: none;
+  }
+  &:last-child {
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+`;
+
+const SingleColumnTable: React.FC = () => (
+  <TableWrapper>
+    <TableRow>
+      <TableCell type="Header" width="100%">
+        <HeaderWrapper>
+          <Typography fontSize={20} fontWeight={700} lineHeight={1}>
+            안건지/회의록
+          </Typography>
+          <TextButton text="더보기" />
+        </HeaderWrapper>
+      </TableCell>
+    </TableRow>
+    {data.map(row => (
+      <TableRow key={row.id}>
+        <TableCell type="Default" width="100%">
+          <ContentsWrapper>{row.contents}</ContentsWrapper>
+        </TableCell>
+      </TableRow>
+    ))}
+  </TableWrapper>
+);
+
+export default SingleColumnTable;

packages/web/src/features/landing/frames/MainFrame.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import React from "react";
+import styled from "styled-components";
+
+import colors from "@sparcs-students/web/styles/themes/colors";
+import Typography from "@sparcs-students/web/common/components/Typography";
+import SingleColumnTable from "../components/\bSingleColumnTable";
+
+const VerticalWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100%;
+  gap: 20px;
+`;
+
+const TableWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  height: 100%;
+  gap: 80px;
+`;
+
+const MainPageWrapper = styled.div`
+  height: 300px;
+`;
+
+const PageTitleWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+const StyledSpan = styled.span`
+  color: ${colors.PRIMARY};
+  font-weight: ${({ theme }) => theme.fonts.WEIGHT.SEMIBOLD};
+`;
+
+const MainPageMainFrame: React.FC = () => (
+  <VerticalWrapper>
+    <PageTitleWrapper>
+      <Typography fw="BOLD" fs={30} style={{ width: "fit-content" }}>
+        KAIST 4천 학우의 생활에 <StyledSpan>필요한 서비스</StyledSpan>를{" "}
+        <StyledSpan>한곳</StyledSpan>에.
+      </Typography>
+    </PageTitleWrapper>
+    <MainPageWrapper />
+    <TableWrapper>
+      <SingleColumnTable />
+      <SingleColumnTable />
+    </TableWrapper>
+  </VerticalWrapper>
+);
+
+export default MainPageMainFrame;