dump

src/features/about/activity/Card.tsx

@@ -14,8 +14,8 @@ const ActivityCardContainer: FunctionComponent<ActivityCardContainerProps> = ({
   list,
 }) => {
   return (
-    <article className="about-work-card">
-      <div className="logo year">
+    <article className="about-activity-card">
+      <div className="year">
         <div>{year}</div>
       </div>
       <div className="content">

src/features/about/work/Container.tsx

@@ -2,7 +2,7 @@ import { FunctionComponent, useState } from 'react';
 
 import WorkCardContainer from './card/Container';
 
-import { companyData } from '~data/company';
+import { companyData } from '~/about/work/data/company';
 
 type WorkContainerProps = {
   format: string;

src/features/about/work/card/Container.tsx

@@ -4,7 +4,7 @@ import { Company } from '../models';
 
 import LeftSide from './content/LeftSide';
 import ContentHeadline from './content/Headline';
-import CompanyContentProject from './content/Project';
+import CompanyContentProject from './content/Container';
 
 export type WorkCardContainerProps = Company & {
   toggleOpenAll: boolean;

src/features/about/work/card/content/Project.tsx → src/features/about/work/card/content/Container.tsx

@@ -1,33 +1,29 @@
-import { FunctionComponent, MouseEventHandler, useMemo, useState } from 'react';
+import { FunctionComponent, MouseEventHandler, useState } from 'react';
 
-import { Project, ProjectName } from '../../models';
+import { Project } from '../../models';
 
-import UVP from './description/UVP';
-import OAL from './description/OAL';
-import LdsCalendar from './description/LdsCalendar';
-import Place from './description/Place';
-import OAP from './description/OAP';
-import Bleet from './description/Bleet';
-import MyBiskit from './description/MyBiskit';
-import Blind from './description/Blind';
-import Stove from './description/Stove';
 import Tags from './Tags';
 import ProjectDate from './ProjectDate';
+import ProjectDetail from './ProjectDetail';
 
 import ExternalLink from '~/shared/components/ExternalLink';
 
 export type CompanyContentProjectProps = Project & {
   format?: string;
 };
 
-const CompanyContentProject: FunctionComponent<CompanyContentProjectProps> = ({
-  name,
-  url,
-  tags,
-  startDate,
-  endDate,
-  format = 'yyyy.MM',
-}) => {
+const CompanyContentProject: FunctionComponent<CompanyContentProjectProps> = (
+  props,
+) => {
+  const {
+    name,
+    url,
+    tags,
+    startDate,
+    endDate,
+    summary,
+    format = 'yyyy.MM',
+  } = props;
   const [open, setOpen] = useState(false);
 
   const handleDetailClick: MouseEventHandler<HTMLDivElement> = () => {
@@ -55,15 +51,7 @@ const CompanyContentProject: FunctionComponent<CompanyContentProjectProps> = ({
         <Tags tags={tags} />
       </div>
       <div className={`description ${openClassName}`}>
-        {name === ProjectName.OAL && <OAL />}
-        {name === ProjectName.LDS_CALENDAR && <LdsCalendar />}
-        {name === ProjectName.UVP && <UVP />}
-        {name === ProjectName.PLACE && <Place />}
-        {name === ProjectName.OAP && <OAP />}
-        {name === ProjectName.Bleet && <Bleet />}
-        {name === ProjectName.MyBiskit && <MyBiskit />}
-        {name === ProjectName.Blind && <Blind />}
-        {name === ProjectName.Stove && <Stove />}
+        <ProjectDetail {...props} />
       </div>
       {url && openClassName !== 'hide' && (
         <ExternalLink

src/features/about/work/card/content/LeftSide.tsx

@@ -1,4 +1,4 @@
-import { FunctionComponent } from 'react';
+import { FunctionComponent, memo } from 'react';
 
 import { WorkCardContainerProps } from '../Container';
 
@@ -14,31 +14,26 @@ type LeftSideProps = Pick<
   format?: string;
 };
 
-const LeftSide: FunctionComponent<LeftSideProps> = ({
-  href,
-  logoUrl,
-  alt,
-  workStartDate,
-  workEndDate,
-  format = 'yyyy.MM',
-}) => {
-  return (
-    <div className="left-side">
-      <a
-        className="hashtag"
-        rel="noopener noreferrer"
-        target="_blank"
-        href={href}
-      >
-        <img className="logo" src={logoUrl} alt={alt} />
-      </a>
-      <ProjectDate
-        startDate={workStartDate}
-        endDate={workEndDate}
-        format={format}
-      />
-    </div>
-  );
-};
+const LeftSide: FunctionComponent<LeftSideProps> = memo(
+  ({ href, logoUrl, alt, workStartDate, workEndDate, format = 'yyyy.MM' }) => {
+    return (
+      <div className="left-side">
+        <a
+          className="hashtag"
+          rel="noopener noreferrer"
+          target="_blank"
+          href={href}
+        >
+          <img className="logo loading" src={logoUrl} alt={alt} />
+        </a>
+        <ProjectDate
+          startDate={workStartDate}
+          endDate={workEndDate}
+          format={format}
+        />
+      </div>
+    );
+  },
+);
 
 export default LeftSide;

src/features/about/work/card/content/ProjectDate.tsx

@@ -1,6 +1,6 @@
 import { FunctionComponent, memo } from 'react';
 
-import { CompanyContentProjectProps } from './Project';
+import { CompanyContentProjectProps } from './Container';
 
 import DateFormatter from '~/shared/components/DateFormatter';
 

src/features/about/work/card/content/ProjectDetail.tsx

@@ -0,0 +1,29 @@
+import { FunctionComponent, memo } from 'react';
+
+import { Project } from '~/about/work/models';
+import DynamicImage from '~/shared/components/DynamicImage';
+
+type ProjectDetailProps = Project;
+
+const ProjectDetail: FunctionComponent<ProjectDetailProps> = memo(
+  ({ summary, body, img }) => {
+    return (
+      <>
+        {img && (
+          <DynamicImage
+            className="image"
+            width={img.width}
+            src={img.url}
+            alt={img.alt}
+          />
+        )}
+        <div className="text">
+          <p className="summary">{summary}</p>
+          <ul className="main">{body}</ul>
+        </div>
+      </>
+    );
+  },
+);
+
+export default ProjectDetail;