diff --git a/.github/workflows/frontend_cd.yml b/.github/workflows/frontend_cd.yml
deleted file mode 100644
index 7d2abc37c..000000000
--- a/.github/workflows/frontend_cd.yml
+++ /dev/null
@@ -1,75 +0,0 @@
-name: Frontend CD
-
-on:
-  push:
-    branches:
-      - main
-      - dev/fe
-
-jobs:
-  build:
-    runs-on:
-      - self-hosted
-      - spring
-      - develop
-    env:
-      frontend-directory: ./frontend
-    steps:
-      - uses: actions/checkout@v4
-
-      - name: Node.js 설정
-        uses: actions/setup-node@v4
-        with:
-          node-version: 20
-
-      - name: 환경 파일 생성
-        run: |
-          if [ "${{ github.ref_name }}" == "main" ]; then
-            echo "REACT_APP_API_URL=${{ secrets.REACT_APP_API_URL }}" > ${{ env.frontend-directory }}/.env.production
-          else
-            echo "REACT_APP_API_URL=${{ secrets.REACT_APP_BETA_API_URL }}" > ${{ env.frontend-directory }}/.env.production
-          fi
-
-          echo "SENTRY_DSN=${{ secrets.SENTRY_DSN }}" >> ${{ env.frontend-directory }}/.env.production
-          echo "SENTRY_AUTH_TOKEN=${{ secrets.SENTRY_AUTH_TOKEN }}" >> ${{ env.frontend-directory }}/.env.sentry-build-plugin
-
-      - name: 환경 파일 권한 설정
-        run: chmod 644 ${{ env.frontend-directory }}/.env.*
-
-      - name: 의존성 설치
-        run: npm install
-        working-directory: ${{ env.frontend-directory }}
-
-      - name: 빌드 실행
-        run: npm run build
-        working-directory: ${{ env.frontend-directory }}
-
-      - name: 아티팩트 업로드
-        uses: actions/upload-artifact@v4
-        with:
-          name: code-zap-front
-          path: ${{ env.frontend-directory }}/dist/**
-
-  deploy:
-    needs: build
-    runs-on:
-      - self-hosted
-      - spring
-      - develop
-    steps:
-      - name: 아티팩트 디렉토리 생성
-        run: |
-          rm -rf ${{ secrets.FRONT_DIRECTORY }}
-          mkdir ${{ secrets.FRONT_DIRECTORY }}
-      - name: 아티팩트 다운로드
-        uses: actions/download-artifact@v4
-        with:
-          name: code-zap-front
-          path: ${{ secrets.FRONT_DIRECTORY }}
-      - name: S3로 이동
-        run: |
-          if [ "${{ github.ref_name }}" == "main" ]; then
-            aws s3 cp --recursive ${{ secrets.FRONT_DIRECTORY }} s3://techcourse-project-2024/code-zap
-          else
-            aws s3 cp --recursive ${{ secrets.FRONT_DIRECTORY }} s3://techcourse-project-2024/code-zap-staging
-          fi
diff --git a/frontend/package.json b/frontend/package.json
index 1f1f8c971..04a0ce40d 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "code-zap",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "",
   "main": "index.js",
   "scripts": {
diff --git a/frontend/src/components/ContactUs/ContactUs.style.ts b/frontend/src/components/ContactUs/ContactUs.style.ts
new file mode 100644
index 000000000..bf562eb14
--- /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: 1.25rem;
+`;
diff --git a/frontend/src/components/ContactUs/ContactUs.tsx b/frontend/src/components/ContactUs/ContactUs.tsx
new file mode 100644
index 000000000..4a07e051f
--- /dev/null
+++ b/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 !== 0;
+
+  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 />
+              이미지 등을 함께 보내실 경우 codezap2024@gmail.com으로 직접 이메일을 보내실 수 있습니다.
+            </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;
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.style.ts b/frontend/src/components/Header/Header.style.ts
index 763bb6175..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;
@@ -99,7 +99,7 @@ export const MobileMenuContainer = styled.div`
   }
 `;
 
-export const HamburgerIconWrapper = styled.div`
+export const HamburgerIconWrapper = styled.button`
   display: none;
 
   @media (max-width: 768px) {
diff --git a/frontend/src/components/Header/Header.tsx b/frontend/src/components/Header/Header.tsx
index 065b14156..1b478e32f 100644
--- a/frontend/src/components/Header/Header.tsx
+++ b/frontend/src/components/Header/Header.tsx
@@ -1,10 +1,10 @@
 import { useEffect } from 'react';
-import { Link, useLocation, useNavigate } from 'react-router-dom';
+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, useToggle } from '@/hooks';
+import { useCustomContext, useCustomNavigate, useToggle } from '@/hooks';
 import { useAuth } from '@/hooks/authentication/useAuth';
 import { usePressESC } from '@/hooks/usePressESC';
 import { useScrollDisable } from '@/hooks/useScrollDisable';
@@ -19,7 +19,7 @@ const Header = ({ headerRef }: { headerRef: React.RefObject<HTMLDivElement> }) =
   const [menuOpen, toggleMenu] = useToggle();
   const { failAlert } = useCustomContext(ToastContext);
   const location = useLocation();
-  const navigate = useNavigate();
+  const navigate = useCustomNavigate();
 
   useScrollDisable(menuOpen);
   usePressESC(menuOpen, toggleMenu);
@@ -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
@@ -64,16 +65,24 @@ const Header = ({ headerRef }: { headerRef: React.RefObject<HTMLDivElement> }) =
               weight='bold'
               hoverStyle='none'
               onClick={handleTemplateUploadButton}
+              aria-description='템플릿 작성 페이지로 이동됩니다.'
             >
-              <PlusIcon aria-label='' />새 템플릿
+              <PlusIcon />새 템플릿
             </S.MobileHiddenButton>
 
             {!isChecking && isLogin ? <LogoutButton /> : <LoginButton />}
           </S.NavContainer>
         </S.HeaderMenu>
         <S.MobileMenuContainer>
-          <Button variant='outlined' size='small' weight='bold' hoverStyle='none' onClick={handleTemplateUploadButton}>
-            <PlusIcon aria-label='' />새 템플릿
+          <Button
+            variant='outlined'
+            size='small'
+            weight='bold'
+            hoverStyle='none'
+            onClick={handleTemplateUploadButton}
+            aria-description='템플릿 작성 페이지로 이동됩니다.'
+          >
+            <PlusIcon />새 템플릿
           </Button>
           <HeaderMenuButton menuOpen={menuOpen} toggleMenu={toggleMenu} />
         </S.MobileMenuContainer>
@@ -83,24 +92,39 @@ 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.primary_500}>코드잽</Heading.XSmall>
-    </Flex>
-  </Link>
-);
+const Logo = () => {
+  const location = useLocation();
+  const isLandingPage = location.pathname === '/';
 
-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>
-);
+  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();
+  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();
@@ -125,7 +149,7 @@ const LoginButton = () => (
 );
 
 const HeaderMenuButton = ({ menuOpen, toggleMenu }: { menuOpen: boolean; toggleMenu: () => void }) => (
-  <S.HamburgerIconWrapper>
+  <S.HamburgerIconWrapper aria-label='메뉴'>
     <HamburgerIcon menuOpen={menuOpen} onClick={toggleMenu} />
   </S.HamburgerIconWrapper>
 );
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/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;
   }
diff --git a/frontend/src/components/NonmemberAlerter/NonmemberAlerter.tsx b/frontend/src/components/NonmemberAlerter/NonmemberAlerter.tsx
index 15aba2677..6aa154551 100644
--- a/frontend/src/components/NonmemberAlerter/NonmemberAlerter.tsx
+++ b/frontend/src/components/NonmemberAlerter/NonmemberAlerter.tsx
@@ -1,6 +1,5 @@
-import { useNavigate } from 'react-router-dom';
-
 import { Button, Flex, Modal, Text } from '@/components';
+import { useCustomNavigate } from '@/hooks';
 import { END_POINTS } from '@/routes';
 import { theme } from '@/style/theme';
 
@@ -11,7 +10,7 @@ interface Props {
 }
 
 const NonmemberAlerter = ({ isOpen, content, toggleModal }: Props) => {
-  const navigate = useNavigate();
+  const navigate = useCustomNavigate();
 
   const handleLoginButtonClick = () => {
     navigate(END_POINTS.LOGIN);
diff --git a/frontend/src/components/ScreenReaderOnly/ScreenReaderOnly.tsx b/frontend/src/components/ScreenReaderOnly/ScreenReaderOnly.tsx
new file mode 100644
index 000000000..3a49d12f3
--- /dev/null
+++ b/frontend/src/components/ScreenReaderOnly/ScreenReaderOnly.tsx
@@ -0,0 +1,21 @@
+const ScreenReaderOnly = () => (
+  <div
+    id='screen-reader'
+    aria-live='polite'
+    aria-hidden='true'
+    style={{
+      position: 'absolute',
+      width: '1px',
+      height: '1px',
+      margin: '-1px',
+      padding: '0',
+      border: '0',
+      overflow: 'hidden',
+      clip: 'rect(0, 0, 0, 0)',
+      whiteSpace: 'nowrap',
+      wordWrap: 'normal',
+    }}
+  />
+);
+
+export default ScreenReaderOnly;
diff --git a/frontend/src/components/TagInput/TagInput.tsx b/frontend/src/components/TagInput/TagInput.tsx
index 88440ec09..ce131eaa5 100644
--- a/frontend/src/components/TagInput/TagInput.tsx
+++ b/frontend/src/components/TagInput/TagInput.tsx
@@ -2,7 +2,7 @@ import { ChangeEvent, Dispatch, KeyboardEvent, SetStateAction } from 'react';
 
 import { Flex, Input, TagButton, Text } from '@/components';
 import { ToastContext } from '@/contexts';
-import { useCustomContext } from '@/hooks';
+import { useCustomContext, useScreenReader } from '@/hooks';
 import { validateTagLength } from '@/service/validates';
 import { theme } from '@/style/theme';
 
@@ -16,6 +16,7 @@ interface Props {
 
 const TagInput = ({ value, handleValue, resetValue, tags, setTags }: Props) => {
   const { failAlert } = useCustomContext(ToastContext);
+  const { updateScreenReaderMessage } = useScreenReader();
 
   const handleSpaceBarAndEnterKeydown = (e: KeyboardEvent<HTMLInputElement>) => {
     if (e.key === ' ' || e.key === 'Enter') {
@@ -26,15 +27,12 @@ const TagInput = ({ value, handleValue, resetValue, tags, setTags }: Props) => {
   };
 
   const addTag = () => {
-    if (value === '') {
-      return;
-    }
-
-    if (tags.includes(value)) {
+    if (value === '' || tags.includes(value)) {
       return;
     }
 
     setTags((prev) => [...prev, value]);
+    updateScreenReaderMessage(`${value} 태그 등록`);
   };
 
   const handleTagInput = (e: ChangeEvent<HTMLInputElement>) => {
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 34e350865..7d3500417 100644
--- a/frontend/src/components/index.ts
+++ b/frontend/src/components/index.ts
@@ -25,7 +25,12 @@ 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';
+export { default as ContactUs } from './ContactUs/ContactUs';
 
 // Skeleton UI
 export { default as LoadingBall } from './LoadingBall/LoadingBall';
 export { default as LoadingFallback } from './LoadingFallback/LoadingFallback';
+
+// ScreenReader
+export { default as ScreenReaderOnly } from './ScreenReaderOnly/ScreenReaderOnly';
diff --git a/frontend/src/hooks/index.ts b/frontend/src/hooks/index.ts
index ed57bfe1f..108c02ca0 100644
--- a/frontend/src/hooks/index.ts
+++ b/frontend/src/hooks/index.ts
@@ -4,9 +4,11 @@ export { useDropdown } from './useDropdown';
 export { useHeaderHeight } from './useHeaderHeight';
 export { useInput } from './useInput';
 export { useInputWithValidate } from './useInputWithValidate';
+export { useScreenReader } from './useScreenReader';
 export { useScrollToTargetElement } from './useScrollToTargetElement';
 export { useWindowWidth } from './useWindowWidth';
 export { useToggle } from './useToggle';
 export { useLoaderDelay } from './useLoaderDelay';
 export { useNoSpaceInput } from './useNoSpaceInput';
 export { useSelectList } from './useSelectList';
+export { useCustomNavigate } from './useCustomNavigate';
diff --git a/frontend/src/hooks/useCustomNavigate.ts b/frontend/src/hooks/useCustomNavigate.ts
new file mode 100644
index 000000000..e0932a96e
--- /dev/null
+++ b/frontend/src/hooks/useCustomNavigate.ts
@@ -0,0 +1,31 @@
+import { useNavigate, useLocation, NavigateOptions, To } from 'react-router-dom';
+/**
+ * useCustomNavigate - 현재 위치와 대상 위치를 비교하여 불필요한 네비게이션을 방지합니다.
+ *
+ * @returns {Function} 커스텀 네비게이트 함수
+ *   @param {To | number} to - 네비게이션 대상. 문자열 경로, 위치 객체 또는 히스토리 스택의 상대적 위치를 나타내는 숫자일 수 있습니다.
+ *   @param {NavigateOptions} [options] - 네비게이션 옵션 (선택적)
+ *
+ */
+export const useCustomNavigate = () => {
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  return (to: To | number, options?: NavigateOptions) => {
+    if (typeof to === 'number') {
+      navigate(to);
+
+      return;
+    }
+
+    if (typeof to === 'string' && to !== location.pathname) {
+      navigate(to, options);
+
+      return;
+    }
+
+    if (typeof to === 'object' && to.pathname !== location.pathname) {
+      navigate(to, options);
+    }
+  };
+};
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('');
diff --git a/frontend/src/hooks/useScreenReader.ts b/frontend/src/hooks/useScreenReader.ts
new file mode 100644
index 000000000..fc8412e9a
--- /dev/null
+++ b/frontend/src/hooks/useScreenReader.ts
@@ -0,0 +1,19 @@
+import { useCallback } from 'react';
+
+export const useScreenReader = () => {
+  const updateScreenReaderMessage = useCallback((message: string) => {
+    const element = document.getElementById('screen-reader');
+
+    if (element) {
+      element.setAttribute('aria-hidden', 'false');
+      element.textContent = message;
+
+      setTimeout(() => {
+        element.setAttribute('aria-hidden', 'true');
+        element.textContent = '';
+      });
+    }
+  }, []);
+
+  return { updateScreenReaderMessage };
+};
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
index 214fca69f..d14780f80 100644
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@@ -7,6 +7,7 @@ import { RouterProvider } from 'react-router-dom';
 
 import { AuthProvider, HeaderProvider, ToastProvider } from '@/contexts';
 
