From 54230c278069fceaff8bdf691e825ec3ce2f9c46 Mon Sep 17 00:00:00 2001
From: YerangPark <smsms_@naver.com>
Date: Tue, 15 Oct 2024 16:39:40 +0900
Subject: [PATCH 1/3] =?UTF-8?q?feat:=20=EB=AF=B8=EB=A6=AC=EB=B3=B4?=
 =?UTF-8?q?=EA=B8=B0=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=9E=AC?=
 =?UTF-8?q?=EC=84=A4=EA=B3=84=20for=20SSR?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/[username]/[id]/page.tsx              |  86 +++++++++--
 src/app/portfolio/[id]/page.tsx               | 106 +++++++++++--
 src/components/organisms/ProjectInputForm.tsx |   8 +-
 .../templates/PortfolioFormPage.tsx           |   4 +-
 .../templates/PortfolioViewPage.tsx           | 140 ++----------------
 src/types/data.ts                             |  44 +++++-
 6 files changed, 230 insertions(+), 158 deletions(-)

diff --git a/src/app/[username]/[id]/page.tsx b/src/app/[username]/[id]/page.tsx
index 80f40c8..3d182fe 100644
--- a/src/app/[username]/[id]/page.tsx
+++ b/src/app/[username]/[id]/page.tsx
@@ -1,15 +1,83 @@
-'use client'
-
 import PortfolioViewPage from '@/components/templates/PortfolioViewPage'
-import { useParams } from 'next/navigation'
+import { Portfolio } from '@/types/data'
 
