From 473fb886531bcdc887eb4e8d9a7e9a52e99f1344 Mon Sep 17 00:00:00 2001
From: ImxYJL <allensain14@gmail.com>
Date: Fri, 9 Aug 2024 17:05:06 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EB=82=B4=EC=9A=A9=20=ED=99=95=EC=9D=B8?=
 =?UTF-8?q?=20=EC=B2=B4=ED=81=AC=EB=B0=95=EC=8A=A4=EC=97=90=20=EC=B2=B4?=
 =?UTF-8?q?=ED=81=AC=ED=95=B4=EC=95=BC=20=EB=AA=A8=EB=8B=AC=EC=9D=84=20?=
 =?UTF-8?q?=EB=8B=AB=EC=9D=84=20=EC=88=98=20=EC=9E=88=EB=8F=84=EB=A1=9D=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95=20=EB=B0=8F=20=EB=AA=A8=EB=8B=AC=20=EC=8A=A4?=
 =?UTF-8?q?=ED=83=80=EC=9D=BC=20=EC=A1=B0=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ReviewGroupDataModal/index.tsx | 33 ++++++++++++++-----
 .../components/ReviewGroupDataModal/styles.ts | 27 ++++++++++-----
 2 files changed, 44 insertions(+), 16 deletions(-)

diff --git a/frontend/src/pages/LandingPage/components/ReviewGroupDataModal/index.tsx b/frontend/src/pages/LandingPage/components/ReviewGroupDataModal/index.tsx
index a0728d516..61a6ce2cf 100644
--- 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
index 3145ae965..a85d41be5 100644
--- 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};