Feature/#105 클라이언트 마이페이지 반응형 처리

backend/src/main/java/sw_css/file/api/FileController.java

@@ -15,8 +15,8 @@
 public class FileController {
     private final FileService fileService;
 
-    @GetMapping
-    public ResponseEntity<byte[]> downloadFile(@PathVariable final String fileName) throws IOException {
+    @GetMapping("/{fileName}")
+    public ResponseEntity<byte[]> downloadFile(@PathVariable("fileName") final String fileName) throws IOException {
         byte[] downloadFile = fileService.downloadFileFromFileSystem(fileName);
         return ResponseEntity.ok(downloadFile);
     }

backend/src/test/java/sw_css/restdocs/docs/FileApiDocsTest.java

@@ -1,14 +1,17 @@
 package sw_css.restdocs.docs;
 
-import static org.mockito.ArgumentMatchers.anyString;
+import static org.mockito.ArgumentMatchers.any;
 import static org.mockito.Mockito.when;
 import static org.springframework.restdocs.mockmvc.MockMvcRestDocumentation.document;
-import static org.springframework.test.web.servlet.request.MockMvcRequestBuilders.get;
+import static org.springframework.restdocs.request.RequestDocumentation.parameterWithName;
+import static org.springframework.restdocs.request.RequestDocumentation.pathParameters;
 import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.status;
 
 import org.junit.jupiter.api.DisplayName;
 import org.junit.jupiter.api.Test;
 import org.springframework.boot.test.autoconfigure.web.servlet.WebMvcTest;
+import org.springframework.restdocs.mockmvc.RestDocumentationRequestBuilders;
+import org.springframework.restdocs.request.PathParametersSnippet;
 import sw_css.file.api.FileController;
 import sw_css.restdocs.RestDocsTest;
 
@@ -20,13 +23,17 @@ public class FileApiDocsTest extends RestDocsTest {
     public void downloadFile() throws Exception {
         // given
         final byte[] response = new byte[]{};
+        final PathParametersSnippet pathParameters = pathParameters(
+                parameterWithName("fileName").description("조회하고자 하는 파일의 이름")
+        );
 
         // when
-        when(fileService.downloadFileFromFileSystem(anyString())).thenReturn(response);
+        when(fileService.downloadFileFromFileSystem(any())).thenReturn(response);
 
         // then
-        mockMvc.perform(get("/files/dd71ceeb-a721-462f-9ea1-411415f57607_Eg7BBFlUcAAQMzI.jpeg"))
+        final String fileName = "test-file.jpeg";
+        mockMvc.perform(RestDocumentationRequestBuilders.get("/files/{fileName}", fileName))
                 .andExpect(status().isOk())
-                .andDo(document("download-file"));
+                .andDo(document("download-file", pathParameters));
     }
 }

frontend/.eslintrc.json

@@ -1,6 +1,6 @@
 {
   "parser": "@typescript-eslint/parser",
-  "plugins": ["@typescript-eslint"],
+  "plugins": ["@typescript-eslint", "react", "tailwindcss"],
   "extends": [
     "next/core-web-vitals",
     "plugin:@typescript-eslint/recommended",

frontend/src/app/(withSidebar)/my-page/components/MilestoneHistorySection/index.tsx

@@ -26,7 +26,7 @@ const MilestoneHistorySection = async () => {
   );
 
   return (
-    <div className="w-[280px] rounded-sm bg-white p-5">
+    <div className="w-full min-w-[260px] flex-1 rounded-sm bg-white p-5 lg:max-w-[280px]">
       <SubTitle title="실적 등록" urlText="등록하기" url="/my-page/milestone/register" />
       <div className="mt-4">
         {milestoneHistoriesOfStudent?.content.map((milestoneHistory) => (

frontend/src/app/(withSidebar)/my-page/components/MilestoneSection/index.tsx

@@ -48,17 +48,17 @@ const MilestoneSection = () => {
   );
 
   return (
-    <div className="w-[630px] rounded-sm bg-white p-5">
+    <div className="w-full flex-1 rounded-sm bg-white p-5 sm:min-w-[630px] lg:max-w-[630px]">
       <SubTitle title="내 마일스톤 상세" urlText="전체보기" url="/my-page/milestone" />
-      <div className="my-5 flex items-center justify-end gap-2">
+      <div className="my-5 flex items-center justify-center gap-2 sm:justify-end">
         <span className="rounded-lg bg-border px-4 py-1">{searchFilterPeriod.startDate}</span>~
         <span className="rounded-lg bg-border px-4 py-1">{searchFilterPeriod.endDate}</span>
       </div>
-      <div className="flex">
+      <div className="flex flex-wrap">
         {milestoneInfoTypes.map((type) => (
           <button
             type="button"
-            className={`h-[30px] flex-grow border-0 bg-white ${selectedInfoType === type.id ? 'border-b-2 text-black' : 'text-comment'} border-black hover:border-b-2 hover:text-black`}
+            className={`h-[30px] min-w-[6em] flex-grow border-0 bg-white ${selectedInfoType === type.id ? 'border-b-2 text-black' : 'text-comment'} border-black hover:border-b-2 hover:text-black`}
             key={type.id}
             onClick={() => setSelectedInfoType(type.id)}
           >
@@ -68,7 +68,7 @@ const MilestoneSection = () => {
       </div>
       <div className="p-4">
         {selectedInfoType === MilestoneInfoType.TOTAL && (
-          <div className="flex py-10">
+          <div className="flex flex-wrap gap-y-5 py-1 sm:py-10">
             <MilestoneChart chartSize={180} fontSize="lg" milestoneOverviewScore={milestoneOverviewScore} />
             <MilestoneTable milestoneOverviewScore={milestoneOverviewScore} />
           </div>
@@ -85,7 +85,7 @@ const MilestoneSection = () => {
           />
         )}
         {selectedInfoType === MilestoneInfoType.HISTORY && (
-          <MilestoneHistoryTable searchFilterPeriod={searchFilterPeriod} page={0} size={5} />
+          <MilestoneHistoryTable searchFilterPeriod={searchFilterPeriod} pageNumber={0} pageSize={5} />
         )}
       </div>
     </div>

frontend/src/app/(withSidebar)/my-page/components/StudentInfoSection/StudentInfoLabel/index.tsx

@@ -6,7 +6,7 @@ interface StudentInfoLabelProps {
 }
 
 const StudentInfoLabel = ({ label, value }: StudentInfoLabelProps) => (
-  <p className="flex flex-grow">
+  <p className="flex sm:min-w-80 sm:flex-1">
     <span className="mr-4 w-[4em]">{label}</span>
     <b>{value}</b>
   </p>

frontend/src/app/(withSidebar)/my-page/components/StudentInfoSection/index.tsx

@@ -18,16 +18,16 @@ const StudentInfoSection = () => {
       <SubTitle title="내 정보" urlText="수정" url="/my-page/edit" />
       {member && (
         <div className="my-5">
-          <div className="mb-5 flex items-end gap-4">
+          <div className="mb-5 flex flex-wrap items-end gap-4">
             <p className="text-xl font-bold">{member.name}</p>
             <p className="text-lg text-comment">{member.email}</p>
           </div>
-          <div className="grid grid-cols-2 gap-4 text-sm">
-            <div className="col-span-2 flex justify-between gap-4">
-              <StudentInfoLabel label="주전공" value={member.major} />
-              {member.minor && <StudentInfoLabel label="부전공" value={member.minor} />}
-              {member.doubleMajor && <StudentInfoLabel label="복수전공" value={member.doubleMajor} />}
-            </div>
+          <div className="mb-4 flex w-full justify-between gap-4">
+            <StudentInfoLabel label="주전공" value={member.major} />
+            {member.minor && <StudentInfoLabel label="부전공" value={member.minor} />}
+            {member.doubleMajor && <StudentInfoLabel label="복수전공" value={member.doubleMajor} />}
+          </div>
+          <div className="flex flex-wrap gap-y-4">
             <StudentInfoLabel label="전화번호" value={appendDashPhoneNumber(member.phoneNumber)} />
             <StudentInfoLabel
               label="진로 계획"

frontend/src/app/(withSidebar)/my-page/milestone/components/MilestoneDetail/index.tsx

@@ -3,13 +3,13 @@
 import { useState } from 'react';
 
 import { MilestoneGroup, milestoneGroups } from '@/data/milestone';
+import { useAppSelector } from '@/lib/hooks/redux';
 import { useMilestoneScoresOfStudentQuery } from '@/lib/hooks/useApi';
 import { compareByIdAsc } from '@/lib/utils/utils';
 import { Period } from '@/types/common';
 
 import { GroupButton } from './styled';
 import MilestoneRowBarTable from '../../../components/MilestoneRowBarTable';
-import { useAppSelector } from '@/lib/hooks/redux';
 
 const MilestoneDetail = ({ startDate, endDate }: Period) => {
   const auth = useAppSelector((state) => state.auth).value;
@@ -18,7 +18,7 @@ const MilestoneDetail = ({ startDate, endDate }: Period) => {
 
   return (
     <div style={{ display: 'flex', flexGrow: '1', flexDirection: 'column' }}>
-      <div style={{ display: 'flex' }}>
+      <div className="flex flex-wrap">
         {milestoneGroups.map((group) => (
           <GroupButton
             key={group.id}

frontend/src/app/(withSidebar)/my-page/milestone/components/MilestoneHistoryTable/index.tsx

@@ -1,10 +1,9 @@
 /* eslint-disable jsx-a11y/control-has-associated-label */
 /* eslint-disable max-len */
 import MilestoneGroupLabel from '@/components/MilestoneGroupLabel';
-import { MilestoneGroup, MilestoneHistoryStatus } from '@/data/milestone';
+import { MilestoneHistoryStatus } from '@/data/milestone';
 import { useAppSelector } from '@/lib/hooks/redux';
 import { useMilestoneHistoriesOfStudentQuery } from '@/lib/hooks/useApi';
-import { convertMilestoneGroup } from '@/lib/utils/utils';
 import { Period } from '@/types/common';
 import { MilestoneHistorySortCriteria, SortDirection } from '@/types/milestone';
 
@@ -29,22 +28,26 @@ const MilestoneHistoryTable = ({ searchFilterPeriod, pageNumber, pageSize }: Mil
   return (
     <table className="w-full border-collapse">
       <thead>
-        <tr className="flex border-b border-border text-center">
+        <tr className="flex items-center border-b border-border text-center text-sm sm:text-base">
           <th className="flex-grow p-[10px]">활동명</th>
-          <th className="w-20 p-[10px]">역량 구분</th>
-          <th className="w-20 p-[10px]">획득 점수</th>
-          <th className="w-[112px] p-[10px]">활동일</th>
+          <th className="w-16 p-1 sm:w-20 sm:p-[10px]">구분</th>
+          <th className="w-16 p-1 sm:p-[10px]">점수</th>
+          <th className="hidden w-[80px] p-1 sm:table-cell sm:w-[100px] sm:p-[10px]">활동일</th>
         </tr>
       </thead>
-      <tbody className="border-y-2 border-border text-sm">
+      <tbody className="border-y-2 border-border text-xs sm:text-sm">
         {milestoneHistoriesOfStudent?.content.map((milestoneHistory) => (
-          <tr key={milestoneHistory.id} className="flex border-b border-border text-center">
-            <td className="max-w-[calc(100%-273px)] flex-grow p-[10px] text-left">{milestoneHistory.description}</td>
-            <td className="w-20 p-[10px]">
+          <tr key={milestoneHistory.id} className="flex items-center border-b border-border text-center">
+            <td className="max-w-[calc(100%-128px)] flex-grow p-[10px] text-left sm:max-w-[calc(100%-244px)]">
+              {milestoneHistory.description}
+            </td>
+            <td className="w-16 p-1 sm:w-20 sm:p-[10px]">
               <MilestoneGroupLabel group={milestoneHistory.milestone.categoryGroup} />
             </td>
-            <td className="w-20 p-[10px]">{milestoneHistory.milestone.score * milestoneHistory.count}</td>
-            <td className="w-[112px] p-[10px]">{milestoneHistory.activatedAt.slice(0, 10)}</td>
+            <td className="w-16 p-1 sm:p-[10px]">{milestoneHistory.milestone.score * milestoneHistory.count}</td>
+            <td className="hidden w-[100px] p-[10px] sm:table-cell">
+              {milestoneHistory.activatedAt.slice(0, 10).replaceAll('-', '.')}
+            </td>
           </tr>
         ))}
       </tbody>

frontend/src/app/(withSidebar)/my-page/milestone/components/MilestoneOverview/index.tsx

@@ -4,13 +4,13 @@ import { useMemo } from 'react';
 import MilestoneChart from '@/components/MilestoneChart';
 import MilestoneTable from '@/components/MilestoneTable';
 import { initialMilestoneOverview } from '@/data/milestone';
+import { useAppSelector } from '@/lib/hooks/redux';
 import { useMilestoneScoresOfStudentQuery } from '@/lib/hooks/useApi';
 import { Period } from '@/types/common';
 import { MilestoneOverviewScore } from '@/types/milestone';
 
 import { MilestoneWrapper } from './styled';
 import MilestoneDetail from '../MilestoneDetail';
-import { useAppSelector } from '@/lib/hooks/redux';
 
 interface MilestoneOverviewProps {
   searchFilterPeriod: Period;
@@ -37,7 +37,7 @@ const MilestoneOverview = ({ searchFilterPeriod }: MilestoneOverviewProps) => {
     [milestoneScoresOfStudent],
   );
   return (
-    <div style={{ display: 'flex', gap: '16px' }}>
+    <div className="flex flex-wrap justify-center gap-4">
       <MilestoneWrapper>
         <MilestoneChart chartSize={180} fontSize="lg" milestoneOverviewScore={milestoneOverviewScore} />
         <MilestoneTable milestoneOverviewScore={milestoneOverviewScore} />

frontend/src/app/(withSidebar)/my-page/milestone/page.tsx

@@ -8,7 +8,7 @@ import { Period } from '@/types/common';
 
 import MilestoneHistoryTable from './components/MilestoneHistoryTable';
 import MilestoneOverview from './components/MilestoneOverview';
-import { Content, SubTitle, Title } from './styled';
+import { Content, SubTitle } from './styled';
 import MilestonePeriodSearchForm from '../../../../components/MilestonePeriodSearchForm';
 
 const Page = () => {
@@ -20,8 +20,8 @@ const Page = () => {
 
   return (
     <Content>
-      <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '25px' }}>
-        <Title>마일스톤 획득 내역</Title>
+      <div className="mb-6 flex flex-wrap justify-between gap-4">
+        <p className="min-w-[10em] text-xl font-bold">마일스톤 획득 내역</p>
         <MilestonePeriodSearchForm
           setFilterPeriod={setFilterPeriod}
           filterPeriod={filterPeriod}
@@ -33,7 +33,7 @@ const Page = () => {
       <div style={{ borderBottom: `1px dotted ${COLOR.border}`, margin: '30px 0px' }} />
       <SubTitle>획득 내역</SubTitle>
       {/* TODO 제대로 페이지네이션 처리 하기 */}
-      <MilestoneHistoryTable searchFilterPeriod={searchFilterPeriod} page={0} size={10} />
+      <MilestoneHistoryTable searchFilterPeriod={searchFilterPeriod} pageNumber={0} pageSize={10} />
     </Content>
   );
 };

frontend/src/app/(withSidebar)/my-page/milestone/register/components/MilestoneHistoryDeleteButton/index.tsx

@@ -2,6 +2,7 @@
 
 import { useRouter } from 'next/navigation';
 
+import { toast } from 'react-toastify';
 import { useMilestoneHistoryDeleteMutation } from '@/lib/hooks/useApi';
 
 interface MilestoneHistoryDeleteButtonProps {
@@ -19,7 +20,7 @@ const MilestoneHistoryDeleteButton = ({ historyId }: MilestoneHistoryDeleteButto
           if (router) router.refresh();
         },
         onError: () => {
-          window.alert('삭제에 실패하였습니다.');
+          toast.error('삭제에 실패하였습니다.');
         },
       });
     }

frontend/src/app/(withSidebar)/my-page/milestone/register/components/MilestoneHistoryTable/index.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable jsx-a11y/control-has-associated-label */
 /* eslint-disable max-len */
-/* eslint-disable no-alert */
 
 import MilestoneHistoryStatusLabel from '@/app/(withSidebar)/my-page/components/MilestoneHistoryStatusLabel';
 import { getMilestoneHistoriesOfStudent } from '@/lib/api/server.api';
@@ -25,29 +24,44 @@ const MilestoneHistoryTable = async () => {
       <thead className="font-bold">
         <tr className="text-center">
           <td className="min-w-[2em] p-2">No</td>
-          <td className="w-full p-2">제목</td>
+          <td className="hidden w-full p-2 sm:table-cell">제목</td>
           <td className="min-w-[3em] p-2">점수</td>
-          <td className="min-w-[10em] p-2">활동일</td>
-          <td className="min-w-[10em] p-2">등록일</td>
-          <td className="min-w-[6em] p-2">진행 상황</td>
-          <td className="min-w-[6em] p-2">처리</td>
+          <td className="hidden min-w-[8em] p-2 sm:table-cell">활동일</td>
+          <td className="hidden min-w-[8em] p-2 sm:table-cell">등록일</td>
+          <td className="hidden min-w-[6em] p-2 sm:table-cell">진행 상황</td>
+          <td className="hidden min-w-[6em] p-2 sm:table-cell">처리</td>
+          <td className="table-cell min-w-[6em] p-2 sm:hidden">실적 내역</td>
         </tr>
       </thead>
       <tbody className="border-y text-center">
         {milestoneHistories?.content.map((milestoneHistory, index) => (
           <tr className="border-b border-border p-2">
             <td className="p-2">{index + 1} </td>
-            <td className="p-2 text-left">{milestoneHistory.description}</td>
+            <td className="hidden p-2 text-left sm:table-cell">{milestoneHistory.description}</td>
             <td className="p-2">{milestoneHistory.milestone.score * milestoneHistory.count}</td>
-            <td className="p-2">{milestoneHistory.activatedAt}</td>
-            <td className="p-2">{milestoneHistory.createdAt.slice(0, 10)}</td>
-            <td className="p-2" align="center">
+            <td className="hidden p-2 sm:table-cell">{milestoneHistory.activatedAt.replaceAll('-', '.')}</td>
+            <td className="hidden p-2 sm:table-cell">{milestoneHistory.createdAt.slice(0, 10).replaceAll('-', '.')}</td>
+            <td className="hidden p-2 sm:table-cell" align="center">
               <MilestoneHistoryStatusLabel
                 status={milestoneHistory.status}
                 rejectReason={milestoneHistory.rejectReason}
               />
             </td>
-            <td className="p-2">
+            <td className="hidden p-2 sm:table-cell">
+              <MilestoneHistoryDeleteButton historyId={milestoneHistory.id} />
+            </td>
+            <td className="flex flex-col gap-1 p-2 sm:hidden">
+              <div className="flex items-center justify-start gap-1">
+                <MilestoneHistoryStatusLabel
+                  status={milestoneHistory.status}
+                  rejectReason={milestoneHistory.rejectReason}
+                />
+                <div className="flex-grow text-left font-bold">{milestoneHistory.description}</div>
+              </div>
+              <div className="flex justify-between text-xs text-comment">
+                <div>활동: {milestoneHistory.activatedAt.replaceAll('-', '.')}</div>
+                <div>등록: {milestoneHistory.createdAt.slice(0, 10).replaceAll('-', '.')}</div>
+              </div>
               <MilestoneHistoryDeleteButton historyId={milestoneHistory.id} />
             </td>
           </tr>

frontend/src/app/(withSidebar)/my-page/milestone/register/write/components/MilestoneDropdown/index.tsx

@@ -68,8 +68,8 @@ const MilestoneDropdown = ({ ...props }: MilestoneDropdownProps) => {
   }, [milestoneId, milestoneOptions, setSelectedMilestone]);
 
   return (
-    <div className="flex gap-x-4">
-      <div className="w-[540px]">
+    <div className="flex flex-col flex-wrap gap-4 sm:flex-row">
+      <div className="flex-grow sm:min-w-[540px] lg:w-[540px]">
         <Dropdown
           name={categoryName}
           label="활동"
@@ -80,7 +80,7 @@ const MilestoneDropdown = ({ ...props }: MilestoneDropdownProps) => {
           errorText={dropdownProps.errorText ? '' : undefined}
         />
       </div>
-      <div className="flex-grow">
+      <div className="flex-grow sm:min-w-[330px]">
         <Dropdown
           name={milestoneName}
           label="구분"