style: 프로젝트 페이지 스타일 수정

sopt-makers · Oct 31, 2023 · fbfe763 · fbfe763
1 parent f30231e
commit fbfe763
Show file tree

Hide file tree

Showing 7 changed files with 58 additions and 11 deletions.
diff --git a/src/components/common/Carousel/style.ts b/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;

diff --git a/src/components/common/Select/index.tsx b/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>

diff --git a/src/components/common/Select/style.ts b/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;

diff --git a/src/views/ProjectPage/components/RecentProjectList/Carousel/index.tsx b/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}

diff --git a/src/views/ProjectPage/components/RecentProjectList/Item/style.ts b/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;
   }
 `;
 

diff --git a/src/views/ProjectPage/components/RecentProjectList/index.tsx b/src/views/ProjectPage/components/RecentProjectList/index.tsx
@@ -1,10 +1,12 @@
+import { useIsMobile } from '@src/hooks/useDevice';
 import { ProjectCategoryType, ProjectPlatformType } from '@src/lib/types/project';
 import useFetch from '../../hooks/useFetch';
 import S from '../../styles';
 import RecentProjectListCarousel from './Carousel';
 import RecentProjectListItem from './Item';
 
 export default function RecentProjectList() {
+  const isMobile = useIsMobile();
   const state = useFetch(ProjectCategoryType.ALL, ProjectPlatformType.ALL, 'updatedAt');
 
   if (state._TAG !== 'OK') return null;
@@ -14,6 +16,14 @@ export default function RecentProjectList() {
   return (
     <>
       <S.SectionTitle>최근 출시한 프로젝트</S.SectionTitle>
+      {!isMobile && (
+        <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} />

diff --git a/src/views/ProjectPage/styles.ts b/src/views/ProjectPage/styles.ts
@@ -61,5 +61,41 @@ const FilterWrapper = styled.div`
   }
 `;
 
-const S = { SectionTitle, Root, ContentWrapper, Spacing, FilterWrapper };
+const PlaygroundLinkWrapper = styled.div`
+  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;