Refactor/#27: BottomSheet IOS height 오류 수정 및 각 커스텀 훅 init 로직 추가 (#28)

* fix: BottomSheet height이 IOS에서만 height: max-content가 적용되지 않는 오류를 수정

* feat: useCheckbox onReset 로직 추가

* feat: useRadio onReset 로직 추가

* chore: 0.4.10 버전 배포

* refactor: useRadio onResetRadio initId 옵셔널로 변경 및 resetId로 네이밍 변경

* chore: 0.4.11 버전 배포

* design: RadioContainer radio wrap 시 옵션간 상하 여백 조정

* chore: 0.4.12 버전 배포

package.json

@@ -1,7 +1,7 @@
 {
   "name": "concept-be-design-system",
   "description": "컨셉비 디자인 시스템",
-  "version": "0.4.9",
+  "version": "0.4.12",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",

src/components/BottomSheet/BottomSheet.tsx

@@ -35,7 +35,6 @@ const BottomSheetWrapper = styled.div<{ isOpen: boolean }>`
   right: 0;
   margin: 0 auto;
   width: auto;
-  height: max-content;
   max-width: 420px;
   max-height: 90%;
   min-height: 70%;

src/components/RadioContainer/RadioContainer.tsx

@@ -31,7 +31,7 @@ const RadioContainer = <T extends string>({
 }: Props<T>) => {
   return (
     <div {...attributes}>
-      <Flex alignItems="center" paddingBottom={12}>
+      <Flex alignItems="center" paddingBottom={4}>
         <Text font="suit15m" color="b9" required={required}>
           {label}
         </Text>
@@ -75,6 +75,7 @@ const RadioLabel = styled.label<{ gap: GapType }>`
   position: relative;
   padding-left: 28px;
   margin-right: ${({ gap }) => (gap === 'large' ? '30px' : '18px')};
+  margin-top: 8px;
   cursor: pointer;
   font-size: 15px;
   font-weight: 500;

src/hooks/useCheckbox.ts

@@ -16,6 +16,16 @@ const useCheckbox = <T extends Record<keyof T, CheckboxItem[]>>(
 ) => {
   const [checkboxValue, setCheckboxValue] = useState<T>(initialValue);
 
+  const onResetCheckbox = useCallback((checkboxKey: keyof T) => {
+    setCheckboxValue((prev) => ({
+      ...prev,
+      [checkboxKey]: prev[checkboxKey].map((checkbox) => ({
+        ...checkbox,
+        checked: false,
+      })),
+    }));
+  }, []);
+
   const onChangeCheckbox = useCallback(
     (
       e: ChangeEvent<HTMLInputElement>,
@@ -47,6 +57,7 @@ const useCheckbox = <T extends Record<keyof T, CheckboxItem[]>>(
   return {
     checkboxValue,
     onChangeCheckbox,
+    onResetCheckbox,
   };
 };
 

src/hooks/useRadio.ts

@@ -6,9 +6,27 @@ interface RadioItem {
   checked: boolean;
 }
 
+interface OnResetRadioProps<T> {
+  radioKey: keyof T;
+  resetId?: number;
+}
+
 const useRadio = <T extends Record<keyof T, RadioItem[]>>(initialValue: T) => {
   const [radioValue, setRadioValue] = useState<T>(initialValue);
 
+  const onResetRadio = useCallback(
+    ({ radioKey, resetId }: OnResetRadioProps<T>) => {
+      setRadioValue((prev) => ({
+        ...prev,
+        [radioKey]: prev[radioKey].map((radio) => ({
+          ...radio,
+          checked: resetId ? radio.id === resetId : false,
+        })),
+      }));
+    },
+    [],
+  );
+
   const onChangeRadio = useCallback(
     (e: ChangeEvent<HTMLInputElement>, radioKey: keyof T) => {
       const { value } = e.target;
@@ -27,6 +45,7 @@ const useRadio = <T extends Record<keyof T, RadioItem[]>>(initialValue: T) => {
   return {
     radioValue,
     onChangeRadio,
+    onResetRadio,
   };
 };