Merge pull request #377 from Ludo-SMP/feat/SP-724-apply-mypage-design

SP-724 마이페이지에서 작성된 모집공고 정보를 확인하는 모달 구현

src/Apis/recruitment.ts

@@ -48,6 +48,6 @@ export const getRecruitmentDetail = (recruitmentId: number): Promise<{ data: { d
 export const deleteRecruitment = (studyId: number): Promise<{ data: { data: RecruitmentDetail } }> =>
   httpClient.get(API_END_POINT.DELETE_RECRUITMENT(studyId));
 
-// ???
+// 모집공고 마감
 export const closeRecruitment = (studyId: number) =>
   httpClient.patch(API_END_POINT.CLOSE_RECRUITMENT(studyId), null, { params: { status: 'RECRUITED' } });

src/Assets/index.tsx

@@ -35,6 +35,7 @@ export { default as NextArrow } from './icons/nextArrow.svg?react';
 export { default as CreateStudy } from './icons/createstudy.svg?react';
 export { default as DefaultStudyThumbnail } from './icons/studyThumbnail.svg';
 export { default as SearchRecruitment } from './icons/recruitment.svg?react';
+export { default as Clip } from './icons/clip.svg?react';
 
 // Logo
 export { default as BlankLogo } from './images/blank-logo.webp';
@@ -47,7 +48,7 @@ export { default as NotFound } from './images/character1.webp';
 export { default as LoginFail } from './images/character2.webp';
 export { default as SignUpFail } from './images/character3.webp';
 export { default as ErrorBoundaryImage } from './images/character4.webp';
-export { default as LoadingImage } from './images/character1.webp';
+export { default as LoadingImage } from './images/loading.gif';
 
 // Background
 export { default as SignUpBackground } from './images/background1.webp';

src/Components/LoadingSpinner/index.tsx

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 export const LoadingSpinner = () => {
   return (
     <LoadingSpinnerBox>
-      <SpinnerImg src={LoadingImage} alt="loading spinner" />
+      <img src={LoadingImage} alt="loading spinner" />
     </LoadingSpinnerBox>
   );
 };
@@ -19,26 +19,3 @@ const LoadingSpinnerBox = styled.div`
   justify-content: center;
   align-items: center;
 `;
-
-const SpinnerImg = styled.img`
-  opacity: 0.7;
-  animation: rotateImage 1.2s linear infinite;
-  transform-origin: 50% 50%;
-  @keyframes rotateImage {
-    0% {
-      transform: rotate(0deg);
-    }
-    25% {
-      transform: rotate(20deg);
-    }
-    50% {
-      transform: rotate(0deg);
-    }
-    75% {
-      transform: rotate(-20deg);
-    }
-    100% {
-      transform: rotate(0deg);
-    }
-  }
-`;

src/Components/Modal/RecruitmentDetailModal/RecruitmentDetailModal.stories.ts

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { RecruitmentDetailModal } from '.';
+
+const meta = {
+  component: RecruitmentDetailModal,
+  args: {
+    handleModal: () => {},
+    recruitmentId: 1,
+  },
+} satisfies Meta<typeof RecruitmentDetailModal>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {};