[#278] filter 모달 skeleton ui 추가

packages/app/src/features/register/hooks/useMajorAutoComplete.tsx

@@ -1,21 +1,31 @@
 import { OptionsType } from '@sms/shared'
 import autocompleteApi from '@features/register/services/autocompleteApi'
 import { useEffect } from 'react'
+import { useToast } from '@features/toast'
+import ErrorMapper from '@lib/ErrorMapper'
+import errors from '@features/student/service/errors'
+import { useDispatch } from 'react-redux'
+import { close } from '@features/modal/stores/modalSlice'
 
 const useMajorAutoComplete = () => {
-  const { data, isLoading, isError } = autocompleteApi.useMajorQuery()
+  const { data, isLoading, isError, error } = autocompleteApi.useMajorQuery()
+  const { addToast } = useToast()
+  const dispatch = useDispatch()
 
   useEffect(() => {
-    if (isLoading) return
-    isError // TODO toast 띄우기
-  }, [isLoading])
+    if (!isError) return
+
+    addToast('error', ErrorMapper(error, errors))
+    dispatch(close())
+  }, [isError])
 
   return {
     major: data?.major.reduce((pre, cur) => {
       pre[cur] = cur
       return pre
     }, {} as OptionsType),
     majorList: data?.major,
+    isLoading,
   }
 }
 

packages/app/src/features/student/atoms/MajorListSection/index.tsx

@@ -0,0 +1,39 @@
+import { Checkbox, SkeletonText } from '@sms/shared'
+import CheckboxSection from '@features/student/atoms/CheckboxSection'
+import useMajorAutoComplete from '@features/register/hooks/useMajorAutoComplete'
+import { UseFormWatch } from 'react-hook-form'
+
+interface Props {
+  onClickMajor(major: string): void
+  watch: UseFormWatch<StudentParam>
+}
+
+const MajorListSection = ({ onClickMajor, watch }: Props) => {
+  const { majorList, isLoading } = useMajorAutoComplete()
+
+  return (
+    <CheckboxSection isShow={true} title='분야'>
+      {isLoading &&
+        Array(...Array(10)).map((_, i) => (
+          <Checkbox key={i}>
+            <SkeletonText width={`${i + 1}0%`} />
+          </Checkbox>
+        ))}
+
+      {!isLoading &&
+        [...(majorList || []), '기타']?.map((major) => (
+          <Checkbox
+            key={major}
+            value={major}
+            onClick={() => onClickMajor(major)}
+            checked={watch('majors')?.includes(major)}
+            readOnly
+          >
+            {major}
+          </Checkbox>
+        ))}
+    </CheckboxSection>
+  )
+}
+
+export default MajorListSection

packages/app/src/features/student/molecules/FilterModal/index.tsx

@@ -11,8 +11,8 @@ import {
 import RangeSliderSection from '@features/student/atoms/RangeSliderSection'
 import useStudentsFilter from '@features/student/hooks/useStudentsFilter'
 import { useAutocomplete } from '@features/register/hooks'
-import useMajorAutoComplete from '@features/register/hooks/useMajorAutoComplete'
 import useLoggedIn from '@features/auth/hook/useLoggedIn'
+import MajorListSection from '@features/student/atoms/MajorListSection'
 
 import * as S from './style'
 
@@ -28,7 +28,6 @@ const FilterModal = () => {
     onClickMajor,
   } = useStudentsFilter()
   const { onChange, dropdownList } = useAutocomplete()
-  const { majorList } = useMajorAutoComplete()
   const { role } = useLoggedIn({})
 
   return (
@@ -104,19 +103,7 @@ const FilterModal = () => {
             </Checkbox>
           </CheckboxSection>
 
-          <CheckboxSection isShow={true} title='분야'>
-            {[...(majorList || []), '기타']?.map((major) => (
-              <Checkbox
-                key={major}
-                value={major}
-                onClick={() => onClickMajor(major)}
-                checked={watch('majors')?.includes(major)}
-                readOnly
-              >
-                {major}
-              </Checkbox>
-            ))}
-          </CheckboxSection>
+          <MajorListSection watch={watch} onClickMajor={onClickMajor} />
 
           <CheckboxSection
             isShow={role === 'ROLE_TEACHER'}

packages/shared/src/atoms/Checkbox/style.ts

@@ -1,7 +1,9 @@
 import styled from '@emotion/styled'
 
 export const Wrapper = styled.label`
+  width: 100%;
   display: inline-flex;
+  align-items: center;
   gap: 0.5rem;
   cursor: pointer;
   border-radius: 0.25rem;
@@ -60,4 +62,5 @@ export const Checkbox = styled.label`
 
 export const Label = styled.span`
   ${({ theme }) => theme.body2}
+  width: 100%;
 `

packages/shared/src/atoms/Skeleton/index.tsx

@@ -14,8 +14,6 @@ export const SkeletonContent = styled.span`
   display: block;
   opacity: 0.7s;
   animation: ${SkeletonAnimation} 1s linear infinite alternate;
-  width: 100%;
-  height: 100%;
   border-radius: 0.25rem;
 `