style: CustomSelectorButton 공통 컴포넌트 (#71)

* feat: businesscardcontainer * style: Text 컴포넌트 textColor 속성 추가 * style: alerttext, countnumber 수정 * style: selectorbutton 수정 * style: customselectorbutton * refactor: 필수 prop 설정 * refactor: pr 수정사항 반영 * refactor: 속성명 수정
coffee-meet · Nov 8, 2023 · 470ae05 · 470ae05
1 parent 6b0a18a
commit 470ae05
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 15 deletions.
diff --git 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
@@ -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
@@ -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 && (