문의하기 모달 생성

frontend/src/components/ContactUs/ContactUs.style.ts

@@ -0,0 +1,11 @@
+import styled from '@emotion/styled';
+
+export const ContactUSButton = styled.button`
+  cursor: pointer;
+`;
+
+export const Form = styled.form`
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+`;

frontend/src/components/ContactUs/ContactUs.tsx

@@ -0,0 +1,111 @@
+import { useInput, useInputWithValidate, useToggle } from '@/hooks';
+import { useToast } from '@/hooks/useToast';
+import { validateEmail } from '@/service/validates';
+import { theme } from '@/style/theme';
+
+import { Button, Input, Modal, Text, Textarea } from '..';
+import * as S from './ContactUs.style';
+
+const ContactUs = () => {
+  const [isModalOpen, toggleModal] = useToggle();
+  const [message, handleMessage, resetMessage] = useInput('');
+  const {
+    value: email,
+    handleChange: handleEmail,
+    resetValue: resetEmail,
+    errorMessage: emailErrorMessage,
+  } = useInputWithValidate('', validateEmail);
+
+  const { failAlert, successAlert } = useToast();
+
+  const isValidContents = message.trim().length;
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement> | React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+
+    if (!isValidContents || emailErrorMessage) {
+      return;
+    }
+
+    submitForm();
+  };
+
+  const submitForm = async () => {
+    const res = await sendData();
+
+    if (!res.ok) {
+      failAlert('보내기에 실패했습니다. 계속 실패한다면 이메일로 제보 부탁드립니다.');
+
+      return;
+    }
+
+    successSubmit();
+    successAlert('보내기 완료! 소중한 의견 감사합니다:)');
+  };
+
+  const sendData = () => {
+    const URL = process.env.GOOGLE_URL || '';
+
+    return fetch(URL, {
+      method: 'POST',
+      mode: 'no-cors',
+      body: JSON.stringify({ message, email }),
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+  };
+
+  const successSubmit = () => {
+    resetForm();
+    toggleModal();
+  };
+
+  const resetForm = () => {
+    resetEmail();
+    resetMessage();
+  };
+
+  return (
+    <>
+      <S.ContactUSButton onClick={toggleModal}>
+        <Text.Medium weight='bold' color={theme.color.light.secondary_800}>
+          문의하기
+        </Text.Medium>
+      </S.ContactUSButton>
+      <Modal isOpen={isModalOpen} toggleModal={toggleModal} size='large'>
+        <Modal.Header>문의하기</Modal.Header>
+        <Modal.Body>
+          <S.Form onSubmit={handleSubmit}>
+            <Text.Medium as='p' color={theme.color.light.secondary_500}>
+              질문/피드백을 편하게 남겨주세요! 여러분의 의견은 더 나은 서비스를 만드는 데 큰 도움이 됩니다. <br />
+              이미지 등을 함께 보내실 경우 [email protected]으로 직접 이메일을 보내실 수 있습니다.
+            </Text.Medium>
+            <Textarea id='voc' variant='outlined'>
+              <Textarea.Label htmlFor={'voc'}>무엇을 도와드릴까요?</Textarea.Label>
+              <Textarea.TextField minRows={5} maxRows={10} value={message} onChange={handleMessage} />
+            </Textarea>
+            <Text.Medium as='p' color={theme.color.light.secondary_500}>
+              답변이 필요하시면 아래 이메일 주소를 남겨주세요. 이메일은 오직 답변을 위해서만 사용됩니다 :)
+            </Text.Medium>
+            <Input variant='outlined' isValid={!emailErrorMessage}>
+              <Input.Label>이메일 (선택)</Input.Label>
+              <Input.TextField value={email} onChange={handleEmail} />
+              <Input.HelperText>{emailErrorMessage}</Input.HelperText>
+            </Input>
+          </S.Form>
+        </Modal.Body>
+        <Modal.Footer>
+          <Button onClick={toggleModal} variant='outlined'>
+            닫기
+          </Button>
+          <Button disabled={isValidContents && !emailErrorMessage ? false : true} onClick={handleSubmit}>
+            보내기
+          </Button>
+        </Modal.Footer>
+      </Modal>
+    </>
+  );
+};
+
+export default ContactUs;

frontend/src/components/Footer/Footer.tsx

@@ -1,4 +1,4 @@
-import { Text } from '@/components';
+import { ContactUs, Text } from '@/components';
 import { useAuth } from '@/hooks/authentication';
 
 import * as S from './Footer.style';
@@ -19,11 +19,8 @@ const Footer = () => {
         </Text.Small>{' '}
         © All rights reserved.
       </Text.Small>
-      <S.ContactEmail href='mailto:[email protected]'>
-        <Text.Small color='inherit' weight='bold'>
-          문의 :
-        </Text.Small>{' '}
-        <Text.Small color='inherit'>[email protected]</Text.Small>{' '}
+      <S.ContactEmail>
+        <ContactUs />
       </S.ContactEmail>
     </S.FooterContainer>
   );

