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 ( @@ -29,17 +42,21 @@ const ReviewGroupDataModal = ({ reviewRequestCode, closeModal }: URLModalProps) 리뷰 확인 코드 {groupAccessCode} - + + + - + URL과 코드를 다른 곳에 저장해두었어요! * 창이 닫히면 코드를 다시 확인할 수 없어요! - + ); 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};