From 7075d2cc65e0848792ee55c86c2f3bc9112e336d Mon Sep 17 00:00:00 2001
From: jaemin <jaemin4033@gmail.com>
Date: Sat, 30 Nov 2024 23:02:40 +0900
Subject: [PATCH] update: add career section content

---
 app/data/repositories/CareerRepositoryImpl.ts | 40 +++++++++++++++
 app/data/repositories/index.ts                |  2 +
 app/domain/entities/career.entity.ts          | 13 +++++
 app/domain/entities/skill.entity.ts           |  2 +-
 app/domain/repositories/career.repo.ts        |  5 ++
 .../component/section/CareerSection.tsx       | 49 ++++++++++++++++---
 app/presentation/component/text/DateText.tsx  |  2 +-
 tailwind.config.ts                            |  1 +
 8 files changed, 105 insertions(+), 9 deletions(-)
 create mode 100644 app/data/repositories/CareerRepositoryImpl.ts
 create mode 100644 app/domain/entities/career.entity.ts
 create mode 100644 app/domain/repositories/career.repo.ts

diff --git a/app/data/repositories/CareerRepositoryImpl.ts b/app/data/repositories/CareerRepositoryImpl.ts
new file mode 100644
index 0000000..1a1ff9d
--- /dev/null
+++ b/app/data/repositories/CareerRepositoryImpl.ts
@@ -0,0 +1,40 @@
+import { CareerEntity } from '@/app/domain/entities/career.entity'
+import { CareerRepository } from '@/app/domain/repositories/career.repo'
+
+export class CareerRepositoryImpl implements CareerRepository {
+  private readonly mockData: CareerEntity[] = [
+    {
+      companyName: '(주)홈초이스',
+      logoUrl: 'https://github.com/jaemin-s/jaemin-s/raw/refs/heads/main/image/logo/homechoice.svg',
+      employmentPeriod: '2024.01 ~ 재직중',
+      companyDescription: 'VOD, 배급, 광고, 채널 등의 다양한 사업을 영위하는 종합미디어 그룹',
+      achievementItems: [
+        {
+          achievementTitle: 'UI/UX 개편',
+          projectPeriod: '2024년 상반기',
+          achievementDescription: 'Smart TV앱의 전반적인 UI/UX 개선 작업',
+        },
+        {
+          achievementTitle: 'Smart TV App 심사 등록 관리',
+          projectPeriod: '2024년 상반기',
+          achievementDescription: 'Samsung, LG 스토어 심사 담당',
+        },
+        {
+          achievementTitle: 'UI/UX 개편',
+          projectPeriod: '2024년 상반기',
+          achievementDescription: 'Smart TV앱의 전반적인 UI/UX 개선 작업',
+        },
+        {
+          achievementTitle: 'Smart TV App 심사 등록 관리',
+          projectPeriod: '2024년 상반기',
+          achievementDescription: 'Samsung, LG 스토어 심사 담당',
+        },
+      ],
+    },
+  ]
+
+  async getCareerList(): Promise<CareerEntity[]> {
+    await new Promise((resolve) => setTimeout(resolve, 200))
+    return this.mockData
+  }
+}
diff --git a/app/data/repositories/index.ts b/app/data/repositories/index.ts
index a7758bc..fca0fc5 100644
--- a/app/data/repositories/index.ts
+++ b/app/data/repositories/index.ts
@@ -1,3 +1,5 @@
+import { CareerRepositoryImpl } from './careerRepositoryImpl'
 import { SkillRepositoryImpl } from './SkillRepositoryImpl'
 
 export const skillRepository = new SkillRepositoryImpl()
