From 470ae0516f8d4733a3d929bb87c2d257b95f1355 Mon Sep 17 00:00:00 2001
From: from1to2 <124763142+from1to2@users.noreply.github.com>
Date: Wed, 8 Nov 2023 14:47:49 +0900
Subject: [PATCH] =?UTF-8?q?style:=20CustomSelectorButton=20=EA=B3=B5?=
 =?UTF-8?q?=ED=86=B5=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20(#71)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: businesscardcontainer

* style: Text 컴포넌트 textColor 속성 추가

* style: alerttext, countnumber 수정

* style: selectorbutton 수정

* style: customselectorbutton

* refactor: 필수 prop 설정

* refactor: pr 수정사항 반영

* refactor: 속성명 수정
---
 .../common/BusinessCardContainer/index.tsx    |  1 +
 .../common/CustomSelectorButton/index.tsx     | 24 +++++++++----------
 .../common/SelectorButtonContainer/index.tsx  |  6 ++---
 3 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/src/components/common/BusinessCardContainer/index.tsx b/src/components/common/BusinessCardContainer/index.tsx
index ee5cd766..104b1e40 100644
--- a/src/components/common/BusinessCardContainer/index.tsx
+++ b/src/components/common/BusinessCardContainer/index.tsx
@@ -108,6 +108,7 @@ const CameraIcon = styled.img`
   width: 38px;
   height: 38px;
 `
+
 const UploadLabel = styled.label`
   cursor: pointer;
 `
diff --git a/src/components/common/CustomSelectorButton/index.tsx b/src/components/common/CustomSelectorButton/index.tsx
index 2c11bcff..d2e5cab7 100644
--- a/src/components/common/CustomSelectorButton/index.tsx
+++ b/src/components/common/CustomSelectorButton/index.tsx
@@ -7,19 +7,19 @@ import { palette } from '@/styles/palette'
 type CustomSelectorButtonProps = {
   isDarkMode: boolean
   buttonName: string
-  onClick: (selected: boolean) => void
+  isButtonClicked: (selected: boolean) => void
   onRemove: () => void
-  isButtonselected: boolean
-  maxLengthReached: boolean
+  isButtonSelected: boolean
+  isMaxLengthReached: boolean
 }
 
 const CustomSelectorButton = ({
   isDarkMode,
   buttonName,
-  onClick,
+  isButtonClicked,
   onRemove,
-  isButtonselected: propIsButtonSelected,
-  maxLengthReached,
+  isButtonSelected: propIsButtonSelected,
+  isMaxLengthReached,
 }: CustomSelectorButtonProps) => {
   const defaultSettings = isDarkMode
     ? {
@@ -40,12 +40,12 @@ const CustomSelectorButton = ({
   }, [propIsButtonSelected])
 
   const handleButtonClick = () => {
-    if (maxLengthReached && !isButtonSelected) {
-      onClick && onClick(true)
+    if (isMaxLengthReached && !isButtonSelected) {
+      isButtonClicked && isButtonClicked(true)
       return
     }
     setIsButtonSelected((prevState) => !prevState)
-    if (onClick) onClick(!isButtonSelected)
+    if (isButtonClicked) isButtonClicked(!isButtonSelected)
   }
 
   return (
@@ -61,7 +61,7 @@ const CustomSelectorButton = ({
       >
         {buttonName}
       </StyledButton>
-      <RemoveButton onClick={onRemove}>
+      <StyledRemoveButton onClick={onRemove}>
         <TiDelete
           style={{
             position: 'relative',
@@ -73,7 +73,7 @@ const CustomSelectorButton = ({
             color: isDarkMode ? palette.GRAY300 : palette.BLACK,
           }}
         />
-      </RemoveButton>
+      </StyledRemoveButton>
     </StyledButtonWrapper>
   )
 }
@@ -83,7 +83,7 @@ const StyledButtonWrapper = styled.div`
   align-items: center;
 `
 
-const RemoveButton = styled.button`
+const StyledRemoveButton = styled.button`
   margin-left: 8px;
   background-color: transparent;
   border: none;
diff --git a/src/components/common/SelectorButtonContainer/index.tsx b/src/components/common/SelectorButtonContainer/index.tsx
index 9d6a2a15..397585bb 100644
--- a/src/components/common/SelectorButtonContainer/index.tsx
+++ b/src/components/common/SelectorButtonContainer/index.tsx
@@ -65,10 +65,10 @@ const SelectorButtonContainer = ({
             key={index}
             isDarkMode={isDarkMode}
             buttonName={name}
-            onClick={(isSelected) => handleCustomButtonClick(isSelected)}
+            isButtonClicked={(isSelected) => handleCustomButtonClick(isSelected)}
             onRemove={() => handleCustomButtonRemove(name)}
-            maxLengthReached={selectedCount >= maxLength}
-            isButtonselected={false}
+            isMaxLengthReached={selectedCount >= maxLength}
+            isButtonSelected={false}
           />
         ))}
         {showAlert && (