[#275] skeleton ui 버그 해결 및 로직 수정 (#276)

GSM-MSG · Sep 13, 2023 · e4259a2 · e4259a2
1 parent be50b31
commit e4259a2
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 16 deletions.
diff --git a/packages/app/src/features/student/hooks/useStudent.tsx b/packages/app/src/features/student/hooks/useStudent.tsx
@@ -15,11 +15,12 @@ interface StudentsParams extends StudentParam {
 const useStudent = () => {
   const dispatch = useDispatch()
   const { addToast } = useToast()
-  const { studentParam, studentList, totalSize } = useSelector(
+  const { studentParam, studentList, totalSize, nextStop } = useSelector(
     (state: RootState) => ({
       studentParam: state.studentParam,
       studentList: state.studentList.studentList,
       totalSize: state.studentList.totalSize,
+      nextStop: state.studentParam.nextStop,
     })
   )
 
@@ -50,10 +51,8 @@ const useStudent = () => {
     totalSize?: number,
     last?: boolean
   ) => {
-    if (!students || !totalSize || !last) return
-
     dispatch(actions.resetStudents())
-    dispatch(actions.addStudents(students))
+    dispatch(actions.addStudents(students || []))
     dispatch(actions.setTotoalSize(totalSize))
     if (last) dispatch(actions.nextStop())
   }
@@ -63,6 +62,7 @@ const useStudent = () => {
     totalSize,
     refetchStudents,
     setStudentList,
+    nextStop,
   }
 }
 

diff --git a/packages/app/src/features/student/molecules/StudentList/index.tsx b/packages/app/src/features/student/molecules/StudentList/index.tsx
@@ -8,7 +8,7 @@ import * as S from './style'
 
 const StudentList = () => {
   const router = useRouter()
-  const { studentList, totalSize } = useStudent()
+  const { studentList, totalSize, nextStop } = useStudent()
   const { observe } = useScrollObserver()
   const { onShow } = useModal()
 
@@ -24,16 +24,17 @@ const StudentList = () => {
       </S.MaxCount>
 
       <S.Students>
-        {!studentList.length &&
-          Array(...Array(20)).map((_, idx) => (
-            <StudentCardSkeleton key={idx} />
-          ))}
         {studentList?.map((i) => (
           <StudentCard key={i.id} {...i} onClick={() => onClick(i.id)} />
         ))}
-      </S.Students>
 
-      <div ref={observe} />
+        {!nextStop &&
+          Array(...Array(10)).map((_, idx) => (
+            <div ref={idx === 0 ? observe : undefined} key={idx}>
+              <StudentCardSkeleton />
+            </div>
+          ))}
+      </S.Students>
     </S.Content>
   )
 }

diff --git a/packages/app/src/features/student/stores/studentListSlice.ts b/packages/app/src/features/student/stores/studentListSlice.ts
@@ -3,11 +3,12 @@ import { PayloadAction, createSlice } from '@reduxjs/toolkit'
 
 interface InitialState {
   studentList: StudentType[]
-  totalSize?: number
+  totalSize: number
 }
 
 const initialState: InitialState = {
   studentList: [],
+  totalSize: 0,
 }
 
 const studentListSlice = createSlice({
@@ -20,8 +21,8 @@ const studentListSlice = createSlice({
     resetStudents: (state) => {
       state.studentList = []
     },
-    setTotoalSize: (state, { payload }: PayloadAction<number>) => {
-      state.totalSize = payload
+    setTotoalSize: (state, { payload }: PayloadAction<number | undefined>) => {
+      state.totalSize = payload || 0
     },
   },
 })

diff --git a/packages/app/src/features/student/stores/studentParamSlice.ts b/packages/app/src/features/student/stores/studentParamSlice.ts
@@ -19,7 +19,7 @@ const initialState: InitialState = {
     techStacks: [],
     formOfEmployment: [],
   },
-  page: 1,
+  page: 2,
   size: 20,
   isLoading: false,
   isReady: false,

diff --git a/packages/shared/src/atoms/Skeleton/index.tsx b/packages/shared/src/atoms/Skeleton/index.tsx
@@ -27,7 +27,7 @@ interface TextProps {
 }
 
 export const SkeletonText = ({
-  width,
+  width = '100%',
   height = '1em',
   marginRight,
   marginBottom,

diff --git a/packages/shared/src/atoms/StudentCard/style.ts b/packages/shared/src/atoms/StudentCard/style.ts
@@ -78,6 +78,7 @@ export const UserInfo = styled.div`
   flex-direction: column;
   gap: 1rem;
   overflow: hidden;
+  width: 100%;
 
   @media (max-width: 41.5rem) {
     gap: 1.25rem;