From 3558bd9711513a35e8473c71be3769b8a5aeccb1 Mon Sep 17 00:00:00 2001
From: hanseo <yds06206@gmail.com>
Date: Thu, 5 Sep 2024 20:33:15 +0900
Subject: [PATCH] =?UTF-8?q?code=20review:=20naming=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/shared/components/CategoryCommonMoribSet.tsx | 13 ++++++++-----
 src/shared/components/CategoryModalLeft.tsx      | 10 +++++-----
 src/shared/components/CategoryTabSelect.tsx      |  6 +++---
 3 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/src/shared/components/CategoryCommonMoribSet.tsx b/src/shared/components/CategoryCommonMoribSet.tsx
index cc4a8d65..dc8acf0b 100644
--- a/src/shared/components/CategoryCommonMoribSet.tsx
+++ b/src/shared/components/CategoryCommonMoribSet.tsx
@@ -50,6 +50,13 @@ const CategoryCommonMoribSet = ({ variant, urlInfos, children }: CategoryCommonM
 	const theadStyle =
 		' detail-semibold-14 flex h-[4.6rem] items-center border-b-[0.1rem] border-gray-bg-04 text-gray-04';
 
+	const renderEmptyRows = (count: number) => {
+		return Array.from({ length: count }).map((_, index) => (
+			<div key={`empty-row-${index}`} className="h-[4.6rem] w-full border-b-[0.1rem] border-gray-bg-04" />
+		));
+	};
+
+	const emptyRowCount = Math.max(sizeVariant[variant].rowCounts - urlInfos.length, 0);
 	return (
 		<div
 			className={`${defaultTableStyle} ${optionalScrollStyle} ${sizeVariant[variant].bgColor} ${sizeVariant[variant].width} ${sizeVariant[variant].height} ${sizeVariant[variant].maxHeight}`}
@@ -62,11 +69,7 @@ const CategoryCommonMoribSet = ({ variant, urlInfos, children }: CategoryCommonM
 
 				<div>
 					{children}
-					{Array.from({ length: Math.max(sizeVariant[variant].rowCounts - urlInfos.length, 0) }, (_, index) => (
-						<div key={`empty-row-${index}`}>
-							<div className="h-[4.6rem] w-full border-b-[0.1rem] border-gray-bg-04" />
-						</div>
-					))}
+					{renderEmptyRows(emptyRowCount)}
 				</div>
 			</div>
 		</div>
diff --git a/src/shared/components/CategoryModalLeft.tsx b/src/shared/components/CategoryModalLeft.tsx
index e723b6bf..39345e15 100644
--- a/src/shared/components/CategoryModalLeft.tsx
+++ b/src/shared/components/CategoryModalLeft.tsx
@@ -35,7 +35,7 @@ const CategoryModalLeft = ({
 	isClicked,
 	selectedOption,
 }: ModalProps) => {
-	const [isSelectedTab, setSelectedTab] = useState(CATEGORY_MODALTABS[0].id);
+	const [selectedTabId, setSelectedTabId] = useState(CATEGORY_MODALTABS[0].id);
 
 	const { data: categoryData } = useCategoryLists();
 	const categories = categoryData?.data || [];
@@ -49,10 +49,10 @@ const CategoryModalLeft = ({
 	};
 
 	const handleTabChange = (tab: number) => {
-		setSelectedTab(tab);
+		setSelectedTabId(tab);
 	};
 
-	const disabled = isSelectedTab === 2;
+	const disabled = selectedTabId === 2;
 
 	return (
 		<div className="h-[80rem] w-[68.8rem] rounded-l-[10px] bg-gray-bg-04 py-[2.8rem] pl-[4.4rem] pr-[4.3rem]">
@@ -60,7 +60,7 @@ const CategoryModalLeft = ({
 				<h1 className="head-bold-24 text-gray-04">카테고리 추가</h1>
 			</header>
 			<aside className="mb-[8px]">
-				<CategoryTabSelect tabs={CATEGORY_MODALTABS} handleTabChange={handleTabChange} isSelectedTab={isSelectedTab} />
+				<CategoryTabSelect tabs={CATEGORY_MODALTABS} handleTabChange={handleTabChange} selectedTabId={selectedTabId} />
 
 				<div className="relative mt-[0px]">
 					<DropdownCategory
@@ -76,7 +76,7 @@ const CategoryModalLeft = ({
 			</aside>
 
 			<CategoryCommonMoribSet variant="smallLeft" urlInfos={msetUrlInfos}>
-				{isSelectedTab !== 2 &&
+				{selectedTabId !== 2 &&
 					msetUrlInfos.map((urlInfo: UrlInfo) => (
 						<div
 							key={urlInfo.url}
diff --git a/src/shared/components/CategoryTabSelect.tsx b/src/shared/components/CategoryTabSelect.tsx
index ef63dc08..9774b455 100644
--- a/src/shared/components/CategoryTabSelect.tsx
+++ b/src/shared/components/CategoryTabSelect.tsx
@@ -8,10 +8,10 @@ interface Tabs {
 interface TabSelectProps {
 	tabs: Tabs[];
 	handleTabChange: (number: number) => void;
-	isSelectedTab: number;
+	selectedTabId: number;
 }
 
-const CategoryTabSelect = ({ tabs, handleTabChange, isSelectedTab }: TabSelectProps) => {
+const CategoryTabSelect = ({ tabs, handleTabChange, selectedTabId }: TabSelectProps) => {
 	return (
 		<>
 			{tabs.map((tab) => (
@@ -21,7 +21,7 @@ const CategoryTabSelect = ({ tabs, handleTabChange, isSelectedTab }: TabSelectPr
 					onClick={() => {
 						handleTabChange(tab.id);
 					}}
-					activeTab={isSelectedTab}
+					activeTab={selectedTabId}
 				>
 					{tab.name}
 				</ButtonCategoryTab>