[SP2] 프로젝트 탭 피드 디자인 변경

src/components/Layout/Layout.tsx

@@ -9,7 +9,7 @@ export function Layout({
   return <Main css={moreStyle}>{children}</Main>;
 }
 
-const Main = styled.div<{ moreStyle?: CSSProperties }>`
+const Main = styled.div<{ moreStyle?: SerializedStyles }>`
   display: flex;
   flex-direction: column;
 `;

src/lib/api/remote/project.ts

@@ -18,9 +18,9 @@ const getProjectDetail = async (projectId: number): Promise<GetProjectDetailResp
   const { data } = await client.get(`/projects/${projectId}`);
   const dataServiceType = data.serviceType;
 
-  const serviceTypes = Array.isArray(dataServiceType) ? dataServiceType : [dataServiceType];
+  const serviceType = Array.isArray(dataServiceType) ? dataServiceType : [dataServiceType];
 
-  return { project: { ...data, serviceTypes } };
+  return { project: { ...data, serviceType } };
 };
 
 const getProjectList = async (

src/lib/constants/project.ts

@@ -12,9 +12,6 @@ export const projectCategoryLabel: Record<ProjectCategoryType, string> = {
   [ProjectCategoryType.APPJAM]: '앱잼',
   [ProjectCategoryType.SOPKATHON]: '솝커톤',
   [ProjectCategoryType.SOPTERM]: '솝텀',
-  [ProjectCategoryType.STUDY]: '스터디',
-  [ProjectCategoryType.JOINTSEMINAR]: '합동 세미나',
-  [ProjectCategoryType.ETC]: '기타',
 };
 
 export const projectCategoryDescription: Record<ProjectCategoryType, string> = {
@@ -25,11 +22,6 @@ export const projectCategoryDescription: Record<ProjectCategoryType, string> = {
     '무박 2일간의 해커톤을 통해 아이디어를 빠르게 프로덕트로 만들어보는 프로젝트, SOPKATHON',
   [ProjectCategoryType.SOPTERM]:
     '4개월간의 장기 협업을 통해 한 개의 온전한 프로덕트를 만드는 프로젝트, SOPT-TERM',
-  [ProjectCategoryType.STUDY]:
-    '2개월간 지식 공유를 진행하며 아이디어를 시각화 하거나 프로덕트로 만들어보는 프로젝트, 스터디',
-  [ProjectCategoryType.JOINTSEMINAR]:
-    '기획, 디자인, 개발 파트가 배운 내용을 통해 간단한 아이디어를 시각화 해보는 프로젝트, 합동 세미나',
-  [ProjectCategoryType.ETC]: '',
 };
 
 export const activeProjectPlatformList: ProjectPlatformType[] = [

src/lib/types/project.ts

@@ -9,9 +9,6 @@ export enum ProjectCategoryType {
   APPJAM = 'APPJAM',
   SOPKATHON = 'SOPKATHON',
   SOPTERM = 'SOPTERM',
-  STUDY = 'STUDY',
-  JOINTSEMINAR = 'JOINTSEMINAR',
-  ETC = 'ETC',
 }
 
 export enum LinkType {
@@ -47,7 +44,7 @@ export interface ProjectType {
   thumbnailImage?: string;
   members: ProjectMemberType[];
   name: string;
-  serviceTypes: string[];
+  serviceType: string[];
   startAt: string;
   endAt: string;
   summary: string;

src/pages/project/[id]/index.tsx

@@ -31,7 +31,7 @@ function ProjectDetailPage({ project }: GetProjectDetailResponse) {
     name,
     summary,
     generation,
-    serviceTypes,
+    serviceType,
     startAt,
     endAt,
     isFounding,
@@ -87,7 +87,7 @@ function ProjectDetailPage({ project }: GetProjectDetailResponse) {
                         </span>
                         <span>{generation ? generation + '기' : '-'}</span>
                         <span>
-                          {serviceTypes
+                          {serviceType
                             .map((type: string) => (type === 'WEB' ? '웹' : '앱'))
                             .join(', ')}
                         </span>

src/views/ProjectPage/ProjectPage.tsx

@@ -9,7 +9,7 @@ import {
   projectPlatformLabel,
 } from '@src/lib/constants/project';
 import { ProjectCategoryType, ProjectPlatformType } from '@src/lib/types/project';
-import { ProjectList } from './components';
+import { ProjectList } from '@src/views/ProjectPage/components/project/ProjectList';
 import RecentProjectList from './components/RecentProjectList';
 import useFetch from './hooks/useFetch';
 import S from './styles';

src/views/ProjectPage/components/index.ts

@@ -1,3 +1,2 @@
 export * from './common/EmptyContent';
 export * from './common/OvalSpinner';
-export * from './project';

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

@@ -0,0 +1,50 @@
+import { track } from '@amplitude/analytics-browser';
+import { useIsMobile } from '@src/hooks/useDevice';
+import { ProjectType } from '@src/lib/types/project';
+import * as S from './style';
+
+export default function ProjectCard({ project }: { project: ProjectType }) {
+  const isMobile = useIsMobile('899px');
+
+  return (
+    <S.ProjectCard href={`/project/${project.id}`} onClick={() => track('click_project_detail')}>
+      {!isMobile && (
+        <S.ProjectThumbnail
+          src={project.thumbnailImage ?? project.logoImage}
+          alt="프로젝트 썸네일"
+          width={324}
+          height={192}
+          loading="lazy"
+          placeholder="blur"
+          blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mPU0zOtBwACNQES9P3nGQAAAABJRU5ErkJggg=="
+        />
+      )}
+      <S.ProjectContent>
+        <S.ProjectHeader>
+          {isMobile && (
+            <S.ProjectThumbnail
+              src={project.logoImage}
+              alt="프로젝트 로고"
+              width={40}
+              height={40}
+              loading="lazy"
+              placeholder="blur"
+              blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mPU0zOtBwACNQES9P3nGQAAAABJRU5ErkJggg=="
+            />
+          )}
+          <S.ProjectText>
+            <S.ProjectTitle>{project.name}</S.ProjectTitle>
+            {project.serviceType.map((type, index) => (
+              <S.ProjectType key={type}>
+                <span>{type}</span>
+                {project.serviceType.length - 1 !== index && <S.Divider>∙</S.Divider>}
+              </S.ProjectType>
+            ))}
+          </S.ProjectText>
+        </S.ProjectHeader>
+        <S.ProjectSummary>{project.summary}</S.ProjectSummary>
+      </S.ProjectContent>
+      {/* TODO: 서비스 이용 가능 및 창업 정보와 멤버 정보 추가 필요  */}
+    </S.ProjectCard>
+  );
+}