refactor: Text 컴포넌트 재사용성 개선

woowacourse · May 3, 2021 · 6a366a1 · 6a366a1
1 parent 4b07468
commit 6a366a1
Show file tree

Hide file tree

Showing 13 changed files with 64 additions and 88 deletions.
diff --git a/src/components/Card/index.stories.js b/src/components/Card/index.stories.js
@@ -11,11 +11,7 @@ const Template = (args) => <Card {...args} />;
 
 export const PlusCard = Template.bind({});
 PlusCard.args = {
-  children: (
-    <Text fontSize="1.875rem" textAlign="center">
-      +
-    </Text>
-  ),
+  children: <Text className="CardListPage__Text">+</Text>,
 };
 
 export const PocoCard = Template.bind({});

diff --git a/src/components/Container/index.stories.js b/src/components/Container/index.stories.js
@@ -15,17 +15,11 @@ CardNumberInputContainer.args = {
   children: (
     <>
       <Input className="CardNumberInput__Field" type="number" value="1111" />
-      <Text fontSize="0.75rem" textAlign="start" width="1rem">
-        -
-      </Text>
+      <Text className="CardNumberInput__Separator">-</Text>
       <Input className="CardNumberInput__Field" type="number" value="1111" />
-      <Text fontSize="0.75rem" textAlign="start" width="1rem">
-        -
-      </Text>
+      <Text className="CardNumberInput__Separator">-</Text>
       <Input className="CardNumberInput__Field" type="password" value="1111" />
-      <Text fontSize="0.75rem" textAlign="start" width="1rem">
-        -
-      </Text>
+      <Text className="CardNumberInput__Separator">-</Text>
       <Input className="CardNumberInput__Field" type="password" value="1111" />
     </>
   ),
@@ -37,9 +31,7 @@ ExpirationDateInputContainer.args = {
   children: (
     <>
       <Input className="ExpirationDateInput__Field" placeholder="MM" type="number" value="04" />
-      <Text fontSize="0.75rem" textAlign="start" width="1rem">
-        /
-      </Text>
+      <Text className="ExpirationDateInput__Separator">/</Text>
       <Input className="ExpirationDateInput__Field" placeholder="YY" type="number" value="21" />
     </>
   ),

diff --git a/src/components/Text/index.js b/src/components/Text/index.js
@@ -5,43 +5,25 @@ import styles from './style.css';
 
 const cx = classNames.bind(styles);
 
-export const Text = ({
-  className,
-  color,
-  fontSize,
-  textAlign,
-  fontWeight,
-  width,
-  letterSpacing,
-  children,
-  ...props
-}) => {
-  const textClass = cx('Text', className);
-
+export const Text = ({ className, style, children, ...rest }) => {
   return (
-    <span className={textClass} style={{ color, fontSize, textAlign, fontWeight, width, letterSpacing }} {...props}>
+    <span className={cx('Text', className)} style={style} {...rest}>
       {children}
     </span>
   );
 };
 
 Text.propTypes = {
   className: PropTypes.string,
-  color: PropTypes.string,
-  fontSize: PropTypes.string,
-  textAlign: PropTypes.oneOf(['start', 'center', 'end']),
-  fontWeight: PropTypes.string,
+  style: PropTypes.shape({
+    color: PropTypes.string,
+    textAlign: PropTypes.string,
+    fontSize: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    fontWeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    letterSpacing: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    wordSpacing: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    textIndent: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    lineHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  }),
   children: PropTypes.string.isRequired,
-  width: PropTypes.string,
-  letterSpacing: PropTypes.string,
-};
-
-Text.defaultProps = {
-  className: '',
-  color: '#575757',
-  fontSize: '1rem',
-  fontWeight: '400',
-  textAlign: 'center',
-  width: '100%',
-  letterSpacing: '0%',
 };
diff --git a/src/components/Text/index.stories.js b/src/components/Text/index.stories.js
@@ -11,24 +11,17 @@ const Template = (args) => <Text {...args} />;
 export const CenterAlign = Template.bind({});
 CenterAlign.args = {
   children: '+',
-  fontSize: '1.875rem',
-  textAlign: 'center',
+  style: { fontSize: '1.875rem', textAlign: 'center' },
 };
 
 export const LeftAlign = Template.bind({});
 LeftAlign.args = {
   children: 'SUN',
-  fontSize: '0.75rem',
-  textAlign: 'start',
-  fontWeight: '600',
-  letterSpacing: '0.14em',
+  style: { fontSize: '0.75rem', textAlign: 'start', fontWeight: '600', letterSpacing: '0.14em' },
 };
 
 export const RightAlign = Template.bind({});
 RightAlign.args = {
   children: '04/21',
-  fontSize: '0.75rem',
-  textAlign: 'end',
-  fontWeight: '600',
-  letterSpacing: '0.14em',
+  style: { fontSize: '0.75rem', textAlign: 'end', fontWeight: '600', letterSpacing: '0.14em' },
 };
diff --git a/src/components/Text/style.css b/src/components/Text/style.css
@@ -1,3 +1,6 @@
 .Text {
   display: inline-block;
+  color: #575757;
+  font-size: 1rem;
+  font-weight: 400;
 }
diff --git a/src/pages/AddCardPages/AddCompletePage/index.js b/src/pages/AddCardPages/AddCompletePage/index.js
@@ -10,9 +10,7 @@ export const AddCompletePage = (props) => {
 
   return (
     <div>
-      <Text className="AddCompletePage__Text" fontSize="1.5rem">
-        카드등록이 완료되었습니다.
-      </Text>
+      <Text className="AddCompletePage__Text">카드등록이 완료되었습니다.</Text>
       <CreditCardPreview
         companyColor={company.color}
         companyName={company.name}

diff --git a/src/pages/AddCardPages/AddCompletePage/style.css b/src/pages/AddCardPages/AddCompletePage/style.css
@@ -1,5 +1,8 @@
 .AddCompletePage__Text {
   margin: 7rem 0 5rem;
+  width: 100%;
+  text-align: center;
+  font-size: 1.5rem;
 }
 
 .CreditCardPreview--large {

diff --git a/src/pages/AddCardPages/AddFormPage/CardInfoForm/CardNumberInput/index.js b/src/pages/AddCardPages/AddFormPage/CardInfoForm/CardNumberInput/index.js
@@ -23,7 +23,7 @@ export const CardNumberInput = (props) => {
   return (
     <>
       <Label>카드 번호</Label>
-      <Container className="CardInfoForm__Input__Filler--filled CardNumberInput__Filler">
+      <Container className="CardNumberInput__Filler CardInfoForm__Input__Filler--filled">
         <Input
           className="CardNumberInput__Field"
           type="number"
@@ -33,7 +33,7 @@ export const CardNumberInput = (props) => {
           onChange={(e) => handleCardNumberInputChange({ e, nextRef, number, setNumber, setCompany, setIsModalOpen })}
           onKeyDown={handleBlockInvalidChar}
         />
-        <Dash length={number.first.length} />
+        <Separator length={number.first.length} />
         <Input
           className="CardNumberInput__Field"
           type="number"
@@ -43,7 +43,7 @@ export const CardNumberInput = (props) => {
           onChange={(e) => handleCardNumberInputChange({ e, nextRef, number, setNumber, setCompany, setIsModalOpen })}
           onKeyDown={handleBlockInvalidChar}
         />
-        <Dash length={number.second.length} />
+        <Separator length={number.second.length} />
         <Input
           className="CardNumberInput__Field"
           type="password"
@@ -53,7 +53,7 @@ export const CardNumberInput = (props) => {
           onChange={(e) => handleCardNumberInputChange({ e, nextRef, number, setNumber, setCompany, setIsModalOpen })}
           onKeyDown={handleBlockInvalidChar}
         />
-        <Dash length={number.third.length} />
+        <Separator length={number.third.length} />
         <Input
           className="CardNumberInput__Field"
           type="password"
@@ -68,11 +68,11 @@ export const CardNumberInput = (props) => {
   );
 };
 
-function Dash({ length }) {
-  const className = length === CARD_NUMBER_UNIT_LENGTH ? 'Dash' : 'Dash Dash--hidden';
-  return (
-    <Text className={className} width="1rem">
-      -
-    </Text>
-  );
+function Separator({ length }) {
+  const classnames =
+    length === CARD_NUMBER_UNIT_LENGTH
+      ? 'CardNumberInput__Separator'
+      : 'CardNumberInput__Separator CardNumberInput__Separator--hidden';
+
+  return <Text className={classnames}>-</Text>;
 }
diff --git a/src/pages/AddCardPages/AddFormPage/CardInfoForm/ExpirationDateInput/index.js b/src/pages/AddCardPages/AddFormPage/CardInfoForm/ExpirationDateInput/index.js
@@ -24,7 +24,7 @@ export const ExpirationDateInput = forwardRef((props, monthRef) => {
           value={expirationDate.month}
           onChange={(e) => handleExpirationDateInputChange({ e, expirationDate, setExpirationDate, nextRef })}
         />
-        <Slash />
+        <Text className="ExpirationDateInput__Separator">/</Text>
         <Input
           className="ExpirationDateInput__Field"
           placeholder="YY"
@@ -39,12 +39,4 @@ export const ExpirationDateInput = forwardRef((props, monthRef) => {
   );
 });
 
-function Slash() {
-  return (
-    <Text color="#737373" fontSize="0.75rem" textAlign="center" width="1rem">
-      /
-    </Text>
-  );
-}
-
 ExpirationDateInput.displayName = 'ExpirationDateInput';
diff --git a/src/pages/AddCardPages/AddFormPage/CardInfoForm/OwnerNameInput/index.js b/src/pages/AddCardPages/AddFormPage/CardInfoForm/OwnerNameInput/index.js
@@ -10,13 +10,11 @@ export const OwnerNameInput = forwardRef((props, ref) => {
     <>
       <div className="OwnerNameInput__Header">
         <Label>카드 소유자 이름(선택)</Label>
-        <Text fontSize="0.75rem" fontWeight="600" letterSpacing="0.14em" textAlign="end" color="#525252" width="2rem">
-          {`${ownerName.length}/${MAX_OWNER_NAME_LENGTH}`}
-        </Text>
+        <Text className="OwnerNameInput__Header__Text">{`${ownerName.length}/${MAX_OWNER_NAME_LENGTH}`}</Text>
       </div>
       <Input
         className="OwnerNameInput__Field"
-        container="CardInfoForm__Input__Filler--filled OwnerNameInput__Filler"
+        container="OwnerNameInput__Filler CardInfoForm__Input__Filler--filled"
         placeholder="카드에 표시된 이름과 동일하게 입력하세요."
         name="ownerNameInput"
         maxLength={MAX_OWNER_NAME_LENGTH}

diff --git a/src/pages/AddCardPages/AddFormPage/CardInfoForm/style.css b/src/pages/AddCardPages/AddFormPage/CardInfoForm/style.css
@@ -6,17 +6,24 @@
   margin-top: 1rem;
 }
 
-.CardInfoForm .Dash {
+.CardNumberInput__Separator {
   text-align: center;
   color: #04c09e;
   font-size: 0.75rem;
   width: 1rem;
 }
 
-.CardInfoForm .Dash--hidden {
+.CardNumberInput__Separator--hidden {
   visibility: hidden;
 }
 
+.ExpirationDateInput__Separator {
+  color: #737373;
+  font-size: 0.75rem;
+  text-align: center;
+  width: 1rem;
+}
+
 .OwnerNameInput__Header {
   display: flex;
   align-items: center;
@@ -28,8 +35,14 @@
   flex-grow: 2;
 }
 
-.OwnerNameInput__Header .Text {
+.OwnerNameInput__Header__Text {
   margin: 0 0.25rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.14em;
+  text-align: end;
+  color: #525252;
+  width: 2rem;
 }
 
 .SecurityCodeInput__Wrapper {

diff --git a/src/pages/CardListPage/index.js b/src/pages/CardListPage/index.js
@@ -11,7 +11,7 @@ export const CardListPage = (props) => {
       <Heading>보유카드</Heading>
       <button className="Card__AddButton" onClick={handleAddButtonClick}>
         <Card>
-          <Text fontSize="1.875rem">+</Text>
+          <Text className="CardListPage__Text">+</Text>
         </Card>
       </button>
     </div>

diff --git a/src/pages/CardListPage/style.css b/src/pages/CardListPage/style.css
@@ -16,3 +16,9 @@
   outline: inherit;
   cursor: pointer;
 }
+
+.CardListPage__Text {
+  width: 100%;
+  font-size: 1.875rem;
+  text-align: center;
+}