From b74e792f26c9d0851a7da2bcf382a2801ce737c5 Mon Sep 17 00:00:00 2001 From: Jiyoung Jung <72294509+Jungjjeong@users.noreply.github.com> Date: Mon, 25 Nov 2024 23:59:58 +0900 Subject: [PATCH 1/6] =?UTF-8?q?feat:=20main=20page=20project=20section=20?= =?UTF-8?q?=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 | 2 +- .../Main/sections/MainProjectSection.tsx | 200 +++++++++++++++++- src/utils/pagination.ts | 9 +- 3 files changed, 203 insertions(+), 8 deletions(-) diff --git a/src/components/Thumbnail/Thumbnail.tsx b/src/components/Thumbnail/Thumbnail.tsx index f0495fbd..5c85b78a 100644 --- a/src/components/Thumbnail/Thumbnail.tsx +++ b/src/components/Thumbnail/Thumbnail.tsx @@ -65,7 +65,7 @@ export function Thumbnail({ title, subTitle, img, description, links }: Thumbnai const articleCss = css` position: relative; - height: 208px; + height: 220px; max-width: 312px; overflow: hidden; border-radius: 12px; diff --git a/src/features/Main/sections/MainProjectSection.tsx b/src/features/Main/sections/MainProjectSection.tsx index 60215c7c..a6772fd3 100644 --- a/src/features/Main/sections/MainProjectSection.tsx +++ b/src/features/Main/sections/MainProjectSection.tsx @@ -1,6 +1,198 @@ -/** - * * Main 페이지 프로젝트 section - */ +import { useState } from 'react'; +import { useRouter } from 'next/router'; +import { css } from '@emotion/react'; +import { AnimatePresence, m } from 'framer-motion'; + +import { Icon } from '~/components/Icon/Icon'; +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 { theme } from '~/styles/theme'; +import { sliceByPage } from '~/utils/pagination'; + +const FIRST_PAGE = 1; + export const MainProjectSection = () => { - return
Project
; + const router = useRouter(); + const [currentPage, setCurrentPage] = useState(FIRST_PAGE); + const { isTargetSize: isTabletSize } = useCheckWindowSize('tablet'); + const { isTargetSize: isMobileSize } = useCheckWindowSize('mobile'); + + const isMaxCurrentPage = currentPage >= 3; + + const onClickMore = () => { + if (isMaxCurrentPage) { + router.push('/project'); + return; + } + + setCurrentPage(prev => prev + 1); + }; + + return ( +
+
+

프로젝트

+

+ 디프만 멤버 '디퍼(DEEPER)' 들의 + {isMobileSize &&
} + 다양한 프로젝트를 확인해보세요 +

+
+ + + + {sliceByPage(PROJECT_LIST, currentPage, isTabletSize, isMobileSize, 0).map(project => ( + + ))} + + + + +
+ ); +}; + +const sectionCss = (isMaxCurrentPage?: boolean) => css` + position: relative; + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + background-color: black; + padding: 140px 0; + gap: 68px; + + ${mediaQuery('tablet')} { + padding: 140px 64px; + } + + ${mediaQuery('mobile')} { + padding: 80px 24px 100px; + } + + ${!isMaxCurrentPage && + css` + &::after { + content: ''; + position: absolute; + bottom: 140px; + height: 220px; + width: 100%; + background: linear-gradient( + 180deg, + rgba(0, 0, 0, 0) 0%, + rgba(0, 0, 0, 0.4) 14%, + rgba(0, 0, 0, 0.71) 30.75%, + rgba(0, 0, 0, 0.88) 41%, + #000 50%, + #000 100% + ); + } + `} +`; + +const text = { + wrapperCss: css` + display: flex; + flex-direction: column; + gap: 24px; + color: white; + text-align: center; + `, + + headlineCss: css` + ${theme.typosV2.pretendard.bold44}; + line-height: 150%; + + ${mediaQuery('mobile')} { + ${theme.typosV2.pretendard.bold28}; + line-height: 150%; + } + `, + + descriptionCss: css` + ${theme.typosV2.pretendard.semibold20}; + line-height: 150%; + + ${mediaQuery('mobile')} { + ${theme.typosV2.pretendard.semibold18}; + line-height: 150%; + } + `, +}; + +const projectContainerCss = css` + width: 100%; + max-width: 960px; + margin-top: 36px; + display: grid; + 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); + } +`; + +const button = { + containerCss: (isMaxCurrentPage?: boolean) => css` + ${!isMaxCurrentPage && + css` + position: absolute; + bottom: 156px; + `} + + padding: 12px 36px; + border-radius: 100px; + background-color: white; + z-index: 10; + `, + + wrapperCss: css` + display: flex; + gap: 8px; + align-items: center; + color: black; + ${theme.typosV2.pretendard.semibold20}; + line-height: 150%; + + ${mediaQuery('mobile')} { + ${theme.typosV2.pretendard.semibold16}; + line-height: 150%; + } + `, + + iconCss: css` + width: 24px; + height: 24px; + background-color: white; + border-radius: 400px; + `, }; diff --git a/src/utils/pagination.ts b/src/utils/pagination.ts index fd74346f..4bfc3565 100644 --- a/src/utils/pagination.ts +++ b/src/utils/pagination.ts @@ -8,16 +8,19 @@ export const sliceByPage = ( projects: Project[], page: number, isTabletSize: boolean, - isMobileSize: boolean + isMobileSize: boolean, + startPage?: number ) => { + const initialPage = startPage !== undefined ? startPage : page - 1; + if (isMobileSize) { return projects.slice(0, MOBILE_PAGE_SIZE * page); } if (isTabletSize) { - return projects.slice(TABLET_PAGE_SIZE * (page - 1), TABLET_PAGE_SIZE * page); + return projects.slice(TABLET_PAGE_SIZE * initialPage, TABLET_PAGE_SIZE * page); } - return projects.slice(PC_PAGE_SIZE * (page - 1), PC_PAGE_SIZE * page); + return projects.slice(PC_PAGE_SIZE * initialPage, PC_PAGE_SIZE * page); }; export const getTenUnderProjects = (projects: Project[]) => From 87866723d9f12cda46120a41c8bef9ab7bd16121 Mon Sep 17 00:00:00 2001 From: Jiyoung Jung <72294509+Jungjjeong@users.noreply.github.com> Date: Tue, 26 Nov 2024 00:13:24 +0900 Subject: [PATCH 2/6] =?UTF-8?q?feat:=20project=20tab,=20thumbnail=20?= =?UTF-8?q?=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ProjectTab/ProjectTab.tsx | 1 - src/components/Thumbnail/Thumbnail.tsx | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/ProjectTab/ProjectTab.tsx b/src/components/ProjectTab/ProjectTab.tsx index e51a1f3e..9a17d28a 100644 --- a/src/components/ProjectTab/ProjectTab.tsx +++ b/src/components/ProjectTab/ProjectTab.tsx @@ -46,7 +46,6 @@ const tabCss = css` color: ${theme.colors.grey[300]}; ${mediaQuery('mobile')} { - ${theme.typosV2.pretendard.regular14}; padding: 16px 8px; } `; diff --git a/src/components/Thumbnail/Thumbnail.tsx b/src/components/Thumbnail/Thumbnail.tsx index 5c85b78a..a544fa51 100644 --- a/src/components/Thumbnail/Thumbnail.tsx +++ b/src/components/Thumbnail/Thumbnail.tsx @@ -80,7 +80,7 @@ const articleCss = css` cursor: pointer; } &:hover img { - filter: blur(5px) brightness(0.4); + filter: brightness(0.3); } `; From 5d8c9942b3f2b51057334199aabee6f39a182f4f Mon Sep 17 00:00:00 2001 From: Jiyoung Jung <72294509+Jungjjeong@users.noreply.github.com> Date: Tue, 26 Nov 2024 00:15:36 +0900 Subject: [PATCH 3/6] =?UTF-8?q?style:=20after=20=EA=B0=80=EC=83=81=20?= =?UTF-8?q?=EC=9A=94=EC=86=8C=20=EC=9C=84=EC=B9=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/features/Main/sections/MainProjectSection.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/features/Main/sections/MainProjectSection.tsx b/src/features/Main/sections/MainProjectSection.tsx index a6772fd3..39a2f0f1 100644 --- a/src/features/Main/sections/MainProjectSection.tsx +++ b/src/features/Main/sections/MainProjectSection.tsx @@ -99,6 +99,7 @@ const sectionCss = (isMaxCurrentPage?: boolean) => css` &::after { content: ''; position: absolute; + bottom: 140px; height: 220px; width: 100%; @@ -111,6 +112,10 @@ const sectionCss = (isMaxCurrentPage?: boolean) => css` #000 50%, #000 100% ); + + ${mediaQuery('mobile')} { + bottom: 100px; + } } `} `; From c38462e73a855dedf13f1295c6a2967e5a98e4ea Mon Sep 17 00:00:00 2001 From: Jiyoung Jung <72294509+Jungjjeong@users.noreply.github.com> Date: Tue, 26 Nov 2024 00:21:18 +0900 Subject: [PATCH 4/6] fix: hydration error --- src/features/Main/sections/index.ts | 1 + src/pages/index.tsx | 14 +++++++++++--- 2 files changed, 12 insertions(+), 3 deletions(-) diff --git a/src/features/Main/sections/index.ts b/src/features/Main/sections/index.ts index 4ce64617..2c333f3a 100644 --- a/src/features/Main/sections/index.ts +++ b/src/features/Main/sections/index.ts @@ -5,4 +5,5 @@ export * from './MainReasonSection'; export * from './MainRecruitSection'; export * from './MainResultSection'; export * from './MainScheduleSection'; +export * from './MainSubscribeSection'; export * from './MainSupportSection'; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 495b8195..64a22d3b 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,15 +1,23 @@ +import dynamic from 'next/dynamic'; + import { SEO } from '~/components/SEO'; import { MainBlogSection, MainIntroSection, - MainProjectSection, MainReasonSection, MainRecruitSection, MainResultSection, MainScheduleSection, + MainSubscribeSection, MainSupportSection, } from '~/features/Main/sections'; -import { MainSubscribeSection } from '~/features/Main/sections/MainSubscribeSection'; + +const DynamicMainProjectSection = dynamic( + () => import('~/features/Main/sections').then(({ MainProjectSection }) => MainProjectSection), + { + ssr: false, + } +); export default function Root() { return ( @@ -20,7 +28,7 @@ export default function Root() { - + From 18f378e51a5333e0bedb119faa9e21c20afe6fd5 Mon Sep 17 00:00:00 2001 From: Jiyoung Jung <72294509+Jungjjeong@users.noreply.github.com> Date: Tue, 26 Nov 2024 00:24:34 +0900 Subject: [PATCH 5/6] =?UTF-8?q?feat:=20project=20tab=20=EB=AA=A8=EB=B0=94?= =?UTF-8?q?=EC=9D=BC=20=EA=B0=80=EB=A1=9C=20=EC=8A=A4=ED=81=AC=EB=A1=A4=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ProjectTab/ProjectTab.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/components/ProjectTab/ProjectTab.tsx b/src/components/ProjectTab/ProjectTab.tsx index 9a17d28a..79262933 100644 --- a/src/components/ProjectTab/ProjectTab.tsx +++ b/src/components/ProjectTab/ProjectTab.tsx @@ -30,6 +30,12 @@ export function ProjectTab({ currentTab, setCurrentTab }: ProjectTabProps) { const tabWrapperCss = css` display: flex; + width: 100%; + overflow-x: scroll; + + &::-webkit-scrollbar { + display: none; + } `; const tabContainerCss = css` @@ -44,10 +50,6 @@ const tabCss = css` ${theme.typosV2.pretendard.semibold16}; padding: 16px 20px; color: ${theme.colors.grey[300]}; - - ${mediaQuery('mobile')} { - padding: 16px 8px; - } `; const activeTabCss = css` From 78a6027215a1e31aa2b2364a197f8e16027ccf37 Mon Sep 17 00:00:00 2001 From: Jiyoung Jung <72294509+Jungjjeong@users.noreply.github.com> Date: Tue, 26 Nov 2024 00:26:25 +0900 Subject: [PATCH 6/6] =?UTF-8?q?fix:=20=EC=8A=A4=ED=81=AC=EB=A1=A4=20?= =?UTF-8?q?=EB=AA=A8=EB=B0=94=EC=9D=BC=20=EB=B6=84=EA=B8=B0=EC=B2=98?= =?UTF-8?q?=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ProjectTab/ProjectTab.tsx | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/components/ProjectTab/ProjectTab.tsx b/src/components/ProjectTab/ProjectTab.tsx index 79262933..db17967e 100644 --- a/src/components/ProjectTab/ProjectTab.tsx +++ b/src/components/ProjectTab/ProjectTab.tsx @@ -30,11 +30,14 @@ export function ProjectTab({ currentTab, setCurrentTab }: ProjectTabProps) { const tabWrapperCss = css` display: flex; - width: 100%; - overflow-x: scroll; - &::-webkit-scrollbar { - display: none; + ${mediaQuery('mobile')} { + width: 100%; + overflow-x: scroll; + + &::-webkit-scrollbar { + display: none; + } } `;