[FE] 팀바팀 전반적인 모달 사이즈 조정 (#937)

* refactor: 일정 등록 모달 사이즈 수정 * refactor: 일정 수정 모달 사이즈 수정 * refactor: 하루 전체 일정 조회 모달 사이즈 수정 * refactor: 일정 내보내기 모달 사이즈 수정 * refactor: scheduleModal 스토리북 수정 * refactor: 일정 조회 모달 사이즈 수정 * refactor: 팀 링크 모달 사이즈 수정 * refactor: 팀 정보 모달 사이즈 수정 * refactor: 팀 탈퇴 모달 사이즈 수정 * refactor: 모달 버튼 너비 수정 * refactor: 모달 위치 수정 및 리뷰반영
woowacourse-teams · Mar 11, 2024 · 681f55e · 681f55e
1 parent 6df9beb
commit 681f55e
Show file tree

Hide file tree

Showing 16 changed files with 136 additions and 101 deletions.
diff --git a/frontend/src/components/link/LinkAddModal/LinkAddModal.styled.ts b/frontend/src/components/link/LinkAddModal/LinkAddModal.styled.ts
@@ -40,9 +40,8 @@ export const Container = styled.div<{
       `;
 
     return css`
-      width: 496px;
-      min-height: 320px;
-      padding: 20px 30px;
+      width: 400px;
+      padding: 18px 22px;
     `;
   }}
   
@@ -66,7 +65,7 @@ export const IconWrapper = styled.div`
   justify-content: flex-end;
 
   width: 100%;
-  height: 38px;
+  height: 34px;
   margin-bottom: 22px;
 
   border-bottom: ${({ theme }) => `1px solid ${theme.color.GRAY300}`};
@@ -75,25 +74,32 @@ export const IconWrapper = styled.div`
 export const InputContainer = styled.div`
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 8px;
 `;
 
 export const ControlButtonWrapper = styled.div`
   display: flex;
   justify-content: flex-end;
 
   width: 100%;
-  height: 40px;
+  height: 38px;
 `;
 
 export const submitButton = css`
-  width: 90px;
+  width: 80px;
+  padding: 0;
 `;
 
 export const closeButton = css`
-  width: 22px;
-  height: 38px;
+  width: 28px;
+  height: 28px;
   padding: 0;
+  margin-bottom: 4px;
+
+  svg {
+    width: 28px;
+    height: 28px;
+  }
 `;
 
 export const title = css`
@@ -103,5 +109,5 @@ export const title = css`
   border-radius: 10px;
   background-color: ${({ theme }) => theme.color.GRAY200};
 
-  font-size: 17px;
+  font-size: 18px;
 `;
diff --git a/frontend/src/components/link/LinkAddModal/LinkAddModal.tsx b/frontend/src/components/link/LinkAddModal/LinkAddModal.tsx
@@ -47,7 +47,7 @@ const LinkAddModal = (props: LinkAddModalProps) => {
         </S.IconWrapper>
         <form onSubmit={handleTeamLinkSubmit}>
           <S.InputContainer>
-            <Text size="xl" weight="semiBold">
+            <Text size="lg" weight="semiBold">
               링크 이름
             </Text>
             <Input
@@ -61,7 +61,7 @@ const LinkAddModal = (props: LinkAddModalProps) => {
             />
           </S.InputContainer>
           <S.InputContainer>
-            <Text size="xl" weight="semiBold">
+            <Text size="lg" weight="semiBold">
               링크
             </Text>
             <Input

diff --git a/frontend/src/components/team/TeamExitModal/TeamExitModal.styled.ts b/frontend/src/components/team/TeamExitModal/TeamExitModal.styled.ts
@@ -7,8 +7,7 @@ export const Container = styled.div`
   z-index: ${({ theme }) => theme.zIndex.MODAL};
 
   width: 500px;
-  min-height: 280px;
-  padding: 20px 30px;
+  padding: 18px 22px;
 
   border-radius: 10px;
   background-color: ${({ theme }) => theme.color.WHITE};
@@ -30,6 +29,9 @@ export const Backdrop = styled.div`
 
 export const Header = styled.div`
   display: flex;
+  width: 100%;
+  height: 34px;
+  margin-bottom: 18px;
 
   border-bottom: ${({ theme }) => `1px solid ${theme.color.GRAY300}`};
 `;
@@ -39,15 +41,14 @@ export const Body = styled.div`
   flex-direction: column;
 
   height: 100%;
-  margin-top: 20px;
-  row-gap: 36px;
+  row-gap: 22px;
 
   & > label {
     display: flex;
     flex-direction: column;
     align-items: center;
 
-    row-gap: 36px;
+    row-gap: 26px;
   }
 `;
 
@@ -72,21 +73,26 @@ export const strongContent = css`
 `;
 
 export const closeButton = css`
-  width: 22px;
-  height: 38px;
-  padding: 8px 0;
-
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  margin-bottom: 4px;
   margin-left: auto;
+
+  svg {
+    width: 28px;
+    height: 28px;
+  }
 `;
 
 export const cancelButton = css`
-  width: 90px;
+  width: 80px;
 
   background-color: ${({ theme }) => theme.color.GRAY500};
 `;
 
 export const exitConfirmButton = css`
-  width: 90px;
+  width: 80px;
 
   background-color: ${({ theme }) => theme.color.RED};
 `;

diff --git a/frontend/src/components/team/TeamPlaceInfoModal/TeamPlaceInfoModal.styled.ts b/frontend/src/components/team/TeamPlaceInfoModal/TeamPlaceInfoModal.styled.ts
@@ -17,9 +17,9 @@ export const Container = styled.div`
   right: 20px;
   z-index: ${({ theme }) => theme.zIndex.MODAL};
 
-  width: 320px;
-  height: 500px;
-  padding: 20px 30px;
+  width: 310px;
+  max-height: 500px;
+  padding: 22px;
 
   border-radius: 8px;
   box-shadow:

diff --git a/frontend/src/components/team_calendar/DailyScheduleModal/DailyScheduleModal.styled.ts b/frontend/src/components/team_calendar/DailyScheduleModal/DailyScheduleModal.styled.ts
@@ -16,8 +16,8 @@ export const Container = styled.div<{ $css: CSSProp }>`
   flex-direction: column;
   z-index: ${({ theme }) => theme.zIndex.MODAL};
 
-  width: 300px;
-  height: 338px;
+  width: 250px;
+  max-height: 338px;
   padding: 10px 20px 20px 20px;
 
   border-radius: 10px;
@@ -118,7 +118,7 @@ export const modalLocation = (
     return css`
       position: absolute;
       top: ${(row > 3 ? -228 : 0) + 148 + 110 * row}px;
-      left: ${(column > 3 ? -300 : calendarWidth / 7) +
+      left: ${(column > 3 ? -250 : calendarWidth / 7) +
       calendarLeft +
       (calendarWidth * column) / 7}px;
     `;

diff --git a/frontend/src/components/team_calendar/DailyScheduleModal/DailyScheduleModal.tsx b/frontend/src/components/team_calendar/DailyScheduleModal/DailyScheduleModal.tsx
@@ -93,16 +93,12 @@ const DailyScheduleModal = (props: DailyScheduleModalProps) => {
                     onSetModalType();
                   }}
                 >
-                  <Text size="lg" css={S.teamName}>
-                    {title}
-                  </Text>
+                  <Text css={S.teamName}>{title}</Text>
                 </S.ScheduleBox>
               );
             })
           ) : (
-            <Text size="lg" css={S.teamName}>
-              등록된 일정이 없습니다.
-            </Text>
+            <Text css={S.teamName}>등록된 일정이 없습니다.</Text>
           )}
         </S.ScheduleWrapper>
       </S.Container>

