[Feat] 프로젝트 페이지네이션 + 반응형 작업

src/components/Pagination/Pagination.tsx

@@ -0,0 +1,76 @@
+import { useId } from 'react';
+import { css } from '@emotion/react';
+
+import { mediaQuery } from '~/styles/media';
+import { theme } from '~/styles/theme';
+
+type PaginationProps = {
+  handlePageClick: (clickedPage: number) => void;
+  numberOfPages: number;
+  currentPage: number;
+};
+
+export function Pagination({ handlePageClick, numberOfPages, currentPage }: PaginationProps) {
+  const id = useId();
+
+  return (
+    <>
+      <ul css={listCss}>
+        {[...new Array(numberOfPages)].map((_, i) => {
+          return (
+            <li
+              onClick={() => handlePageClick(i + 1)}
+              css={listItemCss(currentPage === i + 1)}
+              key={`page-${id}-${i + 1}`}
+            >
+              {i + 1}
+            </li>
+          );
+        })}
+      </ul>
+      <div css={buttonWrapperCss}>
+        {numberOfPages !== currentPage && (
+          <button css={moreCss} onClick={() => handlePageClick(currentPage + 1)}>
+            더보기
+          </button>
+        )}
+      </div>
+    </>
+  );
+}
+
+const listCss = css`
+  margin-top: 70px;
+  display: flex;
+  gap: 28px;
+  justify-content: center;
+  ${theme.typos.pretendard.subTitle2};
+  &:hover {
+    cursor: pointer;
+  }
+  ${mediaQuery('mobile')} {
+    display: none;
+  }
+`;
+
+const buttonWrapperCss = css`
+  display: flex;
+  justify-content: center;
+`;
+
+const moreCss = css`
+  display: none;
+  font-size: 0.9rem;
+  color: ${theme.colors.yellow500};
+  padding: 8px 24px;
+  margin-top: 30px;
+  font-weight: 700;
+  ${mediaQuery('mobile')} {
+    display: block;
+  }
+`;
+
+const listItemCss = (selected: boolean) => css`
+  padding: 10px;
+  color: ${selected ? theme.colors.yellow500 : theme.colors.white};
+`;

src/components/Pagination/index.ts

@@ -0,0 +1 @@
+export { Pagination } from './Pagination';

src/components/ProjectTab/ProjectTab.tsx

@@ -0,0 +1,56 @@
+import { Dispatch, SetStateAction } from 'react';
+import { css } from '@emotion/react';
+
+import { TAB_LIST } from '~/constant/project';
+import { mediaQuery } from '~/styles/media';
+import { theme } from '~/styles/theme';
+
+type ProjectTabProps = {
+  currentTab: string;
+  setCurrentTab: Dispatch<SetStateAction<string>>;
+};
+
+export function ProjectTab({ currentTab, setCurrentTab }: ProjectTabProps) {
+  return (
+    <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>
+  );
+}
+
+const tabWrapperCss = css`
+  display: flex;
+`;
+
+const tabContainerCss = css`
+  display: flex;
+`;
+
+const tabCss = css`
+  ${theme.typos.pretendard.subTitle2};
+  padding: 16px 24px;
+  ${mediaQuery('mobile')} {
+    ${theme.typos.pretendard.body2};
+    padding: 8px 16px;
+  }
+`;
+
+const activeTabCss = css`
+  ${tabCss};
+  color: ${theme.colors.yellow500};
+`;
+
+const inActiveTabCss = css`
+  ${tabCss};
+  color: ${theme.colors.white};
+`;

src/components/ProjectTab/index.ts

@@ -0,0 +1 @@
+export { ProjectTab } from './ProjectTab';

src/components/Sign/Sign.tsx

@@ -2,6 +2,8 @@ import Image from 'next/image';
 import { useRouter } from 'next/router';
 import { css } from '@emotion/react';
 
