diff --git a/app/data/repositories/ProjectRepositoryImpl.ts b/app/data/repositories/ProjectRepositoryImpl.ts
new file mode 100644
index 0000000..e375b2b
--- /dev/null
+++ b/app/data/repositories/ProjectRepositoryImpl.ts
@@ -0,0 +1,264 @@
+import { ProjectItem } from '@/app/domain/entities/project.entity'
+import { ProjectType } from '@/app/domain/enums/project.enum'
+import { ProjectRepository } from '@/app/domain/repositories/project.repo'
+
+export class ProjectRepositoryImpl implements ProjectRepository {
+  private readonly mockData: ProjectItem[] = [
+    {
+      title: '오초이스',
+      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: [
+        {
+          title: '주요 기능 이름',
+          description: '기술 설명입니다.',
+        },
+      ],
+      company: '(주)홈초이스',
+      links: { demo: 'https://www.netflix.com/kr/', github: '' },
+      stackBadges: ['React', 'TypeScript'],
+      previewUrls: [
+        'https://github.com/jaemin-s/jaemin-s/raw/refs/heads/main/image/portfolio/netflix.webp',
+        'https://github.com/jaemin-s/jaemin-s/raw/refs/heads/main/image/portfolio/tving.webp',
+      ],
+      stackCategories: [
+        {
+          title: '상태 관리',
+          stacks: ['Redux', 'React Query'],
+        },
+        { title: '스타일링', stacks: ['Tailwind CSS'] },
+        { title: '테스팅', stacks: ['Jest'] },
+        { title: '개발 도구', stacks: ['ESLint', 'Prettier'] },
+        { title: '빌드 도구', stacks: ['Next.js'] },
+      ],
+      functions: [
+        {
+          title: '주요 기술 1',
+          description: ['기술 설명입니다', '도입 이유입니다'],
+          comment: '추가적인 코멘트 자리입니다',
+        },
+        {
+          title: '주요 기술 2',
+          description: ['기술 설명입니다', '도입 이유입니다'],
+          comment: '추가적인 코멘트 자리입니다',
+        },
+      ],
+    },
+    {
+      title: '오초이스',
+      description: '오초이스 설명 입니다',
+      period: '2024.01 ~ 2024.12',
+      image: 'https://github.com/jaemin-s/jaemin-s/raw/refs/heads/main/image/portfolio/tving.webp',
+      type: ProjectType.PERSONAL,
+      features: [
+        {
+          title: '주요 기능 이름',
+          description: '기술 설명입니다.',
+        },
+      ],
+      company: '(주)홈초이스',
+      links: { demo: 'https://www.netflix.com/kr/', github: '' },
+      stackBadges: ['React', 'TypeScript'],
+      previewUrls: [
+        'https://github.com/jaemin-s/jaemin-s/raw/refs/heads/main/image/portfolio/netflix.webp',
+        'https://github.com/jaemin-s/jaemin-s/raw/refs/heads/main/image/portfolio/tving.webp',
+      ],
+      stackCategories: [
+        {
+          title: '상태 관리',
+          stacks: ['Redux', 'React Query'],
+        },
+        { title: '스타일링', stacks: ['Tailwind CSS'] },
+        { title: '테스팅', stacks: ['Jest'] },
+        { title: '개발 도구', stacks: ['ESLint', 'Prettier'] },
+        { title: '빌드 도구', stacks: ['Next.js'] },
+      ],
+      functions: [
+        {
+          title: '주요 기술 1',
+          description: ['기술 설명입니다', '도입 이유입니다'],
+          comment: '추가적인 코멘트 자리입니다',
+        },
+        {
+          title: '주요 기술 2',
+          description: ['기술 설명입니다', '도입 이유입니다'],
+          comment: '추가적인 코멘트 자리입니다',
+        },
+      ],
+    },
+    {
+      title: '오초이스',
+      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: [
+        {
+          title: '주요 기능 이름',
+          description: '기술 설명입니다.',
+        },
+      ],
+      company: '(주)홈초이스',
+      links: { demo: 'https://www.netflix.com/kr/', github: '' },
+      stackBadges: ['React', 'TypeScript'],
+      previewUrls: [
+        'https://github.com/jaemin-s/jaemin-s/raw/refs/heads/main/image/portfolio/netflix.webp',
+        'https://github.com/jaemin-s/jaemin-s/raw/refs/heads/main/image/portfolio/tving.webp',
+      ],
+      stackCategories: [
+        {
+          title: '상태 관리',
+          stacks: ['Redux', 'React Query'],
+        },
+        { title: '스타일링', stacks: ['Tailwind CSS'] },
+        { title: '테스팅', stacks: ['Jest'] },
+        { title: '개발 도구', stacks: ['ESLint', 'Prettier'] },
+        { title: '빌드 도구', stacks: ['Next.js'] },
+      ],
+      functions: [
+        {
+          title: '주요 기술 1',
+          description: ['기술 설명입니다', '도입 이유입니다'],
+          comment: '추가적인 코멘트 자리입니다',
+        },
+        {
+          title: '주요 기술 2',
+          description: ['기술 설명입니다', '도입 이유입니다'],
+          comment: '추가적인 코멘트 자리입니다',
+        },
+      ],
+    },
+    {
+      title: '오초이스',
+      description: '오초이스 설명 입니다',
+      period: '2024.01 ~ 2024.12',
+      image: 'https://github.com/jaemin-s/jaemin-s/raw/refs/heads/main/image/portfolio/tving.webp',
+      type: ProjectType.WORK,
+      features: [
+        {
+          title: '주요 기능 이름',
+          description: '기술 설명입니다.',
+        },
+      ],
+      company: '(주)홈초이스',
+      links: { demo: 'https://www.netflix.com/kr/', github: '' },
+      stackBadges: ['React', 'TypeScript'],
+      previewUrls: [
+        'https://github.com/jaemin-s/jaemin-s/raw/refs/heads/main/image/portfolio/netflix.webp',
+        'https://github.com/jaemin-s/jaemin-s/raw/refs/heads/main/image/portfolio/tving.webp',
+      ],
+      stackCategories: [
+        {
+          title: '상태 관리',
+          stacks: ['Redux', 'React Query'],
+        },
+        { title: '스타일링', stacks: ['Tailwind CSS'] },
+        { title: '테스팅', stacks: ['Jest'] },
+        { title: '개발 도구', stacks: ['ESLint', 'Prettier'] },
+        { title: '빌드 도구', stacks: ['Next.js'] },
+      ],
+      functions: [
+        {
+          title: '주요 기술 1',
+          description: ['기술 설명입니다', '도입 이유입니다'],
+          comment: '추가적인 코멘트 자리입니다',
+        },
+        {
+          title: '주요 기술 2',
+          description: ['기술 설명입니다', '도입 이유입니다'],
+          comment: '추가적인 코멘트 자리입니다',
+        },
+      ],
+    },
+    {
+      title: '오초이스',
+      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: [
+        {
+          title: '주요 기능 이름',
+          description: '기술 설명입니다.',
+        },
+      ],
+      company: '(주)홈초이스',
+      links: { demo: 'https://www.netflix.com/kr/', github: '' },
+      stackBadges: ['React', 'TypeScript'],
+      previewUrls: [
+        'https://github.com/jaemin-s/jaemin-s/raw/refs/heads/main/image/portfolio/netflix.webp',
+        'https://github.com/jaemin-s/jaemin-s/raw/refs/heads/main/image/portfolio/tving.webp',
+      ],
+      stackCategories: [
+        {
+          title: '상태 관리',
+          stacks: ['Redux', 'React Query'],
+        },
+        { title: '스타일링', stacks: ['Tailwind CSS'] },
+        { title: '테스팅', stacks: ['Jest'] },
+        { title: '개발 도구', stacks: ['ESLint', 'Prettier'] },
+        { title: '빌드 도구', stacks: ['Next.js'] },
+      ],
+      functions: [
+        {
+          title: '주요 기술 1',
+          description: ['기술 설명입니다', '도입 이유입니다'],
+          comment: '추가적인 코멘트 자리입니다',
+        },
+        {
+          title: '주요 기술 2',
+          description: ['기술 설명입니다', '도입 이유입니다'],
+          comment: '추가적인 코멘트 자리입니다',
+        },
+      ],
+    },
+    {
+      title: '오초이스',
+      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: [
+        {
+          title: '주요 기능 이름',
+          description: '기술 설명입니다.',
+        },
+      ],
+      company: '(주)홈초이스',
+      links: { demo: '', github: '' },
+      stackBadges: ['React', 'TypeScript'],
+      previewUrls: [
+        'https://github.com/jaemin-s/jaemin-s/raw/refs/heads/main/image/portfolio/netflix.webp',
+        'https://github.com/jaemin-s/jaemin-s/raw/refs/heads/main/image/portfolio/tving.webp',
+      ],
+      stackCategories: [
+        {
+          title: '상태 관리',
+          stacks: ['Redux', 'React Query'],
+        },
+        { title: '스타일링', stacks: ['Tailwind CSS'] },
+        { title: '테스팅', stacks: ['Jest'] },
+        { title: '개발 도구', stacks: ['ESLint', 'Prettier'] },
+        { title: '빌드 도구', stacks: ['Next.js'] },
+      ],
+      functions: [
+        {
+          title: '주요 기술 1',
+          description: ['기술 설명입니다', '도입 이유입니다'],
+          comment: '추가적인 코멘트 자리입니다',
+        },
+        {
+          title: '주요 기술 2',
+          description: ['기술 설명입니다', '도입 이유입니다'],
+          comment: '추가적인 코멘트 자리입니다',
+        },
+      ],
+    },
+  ]
+
+  getProjectList(): ProjectItem[] {
+    return this.mockData
+  }
+}
diff --git a/app/data/repositories/index.ts b/app/data/repositories/index.ts
index 4f04544..4c206c1 100644
--- a/app/data/repositories/index.ts
+++ b/app/data/repositories/index.ts
@@ -1,5 +1,7 @@
 import { CareerRepositoryImpl } from './CareerRepositoryImpl'
