From 07c7ac34992ed9453bafc776fbddadbf0de97881 Mon Sep 17 00:00:00 2001
From: "euncho.kang" <wkdb0425@gmail.com>
Date: Wed, 20 Mar 2024 21:15:20 +0900
Subject: [PATCH] feat: add 'leave Feedback' function

---
 .../modal/ContactUs/ContactUs.styled.ts         | 17 ++++++++++++++---
 src/components/modal/ContactUs/ContactUs.tsx    | 14 +++++++++++---
 2 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/src/components/modal/ContactUs/ContactUs.styled.ts b/src/components/modal/ContactUs/ContactUs.styled.ts
index 2c45846..e29dc30 100644
--- a/src/components/modal/ContactUs/ContactUs.styled.ts
+++ b/src/components/modal/ContactUs/ContactUs.styled.ts
@@ -1,3 +1,4 @@
+import Button from 'components/common/Button/Button';
 import styled from 'styled-components';
 
 export const Layout = styled.div`
@@ -60,12 +61,22 @@ export const ModalContent = styled.p`
   line-height: 1.4;
 `;
 
-export const GoToInquireButton = styled.button`
+export const ButtonGroup = styled.div`
+  display: flex;
+  gap: 7px;
+  font-size: var(--md);
+  font-weight: var(--font-bold);
+`;
+
+export const StyledButton = styled(Button)`
   padding: 11px;
   width: 100%;
-  background-color: var(--color-main-orange);
-  color: #fff;
   border-radius: 10px;
   font-size: var(--md);
   font-weight: var(--font-bold);
 `;
+
+export const OrangeStyledButtons = styled(StyledButton)`
+  background-color: var(--color-main-orange);
+  color: #fff;
+`;
diff --git a/src/components/modal/ContactUs/ContactUs.tsx b/src/components/modal/ContactUs/ContactUs.tsx
index 91787fd..3585063 100644
--- a/src/components/modal/ContactUs/ContactUs.tsx
+++ b/src/components/modal/ContactUs/ContactUs.tsx
@@ -11,10 +11,15 @@ type Props = {
 };
 
 const ContactUsModal = (props: Props) => {
-  const handleToFormClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+  const openForm = (url: string) => (event: React.MouseEvent<HTMLButtonElement>) => {
     event.stopPropagation();
-    window.open('https://docs.google.com/forms/d/e/1FAIpQLSeUVqetIOFi3pOV1LH50b1wdq2GNnt1PQqFUMbP4pIvIqvSFg/viewform?usp=send_form');
+    window.open(url);
   };
+
+  const handleFeedbackFormClick = openForm('https://docs.google.com/forms/d/1gzJMOdNPdUeB5yUHmmUx8Ccax2t0x7ptT13TjDhfITU/edit');
+
+  const handleToInQuiryFormClick = openForm('https://forms.gle/SSdu5rTXxreTZtQk8');
+
   return (
     <S.ModalBackground className={props.className} onClick={props.handleModalClose}>
       <S.ModalLayout onClick={(event: React.MouseEvent<HTMLDivElement>) => event.stopPropagation()}>
@@ -30,7 +35,10 @@ const ContactUsModal = (props: Props) => {
           <br />
           내용이 있다면 남겨주세요
         </S.ModalContent>
-        <S.GoToInquireButton onClick={handleToFormClick}>문의하러 가기</S.GoToInquireButton>
+        <S.ButtonGroup>
+          <S.StyledButton onClick={handleFeedbackFormClick}>피드백 남기기</S.StyledButton>
+          <S.OrangeStyledButtons onClick={handleToInQuiryFormClick}>문의하러 가기</S.OrangeStyledButtons>
+        </S.ButtonGroup>
       </S.ModalLayout>
     </S.ModalBackground>
   );