+import { ScreenReaderOnly } from './components/index';
 import router from './routes/router';
 import GlobalStyles from './style/GlobalStyles';
 import { theme } from './style/theme';
@@ -49,6 +50,7 @@ enableMocking().then(() => {
               <HeaderProvider>
                 <GlobalStyles />
                 <RouterProvider router={router} />
+                <ScreenReaderOnly />
               </HeaderProvider>
             </ToastProvider>
           </AuthProvider>
diff --git a/frontend/src/pages/LoginPage/LoginPage.tsx b/frontend/src/pages/LoginPage/LoginPage.tsx
index b0a2b2daf..846824cb3 100644
--- a/frontend/src/pages/LoginPage/LoginPage.tsx
+++ b/frontend/src/pages/LoginPage/LoginPage.tsx
@@ -29,7 +29,7 @@ const LoginPage = () => {
               <Input.Label>아이디 (닉네임)</Input.Label>
               <Input.TextField
                 type='text'
-                placeholder='아이디를 입력해주세요'
+                placeholder='아이디 입력. 1자에서 255자의 올바른 문자를 입력해주세요'
                 placeholderColor='transparent'
                 value={name}
                 onChange={handleNameChange}
@@ -42,7 +42,7 @@ const LoginPage = () => {
               <Input.Label>비밀번호</Input.Label>
               <Input.TextField
                 type={showPassword ? 'text' : 'password'}
-                placeholder='비밀번호를 입력해주세요'
+                placeholder='비밀번호 입력. 영문자, 숫자를 포함한 8자에서 16자의 비밀번호를 입력해주세요.'
                 placeholderColor='transparent'
                 value={password}
                 onChange={handlePasswordChange}
diff --git a/frontend/src/pages/MyTemplatesPage/MyTemplatePage.tsx b/frontend/src/pages/MyTemplatesPage/MyTemplatePage.tsx
index 1509ccb6d..f067383fb 100644
--- a/frontend/src/pages/MyTemplatesPage/MyTemplatePage.tsx
+++ b/frontend/src/pages/MyTemplatesPage/MyTemplatePage.tsx
@@ -1,10 +1,9 @@
 import { useState, useCallback } from 'react';
-import { useNavigate } from 'react-router-dom';
 
 import { DEFAULT_SORTING_OPTION, SORTING_OPTIONS } from '@/api';
 import { ArrowUpIcon, PlusIcon, SearchIcon } from '@/assets/images';
 import { Flex, Heading, Input, PagingButtons, Dropdown, Button, Modal, Text, NoSearchResults } from '@/components';
-import { useWindowWidth, useDebounce, useToggle, useDropdown, useInput } from '@/hooks';
+import { useWindowWidth, useDebounce, useToggle, useDropdown, useInput, useCustomNavigate } from '@/hooks';
 import { useAuth } from '@/hooks/authentication';
 import { useTemplateDeleteMutation, useTemplateCategoryTagQueries } from '@/queries/templates';
 import { END_POINTS } from '@/routes';
@@ -198,7 +197,7 @@ const TopBanner = ({ name }: TopBannerProps) => (
 );
 
 const NewTemplateButton = () => {
-  const navigate = useNavigate();
+  const navigate = useCustomNavigate();
 
   return (
     <S.NewTemplateButton onClick={() => navigate(END_POINTS.TEMPLATES_UPLOAD)}>
diff --git a/frontend/src/pages/NotFoundPage/NotFoundPage.tsx b/frontend/src/pages/NotFoundPage/NotFoundPage.tsx
index 70e67331a..64c7d5ddf 100644
--- a/frontend/src/pages/NotFoundPage/NotFoundPage.tsx
+++ b/frontend/src/pages/NotFoundPage/NotFoundPage.tsx
@@ -1,7 +1,6 @@
-import { useNavigate } from 'react-router-dom';
-
 import { TigerLogo } from '@/assets/images';
 import { Button, Flex, Heading, Text } from '@/components';
+import { useCustomNavigate } from '@/hooks';
 import { theme } from '@/style/theme';
 
 interface props {
@@ -9,7 +8,7 @@ interface props {
 }
 
 const NotFoundPage = ({ resetError }: props) => {
-  const navigate = useNavigate();
+  const navigate = useCustomNavigate();
 
   return (
     <Flex direction='column' gap='3rem' margin='2rem 0 0 0' justify='center' align='center'>
diff --git a/frontend/src/pages/SignupPage/hooks/useSignupForm.ts b/frontend/src/pages/SignupPage/hooks/useSignupForm.ts
index d3f931b62..9c92beee1 100644
--- a/frontend/src/pages/SignupPage/hooks/useSignupForm.ts
+++ b/frontend/src/pages/SignupPage/hooks/useSignupForm.ts
@@ -1,12 +1,11 @@
 import { FormEvent, useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
 
-import { useInputWithValidate } from '@/hooks';
+import { useCustomNavigate, useInputWithValidate } from '@/hooks';
 import { useCheckNameQuery, useSignupMutation } from '@/queries/authentication';
 import { validateName, validatePassword, validateConfirmPassword } from '@/service';
 
 export const useSignupForm = () => {
-  const navigate = useNavigate();
+  const navigate = useCustomNavigate();
   const { mutateAsync: postSignup } = useSignupMutation();
 
   const {
diff --git a/frontend/src/pages/TemplatePage/hooks/useTemplate.ts b/frontend/src/pages/TemplatePage/hooks/useTemplate.ts
index 5e41c37a6..2e1ba203d 100644
--- a/frontend/src/pages/TemplatePage/hooks/useTemplate.ts
+++ b/frontend/src/pages/TemplatePage/hooks/useTemplate.ts
@@ -1,12 +1,11 @@
 import { useEffect, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
 
-import { useSelectList } from '@/hooks';
+import { useCustomNavigate, useSelectList } from '@/hooks';
 import { useTemplateDeleteMutation, useTemplateQuery } from '@/queries/templates';
 import { END_POINTS } from '@/routes';
 
 export const useTemplate = (id: number) => {
-  const navigate = useNavigate();
+  const navigate = useCustomNavigate();
 
   const { data: template } = useTemplateQuery(Number(id));
   const { mutateAsync: deleteTemplate } = useTemplateDeleteMutation([Number(id)]);
diff --git a/frontend/src/pages/TemplateUploadPage/TemplateUploadPage.tsx b/frontend/src/pages/TemplateUploadPage/TemplateUploadPage.tsx
index e1cd9d36c..0ef7c03dc 100644
--- a/frontend/src/pages/TemplateUploadPage/TemplateUploadPage.tsx
+++ b/frontend/src/pages/TemplateUploadPage/TemplateUploadPage.tsx
@@ -1,8 +1,6 @@
-import { useNavigate } from 'react-router-dom';
-
 import { PlusIcon } from '@/assets/images';
 import { Button, CategoryDropdown, Input, SelectList, SourceCodeEditor, TagInput, Text } from '@/components';
-import { useInput, useSelectList } from '@/hooks';
+import { useCustomNavigate, useInput, useSelectList } from '@/hooks';
 import { useCategory } from '@/hooks/category';
 import { useSourceCode, useTag } from '@/hooks/template';
 import { useToast } from '@/hooks/useToast';
@@ -14,7 +12,7 @@ import { TemplateUploadRequest } from '@/types';
 import * as S from './TemplateUploadPage.style';
 
 const TemplateUploadPage = () => {
-  const navigate = useNavigate();
+  const navigate = useCustomNavigate();
   const { failAlert } = useToast();
 
   const categoryProps = useCategory();
diff --git a/frontend/src/queries/authentication/useLoginMutation.ts b/frontend/src/queries/authentication/useLoginMutation.ts
index e2c131266..e3c428188 100644
--- a/frontend/src/queries/authentication/useLoginMutation.ts
+++ b/frontend/src/queries/authentication/useLoginMutation.ts
@@ -1,9 +1,8 @@
 import { useMutation } from '@tanstack/react-query';
-import { useNavigate } from 'react-router-dom';
 
 import { postLogin } from '@/api/authentication';
 import { ToastContext } from '@/contexts';
-import { useCustomContext } from '@/hooks';
+import { useCustomContext, useCustomNavigate } from '@/hooks';
 import { useAuth } from '@/hooks/authentication/useAuth';
 import { END_POINTS } from '@/routes';
 import { LoginRequest } from '@/types';
@@ -11,7 +10,7 @@ import { LoginRequest } from '@/types';
 export const useLoginMutation = () => {
   const { handleLoginState, handleMemberInfo } = useAuth();
   const { failAlert, successAlert } = useCustomContext(ToastContext);
-  const navigate = useNavigate();
+  const navigate = useCustomNavigate();
 
   return useMutation({
     mutationFn: (loginInfo: LoginRequest) => postLogin(loginInfo),
diff --git a/frontend/src/queries/authentication/useSignupMutation.ts b/frontend/src/queries/authentication/useSignupMutation.ts
index 3741694ec..a4e15c4c2 100644
--- a/frontend/src/queries/authentication/useSignupMutation.ts
+++ b/frontend/src/queries/authentication/useSignupMutation.ts
@@ -1,15 +1,14 @@
 import { useMutation } from '@tanstack/react-query';
-import { useNavigate } from 'react-router-dom';
 
 import { postSignup } from '@/api/authentication';
 import { ToastContext } from '@/contexts';
-import { useCustomContext } from '@/hooks';
+import { useCustomContext, useCustomNavigate } from '@/hooks';
 import { END_POINTS } from '@/routes';
 import { SignupRequest } from '@/types';
 
 export const useSignupMutation = () => {
   const { failAlert, successAlert } = useCustomContext(ToastContext);
-  const navigate = useNavigate();
+  const navigate = useCustomNavigate();
 
   return useMutation({
     mutationFn: (signupInfo: SignupRequest) => postSignup(signupInfo),
diff --git a/frontend/src/routes/RouteGuard.tsx b/frontend/src/routes/RouteGuard.tsx
index f198daa6e..1de634701 100644
--- a/frontend/src/routes/RouteGuard.tsx
+++ b/frontend/src/routes/RouteGuard.tsx
@@ -1,8 +1,7 @@
 import { ReactElement, useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
 
 import { ToastContext } from '@/contexts';
-import { useCustomContext } from '@/hooks';
+import { useCustomContext, useCustomNavigate } from '@/hooks';
 import { useAuth } from '@/hooks/authentication';
 
 type RouteGuardProps = {
@@ -14,7 +13,7 @@ type RouteGuardProps = {
 const RouteGuard = ({ children, isLoginRequired, redirectTo }: RouteGuardProps) => {
   const { isLogin, isChecking } = useAuth();
   const { infoAlert } = useCustomContext(ToastContext);
-  const navigate = useNavigate();
+  const navigate = useCustomNavigate();
 
   useEffect(() => {
     if (isLoginRequired && !isChecking && !isLogin) {
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 '';
+};
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)));
+};