+import { ProjectRepositoryImpl } from './ProjectRepositoryImpl'
 import { SkillRepositoryImpl } from './SkillRepositoryImpl'
 
 export const skillRepository = new SkillRepositoryImpl()
 export const CareerRepository = new CareerRepositoryImpl()
+export const ProjectRepository = new ProjectRepositoryImpl()
diff --git a/app/domain/entities/common.entity.ts b/app/domain/entities/common.entity.ts
index 8a2a3d9..6feb01e 100644
--- a/app/domain/entities/common.entity.ts
+++ b/app/domain/entities/common.entity.ts
@@ -4,3 +4,10 @@ export interface ChildrenProps {
   children: ReactNode
   className?: ''
 }
+
+export interface DialogProps {
+  isOpen: boolean
+  children: ReactNode
+  maxWidth?: string
+  onClose: () => void
+}
diff --git a/app/domain/entities/project.entity.ts b/app/domain/entities/project.entity.ts
index 1cb2421..e719a41 100644
--- a/app/domain/entities/project.entity.ts
+++ b/app/domain/entities/project.entity.ts
@@ -3,14 +3,16 @@ import { ProjectType } from '../enums/project.enum'
 export interface ProjectItem {
   title: string
   description: string
-  simpleStack: string
-  detailStacks: StackDescriptions[]
   period: string
   image: string
+  links: ProjectLinks
+  stackBadges: string[]
+  previewUrls: string[]
   type: ProjectType
-  features: string[]
+  stackCategories: StackCategory[]
+  features: Feature[]
+  functions: FunctionDecription[]
   company: string
-  links: ProjectLinks
 }
 
 export interface ProjectLinks {
@@ -18,7 +20,24 @@ export interface ProjectLinks {
   demo: string
 }
 
-export interface StackDescriptions {
+export interface ProjectItemProps {
+  item: ProjectItem
+  onClickDetailButton: (arg0: ProjectItem) => void
+}
+
+export interface Feature {
   title: string
   description: string
+  comment?: string
+}
+
+export interface FunctionDecription {
+  title: string
+  description: string[]
+  comment?: string
+}
+
+export interface StackCategory {
+  title: string
+  stacks: string[]
 }
diff --git a/app/domain/repositories/project.repo.ts b/app/domain/repositories/project.repo.ts
new file mode 100644
index 0000000..c99662f
--- /dev/null
+++ b/app/domain/repositories/project.repo.ts
@@ -0,0 +1,5 @@
+import { ProjectItem } from '../entities/project.entity'
+
+export interface ProjectRepository {
+  getProjectList(): ProjectItem[]
+}
diff --git a/app/presentation/component/article/Projects.tsx b/app/presentation/component/article/Projects.tsx
index 35f3a63..dc1516b 100644
--- a/app/presentation/component/article/Projects.tsx
+++ b/app/presentation/component/article/Projects.tsx
@@ -1,83 +1,23 @@
-import React from 'react'
+'use client'
+
+import React, { useState } from 'react'
 import ArticleHeader from '../text/ArticleHeader'
 import ProjectItemCard from '../card/ProjectItemCard'
-import { ProjectType } from '@/app/domain/enums/project.enum'
+import CommonDialog from '../dialog/CommonDialog'
+import { ProjectRepository } from '@/app/data/repositories'
+import ProjectDialog from '../dialog/ProjectDialog'
+import { ProjectItem } from '@/app/domain/entities/project.entity'
 
 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/tving.webp',
-      type: ProjectType.PERSONAL,
-      features: [''],
-      company: '(주)홈초이스',
-      links: { demo: 'https://www.tving.com', 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: 'https://www.netflix.com/kr/', 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/tving.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: '' },
-    },
-  ]
+  const [isOpen, setIsOpen] = useState(false)
+  const [itemData, setItemData] = useState<ProjectItem | null>(null)
+
+  const projectItemList = ProjectRepository.getProjectList()
+
+  const handleDetailButton = (item: ProjectItem) => {
+    setIsOpen(true)
+    setItemData(item)
+  }
 
   return (
     <div className="h-full flex flex-col items-center justify-center text-forest">
@@ -85,10 +25,15 @@ const Projects = () => {
       <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} />
+            <ProjectItemCard item={project} onClickDetailButton={handleDetailButton} />
           </li>
         ))}
       </ul>
