From 58faa60de382209bd53c0102e902a17e5d6ca572 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=ED=97=A4=EC=9D=B8?=
 <157036488+Hain-tain@users.noreply.github.com>
Date: Tue, 8 Oct 2024 20:45:22 +0900
Subject: [PATCH 01/10] =?UTF-8?q?design(Header):=20border-bottom=201px=20?=
 =?UTF-8?q?=EB=A1=9C=20=EB=B3=80=EA=B2=BD=20=EB=B0=8F=20=EC=83=89=EC=83=81?=
 =?UTF-8?q?=20secondary=5F300=EC=9C=BC=EB=A1=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Header/Header.style.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/Header/Header.style.ts b/frontend/src/components/Header/Header.style.ts
index eebcf31fa..b36c8663f 100644
--- a/frontend/src/components/Header/Header.style.ts
+++ b/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;

From 1adf9acb84cf9aa4f327b33c570163e1b5791af6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=ED=97=A4=EC=9D=B8?=
 <157036488+Hain-tain@users.noreply.github.com>
Date: Fri, 11 Oct 2024 14:16:39 +0900
Subject: [PATCH 02/10] =?UTF-8?q?feat(src):=20Textarea=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=83=9D=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Textarea/Textarea.stories.tsx  | 179 ++++++++++++++++++
 .../src/components/Textarea/Textarea.style.ts | 101 ++++++++++
 frontend/src/components/Textarea/Textarea.tsx | 118 ++++++++++++
 frontend/src/components/index.ts              |   1 +
 frontend/src/hooks/useInput.ts                |   2 +-
 5 files changed, 400 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/components/Textarea/Textarea.stories.tsx
 create mode 100644 frontend/src/components/Textarea/Textarea.style.ts
 create mode 100644 frontend/src/components/Textarea/Textarea.tsx

