Merge branch 'develop' into feat/43-jobfair

SystemConsultantGroup · Aug 30, 2024 · 60d22ef · 60d22ef
2 parents 8658f1f + 1ab24b7
commit 60d22ef
Show file tree

Hide file tree

Showing 137 changed files with 17,645 additions and 160 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -22,9 +22,16 @@
     "@mantine/hooks": "^7.11.2",
     "@mantine/styles": "^6.0.22",
     "@tabler/icons-react": "^3.11.0",
+    "classnames": "^2.5.1",
+    "@types/js-cookie": "^3.0.6",
+    "axios": "^1.7.3",
+    "js-cookie": "^3.0.5",
+    "jwt-decode": "^4.0.0",
+    "classnames": "^2.5.1",
     "next": "14.2.4",
     "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "swr": "^2.2.5"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.6.1",

diff --git a/public/images/lululabLogo.png b/public/images/lululabLogo.png
diff --git a/public/images/mock-project-thumbnail.png b/public/images/mock-project-thumbnail.png
diff --git a/src/app/(admin)/admin/(boards)/notices/page.tsx b/src/app/(admin)/admin/(boards)/notices/page.tsx
@@ -1,3 +1,11 @@
+import { PageHeader } from "@/components/common/PageHeader";
+import { AdminNoticeListSection } from "@/components/pages/AdminNoticeListSection";
+
 export default function AdminNoticesPage() {
-  return <main>Hello, world!</main>;
-}
+  return (
+    <main>
+      <PageHeader title={"공지사항 게시판 관리"} />
+      <AdminNoticeListSection />
+    </main>
+  );
+}
diff --git a/src/app/(user)/(auth)/login/kakao/page.tsx b/src/app/(user)/(auth)/login/kakao/page.tsx
@@ -0,0 +1,5 @@
+import { KakaoAuth } from "@/components/pages/KakaoAuth";
+
+export default function KakaoAuthPage() {
+  return <KakaoAuth />;
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -3,6 +3,8 @@ import { ColorSchemeScript, MantineProvider } from "@mantine/core";
 import "@mantine/core/styles.css";
 import "@/theme/global.css";
 import type { Metadata } from "next";
+import { AuthProvider } from "@/components/common/Auth";
+import { SWRProvider } from "@/components/common/SWRProvider";
 
 export const metadata: Metadata = {
   title: "S-TOP 기술교류회",
@@ -20,9 +22,15 @@ export default function RootLayout({
         <ColorSchemeScript defaultColorScheme="auto" />
       </head>
       <body>
-        <MantineProvider theme={AppTheme} cssVariablesResolver={resolver} defaultColorScheme="auto">
-          {children}
-        </MantineProvider>
+        <SWRProvider>
+          <MantineProvider
+            theme={AppTheme}
+            cssVariablesResolver={resolver}
+            defaultColorScheme="auto"
+          >
+            <AuthProvider>{children}</AuthProvider>
+          </MantineProvider>
+        </SWRProvider>
       </body>
     </html>
   );

diff --git a/src/components/common/AdminNoticePreview/AdminNoticePreview.module.css b/src/components/common/AdminNoticePreview/AdminNoticePreview.module.css
@@ -0,0 +1,42 @@
+.container {
+  width: 600px;
+  border: 0.5px solid var(--mantine-color-dimmed-border);
+}
+
+.title_bar {
+  width: 100%;
+  height: 70px;
+  border-bottom: 1px solid #888888;
+
+  background-color: var(--color-surfaceVariant);
+
+  border-radius: 8px 8px 0px 0px;
+}
+
+.col_icon {
+  width: 10%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.col_title {
+  font-size: 20px;
+  line-height: 32px;
+  font-weight: 600;
+
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.row_container {
+  width: 100%;
+}
+
+.pagination {
+  padding: 20px 10px;
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+}
diff --git a/src/components/common/AdminNoticePreview/AdminNoticePreview.story.tsx b/src/components/common/AdminNoticePreview/AdminNoticePreview.story.tsx
@@ -0,0 +1,75 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { AdminNoticePreview } from "./AdminNoticePreview";
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: "AdminNoticePreview",
+  component: AdminNoticePreview,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: "centered",
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ["autodocs"],
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  argTypes: {},
+  // More on Action Args : https://storybook.js.org/docs/essentials/actions#action-args
+  args: {},
+} satisfies Meta<typeof AdminNoticePreview>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Usage: Story = {
+  args: {
+    title: "공지사항",
+    pagingData: [
+      {
+        data: [
+          { pinned: true, title: "S-TOP 리뉴얼 안내", writer: "SCG", registeredDate: new Date() },
+          {
+            pinned: true,
+            title: "S-TOP 리뉴얼 안내 재공지",
+            writer: "SCG",
+            registeredDate: new Date(),
+          },
+          {
+            pinned: true,
+            title: "S-TOP 리뉴얼 안내 22",
+            writer: "SCG",
+            registeredDate: new Date(),
+          },
+          {
+            pinned: false,
+            title: "공지사항 제목입니다. 엄청 긴 제목입니다. 더 긴 제목",
+            writer: "행정실",
+            registeredDate: new Date(),
+          },
+          {
+            pinned: false,
+            title: "공지사항 제목입니다.",
+            writer: "소프트웨어융합대학 행정실",
+            registeredDate: new Date(),
+          },
+        ],
+      },
+      {
+        data: [
+          {
+            pinned: false,
+            title: "공지사항 제목입니다.",
+            writer: "행정실",
+            registeredDate: new Date(),
+          },
+          {
+            pinned: false,
+            title: "공지사항 제목입니다. 2",
+            writer: "소프트웨어융합대학 행정실",
+            registeredDate: new Date(),
+          },
+        ],
+      },
+    ],
+  },
+};
diff --git a/src/components/common/AdminNoticePreview/AdminNoticePreview.tsx b/src/components/common/AdminNoticePreview/AdminNoticePreview.tsx
@@ -0,0 +1,54 @@
+import { Stack, Pagination, Flex } from "@mantine/core";
+import { useState } from "react";
+import { AdminNoticePreviewRow } from "./AdminNoticePreviewRow/AdminNoticePreviewRow";
+import classes from "./AdminNoticePreview.module.css";
+import { IconTable } from "@tabler/icons-react";
+import { DummyRow } from "./DummyRow/DummyRow";
+
+export interface IAdminNoticePreviewRow {
+  pinned: boolean;
+  title: string;
+  writer: string;
+  registeredDate: Date;
+  onClickRow?: () => void;
+}
+
+interface Props {
+  title: string;
+  pagingData: {
+    data: IAdminNoticePreviewRow[];
+  }[];
+}
+
+export function AdminNoticePreview({ title, pagingData }: Props) {
+  const [activePage, setPage] = useState(1);
+  const data: IAdminNoticePreviewRow[] = pagingData[activePage - 1].data;
+
+  // 페이지네이션 위치 고정
+  const firstPageDataCount = pagingData[0].data.length;
+  const lastPageDataCount = pagingData[pagingData.length - 1].data.length;
+
+  const dummyRowsCount = firstPageDataCount - lastPageDataCount;
+
+  return (
+    <Stack gap={0} align="flex-start" justify="flex-start" className={classes.container}>
+      <Flex className={classes.title_bar}>
+        <div className={classes.col_icon}>
+          <IconTable size={24} />
+        </div>
+        <div className={classes.col_title}>{title}</div>
+      </Flex>
+      <div className={classes.row_container}>
+        {data.map((item, index) => (
+          <AdminNoticePreviewRow key={index} {...item} />
+        ))}
+        {activePage === pagingData.length &&
+          Array.from({ length: dummyRowsCount }, (_, index) => <DummyRow key={`dummy-${index}`} />)}
+      </div>
+
+      <div className={classes.pagination}>
+        <Pagination total={pagingData.length} value={activePage} onChange={setPage} />
+      </div>
+    </Stack>
+  );
+}
diff --git a/...mponents/common/AdminNoticePreview/AdminNoticePreviewRow/AdminNoticePreviewRow.module.css b/...mponents/common/AdminNoticePreview/AdminNoticePreviewRow/AdminNoticePreviewRow.module.css
@@ -0,0 +1,69 @@
+.row {
+  border-bottom: 0.5px solid #afb1b6;
+  height: 70px;
+  width: 100%;
+  font-size: 16px;
+  line-height: 24px;
+}
+
+.row:hover {
+  background-color: var(--color-background);
+}
+
+.column_pinned {
+  width: 10%;
+  height: 100%;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.column_title {
+  width: 50%;
+  height: 100%;
+  text-align: left;
+
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding-right: 10px;
+
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.column_writer {
+  width: 20%;
+  height: 100%;
+
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding-right: 10px;
+
+  min-width: 0;
+
+  color: #888888;
+}
+
+.text_ellipsis {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.column_date {
+  width: 20%;
+  height: 100%;
+
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+
+  color: #888888;
+}
+
+.pin_icon {
+  color: var(--color-primary);
+}
diff --git a/src/components/common/AdminNoticePreview/AdminNoticePreviewRow/AdminNoticePreviewRow.tsx b/src/components/common/AdminNoticePreview/AdminNoticePreviewRow/AdminNoticePreviewRow.tsx
@@ -0,0 +1,42 @@
+import { Flex, Text } from "@mantine/core";
+import classes from "./AdminNoticePreviewRow.module.css";
+import { IAdminNoticePreviewRow } from "../AdminNoticePreview";
+import { IconPinFilled } from "@tabler/icons-react";
+
+export function AdminNoticePreviewRow({
+  pinned,
+  title,
+  writer,
+  registeredDate,
+  onClickRow,
+}: IAdminNoticePreviewRow) {
+  function formatDate(date: Date) {
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, "0"); // getMonth()는 0부터 시작하므로 +1
+    const day = String(date.getDate()).padStart(2, "0");
+
+    return `${year}.${month}.${day}`;
+  }
+  return (
+    <Flex
+      gap={0}
+      align="center"
+      justify="flex-start"
+      direction="row"
+      wrap="nowrap"
+      className={classes.row}
+      onClick={onClickRow}
+    >
+      <div className={classes.column_pinned}>
+        {pinned && <IconPinFilled size={24} className={classes.pin_icon} />}
+      </div>
+      <div className={classes.column_title}>
+        <Text className={classes.text_ellipsis}>{title}</Text>
+      </div>
+      <div className={classes.column_writer}>
+        <Text className={classes.text_ellipsis}>{writer}</Text>
+      </div>
+      <div className={classes.column_date}>{formatDate(registeredDate)}</div>
+    </Flex>
+  );
+}
diff --git a/src/components/common/AdminNoticePreview/DummyRow/DummyRow.module.css b/src/components/common/AdminNoticePreview/DummyRow/DummyRow.module.css
@@ -0,0 +1,6 @@
+.row {
+  height: 70px;
+  width: 100%;
+  font-size: 16px;
+  line-height: 24px;
+}
diff --git a/src/components/common/AdminNoticePreview/DummyRow/DummyRow.tsx b/src/components/common/AdminNoticePreview/DummyRow/DummyRow.tsx
@@ -0,0 +1,15 @@
+import { Flex } from "@mantine/core";
+import classes from "./DummyRow.module.css";
+
+export function DummyRow() {
+  return (
+    <Flex
+      gap={0}
+      align="center"
+      justify="flex-start"
+      direction="row"
+      wrap="nowrap"
+      className={classes.row}
+    ></Flex>
+  );
+}