+      {itemData && (
+        <CommonDialog isOpen={isOpen} onClose={() => setIsOpen(false)}>
+          <ProjectDialog {...itemData} />
+        </CommonDialog>
+      )}
     </div>
   )
 }
diff --git a/app/presentation/component/badge/TechBadge.tsx b/app/presentation/component/badge/TechBadge.tsx
new file mode 100644
index 0000000..dc13c3e
--- /dev/null
+++ b/app/presentation/component/badge/TechBadge.tsx
@@ -0,0 +1,14 @@
+import { ChildrenProps } from '@/app/domain/entities/common.entity'
+import React from 'react'
+
+const TechBadge = ({ children, className = '' }: ChildrenProps) => {
+  return (
+    <div
+      className={`inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-yellow-600 text-white ${className}`}
+    >
+      {children}
+    </div>
+  )
+}
+
+export default TechBadge
diff --git a/app/presentation/component/card/ProjectItemCard.tsx b/app/presentation/component/card/ProjectItemCard.tsx
index efef95c..f1c3718 100644
--- a/app/presentation/component/card/ProjectItemCard.tsx
+++ b/app/presentation/component/card/ProjectItemCard.tsx
@@ -1,25 +1,31 @@
-import { ProjectItem } from '@/app/domain/entities/project.entity'
+import { ProjectItemProps } 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) => {
+const ProjectItemCard = ({ item, onClickDetailButton }: ProjectItemProps) => {
   return (
     <CommonCard className="">
       <div className="w-80 aspect-video">
-        <img src={props.image} className="w-full h-full object-cover" />
+        <img src={item.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>
+        <h4 className="text-lg font-bold mb-2">{item.title}</h4>
+        <p className="text-sm text-stone-600 mb-2">{item.description}</p>
+        <p className="text-xs text-stone-500">{item.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 && (
+        <div className="flex justify-end gap-2 mt-4">
+          <button
+            className="text-sm px-3 py-1 bg-blue-500 text-white rounded-md hover:bg-blue-600"
+            onClick={() => {
+              onClickDetailButton(item)
+            }}
+          >
+            상세보기
+          </button>
+          {!!item.links.demo && (
             <button className="text-sm px-3 py-1 border border-stone-300 text-black rounded-md hover:bg-stone-200">
-              <a href={props.links.demo} target="_blank">
+              <a href={item.links.demo} target="_blank">
                 바로가기
               </a>
             </button>
diff --git a/app/presentation/component/dialog/CommonDialog.tsx b/app/presentation/component/dialog/CommonDialog.tsx
new file mode 100644
index 0000000..dfa8cf9
--- /dev/null
+++ b/app/presentation/component/dialog/CommonDialog.tsx
@@ -0,0 +1,27 @@
+import { DialogProps } from '@/app/domain/entities/common.entity'
+import React, { useEffect } from 'react'
+
+const CommonDialog = ({ children, isOpen, onClose, maxWidth = 'max-w-3xl' }: DialogProps) => {
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose()
+    }
+
+    document.addEventListener('keydown', handleEscape)
+    return () => {
+      document.removeEventListener('keydown', handleEscape)
+    }
+  }, [isOpen, onClose])
+
+  if (!isOpen) return null
+
+  return (
+    <div className="fixed bg-black bg-opacity-50 flex items-center justify-center z-50 inset-0" onClick={onClose}>
+      <div className={`bg-white rounded-lg w-full ${maxWidth} mx-4 max-h-[90vh] overflow-hidden`}>
+        <div className="overflow-y-auto max-h-[90vh]">{children}</div>
+      </div>
+    </div>
+  )
+}
+
+export default CommonDialog
diff --git a/app/presentation/component/dialog/ProjectDialog.tsx b/app/presentation/component/dialog/ProjectDialog.tsx
new file mode 100644
index 0000000..c4f1ba5
--- /dev/null
+++ b/app/presentation/component/dialog/ProjectDialog.tsx
@@ -0,0 +1,92 @@
+import React from 'react'
+import TechBadge from '../badge/TechBadge'
+import { ProjectItem } from '@/app/domain/entities/project.entity'
+
+const ProjectDialog = (props: ProjectItem) => {
+  return (
+    <div>
+      <header className="bg-copper text-white p-6">
+        <h2 className="text-3xl font-bold mb-2">{props.title}</h2>
+        <ul className="flex gap-2 mb-2">
+          {props.stackBadges.map((item, index) => (
+            <li key={index}>
+              <TechBadge>{item}</TechBadge>
+            </li>
+          ))}
+        </ul>
+        <p className="text-stone-300">{props.period}</p>
+      </header>
+      {/* 프로젝트 미리보기 */}
+      <section className="p-6 border-b border-stone-200">
+        <h2 className="text-2xl font-bold text-stone-800 mb-6">프로젝트 미리보기</h2>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 w-fit mx-auto">
+          {props.previewUrls.map((item, index) => (
+            <img src={item} key={index} alt="" className="h-52 rounded-lg shadow object-cover" />
+          ))}
+        </div>
+      </section>
+      {/* 주요 기능 */}
+      <section className="p-6 border-b border-stone-200">
+        <h2 className="text-2xl font-bold text-stone-800 mb-6">주요 기능</h2>
+        <ul className="flex flex-col gap-6">
+          {props.features.map((item, index) => (
+            <li key={index} className="bg-stone-100 rounded-lg p-4">
+              <h3 className="text-lg font-semibold text-stone-800 mb-2">{item.title}</h3>
+              <p className="text-stone-600">{item.description}</p>
+            </li>
+          ))}
+        </ul>
+      </section>
+      {/* 기술 스택 섹션 */}
+      <section className="p-6">
+        <h2 className="text-2xl font-bold text-stone-800 mb-6">사용 기술</h2>
+        {/* 주요 기술 */}
+        <div className="mb-8">
+          <h3 className="text-xl font-semibold text-stone-800 mb-4">주요 기술</h3>
+          <ul className="space-y-6">
+            {props.functions.map((item, index) => (
+              <li key={index} className="p-4 bg-stone-100 rounded-lg">
+                <h4 className="text-copper font-medium mb-3">{item.title}</h4>
+                <div className="space-y-4">
+                  <div>
+                    <p className="text-stone-600 font-medium mb-2">선정 이유:</p>
+                    <ul className="list-disc pl-5 text-gray-600 space-y-2">
+                      {item.description.map((str, index) => (
+                        <li key={index}>{str}</li>
+                      ))}
+                    </ul>
+                  </div>
+                  <p className="text-stone-600 mt-3 text-sm">{item.comment}</p>
+                </div>
+              </li>
+            ))}
+          </ul>
+        </div>
+        {/* 기타 사용 기술 */}
+        <div>
+          <h3 className="text-xl font-simibold text-stone-800 mb-4">기타 사용 기술</h3>
+          <div className="bg-stone-100 rounded-lg p-4">
+            <ul className="flex flex-col gap-4">
+              {props.stackCategories.map((item, index) => (
+                <li key={index}>
+                  <h4 className="text-stone-700 font-medium mb-2">{item.title}</h4>
+                  <div className="flex flex-wrap gap-2">
+                    {item.stacks.map((stack, index) => (
+                      <span
+                        key={index}
+                        className="px-3 py-1 bg-white text-stone-600 rounded-md border border-stone-200"
+                      >
+                        {stack}
+                      </span>
+                    ))}
+                  </div>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+      </section>
+    </div>
+  )
+}
+export default ProjectDialog