From 93208a0fd9857e94266c58beff8fef25d831621f Mon Sep 17 00:00:00 2001
From: Sunghyun627 <kksscc4@gmail.com>
Date: Mon, 9 Sep 2024 21:32:13 +0900
Subject: [PATCH] =?UTF-8?q?design:=20=EB=AA=A8=EB=8B=AC=20=EB=B0=98?=
 =?UTF-8?q?=EC=9D=91=ED=98=95=20=EB=B0=8F=20border=20=EC=B6=94=EA=B0=80=20?=
 =?UTF-8?q?(SP-724)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Modal/RecruitmentDetailModal/index.tsx    | 37 ++++++++++++++++++-
 src/Components/MyStudyCard/index.tsx          | 11 ++----
 src/Mocks/data/mockMypage.ts                  |  4 +-
 3 files changed, 41 insertions(+), 11 deletions(-)

diff --git a/src/Components/Modal/RecruitmentDetailModal/index.tsx b/src/Components/Modal/RecruitmentDetailModal/index.tsx
index 20871927..6144fd5a 100644
--- a/src/Components/Modal/RecruitmentDetailModal/index.tsx
+++ b/src/Components/Modal/RecruitmentDetailModal/index.tsx
@@ -6,6 +6,7 @@ import { InfoField } from '@/Components/Common/InfoField';
 import { useCloseRecruitmentMutation } from '@/Hooks/recruitments/useCloseRecruitmentMutation';
 import { useRecruitmentDetail } from '@/Hooks/recruitments/useRecruitmentDetail';
 import { useOutSideClick } from '@/Hooks/useOutsideClick';
+import { media } from '@/Styles/theme';
 import { Position, Stack } from '@/Types/study';
 import { dateFormatter, getDayById, getPeriod, isEdited } from '@/utils/date';
 import { SetStateAction, useRef } from 'react';
@@ -172,10 +173,9 @@ export const RecruitmentDetailModal = ({ recruitmentId, handleModal }: Recruitme
 
 const ModalLayout = styled.div`
   display: flex;
-  padding: 40px;
+  padding: 30px;
   flex-direction: column;
   align-items: flex-end;
-  flex-wrap: wrap;
   position: fixed;
   z-index: 100;
   top: 50%;
@@ -184,7 +184,14 @@ const ModalLayout = styled.div`
   gap: 40px;
   width: 90%;
   border-radius: ${({ theme }) => theme.borderRadius.small};
+  border: 1px solid ${({ theme }) => theme.color.black1};
   background: ${({ theme }) => theme.color.white2};
+  overflow-y: scroll;
+
+  ${media.custom(700)} {
+    gap: 30px;
+    height: 90%;
+  }
 `;
 
 const ModalInner = styled.div`
@@ -225,6 +232,10 @@ const Title = styled.div`
   font-style: normal;
   font-weight: 800;
   line-height: 40px;
+
+  ${media.custom(500)} {
+    font-size: ${({ theme }) => theme.font.large};
+  }
 `;
 
 const CreationInfoRows = styled.div`
@@ -250,6 +261,13 @@ const CreationInfoRow = styled.span`
 
 const CloseIcon = styled.div`
   padding: 8px;
+
+  ${media.custom(600)} {
+    svg {
+      width: 24px;
+      height: 24px;
+    }
+  }
 `;
 
 const ModalBody = styled.div`
@@ -292,6 +310,13 @@ const RecruitmentInfoLayout = styled.div`
   flex-wrap: wrap;
   grid-gap: 24px;
   width: 100%;
+
+  ${media.custom(700)} {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  ${media.custom(500)} {
+    grid-template-columns: repeat(1, 1fr);
+  }
 `;
 
 const StudyInfoBox = styled.section`
@@ -312,6 +337,14 @@ const StudyInfoLayout = styled.section`
   flex-wrap: wrap;
   grid-gap: 24px;
   width: 100%;
+
+  ${media.custom(700)} {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  ${media.custom(500)} {
+    grid-template-columns: repeat(1, 1fr);
+  }
 `;
 
 const ModalBtns = styled.div`
diff --git a/src/Components/MyStudyCard/index.tsx b/src/Components/MyStudyCard/index.tsx
index 66324283..4aecac62 100644
--- a/src/Components/MyStudyCard/index.tsx
+++ b/src/Components/MyStudyCard/index.tsx
@@ -166,7 +166,7 @@ const MyStudyCardWrapper = styled.div<{
     cursor: pointer;
   }
 
-  svg {
+  & > svg:first-child {
     border-radius: 16px 0 0 16px;
   }
 
@@ -178,7 +178,7 @@ const MyStudyCardWrapper = styled.div<{
     width: 302px;
     height: auto;
 
-    svg {
+    & > svg:first-child {
       width: 300px;
       height: 300px;
       border-radius: 16px 16px 0 0;
@@ -207,11 +207,7 @@ const StudyInfoWrapper = styled.div<{
     padding: 16px 24px;
     flex-direction: column;
     align-items: center;
-    gap: ${(props) =>
-      ((props.status === 'PROGRESS' || props.status === 'RECRUITING') && !props.hasRecruitment && props.isOwner) ||
-      props.isApplyStatus
-        ? '24px'
-        : 0};
+    gap: 24px;
     align-self: stretch;
   }
 `;
@@ -299,5 +295,6 @@ const MyStudyCardButtonsWrapper = styled.div<{ isApplyStatus: boolean }>`
 
   ${media.custom(600)} {
     justify-content: center;
+    gap: 24px;
   }
 `;
diff --git a/src/Mocks/data/mockMypage.ts b/src/Mocks/data/mockMypage.ts
index e0997843..414d688e 100644
--- a/src/Mocks/data/mockMypage.ts
+++ b/src/Mocks/data/mockMypage.ts
@@ -81,8 +81,8 @@ export const mockMypage = {
       },
       status: 'COMPLETED',
       startDateTime: '2024-03-06T01:19:09.182Z',
-      endDateTime: '2024-03-06T01:19:09.182Z',
-      participantCount: 0,
+      endDateTime: '2024-03-06T01:19:10.182Z',
+      participantCount: 1,
       isOwner: true,
       hasRecruitment: false,
     },