Skeleton UI구현 by seungw0o · Pull Request #145 · team-aliens/DMS-Frontend

seungw0o · 2025-12-02T00:12:00Z

개요

신청-자습실, 신청-주말외출 을 제외한 모든 페이지에 Skeleton UI를 구현 했습니다.

이슈 번호

closes Skelton ui 구현 #143

변경사항

Skeleton UI 구현

API 에러 발생 시 사용자에게 보여지는 메시지 형식을 개선했습니다 - 기존에는 `[상태 코드] 메시지` 형식으로 표시되어 불필요한 정보가 포함되었습니다 - 이제는 `data.field_error` 또는 `data.message`에 담긴 내용만 표시하여 더 간결하고 명확하게 에러 정보를 전달합니다

- MateList 스타일을 flex에서 grid로 변경하여 UI 개선 - 기존에는 flex-wrap으로 인해 아이템이 넘칠 경우 레이아웃이 깨지는 문제 발생 - grid-template-columns를 사용하여 4개의 컬럼으로 고정하고, 반응형 디자인 적용

DetailBox 컴포넌트의 로딩 상태를 더 정확하게 반영하도록 개선했습니다 - 기존에는 studentDetail 또는 pointHistory 중 하나만 로딩 중이어도 Skeleton UI가 표시되었으나, 이제는 두 데이터의 로딩 및 패칭 상태를 모두 고려하여 Skeleton UI 표시 여부를 결정합니다 - `isStudentDataStale` 상태를 추가하여, 클릭된 학생 ID와 현재 studentDetail의 ID가 다를 경우에도 Skeleton UI를 표시하도록 하여 데이터 불일치 문제를 해결했습니다

설문 페이지와 관련된 한글 경로 매핑을 pathToKorean 객체에 추가하여 관리자 페이지에서 설문 관련 경로를 쉽게 한글로 표시하고 관리할 수 있도록 함 - 설문 목록 및 설문 상세 보기 페이지에 대한 경로 매핑 추가 - 관리자 페이지 내 설문 관련 기능 접근성 향상

봉사활동 목록 조회, 추가, 삭제, 신청 관리 기능 구현 - 봉사활동 목록을 조회하는 기능 추가 - 봉사활동을 추가, 수정, 삭제하는 기능 추가 - 봉사활동 신청을 승인, 거절, 제외하는 기능 추가 - 봉사활동 신청 학생 목록을 조회하는 기능 추가 - 봉사활동 관련 API 연동을 위한 hook 추가 - 봉사활동 목록 페이지에 봉사활동 삭제 기능 연동 - 봉사활동 성별 타입 변경 (string -> SexType)

Skeleton 컴포넌트의 Props를 제거하고 count를 상수화하여 코드 간결성 및 유지보수성을 향상시켰습니다 - Skeleton 컴포넌트의 count Props를 제거하여 불필요한 Props 사용을 줄임 - Skeleton 컴포넌트 내에서 반복 횟수를 나타내는 count를 상수로 정의하여 코드의 가독성을 높임 - 기존에는 Props를 통해 count를 동적으로 설정할 수 있었지만, 현재는 고정된 3개의 Skeleton 아이템을 표시하도록 변경되었습니다

StudentInfo 컴포넌트가 API를 직접 호출하고 Toast를 표시하는 대신, 상위 컴포넌트에서 콜백 함수를 받아 호출하도록 변경했습니다 - StudentInfo 컴포넌트의 역할 간소화 - API 호출 및 Toast 처리를 담당하는 로직을 상위 컴포넌트로 이동 - StudentInfo 컴포넌트의 재사용성 및 테스트 용이성 향상

봉사활동 목록 페이지 로딩 시 Skeleton UI를 보여주도록 구현 - 데이터 로딩 중 사용자 경험 개선 - VolunteerListSkeleton 컴포넌트 생성 및 적용

봉사활동 상세 페이지 로딩 시 Skeleton UI를 보여주도록 구현 - API 호출 중 로딩 상태를 시각적으로 표현하여 사용자 경험 개선 - 데이터 로딩 완료 전까지 UI의 레이아웃 유지

