[FE] feat: 클립보드 복사 컴포넌트 구현 (#261)

* feat: 클립보드 복사 컴포넌트 구현

Co-authored-by: skylar1220 <[email protected]>

* fix: 부모 요소의 너비에 따라 CopyTextButton이 작아지는 문제 해결

* refactor: ReviewGroupDataModal 스타일 조정 - 전체 크기 지정 및 gap 조정

* chore: 불필요한 padding 제거

* chore: index 파일에 CopyTextButton 추가

---------

Co-authored-by: skylar1220 <[email protected]>

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<CheckboxStyleProps>`
-  padding: 0;
-
   background-color: transparent;
   border: none;
 

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 (
+    <S.CopyTextButton onClick={handleCopyTextButtonClick}>
+      <img src={CopyIcon} alt={alt} />
+    </S.CopyTextButton>
+  );
+};
+
+export default CopyTextButton;

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;
+`;

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)
           <S.ReviewGroupDataItem>
             <S.DataName>리뷰 요청 URL</S.DataName>
             <S.Data>{reviewRequestCode}</S.Data>
-            <img src={CopyIcon} alt="리뷰 요청 URL 복사하기" />
+            <CopyTextButton targetText={reviewRequestCode} alt="리뷰 요청 URL 복사하기"></CopyTextButton>
           </S.ReviewGroupDataItem>
           <S.ReviewGroupDataItem>
             <S.DataName>리뷰 확인 코드</S.DataName>
             <S.Data>{groupAccessCode}</S.Data>
-            <img src={CopyIcon} alt="리뷰 확인 코드 복사하기" />
+            <CopyTextButton
+              targetText={groupAccessCode ? groupAccessCode : ''}
+              alt="리뷰 확인 코드 복사하기"
+            ></CopyTextButton>
           </S.ReviewGroupDataItem>
           <S.CheckContainer>
             <S.Checkbox />

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;
 `;
 

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';