Merge branch 'feat/#443/TicketHolderListPublishing' of https://github…

….com/TEAM-BEAT/BEAT-Client into feat/#453/TicketHolderListFunction
TEAM-BEAT · Nov 27, 2024 · 4c0bc54 · 4c0bc54
2 parents e292be6 + 78c3122
commit 4c0bc54
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 127 deletions.
diff --git a/src/assets/svgs/index.ts b/src/assets/svgs/index.ts
diff --git a/src/assets/svgs/index.tsx b/src/assets/svgs/index.tsx
@@ -65,4 +65,4 @@ export { default as NotFoundAsset } from "./NotFoundAsset";
 export { default as SelectionControlCheckboxSelectedOff } from "./SelectionControlCheckboxSelectedOff";
 export { default as Subtract } from "./Subtract";
 export { default as Switch } from "./Switch";
-export { default as Union } from "./Union";
+export { default as Union } from "./Union";
diff --git a/src/pages/ticketholderlist/components/FilterBottomSheet/FilterBottomSheet.styled.ts b/src/pages/ticketholderlist/components/FilterBottomSheet/FilterBottomSheet.styled.ts
@@ -58,14 +58,9 @@ export const BoxDivider = styled.div`
 `;
 
 export const CheckBoxContainer = styled.section`
-  display: flex;
-  flex-direction: column;
-  gap: 1.2rem;
-`;
-
-export const CheckBoxRow = styled.section`
-  display: flex;
-  gap: 8.1rem;
+  display: grid;
+  grid-gap: 1.4rem 8.1rem;
+  grid-template-columns: repeat(2, 9rem);
 `;
 
 export const CheckBoxLabel = styled.label`

diff --git a/src/pages/ticketholderlist/components/FilterBottomSheet/FilterBottomSheet.tsx b/src/pages/ticketholderlist/components/FilterBottomSheet/FilterBottomSheet.tsx
@@ -24,18 +24,13 @@ const FilterBottomSheet = ({
     onClickOutside();
   };
 
-  const splitArray = (arrayLength: number): number[][] => {
+  const scheduleNumberArray = (arrayLength: number): number[] => {
     const array = Array.from({ length: arrayLength }, (_, idx) => idx + 1);
-    const result: number[][] = [];
 
-    for (let i = 0; i < array.length; i += 2) {
-      result.push(array.slice(i, i + 2));
-    }
-
-    return result;
+    return array;
   };
 
-  const scheduleArray = splitArray(totalScheduleCount);
+  const scheduleArray = scheduleNumberArray(totalScheduleCount);
 
   // 선택된 회차 확인
   const handleScheduleCheck = (schedule: number) => {
@@ -71,57 +66,34 @@ const FilterBottomSheet = ({
         </S.TitleWrapper>
 
         <S.CheckBoxContainer>
-          {scheduleArray.map((row, rowIndex) => (
-            <S.CheckBoxRow key={rowIndex}>
-              {row.map((scheduleNumber) => (
-                <S.CheckBoxLabel key={scheduleNumber}>
-                  <S.CheckBox
-                    type="checkbox"
-                    checked={checkedScheduleList.includes(scheduleNumber)}
-                    onChange={() => handleScheduleCheck(scheduleNumber)}
-                  />
-                  {checkedScheduleList.includes(scheduleNumber) ? (
-                    <S.SelectIcon />
-                  ) : (
-                    <S.UnSelectIcon />
-                  )}
-                  <S.CheckBoxText>{scheduleNumber}회차</S.CheckBoxText>
-                </S.CheckBoxLabel>
-              ))}
-            </S.CheckBoxRow>
+          {scheduleArray.map((scheduleNumber) => (
+            <S.CheckBoxLabel key={scheduleNumber}>
+              <S.CheckBox
+                type="checkbox"
+                checked={checkedScheduleList.includes(scheduleNumber)}
+                onChange={() => handleScheduleCheck(scheduleNumber)}
+              />
+              {checkedScheduleList.includes(scheduleNumber) ? <S.SelectIcon /> : <S.UnSelectIcon />}
+              <S.CheckBoxText>{scheduleNumber}회차</S.CheckBoxText>
+            </S.CheckBoxLabel>
           ))}
         </S.CheckBoxContainer>
 
         <S.BoxDivider />
 
         <S.TitleWrapper>입금 상태</S.TitleWrapper>
         <S.CheckBoxContainer>
-          <S.CheckBoxRow>
-            {bookingStatusList.slice(0, 2).map((status, idx) => (
-              <S.CheckBoxLabel key={idx}>
-                <S.CheckBox
-                  type="checkbox"
-                  checked={checkedStatusList.includes(status)}
-                  onChange={() => handleStatusCheck(status)}
-                />
-                {checkedStatusList.includes(status) ? <S.SelectIcon /> : <S.UnSelectIcon />}
-                <S.CheckBoxText>{status}</S.CheckBoxText>
-              </S.CheckBoxLabel>
-            ))}
-          </S.CheckBoxRow>
-          <S.CheckBoxRow>
-            {bookingStatusList.slice(2, 4).map((status, idx) => (
-              <S.CheckBoxLabel key={idx}>
-                <S.CheckBox
-                  type="checkbox"
-                  checked={checkedStatusList.includes(status)}
-                  onChange={() => handleStatusCheck(status)}
-                />
-                {checkedStatusList.includes(status) ? <S.SelectIcon /> : <S.UnSelectIcon />}
-                <S.CheckBoxText>{status}</S.CheckBoxText>
-              </S.CheckBoxLabel>
-            ))}
-          </S.CheckBoxRow>
+          {bookingStatusList.map((status) => (
+            <S.CheckBoxLabel key={status}>
+              <S.CheckBox
+                type="checkbox"
+                checked={checkedStatusList.includes(status)}
+                onChange={() => handleStatusCheck(status)}
+              />
+              {checkedStatusList.includes(status) ? <S.SelectIcon /> : <S.UnSelectIcon />}
+              <S.CheckBoxText>{status}</S.CheckBoxText>
+            </S.CheckBoxLabel>
+          ))}
         </S.CheckBoxContainer>
         <Spacing marginBottom="3.2" />
         {/* TODO : 선택된 내역 없을 때 버튼 비활성화 하기 */}