From 64a13dff0686db32fae0b317d21d79bebeb1b8fb Mon Sep 17 00:00:00 2001 From: Hyejun Lee Date: Mon, 13 Nov 2023 11:08:14 +0900 Subject: [PATCH 1/2] =?UTF-8?q?[SP2/hotfix]=20=ED=95=98=EC=9D=B4=EB=93=9C?= =?UTF-8?q?=EB=A0=88=EC=9D=B4=EC=85=98=20=EC=97=90=EB=9F=AC=20=ED=95=B4?= =?UTF-8?q?=EA=B2=B0=20(#277)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/Carousel/style.ts | 1 + .../RecentProjectList/Carousel/index.tsx | 12 ++- .../RecentProjectList/Item/style.ts | 9 +- .../RecentProjectListSkeletonUI/index.tsx | 13 +-- .../RecentProjectListSkeletonUI/style.ts | 87 ++++--------------- .../components/RecentProjectList/index.tsx | 25 +----- src/views/ProjectPage/styles.ts | 1 + 7 files changed, 42 insertions(+), 106 deletions(-) diff --git a/src/components/common/Carousel/style.ts b/src/components/common/Carousel/style.ts index 53965dba..bf4499ef 100644 --- a/src/components/common/Carousel/style.ts +++ b/src/components/common/Carousel/style.ts @@ -114,6 +114,7 @@ const DotWrapper = styled.div` display: flex; justify-content: center; gap: 12px; + width: 100%; `; const Dot = styled.div<{ selected: boolean }>` diff --git a/src/views/ProjectPage/components/RecentProjectList/Carousel/index.tsx b/src/views/ProjectPage/components/RecentProjectList/Carousel/index.tsx index a74978d8..c062a1eb 100644 --- a/src/views/ProjectPage/components/RecentProjectList/Carousel/index.tsx +++ b/src/views/ProjectPage/components/RecentProjectList/Carousel/index.tsx @@ -1,8 +1,14 @@ import Carousel from '@src/components/common/Carousel'; import { useDeviceType, useIsDesktop, useIsMobile } from '@src/hooks/useDevice'; +import { ProjectCategoryType, ProjectPlatformType, ProjectType } from '@src/lib/types/project'; import { CarouselArrowType, CarouselOverflowType } from '@src/lib/types/universal'; +import RecentProjectListItem from '@src/views/ProjectPage/components/RecentProjectList/Item'; +import { useGetProjectList } from '@src/views/ProjectPage/hooks/queries'; + +export default function RecentProjectListCarousel() { + const { data } = useGetProjectList(ProjectCategoryType.ALL, ProjectPlatformType.ALL); + const recentProjectList = data as ProjectType[]; -export default function RecentProjectListCarousel({ children }: { children: JSX.Element[] }) { const isDesktopSize = useIsDesktop('1280px'); const isMobileSize = useIsMobile('899px'); const deviceType = useDeviceType(); @@ -20,7 +26,9 @@ export default function RecentProjectListCarousel({ children }: { children: JSX. rightArrowType={arrowType} overflowType={overflowType} > - {children} + {recentProjectList.slice(0, 6).map((project) => ( + + ))} ); } diff --git a/src/views/ProjectPage/components/RecentProjectList/Item/style.ts b/src/views/ProjectPage/components/RecentProjectList/Item/style.ts index a43bf052..dce63a76 100644 --- a/src/views/ProjectPage/components/RecentProjectList/Item/style.ts +++ b/src/views/ProjectPage/components/RecentProjectList/Item/style.ts @@ -3,7 +3,7 @@ import { colors } from '@sopt-makers/colors'; import Image from 'next/image'; import { css } from '@emotion/react'; import icArrowStickRight from '@src/assets/icons/ic_arrow_stick_right.svg'; -import { textSingularLineEllipsis } from '@src/lib/styles/textEllipsis'; +import { textpluralLinesEllipsis } from '@src/lib/styles/textEllipsis'; const GridWrapper = styled.div` width: 544px; @@ -18,6 +18,7 @@ const GridWrapper = styled.div` /* 모바일 뷰 */ @media (max-width: 899px) { width: 320px; + height: 139px; grid-template-areas: 'img detail' 'footer footer'; @@ -55,6 +56,7 @@ const DetailFooterWrapper = styled.div` justify-content: space-between; flex: 1; align-items: flex-end; + height: 26px; `; const TextName = styled.div` @@ -72,7 +74,10 @@ const TextName = styled.div` `; const TextSummary = styled.div` - ${textSingularLineEllipsis} + display: -webkit-box; + ${textpluralLinesEllipsis(2)} + height: 39px; + color: ${colors.gray100}; max-width: 408px; font-size: 14px; diff --git a/src/views/ProjectPage/components/RecentProjectList/RecentProjectListSkeletonUI/index.tsx b/src/views/ProjectPage/components/RecentProjectList/RecentProjectListSkeletonUI/index.tsx index b58fc257..86f0d944 100644 --- a/src/views/ProjectPage/components/RecentProjectList/RecentProjectListSkeletonUI/index.tsx +++ b/src/views/ProjectPage/components/RecentProjectList/RecentProjectListSkeletonUI/index.tsx @@ -1,18 +1,12 @@ import * as S from './style'; -interface CarouselProps { - itemWidth: number; - stride: number; -} - -export default function RecentProjectListSkeletonUI({ itemWidth }: CarouselProps) { - const recentProjectListDummyArray = [1, 2, 3]; +export default function RecentProjectListSkeletonUI() { + const recentProjectListDummyArray = [1, 2]; return ( - - + {recentProjectListDummyArray.map((index) => ( @@ -29,7 +23,6 @@ export default function RecentProjectListSkeletonUI({ itemWidth }: CarouselProps ))} - {recentProjectListDummyArray.map((index) => ( diff --git a/src/views/ProjectPage/components/RecentProjectList/RecentProjectListSkeletonUI/style.ts b/src/views/ProjectPage/components/RecentProjectList/RecentProjectListSkeletonUI/style.ts index 494187d4..e2e9c1b1 100644 --- a/src/views/ProjectPage/components/RecentProjectList/RecentProjectListSkeletonUI/style.ts +++ b/src/views/ProjectPage/components/RecentProjectList/RecentProjectListSkeletonUI/style.ts @@ -1,77 +1,38 @@ import styled from '@emotion/styled'; import { colors } from '@sopt-makers/colors'; -import arrowRight from '@src/assets/icons/arrow_right_28x28.svg'; import { HideScrollbar } from '@src/lib/styles/scrollbar'; export const Wrapper = styled(HideScrollbar)` width: 100%; position: relative; `; - -export const RightArrow = styled.div` - position: absolute; - width: 40px; - height: 40px; - border-radius: 20px; - background-color: ${colors.gray600}; - color: white; - z-index: 2; - top: 50%; - transform: translateY(-50%); - cursor: pointer; - background-repeat: no-repeat; - background-position: center; - right: -50px; - background-image: url(${arrowRight}); -`; - -export const CarouselWrapper = styled.div<{ - itemWidth: number; - itemCount: number; -}>` - width: ${({ itemWidth, itemCount }) => itemWidth * itemCount}px; +export const CarouselWrapper = styled.div` + width: 1088px; display: grid; - grid-template-columns: ${({ itemWidth, itemCount }) => `repeat(${itemCount}, ${itemWidth}px)`}; + grid-template-columns: repeat(2, 544px); + gap: 24px; + @media (max-width: 899px) { + width: 654px; + grid-template-columns: repeat(2, 320px); + gap: 14px; + } `; - export const CarouselViewport = styled.div` width: 100%; `; - -export const Blur = styled.div` - z-index: 2; - position: absolute; - height: 100%; - width: calc(50vw - 50%); - top: 0; - background: linear-gradient( - to right, - transparent 10px, - ${colors.background} 50px, - ${colors.background} - ); -`; - -export const RightBlur = styled(Blur)` - right: calc(50% - 50vw); -`; - export const DotWrapper = styled.div` margin-top: 24px; display: flex; justify-content: center; gap: 12px; `; - export const Dot = styled.div` position: relative; width: 8px; height: 8px; background-color: ${colors.gray900}; - border-radius: 50%; cursor: pointer; - ::before { content: ''; position: absolute; @@ -82,21 +43,20 @@ export const Dot = styled.div` border-radius: 50%; } `; - export const GridWrapper = styled.div` - width: 568px; + width: 544px; height: 164px; display: grid; grid-template-areas: 'img detail' 'img footer'; grid-template-columns: 116px auto; column-gap: 16px; - background-color: ${colors.gray800}; + background-color: ${colors.gray900}; border-radius: 12px; padding: 24px; margin-right: 20px; /* 모바일 뷰 */ @media (max-width: 899px) { - width: 325px; + width: 320px; height: 122px; grid-template-areas: 'img detail' @@ -106,55 +66,46 @@ export const GridWrapper = styled.div` padding: 16px; } `; - export const MarginWrapper = styled.div` padding-right: 20px; `; - export const Title = styled.div` - border-radius: 10px; + border-radius: 6px; width: 100px; height: 36px; margin-bottom: 6px; - background-color: ${colors.gray900}; - + background-color: ${colors.gray700}; /* 모바일 뷰 */ @media (max-width: 899px) { height: 24px; } `; - export const Description = styled.div` - border-radius: 10px; + border-radius: 6px; width: 150px; height: 21px; - background-color: ${colors.gray900}; - + background-color: ${colors.gray700}; /* 모바일 뷰 */ @media (max-width: 899px) { height: 19.5px; } `; - export const DetailWrapper = styled.div` grid-area: detail; display: flex; flex-direction: column; flex: 1; `; - export const ThumbnailImage = styled.div` grid-area: img; border-radius: 10px; - background-color: ${colors.gray900}; - + background-color: ${colors.gray700}; /* 모바일 뷰 */ @media (max-width: 899px) { width: 48px; height: 48px; } `; - export const DetailFooterWrapper = styled.div` grid-area: footer; display: flex; @@ -162,14 +113,12 @@ export const DetailFooterWrapper = styled.div` flex: 1; align-items: flex-end; `; - export const Chip = styled.div` width: 40px; height: 28px; padding: 5px 8px; border-radius: 6px; - background-color: ${colors.gray900}; - + background-color: ${colors.gray700}; /* 모바일 뷰 */ @media (max-width: 899px) { height: 26px; diff --git a/src/views/ProjectPage/components/RecentProjectList/index.tsx b/src/views/ProjectPage/components/RecentProjectList/index.tsx index 1fc8b5ba..684e4c66 100644 --- a/src/views/ProjectPage/components/RecentProjectList/index.tsx +++ b/src/views/ProjectPage/components/RecentProjectList/index.tsx @@ -1,19 +1,9 @@ import { Suspense } from 'react'; -import { useIsDesktop, useIsMobile } from '@src/hooks/useDevice'; -import { ProjectCategoryType, ProjectPlatformType, ProjectType } from '@src/lib/types/project'; -import { useGetProjectList } from '@src/views/ProjectPage/hooks/queries'; import S from '../../styles'; import RecentProjectListCarousel from './Carousel'; -import RecentProjectListItem from './Item'; import RecentProjectListSkeletonUI from './RecentProjectListSkeletonUI'; export default function RecentProjectList() { - const { data } = useGetProjectList(ProjectCategoryType.ALL, ProjectPlatformType.ALL, 'updatedAt'); - const recentProjectList = data as ProjectType[]; - - const isDesktopSize = useIsDesktop('1920px'); - const isMobileSize = useIsMobile('899px'); - return ( <> 최근 출시한 프로젝트 @@ -23,19 +13,8 @@ export default function RecentProjectList() { 릴리즈 소식 알리기 - - } - > - - {recentProjectList.slice(0, 6).map((project) => ( - - ))} - + }> + ); diff --git a/src/views/ProjectPage/styles.ts b/src/views/ProjectPage/styles.ts index 7c59c4e4..a16b8d64 100644 --- a/src/views/ProjectPage/styles.ts +++ b/src/views/ProjectPage/styles.ts @@ -29,6 +29,7 @@ const Root = styled.div` margin: 0 auto; width: 100vw; overflow-x: hidden; + touch-action: pan-y; /* 모바일 뷰 */ @media (max-width: 899px) { From e6356abf6d090575e9e5279b51857f35eae5c788 Mon Sep 17 00:00:00 2001 From: wooyoung <62867581+f0rever0@users.noreply.github.com> Date: Mon, 13 Nov 2023 17:27:17 +0900 Subject: [PATCH 2/2] =?UTF-8?q?feat=20:=20=EB=B8=94=EB=A1=9C=EA=B7=B8=20?= =?UTF-8?q?=EB=AA=A8=EB=B0=94=EC=9D=BC=20=EB=93=9C=EB=A1=AD=EB=8B=A4?= =?UTF-8?q?=EC=9A=B4=20css=20=EC=B6=94=EA=B0=80=20(#278)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/BlogPage/components/BlogTab/style.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/views/BlogPage/components/BlogTab/style.ts b/src/views/BlogPage/components/BlogTab/style.ts index a5681ba8..47bdc95c 100644 --- a/src/views/BlogPage/components/BlogTab/style.ts +++ b/src/views/BlogPage/components/BlogTab/style.ts @@ -57,6 +57,8 @@ export const TabTitle = styled.article<{ isSelected: boolean }>` @media (max-width: 767px) { border-bottom: ${({ isSelected }) => isSelected && `1px solid ${colors.gray200}`}; margin-right: 12px; + font-size: 18px; + padding-bottom: 6px; } &:hover {