From a54234b1b30208e9429aac132eb95a27ffc17032 Mon Sep 17 00:00:00 2001 From: ImxYJL Date: Thu, 8 Aug 2024 18:03:50 +0900 Subject: [PATCH 1/5] =?UTF-8?q?feat:=20=ED=81=B4=EB=A6=BD=EB=B3=B4?= =?UTF-8?q?=EB=93=9C=20=EB=B3=B5=EC=82=AC=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: skylar1220 --- .../components/CopyTextButton/index.tsx | 27 +++++++++++++++++++ .../components/CopyTextButton/styles.ts | 16 +++++++++++ .../components/ReviewGroupDataModal/index.tsx | 10 ++++--- 3 files changed, 49 insertions(+), 4 deletions(-) create mode 100644 frontend/src/pages/LandingPage/components/CopyTextButton/index.tsx create mode 100644 frontend/src/pages/LandingPage/components/CopyTextButton/styles.ts 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..fedd36b96 --- /dev/null +++ b/frontend/src/pages/LandingPage/components/CopyTextButton/styles.ts @@ -0,0 +1,16 @@ +// src/styles.ts +import styled from '@emotion/styled'; + +export const CopyTextButton = styled.button` + width: 2.2rem; + height: 2.2rem; + padding: 0; + border: none; + background: none; + + img { + width: 2.2rem; + height: 2.2rem; + object-fit: contain; + } +`; 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} - 리뷰 확인 코드 복사하기 + From 256bdd669db8f256643962c4fe19a3d2ac29817e Mon Sep 17 00:00:00 2001 From: ImxYJL Date: Thu, 8 Aug 2024 20:12:29 +0900 Subject: [PATCH 2/5] =?UTF-8?q?fix:=20=EB=B6=80=EB=AA=A8=20=EC=9A=94?= =?UTF-8?q?=EC=86=8C=EC=9D=98=20=EB=84=88=EB=B9=84=EC=97=90=20=EB=94=B0?= =?UTF-8?q?=EB=9D=BC=20CopyTextButton=EC=9D=B4=20=EC=9E=91=EC=95=84?= =?UTF-8?q?=EC=A7=80=EB=8A=94=20=EB=AC=B8=EC=A0=9C=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../LandingPage/components/CopyTextButton/styles.ts | 13 +++---------- 1 file changed, 3 insertions(+), 10 deletions(-) diff --git a/frontend/src/pages/LandingPage/components/CopyTextButton/styles.ts b/frontend/src/pages/LandingPage/components/CopyTextButton/styles.ts index fedd36b96..e65399eb1 100644 --- a/frontend/src/pages/LandingPage/components/CopyTextButton/styles.ts +++ b/frontend/src/pages/LandingPage/components/CopyTextButton/styles.ts @@ -1,16 +1,9 @@ -// src/styles.ts import styled from '@emotion/styled'; export const CopyTextButton = styled.button` - width: 2.2rem; - height: 2.2rem; - padding: 0; + width: 2.4rem; + min-width: 2.4rem; + height: 2.4rem; border: none; background: none; - - img { - width: 2.2rem; - height: 2.2rem; - object-fit: contain; - } `; From 778d45bb49933aaf1fa5a004da2b04925cdecbc8 Mon Sep 17 00:00:00 2001 From: ImxYJL Date: Thu, 8 Aug 2024 20:13:08 +0900 Subject: [PATCH 3/5] =?UTF-8?q?refactor:=20ReviewGroupDataModal=20?= =?UTF-8?q?=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=A1=B0=EC=A0=95=20-=20?= =?UTF-8?q?=EC=A0=84=EC=B2=B4=20=ED=81=AC=EA=B8=B0=20=EC=A7=80=EC=A0=95=20?= =?UTF-8?q?=EB=B0=8F=20gap=20=EC=A1=B0=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/ReviewGroupDataModal/styles.ts | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) 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; `; From 4f72a837ebc3e5763d8c17218ecdb8f76012d62d Mon Sep 17 00:00:00 2001 From: ImxYJL Date: Thu, 8 Aug 2024 20:36:26 +0900 Subject: [PATCH 4/5] =?UTF-8?q?chore:=20=EB=B6=88=ED=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20padding=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/common/Checkbox/styles.ts | 2 -- 1 file changed, 2 deletions(-) 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; From 650e79fbfc6b9cb4e0c84270f6307824c1211e25 Mon Sep 17 00:00:00 2001 From: ImxYJL Date: Thu, 8 Aug 2024 20:50:42 +0900 Subject: [PATCH 5/5] =?UTF-8?q?chore:=20index=20=ED=8C=8C=EC=9D=BC?= =?UTF-8?q?=EC=97=90=20CopyTextButton=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/LandingPage/components/index.ts | 1 + 1 file changed, 1 insertion(+) 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';