diff --git a/frontend/src/components/Textarea/Textarea.stories.tsx b/frontend/src/components/Textarea/Textarea.stories.tsx
new file mode 100644
index 000000000..d662028d4
--- /dev/null
+++ b/frontend/src/components/Textarea/Textarea.stories.tsx
@@ -0,0 +1,179 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState, ReactNode } from 'react';
+
+import Textarea, { BaseProps, TextFieldProps } from './Textarea';
+
+type TextareaStoryProps = BaseProps & {
+  children?: ReactNode;
+  minRows?: TextFieldProps['minRows'];
+  maxRows?: TextFieldProps['maxRows'];
+};
+
+const meta: Meta<TextareaStoryProps> = {
+  title: 'Textarea',
+  component: Textarea,
+  argTypes: {
+    variant: {
+      control: {
+        type: 'radio',
+        options: ['filled', 'outlined', 'text'],
+      },
+    },
+    size: {
+      control: {
+        type: 'radio',
+        options: ['small', 'medium', 'large', 'xlarge'],
+      },
+    },
+    isValid: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    minRows: {
+      control: {
+        type: 'number',
+        min: 1,
+      },
+    },
+    maxRows: {
+      control: {
+        type: 'number',
+        min: 1,
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<TextareaStoryProps>;
+
+export const Filled: Story = {
+  args: {
+    minRows: 3,
+    maxRows: 8,
+  },
+  render: (args) => {
+    const [value, setValue] = useState('');
+
+    return (
+      <div style={{ width: '500px' }}>
+        <Textarea variant={args.variant} size={args.size} isValid={args.isValid}>
+          <Textarea.TextField
+            placeholder='Enter Text'
+            onChange={(e) => setValue(e.target.value)}
+            value={value}
+            minRows={args.minRows}
+            maxRows={args.maxRows}
+          />
+        </Textarea>
+      </div>
+    );
+  },
+};
+
+export const Outlined: Story = {
+  args: {
+    variant: 'outlined',
+    minRows: 3,
+    maxRows: 8,
+  },
+  render: (args) => {
+    const [value, setValue] = useState('');
+
+    return (
+      <div style={{ width: '500px' }}>
+        <Textarea variant={args.variant} size={args.size} isValid={args.isValid}>
+          <Textarea.TextField
+            placeholder='Enter Text'
+            onChange={(e) => setValue(e.target.value)}
+            value={value}
+            minRows={args.minRows}
+            maxRows={args.maxRows}
+          />
+        </Textarea>
+      </div>
+    );
+  },
+};
+
+export const Text: Story = {
+  args: {
+    variant: 'text',
+    minRows: 3,
+    maxRows: 8,
+  },
+  render: (args) => {
+    const [value, setValue] = useState('');
+
+    return (
+      <div style={{ width: '500px' }}>
+        <Textarea variant={args.variant} size={args.size} isValid={args.isValid}>
+          <Textarea.TextField
+            placeholder='Enter Text'
+            onChange={(e) => setValue(e.target.value)}
+            value={value}
+            minRows={args.minRows}
+            maxRows={args.maxRows}
+          />
+        </Textarea>
+      </div>
+    );
+  },
+};
+
+export const WithLabel: Story = {
+  args: {
+    variant: 'outlined',
+    minRows: 3,
+    maxRows: 8,
+  },
+  render: (args) => {
+    const [value, setValue] = useState('');
+
+    return (
+      <div style={{ width: '500px' }}>
+        <Textarea id='helper' variant={args.variant} size={args.size} isValid={args.isValid}>
+          <Textarea.Label htmlFor='helper'>라벨</Textarea.Label>
+          <Textarea.TextField
+            placeholder='Enter Text'
+            onChange={(e) => setValue(e.target.value)}
+            value={value}
+            minRows={args.minRows}
+            maxRows={args.maxRows}
+          />
+        </Textarea>
+      </div>
+    );
+  },
+};
+
+export const WithHelperText: Story = {
+  args: {
+    variant: 'outlined',
+    size: 'medium',
+    isValid: false,
+    minRows: 3,
+    maxRows: 8,
+  },
+  render: (args) => {
+    const [value, setValue] = useState('');
+
+    return (
+      <div style={{ width: '500px' }}>
+        <Textarea id='helper' variant={args.variant} size={args.size} isValid={args.isValid}>
+          <Textarea.Label htmlFor='helper'>라벨</Textarea.Label>
+          <Textarea.TextField
+            placeholder='Enter Text'
+            onChange={(e) => setValue(e.target.value)}
+            value={value}
+            minRows={args.minRows}
+            maxRows={args.maxRows}
+          />
+          <Textarea.HelperText>설명입니다</Textarea.HelperText>
+        </Textarea>
+      </div>
+    );
+  },
+};
diff --git a/frontend/src/components/Textarea/Textarea.style.ts b/frontend/src/components/Textarea/Textarea.style.ts
new file mode 100644
index 000000000..aabfcdf3f
--- /dev/null
+++ b/frontend/src/components/Textarea/Textarea.style.ts
@@ -0,0 +1,101 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+
+import { theme } from '@/style/theme';
+
+import { BaseProps, TextFieldProps } from './Textarea';
+
+const variants = (color: string | undefined) => ({
+  filled: css`
+    background-color: ${color ?? '#ffffff'};
+  `,
+  outlined: css`
+    background: none;
+    border: 1px solid ${color ?? theme.color.light.tertiary_400};
+  `,
+  text: css`
+    background: none;
+  `,
+});
+
+const sizes = {
+  small: css`
+    padding: 8px;
+    font-size: 14px;
+    border-radius: 8px;
+  `,
+  medium: css`
+    padding: 12px;
+    font-size: 16px;
+    border-radius: 10px;
+  `,
+  large: css`
+    padding: 16px;
+    font-size: 18px;
+    border-radius: 12px;
+  `,
+  xlarge: css`
+    padding: 16px;
+    font-size: 32px;
+    border-radius: 12px;
+  `,
+};
+
+export const Container = styled.div`
+  cursor: text;
+
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+
+  width: 100%;
+`;
+
+export const Base = styled.div<BaseProps>`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+
+  ${({ variant, inputColor }) => variant && variants(inputColor)[variant]};
+  ${({ size = 'medium' }) => sizes[size]};
+  ${({ isValid }) =>
+    isValid === false &&
+    css`
+      border-color: ${theme.color.light.analogous_primary_400};
+    `};
+`;
+
+export const TextareaField = styled.textarea<TextFieldProps>`
+  resize: none;
+
+  width: 100%;
+
+  font-family: inherit;
+  font-size: inherit;
+  line-height: 1.5;
+
+  background: none;
+  border: none;
+  outline: none;
+
+  &::placeholder {
+    color: ${({ placeholderColor }) => placeholderColor || theme.color.light.tertiary_400};
+  }
+
+  &:disabled {
+    cursor: default;
+    opacity: 0.6;
+  }
+`;
+
+export const Label = styled.label`
+  font-size: 1rem;
+  line-height: 100%;
+`;
+
+export const HelperText = styled.span`
+  height: 1rem;
+  margin-left: 0.5rem;
+  font-size: 1rem;
+  color: ${theme.color.light.analogous_primary_400};
+`;
diff --git a/frontend/src/components/Textarea/Textarea.tsx b/frontend/src/components/Textarea/Textarea.tsx
new file mode 100644
index 000000000..6cf92a63c
--- /dev/null
+++ b/frontend/src/components/Textarea/Textarea.tsx
@@ -0,0 +1,118 @@
+import { PropsWithChildren, useEffect, useRef } from 'react';
+
+import { getChildOfType, getChildrenWithoutTypes } from '@/utils';
+
+import * as S from './Textarea.style';
+
+export interface BaseProps extends React.HTMLAttributes<HTMLDivElement> {
+  size?: 'small' | 'medium' | 'large' | 'xlarge';
+  variant?: 'filled' | 'outlined' | 'text';
+  isValid?: boolean;
+  inputColor?: string;
+}
+
+export interface TextFieldProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  size?: 'small' | 'medium' | 'large' | 'xlarge';
+  minRows?: number;
+  maxRows?: number;
+  placeholderColor?: string;
+}
+
+export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {}
+
+export interface HelperTextProps extends React.HTMLAttributes<HTMLSpanElement> {}
+
+const Label = ({ children, ...rests }: PropsWithChildren<LabelProps>) => <S.Label {...rests}>{children}</S.Label>;
+
+const HelperText = ({ children, ...rests }: PropsWithChildren<HelperTextProps>) => (
+  <S.HelperText {...rests}>{children}</S.HelperText>
+);
+
+const LabelType = (<Label />).type;
+const HelperTextType = (<HelperText />).type;
+
+const Base = ({
+  variant = 'filled',
+  size = 'medium',
+  isValid = true,
+  children,
+  ...rests
+}: PropsWithChildren<BaseProps>) => {
+  const textarea = getChildrenWithoutTypes(children, [HelperTextType, LabelType]);
+  const helperText = getChildOfType(children, HelperTextType);
+  const label = getChildOfType(children, LabelType);
+
+  const handleFocusInput = (e: React.MouseEvent<HTMLDivElement>) => {
+    const target = e.target as HTMLElement;
+    const isAdornmentClicked = target.closest('[data-adornment]');
+    const isInputClicked = target.tagName === 'INPUT';
+
+    if (isAdornmentClicked) {
+      return;
+    }
+
+    const input = e.currentTarget.querySelector('input');
+
+    if (input && !isInputClicked) {
+      input.focus();
+
+      const length = input.value.length;
+
+      input.setSelectionRange(length, length);
+    }
+  };
+
+  return (
+    <S.Container>
+      {label}
+      <S.Base variant={variant} size={size} isValid={isValid} {...rests} onClick={handleFocusInput}>
+        {textarea}
+      </S.Base>
+      {helperText}
+    </S.Container>
+  );
+};
+
+const fontSize = {
+  small: 14,
+  medium: 16,
+  large: 18,
+  xlarge: 32,
+} as const;
+
+const TextField = ({ size = 'medium', minRows = 1, maxRows = 1, placeholderColor, ...rest }: TextFieldProps) => {
+  const textareaRef = useRef<HTMLTextAreaElement | null>(null);
+
+  const adjustHeight = () => {
+    if (textareaRef.current) {
+      textareaRef.current.style.height = 'auto';
+      const scrollHeight = textareaRef.current.scrollHeight;
+
+      textareaRef.current.style.height = `${Math.min(scrollHeight, maxRows * (fontSize[size] * 1.5))}px`;
+    }
+  };
+
+  useEffect(() => {
+    adjustHeight();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <S.TextareaField
+      ref={textareaRef}
+      rows={minRows}
+      maxRows={maxRows}
+      onInput={adjustHeight}
+      placeholderColor={placeholderColor}
+      {...rest}
+    />
+  );
+};
+
+const Textarea = Object.assign(Base, {
+  TextField,
+  Label,
+  HelperText,
+});
+
+export default Textarea;
diff --git a/frontend/src/components/index.ts b/frontend/src/components/index.ts
index 6f665349e..8e4908d8c 100644
--- a/frontend/src/components/index.ts
+++ b/frontend/src/components/index.ts
@@ -25,6 +25,7 @@ export { default as CategoryDropdown } from './CategoryDropdown/CategoryDropdown
 export { default as CategoryGuide } from './CategoryGuide/CategoryGuide';
 export { default as NewCategoryInput } from './NewCategoryInput/NewCategoryInput';
 export { default as NoSearchResults } from './NoSearchResults/NoSearchResults';
+export { default as Textarea } from './Textarea/Textarea';
 
 // Skeleton UI
 export { default as LoadingBall } from './LoadingBall/LoadingBall';
diff --git a/frontend/src/hooks/useInput.ts b/frontend/src/hooks/useInput.ts
index f677cdc94..0b9234f0b 100644
--- a/frontend/src/hooks/useInput.ts
+++ b/frontend/src/hooks/useInput.ts
@@ -3,7 +3,7 @@ import { useState } from 'react';
 export const useInput = (initValue: string = '') => {
   const [value, setValue] = useState(initValue);
 
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => setValue(e.target.value);
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => setValue(e.target.value);
 
   const resetValue = () => {
     setValue('');

From e82ea1f181b2507fe3b040848f3e08c4d325c350 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=ED=97=A4=EC=9D=B8?=
 <157036488+Hain-tain@users.noreply.github.com>
Date: Fri, 11 Oct 2024 14:17:58 +0900
Subject: [PATCH 03/10] =?UTF-8?q?refactor(src):=20getChildOfType,=20getChi?=
 =?UTF-8?q?ldrenWithoutTypes=20=ED=95=A8=EC=88=98=20utils=EB=A1=9C=20?=
 =?UTF-8?q?=ED=8C=8C=EC=9D=BC=EB=A1=9C=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Input/Input.tsx    | 24 +++-------------------
 frontend/src/utils/index.ts                |  1 +
 frontend/src/utils/reactChildrenHelpers.ts | 13 ++++++++++++
 3 files changed, 17 insertions(+), 21 deletions(-)
 create mode 100644 frontend/src/utils/reactChildrenHelpers.ts

diff --git a/frontend/src/components/Input/Input.tsx b/frontend/src/components/Input/Input.tsx
index 4bab9f54e..dd7798c3f 100644
--- a/frontend/src/components/Input/Input.tsx
+++ b/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>;
diff --git a/frontend/src/utils/index.ts b/frontend/src/utils/index.ts
index d50713e0f..3af87010a 100644
--- a/frontend/src/utils/index.ts
+++ b/frontend/src/utils/index.ts
@@ -4,3 +4,4 @@ export { getByteSize } from './getByteSize';
 export { getLanguageByFilename } from './getLanguageByFileName';
 export { remToPx } from './remToPx';
 export { scroll } from './scroll';
+export { getChildOfType, getChildrenWithoutTypes } from './reactChildrenHelpers';
diff --git a/frontend/src/utils/reactChildrenHelpers.ts b/frontend/src/utils/reactChildrenHelpers.ts
new file mode 100644
index 000000000..6ead54603
--- /dev/null
+++ b/frontend/src/utils/reactChildrenHelpers.ts
@@ -0,0 +1,13 @@
+import { Children, isValidElement, ReactNode } from 'react';
+
+export const getChildOfType = (children: ReactNode, type: unknown) => {
+  const childrenArray = Children.toArray(children);
+
+  return childrenArray.find((child) => isValidElement(child) && child.type === type);
+};
+
+export const getChildrenWithoutTypes = (children: ReactNode, types: unknown[]) => {
+  const childrenArray = Children.toArray(children);
+
+  return childrenArray.filter((child) => !(isValidElement(child) && types.includes(child.type)));
+};

From ce6d6eb169720dc5d00b8f8ebe756270b449d815 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=ED=97=A4=EC=9D=B8?=
 <157036488+Hain-tain@users.noreply.github.com>
Date: Fri, 11 Oct 2024 14:18:49 +0900
Subject: [PATCH 04/10] =?UTF-8?q?feat(src):=20ContactUs=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=83=9D=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ContactUs/ContactUs.style.ts   | 11 ++++
 .../src/components/ContactUs/ContactUs.tsx    | 66 +++++++++++++++++++
 frontend/src/components/index.ts              |  1 +
 frontend/src/service/validates.ts             | 16 +++++
 4 files changed, 94 insertions(+)
 create mode 100644 frontend/src/components/ContactUs/ContactUs.style.ts
 create mode 100644 frontend/src/components/ContactUs/ContactUs.tsx

diff --git a/frontend/src/components/ContactUs/ContactUs.style.ts b/frontend/src/components/ContactUs/ContactUs.style.ts
new file mode 100644
index 000000000..7a43b0da3
--- /dev/null
+++ b/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: 2rem;
+`;
diff --git a/frontend/src/components/ContactUs/ContactUs.tsx b/frontend/src/components/ContactUs/ContactUs.tsx
new file mode 100644
index 000000000..ba6904715
--- /dev/null
+++ b/frontend/src/components/ContactUs/ContactUs.tsx
@@ -0,0 +1,66 @@
+import { useInput, useInputWithValidate, useToggle } from '@/hooks';
+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 [contents, handleContents] = useInput('');
+  const {
+    value: email,
+    handleChange: handleEmail,
+    errorMessage: emailErrorMessage,
+  } = useInputWithValidate('', validateEmail);
+
+  const isValidContents = contents.trim().length;
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    if (!isValidContents) {
+      return;
+    }
+
+    toggleModal();
+  };
+
+  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 />
+              답변이 필요하시면 아래 이메일 주소를 남겨주세요. 이메일은 오직 답변을 위해서만 사용됩니다 :)
+            </Text.Medium>
+            <Textarea id='voc' variant='outlined'>
+              <Textarea.Label htmlFor={'voc'}>무엇을 도와드릴까요?</Textarea.Label>
+              <Textarea.TextField minRows={5} maxRows={10} value={contents} onChange={handleContents} />
+            </Textarea>
+            <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 ? false : true}>보내기</Button>
+        </Modal.Footer>
+      </Modal>
+    </>
+  );
+};
+
+export default ContactUs;
diff --git a/frontend/src/components/index.ts b/frontend/src/components/index.ts
index 8e4908d8c..7d3500417 100644
--- a/frontend/src/components/index.ts
+++ b/frontend/src/components/index.ts
@@ -26,6 +26,7 @@ export { default as CategoryGuide } from './CategoryGuide/CategoryGuide';
 export { default as NewCategoryInput } from './NewCategoryInput/NewCategoryInput';
 export { default as NoSearchResults } from './NoSearchResults/NoSearchResults';
 export { default as Textarea } from './Textarea/Textarea';
+export { default as ContactUs } from './ContactUs/ContactUs';
 
 // Skeleton UI
 export { default as LoadingBall } from './LoadingBall/LoadingBall';
diff --git a/frontend/src/service/validates.ts b/frontend/src/service/validates.ts
index 53d075378..f1d71ecc7 100644
--- a/frontend/src/service/validates.ts
+++ b/frontend/src/service/validates.ts
@@ -75,3 +75,19 @@ export const validateTagLength = (tag: string) => {
 
   return '';
 };
+
+export const validateEmail = (email: string) => {
+  const emailRegex = /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/;
+
+  const isValid = emailRegex.test(email);
+
+  if (!email.length) {
+    return '';
+  }
+
+  if (!isValid) {
+    return '이메일 형식이 잘못되었습니다.';
+  }
+
+  return '';
+};

From ed8726abfe5cb2c56f119f2bdf014d20850f8076 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=ED=97=A4=EC=9D=B8?=
 <157036488+Hain-tain@users.noreply.github.com>
Date: Fri, 11 Oct 2024 14:19:24 +0900
Subject: [PATCH 05/10] =?UTF-8?q?feat(Modal):=20Modal=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=EC=97=90=20usePressESC,=20useScrollDisable?=
 =?UTF-8?q?=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Modal/Modal.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/frontend/src/components/Modal/Modal.tsx b/frontend/src/components/Modal/Modal.tsx
index 6d6f74f53..db2805232 100644
--- a/frontend/src/components/Modal/Modal.tsx
+++ b/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;
   }

From ab2770068338f58298f6d401b12e0796105890fe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=ED=97=A4=EC=9D=B8?=
 <157036488+Hain-tain@users.noreply.github.com>
Date: Fri, 11 Oct 2024 14:30:06 +0900
Subject: [PATCH 06/10] =?UTF-8?q?feat(components):=20Header=20=EB=B0=8F=20?=
 =?UTF-8?q?Footer=EC=97=90=20ContactUs=20=EC=A0=81=EC=9A=A9,=20Header=20?=
 =?UTF-8?q?=EC=97=90=EC=84=9C=20=ED=98=84=EC=9E=AC=20=EA=B2=BD=EB=A1=9C=20?=
 =?UTF-8?q?=EC=8A=A4=ED=83=80=EC=9D=BC=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Footer/Footer.tsx |  9 +++----
 frontend/src/components/Header/Header.tsx | 29 +++++++++++++++--------
 2 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/frontend/src/components/Footer/Footer.tsx b/frontend/src/components/Footer/Footer.tsx
index 0d275c604..d6959bcd9 100644
--- a/frontend/src/components/Footer/Footer.tsx
+++ b/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:codezap2024@gmail.com'>
-        <Text.Small color='inherit' weight='bold'>
-          문의 :
-        </Text.Small>{' '}
-        <Text.Small color='inherit'>codezap2024@gmail.com</Text.Small>{' '}
+      <S.ContactEmail>
+        <ContactUs />
       </S.ContactEmail>
     </S.FooterContainer>
   );
diff --git a/frontend/src/components/Header/Header.tsx b/frontend/src/components/Header/Header.tsx
index afd2ff704..d35be3475 100644
--- a/frontend/src/components/Header/Header.tsx
+++ b/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();

From b7ff8b92e6a1e3e5f58f5951af13470562acc976 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=ED=97=A4=EC=9D=B8?=
 <157036488+Hain-tain@users.noreply.github.com>
Date: Sat, 12 Oct 2024 00:45:37 +0900
Subject: [PATCH 07/10] =?UTF-8?q?feat(ContactUs):=20=EA=B5=AC=EA=B8=80=20?=
 =?UTF-8?q?=EC=8B=9C=ED=8A=B8=20=EC=97=B0=EB=8F=99=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ContactUs/ContactUs.style.ts   |  2 +-
 .../src/components/ContactUs/ContactUs.tsx    | 59 ++++++++++++++++---
 2 files changed, 53 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/ContactUs/ContactUs.style.ts b/frontend/src/components/ContactUs/ContactUs.style.ts
index 7a43b0da3..bf562eb14 100644
--- a/frontend/src/components/ContactUs/ContactUs.style.ts
+++ b/frontend/src/components/ContactUs/ContactUs.style.ts
@@ -7,5 +7,5 @@ export const ContactUSButton = styled.button`
 export const Form = styled.form`
   display: flex;
   flex-direction: column;
-  gap: 2rem;
+  gap: 1.25rem;
 `;
diff --git a/frontend/src/components/ContactUs/ContactUs.tsx b/frontend/src/components/ContactUs/ContactUs.tsx
index ba6904715..d389b6a4b 100644
--- a/frontend/src/components/ContactUs/ContactUs.tsx
+++ b/frontend/src/components/ContactUs/ContactUs.tsx
@@ -1,4 +1,5 @@
 import { useInput, useInputWithValidate, useToggle } from '@/hooks';
+import { useToast } from '@/hooks/useToast';
 import { validateEmail } from '@/service/validates';
 import { theme } from '@/style/theme';
 
@@ -7,25 +8,64 @@ import * as S from './ContactUs.style';
 
 const ContactUs = () => {
   const [isModalOpen, toggleModal] = useToggle();
-  const [contents, handleContents] = useInput('');
+  const [message, handleMessage, resetMessage] = useInput('');
   const {
     value: email,
     handleChange: handleEmail,
+    resetValue: resetEmail,
     errorMessage: emailErrorMessage,
   } = useInputWithValidate('', validateEmail);
 
-  const isValidContents = contents.trim().length;
+  const { failAlert, successAlert } = useToast();
 
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+  const isValidContents = message.trim().length;
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement> | React.MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
 
-    if (!isValidContents) {
+    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}>
@@ -39,12 +79,15 @@ const ContactUs = () => {
           <S.Form onSubmit={handleSubmit}>
             <Text.Medium as='p' color={theme.color.light.secondary_500}>
               질문/피드백을 편하게 남겨주세요! 여러분의 의견은 더 나은 서비스를 만드는 데 큰 도움이 됩니다. <br />
-              답변이 필요하시면 아래 이메일 주소를 남겨주세요. 이메일은 오직 답변을 위해서만 사용됩니다 :)
+              이미지 등을 함께 보내실 경우 codezap2024@gmail.com으로 직접 이메일을 보내실 수 있습니다.
             </Text.Medium>
             <Textarea id='voc' variant='outlined'>
               <Textarea.Label htmlFor={'voc'}>무엇을 도와드릴까요?</Textarea.Label>
-              <Textarea.TextField minRows={5} maxRows={10} value={contents} onChange={handleContents} />
+              <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} />
@@ -56,7 +99,9 @@ const ContactUs = () => {
           <Button onClick={toggleModal} variant='outlined'>
             닫기
           </Button>
-          <Button disabled={isValidContents ? false : true}>보내기</Button>
+          <Button disabled={isValidContents && !emailErrorMessage ? false : true} onClick={handleSubmit}>
+            보내기
+          </Button>
         </Modal.Footer>
       </Modal>
     </>

From 58d50eefb38c0ceea4a75d819c63f5df57ed0048 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=ED=97=A4=EC=9D=B8?=
 <157036488+Hain-tain@users.noreply.github.com>
Date: Mon, 14 Oct 2024 17:02:59 +0900
Subject: [PATCH 08/10] =?UTF-8?q?refactor(ContactUs):=20isValidContents=20?=
 =?UTF-8?q?=EC=83=81=ED=83=9C=20boolean=20=EC=9C=BC=EB=A1=9C=20=EA=B4=80?=
 =?UTF-8?q?=EB=A6=AC=ED=95=98=EB=8F=84=EB=A1=9D=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/ContactUs/ContactUs.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/ContactUs/ContactUs.tsx b/frontend/src/components/ContactUs/ContactUs.tsx
index d389b6a4b..4a07e051f 100644
--- a/frontend/src/components/ContactUs/ContactUs.tsx
+++ b/frontend/src/components/ContactUs/ContactUs.tsx
@@ -18,7 +18,7 @@ const ContactUs = () => {
 
   const { failAlert, successAlert } = useToast();
 
-  const isValidContents = message.trim().length;
+  const isValidContents = message.trim().length !== 0;
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement> | React.MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();

From 51d15d8af15ef1ed604000d64a6e3974313dde25 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=ED=97=A4=EC=9D=B8?=
 <157036488+Hain-tain@users.noreply.github.com>
Date: Mon, 14 Oct 2024 17:03:29 +0900
Subject: [PATCH 09/10] =?UTF-8?q?design(Header):=20=ED=97=A4=EB=8D=94=20'?=
 =?UTF-8?q?=EC=BD=94=EB=93=9C=EC=9E=BD'=20secondary=5F800=20=EC=9C=BC?=
 =?UTF-8?q?=EB=A1=9C=20=EC=83=89=EC=83=81=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Header/Header.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/Header/Header.tsx b/frontend/src/components/Header/Header.tsx
index d35be3475..fc7cbb0be 100644
--- a/frontend/src/components/Header/Header.tsx
+++ b/frontend/src/components/Header/Header.tsx
@@ -96,7 +96,7 @@ const Logo = () => (
   <Link to={END_POINTS.HOME}>
     <Flex align='center' gap='0.5rem'>
       <CodeZapLogo aria-label='로고 버튼' />
-      <Heading.XSmall color={theme.color.light.primary_500}>코드잽</Heading.XSmall>
+      <Heading.XSmall color={theme.color.light.secondary_800}>코드잽</Heading.XSmall>
     </Flex>
   </Link>
 );

From bb228c6fb905c3c25798fc9b2ac820662c1d6b2d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=ED=97=A4=EC=9D=B8?=
 <157036488+Hain-tain@users.noreply.github.com>
Date: Mon, 14 Oct 2024 17:14:30 +0900
Subject: [PATCH 10/10] =?UTF-8?q?refactor(Header):=20=ED=97=A4=EB=8D=94=20?=
 =?UTF-8?q?'=EC=BD=94=EB=93=9C=EC=9E=BD'=20=EB=A1=9C=EA=B3=A0=EC=97=90?=
 =?UTF-8?q?=EB=8F=84=20=ED=98=84=EC=9E=AC=20=EA=B2=BD=EB=A1=9C=20=EC=8A=A4?=
 =?UTF-8?q?=ED=83=80=EC=9D=BC=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Header/Header.tsx | 23 +++++++++++++++--------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/Header/Header.tsx b/frontend/src/components/Header/Header.tsx
index fc7cbb0be..1b478e32f 100644
--- a/frontend/src/components/Header/Header.tsx
+++ b/frontend/src/components/Header/Header.tsx
@@ -92,14 +92,21 @@ const Header = ({ headerRef }: { headerRef: React.RefObject<HTMLDivElement> }) =
   );
 };
 
-const Logo = () => (
-  <Link to={END_POINTS.HOME}>
-    <Flex align='center' gap='0.5rem'>
-      <CodeZapLogo aria-label='로고 버튼' />
-      <Heading.XSmall color={theme.color.light.secondary_800}>코드잽</Heading.XSmall>
-    </Flex>
-  </Link>
-);
+const Logo = () => {
+  const location = useLocation();
+  const isLandingPage = location.pathname === '/';
+
+  return (
+    <Link to={END_POINTS.HOME}>
+      <Flex align='center' gap='0.5rem'>
+        <CodeZapLogo aria-label='로고 버튼' />
+        <Heading.XSmall color={isLandingPage ? theme.color.light.primary_500 : theme.color.light.secondary_800}>
+          코드잽
+        </Heading.XSmall>
+      </Flex>
+    </Link>
+  );
+};
 
 const NavOption = ({ route, name }: { route: string; name: string }) => {
   const location = useLocation();