+export const CareerRepository = new CareerRepositoryImpl()
diff --git a/app/domain/entities/career.entity.ts b/app/domain/entities/career.entity.ts
new file mode 100644
index 0000000..5b8e7a6
--- /dev/null
+++ b/app/domain/entities/career.entity.ts
@@ -0,0 +1,13 @@
+export interface CareerEntity {
+  companyName: string
+  logoUrl: string
+  employmentPeriod: string
+  companyDescription: string
+  achievementItems: AchievementItem[]
+}
+
+export interface AchievementItem {
+  achievementTitle: string
+  projectPeriod: string
+  achievementDescription: string
+}
diff --git a/app/domain/entities/skill.entity.ts b/app/domain/entities/skill.entity.ts
index fdf342f..a7827ed 100644
--- a/app/domain/entities/skill.entity.ts
+++ b/app/domain/entities/skill.entity.ts
@@ -1,6 +1,6 @@
 export interface SkillCategory {
   categoryName: string
-  skillList: Array<Skill>
+  skillList: Skill[]
 }
 
 export interface Skill {
diff --git a/app/domain/repositories/career.repo.ts b/app/domain/repositories/career.repo.ts
new file mode 100644
index 0000000..a67233d
--- /dev/null
+++ b/app/domain/repositories/career.repo.ts
@@ -0,0 +1,5 @@
+import { CareerEntity } from '../entities/career.entity'
+
+export interface CareerRepository {
+  getCareerList(): Promise<CareerEntity[]>
+}
diff --git a/app/presentation/component/section/CareerSection.tsx b/app/presentation/component/section/CareerSection.tsx
index 2df4a8a..834a865 100644
--- a/app/presentation/component/section/CareerSection.tsx
+++ b/app/presentation/component/section/CareerSection.tsx
@@ -1,14 +1,49 @@
 import React from 'react'
 import BodyText from '../text/BodyText'
+import DateText from '../text/DateText'
+import { CareerRepository } from '@/app/data/repositories'
+// import Image from 'next/image'
+
+const CareerSection = async () => {
+  const CareerList = await CareerRepository.getCareerList()
 
-const CareerSection = () => {
   return (
-    <section>
-      <header>
-        <h3></h3>
-        <p></p>
-        <BodyText>{''}</BodyText>
-      </header>
+    <section className="flex">
+      <ul className="flex flex-col gap-12">
+        {CareerList.map((item, index) => (
+          <li className="flex" key={'careerItem_' + index}>
+            <div className="mr-8 bg-slate-50 p-4 rounded-full h-fit w-fit">
+              {/* <Image src="https://github.com/jaemin-s/jaemin-s/raw/refs/heads/main/image/logo/homechoice.png" alt="" /> */}
+              <img
+                className="w-40"
+                src="https://github.com/jaemin-s/jaemin-s/raw/refs/heads/main/image/logo/homechoice.svg"
+                alt=""
+              />
+            </div>
+            <div className="border-l-2 border-stone-400 pl-8">
+              <header className="mb-6">
+                <h3 className="text-2xl mb-4 font-semibold">{item.companyName}</h3>
+                <DateText className="mb-2">{item.employmentPeriod}</DateText>
+                <BodyText>{item.companyDescription}</BodyText>
+              </header>
+              <ul className="flex flex-col gap-4">
+                {item.achievementItems.map((expItem, childIndex) => (
+                  <li
+                    className={`${item.achievementItems.length - 1 > childIndex ? 'border-b-[2px]' : 'border-none'} border-stone-400 pb-2`}
+                    key={`careerItem_${index}_${childIndex}`}
+                  >
+                    <h4 className="text-lg font-medium border-l-4 pl-4 mb-2 leading-none">
+                      {expItem.achievementTitle}
+                    </h4>
+                    <DateText className="text-sm mb-1">{expItem.projectPeriod}</DateText>
+                    <BodyText className="text-sm">{expItem.achievementDescription}</BodyText>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </li>
+        ))}
+      </ul>
     </section>
   )
 }
diff --git a/app/presentation/component/text/DateText.tsx b/app/presentation/component/text/DateText.tsx
index 44ec7b1..a355d3f 100644
--- a/app/presentation/component/text/DateText.tsx
+++ b/app/presentation/component/text/DateText.tsx
@@ -2,7 +2,7 @@ import { TextProps } from '@/app/domain/entities/Text.entity'
 import React from 'react'
 
 const DateText = ({ children, className = '' }: TextProps) => {
-  return <p className={`  ${className}`}>{children}</p>
+  return <p className={`text-base text-gray ${className}`}>{children}</p>
 }
 
 export default DateText
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 65e93c6..2da8846 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -18,6 +18,7 @@ export default {
         sage: Colors.SAGE, //font-color : forest, copper
         cream: Colors.CREAM, //font-color : forest, copper
         black: Colors.BLACK,
+        gray: Colors.GRAY,
       },
     },
   },