봉사활동 신청 관리 페이지에 Skeleton UI를 추가하고 API를 연동하여 데이터 로딩 중 시각적 피드백을 제공합니다 - VolunteerCurrentSkeleton 컴포넌트 추가하여 로딩 상태 표시 - useVolunteerCurrent 훅을 사용하여 봉사활동 데이터 가져오기 - 신청자 제외 기능 useExcludeVolunteerApplication 훅으로 구현 - API 응답 타입에 id 속성 및 SexType 적용

신청자가 없을 경우 보여지는 Empty State 컴포넌트 추가 - 신청자가 없을 때 "신청한 학생이 없습니다." 메시지를 중앙에 표시 - 사용자 경험 개선

학생 상세 정보 Skeleton 컴포넌트의 이름 변경 및 관련 로직 수정 - DetailBoxSkeleton -> StudentDetailSkeleton으로 변경하여 컴포넌트의 역할 명확화 - Home 페이지에서 변경된 컴포넌트 이름 적용 - Skeleton 컴포넌트 이름 변경에 따른 import 경로 업데이트

StudentDetailSkeleton 컴포넌트에서 사용하지 않는 스타일을 제거하고, Home Skeleton 컴포넌트들의 export 방식을 변경하여 코드의 유지보수성을 향상시켰습니다 - 사용하지 않는 `_PointBox` 스타일 제거 - Home Skeleton 컴포넌트들의 export 방식을 `export * from ...` 형태로 변경하여 import/export 관리 용이성 향상 - 불필요한 Skeleton 컴포넌트 export 제거

잔류 신청 관리 페이지 로딩 시 Skeleton UI를 보여주도록 구현 - API 호출 전 사용자에게 로딩 상태를 시각적으로 제공 - RemainsSkeleton 컴포넌트 추가 - 페이지 로딩 중 시각적 피드백 향상

로딩 중일 때 Skeleton UI를 보여주도록 변경 - 데이터 로딩 중 사용자 경험 개선 - 네트워크 지연 시 시각적 피드백 제공

Copilot

Pull request overview

This PR implements Skeleton UI loading states across most pages in the admin service to improve user experience during data fetching. The implementation introduces reusable skeleton components and refactors existing pages to use React Query hooks with proper loading state management.

Key changes:

Created a comprehensive Skeleton component library with variants for different page types (Volunteer, Survey, Notice, MyPage, Home, Remains)
Refactored multiple pages to use custom React Query hooks instead of direct API calls with local state management
Added loading state handling with skeleton UI display during data fetching
Simplified error message formatting in the API error handler

Reviewed changes

Copilot reviewed 34 out of 34 changed files in this pull request and generated 11 comments.

Show a summary per file

File	Description
`services/admin/src/components/common/Skeleton/`	New skeleton components for loading states across different page types
`services/admin/src/hooks/useVolunteerApi.tsx`	New custom hooks for volunteer-related API calls with React Query
`services/admin/src/pages/volunteer/`	Refactored to use hooks and skeleton loading states
`services/admin/src/pages/survey/`	Added skeleton UI during data loading
`services/admin/src/pages/notice/`	Integrated skeleton components for list and detail views
`services/admin/src/pages/myPage/index.tsx`	Added loading state with skeleton UI
`services/admin/src/pages/Home.tsx`	Enhanced with skeleton UI for student list and detail views
`services/admin/src/pages/apply/remains/index.tsx`	Added remains-specific skeleton component
`services/admin/src/utils/apiErrorHandler.ts`	Simplified error message formatting
`services/admin/src/router.tsx`	Added survey breadcrumb paths
`services/admin/src/apis/volunteers/response.ts`	Updated type definitions for better type safety

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

services/admin/src/pages/notice/List.tsx

services/admin/src/pages/volunteer/Application.tsx

services/admin/src/components/common/Skeleton/Volunteer/VolunteerDetailSkeleton.tsx

services/admin/src/components/common/Skeleton/Volunteer/VolunteerCurrentSkeleton.tsx

services/admin/src/components/common/Skeleton/Notice/NoticeDetailSkeleton.tsx

