[SP2] 프로젝트 페이지 디테일한 디자인 수정 2

src/components/common/Carousel/style.ts

@@ -19,7 +19,7 @@ const Arrow = styled.div<{ type: CarouselArrowType }>`
   background-color: ${colors.gray600};
   color: white;
   z-index: 2;
-  top: 50%;
+  top: calc(50% - 16px);
   transform: translateY(-50%);
   cursor: pointer;
   background-repeat: no-repeat;

src/components/common/Select/index.tsx

@@ -41,7 +41,7 @@ export default function Select<T extends LabelKeyType>({
         onClick={toggleSelect}
         isSelectionExist={selectedValue !== baseValue}
         isOpened={isOpen}
-        selectedValue={selectedValue}
+        isWide={labels[selectedValue].length >= 5}
       >
         {selectedValue === baseValue ? baseLabel : labels[selectedValue]}
       </S.SelectTrigger>

src/components/common/Select/style.ts

@@ -1,7 +1,6 @@
 import styled from '@emotion/styled';
 import { colors } from '@sopt-makers/colors';
 import arrowDown from '@src/assets/icons/arrow_down.svg';
-import { LabelKeyType } from '@src/lib/types/universal';
 
 const SelectWrapper = styled.div`
   position: relative;
@@ -10,11 +9,11 @@ const SelectWrapper = styled.div`
 const SelectTrigger = styled.button<{
   isSelectionExist: boolean;
   isOpened: boolean;
-  selectedValue: LabelKeyType;
+  isWide: boolean;
 }>`
   cursor: pointer;
   position: relative;
-  width: ${({ selectedValue }) => (selectedValue === 'ANDROID' ? '132px' : '110px')};
+  width: ${({ isWide }) => (isWide ? '132px' : '110px')};
   font-size: 16px;
   font-weight: 500;
   padding: 9px ${({ isSelectionExist }) => (isSelectionExist ? '16px' : '22px')};
