Merge pull request #407 from kakao-tech-campus-3rd-step3/style/applicant-status-ui#398

[STYLE] 지원자 상태 UI 개선 및 페이지 레이아웃 조정(#398)

Author: kanghaeun

src/app/mocks/client.ts

@@ -4,11 +4,13 @@ import { clubHandlers } from '@/app/mocks/handler/club';
 import { noticeHandlers } from '@/app/mocks/handler/notice';
 import { applyFormHandlers } from './handler/applyForm';
 import { authHandlers } from './handler/auth';
+import { dashboardHandlers } from './handler/dashboard';
 
 export const client = setupWorker(
   ...clubHandlers,
   ...applicantHandlers,
   ...noticeHandlers,
   ...applyFormHandlers,
   ...authHandlers,
+  ...dashboardHandlers,
 );

src/app/mocks/handler/dashboard.ts

@@ -0,0 +1,23 @@
+import { http, HttpResponse } from 'msw';
+import { dashboardRepository } from '@/app/mocks/repositories/dashboard';
+
+const getDashboardSummaryResolver = () => {
+  const summary = dashboardRepository.getDashboardSummary();
+  return HttpResponse.json(summary, { status: 200 });
+};
+
+const getApplicantsResolver = () => {
+  const applicants = dashboardRepository.getApplicants();
+  return HttpResponse.json(applicants, { status: 200 });
+};
+
+export const dashboardHandlers = [
+  http.get(
+    import.meta.env.VITE_API_BASE_URL + '/clubs/:clubId/dashboard',
+    getDashboardSummaryResolver,
+  ),
+  http.get(
+    import.meta.env.VITE_API_BASE_URL + '/clubs/:clubId/dashboard/applicants',
+    getApplicantsResolver,
+  ),
+];

src/app/mocks/repositories/dashboard.ts

@@ -0,0 +1,55 @@
+import type {
+  DashboardSummary,
+  ApplicantsApiResponse,
+  ApplicantData,
+} from '@/pages/admin/Dashboard/types/dashboard';
+
+const MOCK_DASHBOARD_SUMMARY: DashboardSummary = {
+  totalApplicantCount: 45,
+  pendingApplicationCount: 12,
+  startDay: '2024-03-01',
+  endDay: '2024-03-31',
+};
+
+const MOCK_APPLICANTS: ApplicantData[] = [
+  {
+    applicantId: 1,
+    name: '김철수',
+    studentId: '202401',
+    department: '컴퓨터공학과',
+    phoneNumber: '010-1234-5678',
+    email: 'test1@example.com',
+    status: 'PENDING',
+  },
+  {
+    applicantId: 2,
+    name: '이영희',
+    studentId: '202402',
+    department: '경영학과',
+    phoneNumber: '010-2345-6789',
+    email: 'test2@example.com',
+    status: 'APPROVED',
+  },
+  {
+    applicantId: 3,
+    name: '박민수',
+    studentId: '202403',
+    department: '전자공학과',
+    phoneNumber: '010-3456-7890',
+    email: 'test3@example.com',
+    status: 'REJECTED',
+  },
+];
+
+export const dashboardRepository = {
+  getDashboardSummary: (): DashboardSummary => {
+    return MOCK_DASHBOARD_SUMMARY;
+  },
+
+  getApplicants: (): ApplicantsApiResponse => {
+    return {
+      applicants: MOCK_APPLICANTS,
+      message: null,
+    };
+  },
+};

src/pages/admin/ApplicationDetail/components/ApplicantProfileSection/ApplicantStatusButton.tsx

@@ -21,32 +21,44 @@ const Wrapper = styled.button<Pick<Props, 'selected' | 'label'>>(({ theme, selec
     합격: {
       backgroundColor: theme.colors.primary100,
       color: theme.colors.primary800,
+      border: `2px solid ${theme.colors.primary800}`,
     },
     불합격: {
       backgroundColor: theme.colors.red100,
       color: theme.colors.red600,
+      border: `2px solid ${theme.colors.red600}`,
     },
     미정: {
       backgroundColor: theme.colors.gray200,
       color: theme.colors.gray700,
+      border: `2px solid ${theme.colors.gray700}`,
     },
   };
 
   const defaultStyle = {
     backgroundColor: theme.colors.gray100,
     color: theme.colors.gray600,
+    border: `2px solid ${theme.colors.gray300}`,
   };
 
   const appliedStyle = selected ? statusStyles[label] : defaultStyle;
 
   return {
-    border: 'none',
-    padding: '0.4rem 1.7rem',
+    padding: '0.3rem 1.5rem',
     cursor: 'pointer',
-    fontSize: theme.font.size.sm,
+    fontSize: theme.font.size.base,
     fontWeight: selected ? theme.font.weight.bold : theme.font.weight.regular,
     transition: 'all 200ms ease-in-out',
     borderRadius: '4rem',
+    boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
+    '&:hover': {
+      transform: 'translateY(-2px)',
+      boxShadow: '0 4px 8px rgba(0, 0, 0, 0.15)',
+    },
+    '&:active': {
+      transform: 'translateY(0)',
+      boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
+    },
     ...appliedStyle,
   };
 });

src/pages/admin/ApplicationDetail/components/ApplicantProfileSection/ApplicantStatusToggle.tsx

@@ -42,5 +42,5 @@ export const ApplicantStatusToggle = ({ status, updateStatus }: Props) => {
 
 const Container = styled.div(() => ({
   display: 'flex',
-  gap: '2rem',
+  gap: '1.5rem',
 }));

src/pages/admin/ApplicationDetail/components/CommentSection/CommentForm.tsx

@@ -102,6 +102,6 @@ const ButtonWrapper = styled.div({
   display: 'flex',
   justifyContent: 'space-between',
   alignItems: 'center',
-  marginRight: '-2rem',
+  marginRight: '-0.35rem',
   padding: '0 0.3rem',
 });

src/pages/admin/ApplicationDetail/index.styled.ts

@@ -4,6 +4,10 @@ export const PageLayout = styled.div({
   display: 'flex',
   gap: '1.5rem',
   padding: '2rem 2.2rem 2rem 2rem',
+  maxWidth: '1400px',
+  margin: '1rem auto',
+  width: '100%',
+  boxSizing: 'border-box',
 
   '@media (max-width: 72.5rem)': {
     flexDirection: 'column',

src/pages/admin/Dashboard/Page.tsx

@@ -32,6 +32,6 @@ const Layout = styled.div({
 const Container = styled.main({
   maxWidth: '1200px',
   width: '100%',
-  padding: '1.5rem',
+  padding: '3rem 1.5rem',
   boxSizing: 'border-box',
 });