Merge pull request #78 from SystemConsultantGroup/feat/42-aihub

[FEAT] AI Hub 페이지 (datasets and models)
SystemConsultantGroup · Sep 19, 2024 · d4b5fca · d4b5fca
2 parents 1465a65 + 583eb28
commit d4b5fca
Show file tree

Hide file tree

Showing 6 changed files with 469 additions and 6 deletions.
diff --git a/src/app/(user)/aihub/datasets/AIHub.module.css b/src/app/(user)/aihub/datasets/AIHub.module.css
@@ -0,0 +1,90 @@
+/* Full-width navbar */
+.subHeadNavbar {
+  width: 100%;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+/* Banner section */
+.banner {
+  width: 100%;
+  padding: 0;
+  box-sizing: border-box;
+  margin-bottom: 20px;
+}
+
+/* Main content section */
+.mainContent {
+  width: 90%;
+  max-width: 1440px;
+  margin: 0 auto;
+  padding: 0 20px;
+  box-sizing: border-box;
+  padding-bottom: 100px;
+}
+
+.searchSection {
+  margin-top: 40px;
+  margin-bottom: 20px;
+  justify-content: center;
+}
+
+.filters {
+  display: flex;
+  justify-content: center;
+  gap: 10px;
+  margin-top: 20px;
+}
+
+.chips {
+  margin-top: 20px;
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.gridContainer {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 100px;
+  justify-content: center;
+  align-items: center;
+}
+
+.container {
+  width: 100%;
+  margin-bottom: 100px;
+  padding: 0 20px;
+  box-sizing: border-box;
+}
+
+@media screen and (max-width: 480px) {
+  /** 모바일 세로 */
+  .gridContainer {
+    grid-template-columns: 1fr;
+    gap: 10px;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  /** 모바일 가로, 태블릿 세로 */
+  .gridContainer {
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+    gap: 20px;
+  }
+}
+
+@media screen and (max-width: 1024px) {
+  /** 태블릿 가로 */
+  .gridContainer {
+    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
+    gap: 30px;
+  }
+}
+
+@media screen and (max-width: 1280px) {
+  /** 태블릿 가로, 노트북 */
+  .gridContainer {
+    gap: 40px;
+  }
+}
diff --git a/src/app/(user)/aihub/datasets/page.tsx b/src/app/(user)/aihub/datasets/page.tsx
@@ -1,3 +1,101 @@
+"use client";
+
+import React, { useState } from "react";
+import { SubHeadNavbar } from "@/components/common/SubHeadNavbar/SubHeadNavbar";
+import { Banner } from "@/components/common/Banner/Banner";
+import { SearchInput } from "@/components/common/SearchInput";
+import { Dropdown } from "@/components/common/Dropdown/Dropdown";
+import { FilterChip } from "@/components/common/FilterChips/FilterChip";
+import { AihubCard } from "@/components/common/Cards/Aihub/Aihub";
+
+import classes from "./AIHub.module.css";
+
 export default function DatasetsPage() {
-  return <main>Hello, world!</main>;
+  const [selectedOptions, setSelectedOptions] = useState<string[]>([]);
+
+  const handleOptionSelect = (option: string) => {
+    if (!selectedOptions.includes(option)) {
+      setSelectedOptions((prev) => [...prev, option]);
+    }
+  };
+
+  const handleRemoveChip = (option: string) => {
+    setSelectedOptions((prev) => prev.filter((item) => item !== option));
+  };
+
+  return (
+    <>
+      <div className={classes.subHeadNavbar}>
+        <SubHeadNavbar title="AI Hub" />
+      </div>
+
+      <div className={classes.banner}>
+        <Banner
+          type="AI_HUB"
+          title="AI HUB"
+          subtitle="AI HUB (Datasets and AI Models)"
+          text="AI HUB는 우리학교 학생들이 수집한 데이터셋 및 개발한 모델을 전시하고, 공유하는 공간입니다."
+          width="100%"
+        />
+      </div>
+
+      <div className={classes.mainContent}>
+        <div className={classes.searchSection}>
+          <SearchInput placeholder="데이터셋 검색" />
+
+          <div className={classes.filters}>
+            <Dropdown
+              options={["Option 1", "Option 2", "Option 3"]}
+              placeholder="연도"
+              onOptionClick={handleOptionSelect}
+            />
+            <Dropdown
+              options={["Option 4", "Option 5", "Option 6"]}
+              placeholder="파일 타입"
+              onOptionClick={handleOptionSelect}
+            />
+            <Dropdown
+              options={["Option 7", "Option 8", "Option 9"]}
+              placeholder="파일 사이즈"
+              onOptionClick={handleOptionSelect}
+            />
+          </div>
+
+          <div className={classes.chips}>
+            {selectedOptions.map((option) => (
+              <FilterChip key={option} label={option} onRemove={() => handleRemoveChip(option)} />
+            ))}
+          </div>
+        </div>
+
+        <div className={classes.gridContainer}>
+          <AihubCard
+            title="AI 모델 데이터셋 1"
+            people="개발자 A"
+            company="회사 A"
+            model="이미지 분류 모델"
+          />
+          <AihubCard
+            title="AI 모델 데이터셋 2"
+            people="개발자 B"
+            company="회사 B"
+            model="텍스트 분석 모델"
+          />
+          <AihubCard
+            title="AI 모델 데이터셋 2"
+            people="개발자 B"
+            company="회사 B"
+            model="텍스트 분석 모델"
+          />
+          <AihubCard
+            title="AI 모델 데이터셋 2"
+            people="개발자 B"
+            company="회사 B"
+            model="텍스트 분석 모델"
+          />
+          {/* Add more AihubCard components as needed */}
+        </div>
+      </div>
+    </>
+  );
 }
diff --git a/src/app/(user)/aihub/models/AIHub.module.css b/src/app/(user)/aihub/models/AIHub.module.css
@@ -0,0 +1,90 @@
+/* Full-width navbar */
+.subHeadNavbar {
+  width: 100%;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+/* Banner section */
+.banner {
+  width: 100%;
+  padding: 0;
+  box-sizing: border-box;
+  margin-bottom: 20px;
+}
+
+/* Main content section */
+.mainContent {
+  width: 90%;
+  max-width: 1440px;
+  margin: 0 auto;
+  padding: 0 20px;
+  box-sizing: border-box;
+  padding-bottom: 100px;
+}
+
+.searchSection {
+  margin-top: 40px;
+  margin-bottom: 20px;
+  justify-content: center;
+}
+
+.filters {
+  display: flex;
+  justify-content: center;
+  gap: 10px;
+  margin-top: 20px;
+}
+
+.chips {
+  margin-top: 20px;
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.gridContainer {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 100px;
+  justify-content: center;
+  align-items: center;
+}
+
+.container {
+  width: 100%;
+  margin-bottom: 100px;
+  padding: 0 20px;
+  box-sizing: border-box;
+}
+
+@media screen and (max-width: 480px) {
+  /** 모바일 세로 */
+  .gridContainer {
+    grid-template-columns: 1fr;
+    gap: 10px;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  /** 모바일 가로, 태블릿 세로 */
+  .gridContainer {
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+    gap: 20px;
+  }
+}
+
+@media screen and (max-width: 1024px) {
+  /** 태블릿 가로 */
+  .gridContainer {
+    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
+    gap: 30px;
+  }
+}
+
+@media screen and (max-width: 1280px) {
+  /** 태블릿 가로, 노트북 */
+  .gridContainer {
+    gap: 40px;
+  }
+}
diff --git a/src/app/(user)/aihub/models/page.tsx b/src/app/(user)/aihub/models/page.tsx
@@ -1,3 +1,101 @@
+"use client";
+
+import React, { useState } from "react";
+import { SubHeadNavbar } from "@/components/common/SubHeadNavbar/SubHeadNavbar";
+import { Banner } from "@/components/common/Banner/Banner";
+import { SearchInput } from "@/components/common/SearchInput";
+import { Dropdown } from "@/components/common/Dropdown/Dropdown";
+import { FilterChip } from "@/components/common/FilterChips/FilterChip";
+import { AihubCard } from "@/components/common/Cards/Aihub/Aihub";
+
+import classes from "./AIHub.module.css";
+
 export default function ModelsPage() {
-  return <main>Hello, world!</main>;
+  const [selectedOptions, setSelectedOptions] = useState<string[]>([]);
+
+  const handleOptionSelect = (option: string) => {
+    if (!selectedOptions.includes(option)) {
+      setSelectedOptions((prev) => [...prev, option]);
+    }
+  };
+
+  const handleRemoveChip = (option: string) => {
+    setSelectedOptions((prev) => prev.filter((item) => item !== option));
+  };
+
+  return (
+    <>
+      <div className={classes.subHeadNavbar}>
+        <SubHeadNavbar title="AI Hub" />
+      </div>
+
+      <div className={classes.banner}>
+        <Banner
+          type="AI_HUB"
+          title="AI HUB"
+          subtitle="AI HUB (Datasets and AI Models)"
+          text="AI HUB는 우리학교 학생들이 수집한 데이터셋 및 개발한 모델을 전시하고, 공유하는 공간입니다."
+          width="100%"
+        />
+      </div>
+
+      <div className={classes.mainContent}>
+        <div className={classes.searchSection}>
+          <SearchInput placeholder="AI모델 검색" />
+
+          <div className={classes.filters}>
+            <Dropdown
+              options={["Option 1", "Option 2", "Option 3"]}
+              placeholder="연도"
+              onOptionClick={handleOptionSelect}
+            />
+            <Dropdown
+              options={["Option 4", "Option 5", "Option 6"]}
+              placeholder="데이터 타입"
+              onOptionClick={handleOptionSelect}
+            />
+            <Dropdown
+              options={["Option 7", "Option 8", "Option 9"]}
+              placeholder="프레임워크"
+              onOptionClick={handleOptionSelect}
+            />
+          </div>
+
+          <div className={classes.chips}>
+            {selectedOptions.map((option) => (
+              <FilterChip key={option} label={option} onRemove={() => handleRemoveChip(option)} />
+            ))}
+          </div>
+        </div>
+
+        <div className={classes.gridContainer}>
+          <AihubCard
+            title="AI 모델 데이터셋 1"
+            people="개발자 A"
+            company="회사 A"
+            model="이미지 분류 모델"
+          />
+          <AihubCard
+            title="AI 모델 데이터셋 2"
+            people="개발자 B"
+            company="회사 B"
+            model="텍스트 분석 모델"
+          />
+          <AihubCard
+            title="AI 모델 데이터셋 3"
+            people="개발자 C"
+            company="회사 C"
+            model="그래프 분석 모델"
+          />
+          <AihubCard
+            title="AI 모델 데이터셋 4"
+            people="개발자 D"
+            company="회사 D"
+            model="영상 분석 모델"
+          />
+          {/* Add more AihubCard components as needed */}
+        </div>
+      </div>
+    </>
+  );
 }