frontend/src/components/Header/Header.style.ts

@@ -17,7 +17,7 @@ export const HeaderContainer = styled.nav`
   padding: 0 2rem;
 
   background: white;
-  border-bottom: 2px solid ${theme.color.light.secondary_200};
+  border-bottom: 1px solid ${theme.color.light.secondary_300};
 
   @media (max-width: 768px) {
     padding: 0 1rem;

frontend/src/components/Header/Header.tsx

@@ -2,7 +2,7 @@ import { useEffect } from 'react';
 import { Link, useLocation } from 'react-router-dom';
 
 import { CodeZapLogo, HamburgerIcon, PlusIcon } from '@/assets/images';
-import { Button, Flex, Heading, Text } from '@/components';
+import { Button, ContactUs, Flex, Heading, Text } from '@/components';
 import { ToastContext } from '@/contexts';
 import { useCustomContext, useCustomNavigate, useToggle } from '@/hooks';
 import { useAuth } from '@/hooks/authentication/useAuth';
@@ -56,6 +56,7 @@ const Header = ({ headerRef }: { headerRef: React.RefObject<HTMLDivElement> }) =
           <S.NavContainer>
             {!isChecking && isLogin && <NavOption route={END_POINTS.MY_TEMPLATES} name='내 템플릿' />}
             <NavOption route={END_POINTS.TEMPLATES_EXPLORE} name='구경가기' />
+            <ContactUs />
           </S.NavContainer>
           <S.NavContainer>
             <S.MobileHiddenButton
@@ -100,15 +101,23 @@ const Logo = () => (
   </Link>
 );
 
-const NavOption = ({ route, name }: { route: string; name: string }) => (
-  <Link to={route}>
-    <S.NavOptionButton>
-      <Text.Medium weight='bold' color={theme.color.light.secondary_800}>
-        {name}
-      </Text.Medium>
-    </S.NavOptionButton>
-  </Link>
-);
+const NavOption = ({ route, name }: { route: string; name: string }) => {
+  const location = useLocation();
+  const isCurrentPage = location.pathname === route;
+
+  return (
+    <Link to={route}>
+      <S.NavOptionButton>
+        <Text.Medium
+          weight='bold'
+          color={isCurrentPage ? theme.color.light.primary_500 : theme.color.light.secondary_800}
+        >
+          {name}
+        </Text.Medium>
+      </S.NavOptionButton>
+    </Link>
+  );
+};
 
 const LogoutButton = () => {
   const { mutateAsync } = useLogoutMutation();

frontend/src/components/Input/Input.tsx

@@ -1,12 +1,6 @@
-import {
-  Children,
-  HTMLAttributes,
-  InputHTMLAttributes,
-  isValidElement,
-  LabelHTMLAttributes,
-  PropsWithChildren,
-  ReactNode,
-} from 'react';
+import { HTMLAttributes, InputHTMLAttributes, LabelHTMLAttributes, PropsWithChildren } from 'react';
+
+import { getChildOfType, getChildrenWithoutTypes } from '@/utils';
 
 import * as S from './Input.style';
 
@@ -29,18 +23,6 @@ export interface AdornmentProps extends HTMLAttributes<HTMLDivElement> {
 
 export interface HelperTextProps extends HTMLAttributes<HTMLSpanElement> {}
 
-const getChildOfType = (children: ReactNode, type: unknown) => {
-  const childrenArray = Children.toArray(children);
-
-  return childrenArray.find((child) => isValidElement(child) && child.type === type);
-};
-
-const getChildrenWithoutTypes = (children: ReactNode, types: unknown[]) => {
-  const childrenArray = Children.toArray(children);
-
-  return childrenArray.filter((child) => !(isValidElement(child) && types.includes(child.type)));
-};
-
 const TextField = ({ ...rests }: TextFieldProps) => <S.TextField {...rests} />;
 
 const Label = ({ children, ...rests }: PropsWithChildren<LabelProps>) => <S.Label {...rests}>{children}</S.Label>;

frontend/src/components/Modal/Modal.tsx

@@ -1,6 +1,9 @@
 import { HTMLAttributes, PropsWithChildren, ReactNode } from 'react';
 import { createPortal } from 'react-dom';
 
+import { usePressESC } from '@/hooks/usePressESC';
+import { useScrollDisable } from '@/hooks/useScrollDisable';
+
 import { theme } from '../../style/theme';
 import Heading from '../Heading/Heading';
 import * as S from './Modal.style';
@@ -14,6 +17,9 @@ export interface BaseProps extends HTMLAttributes<HTMLDivElement> {
 }
 
 const Base = ({ isOpen, toggleModal, size = 'small', children, ...props }: PropsWithChildren<BaseProps>) => {
+  usePressESC(isOpen, toggleModal);
+  useScrollDisable(isOpen);
+
   if (!isOpen) {
     return null;
   }