-export default function Page() {
-  const params = useParams()
-  if (Array.isArray(params.id) || !params.id || Array.isArray(params.username) || !params.username) {
+export default async function Page({ params }: { params: { username: string; id: string } }) {
+  const { username, id } = params
+  if (Array.isArray(id) || !id || Array.isArray(username) || !username) {
     return <div>올바르지 않은 접근입니다.</div>
   }
-  const { username } = params
-  const id = parseInt(params.id, 10)
 
-  return <PortfolioViewPage username={username} id={id} isPublic />
+  const apiUrl = process.env.NEXT_PUBLIC_API_BASE_URL || 'http://yrpark.duckdns.org:8080'
+
+  const getPortfolioData = async (): Promise<Portfolio | null> => {
+    const url = `${apiUrl}/api/${username}/${id}`
+    const headers: Record<string, string> = {}
+
+    const response = await fetch(url, {
+      method: 'GET',
+      headers,
+    })
+
+    const res = await response.json()
+    if (response.ok) {
+      const portfolio = res.data
+
+      // API에서 얻은 데이터를 포트폴리오 state에 저장
+      return {
+        portfolioName: portfolio.file_name,
+        title: portfolio.title,
+        description: portfolio.description,
+        githubLink: portfolio.github_link,
+        blogLink: portfolio.blog_link,
+        image: `${apiUrl}/uploads/${portfolio.image}`,
+        skills: portfolio.portfolioSkills.map((skill: any) => skill.skill_id),
+        // eslint-disable-next-line no-underscore-dangle
+        projects: portfolio.__projects__.map((project: any) => ({
+          id: project.id,
+          name: project.name,
+          description: project.description,
+          githubLink: project.github_link,
+          siteLink: project.site_link,
+          startDate: project.start_date ? project.start_date.split('-').slice(0, 2).join('-') : '',
+          endDate: project.end_date ? project.end_date.split('-').slice(0, 2).join('-') : '',
+          image: project.image ? `${apiUrl}/uploads/${project.image}` : null,
+          readmeFile: project.readme_file ? `${apiUrl}/uploads/${project.readme_file}` : null,
+          skills: project.projectSkills.map((skill: any) => skill.skill_id),
+        })),
+      }
+    }
+    console.error('포트폴리오 불러오기 실패:', res.message)
+    return null
+  }
+
+  const getUserData = async () => {
+    const url = `${apiUrl}/api/user/public/${username}`
+    const headers: Record<string, string> = {}
+
+    const response = await fetch(url, {
+      method: 'GET',
+      headers,
+    })
+
+    const res = await response.json()
+    if (response.ok) {
+      const user = res.data
+      return {
+        name: user.name,
+        email: user.email,
+        birthdate: user.birthdate,
+      }
+    }
+    console.error('포트폴리오 불러오기 실패:', res.message)
+    return null
+  }
+
+  const portfolioData = await getPortfolioData()
+  const userData = await getUserData()
+
+  if (!portfolioData || !userData) {
+    return <div>포트폴리오 데이터를 불러올 수 없습니다.</div>
+  }
+
+  return <PortfolioViewPage portfolioData={portfolioData} userData={userData} />
 }
diff --git a/src/app/portfolio/[id]/page.tsx b/src/app/portfolio/[id]/page.tsx
index 4cb8696..2a04cf1 100644
--- a/src/app/portfolio/[id]/page.tsx
+++ b/src/app/portfolio/[id]/page.tsx
@@ -1,26 +1,114 @@
 'use client'
 
+import { useEffect, useState } from 'react'
+import { useRouter } from 'next/navigation'
 import PortfolioViewPage from '@/components/templates/PortfolioViewPage'
-import { useParams, useRouter } from 'next/navigation'
 import isTokenExpired from '@/utils/TokenExpiredChecker'
-import { useEffect } from 'react'
 
-export default function Page() {
+export default function Page({ params }: { params: { id: string } }) {
+  const { id } = params
   const router = useRouter()
+  const apiUrl = process.env.NEXT_PUBLIC_API_BASE_URL || 'http://yrpark.duckdns.org:8080'
+
+  const [portfolioData, setPortfolioData] = useState<any>(null)
+  const [userData, setUserData] = useState<any>(null)
+  const [loading, setLoading] = useState(true)
 
   useEffect(() => {
     const token = localStorage.getItem('token')
     if (!token || isTokenExpired(token)) {
       localStorage.removeItem('token')
       router.push('/')
+      return
+    }
+
+    const fetchPortfolioData = async () => {
+      const url = `${apiUrl}/api/portfolio/${id}`
+      const headers: Record<string, string> = {}
+      headers.Authorization = `Bearer ${token}`
+
+      const response = await fetch(url, {
+        method: 'GET',
+        headers,
+      })
+
+      const res = await response.json()
+      if (response.status === 401) {
+        localStorage.removeItem('token')
+        router.push('/')
+        return
+      }
+
+      if (response.ok) {
+        const portfolio = res.data
+        setPortfolioData({
+          portfolioName: portfolio.file_name,
+          title: portfolio.title,
+          description: portfolio.description,
+          githubLink: portfolio.github_link,
+          blogLink: portfolio.blog_link,
+          image: `${apiUrl}/uploads/${portfolio.image}`,
+          skills: portfolio.portfolioSkills.map((skill: any) => skill.skill_id),
+          // eslint-disable-next-line no-underscore-dangle
+          projects: portfolio.__projects__.map((project: any) => ({
+            id: project.id,
+            name: project.name,
+            description: project.description,
+            githubLink: project.github_link,
+            siteLink: project.site_link,
+            startDate: project.start_date ? project.start_date.split('-').slice(0, 2).join('-') : '',
+            endDate: project.end_date ? project.end_date.split('-').slice(0, 2).join('-') : '',
+            image: project.image ? `${apiUrl}/uploads/${project.image}` : null,
+            readmeFile: project.readme_file ? `${apiUrl}/uploads/${project.readme_file}` : null,
+            skills: project.projectSkills.map((skill: any) => skill.skill_id),
+          })),
+        })
+      }
+    }
+
+    const fetchUserData = async () => {
+      const url = `${apiUrl}/api/user`
+      const headers: Record<string, string> = {}
+      headers.Authorization = `Bearer ${token}`
+
+      const response = await fetch(url, {
+        method: 'GET',
+        headers,
+      })
+
+      const res = await response.json()
+      if (response.status === 401) {
+        localStorage.removeItem('token')
+        router.push('/')
+        return
+      }
+
+      if (response.ok) {
+        const user = res.data
+        setUserData({
+          name: user.name,
+          email: user.email,
+          birthdate: user.birthdate,
+        })
+      }
+    }
+
+    const fetchData = async () => {
+      await fetchPortfolioData()
+      await fetchUserData()
+      setLoading(false) // 데이터가 모두 로드되면 로딩을 종료합니다.
     }
-  }, [router])
 
-  const params = useParams()
-  if (Array.isArray(params.id) || !params.id) {
-    return <div>올바르지 않은 접근입니다.</div>
+    fetchData()
+  }, [id, router, apiUrl])
+
+  if (loading) {
+    return <div>Loading...</div>
+  }
+
+  if (!portfolioData || !userData) {
+    return <div>포트폴리오 데이터를 불러올 수 없습니다.</div>
   }
-  const id = parseInt(params.id, 10)
 
-  return <PortfolioViewPage id={id} />
+  return <PortfolioViewPage portfolioData={portfolioData} userData={userData} />
 }
diff --git a/src/components/organisms/ProjectInputForm.tsx b/src/components/organisms/ProjectInputForm.tsx
index 5dc6e16..79d0712 100644
--- a/src/components/organisms/ProjectInputForm.tsx
+++ b/src/components/organisms/ProjectInputForm.tsx
@@ -21,7 +21,7 @@ import {
   IconButton,
 } from '@chakra-ui/react'
 import { FiPlus, FiDelete } from 'react-icons/fi'
-import { Skill, Project } from '@/types/data'
+import { Skill, ProjectInputProps } from '@/types/data'
 import { useSelector } from 'react-redux'
 import { RootState } from '@/store'
 import { FaSearch } from 'react-icons/fa'
@@ -32,8 +32,8 @@ import InputDateRange from '../molecules/InputDateRange'
 import InputFile from '../molecules/InputFile'
 
 interface ProjectInputFormProps {
-  projects: Project[]
-  setProjects: React.Dispatch<React.SetStateAction<Project[]>>
+  projects: ProjectInputProps[]
+  setProjects: React.Dispatch<React.SetStateAction<ProjectInputProps[]>>
 }
 
 const ProjectInputForm: React.FC<ProjectInputFormProps> = ({ projects, setProjects }) => {
@@ -75,7 +75,7 @@ const ProjectInputForm: React.FC<ProjectInputFormProps> = ({ projects, setProjec
   }
 
   const handleAddProject = () => {
-    const newProject: Project = {
+    const newProject: ProjectInputProps = {
       id: projects.length + 1,
       name: '',
       description: '',
diff --git a/src/components/templates/PortfolioFormPage.tsx b/src/components/templates/PortfolioFormPage.tsx
index 7aa8013..56cf226 100644
--- a/src/components/templates/PortfolioFormPage.tsx
+++ b/src/components/templates/PortfolioFormPage.tsx
@@ -2,7 +2,7 @@
 
 import React, { useEffect, useState } from 'react'
 import { Box, Divider } from '@chakra-ui/react'
-import { Project } from '@/types/data'
+import { ProjectInputProps } from '@/types/data'
 import { useRouter } from 'next/navigation'
 import DashboardNavBar from '../organisms/DashboardNavBar'
 import { Heading } from '../atoms/Text'
@@ -38,7 +38,7 @@ const PortfolioFormPage: React.FC<PortfolioFormPageProps> = ({ id }) => {
   const [selectedTechStack, setSelectedTechStack] = useState<number[]>([])
 
   // Project Page States
-  const [projects, setProjects] = useState<Project[]>([])
+  const [projects, setProjects] = useState<ProjectInputProps[]>([])
 
   const checkRequiredFields = () => {
     const missingFields: string[] = []
diff --git a/src/components/templates/PortfolioViewPage.tsx b/src/components/templates/PortfolioViewPage.tsx
index ad434cf..c9daddd 100644
--- a/src/components/templates/PortfolioViewPage.tsx
+++ b/src/components/templates/PortfolioViewPage.tsx
@@ -1,9 +1,11 @@
+'use client'
+
 import React, { useEffect, useState } from 'react'
 import { Box, Heading, Text, Flex, Image, VStack, Link, Icon, Button } from '@chakra-ui/react'
 import { FaGithub, FaBlog } from 'react-icons/fa'
-import { useRouter } from 'next/navigation'
 import { useSelector } from 'react-redux'
 import { RootState } from '@/store'
+import { PortfolioViewPageProps } from '@/types/data'
 import PortfolioMainImageText from '../organisms/PortfolioMainImageText'
 import PortfolioNavBar from '../organisms/PortfolioNavBar'
 import ProjectInformation from '../organisms/ProjectInformation'
@@ -11,32 +13,7 @@ import SkillCategories from '../organisms/SkillCategories'
 import Footer from '../organisms/Footer'
 import MarkdownModal from '../organisms/MarkdownModal'
 
-const apiUrl = process.env.NEXT_PUBLIC_API_BASE_URL || 'http://yrpark.duckdns.org:8080'
-
-const PortfolioViewPage: React.FC<{ username?: string; id: number; isPublic?: boolean }> = ({
-  username,
-  id,
-  isPublic = false,
-}) => {
-  const router = useRouter()
-  const [portfolioData, setPortfolioData] = useState<any>(null)
-  const [userData, setUserData] = useState<{ name: string; birthdate: string; email: string }>({
-    name: '',
-    birthdate: '',
-    email: '',
-  })
-  const reduxSkills = useSelector((state: RootState) => state.skill.skills)
-  const [categorizedSkill, setCategorizedSkill] = useState<any>(null)
-  const [categorizedProjectSkill, setCategorizedProjectSkill] = useState<any>([])
-  const [projectModalOpen, setProjectModalOpen] = useState(false)
-  const [selectedProjectMdFile, setSelectedProjectMdFile] = useState('')
-  const closeProjectModal = () => {
-    setProjectModalOpen(false)
-  }
-  const openProjectModal = () => {
-    setProjectModalOpen(true)
-  }
-
+const PortfolioViewPage: React.FC<PortfolioViewPageProps> = ({ portfolioData, userData }) => {
   const groupPortfolioSkillsByCategory = (skillIds: number[], skillDefines: any[]) => {
     return skillIds.reduce(
       (acc, skillId) => {
@@ -56,109 +33,18 @@ const PortfolioViewPage: React.FC<{ username?: string; id: number; isPublic?: bo
     )
   }
 
-  const getPortfolioData = async () => {
-    const token = localStorage.getItem('token')
-    if (!token && !isPublic) {
-      console.error('토큰이 만료되었습니다.')
-      router.push('/')
-      throw new Error('Token not found')
-    }
-
-    const url = isPublic ? `${apiUrl}/api/${username}/${id}` : `${apiUrl}/api/portfolio/${id}`
-    const headers: Record<string, string> = {}
-    if (!isPublic) {
-      headers.Authorization = `Bearer ${token}`
-    }
-
-    const response = await fetch(url, {
-      method: 'GET',
-      headers,
-    })
-
-    const res = await response.json()
-    if (response.status === 401) {
-      console.error('토큰이 만료되었습니다.')
-      localStorage.removeItem('token')
-      router.push('/')
-    }
-
-    if (response.ok) {
-      const portfolio = res.data
-
-      // API에서 얻은 데이터를 포트폴리오 state에 저장
-      setPortfolioData({
-        portfolioName: portfolio.file_name,
-        title: portfolio.title,
-        description: portfolio.description,
-        githubLink: portfolio.github_link,
-        blogLink: portfolio.blog_link,
-        image: portfolio.image ? `${apiUrl}/uploads/${portfolio.image}` : null,
-        skills: portfolio.portfolioSkills.map((skill: any) => skill.skill_id),
-        // eslint-disable-next-line no-underscore-dangle
-        projects: portfolio.__projects__.map((project: any) => ({
-          id: project.id,
-          name: project.name,
-          description: project.description,
-          githubLink: project.github_link,
-          siteLink: project.site_link,
-          startDate: project.start_date ? project.start_date.split('-').slice(0, 2).join('-') : '',
-          endDate: project.end_date ? project.end_date.split('-').slice(0, 2).join('-') : '',
-          image: project.image ? `${apiUrl}/uploads/${project.image}` : null,
-          readmeFile: project.readme_file ? `${apiUrl}/uploads/${project.readme_file}` : null,
-          skills: project.projectSkills.map((skill: any) => skill.skill_id),
-        })),
-      })
-    } else {
-      console.error('포트폴리오 불러오기 실패:', res.message)
-    }
+  const reduxSkills = useSelector((state: RootState) => state.skill.skills)
+  const [categorizedSkill, setCategorizedSkill] = useState<any>(null)
+  const [categorizedProjectSkill, setCategorizedProjectSkill] = useState<any>([])
+  const [projectModalOpen, setProjectModalOpen] = useState(false)
+  const [selectedProjectMdFile, setSelectedProjectMdFile] = useState('')
+  const closeProjectModal = () => {
+    setProjectModalOpen(false)
   }
-
-  const getUserData = async () => {
-    const token = localStorage.getItem('token')
-    if (!token && !isPublic) {
-      console.error('토큰이 만료되었습니다.')
-      router.push('/')
-      throw new Error('Token not found')
-    }
-
-    const url = isPublic ? `${apiUrl}/api/user/public/${username}` : `${apiUrl}/api/user`
-    const headers: Record<string, string> = {}
-    if (!isPublic) {
-      headers.Authorization = `Bearer ${token}`
-    }
-
-    const response = await fetch(url, {
-      method: 'GET',
-      headers,
-    })
-
-    const res = await response.json()
-    if (response.status === 401) {
-      console.error('토큰이 만료되었습니다.')
-      localStorage.removeItem('token')
-      router.push('/')
-    }
-
-    if (response.ok) {
-      const user = res.data
-      setUserData({
-        name: user.name,
-        email: user.email,
-        birthdate: user.birthdate,
-      })
-    } else {
-      console.error('포트폴리오 불러오기 실패:', res.message)
-    }
+  const openProjectModal = () => {
+    setProjectModalOpen(true)
   }
 
-  useEffect(() => {
-    const fetchData = async () => {
-      await getPortfolioData()
-      await getUserData()
-    }
-    fetchData()
-  }, [])
-
   useEffect(() => {
     if (portfolioData) {
       setCategorizedSkill(groupPortfolioSkillsByCategory(portfolioData.skills, reduxSkills))
diff --git a/src/types/data.ts b/src/types/data.ts
index 985d5bb..b14e93e 100644
--- a/src/types/data.ts
+++ b/src/types/data.ts
@@ -1,11 +1,6 @@
-interface Portfolio {
-  id: number
-  file_name: string
-}
-
 export interface DashboardProps {
   data: PortfolioBrief[]
-  onHover: (portfoil: Portfolio) => void
+  onHover: (portfolio: { id: number; file_name: string }) => void
   openDeletePortfolioModal: () => void
   handleExport: (arg: number) => void
 }
@@ -23,7 +18,7 @@ export interface Skill {
   category?: string
 }
 
-export interface Project {
+export interface ProjectInputProps {
   id: number
   name: string
   description: string
@@ -35,3 +30,38 @@ export interface Project {
   selectedTechStack: number[]
   readmeFile: File | null
 }
+
+export interface Project {
+  id: number
+  name: string
+  description: string
+  githubLink?: string
+  siteLink?: string
+  startDate: string
+  endDate: string
+  image?: string
+  readmeFile?: string
+  skills: number[]
+}
+
+export interface Portfolio {
+  portfolioName: string
+  title: string
+  description: string
+  githubLink: string
+  blogLink: string
+  image: string
+  skills: number[]
+  projects: Project[]
+}
+
+export interface User {
+  name: string
+  email: string
+  birthdate: string
+}
+
+export interface PortfolioViewPageProps {
+  portfolioData: Portfolio
+  userData: User
+}

From 48021075efabd7b365701560c0b2908ade357189 Mon Sep 17 00:00:00 2001
From: YerangPark <smsms_@naver.com>
Date: Wed, 16 Oct 2024 23:19:46 +0900
Subject: [PATCH 2/3] =?UTF-8?q?feat:=20=EB=B0=98=EC=9D=91=ED=98=95=20?=
 =?UTF-8?q?=EC=9B=B9=EC=9D=84=20=EC=9C=84=ED=95=B4=EC=84=9C=20=EB=AA=A8?=
 =?UTF-8?q?=EB=B0=94=EC=9D=BC=20=ED=99=98=EA=B2=BD=20=ED=98=B8=ED=99=98?=
 =?UTF-8?q?=EC=84=B1=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/molecules/BlurryImage.tsx      |  4 +-
 src/components/molecules/InputDateRange.tsx   |  2 +-
 src/components/molecules/InputFile.tsx        |  4 +-
 src/components/molecules/InputImage.tsx       |  4 +-
 src/components/molecules/InputTextbox.tsx     |  2 +-
 src/components/molecules/RoundButton.tsx      |  4 +-
 src/components/organisms/FindIdModal.tsx      |  7 ++-
 .../organisms/FindPasswordModal.tsx           |  8 ++-
 src/components/organisms/Footer.tsx           |  2 +-
 src/components/organisms/MainBanner.tsx       | 16 ++---
 src/components/organisms/MainContents.tsx     | 12 ++--
 src/components/organisms/MarkdownModal.tsx    |  1 -
 .../organisms/PortfolioInputForm.tsx          | 12 ++--
 .../organisms/PortfolioMainImageText.tsx      | 12 ++--
 .../organisms/ProjectInformation.tsx          |  3 +-
 src/components/organisms/ProjectInputForm.tsx |  4 +-
 .../templates/PortfolioFormPage.tsx           | 62 +++++++++++++------
 .../templates/PortfolioViewPage.tsx           | 24 ++++---
 src/types/style.ts                            |  6 +-
 19 files changed, 116 insertions(+), 73 deletions(-)

diff --git a/src/components/molecules/BlurryImage.tsx b/src/components/molecules/BlurryImage.tsx
index a8a4648..3c68916 100644
--- a/src/components/molecules/BlurryImage.tsx
+++ b/src/components/molecules/BlurryImage.tsx
@@ -6,8 +6,8 @@ interface BlurryImageProps {
   src: string
   alt: string
   overlayOpacity?: number
-  width?: string | number
-  height?: string | number
+  width?: string | number | (string | number)[]
+  height?: string | number | (string | number)[]
 }
 
 const BlurryImage: React.FC<BlurryImageProps> = ({
diff --git a/src/components/molecules/InputDateRange.tsx b/src/components/molecules/InputDateRange.tsx
index eb17041..74937bb 100644
--- a/src/components/molecules/InputDateRange.tsx
+++ b/src/components/molecules/InputDateRange.tsx
@@ -21,7 +21,7 @@ const InputDateRange: React.FC<DateRangeInputProps> = ({
   return (
     <FormControl mb={4}>
       <Flex align="center">
-        <FormLabel mb="0" width="150px">
+        <FormLabel mb="0" width={[110, 130, 150]}>
           {formLabel}
         </FormLabel>
         <Input
diff --git a/src/components/molecules/InputFile.tsx b/src/components/molecules/InputFile.tsx
index 05c4372..a697166 100644
--- a/src/components/molecules/InputFile.tsx
+++ b/src/components/molecules/InputFile.tsx
@@ -4,7 +4,7 @@ import { FiFilePlus } from 'react-icons/fi'
 
 interface InputFileProps {
   formLabel: string
-  placeholder: string
+  placeholder?: string
   onFileChange: (file: File | null) => void
   allowedExtensions: string[] // 허용된 파일 확장자
 }
@@ -30,7 +30,7 @@ const InputFile: React.FC<InputFileProps> = ({ formLabel, placeholder, onFileCha
   return (
     <FormControl mb={4}>
       <Flex align="center">
-        <FormLabel mb="0" width="150px">
+        <FormLabel mb="0" width={[110, 130, 150]}>
           {formLabel}
         </FormLabel>
         <InputGroup width="100%" flex="1">
diff --git a/src/components/molecules/InputImage.tsx b/src/components/molecules/InputImage.tsx
index dd12286..8ce9438 100644
--- a/src/components/molecules/InputImage.tsx
+++ b/src/components/molecules/InputImage.tsx
@@ -25,7 +25,7 @@ const InputImage: React.FC<InputImageProps> = ({ formLabel, image, alt, onImageC
   return (
     <FormControl mb={4}>
       <Box display="flex" alignItems="center">
-        <FormLabel mb="0" width="150px">
+        <FormLabel mb="0" width={[110, 130, 150]}>
           {formLabel}
         </FormLabel>
         <Box display="flex" alignItems="center">
@@ -33,7 +33,7 @@ const InputImage: React.FC<InputImageProps> = ({ formLabel, image, alt, onImageC
             <Image
               src={image instanceof File ? URL.createObjectURL(image) : image} // 파일 객체를 URL로 변환하여 이미지 미리보기
               alt={alt}
-              boxSize="150px"
+              boxSize={[100, 130, 150]}
               mr={4}
             />
           )}
diff --git a/src/components/molecules/InputTextbox.tsx b/src/components/molecules/InputTextbox.tsx
index 58824f2..ddc721c 100644
--- a/src/components/molecules/InputTextbox.tsx
+++ b/src/components/molecules/InputTextbox.tsx
@@ -12,7 +12,7 @@ const InputTextbox: React.FC<InputTextBoxProps> = ({ formLabel, placeHolder, val
   return (
     <FormControl mb={4}>
       <Flex align="center">
-        <FormLabel mb="0" width="150px">
+        <FormLabel mb="0" width={[110, 130, 150]} fontSize="base">
           {formLabel}
         </FormLabel>
         <Input
diff --git a/src/components/molecules/RoundButton.tsx b/src/components/molecules/RoundButton.tsx
index 2beb892..99c95a7 100644
--- a/src/components/molecules/RoundButton.tsx
+++ b/src/components/molecules/RoundButton.tsx
@@ -8,8 +8,8 @@ interface DefaultButtonProps {
   color: string
   size?: ResponsiveValue<string>
   fontSize?: ResponsiveValue<string> // fontSize를 추가
-  px?: number | string // 커스텀 padding-x
-  py?: number | string // 커스텀 padding-y
+  px?: number | string | (number | string)[] // 커스텀 padding-x
+  py?: number | string | (number | string)[] // 커스텀 padding-y
   fontWeight?: string
 }
 
diff --git a/src/components/organisms/FindIdModal.tsx b/src/components/organisms/FindIdModal.tsx
index db38def..a805dba 100644
--- a/src/components/organisms/FindIdModal.tsx
+++ b/src/components/organisms/FindIdModal.tsx
@@ -14,6 +14,7 @@ import {
   AlertIcon,
   AlertTitle,
   keyframes,
+  Spinner,
 } from '@chakra-ui/react'
 import { useState, ChangeEvent } from 'react'
 import Button from '../molecules/DefaultButton'
@@ -46,6 +47,7 @@ const FindIdModal: React.FC<FindIdModalProps> = ({ isOpen, onClose, openLoginMod
   const [resultMessage, setResultMessage] = useState<string | null>(null)
   const [isSuccess, setIsSuccess] = useState<boolean | null>(null)
   const [shakeKey, setShakeKey] = useState<number>(0)
+  const [loading, setLoading] = useState(false)
 
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
     setEmail(e.target.value)
@@ -54,6 +56,7 @@ const FindIdModal: React.FC<FindIdModalProps> = ({ isOpen, onClose, openLoginMod
   const handleSubmit = async () => {
     try {
       // 서버에 이메일 전송 요청
+      setLoading(true)
       const response = await fetch(`${apiUrl}/api/user/find-id`, {
         method: 'POST',
         headers: {
@@ -76,6 +79,8 @@ const FindIdModal: React.FC<FindIdModalProps> = ({ isOpen, onClose, openLoginMod
       setIsSuccess(false)
       setResultMessage('일치하는 정보가 없습니다.')
       setShakeKey((prev) => prev + 1)
+    } finally {
+      setLoading(false)
     }
   }
 
@@ -99,7 +104,7 @@ const FindIdModal: React.FC<FindIdModalProps> = ({ isOpen, onClose, openLoginMod
               <Input type="email" placeholder="이메일 입력" value={email} onChange={handleChange} />
             </FormControl>
 
-            <Button width="100%" onClick={handleSubmit} label="아이디 찾기" />
+            {loading ? <Spinner size="lg" /> : <Button width="100%" onClick={handleSubmit} label="아이디 찾기" />}
             {resultMessage && (
               <Alert status={isSuccess ? 'success' : 'error'} animation={`${shake} 0.5s`} key={shakeKey}>
                 <AlertIcon />
diff --git a/src/components/organisms/FindPasswordModal.tsx b/src/components/organisms/FindPasswordModal.tsx
index 5e9d4e0..2cf56c3 100644
--- a/src/components/organisms/FindPasswordModal.tsx
+++ b/src/components/organisms/FindPasswordModal.tsx
@@ -14,6 +14,7 @@ import {
   AlertIcon,
   AlertTitle,
   keyframes,
+  Spinner,
 } from '@chakra-ui/react'
 import { useState, ChangeEvent } from 'react'
 import Button from '../molecules/DefaultButton'
@@ -47,6 +48,7 @@ const FindPasswordModal: React.FC<FindPasswordModalProps> = ({ isOpen, onClose,
   const [resultMessage, setResultMessage] = useState<string | null>(null)
   const [isSuccess, setIsSuccess] = useState<boolean | null>(null)
   const [shakeKey, setShakeKey] = useState<number>(0)
+  const [loading, setLoading] = useState(false)
 
   const handleChangeEmail = (e: ChangeEvent<HTMLInputElement>) => {
     setEmail(e.target.value)
@@ -59,6 +61,7 @@ const FindPasswordModal: React.FC<FindPasswordModalProps> = ({ isOpen, onClose,
   const handleSubmit = async () => {
     try {
       // 서버에 아이디와 이메일 전송 요청
+      setLoading(true)
       const response = await fetch(`${apiUrl}/api/user/find-pw`, {
         method: 'POST',
         headers: {
@@ -81,6 +84,8 @@ const FindPasswordModal: React.FC<FindPasswordModalProps> = ({ isOpen, onClose,
       setIsSuccess(false)
       setResultMessage('일치하는 정보가 없습니다.')
       setShakeKey((prev) => prev + 1)
+    } finally {
+      setLoading(false)
     }
   }
 
@@ -115,7 +120,8 @@ const FindPasswordModal: React.FC<FindPasswordModalProps> = ({ isOpen, onClose,
               <Input type="email" placeholder="이메일 입력" value={email} onChange={handleChangeEmail} />
             </FormControl>
 
-            <Button width="100%" onClick={handleSubmit} label="비밀번호 찾기" />
+            {loading ? <Spinner size="lg" /> : <Button width="100%" onClick={handleSubmit} label="비밀번호 찾기" />}
+
             {resultMessage && (
               <Alert status={isSuccess ? 'success' : 'error'} animation={`${shake} 0.5s`} key={shakeKey}>
                 <AlertIcon />
diff --git a/src/components/organisms/Footer.tsx b/src/components/organisms/Footer.tsx
index 8366d8e..105abd8 100644
--- a/src/components/organisms/Footer.tsx
+++ b/src/components/organisms/Footer.tsx
@@ -7,7 +7,7 @@ const Footer: React.FC = () => {
     <Box as="footer" width="100%" py={7} bg="brand.primary2" color="brand.text2">
       <Flex direction={['column', 'row']} justify="space-between" align="center" maxW="1200px" mx="auto" px={5}>
         <Box textAlign={['center', 'left']} mb={[4, 0]}>
-          <Text fontWeight="bold" fontSize="lg">
+          <Text fontWeight="bold" fontSize={['sm', 'md', 'lg']}>
             © 2024 Folio
           </Text>
           <Text fontSize="sm">All rights reserved.</Text>
diff --git a/src/components/organisms/MainBanner.tsx b/src/components/organisms/MainBanner.tsx
index b2ad145..7b46b00 100644
--- a/src/components/organisms/MainBanner.tsx
+++ b/src/components/organisms/MainBanner.tsx
@@ -10,16 +10,16 @@ import BlurryImage from '../molecules/BlurryImage'
 
 const MainBanner: React.FC<{ openSignupModal: () => void }> = ({ openSignupModal }) => {
   return (
-    <Box position="relative" textAlign="center" height="700px" width="100%">
-      <BlurryImage src="/images/notebook.jpg" alt="Banner" overlayOpacity={0.5} height="700px" />
-      <Box position="absolute" top="50%" left="50%" transform="translate(-50%, -50%)" width="70%">
-        <Text fontSize="7xl" color="brand.text1" fontWeight="bold">
+    <Box position="relative" textAlign="center" height={[300, 500, 700]} width="100%">
+      <BlurryImage src="/images/notebook.jpg" alt="Banner" overlayOpacity={0.5} height={[300, 500, 700]} />
+      <Box position="absolute" top="50%" left="50%" transform="translate(-50%, -50%)" width="100%">
+        <Text fontSize={['3xl', '5xl', '7xl']} color="brand.text1" fontWeight="bold">
           <Text as="span" color="brand.primary1">
             개발자
           </Text>
           만을 위한
         </Text>
-        <Text fontSize="7xl" color="brand.text1" fontWeight="bold" mb={10}>
+        <Text fontSize={['3xl', '5xl', '7xl']} color="brand.text1" fontWeight="bold" mb={10}>
           <Text as="span" color="brand.primary1">
             {' '}
             포트폴리오
@@ -29,10 +29,10 @@ const MainBanner: React.FC<{ openSignupModal: () => void }> = ({ openSignupModal
         <RoundButton
           label="시작하기"
           color="brand.primary1"
-          px={24}
-          py={8}
+          px={[8, 16, 24]}
+          py={[4, 6, 8]}
           fontWeight="bold"
-          fontSize="3xl"
+          fontSize={['xl', '2xl', '3xl']}
           onClick={openSignupModal}
         />
       </Box>
diff --git a/src/components/organisms/MainContents.tsx b/src/components/organisms/MainContents.tsx
index cdd458c..f4fdc3d 100644
--- a/src/components/organisms/MainContents.tsx
+++ b/src/components/organisms/MainContents.tsx
@@ -60,14 +60,14 @@ const MainContents: React.FC<{ openSignupModal: () => void }> = ({ openSignupMod
           }}
           mt={index === 0 ? 0 : 150}
         >
-          <Heading content={content.heading1} fontSize="4xl" color="brand.text1" />
-          <Heading content={content.heading2} fontSize="4xl" color="brand.text1" />
+          <Heading content={content.heading1} fontSize={['2xl', '3xl', '4xl']} color="brand.text1" />
+          <Heading content={content.heading2} fontSize={['2xl', '3xl', '4xl']} color="brand.text1" />
           <Image src={content.image} alt={`example image ${index + 1}`} width="70%" mx="auto" />
         </Box>
       ))}
 
       <Box textAlign="center" mt={200}>
-        <Text fontSize="6xl" color="brand.text1" fontWeight="bold" mb={20}>
+        <Text fontSize={['3xl', '5xl', '6xl']} color="brand.text1" fontWeight="bold" mb={[15, 17, 20]}>
           <Text as="span" color="brand.primary1">
             나만의 포트폴리오
           </Text>
@@ -77,10 +77,10 @@ const MainContents: React.FC<{ openSignupModal: () => void }> = ({ openSignupMod
         <RoundButton
           label="포트폴리오 만들기"
           color="brand.primary1"
-          px={24}
-          py={8}
+          px={[8, 16, 24]}
+          py={[4, 6, 8]}
           fontWeight="bold"
-          fontSize="3xl"
+          fontSize={['xl', '2xl', '3xl']}
           onClick={openSignupModal}
         />
       </Box>
diff --git a/src/components/organisms/MarkdownModal.tsx b/src/components/organisms/MarkdownModal.tsx
index df64064..04af2a5 100644
--- a/src/components/organisms/MarkdownModal.tsx
+++ b/src/components/organisms/MarkdownModal.tsx
@@ -26,7 +26,6 @@ const fetchMarkdownContent = async (mdFilePath: string): Promise<string> => {
 const MarkdownModal: React.FC<MarkdownModalProps> = ({ isOpen, onClose, mdFilePath }) => {
   const [markdownContent, setMarkdownContent] = useState<string>('')
 
-  console.log(`mdFilePath : ${mdFilePath}`)
   // .md 파일 읽어오기
   useEffect(() => {
     if (isOpen && mdFilePath) {
diff --git a/src/components/organisms/PortfolioInputForm.tsx b/src/components/organisms/PortfolioInputForm.tsx
index 729addf..7ab0575 100644
--- a/src/components/organisms/PortfolioInputForm.tsx
+++ b/src/components/organisms/PortfolioInputForm.tsx
@@ -12,7 +12,6 @@ import {
   WrapItem,
   TagLabel,
   TagCloseButton,
-  HStack,
   InputGroup,
   InputRightElement,
   Icon,
@@ -130,7 +129,7 @@ const PortfolioInputForm: React.FC<PortfolioInputFormProps> = ({
   }
 
   return (
-    <Box px={8}>
+    <Box px={[2, 4, 8]}>
       {/* 기본 설정 */}
       <Text fontSize="xl" fontWeight="bold" mt={3}>
         기본 설정
@@ -156,7 +155,7 @@ const PortfolioInputForm: React.FC<PortfolioInputFormProps> = ({
         image={image}
         alt="대표 사진 미리보기"
         onImageChange={setImage}
-        buttonLabel="대표 사진 추가"
+        buttonLabel="사진 추가"
       />
       {/* 임베드 링크 */}
       <Text fontSize="xl" fontWeight="bold" mt={20}>
@@ -189,7 +188,7 @@ const PortfolioInputForm: React.FC<PortfolioInputFormProps> = ({
       </InformationBox>
 
       {/* 기술 스택 popular */}
-      <HStack spacing={4} mb={4}>
+      <Wrap spacing={4} mb={4}>
         {popularSkills.map((skill) => {
           const isSelected = selectedTechStack.includes(skill.id)
           return (
@@ -202,12 +201,15 @@ const PortfolioInputForm: React.FC<PortfolioInputFormProps> = ({
               onClick={() => handleSkillClick(skill.id)}
               rightIcon={isSelected ? <FiCheck /> : <FiPlus />}
               fontWeight="normal"
+              whiteSpace="nowrap"
+              width="auto"
+              px={[3, 4, 5]}
             >
               {skill.name}
             </Button>
           )
         })}
-      </HStack>
+      </Wrap>
 
       {/* 기술 스택 검색 */}
       <FormControl mb={4}>
diff --git a/src/components/organisms/PortfolioMainImageText.tsx b/src/components/organisms/PortfolioMainImageText.tsx
index 6aadbe9..cc605bb 100644
--- a/src/components/organisms/PortfolioMainImageText.tsx
+++ b/src/components/organisms/PortfolioMainImageText.tsx
@@ -8,11 +8,13 @@ import BlurryImage from '../molecules/BlurryImage'
 const PortfolioMainImageText: React.FC<{ image: string; text: string }> = ({ image, text }) => {
   return (
     <Box position="relative" textAlign="center" width="100%">
-      <BlurryImage src={image || '/images/notebook.jpg'} alt="Banner" overlayOpacity={0.5} height="700px" />
-      <Box position="absolute" top="50%" left="50%" transform="translate(-50%, -50%)" width="90%">
-        <Text fontSize="7xl" color="brand.text1" fontWeight="bold">
-          {text}
-        </Text>
+      <Box height={[300, 500, 700]} position="relative">
+        <BlurryImage src={image || '/images/notebook.jpg'} alt="Banner" overlayOpacity={0.5} height={[300, 500, 700]} />
+        <Box position="absolute" top="50%" left="50%" transform="translate(-50%, -50%)" width="100%">
+          <Text fontSize={['3xl', '5xl', '7xl']} color="brand.text1" fontWeight="bold">
+            {text}
+          </Text>
+        </Box>
       </Box>
       <Box>
         <Image src="/images/scrollIcon.png" height="40px" width="80px" alt="scroll" mt={10} mx="auto" />
diff --git a/src/components/organisms/ProjectInformation.tsx b/src/components/organisms/ProjectInformation.tsx
index 7369b13..e51bcc1 100644
--- a/src/components/organisms/ProjectInformation.tsx
+++ b/src/components/organisms/ProjectInformation.tsx
@@ -17,7 +17,6 @@ const ProjectInformation: React.FC<ProjectInformationProps> = ({
   blogLink,
   skills,
 }) => {
-  console.log(skills)
   return (
     <>
       <OutputDateRange formLabel="> 개발 기간" startDate={startDate} endDate={endDate} />
@@ -28,7 +27,7 @@ const ProjectInformation: React.FC<ProjectInformationProps> = ({
         Object.entries(skills).map(([category, skillNames]) => (
           <Box key={category} mb={4}>
             <Flex align="center">
-              <Text mb="0" width="150px" fontWeight="bold" align="left">
+              <Text mb="0" width={[110, 130, 150]} fontWeight="bold" align="left">
                 {'>'} {category.charAt(0).toUpperCase() + category.slice(1)}
               </Text>
               <Flex wrap="wrap" gap={4} justify="flex-start">
diff --git a/src/components/organisms/ProjectInputForm.tsx b/src/components/organisms/ProjectInputForm.tsx
index 79d0712..b7bfcef 100644
--- a/src/components/organisms/ProjectInputForm.tsx
+++ b/src/components/organisms/ProjectInputForm.tsx
@@ -215,7 +215,7 @@ const ProjectInputForm: React.FC<ProjectInputFormProps> = ({ projects, setProjec
 
           <Box mb={4}>
             <Flex align="center">
-              <FormLabel mb="0" width="150px" />
+              <FormLabel mb="0" width={[110, 130, 150]} />
               {searchQuery &&
                 (searchResults.length > 0 ? (
                   <List spacing={2} borderWidth="1px" borderRadius="md" p={4} width="100" flex="1">
@@ -239,7 +239,7 @@ const ProjectInputForm: React.FC<ProjectInputFormProps> = ({ projects, setProjec
 
           <FormControl mb={4}>
             <Flex align="center">
-              <FormLabel mb="0" width="150px" />
+              <FormLabel mb="0" width={[110, 130, 150]} />
               <Box
                 borderWidth="1px"
                 borderRadius="md"
diff --git a/src/components/templates/PortfolioFormPage.tsx b/src/components/templates/PortfolioFormPage.tsx
index 56cf226..98c6f18 100644
--- a/src/components/templates/PortfolioFormPage.tsx
+++ b/src/components/templates/PortfolioFormPage.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import React, { useEffect, useState } from 'react'
-import { Box, Divider } from '@chakra-ui/react'
+import { Box, Divider, Spinner } from '@chakra-ui/react'
 import { ProjectInputProps } from '@/types/data'
 import { useRouter } from 'next/navigation'
 import DashboardNavBar from '../organisms/DashboardNavBar'
@@ -36,6 +36,7 @@ const PortfolioFormPage: React.FC<PortfolioFormPageProps> = ({ id }) => {
   const [githubLink, setGithubLink] = useState('')
   const [blogLink, setBlogLink] = useState('')
   const [selectedTechStack, setSelectedTechStack] = useState<number[]>([])
+  const [loading, setLoading] = useState(false)
 
   // Project Page States
   const [projects, setProjects] = useState<ProjectInputProps[]>([])
@@ -113,26 +114,31 @@ const PortfolioFormPage: React.FC<PortfolioFormPageProps> = ({ id }) => {
   }
 
   const updatePortfolio = async (token: any, formData: any) => {
-    const response = await fetch(`${apiUrl}/api/portfolio/${id}`, {
-      method: 'PATCH',
-      headers: {
-        Authorization: `Bearer ${token}`,
-      },
-      body: formData,
-    })
+    try {
+      setLoading(true)
+      const response = await fetch(`${apiUrl}/api/portfolio/${id}`, {
+        method: 'PATCH',
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+        body: formData,
+      })
 
-    const res = await response.json()
-    if (response.status === 401) {
-      console.error('토큰이 만료되었습니다.')
-      localStorage.removeItem('token')
-      router.push('/')
-    }
+      const res = await response.json()
+      if (response.status === 401) {
+        console.error('토큰이 만료되었습니다.')
+        localStorage.removeItem('token')
+        router.push('/')
+      }
 
-    if (response.ok) {
-      console.log('포트폴리오 저장 성공:', res)
-      router.push('/dashboard')
-    } else {
-      console.error('포트폴리오 저장 실패:', res.message)
+      if (response.ok) {
+        console.log('포트폴리오 저장 성공:', res)
+        router.push('/dashboard')
+      } else {
+        console.error('포트폴리오 저장 실패:', res.message)
+      }
+    } finally {
+      setLoading(false)
     }
   }
 
@@ -230,9 +236,25 @@ const PortfolioFormPage: React.FC<PortfolioFormPageProps> = ({ id }) => {
 
   return (
     <div>
+      {loading && (
+        <Box
+          position="fixed"
+          top="0"
+          left="0"
+          width="100vw"
+          height="100vh"
+          backgroundColor="rgba(0, 0, 0, 0.5)"
+          display="flex"
+          alignItems="center"
+          justifyContent="center"
+          zIndex="9999"
+        >
+          <Spinner size="xl" color="white" />
+        </Box>
+      )}
       <DashboardNavBar />
       <hr />
-      <Box mx="10" mt="5">
+      <Box mx={[3, 7, 10]} mt="5">
         {isEditMode ? (
           <Heading content="포트폴리오 수정" fontSize="2xl" color="brand.text1" />
         ) : (
diff --git a/src/components/templates/PortfolioViewPage.tsx b/src/components/templates/PortfolioViewPage.tsx
index c9daddd..b662266 100644
--- a/src/components/templates/PortfolioViewPage.tsx
+++ b/src/components/templates/PortfolioViewPage.tsx
@@ -115,15 +115,23 @@ const PortfolioViewPage: React.FC<PortfolioViewPageProps> = ({ portfolioData, us
         </Heading>
         <VStack gap={8}>
           {portfolioData.projects.map((project: any, index: number) => (
-            <Box w="90%" borderWidth="1px" borderRadius="md" p={4} bg="white" shadow="md" key={project.id}>
-              <Flex>
-                <Box w="50%">
+            <Box
+              w={['90%', '70%', '70%']}
+              borderWidth="1px"
+              borderRadius="md"
+              p={4}
+              bg="white"
+              shadow="md"
+              key={project.id}
+            >
+              <Heading fontSize="xl" my={[3, 5, 5]}>
+                {project.name}
+              </Heading>
+              <Flex direction={['column', 'row']}>
+                <Box w={['100%', '50%']}>
                   <Image src={project.image} alt={project.name} mb={4} />
                 </Box>
-                <Box w="50%">
-                  <Heading fontSize="xl" my={10}>
-                    {project.name}
-                  </Heading>
+                <Box w={['100%', '50%', '50%']}>
                   <Text mb={10} textAlign="left">
                     {project.description}
                   </Text>
@@ -134,7 +142,7 @@ const PortfolioViewPage: React.FC<PortfolioViewPageProps> = ({ portfolioData, us
                     skills={categorizedProjectSkill[index]}
                   />
                   {project.readmeFile && (
-                    <Box w="100%" marginRight="auto">
+                    <Box w={['100%', '50%', '50%']} marginRight="auto">
                       <Button
                         onClick={() => {
                           setSelectedProjectMdFile(project.readmeFile)
diff --git a/src/types/style.ts b/src/types/style.ts
index 2a517ae..4b38814 100644
--- a/src/types/style.ts
+++ b/src/types/style.ts
@@ -10,8 +10,8 @@ export interface ButtonProps {
   borderRadius?: string | number
   size?: ResponsiveValue<string>
   fontSize?: ResponsiveValue<string>
-  px?: number | string
-  py?: number | string
+  px?: number | string | (number | string)[]
+  py?: number | string | (number | string)[]
   fontWeight?: string
   mr?: number | string
   width?: string | number
@@ -37,7 +37,7 @@ export interface InputProps {
 
 export interface TextProps {
   content: string
-  fontSize?: string
+  fontSize?: string | (number | string)[]
   color?: string
   fontWeight?: string
   mt?: number | string // margin-top

From 279007625aa9c50db3ecb03a0602dd995cc4c836 Mon Sep 17 00:00:00 2001
From: YerangPark <smsms_@naver.com>
Date: Wed, 16 Oct 2024 23:20:22 +0900
Subject: [PATCH 3/3] =?UTF-8?q?fix:=20=ED=8F=AC=ED=8A=B8=ED=8F=B4=EB=A6=AC?=
 =?UTF-8?q?=EC=98=A4=20Public=20=EB=AF=B8=EB=A6=AC=EB=B3=B4=EA=B8=B0=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=8A=A4=ED=82=AC=20=EC=95=88?=
 =?UTF-8?q?=EB=B3=B4=EC=9D=B4=EB=8A=94=20=EB=AC=B8=EC=A0=9C=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95(SSR=20+=20Redux=EA=B4=80=EB=A0=A8)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                              | 13 +++++++++++++
 package.json                                   |  2 ++
 src/components/organisms/ProjectInputForm.tsx  |  4 ++--
 src/components/templates/PortfolioViewPage.tsx |  4 ++--
 4 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 36024c4..9276df8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,11 +13,13 @@
         "date-fns": "^4.1.0",
         "framer-motion": "^11.9.0",
         "next": "^14.2.15",
+        "next-redux-wrapper": "^8.1.0",
         "react": "^18",
         "react-dom": "^18",
         "react-icons": "^5.3.0",
         "react-markdown": "^9.0.1",
         "react-redux": "^9.1.2",
+        "redux": "^5.0.1",
         "rehype-raw": "^7.0.0",
         "remark-gfm": "^4.0.0"
       },
@@ -6969,6 +6971,17 @@
         }
       }
     },
+    "node_modules/next-redux-wrapper": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/next-redux-wrapper/-/next-redux-wrapper-8.1.0.tgz",
+      "integrity": "sha512-2hIau0hcI6uQszOtrvAFqgc0NkZegKYhBB7ZAKiG3jk7zfuQb4E7OV9jfxViqqojh3SEHdnFfPkN9KErttUKuw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "next": ">=9",
+        "react": "*",
+        "react-redux": "*"
+      }
+    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
diff --git a/package.json b/package.json
index c8a5a32..b0dd8e9 100644
--- a/package.json
+++ b/package.json
@@ -14,11 +14,13 @@
     "date-fns": "^4.1.0",
     "framer-motion": "^11.9.0",
     "next": "^14.2.15",
+    "next-redux-wrapper": "^8.1.0",
     "react": "^18",
     "react-dom": "^18",
     "react-icons": "^5.3.0",
     "react-markdown": "^9.0.1",
     "react-redux": "^9.1.2",
+    "redux": "^5.0.1",
     "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.0"
   },
diff --git a/src/components/organisms/ProjectInputForm.tsx b/src/components/organisms/ProjectInputForm.tsx
index b7bfcef..bb4ca15 100644
--- a/src/components/organisms/ProjectInputForm.tsx
+++ b/src/components/organisms/ProjectInputForm.tsx
@@ -159,7 +159,7 @@ const ProjectInputForm: React.FC<ProjectInputFormProps> = ({ projects, setProjec
             onImageChange={(image) =>
               setProjects((prev) => prev.map((p) => (p.id === project.id ? { ...p, image } : p)))
             }
-            buttonLabel="대표 사진 추가"
+            buttonLabel="사진 추가"
           />
           <InputDateRange
             formLabel="진행 기간*"
@@ -198,7 +198,7 @@ const ProjectInputForm: React.FC<ProjectInputFormProps> = ({ projects, setProjec
           />
           <FormControl mb={4}>
             <InputGroup>
-              <FormLabel mb="0" width="150px">
+              <FormLabel mb="0" width={[110, 130, 150]}>
                 사용 기술 스택
               </FormLabel>
               <Input
diff --git a/src/components/templates/PortfolioViewPage.tsx b/src/components/templates/PortfolioViewPage.tsx
index b662266..a0b9672 100644
--- a/src/components/templates/PortfolioViewPage.tsx
+++ b/src/components/templates/PortfolioViewPage.tsx
@@ -46,14 +46,14 @@ const PortfolioViewPage: React.FC<PortfolioViewPageProps> = ({ portfolioData, us
   }
 
   useEffect(() => {
-    if (portfolioData) {
+    if (portfolioData && reduxSkills) {
       setCategorizedSkill(groupPortfolioSkillsByCategory(portfolioData.skills, reduxSkills))
       const tmp = portfolioData.projects.map((project: any) =>
         groupPortfolioSkillsByCategory(project.skills, reduxSkills),
       )
       setCategorizedProjectSkill(tmp)
     }
-  }, [portfolioData])
+  }, [portfolioData, reduxSkills]) // portfolioData나 reduxSkills가 변경될 때만 실행
 
   if (!portfolioData) {
     return <Text>Loading...</Text>