From 860f2d9a04334b08743e2076c92e40642778328e Mon Sep 17 00:00:00 2001
From: Yeongjun Kim <kyjun519@gmail.com>
Date: Fri, 3 Nov 2023 04:43:50 +0900
Subject: [PATCH 01/38] =?UTF-8?q?style:=20#43=20-=20LinkList=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=A7=88=EC=A7=80=EB=A7=89=20?=
 =?UTF-8?q?=EB=A6=AC=EC=8A=A4=ED=8A=B8=EC=97=90=20border=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/LinkList/LinkList.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/common/LinkList/LinkList.tsx b/src/components/common/LinkList/LinkList.tsx
index 6a74e949..b48e356c 100644
--- a/src/components/common/LinkList/LinkList.tsx
+++ b/src/components/common/LinkList/LinkList.tsx
@@ -29,7 +29,7 @@ const LinkList = ({
     <div
       className={cls(
         type === 'list'
-          ? 'flex flex-col border-slate3 last:border-b'
+          ? 'flex flex-col border border-slate3 last:border-b'
           : 'grid grid-cols-2 gap-2',
       )}>
       <button

From 019d4e4d5dd3f95fe84b7fc240d7388b8435dd2c Mon Sep 17 00:00:00 2001
From: Yeongjun Kim <kyjun519@gmail.com>
Date: Fri, 3 Nov 2023 04:46:01 +0900
Subject: [PATCH 02/38] =?UTF-8?q?style:=20#43=20-=20LinkItem=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=88=98=EC=A7=81=20=EC=A0=95?=
 =?UTF-8?q?=EB=A0=AC=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/LinkItem/LinkItem.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/common/LinkItem/LinkItem.tsx b/src/components/common/LinkItem/LinkItem.tsx
index 468f7f23..b4b6cbd3 100644
--- a/src/components/common/LinkItem/LinkItem.tsx
+++ b/src/components/common/LinkItem/LinkItem.tsx
@@ -45,7 +45,7 @@ const LinkItem = ({
   return (
     <>
       {type === 'list' ? (
-        <div className="flex justify-between gap-2 border-t border-slate3 px-3 py-2">
+        <div className="flex items-center justify-between gap-2 border-t border-slate3 px-3 py-2">
           <div className="cursor-pointer overflow-hidden text-ellipsis whitespace-nowrap text-sm font-medium text-gray9">
             {title}
           </div>

From 8bb0ada18a8783f5ff04602ee5003e447b207ef8 Mon Sep 17 00:00:00 2001
From: Yeongjun Kim <kyjun519@gmail.com>
Date: Fri, 3 Nov 2023 13:08:07 +0900
Subject: [PATCH 03/38] =?UTF-8?q?feat:=20#43=20-=20=EC=8A=A4=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=8A=A4=20=EC=83=81=EC=84=B8=20=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/(routes)/space/[spaceId]/page.tsx | 127 +++++++++++++++++++++-
 1 file changed, 126 insertions(+), 1 deletion(-)

diff --git a/src/app/(routes)/space/[spaceId]/page.tsx b/src/app/(routes)/space/[spaceId]/page.tsx
index e2bc684b..e454008a 100644
--- a/src/app/(routes)/space/[spaceId]/page.tsx
+++ b/src/app/(routes)/space/[spaceId]/page.tsx
@@ -1,5 +1,130 @@
+'use client'
+
+import { useState } from 'react'
+import { Dropdown, LinkList, SpaceMemberList } from '@/components'
+import Button from '@/components/common/Button/Button'
+import Space from '@/components/common/Space/Space'
+import Tab from '@/components/common/Tab/Tab'
+import TabItem from '@/components/common/Tab/TabItem'
+import { mock_LinkData, mock_memberData } from '@/data'
+import { PencilSquareIcon } from '@heroicons/react/24/outline'
+import {
+  EyeIcon,
+  ListBulletIcon,
+  PlusSmallIcon,
+  Squares2X2Icon,
+} from '@heroicons/react/24/solid'
+
 const SpacePage = () => {
-  return <></>
+  const [currentTab, setCurrentTab] = useState(0)
+  const [view, setView] = useState<'list' | 'card' | undefined>('list')
+  const [isEdit, setIsEdit] = useState(false)
+  const user = 'dudwns'
+  const spaceObj = {
+    userName: 'dudwns',
+    spaceId: '123',
+    spaceImage: '/TestImage.svg',
+    spaceName: '강남역 맛집 리스트 모음 스페이스',
+    description: '내 기준 강남역에서 맛있는 맛집 링크 모음집',
+    category: '생활•노하우•쇼핑',
+    favorite: 60,
+    scrap: 40,
+    comment: true,
+  }
+
+  const tabArr = [
+    { text: '스페이스', content: '스페이스 페이지', dest: '/space/123' },
+    { text: '댓글', content: '댓글 페이지', dest: '/space/123/comment' },
+    { text: '설정', content: '설정 페이지', dest: '/space/123/setting' },
+  ]
+
+  const handleEditSpace = () => {
+    setIsEdit(true)
+  }
+  return (
+    <>
+      <Space
+        type="Header"
+        userName={spaceObj.userName}
+        spaceName={spaceObj.spaceName}
+        spaceImage={spaceObj.spaceImage}
+        description={spaceObj.description}
+        category={spaceObj.category}
+        scrap={spaceObj.scrap}
+        favorite={spaceObj.favorite}
+      />
+      {user === spaceObj.userName && (
+        <Tab>
+          {tabArr.map((tabItem, index) => (
+            <TabItem
+              key={index}
+              active={currentTab === index ? true : false}
+              dest={tabItem.dest}
+              text={tabItem.text}
+              onClick={() => setCurrentTab(index)}
+            />
+          ))}
+        </Tab>
+      )}
+      <div className="flex items-center justify-between py-3">
+        <div className="flex items-center gap-1.5">
+          <Dropdown
+            type="tag"
+            tags={['JavaScript', 'TypeScript', 'Java', 'Python']}
+            size="medium"
+            placement="left"
+            onChange={(e) => {
+              console.log(e?.currentTarget.value)
+            }}
+          />
+          <Dropdown
+            type="space"
+            size="medium"
+            placement="left"
+            onChange={(e) => {
+              console.log(e?.currentTarget.value)
+            }}
+          />
+        </div>
+        <div className="flex gap-2">
+          <Button
+            className="button button-white p-1.5"
+            onClick={() => setIsEdit((prev) => !prev)}>
+            {isEdit ? (
+              <EyeIcon className="h-5 w-5" />
+            ) : (
+              <PencilSquareIcon className="h-5 w-5" />
+            )}
+          </Button>
+          <div>
+            <Button
+              className="rounded-md rounded-r-none border border-slate3 bg-emerald5 p-1.5 text-sm font-bold text-white"
+              onClick={() => setView('list')}>
+              <ListBulletIcon className="h-5 w-5" />
+            </Button>
+            <Button
+              className="rounded-md rounded-l-none border border-slate3  bg-slate4 p-1.5 text-sm font-bold text-white"
+              onClick={() => setView('card')}>
+              <Squares2X2Icon className="h-5 w-5" />
+            </Button>
+          </div>
+        </div>
+      </div>
+      <LinkList
+        links={mock_LinkData}
+        read={true}
+        summary={true}
+        edit={isEdit}
+        type={view}
+      />
+      <div className="flex justify-center py-2">
+        <Button className="button button-round button-white">
+          <PlusSmallIcon className="h-4 w-4" /> 더보기
+        </Button>
+      </div>
+      <SpaceMemberList members={mock_memberData} />
+    </>
+  )
 }
 
 export default SpacePage

From ccfb4fc2a27474b95a70380a7125732178cdbfde Mon Sep 17 00:00:00 2001
From: Yeongjun Kim <kyjun519@gmail.com>
Date: Fri, 3 Nov 2023 22:38:25 +0900
Subject: [PATCH 04/38] =?UTF-8?q?chore:=20#43=20-=20open-graph-scraper=20?=
 =?UTF-8?q?=EC=84=A4=EC=B9=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json | 228 ++++++++++++++++++++++++++++++++++++++++++++++
 package.json      |   1 +
 2 files changed, 229 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index 8bbec7a0..f3bf0b4b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
         "@heroicons/react": "^2.0.18",
         "next": "13.5.6",
         "next-themes": "^0.2.1",
+        "open-graph-scraper": "^6.3.2",
         "react": "^18",
         "react-dom": "^18",
         "react-hook-form": "^7.47.0"
@@ -522,6 +523,14 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@fastify/busboy": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@fastify/busboy/-/busboy-2.0.0.tgz",
+      "integrity": "sha512-JUFJad5lv7jxj926GPgymrWQxxjPYuJNiNjNMzqT+HiuP6Vl3dk5xzG+8sTX96np0ZAluvaMzPsjhHZ5rNuNQQ==",
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/@heroicons/react": {
       "version": "2.0.18",
       "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.0.18.tgz",
@@ -1342,6 +1351,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/boolbase": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+      "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww=="
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -1474,6 +1488,47 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/chardet": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/chardet/-/chardet-2.0.0.tgz",
+      "integrity": "sha512-xVgPpulCooDjY6zH4m9YW3jbkaBe3FKIAvF5sj5t7aBNsVl2ljIE+xwJ4iNgiDZHFQvNIpjdKdVOQvvk5ZfxbQ=="
+    },
+    "node_modules/cheerio": {
+      "version": "1.0.0-rc.12",
+      "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0-rc.12.tgz",
+      "integrity": "sha512-VqR8m68vM46BNnuZ5NtnGBKIE/DfN0cRIzg9n40EIq9NOv90ayxLBXA8fXC5gquFRGJSTRqBq25Jt2ECLR431Q==",
+      "dependencies": {
+        "cheerio-select": "^2.1.0",
+        "dom-serializer": "^2.0.0",
+        "domhandler": "^5.0.3",
+        "domutils": "^3.0.1",
+        "htmlparser2": "^8.0.1",
+        "parse5": "^7.0.0",
+        "parse5-htmlparser2-tree-adapter": "^7.0.0"
+      },
+      "engines": {
+        "node": ">= 6"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/cheerio?sponsor=1"
+      }
+    },
+    "node_modules/cheerio-select": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/cheerio-select/-/cheerio-select-2.1.0.tgz",
+      "integrity": "sha512-9v9kG0LvzrlcungtnJtpGNxY+fzECQKhK4EGJX2vByejiMX84MFNQw4UxPJl3bFbTMw+Dfs37XaIkCwTZfLh4g==",
+      "dependencies": {
+        "boolbase": "^1.0.0",
+        "css-select": "^5.1.0",
+        "css-what": "^6.1.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3",
+        "domutils": "^3.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
     "node_modules/chokidar": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@@ -1602,6 +1657,32 @@
         "node": ">= 8"
       }
     },
+    "node_modules/css-select": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz",
+      "integrity": "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==",
+      "dependencies": {
+        "boolbase": "^1.0.0",
+        "css-what": "^6.1.0",
+        "domhandler": "^5.0.2",
+        "domutils": "^3.0.1",
+        "nth-check": "^2.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/css-what": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
+      "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==",
+      "engines": {
+        "node": ">= 6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -1725,6 +1806,57 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/dom-serializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "entities": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/domelementtype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ]
+    },
+    "node_modules/domhandler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "dependencies": {
+        "domelementtype": "^2.3.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/domutils": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz",
+      "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==",
+      "dependencies": {
+        "dom-serializer": "^2.0.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
     "node_modules/eastasianwidth": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
@@ -1756,6 +1888,17 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
     "node_modules/es-abstract": {
       "version": "1.22.3",
       "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.22.3.tgz",
@@ -2788,6 +2931,24 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/htmlparser2": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.2.tgz",
+      "integrity": "sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==",
+      "funding": [
+        "https://github.com/fb55/htmlparser2?sponsor=1",
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3",
+        "domutils": "^3.0.1",
+        "entities": "^4.4.0"
+      }
+    },
     "node_modules/human-signals": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-5.0.0.tgz",
@@ -3760,6 +3921,17 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/nth-check": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
+      "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
+      "dependencies": {
+        "boolbase": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/nth-check?sponsor=1"
+      }
+    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -3911,6 +4083,20 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/open-graph-scraper": {
+      "version": "6.3.2",
+      "resolved": "https://registry.npmjs.org/open-graph-scraper/-/open-graph-scraper-6.3.2.tgz",
+      "integrity": "sha512-3HbQwpSZ42hqqpDmZ3ZUOCuS1TuKqRWm6gEIw/HfqWDzwHaEJJR/WGi1prHD2gBaKYPjAHFaSTjKitJHTwMVPA==",
+      "dependencies": {
+        "chardet": "^2.0.0",
+        "cheerio": "^1.0.0-rc.12",
+        "undici": "^5.26.4",
+        "validator": "^13.11.0"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
     "node_modules/optionator": {
       "version": "0.9.3",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.3.tgz",
@@ -3970,6 +4156,29 @@
         "node": ">=6"
       }
     },
+    "node_modules/parse5": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz",
+      "integrity": "sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==",
+      "dependencies": {
+        "entities": "^4.4.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
+    "node_modules/parse5-htmlparser2-tree-adapter": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-7.0.0.tgz",
+      "integrity": "sha512-B77tOZrqqfUfnVcOrUvfdLbz4pu4RopLD/4vmu3HUPswwTA8OH0EMW9BlWR2B0RCoiZRAHEUu7IxeP1Pd1UU+g==",
+      "dependencies": {
+        "domhandler": "^5.0.2",
+        "parse5": "^7.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
     "node_modules/path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -5258,6 +5467,17 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/undici": {
+      "version": "5.27.0",
+      "resolved": "https://registry.npmjs.org/undici/-/undici-5.27.0.tgz",
+      "integrity": "sha512-l3ydWhlhOJzMVOYkymLykcRRXqbUaQriERtR70B9LzNkZ4bX52Fc8wbTDneMiwo8T+AemZXvXaTx+9o5ROxrXg==",
+      "dependencies": {
+        "@fastify/busboy": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=14.0"
+      }
+    },
     "node_modules/undici-types": {
       "version": "5.25.3",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.25.3.tgz",
@@ -5309,6 +5529,14 @@
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
       "dev": true
     },
+    "node_modules/validator": {
+      "version": "13.11.0",
+      "resolved": "https://registry.npmjs.org/validator/-/validator-13.11.0.tgz",
+      "integrity": "sha512-Ii+sehpSfZy+At5nPdnyMhx78fEoPDkR2XW/zimHEL3MyGJQOCQ7WeP20jPYRz7ZCpcKLB21NxuXHF3bxjStBQ==",
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
     "node_modules/watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
diff --git a/package.json b/package.json
index dd8d795b..cff9b38c 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "@heroicons/react": "^2.0.18",
     "next": "13.5.6",
     "next-themes": "^0.2.1",
+    "open-graph-scraper": "^6.3.2",
     "react": "^18",
     "react-dom": "^18",
     "react-hook-form": "^7.47.0"

From 2331c9a5a228d964fe9e96f0a4d66018f2966d0c Mon Sep 17 00:00:00 2001
From: Yeongjun Kim <kyjun519@gmail.com>
Date: Fri, 3 Nov 2023 22:39:17 +0900
Subject: [PATCH 05/38] =?UTF-8?q?style:=20#43=20-=20=EB=AA=A8=EB=8B=AC?=
 =?UTF-8?q?=EC=9D=98=20z-index=EB=A5=BC=2050=EC=9C=BC=EB=A1=9C=20=EC=84=A4?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/Modal/Modal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/common/Modal/Modal.tsx b/src/components/common/Modal/Modal.tsx
index 3a23e45c..d3aef603 100644
--- a/src/components/common/Modal/Modal.tsx
+++ b/src/components/common/Modal/Modal.tsx
@@ -43,7 +43,7 @@ const Modal = ({
           <div
             ref={modalRef}
             onClick={handleClickOverlay}
-            className="fixed left-0 right-0 top-0 mx-auto flex h-screen w-full max-w-[500px] flex-col justify-center bg-black/40 px-4">
+            className="fixed left-0 right-0 top-0 z-50 mx-auto flex h-screen w-full max-w-[500px] flex-col justify-center bg-black/40 px-4">
             <div className="flex w-full flex-col gap-2 rounded-xl border border-gray3 bg-bgColor p-4 shadow-md">
               <div className="flex items-center justify-between">
                 <div className="text-base font-semibold text-gray9">

From f21b98faf1f24d95175d05f1169331eef202e58d Mon Sep 17 00:00:00 2001
From: Yeongjun Kim <kyjun519@gmail.com>
Date: Sat, 4 Nov 2023 02:41:28 +0900
Subject: [PATCH 06/38] =?UTF-8?q?feat:=20#43=20-=20=EB=A7=81=ED=81=AC=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95,=20=EC=82=AD=EC=A0=9C=20=EB=B2=84=ED=8A=BC?=
 =?UTF-8?q?=EC=97=90=20=EB=AA=A8=EB=8B=AC=20=EC=97=B0=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/LinkItem/LinkItem.tsx | 47 ++++++++++++++++++++-
 1 file changed, 45 insertions(+), 2 deletions(-)

diff --git a/src/components/common/LinkItem/LinkItem.tsx b/src/components/common/LinkItem/LinkItem.tsx
index b4b6cbd3..9deaf495 100644
--- a/src/components/common/LinkItem/LinkItem.tsx
+++ b/src/components/common/LinkItem/LinkItem.tsx
@@ -1,5 +1,7 @@
 'use client'
 
+import { useState } from 'react'
+import { useModal } from '@/hooks'
 import { cls } from '@/utils'
 import {
   DocumentTextIcon,
@@ -12,6 +14,7 @@ import Avatar from '../Avatar/Avatar'
 import AvatarGroup from '../AvatarGroup/AvatarGroup'
 import Button from '../Button/Button'
 import Chip from '../Chip/Chip'
+import Input from '../Input/Input'
 import useToggle from '../Toggle/hooks/useToggle'
 
 export interface User {
@@ -41,9 +44,39 @@ const LinkItem = ({
   type = 'list',
 }: LinkItemProps) => {
   const [isLike, likeToggle] = useToggle()
+  const { Modal, isOpen, modalOpen, modalClose } = useModal()
+  const [currentModal, setCurrentModal] = useState('')
 
   return (
     <>
+      {isOpen && currentModal === 'update' && (
+        <Modal
+          title="링크 수정"
+          isConfirmButton={true}
+          confirmText="수정"
+          onClose={modalClose}>
+          <div className="flex flex-col gap-2">
+            <Input
+              label="URl"
+              inputButton={true}
+            />
+            <Input label="이름" />
+            <Input label="태그" />
+          </div>
+        </Modal>
+      )}
+      {isOpen && currentModal === 'delete' && (
+        <Modal
+          title="링크 삭제"
+          isCancelButton={true}
+          isConfirmButton={true}
+          confirmText="삭제"
+          onClose={modalClose}>
+          <div className="flex justify-center text-base text-gray9">
+            삭제하시겠습니까?
+          </div>
+        </Modal>
+      )}
       {type === 'list' ? (
         <div className="flex items-center justify-between gap-2 border-t border-slate3 px-3 py-2">
           <div className="cursor-pointer overflow-hidden text-ellipsis whitespace-nowrap text-sm font-medium text-gray9">
@@ -73,9 +106,19 @@ const LinkItem = ({
             {edit ? (
               <>
                 <Button>
-                  <TrashIcon className="h-6 w-6 p-0.5 text-slate6" />
+                  <TrashIcon
+                    onClick={() => {
+                      setCurrentModal('delete')
+                      modalOpen()
+                    }}
+                    className="h-6 w-6 p-0.5 text-slate6"
+                  />
                 </Button>
-                <Button>
+                <Button
+                  onClick={() => {
+                    setCurrentModal('update')
+                    modalOpen()
+                  }}>
                   <PencilSquareIcon className="h-6 w-6 p-0.5 text-slate6" />
                 </Button>
               </>

From 6db12339923a59112b4d2a9de283bcc1edae0385 Mon Sep 17 00:00:00 2001
From: Yeongjun Kim <kyjun519@gmail.com>
Date: Sat, 4 Nov 2023 02:48:48 +0900
Subject: [PATCH 07/38] =?UTF-8?q?feat:=20#43=20-=20=EB=A7=81=ED=81=AC=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80=20=EB=B2=84=ED=8A=BC=EC=97=90=20=EB=AA=A8?=
 =?UTF-8?q?=EB=8B=AC=20=EC=97=B0=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/LinkList/LinkList.tsx | 78 ++++++++++++++-------
 1 file changed, 52 insertions(+), 26 deletions(-)

diff --git a/src/components/common/LinkList/LinkList.tsx b/src/components/common/LinkList/LinkList.tsx
index b48e356c..b2705aeb 100644
--- a/src/components/common/LinkList/LinkList.tsx
+++ b/src/components/common/LinkList/LinkList.tsx
@@ -1,4 +1,8 @@
+'use client'
+
+import { useModal } from '@/hooks'
 import { cls } from '@/utils'
+import Input from '../Input/Input'
 import LinkItem from '../LinkItem/LinkItem'
 import { ADD_LINK } from './constants'
 
@@ -25,36 +29,58 @@ const LinkList = ({
   edit = false,
   type = 'list',
 }: LinkListProps) => {
+  const { Modal, isOpen, modalOpen, modalClose } = useModal()
+
   return (
-    <div
-      className={cls(
-        type === 'list'
-          ? 'flex flex-col border border-slate3 last:border-b'
-          : 'grid grid-cols-2 gap-2',
-      )}>
-      <button
+    <>
+      {isOpen && (
+        <Modal
+          title="링크 추가"
+          isConfirmButton={true}
+          confirmText="추가"
+          onClose={modalClose}>
+          <div className="flex flex-col gap-2">
+            <Input
+              label="URl"
+              inputButton={true}></Input>
+            <Input
+              label="이름"
+              disabled={true}></Input>
+            <Input label="태그"></Input>
+          </div>
+        </Modal>
+      )}
+      <div
         className={cls(
-          'flex bg-slate-100 px-3 py-2.5 text-sm font-medium text-gray9 dark:bg-slate-800',
           type === 'list'
-            ? 'border-t border-slate3'
-            : 'items-center justify-center rounded-md border',
+            ? 'flex flex-col border border-slate3 last:border-b'
+            : 'grid grid-cols-2 gap-2',
         )}>
-        <div className="text-gray9">{ADD_LINK}</div>
-      </button>
-      {links.map((link) => (
-        <LinkItem
-          key={link.id}
-          title={link.title}
-          tag={link.tag}
-          readUsers={link.readUsers}
-          likes={link.likes}
-          read={read}
-          summary={summary}
-          edit={edit}
-          type={type}
-        />
-      ))}
-    </div>
+        <button
+          className={cls(
+            'flex bg-slate-100 px-3 py-2.5 text-sm font-medium text-gray9 dark:bg-slate-800',
+            type === 'list'
+              ? 'border-t border-slate3'
+              : 'items-center justify-center rounded-md border',
+          )}
+          onClick={modalOpen}>
+          <div className="text-gray9">{ADD_LINK}</div>
+        </button>
+        {links.map((link) => (
+          <LinkItem
+            key={link.id}
+            title={link.title}
+            tag={link.tag}
+            readUsers={link.readUsers}
+            likes={link.likes}
+            read={read}
+            summary={summary}
+            edit={edit}
+            type={type}
+          />
+        ))}
+      </div>
+    </>
   )
 }
 

From 4c85587493e828ced57cbb3a903e63b39a92e248 Mon Sep 17 00:00:00 2001
From: Yeongjun Kim <kyjun519@gmail.com>
Date: Sat, 4 Nov 2023 02:53:23 +0900
Subject: [PATCH 08/38] =?UTF-8?q?feat:=20#43=20-=20view=20state=EC=97=90?=
 =?UTF-8?q?=20=EB=94=B0=EB=9D=BC=20=EB=B2=84=ED=8A=BC=20=EC=83=89=EC=83=81?=
 =?UTF-8?q?=EC=9D=B4=20=EB=B3=80=EA=B2=BD=EB=90=98=EB=8F=84=EB=A1=9D=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/(routes)/space/[spaceId]/page.tsx | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/app/(routes)/space/[spaceId]/page.tsx b/src/app/(routes)/space/[spaceId]/page.tsx
index e454008a..4e55c28b 100644
--- a/src/app/(routes)/space/[spaceId]/page.tsx
+++ b/src/app/(routes)/space/[spaceId]/page.tsx
@@ -7,6 +7,7 @@ import Space from '@/components/common/Space/Space'
 import Tab from '@/components/common/Tab/Tab'
 import TabItem from '@/components/common/Tab/TabItem'
 import { mock_LinkData, mock_memberData } from '@/data'
+import { cls } from '@/utils'
 import { PencilSquareIcon } from '@heroicons/react/24/outline'
 import {
   EyeIcon,
@@ -38,9 +39,6 @@ const SpacePage = () => {
     { text: '설정', content: '설정 페이지', dest: '/space/123/setting' },
   ]
 
-  const handleEditSpace = () => {
-    setIsEdit(true)
-  }
   return (
     <>
       <Space
@@ -98,12 +96,18 @@ const SpacePage = () => {
           </Button>
           <div>
             <Button
-              className="rounded-md rounded-r-none border border-slate3 bg-emerald5 p-1.5 text-sm font-bold text-white"
+              className={cls(
+                'rounded-md rounded-r-none border border-slate3  p-1.5 text-sm font-bold text-white',
+                view === 'list' ? 'bg-emerald5' : 'bg-slate4',
+              )}
               onClick={() => setView('list')}>
               <ListBulletIcon className="h-5 w-5" />
             </Button>
             <Button
-              className="rounded-md rounded-l-none border border-slate3  bg-slate4 p-1.5 text-sm font-bold text-white"
+              className={cls(
+                'rounded-md rounded-l-none border border-slate3 p-1.5 text-sm font-bold text-white',
+                view === 'card' ? 'bg-emerald5' : 'bg-slate4',
+              )}
               onClick={() => setView('card')}>
               <Squares2X2Icon className="h-5 w-5" />
             </Button>

From c5bb9cb0e52f68d9f92de6503cdd23c032537544 Mon Sep 17 00:00:00 2001
From: Yeongjun Kim <kyjun519@gmail.com>
Date: Sat, 4 Nov 2023 02:54:15 +0900
Subject: [PATCH 09/38] =?UTF-8?q?feat:=20#43=20-=20view=20state=20?=
 =?UTF-8?q?=ED=83=80=EC=9E=85=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/(routes)/space/[spaceId]/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/(routes)/space/[spaceId]/page.tsx b/src/app/(routes)/space/[spaceId]/page.tsx
index 4e55c28b..717fb1b9 100644
--- a/src/app/(routes)/space/[spaceId]/page.tsx
+++ b/src/app/(routes)/space/[spaceId]/page.tsx
@@ -18,7 +18,7 @@ import {
 
 const SpacePage = () => {
   const [currentTab, setCurrentTab] = useState(0)
-  const [view, setView] = useState<'list' | 'card' | undefined>('list')
+  const [view, setView] = useState<'list' | 'card'>('list')
   const [isEdit, setIsEdit] = useState(false)
   const user = 'dudwns'
   const spaceObj = {

From 6123495f32e04fa55579e4979a2b40356a6873ee Mon Sep 17 00:00:00 2001
From: Yeongjun Kim <kyjun519@gmail.com>
Date: Sat, 4 Nov 2023 02:57:57 +0900
Subject: [PATCH 10/38] =?UTF-8?q?refactor:=20#43=20-=20mock=5FspaceData?=
 =?UTF-8?q?=EB=A5=BC=20data=20=ED=8C=8C=EC=9D=BC=EB=A1=9C=20=EB=B6=84?=
 =?UTF-8?q?=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/(routes)/space/[spaceId]/page.tsx | 30 ++++++++---------------
 src/data/index.ts                         | 12 +++++++++
 2 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/src/app/(routes)/space/[spaceId]/page.tsx b/src/app/(routes)/space/[spaceId]/page.tsx
index 717fb1b9..0dab10f6 100644
--- a/src/app/(routes)/space/[spaceId]/page.tsx
+++ b/src/app/(routes)/space/[spaceId]/page.tsx
@@ -6,7 +6,7 @@ import Button from '@/components/common/Button/Button'
 import Space from '@/components/common/Space/Space'
 import Tab from '@/components/common/Tab/Tab'
 import TabItem from '@/components/common/Tab/TabItem'
-import { mock_LinkData, mock_memberData } from '@/data'
+import { mock_LinkData, mock_memberData, mock_spaceData } from '@/data'
 import { cls } from '@/utils'
 import { PencilSquareIcon } from '@heroicons/react/24/outline'
 import {
@@ -21,17 +21,7 @@ const SpacePage = () => {
   const [view, setView] = useState<'list' | 'card'>('list')
   const [isEdit, setIsEdit] = useState(false)
   const user = 'dudwns'
-  const spaceObj = {
-    userName: 'dudwns',
-    spaceId: '123',
-    spaceImage: '/TestImage.svg',
-    spaceName: '강남역 맛집 리스트 모음 스페이스',
-    description: '내 기준 강남역에서 맛있는 맛집 링크 모음집',
-    category: '생활•노하우•쇼핑',
-    favorite: 60,
-    scrap: 40,
-    comment: true,
-  }
+  const spaceData = mock_spaceData
 
   const tabArr = [
     { text: '스페이스', content: '스페이스 페이지', dest: '/space/123' },
@@ -43,15 +33,15 @@ const SpacePage = () => {
     <>
       <Space
         type="Header"
-        userName={spaceObj.userName}
-        spaceName={spaceObj.spaceName}
-        spaceImage={spaceObj.spaceImage}
-        description={spaceObj.description}
-        category={spaceObj.category}
-        scrap={spaceObj.scrap}
-        favorite={spaceObj.favorite}
+        userName={spaceData.userName}
+        spaceName={spaceData.spaceName}
+        spaceImage={spaceData.spaceImage}
+        description={spaceData.description}
+        category={spaceData.category}
+        scrap={spaceData.scrap}
+        favorite={spaceData.favorite}
       />
-      {user === spaceObj.userName && (
+      {user === spaceData.userName && (
         <Tab>
           {tabArr.map((tabItem, index) => (
             <TabItem
diff --git a/src/data/index.ts b/src/data/index.ts
index d025b9eb..effbfad2 100644
--- a/src/data/index.ts
+++ b/src/data/index.ts
@@ -94,3 +94,15 @@ export const mock_memberData = [
     auth: 'view',
   },
 ]
+
+export const mock_spaceData = {
+  userName: 'dudwns',
+  spaceId: '123',
+  spaceImage: '/TestImage.svg',
+  spaceName: '강남역 맛집 리스트 모음 스페이스',
+  description: '내 기준 강남역에서 맛있는 맛집 링크 모음집',
+  category: '생활•노하우•쇼핑',
+  favorite: 60,
+  scrap: 40,
+  comment: true,
+}

From 1a7edcea9a71b4ed7f417fcdfa15470c0fd4f449 Mon Sep 17 00:00:00 2001
From: Yeongjun Kim <kyjun519@gmail.com>
Date: Sat, 4 Nov 2023 03:14:13 +0900
Subject: [PATCH 11/38] =?UTF-8?q?style:=20#43=20-=20=EC=8A=A4=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=8A=A4=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=BB=A8?=
 =?UTF-8?q?=ED=85=90=EC=B8=A0=20=EB=82=B4=EB=B6=80=EC=97=90=20=ED=8C=A8?=
 =?UTF-8?q?=EB=94=A9=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/(routes)/space/[spaceId]/page.tsx | 116 +++++++++++-----------
 1 file changed, 59 insertions(+), 57 deletions(-)

diff --git a/src/app/(routes)/space/[spaceId]/page.tsx b/src/app/(routes)/space/[spaceId]/page.tsx
index 0dab10f6..5cdf4e05 100644
--- a/src/app/(routes)/space/[spaceId]/page.tsx
+++ b/src/app/(routes)/space/[spaceId]/page.tsx
@@ -54,69 +54,71 @@ const SpacePage = () => {
           ))}
         </Tab>
       )}
-      <div className="flex items-center justify-between py-3">
-        <div className="flex items-center gap-1.5">
-          <Dropdown
-            type="tag"
-            tags={['JavaScript', 'TypeScript', 'Java', 'Python']}
-            size="medium"
-            placement="left"
-            onChange={(e) => {
-              console.log(e?.currentTarget.value)
-            }}
-          />
-          <Dropdown
-            type="space"
-            size="medium"
-            placement="left"
-            onChange={(e) => {
-              console.log(e?.currentTarget.value)
-            }}
-          />
-        </div>
-        <div className="flex gap-2">
-          <Button
-            className="button button-white p-1.5"
-            onClick={() => setIsEdit((prev) => !prev)}>
-            {isEdit ? (
-              <EyeIcon className="h-5 w-5" />
-            ) : (
-              <PencilSquareIcon className="h-5 w-5" />
-            )}
-          </Button>
-          <div>
-            <Button
-              className={cls(
-                'rounded-md rounded-r-none border border-slate3  p-1.5 text-sm font-bold text-white',
-                view === 'list' ? 'bg-emerald5' : 'bg-slate4',
-              )}
-              onClick={() => setView('list')}>
-              <ListBulletIcon className="h-5 w-5" />
-            </Button>
+      <div className="flex flex-col px-4">
+        <div className="flex items-center justify-between py-3">
+          <div className="flex items-center gap-1.5">
+            <Dropdown
+              type="tag"
+              tags={['JavaScript', 'TypeScript', 'Java', 'Python']}
+              size="medium"
+              placement="left"
+              onChange={(e) => {
+                console.log(e?.currentTarget.value)
+              }}
+            />
+            <Dropdown
+              type="space"
+              size="medium"
+              placement="left"
+              onChange={(e) => {
+                console.log(e?.currentTarget.value)
+              }}
+            />
+          </div>
+          <div className="flex gap-2">
             <Button
-              className={cls(
-                'rounded-md rounded-l-none border border-slate3 p-1.5 text-sm font-bold text-white',
-                view === 'card' ? 'bg-emerald5' : 'bg-slate4',
+              className="button button-white p-1.5"
+              onClick={() => setIsEdit((prev) => !prev)}>
+              {isEdit ? (
+                <EyeIcon className="h-5 w-5" />
+              ) : (
+                <PencilSquareIcon className="h-5 w-5" />
               )}
-              onClick={() => setView('card')}>
-              <Squares2X2Icon className="h-5 w-5" />
             </Button>
+            <div>
+              <Button
+                className={cls(
+                  'rounded-md rounded-r-none border border-slate3  p-1.5 text-sm font-bold text-white',
+                  view === 'list' ? 'bg-emerald5' : 'bg-slate4',
+                )}
+                onClick={() => setView('list')}>
+                <ListBulletIcon className="h-5 w-5" />
+              </Button>
+              <Button
+                className={cls(
+                  'rounded-md rounded-l-none border border-slate3 p-1.5 text-sm font-bold text-white',
+                  view === 'card' ? 'bg-emerald5' : 'bg-slate4',
+                )}
+                onClick={() => setView('card')}>
+                <Squares2X2Icon className="h-5 w-5" />
+              </Button>
+            </div>
           </div>
         </div>
+        <LinkList
+          links={mock_LinkData}
+          read={true}
+          summary={true}
+          edit={isEdit}
+          type={view}
+        />
+        <div className="flex justify-center py-2">
+          <Button className="button button-round button-white">
+            <PlusSmallIcon className="h-4 w-4" /> 더보기
+          </Button>
+        </div>
+        <SpaceMemberList members={mock_memberData} />
       </div>
-      <LinkList
-        links={mock_LinkData}
-        read={true}
-        summary={true}
-        edit={isEdit}
-        type={view}
-      />
-      <div className="flex justify-center py-2">
-        <Button className="button button-round button-white">
-          <PlusSmallIcon className="h-4 w-4" /> 더보기
-        </Button>
-      </div>
-      <SpaceMemberList members={mock_memberData} />
     </>
   )
 }

From 4940bad046ed52e8520f8eaeb2e32785fa5f2c99 Mon Sep 17 00:00:00 2001
From: Yeongjun Kim <kyjun519@gmail.com>
Date: Sat, 4 Nov 2023 03:40:23 +0900
Subject: [PATCH 12/38] =?UTF-8?q?style:=20#43=20-=20=EB=B7=B0=20=EB=B2=84?=
 =?UTF-8?q?=ED=8A=BC=20border=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/(routes)/space/[spaceId]/page.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/(routes)/space/[spaceId]/page.tsx b/src/app/(routes)/space/[spaceId]/page.tsx
index 5cdf4e05..b2cefaf1 100644
--- a/src/app/(routes)/space/[spaceId]/page.tsx
+++ b/src/app/(routes)/space/[spaceId]/page.tsx
@@ -88,7 +88,7 @@ const SpacePage = () => {
             <div>
               <Button
                 className={cls(
-                  'rounded-md rounded-r-none border border-slate3  p-1.5 text-sm font-bold text-white',
+                  'rounded-md rounded-r-none border border-slate3 p-1.5 text-sm font-bold text-white',
                   view === 'list' ? 'bg-emerald5' : 'bg-slate4',
                 )}
                 onClick={() => setView('list')}>
@@ -96,7 +96,7 @@ const SpacePage = () => {
               </Button>
               <Button
                 className={cls(
-                  'rounded-md rounded-l-none border border-slate3 p-1.5 text-sm font-bold text-white',
+                  'rounded-md rounded-l-none border border-l-0 border-slate3 p-1.5 text-sm font-bold text-white',
                   view === 'card' ? 'bg-emerald5' : 'bg-slate4',
                 )}
                 onClick={() => setView('card')}>

From 1423ac288f1bf3b957fa00c120e11e149409fad0 Mon Sep 17 00:00:00 2001
From: Yeongjun Kim <kyjun519@gmail.com>
Date: Sat, 4 Nov 2023 03:43:54 +0900
Subject: [PATCH 13/38] =?UTF-8?q?style:=20#43=20-=20Link=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20border=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/LinkItem/LinkItem.tsx | 2 +-
 src/components/common/LinkList/LinkList.tsx | 4 +---
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/components/common/LinkItem/LinkItem.tsx b/src/components/common/LinkItem/LinkItem.tsx
index 9deaf495..4f62c559 100644
--- a/src/components/common/LinkItem/LinkItem.tsx
+++ b/src/components/common/LinkItem/LinkItem.tsx
@@ -78,7 +78,7 @@ const LinkItem = ({
         </Modal>
       )}
       {type === 'list' ? (
-        <div className="flex items-center justify-between gap-2 border-t border-slate3 px-3 py-2">
+        <div className="flex items-center justify-between gap-2 border-t border-slate3 px-3 py-2 last:border-b">
           <div className="cursor-pointer overflow-hidden text-ellipsis whitespace-nowrap text-sm font-medium text-gray9">
             {title}
           </div>
diff --git a/src/components/common/LinkList/LinkList.tsx b/src/components/common/LinkList/LinkList.tsx
index b2705aeb..5c5f1cfc 100644
--- a/src/components/common/LinkList/LinkList.tsx
+++ b/src/components/common/LinkList/LinkList.tsx
@@ -52,9 +52,7 @@ const LinkList = ({
       )}
       <div
         className={cls(
-          type === 'list'
-            ? 'flex flex-col border border-slate3 last:border-b'
-            : 'grid grid-cols-2 gap-2',
+          type === 'list' ? 'flex flex-col' : 'grid grid-cols-2 gap-2',
         )}>
         <button
           className={cls(

From 582b7736a8dd65431fbc73b34b7bf3d865b841f6 Mon Sep 17 00:00:00 2001
From: Yeongjun Kim <kyjun519@gmail.com>
Date: Sat, 4 Nov 2023 05:29:46 +0900
Subject: [PATCH 14/38] =?UTF-8?q?style:=20#43=20-=20LinkItem=20=EC=B5=9C?=
 =?UTF-8?q?=EC=86=8C=20=EB=84=88=EB=B9=84=20=EC=A7=80=EC=A0=95=20=EB=B0=8F?=
 =?UTF-8?q?=20=EC=88=98=EC=A7=81=20=EC=A0=95=EB=A0=AC=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/LinkItem/LinkItem.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/common/LinkItem/LinkItem.tsx b/src/components/common/LinkItem/LinkItem.tsx
index 4f62c559..a6a2f0af 100644
--- a/src/components/common/LinkItem/LinkItem.tsx
+++ b/src/components/common/LinkItem/LinkItem.tsx
@@ -144,7 +144,7 @@ const LinkItem = ({
           </div>
         </div>
       ) : (
-        <div className="flex flex-col gap-1 rounded-md border px-3 py-2.5">
+        <div className="flex min-h-[101.5px] flex-col justify-between gap-1 rounded-md border px-3 py-2.5">
           <div
             className={cls(
               'block overflow-hidden text-ellipsis  text-sm font-medium text-gray9',

From b3c9574a7bfb0e1efcf5d2b61d4586588cb1132d Mon Sep 17 00:00:00 2001
From: Yeongjun Kim <kyjun519@gmail.com>
Date: Sat, 4 Nov 2023 05:32:23 +0900
Subject: [PATCH 15/38] =?UTF-8?q?feat:=20#43=20-=20useViewLink=20=ED=9B=85?=
 =?UTF-8?q?=20=EA=B5=AC=ED=98=84=20=EB=B0=8F=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/(routes)/space/[spaceId]/page.tsx           |  8 +++++---
 src/components/common/LinkList/hooks/useViewLink.ts | 13 +++++++++++++
 2 files changed, 18 insertions(+), 3 deletions(-)
 create mode 100644 src/components/common/LinkList/hooks/useViewLink.ts

diff --git a/src/app/(routes)/space/[spaceId]/page.tsx b/src/app/(routes)/space/[spaceId]/page.tsx
index b2cefaf1..6ef1a242 100644
--- a/src/app/(routes)/space/[spaceId]/page.tsx
+++ b/src/app/(routes)/space/[spaceId]/page.tsx
@@ -3,6 +3,7 @@
 import { useState } from 'react'
 import { Dropdown, LinkList, SpaceMemberList } from '@/components'
 import Button from '@/components/common/Button/Button'
+import useViewLink from '@/components/common/LinkList/hooks/useViewLink'
 import Space from '@/components/common/Space/Space'
 import Tab from '@/components/common/Tab/Tab'
 import TabItem from '@/components/common/Tab/TabItem'
@@ -18,8 +19,9 @@ import {
 
 const SpacePage = () => {
   const [currentTab, setCurrentTab] = useState(0)
-  const [view, setView] = useState<'list' | 'card'>('list')
+  const [view, handleChangeList, handleChangeCard] = useViewLink()
   const [isEdit, setIsEdit] = useState(false)
+
   const user = 'dudwns'
   const spaceData = mock_spaceData
 
@@ -91,7 +93,7 @@ const SpacePage = () => {
                   'rounded-md rounded-r-none border border-slate3 p-1.5 text-sm font-bold text-white',
                   view === 'list' ? 'bg-emerald5' : 'bg-slate4',
                 )}
-                onClick={() => setView('list')}>
+                onClick={handleChangeList}>
                 <ListBulletIcon className="h-5 w-5" />
               </Button>
               <Button
@@ -99,7 +101,7 @@ const SpacePage = () => {
                   'rounded-md rounded-l-none border border-l-0 border-slate3 p-1.5 text-sm font-bold text-white',
                   view === 'card' ? 'bg-emerald5' : 'bg-slate4',
                 )}
-                onClick={() => setView('card')}>
+                onClick={handleChangeCard}>
                 <Squares2X2Icon className="h-5 w-5" />
               </Button>
             </div>
diff --git a/src/components/common/LinkList/hooks/useViewLink.ts b/src/components/common/LinkList/hooks/useViewLink.ts
new file mode 100644
index 00000000..43b5f4c0
--- /dev/null
+++ b/src/components/common/LinkList/hooks/useViewLink.ts
@@ -0,0 +1,13 @@
+'use client'
+
+import { useCallback, useState } from 'react'
+
+const useViewLink = (): ['list' | 'card', VoidFunction, VoidFunction] => {
+  const [state, setState] = useState<'list' | 'card'>('list')
+  const handleChangeList = useCallback(() => setState('list'), [])
+  const handleChangeCard = useCallback(() => setState('card'), [])
+
+  return [state, handleChangeList, handleChangeCard]
+}
+
+export default useViewLink

From 961db55b5feff3539dc91002577e1c7ed6521e69 Mon Sep 17 00:00:00 2001
From: Yeongjun Kim <kyjun519@gmail.com>
Date: Sat, 4 Nov 2023 05:33:50 +0900
Subject: [PATCH 16/38] =?UTF-8?q?feat:=20#43=20-=20useState=EB=A5=BC=20use?=
 =?UTF-8?q?Toggle=EB=A1=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/(routes)/space/[spaceId]/page.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/(routes)/space/[spaceId]/page.tsx b/src/app/(routes)/space/[spaceId]/page.tsx
index 6ef1a242..58c17992 100644
--- a/src/app/(routes)/space/[spaceId]/page.tsx
+++ b/src/app/(routes)/space/[spaceId]/page.tsx
@@ -7,6 +7,7 @@ import useViewLink from '@/components/common/LinkList/hooks/useViewLink'
 import Space from '@/components/common/Space/Space'
 import Tab from '@/components/common/Tab/Tab'
 import TabItem from '@/components/common/Tab/TabItem'
+import useToggle from '@/components/common/Toggle/hooks/useToggle'
 import { mock_LinkData, mock_memberData, mock_spaceData } from '@/data'
 import { cls } from '@/utils'
 import { PencilSquareIcon } from '@heroicons/react/24/outline'
@@ -20,8 +21,7 @@ import {
 const SpacePage = () => {
   const [currentTab, setCurrentTab] = useState(0)
   const [view, handleChangeList, handleChangeCard] = useViewLink()
-  const [isEdit, setIsEdit] = useState(false)
-
+  const [isEdit, editToggle] = useToggle(false)
   const user = 'dudwns'
   const spaceData = mock_spaceData
 
@@ -80,7 +80,7 @@ const SpacePage = () => {
           <div className="flex gap-2">
             <Button
               className="button button-white p-1.5"
-              onClick={() => setIsEdit((prev) => !prev)}>
+              onClick={editToggle}>
               {isEdit ? (
                 <EyeIcon className="h-5 w-5" />
               ) : (

From f3ff9df8480aafa81b3ba4581c9c7b044c7dd6de Mon Sep 17 00:00:00 2001
From: Yeongjun Kim <kyjun519@gmail.com>
Date: Sat, 4 Nov 2023 05:37:08 +0900
Subject: [PATCH 17/38] =?UTF-8?q?refactor:=20#43=20-=20Modal=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=9C=84=EC=B9=98=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/LinkItem/LinkItem.tsx | 56 ++++++++++-----------
 src/components/common/LinkList/LinkList.tsx | 34 ++++++-------
 2 files changed, 45 insertions(+), 45 deletions(-)

diff --git a/src/components/common/LinkItem/LinkItem.tsx b/src/components/common/LinkItem/LinkItem.tsx
index a6a2f0af..05efd8b9 100644
--- a/src/components/common/LinkItem/LinkItem.tsx
+++ b/src/components/common/LinkItem/LinkItem.tsx
@@ -49,34 +49,6 @@ const LinkItem = ({
 
   return (
     <>
-      {isOpen && currentModal === 'update' && (
-        <Modal
-          title="링크 수정"
-          isConfirmButton={true}
-          confirmText="수정"
-          onClose={modalClose}>
-          <div className="flex flex-col gap-2">
-            <Input
-              label="URl"
-              inputButton={true}
-            />
-            <Input label="이름" />
-            <Input label="태그" />
-          </div>
-        </Modal>
-      )}
-      {isOpen && currentModal === 'delete' && (
-        <Modal
-          title="링크 삭제"
-          isCancelButton={true}
-          isConfirmButton={true}
-          confirmText="삭제"
-          onClose={modalClose}>
-          <div className="flex justify-center text-base text-gray9">
-            삭제하시겠습니까?
-          </div>
-        </Modal>
-      )}
       {type === 'list' ? (
         <div className="flex items-center justify-between gap-2 border-t border-slate3 px-3 py-2 last:border-b">
           <div className="cursor-pointer overflow-hidden text-ellipsis whitespace-nowrap text-sm font-medium text-gray9">
@@ -204,6 +176,34 @@ const LinkItem = ({
           </div>
         </div>
       )}
+      {isOpen && currentModal === 'update' && (
+        <Modal
+          title="링크 수정"
+          isConfirmButton={true}
+          confirmText="수정"
+          onClose={modalClose}>
+          <div className="flex flex-col gap-2">
+            <Input
+              label="URl"
+              inputButton={true}
+            />
+            <Input label="이름" />
+            <Input label="태그" />
+          </div>
+        </Modal>
+      )}
+      {isOpen && currentModal === 'delete' && (
+        <Modal
+          title="링크 삭제"
+          isCancelButton={true}
+          isConfirmButton={true}
+          confirmText="삭제"
+          onClose={modalClose}>
+          <div className="flex justify-center text-base text-gray9">
+            삭제하시겠습니까?
+          </div>
+        </Modal>
+      )}
     </>
   )
 }
diff --git a/src/components/common/LinkList/LinkList.tsx b/src/components/common/LinkList/LinkList.tsx
index 5c5f1cfc..cf5f6372 100644
--- a/src/components/common/LinkList/LinkList.tsx
+++ b/src/components/common/LinkList/LinkList.tsx
@@ -33,23 +33,6 @@ const LinkList = ({
 
   return (
     <>
-      {isOpen && (
-        <Modal
-          title="링크 추가"
-          isConfirmButton={true}
-          confirmText="추가"
-          onClose={modalClose}>
-          <div className="flex flex-col gap-2">
-            <Input
-              label="URl"
-              inputButton={true}></Input>
-            <Input
-              label="이름"
-              disabled={true}></Input>
-            <Input label="태그"></Input>
-          </div>
-        </Modal>
-      )}
       <div
         className={cls(
           type === 'list' ? 'flex flex-col' : 'grid grid-cols-2 gap-2',
@@ -78,6 +61,23 @@ const LinkList = ({
           />
         ))}
       </div>
+      {isOpen && (
+        <Modal
+          title="링크 추가"
+          isConfirmButton={true}
+          confirmText="추가"
+          onClose={modalClose}>
+          <div className="flex flex-col gap-2">
+            <Input
+              label="URl"
+              inputButton={true}></Input>
+            <Input
+              label="이름"
+              disabled={true}></Input>
+            <Input label="태그"></Input>
+          </div>
+        </Modal>
+      )}
     </>
   )
 }

From 4451dd308f6349c47c5722b8022df3bb710b2c63 Mon Sep 17 00:00:00 2001
From: Yeongjun Kim <kyjun519@gmail.com>
Date: Sat, 4 Nov 2023 05:52:25 +0900
Subject: [PATCH 18/38] =?UTF-8?q?refactor:=20#43=20-=20=EB=8D=94=EB=B3=B4?=
 =?UTF-8?q?=EA=B8=B0=20text=EB=A5=BC=20=EC=83=81=EC=88=98=EB=A1=9C=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/(routes)/space/[spaceId]/page.tsx         | 3 ++-
 src/components/common/LinkList/constants/index.ts | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/app/(routes)/space/[spaceId]/page.tsx b/src/app/(routes)/space/[spaceId]/page.tsx
index 58c17992..75413c85 100644
--- a/src/app/(routes)/space/[spaceId]/page.tsx
+++ b/src/app/(routes)/space/[spaceId]/page.tsx
@@ -3,6 +3,7 @@
 import { useState } from 'react'
 import { Dropdown, LinkList, SpaceMemberList } from '@/components'
 import Button from '@/components/common/Button/Button'
+import { MORE_TEXT } from '@/components/common/LinkList/constants'
 import useViewLink from '@/components/common/LinkList/hooks/useViewLink'
 import Space from '@/components/common/Space/Space'
 import Tab from '@/components/common/Tab/Tab'
@@ -116,7 +117,7 @@ const SpacePage = () => {
         />
         <div className="flex justify-center py-2">
           <Button className="button button-round button-white">
-            <PlusSmallIcon className="h-4 w-4" /> 더보기
+            {MORE_TEXT}
           </Button>
         </div>
         <SpaceMemberList members={mock_memberData} />
diff --git a/src/components/common/LinkList/constants/index.ts b/src/components/common/LinkList/constants/index.ts
index 5b75a2ec..da2af084 100644
--- a/src/components/common/LinkList/constants/index.ts
+++ b/src/components/common/LinkList/constants/index.ts
@@ -1 +1,2 @@
 export const ADD_LINK = '+ 링크 추가하기'
+export const MORE_TEXT = '더 보기'

From 5ccc6439279aa45f57c603360f58dcd538144088 Mon Sep 17 00:00:00 2001
From: Yeongjun Kim <kyjun519@gmail.com>
Date: Sat, 4 Nov 2023 05:53:57 +0900
Subject: [PATCH 19/38] =?UTF-8?q?refactor:=20#43=20-=20ADD=5FLINK=20?=
 =?UTF-8?q?=EB=84=A4=EC=9E=84=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/LinkList/LinkList.tsx       | 4 ++--
 src/components/common/LinkList/constants/index.ts | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/common/LinkList/LinkList.tsx b/src/components/common/LinkList/LinkList.tsx
index cf5f6372..04112d33 100644
--- a/src/components/common/LinkList/LinkList.tsx
+++ b/src/components/common/LinkList/LinkList.tsx
@@ -4,7 +4,7 @@ import { useModal } from '@/hooks'
 import { cls } from '@/utils'
 import Input from '../Input/Input'
 import LinkItem from '../LinkItem/LinkItem'
-import { ADD_LINK } from './constants'
+import { ADD_LINK_TEXT } from './constants'
 
 export interface Link {
   id: number
@@ -45,7 +45,7 @@ const LinkList = ({
               : 'items-center justify-center rounded-md border',
           )}
           onClick={modalOpen}>
-          <div className="text-gray9">{ADD_LINK}</div>
+          <div className="text-gray9">{ADD_LINK_TEXT}</div>
         </button>
         {links.map((link) => (
           <LinkItem
diff --git a/src/components/common/LinkList/constants/index.ts b/src/components/common/LinkList/constants/index.ts
index da2af084..397a981c 100644
--- a/src/components/common/LinkList/constants/index.ts
+++ b/src/components/common/LinkList/constants/index.ts
@@ -1,2 +1,2 @@
-export const ADD_LINK = '+ 링크 추가하기'
+export const ADD_LINK_TEXT = '+ 링크 추가하기'
 export const MORE_TEXT = '더 보기'

From 34da24e1bd19b7ca12b15c31942e16da507cdf93 Mon Sep 17 00:00:00 2001
From: Yeongjun Kim <kyjun519@gmail.com>
Date: Sat, 4 Nov 2023 23:03:27 +0900
Subject: [PATCH 20/38] =?UTF-8?q?chore:=20#43=20-=20Plus=20Icon=20?=
 =?UTF-8?q?=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/(routes)/space/[spaceId]/page.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/app/(routes)/space/[spaceId]/page.tsx b/src/app/(routes)/space/[spaceId]/page.tsx
index 75413c85..e6af9371 100644
--- a/src/app/(routes)/space/[spaceId]/page.tsx
+++ b/src/app/(routes)/space/[spaceId]/page.tsx
@@ -15,7 +15,6 @@ import { PencilSquareIcon } from '@heroicons/react/24/outline'
 import {
   EyeIcon,
   ListBulletIcon,
-  PlusSmallIcon,
   Squares2X2Icon,
 } from '@heroicons/react/24/solid'
 

From b070b91285e713d271dbb4765b9d89cc1969c97b Mon Sep 17 00:00:00 2001
From: Yeongjun Kim <kyjun519@gmail.com>
Date: Sun, 5 Nov 2023 00:17:56 +0900
Subject: [PATCH 21/38] =?UTF-8?q?chore:=20#43=20-=20Space=20=ED=83=80?=
 =?UTF-8?q?=EC=9E=85=20=EC=84=A0=EC=96=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/types/index.ts | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/types/index.ts b/src/types/index.ts
index e69de29b..fbce61bd 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -0,0 +1,11 @@
+export interface Space {
+  userName: string
+  spaceId: number
+  spaceImage: string
+  spaceName: string
+  description: string
+  category: string
+  favorite: number
+  scrap: number
+  comment: boolean
+}

From 2fad65c59f4708a83651a103d7555947a1b8ae9b Mon Sep 17 00:00:00 2001
From: Yeongjun Kim <kyjun519@gmail.com>
Date: Sun, 5 Nov 2023 00:18:26 +0900
Subject: [PATCH 22/38] =?UTF-8?q?chore:=20#43=20-=20mock=5FspaceData=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/data/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/data/index.ts b/src/data/index.ts
index effbfad2..c25abd04 100644
--- a/src/data/index.ts
+++ b/src/data/index.ts
@@ -97,7 +97,7 @@ export const mock_memberData = [
 
 export const mock_spaceData = {
   userName: 'dudwns',
-  spaceId: '123',
+  spaceId: 123,
   spaceImage: '/TestImage.svg',
   spaceName: '강남역 맛집 리스트 모음 스페이스',
   description: '내 기준 강남역에서 맛있는 맛집 링크 모음집',

From 36800342284c125850b6a04c0f100cfe812b3461 Mon Sep 17 00:00:00 2001
From: Yeongjun Kim <kyjun519@gmail.com>
Date: Sun, 5 Nov 2023 00:20:39 +0900
Subject: [PATCH 23/38] =?UTF-8?q?feat:=20#43=20-=20=ED=98=84=EC=9E=AC=20?=
 =?UTF-8?q?=EC=8A=A4=ED=8E=98=EC=9D=B4=EC=8A=A4=EC=9D=98=20Tab=20List?=
 =?UTF-8?q?=EB=A5=BC=20=EB=B0=98=ED=99=98=ED=95=98=EB=8A=94=20=ED=95=A8?=
 =?UTF-8?q?=EC=88=98=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/Tab/utils/index.ts | 27 ++++++++++++++++++++++++
 1 file changed, 27 insertions(+)
 create mode 100644 src/components/common/Tab/utils/index.ts

diff --git a/src/components/common/Tab/utils/index.ts b/src/components/common/Tab/utils/index.ts
new file mode 100644
index 00000000..2015c10d
--- /dev/null
+++ b/src/components/common/Tab/utils/index.ts
@@ -0,0 +1,27 @@
+import { Space } from '@/types'
+import { TabList } from '../hooks/useTab'
+
+export const getCurrentTabList = (spaceData: Space): TabList[] => {
+  const myName = 'dudwns'
+  const { userName, spaceId, comment } = spaceData
+  const tabList = [
+    { text: '스페이스', content: '스페이스 페이지', dest: `/space/${spaceId}` },
+  ]
+
+  if (comment) {
+    tabList.push({
+      text: '댓글',
+      content: '댓글 페이지',
+      dest: `/space/${spaceId}/comment`,
+    })
+  }
+  if (userName === myName) {
+    tabList.push({
+      text: '설정',
+      content: '설정 페이지',
+      dest: `/space/${spaceId}/setting`,
+    })
+  }
+
+  return tabList
+}

From ff173903098955ea2756ca42a68b0c516c4c44bb Mon Sep 17 00:00:00 2001
From: Yeongjun Kim <kyjun519@gmail.com>
Date: Sun, 5 Nov 2023 00:21:16 +0900
Subject: [PATCH 24/38] =?UTF-8?q?feat:=20#43=20-=20useTab=20=ED=9B=85=20?=
 =?UTF-8?q?=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/Tab/hooks/useTab.ts | 24 +++++++++++++++++++++++
 1 file changed, 24 insertions(+)
 create mode 100644 src/components/common/Tab/hooks/useTab.ts

diff --git a/src/components/common/Tab/hooks/useTab.ts b/src/components/common/Tab/hooks/useTab.ts
new file mode 100644
index 00000000..a48e53b0
--- /dev/null
+++ b/src/components/common/Tab/hooks/useTab.ts
@@ -0,0 +1,24 @@
+import { useState } from 'react'
+import { Space } from '@/types'
+import { getCurrentTabList } from '../utils'
+
+export interface TabList {
+  text: string
+  content: string
+  dest: string
+}
+
+const useTab = (
+  spaceData: Space,
+): {
+  currentTab: number
+  handleChangeTab: (index: number) => void
+  tabList: TabList[]
+} => {
+  const [currentTab, setCurrentTab] = useState(0)
+  const handleChangeTab = (index: number) => setCurrentTab(index)
+  const tabList = getCurrentTabList(spaceData)
+  return { currentTab, handleChangeTab, tabList }
+}
+
+export default useTab

From f0839e2781dab39206475186b4ecd940c57ff332 Mon Sep 17 00:00:00 2001
From: Yeongjun Kim <kyjun519@gmail.com>
Date: Sun, 5 Nov 2023 00:22:22 +0900
Subject: [PATCH 25/38] =?UTF-8?q?feat:=20#43=20-=20=EC=8A=A4=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=8A=A4=20=ED=8E=98=EC=9D=B4=EC=A7=80=EC=97=90=20use?=
 =?UTF-8?q?Tab=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/(routes)/space/[spaceId]/page.tsx | 19 ++++++-------------
 1 file changed, 6 insertions(+), 13 deletions(-)

diff --git a/src/app/(routes)/space/[spaceId]/page.tsx b/src/app/(routes)/space/[spaceId]/page.tsx
index e6af9371..9829c5c1 100644
--- a/src/app/(routes)/space/[spaceId]/page.tsx
+++ b/src/app/(routes)/space/[spaceId]/page.tsx
@@ -1,6 +1,5 @@
 'use client'
 
-import { useState } from 'react'
 import { Dropdown, LinkList, SpaceMemberList } from '@/components'
 import Button from '@/components/common/Button/Button'
 import { MORE_TEXT } from '@/components/common/LinkList/constants'
@@ -8,6 +7,7 @@ import useViewLink from '@/components/common/LinkList/hooks/useViewLink'
 import Space from '@/components/common/Space/Space'
 import Tab from '@/components/common/Tab/Tab'
 import TabItem from '@/components/common/Tab/TabItem'
+import useTab from '@/components/common/Tab/hooks/useTab'
 import useToggle from '@/components/common/Toggle/hooks/useToggle'
 import { mock_LinkData, mock_memberData, mock_spaceData } from '@/data'
 import { cls } from '@/utils'
@@ -19,17 +19,10 @@ import {
 } from '@heroicons/react/24/solid'
 
 const SpacePage = () => {
-  const [currentTab, setCurrentTab] = useState(0)
+  const spaceData = mock_spaceData
   const [view, handleChangeList, handleChangeCard] = useViewLink()
   const [isEdit, editToggle] = useToggle(false)
-  const user = 'dudwns'
-  const spaceData = mock_spaceData
-
-  const tabArr = [
-    { text: '스페이스', content: '스페이스 페이지', dest: '/space/123' },
-    { text: '댓글', content: '댓글 페이지', dest: '/space/123/comment' },
-    { text: '설정', content: '설정 페이지', dest: '/space/123/setting' },
-  ]
+  const { currentTab, handleChangeTab, tabList } = useTab(spaceData)
 
   return (
     <>
@@ -43,15 +36,15 @@ const SpacePage = () => {
         scrap={spaceData.scrap}
         favorite={spaceData.favorite}
       />
-      {user === spaceData.userName && (
+      {tabList.length > 1 && (
         <Tab>
-          {tabArr.map((tabItem, index) => (
+          {tabList.map((tabItem, index) => (
             <TabItem
               key={index}
               active={currentTab === index ? true : false}
               dest={tabItem.dest}
               text={tabItem.text}
-              onClick={() => setCurrentTab(index)}
+              onClick={() => handleChangeTab(index)}
             />
           ))}
         </Tab>

From 9f80808593c71ffe7f0ea7fd00057808f7d91dca Mon Sep 17 00:00:00 2001
From: Yeongjun Kim <kyjun519@gmail.com>
Date: Sun, 5 Nov 2023 00:34:39 +0900
Subject: [PATCH 26/38] =?UTF-8?q?refactor:=20#43=20-=20=EB=AA=A8=EB=8B=AC?=
 =?UTF-8?q?=20=EC=82=AD=EC=A0=9C=20text=EB=A5=BC=20=EC=83=81=EC=88=98?=
 =?UTF-8?q?=EB=A1=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 "src/components/common/LinkItem/\bconstants/index.ts" | 1 +
 src/components/common/LinkItem/LinkItem.tsx           | 3 ++-
 2 files changed, 3 insertions(+), 1 deletion(-)
 create mode 100644 "src/components/common/LinkItem/\bconstants/index.ts"

diff --git "a/src/components/common/LinkItem/\bconstants/index.ts" "b/src/components/common/LinkItem/\bconstants/index.ts"
new file mode 100644
index 00000000..fa3a2245
--- /dev/null
+++ "b/src/components/common/LinkItem/\bconstants/index.ts"
@@ -0,0 +1 @@
+export const DELETE_TEXT = '삭제하시겠습니까?'
diff --git a/src/components/common/LinkItem/LinkItem.tsx b/src/components/common/LinkItem/LinkItem.tsx
index 05efd8b9..0c2802f4 100644
--- a/src/components/common/LinkItem/LinkItem.tsx
+++ b/src/components/common/LinkItem/LinkItem.tsx
@@ -16,6 +16,7 @@ import Button from '../Button/Button'
 import Chip from '../Chip/Chip'
 import Input from '../Input/Input'
 import useToggle from '../Toggle/hooks/useToggle'
+import { DELETE_TEXT } from './\bconstants'
 
 export interface User {
   id: string
@@ -200,7 +201,7 @@ const LinkItem = ({
           confirmText="삭제"
           onClose={modalClose}>
           <div className="flex justify-center text-base text-gray9">
-            삭제하시겠습니까?
+            {DELETE_TEXT}
           </div>
         </Modal>
       )}

From 36c6469a0c7ad690fbac5417d490682352fdd716 Mon Sep 17 00:00:00 2001
From: Yeongjun Kim <kyjun519@gmail.com>
Date: Sun, 5 Nov 2023 00:45:59 +0900
Subject: [PATCH 27/38] =?UTF-8?q?feat:=20#43=20-=20useCurrentModal=20?=
 =?UTF-8?q?=ED=9B=85=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/LinkItem/LinkItem.tsx |  9 ++++-----
 src/hooks/index.ts                          |  1 +
 src/hooks/useCurrentModal.ts                | 12 ++++++++++++
 3 files changed, 17 insertions(+), 5 deletions(-)
 create mode 100644 src/hooks/useCurrentModal.ts

diff --git a/src/components/common/LinkItem/LinkItem.tsx b/src/components/common/LinkItem/LinkItem.tsx
index 0c2802f4..defa17e2 100644
--- a/src/components/common/LinkItem/LinkItem.tsx
+++ b/src/components/common/LinkItem/LinkItem.tsx
@@ -1,7 +1,6 @@
 'use client'
 
-import { useState } from 'react'
-import { useModal } from '@/hooks'
+import { useCurrentModal, useModal } from '@/hooks'
 import { cls } from '@/utils'
 import {
   DocumentTextIcon,
@@ -46,7 +45,7 @@ const LinkItem = ({
 }: LinkItemProps) => {
   const [isLike, likeToggle] = useToggle()
   const { Modal, isOpen, modalOpen, modalClose } = useModal()
-  const [currentModal, setCurrentModal] = useState('')
+  const [currentModal, handleCurrentModal] = useCurrentModal()
 
   return (
     <>
@@ -81,7 +80,7 @@ const LinkItem = ({
                 <Button>
                   <TrashIcon
                     onClick={() => {
-                      setCurrentModal('delete')
+                      handleCurrentModal('delete')
                       modalOpen()
                     }}
                     className="h-6 w-6 p-0.5 text-slate6"
@@ -89,7 +88,7 @@ const LinkItem = ({
                 </Button>
                 <Button
                   onClick={() => {
-                    setCurrentModal('update')
+                    handleCurrentModal('update')
                     modalOpen()
                   }}>
                   <PencilSquareIcon className="h-6 w-6 p-0.5 text-slate6" />
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
index 9450b9fc..e630b9e5 100644
--- a/src/hooks/index.ts
+++ b/src/hooks/index.ts
@@ -1 +1,2 @@
 export { default as useModal } from '@/hooks/useModal'
+export { default as useCurrentModal } from '@/hooks/useCurrentModal'
diff --git a/src/hooks/useCurrentModal.ts b/src/hooks/useCurrentModal.ts
new file mode 100644
index 00000000..d0d846c3
--- /dev/null
+++ b/src/hooks/useCurrentModal.ts
@@ -0,0 +1,12 @@
+import { useCallback, useState } from 'react'
+
+const useCurrentModal = (): [string, (current: string) => void] => {
+  const [currentModal, setCurrentModal] = useState('')
+  const handleCurrentModal = useCallback((current: string) => {
+    setCurrentModal(current)
+  }, [])
+
+  return [currentModal, handleCurrentModal]
+}
+
+export default useCurrentModal

From e833e3a9ebac0de172a5db4d3db894564fea30f3 Mon Sep 17 00:00:00 2001
From: Yeongjun Kim <kyjun519@gmail.com>
Date: Sun, 5 Nov 2023 00:52:21 +0900
Subject: [PATCH 28/38] =?UTF-8?q?refactor:=20#43=20-=20handleChangeModal?=
 =?UTF-8?q?=20=ED=95=A8=EC=88=98=EB=AA=85=EC=9D=84=20handleChangeCurrentMo?=
 =?UTF-8?q?dal=EB=A1=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/LinkItem/LinkItem.tsx | 6 +++---
 src/hooks/useCurrentModal.ts                | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/common/LinkItem/LinkItem.tsx b/src/components/common/LinkItem/LinkItem.tsx
index defa17e2..fa56818c 100644
--- a/src/components/common/LinkItem/LinkItem.tsx
+++ b/src/components/common/LinkItem/LinkItem.tsx
@@ -45,7 +45,7 @@ const LinkItem = ({
 }: LinkItemProps) => {
   const [isLike, likeToggle] = useToggle()
   const { Modal, isOpen, modalOpen, modalClose } = useModal()
-  const [currentModal, handleCurrentModal] = useCurrentModal()
+  const [currentModal, handleChangeCurrentModal] = useCurrentModal()
 
   return (
     <>
@@ -80,7 +80,7 @@ const LinkItem = ({
                 <Button>
                   <TrashIcon
                     onClick={() => {
-                      handleCurrentModal('delete')
+                      handleChangeCurrentModal('delete')
                       modalOpen()
                     }}
                     className="h-6 w-6 p-0.5 text-slate6"
@@ -88,7 +88,7 @@ const LinkItem = ({
                 </Button>
                 <Button
                   onClick={() => {
-                    handleCurrentModal('update')
+                    handleChangeCurrentModal('update')
                     modalOpen()
                   }}>
                   <PencilSquareIcon className="h-6 w-6 p-0.5 text-slate6" />
diff --git a/src/hooks/useCurrentModal.ts b/src/hooks/useCurrentModal.ts
index d0d846c3..5fea9e6d 100644
--- a/src/hooks/useCurrentModal.ts
+++ b/src/hooks/useCurrentModal.ts
@@ -2,11 +2,11 @@ import { useCallback, useState } from 'react'
 
 const useCurrentModal = (): [string, (current: string) => void] => {
   const [currentModal, setCurrentModal] = useState('')
-  const handleCurrentModal = useCallback((current: string) => {
+  const handleChangeCurrentModal = useCallback((current: string) => {
     setCurrentModal(current)
   }, [])
 
-  return [currentModal, handleCurrentModal]
+  return [currentModal, handleChangeCurrentModal]
 }
 
 export default useCurrentModal

From 949331e645e8cb11ae25eda21bf9b5b43bf5b81c Mon Sep 17 00:00:00 2001
From: Yeongjun Kim <kyjun519@gmail.com>
Date: Sun, 5 Nov 2023 00:52:49 +0900
Subject: [PATCH 29/38] =?UTF-8?q?refactor:=20#43=20-=20=EC=BD=94=EB=93=9C?=
 =?UTF-8?q?=20=EC=88=9C=EC=84=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/(routes)/space/[spaceId]/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/(routes)/space/[spaceId]/page.tsx b/src/app/(routes)/space/[spaceId]/page.tsx
index 9829c5c1..9ae5ca6f 100644
--- a/src/app/(routes)/space/[spaceId]/page.tsx
+++ b/src/app/(routes)/space/[spaceId]/page.tsx
@@ -20,8 +20,8 @@ import {
 
 const SpacePage = () => {
   const spaceData = mock_spaceData
-  const [view, handleChangeList, handleChangeCard] = useViewLink()
   const [isEdit, editToggle] = useToggle(false)
+  const [view, handleChangeList, handleChangeCard] = useViewLink()
   const { currentTab, handleChangeTab, tabList } = useTab(spaceData)
 
   return (

From dd4d3da0336729b44a3e2abc142dcdda34520f63 Mon Sep 17 00:00:00 2001
From: Yeongjun Kim <kyjun519@gmail.com>
Date: Sun, 5 Nov 2023 00:57:53 +0900
Subject: [PATCH 30/38] =?UTF-8?q?refactor:=20#43=20-=20=EC=B5=9C=EC=86=8C?=
 =?UTF-8?q?=20tab=20=EA=B8=B8=EC=9D=B4=EC=9D=98=20text=EB=A5=BC=20?=
 =?UTF-8?q?=EC=83=81=EC=88=98=EB=A1=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/(routes)/space/[spaceId]/page.tsx | 3 ++-
 src/constants/index.ts                    | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/app/(routes)/space/[spaceId]/page.tsx b/src/app/(routes)/space/[spaceId]/page.tsx
index 9ae5ca6f..79f1f285 100644
--- a/src/app/(routes)/space/[spaceId]/page.tsx
+++ b/src/app/(routes)/space/[spaceId]/page.tsx
@@ -9,6 +9,7 @@ import Tab from '@/components/common/Tab/Tab'
 import TabItem from '@/components/common/Tab/TabItem'
 import useTab from '@/components/common/Tab/hooks/useTab'
 import useToggle from '@/components/common/Toggle/hooks/useToggle'
+import { MIN_TAB_NUMBER } from '@/constants'
 import { mock_LinkData, mock_memberData, mock_spaceData } from '@/data'
 import { cls } from '@/utils'
 import { PencilSquareIcon } from '@heroicons/react/24/outline'
@@ -36,7 +37,7 @@ const SpacePage = () => {
         scrap={spaceData.scrap}
         favorite={spaceData.favorite}
       />
-      {tabList.length > 1 && (
+      {tabList.length > MIN_TAB_NUMBER && (
         <Tab>
           {tabList.map((tabItem, index) => (
             <TabItem
diff --git a/src/constants/index.ts b/src/constants/index.ts
index e69de29b..2b8c6f7f 100644
--- a/src/constants/index.ts
+++ b/src/constants/index.ts
@@ -0,0 +1 @@
+export const MIN_TAB_NUMBER = 1

From 748f30aed1178292104feb747bb6503df997a117 Mon Sep 17 00:00:00 2001
From: Yeongjun Kim <kyjun519@gmail.com>
Date: Sun, 5 Nov 2023 01:10:26 +0900
Subject: [PATCH 31/38] =?UTF-8?q?feat:=20#43=20-=20useModal=20=ED=9B=85=20?=
 =?UTF-8?q?=EB=A6=AC=ED=84=B4=20=ED=83=80=EC=9E=85=20=EC=A7=80=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/useModal.ts | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/hooks/useModal.ts b/src/hooks/useModal.ts
index 7bc61845..e32528b5 100644
--- a/src/hooks/useModal.ts
+++ b/src/hooks/useModal.ts
@@ -1,7 +1,14 @@
 import { useCallback, useState } from 'react'
 import { Modal } from '@/components'
 
-const useModal = (initialState = false) => {
+export interface UseModalReturnType {
+  Modal: typeof Modal
+  isOpen: boolean
+  modalOpen: VoidFunction
+  modalClose: VoidFunction
+}
+
+const useModal = (initialState = false): UseModalReturnType => {
   const [isOpen, setIsOpen] = useState(initialState)
   const modalOpen = useCallback(() => setIsOpen(true), [])
   const modalClose = useCallback(() => setIsOpen(false), [])

From e221a36bf27ad3a6217e4ee5c26b4517c2130763 Mon Sep 17 00:00:00 2001
From: Yeongjun Kim <kyjun519@gmail.com>
Date: Sun, 5 Nov 2023 01:10:42 +0900
Subject: [PATCH 32/38] =?UTF-8?q?feat:=20#43=20-=20useModalLogic=20?=
 =?UTF-8?q?=ED=9B=85=20=EB=A6=AC=ED=84=B4=20=ED=83=80=EC=9E=85=20=EC=A7=80?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/Modal/hooks/useModalLogic.ts | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/common/Modal/hooks/useModalLogic.ts b/src/components/common/Modal/hooks/useModalLogic.ts
index af714cbb..19c99fc9 100644
--- a/src/components/common/Modal/hooks/useModalLogic.ts
+++ b/src/components/common/Modal/hooks/useModalLogic.ts
@@ -6,11 +6,16 @@ export interface useModalLogicProps {
   modalRef: React.RefObject<HTMLDivElement | null>
 }
 
+export interface UseModalLogicReturnType {
+  handleClickOverlay: (e: React.MouseEvent<HTMLDivElement>) => void
+  handleClickConfirm: (e?: React.MouseEvent<HTMLButtonElement>) => void
+}
+
 const useModalLogic = ({
   onClose,
   onConfirm,
   modalRef,
-}: useModalLogicProps) => {
+}: useModalLogicProps): UseModalLogicReturnType => {
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
       if (e.key === 'Escape') {

From 6557c1117ec472ecbbffa17ebd2231cab1c03dc9 Mon Sep 17 00:00:00 2001
From: Yeongjun Kim <kyjun519@gmail.com>
Date: Sun, 5 Nov 2023 01:22:55 +0900
Subject: [PATCH 33/38] =?UTF-8?q?feat:=20#43=20-=20card=20=ED=98=95?=
 =?UTF-8?q?=EC=8B=9D=EC=9D=BC=20=EB=95=8C=20=EB=A7=81=ED=81=AC=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95,=20=EC=82=AD=EC=A0=9C=20=EC=9D=B4=EB=B2=A4=ED=8A=B8?=
 =?UTF-8?q?=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/LinkItem/LinkItem.tsx | 26 +++++++++++++--------
 1 file changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/components/common/LinkItem/LinkItem.tsx b/src/components/common/LinkItem/LinkItem.tsx
index fa56818c..bf228625 100644
--- a/src/components/common/LinkItem/LinkItem.tsx
+++ b/src/components/common/LinkItem/LinkItem.tsx
@@ -77,14 +77,12 @@ const LinkItem = ({
             )}
             {edit ? (
               <>
-                <Button>
-                  <TrashIcon
-                    onClick={() => {
-                      handleChangeCurrentModal('delete')
-                      modalOpen()
-                    }}
-                    className="h-6 w-6 p-0.5 text-slate6"
-                  />
+                <Button
+                  onClick={() => {
+                    handleChangeCurrentModal('delete')
+                    modalOpen()
+                  }}>
+                  <TrashIcon className="h-6 w-6 p-0.5 text-slate6" />
                 </Button>
                 <Button
                   onClick={() => {
@@ -147,10 +145,18 @@ const LinkItem = ({
             )}
             {edit ? (
               <div className="flex gap-1.5">
-                <Button>
+                <Button
+                  onClick={() => {
+                    handleChangeCurrentModal('delete')
+                    modalOpen()
+                  }}>
                   <TrashIcon className="h-6 w-6 p-0.5 text-slate6" />
                 </Button>
-                <Button>
+                <Button
+                  onClick={() => {
+                    handleChangeCurrentModal('update')
+                    modalOpen()
+                  }}>
                   <PencilSquareIcon className="h-6 w-6 p-0.5 text-slate6" />
                 </Button>
               </div>

From 9e456775192f921e528ed84f7b0da2eb65dbfc40 Mon Sep 17 00:00:00 2001
From: Yeongjun Kim <kyjun519@gmail.com>
Date: Sun, 5 Nov 2023 01:24:50 +0900
Subject: [PATCH 34/38] =?UTF-8?q?chore:=20#43=20-=20TODO=20=EC=A3=BC?=
 =?UTF-8?q?=EC=84=9D=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/Tab/utils/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/common/Tab/utils/index.ts b/src/components/common/Tab/utils/index.ts
index 2015c10d..1920ec76 100644
--- a/src/components/common/Tab/utils/index.ts
+++ b/src/components/common/Tab/utils/index.ts
@@ -2,7 +2,7 @@ import { Space } from '@/types'
 import { TabList } from '../hooks/useTab'
 
 export const getCurrentTabList = (spaceData: Space): TabList[] => {
-  const myName = 'dudwns'
+  const myName = 'dudwns' // TODO: 실제 유저로 변경
   const { userName, spaceId, comment } = spaceData
   const tabList = [
     { text: '스페이스', content: '스페이스 페이지', dest: `/space/${spaceId}` },

From 1e913ac217fa233f18a64a00bb95bbb5fc68b25d Mon Sep 17 00:00:00 2001
From: Yeongjun Kim <kyjun519@gmail.com>
Date: Sun, 5 Nov 2023 02:05:45 +0900
Subject: [PATCH 35/38] =?UTF-8?q?refactor:=20#43=20-=20LinkItem=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EC=9D=98=20=EB=AA=A8?=
 =?UTF-8?q?=EB=8B=AC=EC=9D=84=20=ED=95=98=EB=82=98=EB=A1=9C=20=EB=B3=91?=
 =?UTF-8?q?=ED=95=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/LinkItem/LinkItem.tsx | 42 ++++++++++-----------
 1 file changed, 19 insertions(+), 23 deletions(-)

diff --git a/src/components/common/LinkItem/LinkItem.tsx b/src/components/common/LinkItem/LinkItem.tsx
index bf228625..b3dce35d 100644
--- a/src/components/common/LinkItem/LinkItem.tsx
+++ b/src/components/common/LinkItem/LinkItem.tsx
@@ -182,32 +182,28 @@ const LinkItem = ({
           </div>
         </div>
       )}
-      {isOpen && currentModal === 'update' && (
+      {isOpen && (
         <Modal
-          title="링크 수정"
+          title={currentModal === 'update' ? '링크 수정' : '링크 삭제'}
+          isCancelButton={currentModal === 'update' ? false : true}
           isConfirmButton={true}
-          confirmText="수정"
+          confirmText={currentModal === 'update' ? '수정' : '삭제'}
           onClose={modalClose}>
-          <div className="flex flex-col gap-2">
-            <Input
-              label="URl"
-              inputButton={true}
-            />
-            <Input label="이름" />
-            <Input label="태그" />
-          </div>
-        </Modal>
-      )}
-      {isOpen && currentModal === 'delete' && (
-        <Modal
-          title="링크 삭제"
-          isCancelButton={true}
-          isConfirmButton={true}
-          confirmText="삭제"
-          onClose={modalClose}>
-          <div className="flex justify-center text-base text-gray9">
-            {DELETE_TEXT}
-          </div>
+          {currentModal === 'update' && (
+            <div className="flex flex-col gap-2">
+              <Input
+                label="URl"
+                inputButton={true}
+              />
+              <Input label="이름" />
+              <Input label="태그" />
+            </div>
+          )}
+          {currentModal === 'delete' && (
+            <div className="flex justify-center text-base text-gray9">
+              {DELETE_TEXT}
+            </div>
+          )}
         </Modal>
       )}
     </>

From 81adbbacd7b3b2865ab2c8435251d5962c0483dc Mon Sep 17 00:00:00 2001
From: Yeongjun Kim <kyjun519@gmail.com>
Date: Sun, 5 Nov 2023 02:08:26 +0900
Subject: [PATCH 36/38] =?UTF-8?q?refactor:=20#43=20-=20Input=EC=9D=98=20?=
 =?UTF-8?q?=EB=8B=AB=EB=8A=94=20=ED=83=9C=EA=B7=B8=EB=A5=BC=20Self-Closing?=
 =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/LinkList/LinkList.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/common/LinkList/LinkList.tsx b/src/components/common/LinkList/LinkList.tsx
index 04112d33..e8eacc5e 100644
--- a/src/components/common/LinkList/LinkList.tsx
+++ b/src/components/common/LinkList/LinkList.tsx
@@ -70,11 +70,13 @@ const LinkList = ({
           <div className="flex flex-col gap-2">
             <Input
               label="URl"
-              inputButton={true}></Input>
+              inputButton={true}
+            />
             <Input
               label="이름"
-              disabled={true}></Input>
-            <Input label="태그"></Input>
+              disabled={true}
+            />
+            <Input label="태그" />
           </div>
         </Modal>
       )}

From 920a0de6136023c49eab4a397b66e78309b0c274 Mon Sep 17 00:00:00 2001
From: Yeongjun Kim <kyjun519@gmail.com>
Date: Sun, 5 Nov 2023 02:19:20 +0900
Subject: [PATCH 37/38] =?UTF-8?q?feat:=20#43=20-=20useTab=20=ED=9B=85?=
 =?UTF-8?q?=EC=97=90=20useCallback=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/Tab/hooks/useTab.ts | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/common/Tab/hooks/useTab.ts b/src/components/common/Tab/hooks/useTab.ts
index a48e53b0..d1d8235d 100644
--- a/src/components/common/Tab/hooks/useTab.ts
+++ b/src/components/common/Tab/hooks/useTab.ts
@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useCallback, useState } from 'react'
 import { Space } from '@/types'
 import { getCurrentTabList } from '../utils'
 
@@ -16,7 +16,10 @@ const useTab = (
   tabList: TabList[]
 } => {
   const [currentTab, setCurrentTab] = useState(0)
-  const handleChangeTab = (index: number) => setCurrentTab(index)
+  const handleChangeTab = useCallback(
+    (index: number) => setCurrentTab(index),
+    [],
+  )
   const tabList = getCurrentTabList(spaceData)
   return { currentTab, handleChangeTab, tabList }
 }

From 5d3e6658f236a083e35b59f68ddaa4e740cfe2dc Mon Sep 17 00:00:00 2001
From: Yeongjun Kim <kyjun519@gmail.com>
Date: Sun, 5 Nov 2023 02:19:36 +0900
Subject: [PATCH 38/38] =?UTF-8?q?feat:=20#43=20-=20useModalLogic=20?=
 =?UTF-8?q?=ED=9B=85=EC=97=90=20useCallback=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/Modal/hooks/useModalLogic.ts       | 26 ++++++++++++-------
 1 file changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/components/common/Modal/hooks/useModalLogic.ts b/src/components/common/Modal/hooks/useModalLogic.ts
index 19c99fc9..36d1d126 100644
--- a/src/components/common/Modal/hooks/useModalLogic.ts
+++ b/src/components/common/Modal/hooks/useModalLogic.ts
@@ -1,4 +1,4 @@
-import { useEffect } from 'react'
+import { useCallback, useEffect } from 'react'
 
 export interface useModalLogicProps {
   onClose: (e?: React.MouseEvent<HTMLButtonElement>) => void
@@ -29,16 +29,22 @@ const useModalLogic = ({
     }
   }, [onClose, onConfirm])
 
-  const handleClickOverlay = (e: React.MouseEvent<HTMLDivElement>) => {
-    if (e.target === modalRef.current) {
-      onClose()
-    }
-  }
+  const handleClickOverlay = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      if (e.target === modalRef.current) {
+        onClose()
+      }
+    },
+    [modalRef, onClose],
+  )
 
-  const handleClickConfirm = (e?: React.MouseEvent<HTMLButtonElement>) => {
-    onConfirm?.()
-    onClose()
-  }
+  const handleClickConfirm = useCallback(
+    (e?: React.MouseEvent<HTMLButtonElement>) => {
+      onConfirm?.()
+      onClose()
+    },
+    [onConfirm, onClose],
+  )
 
   return { handleClickOverlay, handleClickConfirm }
 }