update: add project gallery

app/domain/entities/aboutMe.entity.ts

@@ -1,5 +1,7 @@
+import { ReactNode } from 'react'
+
 export interface AboutMeProps {
   header: string
   body: string
-  children?: React.ReactNode
+  children?: ReactNode
 }

app/domain/entities/common.entity.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react'
+
+export interface ChildrenProps {
+  children: ReactNode
+  className?: ''
+}

app/domain/entities/project.entity.ts

@@ -0,0 +1,24 @@
+import { ProjectType } from '../enums/project.enum'
+
+export interface ProjectItem {
+  title: string
+  description: string
+  simpleStack: string
+  detailStacks: StackDescriptions[]
+  period: string
+  image: string
+  type: ProjectType
+  features: string[]
+  company: string
+  links: ProjectLinks
+}
+
+export interface ProjectLinks {
+  github: string
+  demo: string
+}
+
+export interface StackDescriptions {
+  title: string
+  description: string
+}

app/domain/entities/text.entity.ts

@@ -1,4 +1,6 @@
+import { ReactNode } from 'react'
+
 export interface TextProps {
-  children: React.ReactNode
+  children: ReactNode
   className?: string
 }

app/domain/enums/project.enum.ts

@@ -0,0 +1,4 @@
+export enum ProjectType {
+  PERSONAL = 'personal',
+  WORK = 'work',
+}

app/presentation/component/article/Projects.tsx

@@ -1,11 +1,94 @@
 import React from 'react'
 import ArticleHeader from '../text/ArticleHeader'
+import ProjectItemCard from '../card/ProjectItemCard'
+import { ProjectType } from '@/app/domain/enums/project.enum'
 
 const Projects = () => {
+  const projectItemList = [
+    {
+      title: '오초이스',
+      description: '오초이스 설명 입니다',
+      simpleStack: 'React JavaScript Tizen WebOS',
+      detailStacks: [{ title: 'React', description: '리액트 사용 이유' }],
+      period: '2024.01 ~ 2024.12',
+      image: 'https://github.com/jaemin-s/jaemin-s/raw/refs/heads/main/image/portfolio/netflix.webp',
+      type: ProjectType.WORK,
+      features: [''],
+      company: '(주)홈초이스',
+      links: { demo: '', github: '' },
+    },
+    {
+      title: '오초이스',
+      description: '오초이스 설명 입니다',
+      simpleStack: 'React JavaScript Tizen WebOS',
+      detailStacks: [{ title: 'React', description: '리액트 사용 이유' }],
+      period: '2024.01 ~ 2024.12',
+      image: 'https://github.com/jaemin-s/jaemin-s/raw/refs/heads/main/image/portfolio/netflix.webp',
+      type: ProjectType.PERSONAL,
+      features: [''],
+      company: '(주)홈초이스',
+      links: { demo: '', github: '' },
+    },
+    {
+      title: '오초이스',
+      description: '오초이스 설명 입니다',
+      simpleStack: 'React JavaScript Tizen WebOS',
+      detailStacks: [{ title: 'React', description: '리액트 사용 이유' }],
+      period: '2024.01 ~ 2024.12',
+      image: 'https://github.com/jaemin-s/jaemin-s/raw/refs/heads/main/image/portfolio/netflix.webp',
+      type: ProjectType.PERSONAL,
+      features: [''],
+      company: '(주)홈초이스',
+      links: { demo: '', github: '' },
+    },
+    {
+      title: '오초이스',
+      description: '오초이스 설명 입니다',
+      simpleStack: 'React JavaScript Tizen WebOS',
+      detailStacks: [{ title: 'React', description: '리액트 사용 이유' }],
+      period: '2024.01 ~ 2024.12',
+      image: 'https://github.com/jaemin-s/jaemin-s/raw/refs/heads/main/image/portfolio/netflix.webp',
+      type: ProjectType.WORK,
+      features: [''],
+      company: '(주)홈초이스',
+      links: { demo: '', github: '' },
+    },
+    {
+      title: '오초이스',
+      description: '오초이스 설명 입니다',
+      simpleStack: 'React JavaScript Tizen WebOS',
+      detailStacks: [{ title: 'React', description: '리액트 사용 이유' }],
+      period: '2024.01 ~ 2024.12',
+      image: 'https://github.com/jaemin-s/jaemin-s/raw/refs/heads/main/image/portfolio/netflix.webp',
+      type: ProjectType.WORK,
+      features: [''],
+      company: '(주)홈초이스',
+      links: { demo: '', github: '' },
+    },
+    {
+      title: '오초이스',
+      description: '오초이스 설명 입니다',
+      simpleStack: 'React JavaScript Tizen WebOS',
+      detailStacks: [{ title: 'React', description: '리액트 사용 이유' }],
+      period: '2024.01 ~ 2024.12',
+      image: 'https://github.com/jaemin-s/jaemin-s/raw/refs/heads/main/image/portfolio/netflix.webp',
+      type: ProjectType.WORK,
+      features: [''],
+      company: '(주)홈초이스',
+      links: { demo: '', github: '' },
+    },
+  ]
+
   return (
     <div className="h-full flex flex-col items-center justify-center text-forest">
       <ArticleHeader className="border-forest">PROJECTS</ArticleHeader>
-      {/* str="PROJECTS" color={Colors.FOREST} */}
+      <ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        {projectItemList.map((project, index) => (
+          <li key={index}>
+            <ProjectItemCard {...project} />
+          </li>
+        ))}
+      </ul>
     </div>
   )
 }

app/presentation/component/card/CommonCard.tsx

@@ -0,0 +1,14 @@
+import { ChildrenProps } from '@/app/domain/entities/common.entity'
+import React from 'react'
+
+const CommonCard = ({ children, className = '' }: ChildrenProps) => {
+  return (
+    <div
+      className={`bg-slate-50 rounded-md shadow-md overflow-hidden hover:shadow-xl transition-shadow duration-300 ${className}`}
+    >
+      {children}
+    </div>
+  )
+}
+
+export default CommonCard

app/presentation/component/card/ProjectItemCard.tsx

@@ -0,0 +1,33 @@
+import { ProjectItem } from '@/app/domain/entities/project.entity'
+import React from 'react'
+import CommonCard from './CommonCard'
+import { ProjectType } from '@/app/domain/enums/project.enum'
+
+const ProjectItemCard = (props: ProjectItem) => {
+  return (
+    <CommonCard className="">
+      <div className="w-80 aspect-video">
+        <img src={props.image} className="w-full h-full object-cover" />
+      </div>
+      <div className="p-4">
+        <h4 className="text-lg font-bold mb-2">{props.title}</h4>
+        <p className="text-sm text-stone-600 mb-2">{props.description}</p>
+        <p className="text-xs text-stone-500 mb-1">{props.simpleStack}</p>
+        <p className="text-xs text-stone-500">{props.period}</p>
+
+        <div className="flex gap-2 mt-4">
+          <button className="text-sm px-3 py-1 bg-blue-500 text-white rounded-md hover:bg-blue-600">상세보기</button>
+          {props.type === ProjectType.PERSONAL && (
+            <button className="text-sm px-3 py-1 border border-stone-300 text-black rounded-md hover:bg-stone-200">
+              <a href="https://www.netflix.com/kr/" target="_blank">
+                바로가기
+              </a>
+            </button>
+          )}
+        </div>
+      </div>
+    </CommonCard>
+  )
+}
+
+export default ProjectItemCard