Merge branch 'develop' into feat/#274-project-design-qa

sopt-makers · Nov 14, 2023 · 34d98d8 · 34d98d8
2 parents 9586c3f + e6356ab
commit 34d98d8
Show file tree

Hide file tree

Showing 8 changed files with 44 additions and 106 deletions.
diff --git a/src/components/common/Carousel/style.ts b/src/components/common/Carousel/style.ts
@@ -124,6 +124,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/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 {

diff --git a/src/views/ProjectPage/components/RecentProjectList/Carousel/index.tsx b/src/views/ProjectPage/components/RecentProjectList/Carousel/index.tsx
@@ -1,7 +1,13 @@
 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 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();
@@ -15,7 +21,9 @@ export default function RecentProjectListCarousel({ children }: { children: JSX.
       gapWidth={isMobileSize ? 14 : 24}
       isDesktop={isDesktop}
     >
-      {children}
+      {recentProjectList.slice(0, 6).map((project) => (
+        <RecentProjectListItem key={project.id} {...project} />
+      ))}
     </Carousel>
   );
 }
diff --git 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
@@ -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 (
     <S.Wrapper>
-      <S.RightBlur />
       <S.CarouselViewport>
-        <S.CarouselWrapper itemWidth={itemWidth} itemCount={3}>
+        <S.CarouselWrapper>
           {recentProjectListDummyArray.map((index) => (
             <S.MarginWrapper key={index}>
               <S.GridWrapper>
@@ -29,7 +23,6 @@ export default function RecentProjectListSkeletonUI({ itemWidth }: CarouselProps
           ))}
         </S.CarouselWrapper>
       </S.CarouselViewport>
-      <S.RightArrow />
       <S.DotWrapper>
         {recentProjectListDummyArray.map((index) => (
           <S.Dot key={index} />

diff --git 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,70 +66,59 @@ 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;
   justify-content: space-between;
   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
@@ -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 (
     <>
       <S.SectionTitle>최근 출시한 프로젝트</S.SectionTitle>
@@ -23,19 +13,8 @@ export default function RecentProjectList() {
           릴리즈 소식 알리기
         </S.PlaygroundLink>
       </S.PlaygroundLinkWrapper>
-      <Suspense
-        fallback={
-          <RecentProjectListSkeletonUI
-            stride={isDesktopSize ? 2 : 1}
-            itemWidth={isMobileSize ? 345 : 588}
-          />
-        }
-      >
-        <RecentProjectListCarousel>
-          {recentProjectList.slice(0, 6).map((project) => (
-            <RecentProjectListItem key={project.id} {...project} />
-          ))}
-        </RecentProjectListCarousel>
+      <Suspense fallback={<RecentProjectListSkeletonUI />}>
+        <RecentProjectListCarousel />
       </Suspense>
     </>
   );

diff --git 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) {