refactor(about): Change work content theme

1ilsang · Mar 27, 2024 · 4c6c26d · 4c6c26d
1 parent 30e1229
commit 4c6c26d
Show file tree

Hide file tree

Showing 22 changed files with 232 additions and 222 deletions.
diff --git a/_data/company.ts b/_data/company.ts
@@ -1,12 +1,23 @@
-import { Company, CompanyName, ProjectName } from '~/about/work/models';
+import {
+  Company,
+  CompanyName,
+  JobPosition,
+  ProjectName,
+} from '~/about/work/models';
 
 const LINE: Company = {
   company: CompanyName.LINE,
   companyHref: 'https://www.linkedin.com/company/line-messenger/',
   companyLogoUrl:
-    'https://github.com/1ilsang/dev/assets/23524849/815bfc87-2cec-43b1-b8c3-edb9db91b3b9',
+    'https://github.com/1ilsang/dev/assets/23524849/81800e67-b54f-41e8-a232-520c99f465c8',
+  position: JobPosition.FE,
   workStartDate: 1596985200000,
   projectList: [
+    {
+      name: ProjectName.LPC,
+      tags: ['Vite', 'pnpm', 'React-Query'],
+      startDate: 1709218800000,
+    },
     {
       name: ProjectName.UVP,
       tags: [
@@ -19,6 +30,14 @@ const LINE: Company = {
         'Webpack',
       ],
       startDate: 1604156400000,
+      endDate: 1709218800000,
+    },
+    {
+      name: ProjectName.VLC,
+      tags: ['React18', 'React-Testing-Library', 'React-Query', 'WebSocket'],
+      url: 'https://oa-live.line.biz/',
+      startDate: 1686495600000,
+      endDate: 1709218800000,
     },
     {
       name: ProjectName.OAL,
@@ -32,19 +51,15 @@ const LINE: Company = {
       ],
       url: 'https://oa-live.line.biz/',
       startDate: 1659279600000,
+      endDate: 1709218800000,
     },
-    {
-      name: ProjectName.VLC,
-      tags: ['React18', 'React-Testing-Library', 'React-Query'],
-      url: 'https://oa-live.line.biz/',
-      startDate: 1686495600000,
-    },
+
     {
       name: ProjectName.LDS_CALENDAR,
-      tags: ['React18', 'vite'],
+      tags: ['React18', 'Vite'],
       startDate: 1680274800000,
+      endDate: 1688137200000,
     },
-
     {
       name: ProjectName.PLACE,
       tags: ['Next12', 'Redux', 'Redux-Saga', 'Swiper'],
@@ -67,7 +82,7 @@ const BLIND: Company = {
   companyHref: 'https://www.linkedin.com/company/teamblind/',
   companyLogoUrl:
     'https://github.com/1ilsang/dev/assets/23524849/abdc15c8-571c-430c-a3c3-f2473aedd201',
-  position: 'Node.js Server Developer',
+  position: JobPosition.FULL_STACK,
   workStartDate: 1564930800000,
   workEndDate: 1596726000000,
   projectList: [
@@ -101,7 +116,7 @@ const SmileGate: Company = {
     'https://github.com/1ilsang/dev/assets/23524849/932fade0-e7bf-4fdc-b7a8-c346fedbb76d',
   workStartDate: 1520780400000,
   workEndDate: 1525791600000,
-  position: 'Frontend Developer(intern)',
+  position: `${JobPosition.FE}(intern)`,
   projectList: [
     {
       name: ProjectName.Stove,

diff --git a/src/features/about/education/Container.tsx b/src/features/about/education/Container.tsx
@@ -1,6 +1,6 @@
 import { FunctionComponent } from 'react';
 
-import Logo from '../work/card/content/Logo';
+import LeftSide from '../work/card/content/LeftSide';
 import ContentHeadline from '../work/card/content/Headline';
 
 import { Catholic } from '~data/education';
@@ -16,20 +16,16 @@ const EducationContainer: FunctionComponent<EducationContainerProps> = ({
     <section className="about-education">
       <div className="label">EDUCATION</div>
       <div className="about-work-card">
-        <Logo
+        <LeftSide
           href={Catholic.url}
           logoUrl={Catholic.logoUrl}
           alt={Catholic.name}
-          border={false}
+          workStartDate={Catholic.startDate}
+          workEndDate={Catholic.endDate}
+          format={format}
         />
         <div className="content">
-          <ContentHeadline
-            hover={false}
-            name={Catholic.name}
-            workStartDate={Catholic.startDate}
-            workEndDate={Catholic.endDate}
-            format={format}
-          />
+          <ContentHeadline hover={false} name={Catholic.name} />
           <div className="education-position">{Catholic.major}</div>
         </div>
       </div>

diff --git a/src/features/about/work/card/Container.tsx b/src/features/about/work/card/Container.tsx
@@ -2,7 +2,7 @@ import { FunctionComponent, useEffect, useState } from 'react';
 
 import { Company } from '../models';
 
-import Logo from './content/Logo';
+import LeftSide from './content/LeftSide';
 import ContentHeadline from './content/Headline';
 import CompanyContentProject from './content/Project';
 
@@ -20,11 +20,10 @@ const WorkCardContainer: FunctionComponent<WorkCardContainerProps> = (
     companyHref,
     companyLogoUrl,
     company,
-    format,
     position = 'Software Engineer',
   } = props;
 
-  const [open, setOpen] = useState(true);
+  const [open, setOpen] = useState(false);
   const handleHeadlineClick = () => setOpen(!open);
 
   const [hydrated, setHydrated] = useState(false);
@@ -44,22 +43,22 @@ const WorkCardContainer: FunctionComponent<WorkCardContainerProps> = (
 
   return (
     <article className="about-work-card">
-      <Logo href={companyHref} logoUrl={companyLogoUrl} alt={company} />
+      <LeftSide
+        {...props}
+        href={companyHref}
+        logoUrl={companyLogoUrl}
+        alt={company}
+      />
       <div className="content">
         <ContentHeadline
           {...props}
           name={props.company}
-          format={format}
           onClick={handleHeadlineClick}
         />
         <div className="position">{position}</div>
         <div className={`${open ? `show` : `hide`}`}>
           {projectList.map((project) => (
-            <CompanyContentProject
-              key={project.name}
-              {...project}
-              format={format}
-            />
+            <CompanyContentProject key={project.name} {...project} />
           ))}
         </div>
       </div>

diff --git a/src/features/about/work/card/content/Headline.tsx b/src/features/about/work/card/content/Headline.tsx
@@ -1,24 +1,13 @@
 import { FunctionComponent, MouseEventHandler } from 'react';
 
-import { WorkCardContainerProps } from '../Container';
-
-import DateFormatter from '~/shared/components/DateFormatter';
-
-type ContentHeadlineProps = Pick<
-  WorkCardContainerProps,
-  'workStartDate' | 'workEndDate'
-> & {
+type ContentHeadlineProps = {
   name: string;
-  format?: string;
   onClick?: MouseEventHandler<HTMLDivElement>;
   hover?: boolean;
 };
 
 const ContentHeadline: FunctionComponent<ContentHeadlineProps> = ({
   name,
-  workStartDate,
-  workEndDate,
-  format = 'yyyy.MM',
   onClick,
   hover = true,
 }) => {
@@ -31,15 +20,6 @@ const ContentHeadline: FunctionComponent<ContentHeadlineProps> = ({
       >
         {name}
       </div>
-      <div className="date">
-        (<DateFormatter date={workStartDate} format={format} /> ~{' '}
-        {workEndDate ? (
-          <DateFormatter date={workEndDate} format={format} />
-        ) : (
-          'Present'
-        )}
-        )
-      </div>
     </div>
   );
 };

diff --git a/src/features/about/work/card/content/LeftSide.tsx b/src/features/about/work/card/content/LeftSide.tsx
@@ -0,0 +1,44 @@
+import { FunctionComponent } from 'react';
+
+import { WorkCardContainerProps } from '../Container';
+
+import ProjectDate from './ProjectDate';
+
+type LeftSideProps = Pick<
+  WorkCardContainerProps,
+  'workStartDate' | 'workEndDate'
+> & {
+  href: string;
+  logoUrl: string;
+  alt: string;
+  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>
+  );
+};
+
+export default LeftSide;
diff --git a/src/features/about/work/card/content/Logo.tsx b/src/features/about/work/card/content/Logo.tsx
diff --git a/src/features/about/work/card/content/Project.tsx b/src/features/about/work/card/content/Project.tsx
@@ -28,17 +28,13 @@ const CompanyContentProject: FunctionComponent<CompanyContentProjectProps> = ({
   endDate,
   format = 'yyyy.MM',
 }) => {
-  const [open, setOpen] = useState(name === ProjectName.UVP);
+  const [open, setOpen] = useState(false);
 
   const handleDetailClick: MouseEventHandler<HTMLDivElement> = () => {
     setOpen(!open);
   };
 
   const openClassName = open ? 'show' : 'hide';
-  const privateProject = [ProjectName.VLC];
-  if (privateProject.includes(name)) {
-    return null;
-  }
 
   return (
     <div className="project">
@@ -50,13 +46,11 @@ const CompanyContentProject: FunctionComponent<CompanyContentProjectProps> = ({
           >
             {name}
           </div>
-          {open && (
-            <ProjectDate
-              startDate={startDate}
-              endDate={endDate}
-              format={format}
-            />
-          )}
+          <ProjectDate
+            startDate={startDate}
+            endDate={endDate}
+            format={format}
+          />
         </div>
         <Tags tags={tags} />
       </div>

diff --git a/src/features/about/work/card/content/ProjectDate.tsx b/src/features/about/work/card/content/ProjectDate.tsx
@@ -1,4 +1,4 @@
-import { FunctionComponent } from 'react';
+import { FunctionComponent, memo } from 'react';
 
 import { CompanyContentProjectProps } from './Project';
 
@@ -9,18 +9,15 @@ type ProjectDateProps = Pick<
   'startDate' | 'endDate' | 'format'
 >;
 
-const ProjectDate: FunctionComponent<ProjectDateProps> = ({
-  format,
-  startDate,
-  endDate,
-}) => {
-  return (
-    <div className="date">
-      (
-      <DateFormatter date={startDate} format={format} /> ~{' '}
-      {endDate ? <DateFormatter date={endDate} format={format} /> : 'Present'})
-    </div>
-  );
-};
+const ProjectDate: FunctionComponent<ProjectDateProps> = memo(
+  ({ format, startDate, endDate }) => {
+    return (
+      <div className="date">
+        <DateFormatter date={startDate} format={format} /> -{' '}
+        {endDate ? <DateFormatter date={endDate} format={format} /> : 'Present'}
+      </div>
+    );
+  },
+);
 
 export default ProjectDate;
diff --git a/src/features/about/work/card/content/description/Bleet.tsx b/src/features/about/work/card/content/description/Bleet.tsx
@@ -17,17 +17,14 @@ const Bleet: FunctionComponent = () => {
         </p>
         <ul className="main">
           <span>
-            메인 서버 개발자로 Node.js를 활용해 API를 개발하였습니다. Beta
-            오픈까지 작업하였습니다.
+            메인 서버 개발자로 Node.js를 활용해 API를 개발. Beta 오픈까지 작업
           </span>
           <li>
-            블라인드 인증을 통한 가입 및 포인트 처리 등 전반적인 API 작업을
-            주도적으로 진행하였습니다.
-          </li>
-          <li>Firebase를 통한 채팅 기능을 개발하였습니다.</li>
-          <li>
-            Swagger 및 문서화를 통해 클라이언트 호출이 용이하도록 하였습니다.
+            블라인드 인증을 통한 가입 및 포인트 처리 등 전반적인 API 작업
+            주도적으로 진행
           </li>
+          <li>Firebase를 통한 채팅 기능 개발</li>
+          <li>Swagger 및 문서화를 통해 클라이언트 호출이 용이하도록 함</li>
         </ul>
       </div>
     </>