+import { mediaQuery } from '~/styles/media';
+
 const signPathGroup = ['/about', '/recruit', '/project'];
 
 export function Sign() {
@@ -12,12 +14,29 @@ export function Sign() {
 
   return (
     <div css={imageContainerCss}>
-      <Image src={`/images/sign${path}.png`} width={960} height={290} alt="sign" />
+      <div css={imageWrapperCss}>
+        <Image
+          src={`/images/sign${path}.png`}
+          width={960}
+          height={290}
+          alt="sign"
+          layout="responsive"
+        />
+      </div>
     </div>
   );
 }
 
 const imageContainerCss = css`
   display: flex;
   justify-content: center;
+  padding: 30px;
+  ${mediaQuery('mobile')} {
+    padding: 20px;
+  }
+`;
+
+const imageWrapperCss = css`
+  width: 100vw;
+  max-width: 1024px;
 `;

src/components/Thumbnail/Thumbnail.tsx

@@ -1,8 +1,9 @@
 import Image from 'next/image';
 import { css } from '@emotion/react';
-import { m, Variants } from 'framer-motion';
+import { m } from 'framer-motion';
 
 import { ArrowIcon } from '~/components/Icons';
+import { defaultFadeInVariants } from '~/constant/motion';
 import { colors } from '~/styles/colors';
 
 export type Link = {
@@ -18,75 +19,70 @@ type ThumbnailProps = {
   links?: Link[];
 };
 
-const defaultEasing = [0.6, -0.05, 0.01, 0.99];
-
 export function Thumbnail({ title, subTitle, img, description, links }: ThumbnailProps) {
   return (
     <m.article
       css={articleCss}
-      initial="default"
-      whileHover="hover"
-      animate="default"
-      variants={articleVariants}
+      variants={defaultFadeInVariants}
+      initial="initial"
+      animate="animate"
+      exit="exit"
     >
-      <m.div css={imageCss} variants={imageVariants}>
-        <Image src={img} alt={title} fill quality={100} />
-      </m.div>
-      <m.div css={contentsCss}>
-        <m.div>
-          <m.p css={titleCss} variants={textVariants}>
-            {title}
-          </m.p>
-          <m.p css={subTitleCss} variants={textVariants}>
-            {subTitle}
-          </m.p>
-        </m.div>
-        <m.p
-          css={descriptionCss}
-          variants={textVariants}
-          dangerouslySetInnerHTML={{ __html: description }}
-        />
+      <Image css={imageCss} src={img} alt={title} fill quality={100} />
+      <div css={gradientCss} />
+      <div css={contentsCss}>
+        <div>
+          <p css={titleCss}>{title}</p>
+          <p css={subTitleCss}>{subTitle}</p>
+        </div>
+        <p css={descriptionCss} dangerouslySetInnerHTML={{ __html: description }} />
         {links && (
-          <m.div css={linkContainerCss}>
+          <div css={linkContainerCss}>
             {links.map(link => (
-              <m.span key={link.type} css={linkWrapperCss}>
-                <m.a href={link.href} css={linkCss} variants={textVariants}>
+              <span key={link.type} css={linkWrapperCss}>
+                <a href={link.href} css={linkCss}>
                   {link.type}
-                </m.a>
-                <m.span variants={textVariants}>
+                </a>
+                <span>
                   <ArrowIcon direction={'right'} color={colors.blue400} width={16} height={16} />
-                </m.span>
-              </m.span>
+                </span>
+              </span>
             ))}
-          </m.div>
+          </div>
         )}
-      </m.div>
+      </div>
     </m.article>
   );
 }
 
 const articleCss = css`
   position: relative;
-  width: 312px;
   height: 208px;
   padding: 24px;
+  &:hover {
+    cursor: pointer;
+  }
+  &:hover img {
+    filter: blur(7px) brightness(0.3);
+  }
 `;
 
 const imageCss = css`
-  position: absolute;
-  top: 0;
-  left: 0;
   object-fit: cover;
-  z-index: -1;
-  width: 100%;
-  height: 100%;
+  object-position: center;
 `;
 
 const contentsCss = css`
   display: flex;
   flex-direction: column;
   height: 100%;
   justify-content: space-between;
+  transition: opacity 0.3s ease;
+  opacity: 0;
+
+  &:hover {
+    opacity: 1;
+  }
 `;
 
 const linkContainerCss = css`
@@ -107,6 +103,7 @@ const linkCss = css`
   line-height: 22px;
   letter-spacing: -0.16px;
   margin-right: 2px;
+  z-index: 10;
 `;
 
 const titleCss = css`
@@ -127,6 +124,13 @@ const subTitleCss = css`
   z-index: 10;
 `;
 
+const gradientCss = css`
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 172px;
+`;
+
 const descriptionCss = css`
   position: relative;
   font-weight: 500;
@@ -137,37 +141,3 @@ const descriptionCss = css`
   letter-spacing: -0.16px;
   white-space: pre-wrap;
 `;
-
-const textVariants: Variants = {
-  default: { opacity: 0 },
-  hover: {
-    opacity: 1,
-    transition: {
-      duration: 0.3,
-      ease: defaultEasing,
-    },
-  },
-};
-
-const articleVariants: Variants = {
-  default: { background: 'transparent' },
-  hover: {
-    transition: {
-      duration: 0.3,
-      ease: defaultEasing,
-    },
-  },
-};
-
-const imageVariants: Variants = {
-  default: {
-    filter: 'blur(0px)',
-  },
-  hover: {
-    filter: 'blur(7px) brightness(0.3)',
-    transition: {
-      duration: 0.3,
-      ease: defaultEasing,
-    },
-  },
-};

src/constant/motion.ts

@@ -0,0 +1,28 @@
+import { Variants } from 'framer-motion';
+
+export const defaultEasing = [0.6, -0.05, 0.01, 0.99];
+
+export const defaultFadeInVariants: Variants = {
+  initial: {
+    opacity: 0,
+    y: 40,
+    transition: { duration: 0.5, ease: defaultEasing },
+    willChange: 'opacity, transform',
+  },
+  animate: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: 0.8, ease: defaultEasing },
+    willChange: 'opacity, transform',
+  },
+  exit: {
+    opacity: 0,
+    y: 40,
+    transition: { duration: 0.5, ease: defaultEasing },
+    willChange: 'opacity, transform',
+  },
+};
+
+export const staggerHalf: Variants = {
+  animate: { transition: { staggerChildren: 0.05 } },
+};