fix: 깃 컨플릭스 해결

sopt-makers · Jan 25, 2024 · 5330e0d · 5330e0d
2 parents 501a5a0 + 24cead1
commit 5330e0d
Show file tree

Hide file tree

Showing 9 changed files with 318 additions and 210 deletions.
diff --git a/package.json b/package.json
@@ -8,7 +8,7 @@
   "scripts": {
     "analyze": "cross-env ANALYZE=true next build",
     "build": "next build",
-    "build-storybook": "storybook build",
+    "build-storybook": "cross-env NODE_OPTIONS='--max-old-space-size=4096' storybook build",
     "check": "conc -s all \"yarn:lint\" \"yarn:typecheck\" \"yarn:stylelint\" \"yarn:test:ci\"",
     "dev": "next dev",
     "test": "jest --watch",

diff --git a/src/components/common/ContentsCard/index.tsx b/src/components/common/ContentsCard/index.tsx
@@ -1,18 +1,21 @@
 import styled from '@emotion/styled';
 import { colors } from '@sopt-makers/colors';
 import { fonts } from '@sopt-makers/fonts';
+import { ReactNode } from 'react';
+
+import ResizedImage from '@/components/common/ResizedImage';
 
 interface ContentsCardProps {
   thumbnail: string;
-  title: string;
-  top: string;
-  bottom: string;
+  title: ReactNode;
+  top: ReactNode;
+  bottom: ReactNode;
 }
 
 export default function ContentsCard({ thumbnail, title, top, bottom }: ContentsCardProps) {
   return (
     <Card>
-      <Thumbnail src={thumbnail} alt={`${title} 이미지`} />
+      <Thumbnail src={thumbnail} alt={`${title} 이미지`} height={84} />
       <Contents>
         <Description>{top}</Description>
         <Title>{title}</Title>
@@ -23,7 +26,7 @@ export default function ContentsCard({ thumbnail, title, top, bottom }: Contents
 }
 
 const Card = styled.article`
-  display: center;
+  display: flex;
   gap: 16px;
   align-items: center;
   border-radius: 20px;
@@ -33,15 +36,14 @@ const Card = styled.article`
   height: 116px;
 `;
 
-const Thumbnail = styled.img`
+const Thumbnail = styled(ResizedImage)`
   border-radius: 14px;
   width: 84px;
   height: 84px;
   object-fit: cover;
 `;
 
 const Description = styled.p`
-  max-width: 220px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -52,7 +54,6 @@ const Description = styled.p`
 `;
 
 const Title = styled.h1`
-  max-width: 227px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -66,4 +67,5 @@ const Contents = styled.div`
   display: flex;
   flex-direction: column;
   gap: 4px;
+  max-width: calc(100% - 132px);
 `;
diff --git a/src/components/intro/sections/CatchPhrase/icons.tsx b/src/components/intro/sections/CatchPhrase/icons.tsx
@@ -103,7 +103,7 @@ export function AndroidIcon(props: React.SVGProps<SVGSVGElement>) {
   );
 }
 
-export function Icon(props: React.SVGProps<SVGSVGElement>) {
+export function MakersIdentityImage(props: React.SVGProps<SVGSVGElement>) {
   return (
     <svg width={541} height={447} viewBox='0 0 541 447' fill='none' xmlns='http://www.w3.org/2000/svg' {...props}>
       <mask

diff --git a/src/components/intro/sections/CatchPhrase/index.tsx b/src/components/intro/sections/CatchPhrase/index.tsx
@@ -8,8 +8,8 @@ import {
   AndroidIcon,
   AppleIcon,
   ArrowIcon,
-  Icon,
   MakersIcon,
+  MakersIdentityImage,
   PlaygroundIcon,
   SOPTIcon,
 } from '@/components/intro/sections/CatchPhrase/icons';
@@ -99,7 +99,7 @@ const BackgroundLayer = styled.div`
   overflow: hidden;
 `;
 
-const StyledBackImage = styled(Icon)`
+const StyledBackImage = styled(MakersIdentityImage)`
   position: absolute;
   top: 0;
   right: 0;

diff --git a/src/components/members/detail/MemberMeetingCard.tsx b/src/components/members/detail/MemberMeetingCard.tsx
@@ -0,0 +1,3 @@
+export default function MemberMeetingCard() {
+  return <div>MemberGroupCard</div>;
+}
diff --git a/src/components/projects/main/ProjectList.tsx b/src/components/projects/main/ProjectList.tsx
@@ -4,46 +4,44 @@ import { ImpressionArea } from '@toss/impression-area';
 import { uniqBy as _uniqBy } from 'lodash-es';
 import Link from 'next/link';
 
-import Responsive from '@/components/common/Responsive';
 import Text from '@/components/common/Text';
 import useEventLogger from '@/components/eventLogger/hooks/useEventLogger';
 import ProjectCard from '@/components/projects/main/ProjectCard';
 import useGetProjectListQuery from '@/components/projects/upload/hooks/useGetProjectListQuery';
 import { playgroundLink } from '@/constants/links';
 import IconPen from '@/public/icons/icon-pen.svg';
-import IconPlusWhite from '@/public/icons/icon-plus-black.svg';
 import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery';
 import { textStyles } from '@/styles/typography';
+import ProjectSearch from '@/components/projects/main/ProjectSearch';
+import { StringParam, useQueryParam, withDefault } from 'use-query-params';
+import { useDebounce } from '@toss/react';
+import { fonts } from '@sopt-makers/fonts';
+import { useState } from 'react';
 
 const ProjectList = () => {
+  const [query, setQuery] = useQueryParam('name', withDefault(StringParam, undefined));
+  const [value, setValue] = useState(query);
+  const debouncedChangeName = useDebounce(setQuery, 300);
   const { data, isLoading, fetchNextPage } = useGetProjectListQuery({
     limit: 20,
+    name: query,
   });
   const { logClickEvent } = useEventLogger();
 
   return (
     <StyledContainer>
       <StyledContent>
-        <TopWrapper>
-          <Title as='h1' typography='SUIT_32_B'>
-            ✨ 솝트에서 진행된 프로젝트 둘러보기
-          </Title>
-          <Responsive only='desktop'>
-            <ProjectUploadButton
-              href={playgroundLink.projectUpload()}
-              onClick={() =>
-                logClickEvent('projectUpload', {
-                  referral: 'projectPage',
-                })
-              }
-            >
-              <IconPlusWhite />
-              <Text typography='SUIT_18_B'>내 프로젝트 올리기</Text>
-            </ProjectUploadButton>
-          </Responsive>
-        </TopWrapper>
+        <ProjectSearch
+          value={value ?? query}
+          onValueChange={(value) => {
+            setValue(value);
+            debouncedChangeName(value);
+          }}
+          placeholder='프로젝트 검색'
+        />
+
         <LengthWrapper>
-          {data?.pages && <StyledLength typography='SUIT_18_M'>{data.pages[0].totalCount}개의 프로젝트</StyledLength>}
+          {data?.pages && <StyledLength typography='SUIT_18_M'>전체 {data.pages[0].totalCount}개</StyledLength>}
           <ProjectMobileUploadButton
             onClick={() =>
               logClickEvent('projectUpload', {
@@ -66,6 +64,10 @@ const ProjectList = () => {
           </StyledGridContainer>
         )}
       </StyledContent>
+      <ProjectUploadButton href={playgroundLink.projectUpload()}>
+        <PlusIcon />
+        프로젝트 올리기
+      </ProjectUploadButton>
     </StyledContainer>
   );
 };
@@ -92,21 +94,6 @@ const StyledContent = styled.div`
   }
 `;
 
-const Title = styled(Text)`
-  ${textStyles.SUIT_32_B};
-
-  @media ${MOBILE_MEDIA_QUERY} {
-    margin: 0 6px;
-    ${textStyles.SUIT_20_B};
-  }
-`;
-
-const TopWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-`;
-
 const ProjectMobileUploadButton = styled(Link)`
   display: none;
   @media ${MOBILE_MEDIA_QUERY} {
@@ -118,34 +105,54 @@ const ProjectMobileUploadButton = styled(Link)`
 
 const ProjectUploadButton = styled(Link)`
   display: flex;
-  gap: 12px;
+  position: fixed;
+  right: 60px;
+  bottom: 80px;
+  gap: 8px;
   align-items: center;
-  border-radius: 10px;
+  border-radius: 18px;
   background-color: ${colors.gray10};
-  padding: 18px 24px 18px 20px;
+  padding: 14px 30px 14px 27px;
   color: ${colors.gray950};
+  ${fonts.TITLE_20_SB};
 
   &:hover {
     background-color: ${colors.gray50};
   }
+
+  @media ${MOBILE_MEDIA_QUERY} {
+    right: 16px;
+    bottom: 16px;
+    padding: 12px;
+    ${fonts.LABEL_16_SB}
+  }
 `;
 
+const PlusIcon = () => (
+  <svg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'>
+    <path
+      d='M10.9208 2.58751C10.9208 2.07966 10.5091 1.66797 10.0013 1.66797C9.49345 1.66797 9.08176 2.07966 9.08176 2.58751V9.08176H2.58751C2.07966 9.08176 1.66797 9.49345 1.66797 10.0013C1.66797 10.5091 2.07966 10.9208 2.58751 10.9208H9.08176V17.4151C9.08176 17.9229 9.49345 18.3346 10.0013 18.3346C10.5091 18.3346 10.9208 17.9229 10.9208 17.4151V10.9208H17.4151C17.9229 10.9208 18.3346 10.5091 18.3346 10.0013C18.3346 9.49345 17.9229 9.08176 17.4151 9.08176H10.9208V2.58751Z'
+      fill='#0F0F12'
+    />
+  </svg>
+);
+
 const LengthWrapper = styled.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-top: 48px;
+  margin-top: 20px;
 
   @media ${MOBILE_MEDIA_QUERY} {
     margin: 30px 6px 0;
   }
 `;
 
 const StyledLength = styled(Text)`
-  ${textStyles.SUIT_18_M};
+  ${fonts.BODY_16_M};
 
   @media ${MOBILE_MEDIA_QUERY} {
-    ${textStyles.SUIT_16_M};
+    ${fonts.BODY_14_M};
   }
 `;
 

diff --git a/src/components/projects/main/ProjectSearch.tsx b/src/components/projects/main/ProjectSearch.tsx
@@ -0,0 +1,70 @@
+import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery';
+
+import styled from '@emotion/styled';
+import { colors } from '@sopt-makers/colors';
+import { fonts } from '@sopt-makers/fonts';
+import { Flex, width100 } from '@toss/emotion-utils';
+
+interface ProjectSearchProps {
+  defaultValue?: string;
+  value?: string;
+  onValueChange?: (value: string) => void;
+  placeholder?: string;
+}
+
+const ProjectSearch = ({ value, defaultValue, onValueChange, placeholder }: ProjectSearchProps) => {
+  return (
+    <Container align='center' justify='space-between'>
+      <Input
+        placeholder={placeholder}
+        defaultValue={defaultValue}
+        value={value}
+        onChange={(e) => onValueChange?.(e.target.value)}
+      />
+      <Icon />
+    </Container>
+  );
+};
+
+export default ProjectSearch;
+
+const Container = styled(Flex)`
+  gap: 8px;
+  border-radius: 8px;
+  background-color: ${colors.gray800};
+  padding: 16px 14px;
+
+  ${width100}
+
+  @media ${MOBILE_MEDIA_QUERY} {
+    border-radius: 6px;
+    padding: 9px 18px;
+    ${fonts.BODY_14_M};
+  }
+`;
+
+const Input = styled.input`
+  color: ${colors.gray200};
+  ${width100};
+  ${fonts.BODY_16_M};
+
+  ::placeholder {
+    ${colors.gray200};
+  }
+`;
+
+const Icon = () => (
+  <svg width='23' height='23' viewBox='0 0 23 23' fill='none' xmlns='http://www.w3.org/2000/svg'>
+    <circle
+      cx='9'
+      cy='9'
+      r='7.75'
+      transform='matrix(-1 0 0 1 18 0.5)'
+      stroke='#808087'
+      stroke-width='2.5'
+      stroke-linecap='round'
+      stroke-linejoin='round'
+    />
+    <path d='M21 21.5L15 15.5' stroke='#808087' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' />
+  </svg>
+);