Merge pull request #53 from 9oormthon-univ/feat/#52-ideaList

[Feat/#52] 아이디어 게시판 기능 구현
9oormthon-univ · Feb 7, 2025 · 25f0434 · 25f0434
2 parents 351e714 + 7eb215b
commit 25f0434
Show file tree

Hide file tree

Showing 18 changed files with 978 additions and 63 deletions.
diff --git a/index.html b/index.html
@@ -3,9 +3,9 @@
   <head>
     <meta charset="UTF-8" />
     <link
-      id="goormstrap-stylesheet"
+      id="vapor-foundation"
       rel="stylesheet"
-      href="https://statics.goorm.io/gds/foundation/v0.9.0/vapor-foundation.min.css" />
+      href="https://statics.goorm.io/gds/foundation/v0.24.3/vapor-foundation.min.css" />
     <!-- Poppins font -->
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

diff --git a/package.json b/package.json
@@ -12,12 +12,15 @@
   "dependencies": {
     "@goorm-dev/gds-components": "^1.45.1",
     "@goorm-dev/gds-icons": "^1.45.1",
-    "@goorm-dev/vapor-components": "^0.8.0",
+    "@goorm-dev/vapor-components": "^0.24.3",
+    "@goorm-dev/vapor-icons": "^0.24.3",
+    "axios": "^1.7.9",
     "classnames": "^2.5.1",
     "firebase": "^10.12.5",
     "framer-motion": "^11.3.23",
     "intersection-observer": "^0.12.2",
     "react": "^18.3.1",
+    "react-cookie": "^7.2.2",
     "react-dom": "^18.3.1",
     "react-player": "^2.16.0",
     "react-router-dom": "^6.26.0",

diff --git a/src/Router.tsx b/src/Router.tsx
@@ -12,6 +12,9 @@ const SearchUniv = lazy(() => import('./pages/searchUniv/SearchUniv'));
 const Information = lazy(() => import('./pages/information/Information'));
 const MyPage = lazy(() => import('./pages/myPage/MyPage'));
 const UpdatePW = lazy(() => import('./pages/updatePW/UpdatePW'));
+const IdeaList = lazy(() => import('./pages/hackathon/IdeaList/IdeaList'));
+
+const IdeaCreate = lazy(() => import('./pages/hackathon/IdeaCreate/IdeaCreate'));
 
 const loaderProps = {
   color: 'black',
@@ -93,6 +96,22 @@ const router = createBrowserRouter([
           </Suspense>
         ),
       },
+      {
+        path: 'hackathon',
+        element: (
+          <Suspense fallback={<GoormLoader {...loaderProps} />}>
+            <IdeaList />
+          </Suspense>
+        ),
+      },
+      {
+        path: 'hackathon/create',
+        element: (
+          <Suspense fallback={<GoormLoader {...loaderProps} />}>
+            <IdeaCreate />
+          </Suspense>
+        ),
+      },
       {
         path: '*',
         element: (

diff --git a/src/api/auth.ts b/src/api/auth.ts
@@ -0,0 +1,10 @@
+// 회원 관련 api
+
+import instance from './instance';
+
+// 로그인 api
+export const loginAPI = async (serial_id: string, password: string) => {
+  const response = await instance.post('/api/v1/auth/login', { serial_id, password });
+
+  return response.data;
+};
diff --git a/src/api/instance.ts b/src/api/instance.ts
@@ -0,0 +1,9 @@
+import axios from 'axios';
+
+const instance = axios.create({
+  baseURL: process.env.REACT_APP_BASE_URL,
+  headers: { 'Content-Type': 'application/json' },
+  withCredentials: true,
+});
+
+export default instance;
diff --git a/src/components/hackathon/ideaList/filter/FilterDropdown.tsx b/src/components/hackathon/ideaList/filter/FilterDropdown.tsx
@@ -0,0 +1,32 @@
+import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem, Text } from '@goorm-dev/vapor-components';
+import { useState } from 'react';
+import styles from './styles.module.scss';
+
+interface FilterDropDownProps {
+  options: string[]; // 필터 옵션
+  selectedValue: string; // 현재 선택된 값
+  onChange: (value: string) => void;
+  disabled?: boolean;
+}
+
+export default function FilterDropdown({ options, selectedValue, onChange, disabled = false }: FilterDropDownProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const toggle = () => !disabled && setIsOpen(!isOpen);
+
+  return (
+    <Dropdown direction="down" size="lg" isOpen={isOpen} toggle={toggle} disabled={disabled}>
+      <DropdownToggle caret color="select" className={styles.dropdown} disabled={disabled}>
+        <Text typography="body2" fontWeight="medium" className={styles.textSelect}>
+          {selectedValue || '전체'}
+        </Text>
+      </DropdownToggle>
+      <DropdownMenu>
+        {options.map((option, index) => (
+          <DropdownItem key={index} onClick={() => onChange(option)}>
+            {option}
+          </DropdownItem>
+        ))}
+      </DropdownMenu>
+    </Dropdown>
+  );
+}
diff --git a/src/components/hackathon/ideaList/filter/styles.module.scss b/src/components/hackathon/ideaList/filter/styles.module.scss
@@ -0,0 +1,18 @@
+.container {
+  display: flex;
+  gap: var(--space-100);
+  padding: 0 var(--space-200);
+  height: var(--dimension-500);
+}
+
+.dropdown {
+  border: 1px solid var(--border-color);
+}
+
+.dropdown:disabled {
+  opacity: 0.32;
+}
+
+.textSelect {
+  margin: 0 1rem 0 0;
+}
diff --git a/src/components/hackathon/ideaList/ideaItem/IdeaListItem.tsx b/src/components/hackathon/ideaList/ideaItem/IdeaListItem.tsx
@@ -0,0 +1,41 @@
+import { Button } from '@goorm-dev/vapor-components';
+import styles from './styles.module.scss';
+import { Text } from '@goorm-dev/vapor-components';
+import { BookmarkIcon } from '@goorm-dev/vapor-icons';
+
+interface IdeaListItemProps {
+  topic: string; // 해커톤 주제
+  title: string; // 아이디어 제목
+  description: string; // 아이디어 소개
+  status: string; // 모집 상태
+}
+
+export default function IdeaListItem({ topic, title, description, status }: IdeaListItemProps) {
+  return (
+    <div className={styles.container}>
+      <div className={styles.leftContainer}>
+        <div className={styles.titleWrap}>
+          <Text typography="body3" color="text-hint" fontWeight="medium">
+            {topic}
+          </Text>
+          <Text typography="heading4" color="text-normal" fontWeight="bold">
+            {title}
+          </Text>
+        </div>
+        <Text as="p" typography="body2" color="text-alternative" fontWeight="medium" className={styles.ideaIntro}>
+          {description}
+        </Text>
+      </div>
+      <div className={styles.rightContainer}>
+        <Text
+          typography="heading4"
+          color={status === '모집 완료' ? 'text-hint' : 'text-primary'}
+          fontWeight="bold"
+          className={styles.fixedText}>
+          {status}
+        </Text>
+        <Button color="secondary" size="md" icon={BookmarkIcon} />
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/hackathon/ideaList/ideaItem/styles.module.scss b/src/components/hackathon/ideaList/ideaItem/styles.module.scss
@@ -0,0 +1,71 @@
+@import '../../../../style/mixin.scss';
+
+.container {
+  display: flex;
+  padding: var(--space-300) 0;
+  gap: var(--space-500);
+  align-items: center;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.leftContainer {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-200);
+  width: 47.5rem;
+}
+
+.titleWrap {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-050);
+}
+
+.rightContainer {
+  width: 9.5rem;
+  display: flex;
+  align-items: center;
+  gap: var(--space-500);
+}
+
+.fixedText {
+  width: 5rem;
+  text-align: center;
+}
+
+.ideaIntro {
+  width: 100%;
+  height: 2.75rem;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  word-break: break-word;
+  line-height: 1.375rem;
+  letter-spacing: -0.00625rem;
+
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+
+  @include container-xs {
+    height: 9.625rem;
+    -webkit-line-clamp: 7;
+  }
+
+  @include container-sm {
+    height: 5.5rem;
+    -webkit-line-clamp: 4;
+  }
+
+  @include container-md {
+    height: 4.125rem;
+    -webkit-line-clamp: 3;
+  }
+  @include container-lg {
+    height: 2.75rem;
+    -webkit-line-clamp: 2;
+  }
+}
+
+.buttonColor {
+  background: #e1e1e8;
+}
diff --git a/src/components/hackathon/ideaList/noAccess/NoAccess.tsx b/src/components/hackathon/ideaList/noAccess/NoAccess.tsx
@@ -0,0 +1,22 @@
+import styles from './styles.module.scss';
+import { Text } from '@goorm-dev/vapor-components';
+
+export default function NoAccess() {
+  return (
+    <div className={styles.container}>
+      <img
+        className={styles.imgSrc}
+        src="https://statics.goorm.io/gds/resources/images/light/empty_folder.svg"
+        alt="빈 폴더"
+      />
+      <div className={styles.textWrap}>
+        <Text as="h2" typography="heading5" color="text-hint">
+          아직 볼 수 없어요 :(
+        </Text>
+        <Text as="h2" typography="body2" color="text-hint">
+          팀빌딩 기간 시작 후 오픈됩니다.
+        </Text>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/hackathon/ideaList/noAccess/styles.module.scss b/src/components/hackathon/ideaList/noAccess/styles.module.scss
@@ -0,0 +1,25 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-100);
+  padding: var(--space-500);
+  justify-content: center;
+  align-self: stretch;
+  align-items: center;
+
+  width: 100%;
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius-300);
+}
+
+.imgSrc {
+  width: 10rem;
+  height: 7.5rem;
+}
+
+.textWrap {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  align-items: center;
+}
diff --git a/src/components/layout/navbar/CustomNavbar.tsx b/src/components/layout/navbar/CustomNavbar.tsx
@@ -21,6 +21,10 @@ function CustomNavbar() {
       title: 'Recruit',
       to: '/recruit',
     },
+    {
+      title: 'Hackathon',
+      to: '/hackathon',
+    },
     {
       title: (
         <>

diff --git a/src/pages/hackathon/IdeaCreate/IdeaCreate.tsx b/src/pages/hackathon/IdeaCreate/IdeaCreate.tsx
@@ -0,0 +1,3 @@
+export default function IdeaCreate() {
+  return <h1>Hello Worlaasdfasdfd</h1>;
+}
diff --git a/src/pages/hackathon/IdeaCreate/styles.module.scss b/src/pages/hackathon/IdeaCreate/styles.module.scss