update: add career section content

jaemin-s · Nov 30, 2024 · 7075d2c · 7075d2c
1 parent 728eb62
commit 7075d2c
Show file tree

Hide file tree

Showing 8 changed files with 105 additions and 9 deletions.
diff --git a/app/data/repositories/CareerRepositoryImpl.ts 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,
       },
     },
   },