diff --git a/frontend/src/components/team_calendar/ICalendarModal/ICalendarModal.styled.ts b/frontend/src/components/team_calendar/ICalendarModal/ICalendarModal.styled.ts
@@ -38,14 +38,14 @@ export const Container = styled.div<{
     if ($isMobile)
       return css`
         width: 300px;
-        min-height: 180px;
+        height: 180px;
         padding: 10px 20px;
       `;
 
     return css`
-      width: 400px;
-      min-height: 200px;
-      padding: 20px;
+      width: 360px;
+      height: 190px;
+      padding: 16px;
     `;
   }}
  
@@ -112,7 +112,7 @@ export const UrlWrapper = styled.div`
   justify-content: center;
 
   width: 90%;
-  height: 40px;
+  height: 36px;
   padding: 0 8px;
 
   & > div {
@@ -129,7 +129,15 @@ export const UserGuideLink = styled.a`
 `;
 
 export const closeButton = css`
+  width: 28px;
+  height: 28px;
   padding: 0;
+  margin-bottom: 4px;
+
+  svg {
+    width: 28px;
+    height: 28px;
+  }
 `;
 
 export const copyButton = css`

diff --git a/frontend/src/components/team_calendar/ICalendarModal/ICalendarModal.tsx b/frontend/src/components/team_calendar/ICalendarModal/ICalendarModal.tsx
@@ -49,7 +49,7 @@ const ICalendarModal = (props: ICalendarModalProps) => {
           <Text as="span" size="xl" weight="semiBold">
             일정 내보내기
           </Text>
-          <Spacing size={8} direction="horizontal" />
+          <Spacing size={6} direction="horizontal" />
           <S.TooltipWrapper
             tabIndex={0}
             onFocus={() => setIsTooltipOpen(true)}

diff --git a/frontend/src/components/team_calendar/ScheduleAddModal/ScheduleAddModal.styled.ts b/frontend/src/components/team_calendar/ScheduleAddModal/ScheduleAddModal.styled.ts
@@ -39,9 +39,9 @@ export const Container = styled.div<{
       `;
 
     return css`
-      width: 496px;
-      min-height: 380px;
-      padding: 20px 30px;
+      width: 400px;
+      min-height: 320px;
+      padding: 18px 22px;
     `;
   }}
   
@@ -56,7 +56,7 @@ export const Container = styled.div<{
     display: flex;
     flex-direction: column;
 
-    row-gap: ${({ $isMobile }) => ($isMobile ? '10px' : '20px')};
+    row-gap: ${({ $isMobile }) => ($isMobile ? '10px' : '16px')};
   }
 `;
 
@@ -65,14 +65,15 @@ export const Header = styled.div`
   justify-content: flex-end;
 
   width: 100%;
-  margin-bottom: 22px;
+  height: 34px;
+  margin-bottom: 18px;
 
   border-bottom: ${({ theme }) => `1px solid ${theme.color.GRAY300}`};
 `;
 
 export const TitleWrapper = styled.div`
   width: 100%;
-  height: 44px;
+  height: 38px;
 `;
 
 export const InnerContainer = styled.div`
@@ -86,6 +87,7 @@ export const InnerContainer = styled.div`
 export const CheckboxContainer = styled.div`
   display: flex;
   align-items: center;
+  justify-content: flex-end;
 
   column-gap: 8px;
 `;
@@ -114,7 +116,7 @@ export const InputWrapper = styled.div<{ $isMobile: boolean }>`
   align-items: center;
   justify-content: space-between;
 
-  width: ${({ $isMobile }) => !$isMobile && 'calc(100% - 100px)'};
+  width: ${({ $isMobile }) => !$isMobile && 'calc(100% - 80px)'};
 
   margin-left: ${({ $isMobile }) => !$isMobile && 'auto'};
 `;
@@ -133,7 +135,7 @@ export const ControlButtonWrapper = styled.div`
   justify-content: flex-end;
 
   width: 100%;
-  height: 40px;
+  height: 38px;
 `;
 
 export const title = css`
@@ -143,14 +145,19 @@ export const title = css`
   border-radius: 10px;
   background-color: ${({ theme }) => theme.color.GRAY200};
 
-  font-size: 20px;
+  font-size: 18px;
 `;
 
 export const closeButton = css`
-  width: 22px;
-  height: 38px;
-  padding: 8px 0;
+  width: 28px;
+  height: 28px;
+  padding: 0;
   margin-bottom: 4px;
+
+  svg {
+    width: 28px;
+    height: 28px;
+  }
 `;
 
 export const timetableButton = css`
@@ -177,5 +184,6 @@ export const teamPlaceName = css`
 `;
 
 export const submitButton = css`
-  width: 90px;
+  width: 80px;
+  padding: 0;
 `;
diff --git a/frontend/src/components/team_calendar/ScheduleAddModal/ScheduleAddModal.tsx b/frontend/src/components/team_calendar/ScheduleAddModal/ScheduleAddModal.tsx
@@ -76,7 +76,7 @@ const ScheduleAddModal = (props: ScheduleAddModalProps) => {
           </S.TitleWrapper>
 
           <S.TimeSelectContainer $isMobile={isMobile}>
-            <Text size="xl" weight="semiBold">
+            <Text size="lg" weight="semiBold">
               일정 시작
             </Text>
             <S.InputWrapper $isMobile={isMobile}>
@@ -101,7 +101,7 @@ const ScheduleAddModal = (props: ScheduleAddModalProps) => {
             </S.InputWrapper>
           </S.TimeSelectContainer>
           <S.TimeSelectContainer $isMobile={isMobile}>
-            <Text size="xl" weight="semiBold">
+            <Text size="lg" weight="semiBold">
               일정 마감
             </Text>
             <S.InputWrapper $isMobile={isMobile}>
@@ -126,10 +126,14 @@ const ScheduleAddModal = (props: ScheduleAddModalProps) => {
             </S.InputWrapper>
           </S.TimeSelectContainer>
           <S.CheckboxContainer>
-            <Text size="lg" weight="semiBold">
+            <Text size="md" weight="semiBold">
               종일
             </Text>
-            <Checkbox isChecked={isAllDay} onChange={handleIsAllDayChange} />
+            <Checkbox
+              size="sm"
+              isChecked={isAllDay}
+              onChange={handleIsAllDayChange}
+            />
 
             <p
               className="hidden"