Merge pull request #97 from Bibumhada/feat/96-피드백-남기기-기능-추가

96 [Frontend] Feat: 문의하기시 피드백 남기기 기능 추가
Bibumhada · Mar 27, 2024 · a4682a1 · a4682a1
2 parents 0f3a9b6 + 07c7ac3
commit a4682a1
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 6 deletions.
diff --git 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
@@ -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>
   );