From c2d20c2ae94e1c00d526f8d9f7f6fcbf517d1993 Mon Sep 17 00:00:00 2001 From: 99-zziy Date: Fri, 22 Sep 2023 23:44:47 +0900 Subject: [PATCH 01/10] =?UTF-8?q?feat:=20=ED=94=84=EB=A1=9C=EC=A0=9D?= =?UTF-8?q?=ED=8A=B8=20=ED=8E=98=EC=9D=B4=EC=A7=80=EB=84=A4=EC=9D=B4?= =?UTF-8?q?=EC=85=98=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Pagination/Pagination.tsx | 45 ++++++++++++++ src/components/Pagination/index.ts | 1 + src/components/ProjectTab/ProjectTab.tsx | 51 ++++++++++++++++ src/components/ProjectTab/index.ts | 1 + src/constant/project.ts | 11 +++- src/pages/project.tsx | 75 ++++++++++-------------- src/utils/pagination.ts | 11 ++++ 7 files changed, 149 insertions(+), 46 deletions(-) create mode 100644 src/components/Pagination/Pagination.tsx create mode 100644 src/components/Pagination/index.ts create mode 100644 src/components/ProjectTab/ProjectTab.tsx create mode 100644 src/components/ProjectTab/index.ts create mode 100644 src/utils/pagination.ts diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx new file mode 100644 index 00000000..3646cdb4 --- /dev/null +++ b/src/components/Pagination/Pagination.tsx @@ -0,0 +1,45 @@ +import { useId } from 'react'; +import { css } from '@emotion/react'; + +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 ( + + ); +} + +const listCss = css` + margin-top: 70px; + display: flex; + gap: 48px; + justify-content: center; + ${theme.typos.pretendard.subTitle2}; + &:hover { + cursor: pointer; + } +`; + +const listItemCss = (selected: boolean) => css` + padding: 10px; + color: ${selected ? theme.colors.yellow500 : theme.colors.white}; +`; diff --git a/src/components/Pagination/index.ts b/src/components/Pagination/index.ts new file mode 100644 index 00000000..0a1fd4da --- /dev/null +++ b/src/components/Pagination/index.ts @@ -0,0 +1 @@ +export { Pagination } from './Pagination'; diff --git a/src/components/ProjectTab/ProjectTab.tsx b/src/components/ProjectTab/ProjectTab.tsx new file mode 100644 index 00000000..ca4a0387 --- /dev/null +++ b/src/components/ProjectTab/ProjectTab.tsx @@ -0,0 +1,51 @@ +import { Dispatch, SetStateAction } from 'react'; +import { css } from '@emotion/react'; + +import { TAB_LIST } from '~/constant/project'; +import { theme } from '~/styles/theme'; + +type ProjectTabProps = { + currentTab: string; + setCurrentTab: Dispatch>; +}; + +export function ProjectTab({ currentTab, setCurrentTab }: ProjectTabProps) { + return ( + + ); +} + +const tabWrapperCss = css` + display: flex; +`; + +const tabContainerCss = css` + display: flex; +`; + +const tabCss = css` + ${theme.typos.pretendard.subTitle2}; + padding: 16px 24px; +`; + +const activeTabCss = css` + ${tabCss}; + color: ${theme.colors.yellow500}; +`; + +const inActiveTabCss = css` + ${tabCss}; + color: ${theme.colors.white}; +`; diff --git a/src/components/ProjectTab/index.ts b/src/components/ProjectTab/index.ts new file mode 100644 index 00000000..0575eae4 --- /dev/null +++ b/src/components/ProjectTab/index.ts @@ -0,0 +1 @@ +export { ProjectTab } from './ProjectTab'; diff --git a/src/constant/project.ts b/src/constant/project.ts index d1b2579e..5e3fc3fd 100644 --- a/src/constant/project.ts +++ b/src/constant/project.ts @@ -1,5 +1,14 @@ +import { Link } from '~/components/Thumbnail/Thumbnail'; + +export type Project = { + title: string; + subTitle: string; + description: string; + links: Link[]; +}; + export const TAB_LIST = ['전체', '13기', '12기', '11기', '-10기']; -export const PROJECT_LIST = [ +export const PROJECT_LIST: Project[] = [ { title: '자린고비', subTitle: '13기', diff --git a/src/pages/project.tsx b/src/pages/project.tsx index e3a05e70..d82cddc3 100644 --- a/src/pages/project.tsx +++ b/src/pages/project.tsx @@ -1,49 +1,49 @@ import { useEffect, useState } from 'react'; import { css } from '@emotion/react'; +import { Pagination } from '~/components/Pagination'; +import { ProjectTab } from '~/components/ProjectTab'; 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'; +import { PROJECT_LIST } from '~/constant/project'; +import { getCurrentProjects, getTenUnderProjects, sliceByPage } from '~/utils/pagination'; -export default function Project() { - const [currentTab, setCurrentTab] = useState('전체'); +const FIRST_PAGE = 1; +const ALL_TAB = '전체'; +const TEN_UNDER_TAB = '-10기'; + +export default function ProjectPage() { + const [currentTab, setCurrentTab] = useState(ALL_TAB); const [selectedProjectList, setSelectedProjectList] = useState(PROJECT_LIST); + const [currentPage, setCurrentPage] = useState(FIRST_PAGE); useEffect(() => { - if (currentTab === '전체') { + setCurrentPage(1); + if (currentTab === ALL_TAB) { return setSelectedProjectList(PROJECT_LIST); } - if (currentTab === '-10기') { - return setSelectedProjectList( - PROJECT_LIST.filter(project => Number(project.subTitle.replace('기', '')) <= 10) - ); + + if (currentTab === TEN_UNDER_TAB) { + return setSelectedProjectList(getTenUnderProjects(PROJECT_LIST)); } - setSelectedProjectList(PROJECT_LIST.filter(project => project.subTitle === currentTab)); + + const selectedProjects = getCurrentProjects(PROJECT_LIST, currentTab); + setSelectedProjectList(selectedProjects); }, [currentTab]); + const onClickPage = (page: number) => { + setCurrentPage(page); + }; + return ( <>
-
    -
  • - {TAB_LIST.map(tab => ( - - ))} -
    • -
+
- {selectedProjectList.map(project => ( + {sliceByPage(selectedProjectList, currentPage).map(project => ( ))}
+
@@ -73,26 +78,6 @@ const sectionCss = css` 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; diff --git a/src/utils/pagination.ts b/src/utils/pagination.ts new file mode 100644 index 00000000..bfc83fec --- /dev/null +++ b/src/utils/pagination.ts @@ -0,0 +1,11 @@ +import { Project } from '~/constant/project'; + +export const sliceByPage = (projects: Project[], page: number) => { + return projects.slice(9 * (page - 1), 9 * page); +}; + +export const getTenUnderProjects = (projects: Project[]) => + projects.filter(project => Number(project.subTitle.replace('기', '')) <= 10); + +export const getCurrentProjects = (projects: Project[], currentTab: string) => + projects.filter(project => project.subTitle === String(currentTab)); From 55c2ec1951a8a56c10ab283bb8f5f07b3d9510d6 Mon Sep 17 00:00:00 2001 From: 99-zziy Date: Fri, 22 Sep 2023 23:46:04 +0900 Subject: [PATCH 02/10] =?UTF-8?q?feat:=20=ED=8E=98=EC=9D=B4=EC=A7=80?= =?UTF-8?q?=EB=84=A4=EC=9D=B4=EC=85=98=20gap=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Pagination/Pagination.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx index 3646cdb4..f3b1dbcc 100644 --- a/src/components/Pagination/Pagination.tsx +++ b/src/components/Pagination/Pagination.tsx @@ -31,7 +31,7 @@ export function Pagination({ handlePageClick, numberOfPages, currentPage }: Pagi const listCss = css` margin-top: 70px; display: flex; - gap: 48px; + gap: 28px; justify-content: center; ${theme.typos.pretendard.subTitle2}; &:hover { From 7d7b04a4eb3681c1721cfba431c789d4a818bcfb Mon Sep 17 00:00:00 2001 From: 99-zziy Date: Sat, 23 Sep 2023 00:29:03 +0900 Subject: [PATCH 03/10] =?UTF-8?q?feat:=20=ED=94=84=EB=A1=9C=EC=A0=9D?= =?UTF-8?q?=ED=8A=B8=20=EC=84=B9=EC=85=98=20=EC=95=A0=EB=8B=88=EB=A9=94?= =?UTF-8?q?=EC=9D=B4=EC=85=98=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Thumbnail/Thumbnail.tsx | 102 ++++++++----------------- src/constant/motion.ts | 28 +++++++ src/pages/project.tsx | 34 ++++++--- 3 files changed, 82 insertions(+), 82 deletions(-) create mode 100644 src/constant/motion.ts diff --git a/src/components/Thumbnail/Thumbnail.tsx b/src/components/Thumbnail/Thumbnail.tsx index e7b17d9c..cd0a74fe 100644 --- a/src/components/Thumbnail/Thumbnail.tsx +++ b/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,49 +19,32 @@ type ThumbnailProps = { links?: Link[]; }; -const defaultEasing = [0.6, -0.05, 0.01, 0.99]; - export function Thumbnail({ title, subTitle, img, description, links }: ThumbnailProps) { return ( - - - {title} - - - - - {title} - - - {subTitle} - - - + + {title} +
+
+
+

{title}

+

{subTitle}

+
+

{links && ( - +

{links.map(link => ( - - + + {link.type} - - + + - - + + ))} - +
)} - +
); } @@ -87,6 +71,11 @@ const contentsCss = css` flex-direction: column; height: 100%; justify-content: space-between; + opacity: 0; + &:hover { + filter: blur(7px); + opacity: 1; + } `; const linkContainerCss = css` @@ -127,6 +116,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 +133,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, - }, - }, -}; diff --git a/src/constant/motion.ts b/src/constant/motion.ts new file mode 100644 index 00000000..edb55c08 --- /dev/null +++ b/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: 30, + transition: { duration: 0.6, ease: defaultEasing }, + willChange: 'opacity, transform', + }, + animate: { + opacity: 1, + y: 0, + transition: { duration: 0.6, ease: defaultEasing }, + willChange: 'opacity, transform', + }, + exit: { + opacity: 0, + y: 30, + transition: { duration: 0.6, ease: defaultEasing }, + willChange: 'opacity, transform', + }, +}; + +export const staggerHalf: Variants = { + animate: { transition: { staggerChildren: 0.05 } }, +}; diff --git a/src/pages/project.tsx b/src/pages/project.tsx index d82cddc3..ba38dd8c 100644 --- a/src/pages/project.tsx +++ b/src/pages/project.tsx @@ -1,11 +1,13 @@ import { useEffect, useState } from 'react'; import { css } from '@emotion/react'; +import { AnimatePresence, m } from 'framer-motion'; import { Pagination } from '~/components/Pagination'; import { ProjectTab } from '~/components/ProjectTab'; import { SEO } from '~/components/SEO'; import { Thumbnail } from '~/components/Thumbnail'; import { Link } from '~/components/Thumbnail/Thumbnail'; +import { staggerHalf } from '~/constant/motion'; import { PROJECT_LIST } from '~/constant/project'; import { getCurrentProjects, getTenUnderProjects, sliceByPage } from '~/utils/pagination'; @@ -42,18 +44,26 @@ export default function ProjectPage() {
-
- {sliceByPage(selectedProjectList, currentPage).map(project => ( - - ))} -
+ + + {sliceByPage(selectedProjectList, currentPage).map(project => ( + + ))} + + Date: Sat, 23 Sep 2023 01:09:06 +0900 Subject: [PATCH 04/10] =?UTF-8?q?feat:=20style=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Thumbnail/Thumbnail.tsx | 18 ++++++++++++++++-- src/constant/motion.ts | 10 +++++----- 2 files changed, 21 insertions(+), 7 deletions(-) diff --git a/src/components/Thumbnail/Thumbnail.tsx b/src/components/Thumbnail/Thumbnail.tsx index cd0a74fe..475eb21b 100644 --- a/src/components/Thumbnail/Thumbnail.tsx +++ b/src/components/Thumbnail/Thumbnail.tsx @@ -21,7 +21,13 @@ type ThumbnailProps = { export function Thumbnail({ title, subTitle, img, description, links }: ThumbnailProps) { return ( - + {title}
@@ -54,6 +60,12 @@ const articleCss = css` width: 312px; height: 208px; padding: 24px; + &:hover { + cursor: pointer; + } + &:hover img { + filter: blur(7px) brightness(0.3); + } `; const imageCss = css` @@ -64,6 +76,7 @@ const imageCss = css` z-index: -1; width: 100%; height: 100%; + transition: filter 0.3s ease; `; const contentsCss = css` @@ -71,9 +84,10 @@ const contentsCss = css` flex-direction: column; height: 100%; justify-content: space-between; + transition: opacity 0.3s ease; opacity: 0; + &:hover { - filter: blur(7px); opacity: 1; } `; diff --git a/src/constant/motion.ts b/src/constant/motion.ts index edb55c08..e195ceb4 100644 --- a/src/constant/motion.ts +++ b/src/constant/motion.ts @@ -5,20 +5,20 @@ export const defaultEasing = [0.6, -0.05, 0.01, 0.99]; export const defaultFadeInVariants: Variants = { initial: { opacity: 0, - y: 30, - transition: { duration: 0.6, ease: defaultEasing }, + y: 40, + transition: { duration: 0.5, ease: defaultEasing }, willChange: 'opacity, transform', }, animate: { opacity: 1, y: 0, - transition: { duration: 0.6, ease: defaultEasing }, + transition: { duration: 0.8, ease: defaultEasing }, willChange: 'opacity, transform', }, exit: { opacity: 0, - y: 30, - transition: { duration: 0.6, ease: defaultEasing }, + y: 40, + transition: { duration: 0.5, ease: defaultEasing }, willChange: 'opacity, transform', }, }; From 23b7201e32dfbb5d71ee3fddfb99ecdd27ff41d7 Mon Sep 17 00:00:00 2001 From: 99-zziy Date: Sat, 23 Sep 2023 01:35:20 +0900 Subject: [PATCH 05/10] =?UTF-8?q?feat:=20=EB=B0=98=EC=9D=91=ED=98=95=20?= =?UTF-8?q?=EC=9E=91=EC=97=85=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Thumbnail/Thumbnail.tsx | 10 ++-------- src/pages/project.tsx | 11 +++++++++++ 2 files changed, 13 insertions(+), 8 deletions(-) diff --git a/src/components/Thumbnail/Thumbnail.tsx b/src/components/Thumbnail/Thumbnail.tsx index 475eb21b..6ffba18c 100644 --- a/src/components/Thumbnail/Thumbnail.tsx +++ b/src/components/Thumbnail/Thumbnail.tsx @@ -57,7 +57,6 @@ export function Thumbnail({ title, subTitle, img, description, links }: Thumbnai const articleCss = css` position: relative; - width: 312px; height: 208px; padding: 24px; &:hover { @@ -69,14 +68,8 @@ const articleCss = css` `; const imageCss = css` - position: absolute; - top: 0; - left: 0; object-fit: cover; - z-index: -1; - width: 100%; - height: 100%; - transition: filter 0.3s ease; + object-position: center; `; const contentsCss = css` @@ -110,6 +103,7 @@ const linkCss = css` line-height: 22px; letter-spacing: -0.16px; margin-right: 2px; + z-index: 10; `; const titleCss = css` diff --git a/src/pages/project.tsx b/src/pages/project.tsx index ba38dd8c..ca5650bc 100644 --- a/src/pages/project.tsx +++ b/src/pages/project.tsx @@ -9,6 +9,7 @@ import { Thumbnail } from '~/components/Thumbnail'; import { Link } from '~/components/Thumbnail/Thumbnail'; import { staggerHalf } from '~/constant/motion'; import { PROJECT_LIST } from '~/constant/project'; +import { mediaQuery } from '~/styles/media'; import { getCurrentProjects, getTenUnderProjects, sliceByPage } from '~/utils/pagination'; const FIRST_PAGE = 1; @@ -86,6 +87,10 @@ const mainCss = css` const sectionCss = css` width: 100vw; max-width: 960px; + padding: 30px; + ${mediaQuery('mobile')} { + padding: 20px; + } `; const projectContainerCss = css` @@ -94,4 +99,10 @@ const projectContainerCss = css` grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 12px; + ${mediaQuery('tablet')} { + grid-template-columns: repeat(2, 1fr); + } + ${mediaQuery('mobile')} { + grid-template-columns: repeat(1, 1fr); + } `; From 35e444c8651518555ec60991893fc2df38e28a9b Mon Sep 17 00:00:00 2001 From: 99-zziy Date: Sat, 23 Sep 2023 02:04:35 +0900 Subject: [PATCH 06/10] =?UTF-8?q?feat:=20=ED=8E=98=EC=9D=B4=EC=A7=80?= =?UTF-8?q?=EB=84=A4=EC=9D=B4=EC=85=98=20=EB=B0=98=EC=9D=91=ED=98=95=20?= =?UTF-8?q?=EC=9E=91=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Pagination/Pagination.tsx | 57 ++++++++++++++++++------ src/components/ProjectTab/ProjectTab.tsx | 5 +++ src/utils/pagination.ts | 6 +++ 3 files changed, 55 insertions(+), 13 deletions(-) diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx index f3b1dbcc..e4605cd4 100644 --- a/src/components/Pagination/Pagination.tsx +++ b/src/components/Pagination/Pagination.tsx @@ -1,6 +1,7 @@ import { useId } from 'react'; import { css } from '@emotion/react'; +import { mediaQuery } from '~/styles/media'; import { theme } from '~/styles/theme'; type PaginationProps = { @@ -11,20 +12,30 @@ type PaginationProps = { export function Pagination({ handlePageClick, numberOfPages, currentPage }: PaginationProps) { const id = useId(); + return ( -
    - {[...new Array(numberOfPages)].map((_, i) => { - return ( -
  • handlePageClick(i + 1)} - css={listItemCss(currentPage === i + 1)} - key={`page-${id}-${i + 1}`} - > - {i + 1} -
    • - ); - })} -
+ <> +
    + {[...new Array(numberOfPages)].map((_, i) => { + return ( +
  • handlePageClick(i + 1)} + css={listItemCss(currentPage === i + 1)} + key={`page-${id}-${i + 1}`} + > + {i + 1} +
    • + ); + })} +
+
+ {numberOfPages !== currentPage && ( + + )} +
+ ); } @@ -37,6 +48,26 @@ const listCss = css` &: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` diff --git a/src/components/ProjectTab/ProjectTab.tsx b/src/components/ProjectTab/ProjectTab.tsx index ca4a0387..71812154 100644 --- a/src/components/ProjectTab/ProjectTab.tsx +++ b/src/components/ProjectTab/ProjectTab.tsx @@ -2,6 +2,7 @@ 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 = { @@ -38,6 +39,10 @@ const tabContainerCss = css` const tabCss = css` ${theme.typos.pretendard.subTitle2}; padding: 16px 24px; + ${mediaQuery('mobile')} { + ${theme.typos.pretendard.body2}; + padding: 8px 16px; + } `; const activeTabCss = css` diff --git a/src/utils/pagination.ts b/src/utils/pagination.ts index bfc83fec..4da0e6e7 100644 --- a/src/utils/pagination.ts +++ b/src/utils/pagination.ts @@ -1,6 +1,12 @@ import { Project } from '~/constant/project'; +import { SIZE } from '~/styles/media'; export const sliceByPage = (projects: Project[], page: number) => { + if (typeof window !== 'undefined') { + if (window.innerWidth <= SIZE.tablet) { + return projects.slice(6 * (page - 1), 6 * page); + } + } return projects.slice(9 * (page - 1), 9 * page); }; From e4bc43c0db24587286d87bd1e04bfe59dbdffb63 Mon Sep 17 00:00:00 2001 From: 99-zziy Date: Sat, 23 Sep 2023 02:14:52 +0900 Subject: [PATCH 07/10] =?UTF-8?q?feat:=20sign=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EB=B0=98=EC=9D=91=ED=98=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Sign/Sign.tsx | 21 ++++++++++++++++++++- 1 file changed, 20 insertions(+), 1 deletion(-) diff --git a/src/components/Sign/Sign.tsx b/src/components/Sign/Sign.tsx index 2952dfd6..0dc1cbbc 100644 --- a/src/components/Sign/Sign.tsx +++ b/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,7 +14,15 @@ export function Sign() { return (
- sign +
+ sign +
); } @@ -20,4 +30,13 @@ export function Sign() { const imageContainerCss = css` display: flex; justify-content: center; + padding: 30px; + ${mediaQuery('mobile')} { + padding: 20px; + } +`; + +const imageWrapperCss = css` + width: 100vw; + max-width: 1024px; `; From 37eb58e7ebb259e50b1bab1eb4c74edacb2e5f14 Mon Sep 17 00:00:00 2001 From: 99-zziy Date: Sat, 23 Sep 2023 02:19:48 +0900 Subject: [PATCH 08/10] =?UTF-8?q?feat:=20margin-top=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/project.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/pages/project.tsx b/src/pages/project.tsx index ca5650bc..2de80406 100644 --- a/src/pages/project.tsx +++ b/src/pages/project.tsx @@ -82,6 +82,12 @@ const mainCss = css` flex-direction: column; margin-top: 100px; margin-bottom: 200px; + ${mediaQuery('tablet')} { + margin-top: 74px; + } + ${mediaQuery('mobile')} { + margin-top: 60px; + } `; const sectionCss = css` From 9a8f76f80f8ccd00fa1a77ec06c99e8e9c771af1 Mon Sep 17 00:00:00 2001 From: 99-zziy Date: Sat, 23 Sep 2023 20:39:36 +0900 Subject: [PATCH 09/10] =?UTF-8?q?feat:=20window=20size=20=EC=B2=B4?= =?UTF-8?q?=ED=82=B9=ED=95=98=EB=8A=94=20=EB=B0=A9=EB=B2=95=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/useCheckWindowSize.ts | 26 ++++++++++++++++++++++++++ src/pages/project.tsx | 4 +++- src/utils/pagination.ts | 10 ++++------ 3 files changed, 33 insertions(+), 7 deletions(-) create mode 100644 src/hooks/useCheckWindowSize.ts diff --git a/src/hooks/useCheckWindowSize.ts b/src/hooks/useCheckWindowSize.ts new file mode 100644 index 00000000..0be36173 --- /dev/null +++ b/src/hooks/useCheckWindowSize.ts @@ -0,0 +1,26 @@ +import { useEffect, useState } from 'react'; + +import { SIZE, SizeKey } from '~/styles/media'; + +type UseCheckWindowSizeProps = SizeKey; + +export const useCheckWindowSize = (size: UseCheckWindowSizeProps) => { + const [isTargetSize, setIsTargetSize] = useState(false); + + const checkWindowSize = () => { + setIsTargetSize(window.innerWidth <= SIZE[size]); + }; + + useEffect(() => { + checkWindowSize(); + window.addEventListener('resize', checkWindowSize); + return () => { + window.removeEventListener('resize', checkWindowSize); + }; + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + + return { + isTargetSize, + }; +}; diff --git a/src/pages/project.tsx b/src/pages/project.tsx index 2de80406..3460850f 100644 --- a/src/pages/project.tsx +++ b/src/pages/project.tsx @@ -9,6 +9,7 @@ import { Thumbnail } from '~/components/Thumbnail'; import { Link } from '~/components/Thumbnail/Thumbnail'; import { staggerHalf } from '~/constant/motion'; import { PROJECT_LIST } from '~/constant/project'; +import { useCheckWindowSize } from '~/hooks/useCheckWindowSize'; import { mediaQuery } from '~/styles/media'; import { getCurrentProjects, getTenUnderProjects, sliceByPage } from '~/utils/pagination'; @@ -20,6 +21,7 @@ export default function ProjectPage() { const [currentTab, setCurrentTab] = useState(ALL_TAB); const [selectedProjectList, setSelectedProjectList] = useState(PROJECT_LIST); const [currentPage, setCurrentPage] = useState(FIRST_PAGE); + const { isTargetSize: isTabletSize } = useCheckWindowSize('tablet'); useEffect(() => { setCurrentPage(1); @@ -53,7 +55,7 @@ export default function ProjectPage() { exit="exit" variants={staggerHalf} > - {sliceByPage(selectedProjectList, currentPage).map(project => ( + {sliceByPage(selectedProjectList, currentPage, isTabletSize).map(project => ( { - if (typeof window !== 'undefined') { - if (window.innerWidth <= SIZE.tablet) { - return projects.slice(6 * (page - 1), 6 * page); - } +export const sliceByPage = (projects: Project[], page: number, isTabletSize: boolean) => { + if (isTabletSize) { + return projects.slice(6 * (page - 1), 6 * page); } + return projects.slice(9 * (page - 1), 9 * page); }; From d9d5ff6a7de2c03c06740c02203da14d9c1abf91 Mon Sep 17 00:00:00 2001 From: 99-zziy Date: Sat, 23 Sep 2023 20:45:27 +0900 Subject: [PATCH 10/10] =?UTF-8?q?feat:=20=EB=A7=81=ED=81=AC=20=EC=83=88?= =?UTF-8?q?=EB=A1=9C=EC=9A=B4=20=ED=83=AD=EC=9C=BC=EB=A1=9C=20=EC=97=B4?= =?UTF-8?q?=EB=A6=AC=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Thumbnail/Thumbnail.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Thumbnail/Thumbnail.tsx b/src/components/Thumbnail/Thumbnail.tsx index 6ffba18c..148b7d5d 100644 --- a/src/components/Thumbnail/Thumbnail.tsx +++ b/src/components/Thumbnail/Thumbnail.tsx @@ -40,7 +40,7 @@ export function Thumbnail({ title, subTitle, img, description, links }: Thumbnai
{links.map(link => ( - + {link.type}