@@ -40,7 +39,7 @@ const SelectTrigger = styled.button<{
   }
   @media (max-width: 899px) {
     padding: 8px 12px;
-    border-radius: 16px;
+    border-radius: 99px;
     font-size: 13px;
     line-height: 150%;
     letter-spacing: -0.13px;

src/views/ProjectPage/ProjectPage.tsx

@@ -2,6 +2,7 @@ import { css } from '@emotion/react';
 import { useState } from 'react';
 import PageLayout from '@src/components/common/PageLayout';
 import Select from '@src/components/common/Select';
+import { useIsMobile } from '@src/hooks/useDevice';
 import {
   activeProjectCategoryList,
   activeProjectPlatformList,
@@ -19,6 +20,7 @@ function Projects() {
   const [selectedPlatform, setPlatform] = useState<ProjectPlatformType>(ProjectPlatformType.ALL);
 
   const state = useFetch(selectedCategory, selectedPlatform);
+  const isMobile = useIsMobile('899px');
 
   return (
     <PageLayout
@@ -31,7 +33,7 @@ function Projects() {
         <S.ContentWrapper>
           <RecentProjectList />
           <S.Spacing />
-          <S.SectionTitle>SOPT에서 진행된 프로젝트 둘러보기</S.SectionTitle>
+          <S.SectionTitle>SOPT{!isMobile && '에서 진행된'} 프로젝트 둘러보기</S.SectionTitle>
           <S.FilterWrapper>
             <Select
               options={activeProjectCategoryList}

src/views/ProjectPage/components/RecentProjectList/Carousel/index.tsx

@@ -3,7 +3,7 @@ import { useDeviceType, useIsDesktop, useIsMobile } from '@src/hooks/useDevice';
 import { CarouselArrowType, CarouselOverflowType } from '@src/lib/types/universal';
 
 export default function RecentProjectListCarousel({ children }: { children: JSX.Element[] }) {
-  const isDesktopSize = useIsDesktop('1920px');
+  const isDesktopSize = useIsDesktop('1280px');
   const isMobileSize = useIsMobile('899px');
   const deviceType = useDeviceType();
 
@@ -14,7 +14,7 @@ export default function RecentProjectListCarousel({ children }: { children: JSX.
   return (
     <Carousel
       stride={isDesktopSize ? 2 : 1}
-      itemWidth={isMobileSize ? 345 : 588}
+      itemWidth={isMobileSize ? 345 : 544}
       leftArrowType={arrowType}
       rightArrowType={arrowType}
       overflowType={overflowType}

src/views/ProjectPage/components/RecentProjectList/Item/style.ts

@@ -6,12 +6,12 @@ import icArrowStickRight from '@src/assets/icons/ic_arrow_stick_right.svg';
 import { textSingularLineEllipsis } from '@src/lib/styles/textEllipsis';
 
 const GridWrapper = styled.div`
-  width: 568px;
+  width: 524px;
   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;
@@ -21,6 +21,8 @@ const GridWrapper = styled.div`
     grid-template-areas: 'img detail' 'footer footer';
     grid-template-columns: 48px auto;
     column-gap: 10px;
+    row-gap: 16px;
+    padding: 16px;
   }
 `;
 

src/views/ProjectPage/components/RecentProjectList/index.tsx

@@ -14,6 +14,12 @@ export default function RecentProjectList() {
   return (
     <>
       <S.SectionTitle>최근 출시한 프로젝트</S.SectionTitle>
+      <S.PlaygroundLinkWrapper>
+        <span>SOPT에서 출시한 프로젝트가 있으신가요?</span>
+        <S.PlaygroundLink href="https://playground.sopt.org" target="_blank">
+          릴리즈 소식 알리기
+        </S.PlaygroundLink>
+      </S.PlaygroundLinkWrapper>
       <RecentProjectListCarousel>
         {state.data.slice(0, 6).map((d) => (
           <RecentProjectListItem key={d.id} {...d} />

src/views/ProjectPage/components/project/ProjectCard/index.tsx

@@ -1,10 +1,10 @@
 import { track } from '@amplitude/analytics-browser';
-import { useIsMobile } from '@src/hooks/useDevice';
+import { useMediaQuery } from 'react-responsive';
 import { ProjectType } from '@src/lib/types/project';
 import * as S from './style';
 
 export default function ProjectCard({ project }: { project: ProjectType }) {
-  const isMobile = useIsMobile('899px');
+  const isMobile = useMediaQuery({ query: '(max-width: 899px)' });
 
   return (
     <S.ProjectCard href={`/project/${project.id}`} onClick={() => track('click_project_detail')}>

src/views/ProjectPage/styles.ts

@@ -23,6 +23,8 @@ const Root = styled.div`
   align-items: center;
   min-height: 100vh;
   margin: 0 auto;
+  width: 100vw;
+  overflow-x: hidden;
 `;
 
 const ContentWrapper = styled.div`
@@ -61,5 +63,44 @@ const FilterWrapper = styled.div`
   }
 `;
 
-const S = { SectionTitle, Root, ContentWrapper, Spacing, FilterWrapper };
+const PlaygroundLinkWrapper = styled.div`
+  @media (max-width: 899px) {
+    display: none;
+  }
+  color: ${colors.gray400};
+  /* Body/2_Medium_16 */
+  font-family: SUIT;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 165%; /* 26.4px */
+  letter-spacing: -0.24px;
+  margin-top: -44px;
+  margin-bottom: 28px;
+  display: flex;
+  gap: 4px;
+`;
+
+const PlaygroundLink = styled.a`
+  position: relative;
+  &::after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 1px;
+    background-color: ${colors.gray400};
+    left: 0;
+    bottom: 4px;
+  }
+`;
+
+const S = {
+  SectionTitle,
+  Root,
+  ContentWrapper,
+  Spacing,
+  FilterWrapper,
+  PlaygroundLinkWrapper,
+  PlaygroundLink,
+};
 export default S;