[#134] 등록 페이지 QA 수정사항 반영

src/components/Register/Steps/FirstStep/index.tsx

@@ -193,12 +193,11 @@ const FirstStep = () => {
             />
           </InputWrapper>
         </LimitWrapper>
-        {!isValid.isDiscountTypeValid && (
+        {(!isValid.isDiscountTypeValid ||
+          !isValid.isDiscountFlatValid ||
+          !isValid.isDiscountFlatRateValid) && (
           <ErrorMessage>쿠폰 할인 설정은 필수입니다.</ErrorMessage>
         )}
-        {(!isValid.isDiscountFlatValid || !isValid.isDiscountFlatRateValid) && (
-          <ErrorMessage>숫자로 입력해주세요.</ErrorMessage>
-        )}
         {!isValid.isThousands && (
           <ErrorMessage>1,000 원 단위로 입력 가능합니다.</ErrorMessage>
         )}

src/components/Register/Steps/SecondStep/RoomSelectModal/index.tsx

@@ -3,11 +3,7 @@ import { useRecoilState } from 'recoil';
 import styled from '@emotion/styled';
 
 import { Backdrop } from '@components/common';
-import {
-  RoomType,
-  RoomSelectModalProps,
-  RoomSelectModalStyleProps
-} from '@/types/register';
+import { RoomType, RoomSelectModalProps } from '@/types/register';
 import close from '@assets/icons/ic-register-close.svg';
 import sort from '@assets/icons/ic-register-sort.svg';
 import filterChecked from '@assets/icons/ic-register-filter-checked.svg';
@@ -96,10 +92,12 @@ const RoomSelectModal = ({ setIsOpen }: RoomSelectModalProps) => {
       <Container>
         <Header>
           적용 객실 설정
-          <CloseButton
-            $src={close}
-            onClick={handleClose}
-          />
+          <CloseButton onClick={handleClose}>
+            <CloseIcon
+              src={close}
+              alt="닫기 아이콘"
+            />
+          </CloseButton>
         </Header>
         <Filter>
           <FilterCell>
@@ -109,10 +107,16 @@ const RoomSelectModal = ({ setIsOpen }: RoomSelectModalProps) => {
                 checked={
                   selectedRooms.length === sortedRooms.length ? true : false
                 }
-                $src={filterChecked}
                 onChange={handleSelectAll}
               />
-              <FilterCheckIcon $src={filterUnchecked} />
+              <FilterCheckIcon
+                src={
+                  selectedRooms.length === sortedRooms.length
+                    ? filterChecked
+                    : filterUnchecked
+                }
+                alt="체크박스 아이콘"
+              />
             </label>
           </FilterCell>
           <FilterCell>
@@ -137,10 +141,16 @@ const RoomSelectModal = ({ setIsOpen }: RoomSelectModalProps) => {
                     <SelectOne
                       type="checkbox"
                       checked={selectedRooms.includes(room) ? true : false}
-                      $src={listChecked}
                       onChange={e => handleSelectOne(e, room)}
                     />
-                    <ListCheckIcon $src={listUnchecked} />
+                    <ListCheckIcon
+                      src={
+                        selectedRooms.includes(room)
+                          ? listChecked
+                          : listUnchecked
+                      }
+                      alt="체크박스 아이콘"
+                    />
                   </label>
                 </ListCell>
                 <ListCell>{sliceName(room.roomNumber)}</ListCell>
@@ -190,18 +200,23 @@ const Header = styled.div`
   font-size: 18px;
 `;
 
-const CloseButton = styled.button<RoomSelectModalStyleProps>`
+const CloseButton = styled.button`
   width: 35px;
   height: 35px;
 
   padding: 0px;
   border: none;
 
-  background: url(${props => props.$src}) center / contain;
+  background: #fff;
 
   cursor: pointer;
 `;
 
+const CloseIcon = styled.img`
+  width: 35px;
+  height: 35px;
+`;
+
 const Filter = styled.div`
   height: 63px;
 
@@ -224,19 +239,13 @@ const FilterCell = styled.div`
   align-items: center;
 `;
 
-const SelectAll = styled.input<RoomSelectModalStyleProps>`
+const SelectAll = styled.input`
   display: none;
-
-  &:checked + div {
-    background: url(${props => props.$src}) no-repeat;
-  }
 `;
 
-const FilterCheckIcon = styled.div<RoomSelectModalStyleProps>`
+const FilterCheckIcon = styled.img`
   width: 21px;
   height: 21px;
-
-  background: url(${props => props.$src}) no-repeat;
 `;
 
 const SortButton = styled.button`
@@ -289,19 +298,13 @@ const ListCell = styled.div`
   align-items: center;
 `;
 
-const SelectOne = styled.input<RoomSelectModalStyleProps>`
+const SelectOne = styled.input`
   display: none;
-
-  &:checked + div {
-    background: url(${props => props.$src}) no-repeat;
-  }
 `;
 
-const ListCheckIcon = styled.div<RoomSelectModalStyleProps>`
+const ListCheckIcon = styled.img`
   width: 21px;
   height: 21px;
-
-  background: url(${props => props.$src}) no-repeat;
 `;
 
 const Footer = styled.div`

src/components/Register/Steps/SecondStep/index.tsx

@@ -97,7 +97,10 @@ const SecondStep = () => {
 
   const handleToAllRoomsChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setInput({ ...input, toAllRooms: e.target.value });
-    setPreview({ ...preview, toAllRooms: e.target.value });
+    setPreview({
+      ...preview,
+      toAllRooms: e.target.value === 'true' ? '모든 객실' : '일부 객실'
+    });
     setIsValid(prev => ({
       ...prev,
       isToAllRoomsValid: true

src/components/Register/common/InputAccordion/index.tsx

@@ -34,9 +34,13 @@ const InputAccordion = ({ title, value, children }: InputAccordionProps) => {
         <Description>{title}</Description>
         <Button
           $isOpen={isOpen}
-          src={toggle}
           onClick={handleToggle}
-        />
+        >
+          <img
+            src={toggle}
+            alt="아코디언 토글 아이콘"
+          />
+        </Button>
       </Header>
       <ContentWrapper ref={contentWrapperRef}>
         <Content ref={contentRef}>{children}</Content>
@@ -77,7 +81,7 @@ const Button = styled.button<ButtonStyleProps>`
   padding: 0px;
   border: none;
 
-  background: url(${props => props.src});
+  background: #fff;
 
   transform: rotate(
     ${props => {

src/types/register.ts

@@ -38,7 +38,6 @@ export type InputAccordionProps = {
 
 export type ButtonStyleProps = {
   $isOpen: boolean;
-  src: string;
 };
 
 // InputField
@@ -65,10 +64,6 @@ export type LabelStyleProps = {
   $isChecked: boolean;
 };
 
-export type CheckIconStyleProps = {
-  $src: string;
-};
-
 // InputRadio
 export type InputRadioProps = {
   id: string;
@@ -159,10 +154,6 @@ export type RoomSelectModalProps = {
   setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
-export type RoomSelectModalStyleProps = {
-  $src: string;
-};
-
 // RoomSelectButton
 export type RoomSelectButtonProps = {
   type: string;

src/utils/lib/showValidationMessage.ts

@@ -57,20 +57,3 @@ export const showFourthStepValidationMessage = (
     setIsValid(prev => ({ ...prev, endDateAfterStartDate: false }));
   }
 };
-
-// export const handleStepLessThan3 = (
-//   currentStep,
-//   input,
-//   isFilled,
-//   onButtonClick
-// ) => {
-//   if (
-//     currentStep === 0 &&
-//     input.discountType === '정액 할인' &&
-//     Number(input.discountFlat) % 1000
-//   ) {
-//     return;
-//   } else if (currentStep === 2 || isFilled) {
-//     onButtonClick(prev => prev + 1);
-//   }
-// };