design: 모달 반응형 및 border 추가 (SP-724)

Ludo-SMP · Sep 9, 2024 · 93208a0 · 93208a0
1 parent 80d6c88
commit 93208a0
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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,
     },