services/admin/src/pages/notice/List.tsx

Copilot · 2025-12-02T00:16:07Z

services/admin/src/pages/Home.tsx

-              availableFeature={availableFeature}
-            />
+            <>
+              {isDetailFetching || isStudentDataStale ? (


The condition isStudentDataStale checks if the data returned doesn't match the requested student ID, which is a good defensive check. However, this stale check should also be considered in the loading condition. The condition should be isDetailFetching || isStudentDataStale to show skeleton when data is stale, not just when fetching.

services/admin/src/components/common/Skeleton/Survey/SurveyDetailSkeleton.tsx

services/admin/src/pages/Home.tsx

Skeleton 컴포넌트들의 불필요한 스타일 컴포넌트 및 코드를 제거하여 코드의 가독성을 높이고 유지보수성을 개선합니다 - NoticeDetailSkeleton에서 BreadcrumbPlaceholder 제거 - SurveyDetailSkeleton에서 Actions, Meta 제거 - VolunteerCurrentSkeleton, VolunteerDetailSkeleton에서 key prop 추가 - Home 페이지에서 불필요한 refetch 함수 및 styled 컴포넌트 제거 - NoticeListPage에서 count prop 제거 및 SkeletonItem 제거 - VolunteerApplication 페이지에서 idx 제거

seungw0o added 21 commits November 17, 2025 19:24

refactor: 에러 메세지 형식 변경

1ecb0b5

feat: Main 페이지 Skeleton 추가

bcb6d24

feat: MyPage Skeleton 추가

3fd72ed

chore: 파일 이동

c1cfe0c

feat: 공지사항 페이지 Skeleton 추가

5c38cf6

feat: 설문(투표) 페이지 Skeleton 추가

45663d7

feat: 봉사활동 목록 Skeleton 추가

61843cc

봉사활동 목록 페이지 로딩 시 Skeleton UI를 보여주도록 구현 - 데이터 로딩 중 사용자 경험 개선 - VolunteerListSkeleton 컴포넌트 생성 및 적용

feat: 봉사활동 상세 페이지 Skeleton 추가

3337dff

봉사활동 상세 페이지 로딩 시 Skeleton UI를 보여주도록 구현 - API 호출 중 로딩 상태를 시각적으로 표현하여 사용자 경험 개선 - 데이터 로딩 완료 전까지 UI의 레이아웃 유지

feat: 봉사활동 상세 페이지에 Empty State 추가

a1f4ac8

신청자가 없을 경우 보여지는 Empty State 컴포넌트 추가 - 신청자가 없을 때 "신청한 학생이 없습니다." 메시지를 중앙에 표시 - 사용자 경험 개선

feat: RecentPointItem에 Skeleton 추가

1d27c8a

로딩 중일 때 Skeleton UI를 보여주도록 변경 - 데이터 로딩 중 사용자 경험 개선 - 네트워크 지연 시 시각적 피드백 제공

seungw0o requested a review from Copilot December 2, 2025 00:12

seungw0o self-assigned this Dec 2, 2025

seungw0o added the feat 새로운 기능을 추가 할 경우 label Dec 2, 2025

seungw0o added this to DMS 스프린트 Dec 2, 2025

seungw0o linked an issue Dec 2, 2025 that may be closed by this pull request

Skelton ui 구현 #143

Closed

1 task

Copilot started reviewing on behalf of seungw0o December 2, 2025 00:12 View session

Copilot finished reviewing on behalf of seungw0o December 2, 2025 00:14

Copilot AI reviewed Dec 2, 2025

View reviewed changes

seungw0o merged commit aedd098 into dev Dec 2, 2025
1 check passed

seungw0o deleted the feature/143-skelton_ui branch December 2, 2025 00:29

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Skeleton UI구현#145

Skeleton UI구현#145
seungw0o merged 22 commits intodevfrom
feature/143-skelton_ui

seungw0o commented Dec 2, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI Dec 2, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

seungw0o commented Dec 2, 2025

개요

이슈 번호

변경사항

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI Dec 2, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant