diff --git a/frontend/src/components/common/Checkbox/styles.ts b/frontend/src/components/common/Checkbox/styles.ts index 0418780e7..bcab6799c 100644 --- a/frontend/src/components/common/Checkbox/styles.ts +++ b/frontend/src/components/common/Checkbox/styles.ts @@ -3,8 +3,6 @@ import styled from '@emotion/styled'; import { CheckboxStyleProps } from './index'; export const CheckboxContainer = styled.div` - padding: 0; - background-color: transparent; border: none; diff --git a/frontend/src/pages/LandingPage/components/CopyTextButton/index.tsx b/frontend/src/pages/LandingPage/components/CopyTextButton/index.tsx new file mode 100644 index 000000000..9b54985c7 --- /dev/null +++ b/frontend/src/pages/LandingPage/components/CopyTextButton/index.tsx @@ -0,0 +1,27 @@ +import CopyIcon from '@/assets/copy.svg'; + +import * as S from './styles'; + +interface CopyTextButtonProps { + targetText: string; + alt: string; +} + +const CopyTextButton = ({ targetText, alt }: CopyTextButtonProps) => { + const handleCopyTextButtonClick = async () => { + try { + await navigator.clipboard.writeText(targetText); + alert('텍스트가 클립보드에 복사되었습니다.'); + } catch (error) { + if (error instanceof Error) throw new Error('텍스트 복사에 실패했습니다.'); + } + }; + + return ( + + {alt} + + ); +}; + +export default CopyTextButton; diff --git a/frontend/src/pages/LandingPage/components/CopyTextButton/styles.ts b/frontend/src/pages/LandingPage/components/CopyTextButton/styles.ts new file mode 100644 index 000000000..e65399eb1 --- /dev/null +++ b/frontend/src/pages/LandingPage/components/CopyTextButton/styles.ts @@ -0,0 +1,9 @@ +import styled from '@emotion/styled'; + +export const CopyTextButton = styled.button` + width: 2.4rem; + min-width: 2.4rem; + height: 2.4rem; + border: none; + background: none; +`; diff --git a/frontend/src/pages/LandingPage/components/ReviewGroupDataModal/index.tsx b/frontend/src/pages/LandingPage/components/ReviewGroupDataModal/index.tsx index e6c1be818..a0728d516 100644 --- a/frontend/src/pages/LandingPage/components/ReviewGroupDataModal/index.tsx +++ b/frontend/src/pages/LandingPage/components/ReviewGroupDataModal/index.tsx @@ -1,10 +1,9 @@ import { AlertModal } from '@/components'; import { useGroupAccessCode } from '@/hooks'; -import CopyIcon from '../../../../assets/copy.svg'; +import CopyTextButton from '../CopyTextButton'; import * as S from './styles'; - interface URLModalProps { reviewRequestCode: string; closeModal: () => void; @@ -25,12 +24,15 @@ const ReviewGroupDataModal = ({ reviewRequestCode, closeModal }: URLModalProps) 리뷰 요청 URL {reviewRequestCode} - 리뷰 요청 URL 복사하기 + 리뷰 확인 코드 {groupAccessCode} - 리뷰 확인 코드 복사하기 + diff --git a/frontend/src/pages/LandingPage/components/ReviewGroupDataModal/styles.ts b/frontend/src/pages/LandingPage/components/ReviewGroupDataModal/styles.ts index 611fb167c..3145ae965 100644 --- a/frontend/src/pages/LandingPage/components/ReviewGroupDataModal/styles.ts +++ b/frontend/src/pages/LandingPage/components/ReviewGroupDataModal/styles.ts @@ -3,6 +3,10 @@ import styled from '@emotion/styled'; export const ReviewGroupDataModal = styled.div` display: flex; flex-direction: column; + + width: 52rem; + height: 23rem; + gap: 4rem; `; @@ -14,28 +18,30 @@ export const ReviewGroupDataTitle = styled.h3` export const ReviewGroupDataContainer = styled.div` display: flex; flex-direction: column; - gap: 2rem; + gap: 1.7rem; + min-width: 0; `; export const ReviewGroupDataItem = styled.div` display: flex; justify-content: space-between; - gap: 2.1rem; + gap: 1.8rem; font-size: 1.5rem; `; export const DataName = styled.span` + flex: 0.6; font-weight: ${({ theme }) => theme.fontWeight.bold}; `; export const Data = styled.span` + flex: 2; color: ${({ theme }) => theme.colors.gray}; `; export const CheckContainer = styled.div` display: flex; - font-size: 1.5rem; `; diff --git a/frontend/src/pages/LandingPage/components/index.ts b/frontend/src/pages/LandingPage/components/index.ts index fcc70af96..e66aea391 100644 --- a/frontend/src/pages/LandingPage/components/index.ts +++ b/frontend/src/pages/LandingPage/components/index.ts @@ -3,3 +3,4 @@ export { default as FormLayout } from './FormLayout'; export { default as ReviewAccessForm } from './ReviewAccessForm'; export { default as ReviewGroupDataModal } from './ReviewGroupDataModal'; export { default as URLGeneratorForm } from './URLGeneratorForm'; +export { default as CopyTextButton } from './CopyTextButton';