feat(client): 프로젝트 둘러보기 페이지 퍼블리싱 (#28)

* feat(client): projectSelectBox 컴포넌트 추가

* feat(client): 프로젝트 둘러보기 페이지 추가

apps/client/src/app/projects/page.tsx

@@ -0,0 +1,31 @@
+import { Container, Wrapper } from '@/components/layouts';
+import { ProjectSelectBox } from '@/components/projects';
+import { ProjectOptions, ProjectsMeta, ProjectStatus } from '@/constants';
+import { ProjectCard } from '@jjoing/ui';
+import { FaPlus } from 'react-icons/fa6';
+
+const ProjectsPage = () => {
+  return (
+    <Container className="py-10 min-h-[100vh] bg-gray-10">
+      <Wrapper>
+        <div className="h-[40px] mb-5 flex items-center gap-[10px]">
+          <ProjectSelectBox options={ProjectStatus} />
+          <ProjectSelectBox options={ProjectOptions} />
+        </div>
+        <div className="flex items-end justify-between">
+          <span className="text-xl font-medium">프로젝트 목록 📋</span>
+          <div className="flex items-center justify-center rounded-md bg-primary size-[35px] cursor-p hover:bg-primaryHover transition duration-15">
+            <FaPlus className="size-[18px] text-white" />
+          </div>
+        </div>
+        <div className="my-5 grid grid-cols-3 gap-[25px]">
+          {ProjectsMeta.map((project) => (
+            <ProjectCard key={project.id} {...project} />
+          ))}
+        </div>
+      </Wrapper>
+    </Container>
+  );
+};
+
+export default ProjectsPage;

apps/client/src/components/landing/introduceJJoing.tsx

@@ -3,6 +3,7 @@
 import { useSrcollToRef } from '@/hooks';
 import { Button, Text } from '@jjoing/ui';
 import dynamic from 'next/dynamic';
+import Link from 'next/link';
 import { useRef } from 'react';
 import { BsMouse } from 'react-icons/bs';
 import { IoIosArrowForward } from 'react-icons/io';
@@ -35,11 +36,13 @@ const IntroduceJJoing = () => {
                 당신의 아이디어를 현실로 만들 팀원을 구해보세요! <br />
                 쪼잉은 더 나은 프로젝트 경험을 위해 시작되었습니다.
               </Text>
-              <Button bgColor="borderPrimary" width={140} height="h50" rounded="full">
-                <span className="flex items-center gap-[2px] text-xl font-medium">
-                  시작하기 <IoIosArrowForward />
-                </span>
-              </Button>
+              <Link href="/projects">
+                <Button bgColor="borderPrimary" width={140} height="h50" rounded="full">
+                  <span className="flex items-center gap-[2px] text-xl font-medium">
+                    시작하기 <IoIosArrowForward />
+                  </span>
+                </Button>
+              </Link>
             </div>
           </div>
           <div className="flex items-end mb-8">

apps/client/src/components/landing/promotionJJoing.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { PromotionMeta } from '@/constants/promotionMetadata';
+import { PromotionMeta } from '@/constants';
 import { Text } from '@jjoing/ui';
 import { useState } from 'react';
 import { IoIosArrowForward } from 'react-icons/io';
@@ -23,7 +23,7 @@ const PromotionJJoing = () => {
               solutions
             </Text>
             <div className="flex flex-col gap-6">
-              <span className="text-f34 font-semibold text-gray-800">서비스 소개</span>
+              <span className="text-f32 font-semibold text-gray-800">서비스 소개</span>
               <Text type="body1" className="leading-5 text-gray-800">
                 쪼잉에서{' '}
                 <Text type="body1" className="leading-5 text-primary">

apps/client/src/components/projects/index.ts

@@ -0,0 +1 @@
+export { default as ProjectSelectBox } from './projectSelectBox';

apps/client/src/components/projects/projectSelectBox.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import { ProjectSortOption } from '@/types';
+import { Text } from '@jjoing/ui';
+import { memo, useState } from 'react';
+import { IoIosArrowDown, IoIosArrowUp } from 'react-icons/io';
+
+type ProjectSelectBoxProps = {
+  options: ProjectSortOption[];
+};
+
+const ProjectSelectBox = memo(({ options }: ProjectSelectBoxProps) => {
+  const [isClickButton, setIsClickButton] = useState(false);
+  const [clickButtonOption, setClickButtonOption] = useState(options[0]); // 백엔드로 요청할때는 id를 넘겨야 하므로 객체를 기본값으로 가짐
+
+  const handleOpenAndCloseOptions = () => {
+    setIsClickButton(!isClickButton);
+  };
+
+  const handleOptionClick = (option: ProjectSortOption) => {
+    setClickButtonOption(option);
+    setIsClickButton(false);
+  };
+
+  return (
+    <div className="flex flex-col gap-5 relative">
+      <button
+        className="w-[150px] h-[40px] px-3 border border-gray-300 focus:border-gray-400 rounded-md bg-white flex items-center justify-between transition duration-30"
+        onClick={handleOpenAndCloseOptions}
+      >
+        <Text type="body3">{clickButtonOption?.content}</Text>
+        {isClickButton ? <IoIosArrowUp /> : <IoIosArrowDown />}
+      </button>
+      {isClickButton && (
+        <div className="absolute top-[45px] w-full border rounded-md border-gray-300 bg-white z-10">
+          {options.map((option) => (
+            <div
+              className="w-full h-[40px] px-3 flex items-center cursor-p rounded-md hover:bg-gray-100 transition duration-30"
+              onClick={() => handleOptionClick(option)}
+              key={option.id}
+            >
+              <Text type="body3">{option.content}</Text>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+});
+
+export default ProjectSelectBox;

apps/client/src/constants/index.ts

@@ -1 +1,5 @@
 export * from './interviewMetadata';
+export * from './projectOptions';
+export * from './projectsMetadata';
+export * from './projectStatus';
+export * from './promotionMetadata';

apps/client/src/constants/projectOptions.ts

@@ -0,0 +1,14 @@
+export const ProjectOptions = [
+  {
+    id: 0,
+    content: '최신순',
+  },
+  {
+    id: 1,
+    content: '조회수 많은 순',
+  },
+  {
+    id: 2,
+    content: '좋아요 많은 순',
+  },
+];

apps/client/src/constants/projectStatus.ts

@@ -0,0 +1,14 @@
+export const ProjectStatus = [
+  {
+    id: 0,
+    content: '전체 프로젝트',
+  },
+  {
+    id: 1,
+    content: '진행중인 프로젝트',
+  },
+  {
+    id: 2,
+    content: '끝난 프로젝트',
+  },
+];

apps/client/src/constants/projectsMetadata.ts

@@ -0,0 +1,63 @@
+export const ProjectsMeta = [
+  {
+    id: 0,
+    title: 'radiohead',
+    subTitle: 'paranoid android',
+    projectDeadline: '2024-10-21',
+    maxProjectMembers: 5,
+    currentProjectMembers: 1,
+    viewCount: 100,
+    heartCount: 10,
+  },
+  {
+    id: 1,
+    title: 'radiohead',
+    subTitle: 'paranoid android',
+    projectDeadline: '2024-10-21',
+    maxProjectMembers: 5,
+    currentProjectMembers: 1,
+    viewCount: 100,
+    heartCount: 10,
+  },
+  {
+    id: 2,
+    title: 'radiohead',
+    subTitle:
+      'paranoid android paranoid android paranoid android paranoid android paranoid android paranoid android',
+    projectDeadline: '2024-10-21',
+    maxProjectMembers: 5,
+    currentProjectMembers: 1,
+    viewCount: 100,
+    heartCount: 10,
+  },
+  {
+    id: 3,
+    title: 'radiohead',
+    subTitle: 'paranoid android',
+    projectDeadline: '2024-10-21',
+    maxProjectMembers: 5,
+    currentProjectMembers: 1,
+    viewCount: 100,
+    heartCount: 10,
+  },
+  {
+    id: 4,
+    title: 'radiohead',
+    subTitle: 'paranoid android',
+    projectDeadline: '2024-10-21',
+    maxProjectMembers: 5,
+    currentProjectMembers: 1,
+    viewCount: 100,
+    heartCount: 10,
+  },
+  {
+    id: 5,
+    title: 'radiohead',
+    subTitle: 'paranoid android',
+    projectDeadline: '2024-10-21',
+    maxProjectMembers: 5,
+    currentProjectMembers: 1,
+    viewCount: 100,
+    heartCount: 10,
+  },
+];

apps/client/src/types/index.ts

@@ -0,0 +1 @@
+export * from './projectSortOption';

apps/client/src/types/projectSortOption.ts

@@ -0,0 +1,4 @@
+export type ProjectSortOption = {
+  id: number;
+  content: string;
+};

packages/ui/src/themes/colors.ts

@@ -5,4 +5,8 @@ export const colors = {
 
   secondary: '#264466',
   secondaryHover: '#182A3E',
+
+  gray: {
+    10: '#F8F9FA',
+  },
 };

packages/ui/src/themes/spacing.ts

@@ -5,8 +5,8 @@ export const fontSize = {
       lineHeight: '29px',
     },
   ],
-  f34: [
-    '24px',
+  f32: [
+    '32px',
     {
       lineHeight: '29px',
     },