fix: input, dropdown className 수정

team-aliens · Mar 2, 2023 · e319bc8 · e319bc8
1 parent 6e6ebc4
commit e319bc8
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 15 deletions.
diff --git a/src/components/dropdown/ItemsBox.tsx b/src/components/dropdown/ItemsBox.tsx
@@ -2,6 +2,7 @@ import { Dispatch, SetStateAction } from 'react';
 import styled from 'styled-components';
 
 interface PropsType<T> {
+  className?: string;
   items: ReadonlyArray<T>;
   onChange: (value: T) => void;
   isOpen: boolean;
@@ -17,11 +18,13 @@ export const ItemBox = <T extends string>({
   setIsOpen,
   setText,
   disable,
+  className,
 }: PropsType<T>) => {
   return (
-    <_DropDownItemsBox isOpen={!disable && isOpen}>
+    <_DropDownItemsBox className={className} isOpen={!disable && isOpen}>
       {items.map((i, idx) => (
         <_DropDownItem
+          className={className}
           key={idx}
           onClick={() => {
             setIsOpen(false);

diff --git a/src/components/dropdown/Label.tsx b/src/components/dropdown/Label.tsx
@@ -1,12 +1,13 @@
 import { Text } from '../styleGuide/text/Text';
 
 interface PropsType {
+  className?: string;
   label: string;
 }
 
-export const Label = ({ label }: PropsType) => {
+export const Label = ({ label, className }: PropsType) => {
   return (
-    <Text size="bodyM" color="gray6">
+    <Text className={className} size="bodyM" color="gray6">
       {label}
     </Text>
   );

diff --git a/src/components/dropdown/SelectedBox.tsx b/src/components/dropdown/SelectedBox.tsx
@@ -3,6 +3,7 @@ import styled from 'styled-components';
 import { Arrow } from '../styleGuide/icon';
 
 interface PropsType<T> {
+  className?: string;
   disable?: boolean;
   setIsOpen: Dispatch<SetStateAction<boolean>>;
   placeholder: string;
@@ -16,15 +17,21 @@ export const SelectedBox = <T extends string>({
   placeholder,
   text,
   isOpen,
+  className,
 }: PropsType<T>) => {
   return (
     <_DropDownSelectedBox
+      className={className}
       disable={disable}
       onClick={() => !disable && setIsOpen(!isOpen)}
       isPlaceholder={text === placeholder}
     >
-      <p>{text}</p>
-      <Arrow colorKey={'gray5'} direction={isOpen ? 'top' : 'bottom'} />
+      <p className={className}>{text}</p>
+      <Arrow
+        className={className}
+        colorKey={'gray5'}
+        direction={isOpen ? 'top' : 'bottom'}
+      />
     </_DropDownSelectedBox>
   );
 };

diff --git a/src/components/dropdown/index.tsx b/src/components/dropdown/index.tsx
@@ -39,16 +39,18 @@ export const DropDown = <T extends string>({
   return (
     <_Wrapper margin={margin} className={className}>
       <OutsideClickHandler onOutsideClick={() => setIsOpen(false)}>
-        {label && <Label label={label} />}
-        <_DropDownBox width={width}>
+        {label && <Label className={className} label={label} />}
+        <_DropDownBox className={className} width={width}>
           <SelectedBox
+            className={className}
             disable={disable}
             setIsOpen={setIsOpen}
             placeholder={placeholder}
             text={text}
             isOpen={isOpen}
           />
           <ItemBox
+            className={className}
             items={items}
             onChange={onChange}
             isOpen={isOpen}

diff --git a/src/components/input/ErrorMsg.tsx b/src/components/input/ErrorMsg.tsx
@@ -2,12 +2,18 @@ import styled from 'styled-components';
 import { Text } from '../styleGuide/text/Text';
 
 export interface errorMsgPropsType {
+  className?: string;
   errorMsg?: string;
 }
 
-export const ErrorMsg = ({ errorMsg }: errorMsgPropsType) => {
+export const ErrorMsg = ({ errorMsg, className }: errorMsgPropsType) => {
   return (
-    <_Error margin={[8, 0, 0, 16]} color="error" size="captionM">
+    <_Error
+      className={className}
+      margin={[8, 0, 0, 16]}
+      color="error"
+      size="captionM"
+    >
       {errorMsg}
     </_Error>
   );

diff --git a/src/components/input/Label.tsx b/src/components/input/Label.tsx
@@ -2,11 +2,12 @@ import { Text } from '../styleGuide/text/Text';
 
 export interface labelPropsType {
   label?: string;
+  className?: string;
 }
 
-export const Label = ({ label }: labelPropsType) => {
+export const Label = ({ label, className }: labelPropsType) => {
   return (
-    <Text margin={['left', 6]} size="bodyM" color="gray6">
+    <Text className={className} margin={['left', 6]} size="bodyM" color="gray6">
       {label}
     </Text>
   );

diff --git a/src/components/input/index.tsx b/src/components/input/index.tsx
@@ -34,9 +34,10 @@ export const Input = ({
   const [isInputClicked, setIsInputClicked] = useState<boolean>(false);
   return (
     <_Wrapper margin={margin} className={className}>
-      <Label label={label} />
-      <_InputWrapper width={width}>
+      <Label className={className} label={label} />
+      <_InputWrapper className={className} width={width}>
         <_Input
+          className={className}
           onWheel={(e) => {
             //@ts-ignore
             document.activeElement.blur();
@@ -56,16 +57,17 @@ export const Input = ({
           name={name}
         />
         {type == 'password' && (
-          <_IconBox>
+          <_IconBox className={className}>
             <Eye
+              className={className}
               onClick={() => setIsOpen(!isOpen)}
               colorKey="gray5"
               state={isOpen}
             />
           </_IconBox>
         )}
       </_InputWrapper>
-      <ErrorMsg errorMsg={errorMsg} />
+      <ErrorMsg className={className} errorMsg={errorMsg} />
     </_Wrapper>
   );
 };