feat: 내용 확인 체크박스에 체크해야 모달을 닫을 수 있도록 수정 및 모달 스타일 조정

woowacourse-teams · Aug 9, 2024 · 473fb88 · 473fb88
1 parent 5bab7c1
commit 473fb88
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 16 deletions.
diff --git a/frontend/src/pages/LandingPage/components/ReviewGroupDataModal/index.tsx b/frontend/src/pages/LandingPage/components/ReviewGroupDataModal/index.tsx
@@ -1,7 +1,10 @@
+import { useState } from 'react';
+
 import { AlertModal } from '@/components';
+import Checkbox from '@/components/common/Checkbox';
 import { useGroupAccessCode } from '@/hooks';
 
-import CopyTextButton from '../CopyTextButton';
+import { CopyTextButton } from '../index';
 
 import * as S from './styles';
 interface URLModalProps {
@@ -10,11 +13,21 @@ interface URLModalProps {
 }
 
 const ReviewGroupDataModal = ({ reviewRequestCode, closeModal }: URLModalProps) => {
+  const [isChecked, setIsChecked] = useState(false);
   const { groupAccessCode } = useGroupAccessCode();
 
+  const handleCheckboxClick = () => {
+    setIsChecked(!isChecked);
+  };
+
+  const handleCloseButtonClick = () => {
+    if (isChecked) closeModal();
+    return;
+  };
+
   return (
     <AlertModal
-      closeButton={{ content: '닫기', type: 'secondary', handleClick: closeModal }}
+      closeButton={{ content: '닫기', type: 'secondary', handleClick: handleCloseButtonClick }}
       handleClose={null}
       isClosableOnBackground={false}
     >
@@ -29,17 +42,21 @@ const ReviewGroupDataModal = ({ reviewRequestCode, closeModal }: URLModalProps)
           <S.ReviewGroupDataItem>
             <S.DataName>리뷰 확인 코드</S.DataName>
             <S.Data>{groupAccessCode}</S.Data>
-            <CopyTextButton
-              targetText={groupAccessCode ? groupAccessCode : ''}
-              alt="리뷰 확인 코드 복사하기"
-            ></CopyTextButton>
+            <CopyTextButton targetText={groupAccessCode ?? ''} alt="리뷰 확인 코드 복사하기"></CopyTextButton>
           </S.ReviewGroupDataItem>
+        </S.ReviewGroupDataContainer>
+        <S.WarningContainer>
           <S.CheckContainer>
-            <S.Checkbox />
+            <Checkbox
+              id="is-confirmed-checkbox"
+              isChecked={isChecked}
+              onChange={handleCheckboxClick}
+              $style={{ width: '2.3rem', height: '2.3rem' }}
+            />
             <S.CheckMessage>URL과 코드를 다른 곳에 저장해두었어요!</S.CheckMessage>
           </S.CheckContainer>
           <S.Warning>* 창이 닫히면 코드를 다시 확인할 수 없어요!</S.Warning>
-        </S.ReviewGroupDataContainer>
+        </S.WarningContainer>
       </S.ReviewGroupDataModal>
     </AlertModal>
   );

diff --git a/frontend/src/pages/LandingPage/components/ReviewGroupDataModal/styles.ts b/frontend/src/pages/LandingPage/components/ReviewGroupDataModal/styles.ts
@@ -6,27 +6,25 @@ export const ReviewGroupDataModal = styled.div`
 
   width: 52rem;
   height: 23rem;
-
-  gap: 4rem;
 `;
 
 export const ReviewGroupDataTitle = styled.h3`
   font-weight: ${({ theme }) => theme.fontWeight.bold};
   font-size: 2rem;
+  margin-bottom: 4rem;
 `;
 
 export const ReviewGroupDataContainer = styled.div`
   display: flex;
   flex-direction: column;
-  gap: 1.7rem;
-  min-width: 0;
+  gap: 2.4rem;
 `;
 
 export const ReviewGroupDataItem = styled.div`
   display: flex;
   justify-content: space-between;
   gap: 1.8rem;
-
+  align-items: center;
   font-size: 1.5rem;
 `;
 
@@ -40,20 +38,33 @@ export const Data = styled.span`
   color: ${({ theme }) => theme.colors.gray};
 `;
 
-export const CheckContainer = styled.div`
+export const WarningContainer = styled.div`
   display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+
+  margin-top: 3.7rem;
+`;
+
+export const CheckContainer = styled.div`
   font-size: 1.5rem;
+
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
 `;
 
 export const Checkbox = styled.input`
   height: 1rem;
   width: 1rem;
-  margin-right: 0.5rem;
+  margin-right: 0.3rem;
 
   cursor: pointer;
 `;
 
-export const CheckMessage = styled.p``;
+export const CheckMessage = styled.p`
+  font-size: 1.3rem;
+`;
 
 export const Warning = styled.p`
   color: ${({ theme }) => theme.colors.red};