[Feat] 프로젝트 페이지 개발

src/components/Thumbnail/Thumbnail.tsx

@@ -5,7 +5,7 @@ import { m, Variants } from 'framer-motion';
 import { ArrowIcon } from '~/components/Icons';
 import { colors } from '~/styles/colors';
 
-type Link = {
+export type Link = {
   type: 'Behance' | 'Github' | 'Web' | 'App';
   href: string;
 };
@@ -70,7 +70,6 @@ const articleCss = css`
   width: 312px;
   height: 208px;
   padding: 24px;
-  margin-top: 100px;
 `;
 
 const imageCss = css`
@@ -153,7 +152,6 @@ const textVariants: Variants = {
 const articleVariants: Variants = {
   default: { background: 'transparent' },
   hover: {
-    background: 'rgba(19, 28, 40, 0.5)',
     transition: {
       duration: 0.3,
       ease: defaultEasing,
@@ -162,9 +160,11 @@ const articleVariants: Variants = {
 };
 
 const imageVariants: Variants = {
-  default: { filter: 'blur(0px)' },
+  default: {
+    filter: 'blur(0px)',
+  },
   hover: {
-    filter: 'blur(7px)',
+    filter: 'blur(7px) brightness(0.3)',
     transition: {
       duration: 0.3,
       ease: defaultEasing,

src/constant/project.ts

@@ -0,0 +1,254 @@
+export const TAB_LIST = ['전체', '13기', '12기', '11기', '-10기'];
+export const PROJECT_LIST = [
+  {
+    title: '자린고비',
+    subTitle: '13기',
+    description: '거지들의 이야기로 쌓이는<br/>소비습관 개선 서비스',
+    links: [
+      {
+        type: 'Behance',
+        href: 'https://www.behance.net/gallery/175690517/-Improve-your-spending-habit-with-people',
+      },
+      { type: 'Github', href: 'https://github.com/depromeet/jalingobi-client' },
+      { type: 'Web', href: 'jalingobi.com' },
+    ],
+  },
+  {
+    title: '오버스윗',
+    subTitle: '13기',
+    description: '카페 음료의 당을<br/>기록하고 관리하는 서비스',
+    links: [
+      {
+        type: 'Behance',
+        href: 'https://www.behance.net/gallery/175690517/-Improve-your-spending-habit-with-people',
+      },
+      { type: 'Github', href: 'https://github.com/depromeet/jalingobi-client' },
+      { type: 'Web', href: 'jalingobi.com' },
+    ],
+  },
+  {
+    title: 'Na Lab(나랩)',
+    subTitle: '13기',
+    description: '동료의 익명 피드백으로<br/>발견하는 나만의 커리어 DNA',
+    links: [
+      {
+        type: 'Behance',
+        href: 'https://www.behance.net/gallery/175690517/-Improve-your-spending-habit-with-people',
+      },
+      { type: 'Github', href: 'https://github.com/depromeet/jalingobi-client' },
+      { type: 'Web', href: 'jalingobi.com' },
+    ],
+  },
+  {
+    title: '인사이트아웃',
+    subTitle: '13기',
+    description: 'AI 기반 직무역량 키워드 추천 및<br/>자기소개서 작성 서비스',
+    links: [
+      {
+        type: 'Behance',
+        href: 'https://www.behance.net/gallery/175690517/-Improve-your-spending-habit-with-people',
+      },
+      { type: 'Github', href: 'https://github.com/depromeet/jalingobi-client' },
+      { type: 'Web', href: 'jalingobi.com' },
+    ],
+  },
+  {
+    title: 'Street Drop',
+    subTitle: '13기',
+    description: '길을 걸으며 음악을 드랍하는<br/>음악 공유 소셜 서비스',
+    links: [
+      {
+        type: 'Behance',
+        href: 'https://www.behance.net/gallery/175690517/-Improve-your-spending-habit-with-people',
+      },
+      { type: 'Github', href: 'https://github.com/depromeet/jalingobi-client' },
+      { type: 'Web', href: 'jalingobi.com' },
+    ],
+  },
+  {
+    title: 'Whatnow (왔나)',
+    subTitle: '13기',
+    description: '약속 가는 중 친구들과 즐기는<br/>Share-play 서비스',
+    links: [
+      {
+        type: 'Behance',
+        href: 'https://www.behance.net/gallery/175690517/-Improve-your-spending-habit-with-people',
+      },
+      { type: 'Github', href: 'https://github.com/depromeet/jalingobi-client' },
+      { type: 'Web', href: 'jalingobi.com' },
+    ],
+  },
+  {
+    title: 'Ding-Dong (딩동)',
+    subTitle: '13기',
+    description: '서로의 TMI를 공유하고<br/>친해지고 싶은 마음을 전하세요!',
+    links: [
+      {
+        type: 'Behance',
+        href: 'https://www.behance.net/gallery/175690517/-Improve-your-spending-habit-with-people',
+      },
+      { type: 'Github', href: 'https://github.com/depromeet/jalingobi-client' },
+      { type: 'Web', href: 'jalingobi.com' },
+    ],
+  },
+  {
+    title: 'Pumping (펌핑)',
+    subTitle: '13기',
+    description: '크루원과 함께<br/>운동 경쟁하는 서비스',
+    links: [
+      {
+        type: 'Behance',
+        href: 'https://www.behance.net/gallery/175690517/-Improve-your-spending-habit-with-people',
+      },
+      { type: 'Github', href: 'https://github.com/depromeet/jalingobi-client' },
+      { type: 'Web', href: 'jalingobi.com' },
+    ],
+  },
+  {
+    title: '짝심삼일',
+    subTitle: '12기',
+    description: '나를 바꾸는 작은 습관의 힘,<br/>습관 관리 서비스',
+    links: [
+      {
+        type: 'Behance',
+        href: 'https://url.kr/pyhgze',
+      },
+      { type: 'Github', href: 'https://github.com/depromeet12th/three-days-android' },
+      { type: 'App', href: 'https://c11.kr/19ln2' },
+    ],
+  },
+  {
+    title: 'KNOCKNOCK',
+    subTitle: '12기',
+    description: '내 친구가 보내는 생생한<br/>푸시알림 서비스',
+    links: [
+      {
+        type: 'Behance',
+        href: 'https://www.behance.net/gallery/161848521/KNOCKNOCK-PUSH-NOTIFICATION-CUSTOM-SERVICE',
+      },
+      { type: 'Github', href: 'https://github.com/depromeet/12th-KnockKnock-Android' },
+      {
+        type: 'App',
+        href: 'https://play.google.com/store/apps/details?id=com.depromeet.knockknock',
+      },
+    ],
+  },
+  {
+    title: 'TICLEMOA',
+    subTitle: '12기',
+    description: '아티클을 모아 지식을 태산처럼,<br/>아티클 스크랩 서비스',
+    links: [
+      {
+        type: 'Behance',
+        href: 'https://www.behance.net/gallery/161983453/TICLEMOA-Article-clipping-service-',
+      },
+      { type: 'Github', href: 'https://github.com/depromeet/ticlemoa-backend' },
+      {
+        type: 'App',
+        href: 'https://apps.apple.com/kr/app/ticlemoa/id1659267166',
+      },
+    ],
+  },
+  {
+    title: '똑스',
+    subTitle: '12기',
+    description: '내가 만든 퀴즈로<br/>스터디를 재미있게, 똑스',
+    links: [
+      {
+        type: 'Behance',
+        href: 'https://www.behance.net/gallery/161231589/Toks-Quiz-Study-Service-',
+      },
+      { type: 'Github', href: 'https://github.com/depromeet/toks-web' },
+      {
+        type: 'Web',
+        href: 'https://tokstudy.com/',
+      },
+    ],
+  },
+  {
+    title: '코퀄리티',
+    subTitle: '12기',
+    description: '지식을 공유하고, 후원하며<br/>함께 성장하는 블로깅 플랫폼',
+    links: [
+      {
+        type: 'Behance',
+        href: 'https://www.behance.net/gallery/161841129/-Coquality-High-Quality-Blogging-',
+      },
+      {
+        type: 'Web',
+        href: 'coquality.vercel.app',
+      },
+    ],
+  },
+  {
+    title: '아맞다',
+    subTitle: '12기',
+    description: '대신 외쳐주는 소지품 리스트',
+    links: [
+      {
+        type: 'Behance',
+        href: 'https://www.behance.net/gallery/161161601/-Ahmatda-Checklist-for-Your-Belongings',
+      },
+      {
+        type: 'Web',
+        href: 'https://ahmatda.notion.site/ahmatda/3202c2a4e2dd440eb95ae3345a130fc4',
+      },
+    ],
+  },
+  {
+    title: 'PING-PONG!',
+    subTitle: '12기',
+    description: '재능을 교환하고 나누며<br/>성장하는 플랫폼, 핑퐁',
+    links: [
+      {
+        type: 'Behance',
+        href: 'https://www.behance.net/gallery/161783411/Ping-Pong',
+      },
+      {
+        type: 'App',
+        href: 'https://apps.apple.com/kr/app/%ED%95%91%ED%90%81-pingpong/id1662351621',
+      },
+    ],
+  },
+  {
+    title: '꼬깃',
+    subTitle: '12기',
+    description: '진심을 표현하고 싶을 때,<br/>꼬깃 접어 전해보세요',
+    links: [
+      {
+        type: 'Behance',
+        href: 'https://url.kr/qd3ijo',
+      },
+      {
+        type: 'Web',
+        href: 'https://www.ggo-geet.com',
+      },
+    ],
+  },
+  {
+    title: '비어에어',
+    subTitle: '11기',
+    description: '편의점 세계 맥주로<br/>세계 여행도장깨기',
+    links: [
+      {
+        type: 'Behance',
+        href: 'https://www.behance.net/gallery/147281821/Beer-Air-UXUI-Design-Mobile-App-Servic',
+      },
+      {
+        type: 'Web',
+        href: 'https://beerair.kr',
+      },
+    ],
+  },
+  {
+    title: 'noonbody',
+    subTitle: '10기',
+    description: '건강한 눈바디 다이어트',
+    links: [
+      {
+        type: 'App',
+        href: 'https://play.google.com/store/apps/details?id=com.def.everybody_android',
+      },
+    ],
+  },
+];

src/pages/project.tsx

@@ -1,10 +1,102 @@
+import { useEffect, useState } from 'react';
+import { css } from '@emotion/react';
+
 import { SEO } from '~/components/SEO';
+import { Thumbnail } from '~/components/Thumbnail';
+import { Link } from '~/components/Thumbnail/Thumbnail';
+import { PROJECT_LIST, TAB_LIST } from '~/constant/project';
+import { colors } from '~/styles/colors';
+import { theme } from '~/styles/theme';
 
 export default function Project() {
+  const [currentTab, setCurrentTab] = useState('전체');
+  const [selectedProjectList, setSelectedProjectList] = useState(PROJECT_LIST);
+
+  useEffect(() => {
+    if (currentTab === '전체') {
+      return setSelectedProjectList(PROJECT_LIST);
+    }
+    if (currentTab === '-10기') {
+      return setSelectedProjectList(
+        PROJECT_LIST.filter(project => Number(project.subTitle.replace('기', '')) <= 10)
+      );
+    }
+    setSelectedProjectList(PROJECT_LIST.filter(project => project.subTitle === currentTab));
+  }, [currentTab]);
+
   return (
     <>
       <SEO title="디프만 - Project" />
-      <main></main>
+      <main css={mainCss}>
+        <section css={sectionCss}>
+          <ul css={tabWrapperCss}>
+            <li css={tabContainerCss}>
+              {TAB_LIST.map(tab => (
+                <button
+                  key={tab}
+                  css={currentTab === tab ? activeTabCss : inActiveTabCss}
+                  onClick={() => setCurrentTab(tab)}
+                >
+                  {tab}
+                </button>
+              ))}
+            </li>
+          </ul>
+          <div css={projectContainerCss}>
+            {selectedProjectList.map(project => (
+              <Thumbnail
+                key={project.title}
+                img={`/images/project/${project.subTitle}/${project.title}.png`}
+                title={project.title}
+                subTitle={project.subTitle}
+                description={project.description}
+                links={project.links as Link[]}
+              />
+            ))}
+          </div>
+        </section>
+      </main>
     </>
   );
 }
+
+const mainCss = css`
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  margin-top: 100px;
+  margin-bottom: 200px;
+`;
+
+const sectionCss = css`
+  width: 100vw;
+  max-width: 960px;
+`;
+
+const tabWrapperCss = css`
+  display: flex;
+`;
+
+const tabContainerCss = css`
+  display: flex;
+`;
+
+const activeTabCss = css`
+  ${theme.typos.pretendard.subTitle2};
+  padding: 16px 24px;
+  color: ${colors.yellow500};
+`;
+
+const inActiveTabCss = css`
+  ${theme.typos.pretendard.subTitle2};
+  padding: 16px 24px;
+  color: ${colors.white};
+`;
+
+const projectContainerCss = css`
+  margin-top: 36px;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 1fr);
+  gap: 12px;
+`;