Merge pull request #170 from CoolPeace-yanolza/feature/#165

[#165] 멘토님 코드 리뷰 반영 및 등록 페이지 코드 리팩토링
CoolPeace-yanolza · Feb 21, 2024 · 15d4203 · 15d4203
2 parents c9c8f4b + e9d4a89
commit 15d4203
Show file tree

Hide file tree

Showing 13 changed files with 75 additions and 135 deletions.
diff --git a/src/components/Register/Steps/FirstStep/index.tsx b/src/components/Register/Steps/FirstStep/index.tsx
@@ -7,7 +7,6 @@ import {
   InputButton,
   InputField,
   InputCheckBox,
-  InputWrapper,
   ErrorMessage
 } from '@components/Register/common';
 import { LimitWrapperStyleProps } from '@/types/register';
@@ -150,25 +149,20 @@ const FirstStep = () => {
             onButtonChange={handleDiscountTypeChange}
           />
         </ButtonWrapper>
-        <InputWrapper
-          state="정액 할인"
-          currentState={input.discountType}
-        >
+        {input.discountType === '정액 할인' && (
           <InputField
             placeholder="ex) 5000"
             defaultValue={input.discountFlat}
             text="원"
             onInputChange={handleDiscountFlatChange}
           />
-        </InputWrapper>
-        <InputWrapper
-          state="정률 할인"
-          currentState={input.discountType}
-        >
+        )}
+        {input.discountType === '정률 할인' && (
           <ContentWrapper>
             <InputField
               placeholder="ex) 50"
               defaultValue={input.discountFlatRate}
+              mode="percent"
               text="% 할인"
               onInputChange={handleDiscountFlatRateChange}
             />
@@ -179,19 +173,16 @@ const FirstStep = () => {
               onCheck={handleLabelChange}
             />
           </ContentWrapper>
-        </InputWrapper>
+        )}
         <LimitWrapper $hasLimit={input.hasLimit}>
-          <InputWrapper
-            state="정률 할인"
-            currentState={input.discountType}
-          >
+          {input.discountType === '정률 할인' && (
             <InputField
               placeholder="ex) 5000"
               defaultValue={input.maximumDiscount}
               text="원"
               onInputChange={handleMaximumDiscountChange}
             />
-          </InputWrapper>
+          )}
         </LimitWrapper>
         {(!isValid.isDiscountTypeValid ||
           !isValid.isDiscountFlatValid ||

diff --git a/src/components/Register/Steps/SecondStep/RoomList/index.tsx b/src/components/Register/Steps/SecondStep/RoomList/index.tsx
@@ -9,8 +9,8 @@ const RoomList = ({ rooms }: RoomListProps) => {
     <>
       {rooms.length > 0 && (
         <Container>
-          {rooms.map((room, index) => (
-            <Room key={index}>{sliceName(room.roomNumber)}</Room>
+          {rooms.map(room => (
+            <Room key={room.id}>{sliceName(room.roomNumber)}</Room>
           ))}
         </Container>
       )}

diff --git a/src/components/Register/Steps/SecondStep/RoomSelectModal/index.tsx b/src/components/Register/Steps/SecondStep/RoomSelectModal/index.tsx
@@ -105,9 +105,7 @@ const RoomSelectModal = ({ setIsOpen }: RoomSelectModalProps) => {
             <label>
               <SelectAll
                 type="checkbox"
-                checked={
-                  selectedRooms.length === sortedRooms.length ? true : false
-                }
+                checked={selectedRooms.length === sortedRooms.length}
                 onChange={handleSelectAll}
               />
               <FilterCheckIcon

diff --git a/src/components/Register/Steps/SecondStep/index.tsx b/src/components/Register/Steps/SecondStep/index.tsx
@@ -8,7 +8,6 @@ import {
   InputContainer,
   InputButton,
   InputCheckBox,
-  InputWrapper,
   ErrorMessage
 } from '@components/Register/common';
 import RoomSelectModal from './RoomSelectModal';
@@ -136,7 +135,7 @@ const SecondStep = () => {
             onButtonChange={handleRoomTypeChange}
           />
         </ButtonWrapper>
-        <InputWrapper isSelected={input.roomType.includes('숙박')}>
+        {input.roomType.includes('숙박') && (
           <ContentWrapper>
             <InputCheckBox
               id="severalNights"
@@ -145,7 +144,7 @@ const SecondStep = () => {
               onCheck={handleLabelChange}
             />
           </ContentWrapper>
-        </InputWrapper>
+        )}
         {!isValid.isRoomTypeValid && (
           <ErrorMessage>쿠폰 적용 유형 선택은 필수입니다.</ErrorMessage>
         )}
@@ -172,14 +171,11 @@ const SecondStep = () => {
             onButtonChange={handleToAllRoomsChange}
           />
         </ButtonWrapper>
-        <InputWrapper
-          state="false"
-          currentState={input.toAllRooms}
-        >
+        {input.discountType === 'false' && (
           <ContentWrapper>
             <RoomList rooms={input.selectedRooms} />
           </ContentWrapper>
-        </InputWrapper>
+        )}
         {!isValid.isToAllRoomsValid && (
           <ErrorMessage>쿠폰 적용 객실 선택은 필수입니다.</ErrorMessage>
         )}

diff --git a/src/components/Register/Steps/ThirdStep/RadioGroup/index.tsx b/src/components/Register/Steps/ThirdStep/RadioGroup/index.tsx
@@ -8,69 +8,55 @@ const RadioGroup = () => {
   const [input, setInput] = useRecoilState(registerInputState);
   const [preview, setPreview] = useRecoilState(previewState);
 
+  const days = [
+    {
+      id: 'monday',
+      value: '월요일'
+    },
+    {
+      id: 'tuesday',
+      value: '화요일'
+    },
+    {
+      id: 'wednesday',
+      value: '수요일'
+    },
+    {
+      id: 'thursday',
+      value: '목요일'
+    },
+    {
+      id: 'friday',
+      value: '금요일'
+    },
+    {
+      id: 'saturday',
+      value: '토요일'
+    },
+    {
+      id: 'sunday',
+      value: '일요일'
+    }
+  ];
+
   const handleDayChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setInput({ ...input, day: e.target.value });
     setPreview({ ...preview, day: e.target.value + ' 체크인 시 적용 가능' });
   };
 
   return (
     <Container>
-      <Radio
-        id="monday"
-        name="days"
-        value="월요일"
-        isChecked={input.day === '월요일'}
-        text="월"
-        onButtonChange={handleDayChange}
-      />
-      <Radio
-        id="tuesday"
-        name="days"
-        value="화요일"
-        isChecked={input.day === '화요일'}
-        text="화"
-        onButtonChange={handleDayChange}
-      />
-      <Radio
-        id="wednesday"
-        name="days"
-        value="수요일"
-        isChecked={input.day === '수요일'}
-        text="수"
-        onButtonChange={handleDayChange}
-      />
-      <Radio
-        id="thursday"
-        name="days"
-        value="목요일"
-        isChecked={input.day === '목요일'}
-        text="목"
-        onButtonChange={handleDayChange}
-      />
-      <Radio
-        id="friday"
-        name="days"
-        value="금요일"
-        isChecked={input.day === '금요일'}
-        text="금"
-        onButtonChange={handleDayChange}
-      />
-      <Radio
-        id="saturday"
-        name="days"
-        value="토요일"
-        isChecked={input.day === '토요일'}
-        text="토"
-        onButtonChange={handleDayChange}
-      />
-      <Radio
-        id="sunday"
-        name="days"
-        value="일요일"
-        isChecked={input.day === '일요일'}
-        text="일"
-        onButtonChange={handleDayChange}
-      />
+      {days.map((day, index) => (
+        <Radio
+          key={index}
+          id={day.id}
+          name="days"
+          value={day.value}
+          isChecked={input.day === day.value}
+          text={day.value.slice(0, 1)}
+          onButtonChange={handleDayChange}
+        />
+      ))}
     </Container>
   );
 };

diff --git a/src/components/Register/common/InputCheckBox/index.tsx b/src/components/Register/common/InputCheckBox/index.tsx
@@ -42,6 +42,8 @@ const InputCheckBox = ({
 export default InputCheckBox;
 
 const Container = styled.div`
+  margin-top: 9px;
+
   display: flex;
   align-items: center;
 `;

diff --git a/src/components/Register/common/InputField/index.tsx b/src/components/Register/common/InputField/index.tsx
@@ -2,18 +2,14 @@ import styled from '@emotion/styled';
 
 import theme from '@styles/theme';
 import { InputFieldProps, InputFieldStyleProps } from '@/types/register';
-import { inputFilter } from '@utils/index';
 
 const InputField = ({
   placeholder,
   defaultValue,
+  mode = 'won',
   text,
   onInputChange
 }: InputFieldProps) => {
-  const handleInput = (e: React.FormEvent<HTMLInputElement>) => {
-    inputFilter(e);
-  };
-
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (onInputChange) {
       onInputChange(e);
@@ -23,11 +19,11 @@ const InputField = ({
   return (
     <Container>
       <Input
+        type="number"
         placeholder={placeholder}
         defaultValue={defaultValue}
-        {...(text !== '원' && { maxLength: 2 })}
+        {...(mode === 'percent' && { maxLength: 2 })}
         $text={text}
-        onInput={handleInput}
         onChange={handleInputChange}
       />
       <Text $text={text}>{text}</Text>
@@ -42,7 +38,7 @@ const Container = styled.div`
 
   width: 245px;
 
-  margin-right: 10px;
+  margin: 9px 10px 0px 0px;
 
   ${theme.response.tablet} {
     width: 29vw;
@@ -65,6 +61,16 @@ const Input = styled.input<InputFieldStyleProps>`
   font-size: 15px;
   text-align: right;
 
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  &[type='number'] {
+    -moz-appearance: textfield;
+  }
+
   ${theme.response.tablet} {
     height: 5vw;
 

diff --git a/src/components/Register/common/InputWrapper/index.tsx b/src/components/Register/common/InputWrapper/index.tsx
diff --git a/src/components/Register/common/index.tsx b/src/components/Register/common/index.tsx
@@ -4,5 +4,4 @@ export { default as InputAccordion } from './InputAccordion';
 export { default as InputField } from './InputField';
 export { default as InputCheckBox } from './InputCheckBox';
 export { default as InputRadio } from './InputRadio';
-export { default as InputWrapper } from './InputWrapper';
 export { default as ErrorMessage } from './ErrorMessage';
diff --git a/src/types/register.ts b/src/types/register.ts
@@ -44,6 +44,7 @@ export type ButtonStyleProps = {
 export type InputFieldProps = {
   placeholder: string;
   defaultValue?: string;
+  mode?: string;
   text: string;
   onInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
 };
@@ -75,14 +76,6 @@ export type InputRadioProps = {
   onButtonChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 };
 
-// InputWrapper
-export type InputWrapperProps = {
-  state?: string;
-  currentState?: string;
-  isSelected?: boolean;
-  children: ReactNode;
-};
-
 // ErrorMessage
 export type ErrorMessageProps = {
   children: ReactNode;

diff --git a/src/utils/index.ts b/src/utils/index.ts
@@ -14,7 +14,6 @@ export {
   getCurrentYearStartDate,
   getCurrentYearEndDate
 } from './lib/dateSetting';
-export { inputFilter } from './lib/inputFilter';
 export { sliceName } from './lib/sliceName';
 export { getStepperConfig } from './lib/getStepperConfig';
 export {

diff --git a/src/utils/lib/inputFilter.ts b/src/utils/lib/inputFilter.ts
diff --git a/src/utils/lib/sliceName.ts b/src/utils/lib/sliceName.ts
@@ -1,3 +1,3 @@
-export const sliceName = (name: string) => {
-  return name.length < 8 ? name : name.slice(0, 7) + '...';
+export const sliceName = (name: string, max = 7) => {
+  return name.length <= max ? name : name.slice(0, max) + '…';
 };