Skeleton UI구현

services/admin/src/apis/volunteers/response.ts

@@ -1,3 +1,5 @@
+import { SexType } from './request';
+
 export interface getVolunteersResponse {
   volunteers: volunteer[];
 }
@@ -9,7 +11,7 @@ export interface volunteer {
   point: number;
   optional_point: number;
   max_applicants: number;
-  available_sex: string;
+  available_sex: SexType;
   available_grade: string;
   current_applicants: number;
 }
@@ -30,7 +32,8 @@ export interface getVolunteerCurrentResponse {
 
 export interface currentVolunteer {
   name: string;
-  available_sex: string;
+  id: string;
+  available_sex: SexType;
   available_grade: string;
   current_applicants: number;
   max_applicants: number;

services/admin/src/components/common/Skeleton/Home/StudentDetailSkeleton.tsx

@@ -0,0 +1,130 @@
+import styled from 'styled-components';
+import { Skeleton } from '../Skeleton';
+
+export function StudentDetailSkeleton() {
+  return (
+    <_DetailBox>
+      <_ProfileSection>
+        <Skeleton variant="circular" width="100px" height="100px" />
+        <_ProfileInfo>
+          <_NameContainer>
+            <Skeleton width="61px" height="34px" />
+            <Skeleton width="51px" height="34px" />
+          </_NameContainer>
+          <_RoomContainer>
+            <Skeleton width="48px" height="28px" />
+            <Skeleton width="60px" height="30px" borderRadius="24px" />
+          </_RoomContainer>
+        </_ProfileInfo>
+      </_ProfileSection>
+
+      <_PointWrapper>
+        <Skeleton width="172px" height="47px" borderRadius="4px" />
+        <Skeleton width="172px" height="47px" borderRadius="4px" />
+      </_PointWrapper>
+
+      <_Section>
+        <Skeleton width="85px" height="22px" />
+        <_MateList>
+          {Array.from({ length: 3 }).map((_, index) => (
+            <Skeleton
+              key={index}
+              width="80px"
+              height="50px"
+              borderRadius="4px"
+            />
+          ))}
+        </_MateList>
+      </_Section>
+
+      <_Section>
+        <Skeleton width="56px" height="22px" />
+        <_MateList>
+          {Array.from({ length: 2 }).map((_, index) => (
+            <Skeleton
+              key={index}
+              width="80px"
+              height="26px"
+              borderRadius="13px"
+            />
+          ))}
+        </_MateList>
+      </_Section>
+
+      <_Section>
+        <Skeleton width="44px" height="22px" />
+        <_PointList>
+          {Array.from({ length: 5 }).map((_, index) => (
+            <Skeleton
+              key={index}
+              width="357px"
+              height="50px"
+              borderRadius="4px"
+            />
+          ))}
+        </_PointList>
+      </_Section>
+    </_DetailBox>
+  );
+}
+
+const _NameContainer = styled.div`
+  display: flex;
+  gap: 16px;
+  align-items: center;
+`;
+const _RoomContainer = styled.div`
+  display: flex;
+  gap: 24px;
+  align-items: center;
+`;
+
+const _DetailBox = styled.div`
+  position: relative;
+  margin-top: 43px;
+  padding: 60px 40px;
+  width: 436px;
+  min-height: 485px;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0px 1px 20px rgba(238, 238, 238, 0.8);
+  border-radius: 4px;
+  overflow: scroll;
+  gap: 40px;
+`;
+
+const _ProfileSection = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 24px;
+`;
+
+const _ProfileInfo = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+`;
+
+const _PointWrapper = styled.div`
+  display: flex;
+  gap: 12px;
+`;
+
+const _Section = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+`;
+
+const _MateList = styled.div`
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+`;
+
+const _PointList = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-top: 12px;
+`;

services/admin/src/components/common/Skeleton/Home/StudentListSkeleton.tsx

@@ -0,0 +1,144 @@
+import styled from 'styled-components';
+import { Skeleton } from '../Skeleton';
+
+export function StudentListSkeleton() {
+  return (
+    <_Wrapper>
+      <_Filter>
+        <Skeleton width="241px" height="44px" borderRadius="30px" />
+        <_Buttons>
+          <_ButtonContainer>
+            <Skeleton width="116px" height="50px" borderRadius="4px" />
+            <Skeleton width="77px" height="50px" borderRadius="4px" />
+            <Skeleton width="116px" height="50px" borderRadius="4px" />
+            <Skeleton width="99px" height="50px" borderRadius="4px" />
+          </_ButtonContainer>
+          <_Divider />
+          <Skeleton width="106px" height="50px" borderRadius="4px" />
+        </_Buttons>
+      </_Filter>
+
+      <_Container>
+        <_SelectAllSection>
+          <Skeleton width="24px" height="24px" />
+          <Skeleton width="56px" height="22px" />
+        </_SelectAllSection>
+
+        <_StudentList>
+          {Array.from({ length: 8 }).map((_, index) => (
+            <StudentBoxSkeleton key={index} />
+          ))}
+        </_StudentList>
+      </_Container>
+    </_Wrapper>
+  );
+}
+
+function StudentBoxSkeleton() {
+  return (
+    <_StudentBoxWrapper>
+      <_LeftSection>
+        <Skeleton width="24px" height="24px" />
+        <Skeleton variant="circular" width="36px" height="36px" />
+        <Skeleton width="50px" height="28px" />
+        <Skeleton width="42px" height="28px" />
+      </_LeftSection>
+
+      <_CenterSection>
+        <Skeleton width="45px" height="26px" borderRadius="12px" />
+        <Skeleton width="45px" height="26px" borderRadius="12px" />
+      </_CenterSection>
+
+      <_RightSection>
+        <Skeleton width="48px" height="25px" />
+      </_RightSection>
+    </_StudentBoxWrapper>
+  );
+}
+
+const _Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 27px;
+`;
+
+const _Wrapper = styled.div`
+  width: 1030px;
+  display: flex;
+  flex-direction: column;
+  gap: 52px;
+`;
+
+const _ButtonContainer = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+
+const _Filter = styled.section`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+const _Buttons = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 16px;
+`;
+
+const _Divider = styled.div`
+  width: 2px;
+  height: 47px;
+  background-color: ${({ theme }) => theme.color.gray2 || '#e0e0e0'};
+`;
+
+const _SelectAllSection = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin-left: 22px;
+`;
+
+const _StudentList = styled.ul`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+`;
+
+const _StudentBoxWrapper = styled.li`
+  width: 100%;
+  height: 70px;
+  background-color: ${({ theme }) => theme.color.gray1 || '#f5f5f5'};
+  box-shadow: 0 1px 20px rgba(204, 204, 204, 0.24);
+  border-radius: 8px;
+  padding: 17px 40px 17px 36px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+
+const _LeftSection = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 16px;
+
+  > div:first-child {
+    margin-right: 8px;
+  }
+`;
+
+const _CenterSection = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-left: 24px;
+  flex: 1;
+  max-width: 45%;
+`;
+
+const _RightSection = styled.div`
+  display: flex;
+  align-items: center;
+  margin-left: auto;
+`;

services/admin/src/components/common/Skeleton/Home/index.ts

@@ -0,0 +1,2 @@
+export * from './StudentDetailSkeleton';
+export * from './StudentListSkeleton';