[#206] ✨ 프로젝트 페이지 개발 (#207)

* [#201] ♻️ margin layout to flex flex layout

* [#201] ✨ add community page

* [#204] 💄 select trigger to flex row

* [#204] 💄 add white space in param of join

* [#204] ✨ add portfolio page

* [#206] 🗑️ remove useless text node

* [#206] ✨ add projectlistitem interface

* [#206] ✨ add project card + project category label map constant

* [#206] ✨ add project page

* [#206] 🗑️ remove unused module imports

* [#206] 💄 add margin y to login page

* [#206] ✨ keep select component dumb

* [#206] ♻️ refactor two pages with the altercation of select component

* [#206] ✨ add empty search result component

* [#207] 🐛 solve conflicts

Author: KingNono1030

src/app/(pages)/login/page.tsx

@@ -61,7 +61,7 @@ export default function Login(): JSX.Element {
   }, [setValue])
 
   return (
-    <div className='m-auto flex h-auto w-420 flex-col pt-238'>
+    <div className='m-auto my-240 flex h-auto w-420 flex-col'>
       <div className='m-auto mb-36'>
         <Logo />
       </div>

src/app/(pages)/portfolio/page.tsx

@@ -8,15 +8,15 @@ import { PortfolioListItem } from '@/types/api/Portfolio.types'
 import clsx from 'clsx'
 
 import { Button, Link } from '@/components/common/button'
-import { Box, Container, Grid } from '@/components/common/containers'
+import { DeletableChip } from '@/components/common/chip'
+import { Box, Container } from '@/components/common/containers'
 import { TextInput } from '@/components/common/input'
 import { Text } from '@/components/common/text'
 import { PortfolioCard } from '@/components/portfolio/PortfolioCard'
 import { Pagination } from '@/components/shared/pagination'
 import { Select } from '@/components/shared/select'
 
 import { usePagination } from '@/hooks/usePagination'
-import { useToggle } from '@/hooks/useToggle'
 
 const MOCK_DATA: PortfolioListItem[] = [
   {
@@ -37,20 +37,14 @@ const MOCK_DATA: PortfolioListItem[] = [
   },
 ]
 
-const stackOptions = [
-  { label: '자바스크립트', value: 'Javascript' },
-  { label: 'Css', value: 'Css' },
-  { label: 'HTML', value: 'HTML' },
-  { label: '타입스크립트', value: 'Typescript' },
-]
-const positionOptions = [
+const positionsOptions = [
   { label: '프론트엔드', value: 'frontend' },
   { label: '백엔드', value: 'backend' },
   { label: '풀스택', value: 'fullstack' },
 ]
 
 export default function PortfolioPage(): JSX.Element {
-  const [position, setPosition] = useState<string[]>([])
+  const [positions, setPositions] = useState<string[]>([])
   const [order, setOrder] = useState<'recent' | 'like' | 'view'>('recent')
   const {
     currentPage,
@@ -62,8 +56,8 @@ export default function PortfolioPage(): JSX.Element {
     goToPreviousPageGroup,
   } = usePagination({ totalItems: 20, itemsPerPage: 10, buttonsPerPage: 10 })
 
-  const handlePositionChange = (values: string[]) => {
-    setPosition(() => values)
+  const handlepositionsChange = (values: string[]) => {
+    setPositions(() => values)
   }
 
   return (
@@ -127,55 +121,69 @@ export default function PortfolioPage(): JSX.Element {
             </Link>
           </div>
         </div>
-        <div className='mb-20 flex items-center justify-between'>
-          <div className='flex gap-12'>
-            <Select
-              options={positionOptions}
-              isMulti={true}
-              isSearchable={false}
-              onChange={handlePositionChange}
-            >
-              <Select.Trigger placeholder='포지션' />
-              <Select.Menu className='w-216' />
-            </Select>
-          </div>
-          <div className='flex gap-20'>
-            <div className='flex gap-40'>
-              <Button
-                onClick={() => {
-                  setOrder('recent')
-                }}
-                variant='text'
-                className={clsx('h-auto p-0 text-gray-500', {
-                  'text-gray-800': order === 'recent',
-                })}
-              >
-                최신순
-              </Button>
-              <Button
-                onClick={() => {
-                  setOrder('like')
-                }}
-                variant='text'
-                className={clsx('h-auto p-0 text-gray-500', {
-                  'text-gray-800': order === 'like',
-                })}
+        <div className='mb-20 flex flex-col gap-8'>
+          <div className='flex items-center justify-between'>
+            <div className='flex gap-12'>
+              <Select
+                options={positionsOptions}
+                selectedValues={positions}
+                isMulti={true}
+                isSearchable={false}
+                onChange={handlepositionsChange}
               >
-                좋아요순
-              </Button>
-              <Button
-                onClick={() => {
-                  setOrder('view')
-                }}
-                variant='text'
-                className={cn('h-auto p-0 text-gray-500', {
-                  'text-gray-800': order === 'view',
-                })}
-              >
-                조회순
-              </Button>
+                <Select.Trigger placeholder='포지션' />
+                <Select.Menu className='w-216' />
+              </Select>
+            </div>
+            <div className='flex gap-20'>
+              <div className='flex gap-40'>
+                <Button
+                  onClick={() => {
+                    setOrder('recent')
+                  }}
+                  variant='text'
+                  className={clsx('h-auto p-0 text-gray-500', {
+                    'text-gray-800': order === 'recent',
+                  })}
+                >
+                  최신순
+                </Button>
+                <Button
+                  onClick={() => {
+                    setOrder('like')
+                  }}
+                  variant='text'
+                  className={clsx('h-auto p-0 text-gray-500', {
+                    'text-gray-800': order === 'like',
+                  })}
+                >
+                  좋아요순
+                </Button>
+                <Button
+                  onClick={() => {
+                    setOrder('view')
+                  }}
+                  variant='text'
+                  className={cn('h-auto p-0 text-gray-500', {
+                    'text-gray-800': order === 'view',
+                  })}
+                >
+                  조회순
+                </Button>
+              </div>
             </div>
           </div>
+          <div className='flex gap-4'>
+            {positions.map(position => (
+              <DeletableChip
+                key={position}
+                label={position}
+                onDelete={() => {
+                  setPositions(prev => prev.filter(v => v !== position))
+                }}
+              />
+            ))}
+          </div>
         </div>
         <div className='mb-40 flex h-718 flex-col gap-12 overflow-hidden'>
           {MOCK_DATA.map(portfolioItem => (