diff --git a/README.md b/README.md
index 996b615a..0dc5703b 100644
--- a/README.md
+++ b/README.md
@@ -20,8 +20,8 @@
 ## 🗝 링크 안내
   
 <p>  
-  <a href="https://www.notion.so/127b1b2b649180e88f70d6a4648924a0?pvs=4">팀 노션</a>   |   
   <a href="https://ddara-docs.vercel.app/">팀 위키</a> |
+  <a href="https://www.notion.so/127b1b2b649180e88f70d6a4648924a0?pvs=4">팀 노션</a>   |   
   <a href="https://www.figma.com/design/r9nl4Jcz9VXIMbrpf50wY6/PickMeUp?node-id=90-1897">기획서</a>   |   
   <a href="https://www.figma.com/design/r9nl4Jcz9VXIMbrpf50wY6/PickMeUp?node-id=87-929">디자인</a>
 <!--   <br />
diff --git a/frontend/src/component/authmodal/AuthModal.tsx b/frontend/src/component/authmodal/AuthModal.tsx
new file mode 100644
index 00000000..a13689a8
--- /dev/null
+++ b/frontend/src/component/authmodal/AuthModal.tsx
@@ -0,0 +1,139 @@
+import React, { useState } from 'react';
+import { Modal } from '@/component/common/modal/Modal';
+
+interface IAuthModalProps {
+  /** 모달이 열려 있는지 여부를 나타냅니다. */
+  isOpen: boolean;
+  /** 모달을 닫는 함수입니다. */
+  onClose: () => void;
+  /** 모달의 타입을 결정하는 값으로, 'login' 또는 'register'를 가집니다. */
+  type: 'login' | 'register';
+}
+
+export const AuthModal = (props: IAuthModalProps) => {
+  const [loginData, setLoginData] = useState({
+    id: '',
+    pw: '',
+  });
+
+  const [registerData, setRegisterData] = useState({
+    id: '',
+    email: '',
+    name: '',
+    pw: '',
+    confirmPw: '',
+  });
+
+  const [modalType, setModalType] = useState<'login' | 'register'>(props.type);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+
+    if (modalType === 'login') {
+      setLoginData(prevState => ({
+        ...prevState,
+        [name]: value,
+      }));
+    } else {
+      setRegisterData(prevState => ({
+        ...prevState,
+        [name]: value,
+      }));
+    }
+  };
+
+  const handleLoginClick = () => {
+    console.log('로그인 데이터:', loginData);
+  };
+
+  const handleSignUpClick = () => {
+    if (registerData.pw !== registerData.confirmPw) {
+      alert('비밀번호가 일치하지 않습니다.');
+      return;
+    }
+    console.log('회원가입 데이터:', registerData);
+  };
+
+  const switchToRegister = () => {
+    setModalType('register');
+  };
+
+  const switchToLogin = () => {
+    setModalType('login');
+  };
+
+  return (
+    <Modal isOpen={props.isOpen} onClose={props.onClose}>
+      {modalType === 'login' ? (
+        <>
+          <Modal.Header content="Log In" onClose={props.onClose} />
+          <Modal.Input
+            title="ID"
+            name="id"
+            placeholder="ID"
+            value={loginData.id}
+            onChange={handleChange}
+          />
+          <Modal.Input
+            title="PW"
+            name="pw"
+            placeholder="PW"
+            value={loginData.pw}
+            onChange={handleChange}
+          />
+          <Modal.Footer
+            text="로그인"
+            onClick={handleLoginClick}
+            text2="회원가입"
+            onClick2={switchToRegister}
+          />
+        </>
+      ) : (
+        <>
+          <Modal.Header content="Sign Up" onClose={props.onClose} />
+          <Modal.Input
+            title="ID"
+            name="id"
+            placeholder="사용할 ID를 입력해주세요."
+            value={registerData.id}
+            onChange={handleChange}
+          />
+          <Modal.Input
+            title="Email"
+            name="email"
+            placeholder="Email 주소를 입력해주세요."
+            value={registerData.email}
+            onChange={handleChange}
+          />
+          <Modal.Input
+            title="Name"
+            name="name"
+            placeholder="이름을 입력해주세요."
+            value={registerData.name}
+            onChange={handleChange}
+          />
+          <Modal.Input
+            title="PW"
+            name="pw"
+            placeholder="사용할 비밀번호를 입력해주세요."
+            value={registerData.pw}
+            onChange={handleChange}
+          />
+          <Modal.Input
+            title=""
+            name="confirmPw"
+            placeholder="비밀번호를 한 번 더 입력해주세요."
+            value={registerData.confirmPw}
+            onChange={handleChange}
+          />
+          <Modal.Footer
+            text="회원가입"
+            onClick={handleSignUpClick}
+            text2="로그인"
+            onClick2={switchToLogin}
+          />
+        </>
+      )}
+    </Modal>
+  );
+};
diff --git a/frontend/src/component/common/dropdown/Dropdown.tsx b/frontend/src/component/common/dropdown/Dropdown.tsx
index ec3933fd..0d8e1acf 100644
--- a/frontend/src/component/common/dropdown/Dropdown.tsx
+++ b/frontend/src/component/common/dropdown/Dropdown.tsx
@@ -1,31 +1,42 @@
-import React, { createContext, ReactNode, useMemo, useState } from 'react';
+import { ReactNode } from 'react';
 import { DropdownTrigger } from '@/component/common/dropdown/DropdownTrigger.tsx';
 import { DropdownItem } from '@/component/common/dropdown/DropdownItem.tsx';
 import { DropdownMenu } from '@/component/common/dropdown/DropdownMenu.tsx';
+import { ToggleProvider } from '@/component/common/dropdown/DropdownContext.tsx';
 
 interface IDropdownProps {
+  /** 드롭다운 컴포넌트 내부에 들어갈 컨텐츠 */
   children: ReactNode;
 }
 
-export interface IToggleContext {
-  isOpen: boolean;
-  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
-}
-
-export const ToggleContext = createContext<IToggleContext>({
-  isOpen: false,
-  setIsOpen: () => {},
-});
+/**
+ * 드롭다운 컴포넌트입니다.
+ *
+ *  @param {ReactNode} children - 드롭다운 컴포넌트 내부에 들어갈 컨텐츠
+ *  @return {JSX.Element} 드롭다운 컴포넌트
+ *
+ *  @remarks
+ *  - 드롭다운 컴포넌트는 드롭다운 메뉴를 제공합니다.
+ *
+ * @example
+ *  ```tsx
+ *  <Dropdown>
+ *    <Dropdown.Trigger>
+ *      <MdMenu className="h-6 w-6" />
+ *      <span>메뉴</span>
+ *    </Dropdown.Trigger>
+ *    <Dropdown.Menu>
+ *      <Dropdown.Item>메뉴 항목 1</Dropdown.Item>
+ *      <Dropdown.Item>메뉴 항목 2</Dropdown.Item>
+ *    </Dropdown.Menu>
+ *  </Dropdown>
+ *  ```
+ */
 
-// Todo : 드랍다운 외부에서 클릭시 창 닫히게 설정
 export const Dropdown = (props: IDropdownProps) => {
-  const [isOpen, setIsOpen] = useState(false);
-
-  const toggleContextValue = useMemo(() => ({ isOpen, setIsOpen }), [isOpen, setIsOpen]);
-
   return (
     <aside className="relative flex w-fit flex-col">
-      <ToggleContext.Provider value={toggleContextValue}>{props.children}</ToggleContext.Provider>
+      <ToggleProvider>{props.children}</ToggleProvider>
     </aside>
   );
 };
diff --git a/frontend/src/component/common/dropdown/DropdownContext.tsx b/frontend/src/component/common/dropdown/DropdownContext.tsx
new file mode 100644
index 00000000..61b865ac
--- /dev/null
+++ b/frontend/src/component/common/dropdown/DropdownContext.tsx
@@ -0,0 +1,25 @@
+import { createContext, ReactNode, useMemo, useState } from 'react';
+
+export interface IToggleContext {
+  isOpen: boolean;
+  toggle: () => void;
+}
+
+interface IToggleProviderProps {
+  children: ReactNode;
+}
+
+export const ToggleContext = createContext<IToggleContext>({
+  isOpen: false,
+  toggle: () => {},
+});
+
+export const ToggleProvider = (props: IToggleProviderProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const toggle = () => setIsOpen(prevIsOpen => !prevIsOpen);
+  const toggleContextValue = useMemo(() => ({ isOpen, toggle }), [isOpen]);
+
+  return (
+    <ToggleContext.Provider value={toggleContextValue}>{props.children}</ToggleContext.Provider>
+  );
+};
diff --git a/frontend/src/component/common/dropdown/DropdownItem.tsx b/frontend/src/component/common/dropdown/DropdownItem.tsx
index 472e372c..03e732d7 100644
--- a/frontend/src/component/common/dropdown/DropdownItem.tsx
+++ b/frontend/src/component/common/dropdown/DropdownItem.tsx
@@ -1,14 +1,34 @@
 import { ReactNode } from 'react';
 
 interface IDropdownItemProps {
+  /** 드롭다운 아이템 내용 */
   children: ReactNode;
+  /** 버튼 클릭 시 실행할 함수 */
   onClick?: React.MouseEventHandler<HTMLButtonElement>;
 }
 
+/**
+ * 드롭다운 메뉴의 아이템 컴포넌트입니다.
+ *
+ * @param {ReactNode} children - 드롭다운 아이템 내용
+ * @param {React.MouseEventHandler<HTMLButtonElement>} onClick - 버튼 클릭 시 실행할 함수
+ * @return {JSX.Element} 드롭다운 아이템 컴포넌트
+ *
+ * @remarks
+ * - 드롭다운 아이템 컴포넌트는 드롭다운 메뉴 내부에서 사용되어야 합니다.
+ * - 드롭다운 아이템 컴포넌트는 드롭다운 메뉴의 아이템 역할을 수행합니다.
+ * - 드롭다운 아이템 컴포넌트는 버튼 역할을 수행합니다.
+ * - 드롭다운 아이템 컴포넌트는 클릭 시 onClick 함수를 실행합니다.
+ *
+ * @example
+ * ```tsx
+ * <Dropdown.Item onClick={handleOnClick}>아이템</Dropdown.Item>
+ * ```
+ */
+
 export const DropdownItem = (props: IDropdownItemProps) => {
-  // undefined는 react에서 랜더링 하지 않음
   return (
-    <li className="px-3 py-1.5 text-base">
+    <li className="list-none px-3 py-1.5 text-base">
       <button
         type="button"
         className="flex w-full items-center justify-between whitespace-nowrap bg-transparent"
diff --git a/frontend/src/component/common/dropdown/DropdownMenu.tsx b/frontend/src/component/common/dropdown/DropdownMenu.tsx
index 0797e42c..c49eab34 100644
--- a/frontend/src/component/common/dropdown/DropdownMenu.tsx
+++ b/frontend/src/component/common/dropdown/DropdownMenu.tsx
@@ -1,13 +1,33 @@
 import { ReactNode, useContext, useRef, useEffect } from 'react';
 import classNames from 'classnames';
-import { ToggleContext } from '@/component/common/dropdown/Dropdown.tsx';
+import { ToggleContext } from '@/component/common/dropdown/DropdownContext';
 
 interface IDropdownMenuProps {
+  /** 드롭다운 메뉴가 열려있는지 여부 */
   children: ReactNode | ReactNode[];
 }
 
+/**
+ * 드롭다운 메뉴 컴포넌트입니다.
+ *
+ *  @param {ReactNode} children - 드롭다운 메뉴에 들어갈 컨텐츠
+ *  @return {JSX.Element} 드롭다운 메뉴 컴포넌트
+ *
+ *  @remarks
+ *  - 드롭다운 메뉴 컴포넌트는 드롭다운 컴포넌트 내부에서 사용되어야 합니다.
+ *  - 드롭다운 메뉴 컴포넌트는 드롭다운 메뉴 역할을 수행합니다.
+ *
+ * @example
+ *  ```tsx
+ *  <Dropdown.Menu>
+ *    <Dropdown.Item>메뉴 항목 1</Dropdown.Item>
+ *    <Dropdown.Item>메뉴 항목 2</Dropdown.Item>
+ *  </Dropdown.Menu>
+ *  ```
+ */
+
 export const DropdownMenu = (props: IDropdownMenuProps) => {
-  const { isOpen, setIsOpen } = useContext(ToggleContext);
+  const { isOpen, toggle } = useContext(ToggleContext);
   const ref = useRef<HTMLUListElement | null>(null);
 
   const handleOutSideClick = (event: MouseEvent) => {
@@ -23,7 +43,7 @@ export const DropdownMenu = (props: IDropdownMenuProps) => {
       !ref.current.contains(target) &&
       target.dataset.component !== 'DropdownTrigger'
     ) {
-      setIsOpen(false);
+      toggle();
     }
   };
 
@@ -55,6 +75,7 @@ export const DropdownMenu = (props: IDropdownMenuProps) => {
           'shadow-2xl',
           'w-fit',
           'bg-white',
+          'list-none',
         )}
       >
         {props.children}
diff --git a/frontend/src/component/common/dropdown/DropdownTrigger.tsx b/frontend/src/component/common/dropdown/DropdownTrigger.tsx
index 75e2d2cc..cb2cf2cc 100644
--- a/frontend/src/component/common/dropdown/DropdownTrigger.tsx
+++ b/frontend/src/component/common/dropdown/DropdownTrigger.tsx
@@ -1,16 +1,37 @@
 import { ReactNode, useContext } from 'react';
 import classNames from 'classnames';
-import { ToggleContext } from '@/component/common/dropdown/Dropdown.tsx';
+import { ToggleContext } from '@/component/common/dropdown/DropdownContext';
 
 interface IDropdownTriggerProps {
+  /** 버튼 내부에 들어갈 컨텐츠 */
   children: ReactNode;
 }
 
+/**
+ * 드롭다운에서 메뉴를 열고 닫는 트리거 컴포넌트입니다.
+ *
+ *  @param {ReactNode} children - 버튼 내부에 들어갈 컨텐츠
+ *  @return {JSX.Element} 드롭다운 트리거 컴포넌트
+ *
+ *  @remarks
+ *  - 드롭다운 트리거 컴포넌트를 사용하여 드롭다운 메뉴를 열고 닫을 수 있습니다.
+ *  - 드롭다운 트리거 컴포넌트는 드롭다운 컴포넌트 내부에서 사용되어야 합니다.
+ *  - 드롭다운 트리거 컴포넌트는 버튼 역할을 수행합니다.
+ *
+ * @example
+ *  ```tsx
+ *  <Dropdown.Trigger>
+ *    <MdMenu className="h-6 w-6" />
+ *    <span>메뉴</span>
+ *  </Dropdown.Trigger>
+ *  ```
+ */
+
 export const DropdownTrigger = (props: IDropdownTriggerProps) => {
-  const { setIsOpen } = useContext(ToggleContext);
+  const { toggle } = useContext(ToggleContext);
 
   const handleOnClick = () => {
-    setIsOpen(prevIsOpen => !prevIsOpen);
+    toggle();
   };
 
   return (
diff --git a/frontend/src/component/common/modal/Modal.tsx b/frontend/src/component/common/modal/Modal.tsx
new file mode 100644
index 00000000..f0c3be5f
--- /dev/null
+++ b/frontend/src/component/common/modal/Modal.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { ModalHeader } from '@/component/common/modal/ModalHeader';
+import { ModalInput } from '@/component/common/modal/ModalInput';
+import { ModalFooter } from '@/component/common/modal/ModalFooter';
+
+interface IModalProps {
+  /** 모달이 열려 있는지 여부를 나타냅니다. */
+  isOpen: boolean;
+  /** 모달 내에서 렌더링할 자식 요소들입니다. */
+  children: React.ReactNode;
+}
+
+export const Modal = (props: IModalProps) => {
+  if (!props.isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-20">
+      <div className="relative w-[22rem] max-w-lg rounded-2xl bg-white px-6 shadow-lg">
+        {props.children}
+      </div>
+    </div>
+  );
+};
+
+Modal.Header = ModalHeader;
+Modal.Footer = ModalFooter;
+Modal.Input = ModalInput;
diff --git a/frontend/src/component/common/modal/ModalFooter.tsx b/frontend/src/component/common/modal/ModalFooter.tsx
new file mode 100644
index 00000000..8612db9a
--- /dev/null
+++ b/frontend/src/component/common/modal/ModalFooter.tsx
@@ -0,0 +1,29 @@
+interface IModalFooterProps {
+  /** 메인 버튼의 텍스트입니다. */
+  text: string;
+  /** 메인 버튼 클릭 시 호출되는 함수입니다. */
+  onClick?: () => void;
+  /** 보조 버튼의 텍스트입니다 (선택 사항) */
+  text2?: string;
+  /** 보조 버튼 클릭 시 호출되는 함수입니다 (선택 사항) */
+  onClick2?: () => void;
+}
+
+export const ModalFooter = (props: IModalFooterProps) => (
+  <div className="flex w-full flex-row-reverse items-center justify-start gap-5 rounded-lg bg-white py-4 shadow-sm">
+    <button
+      type="button"
+      className="bg-blueGray-600 h-[40px] rounded-lg px-4 py-2 text-sm font-semibold text-white hover:bg-blue-800"
+      onClick={props.onClick}
+    >
+      {props.text}
+    </button>
+    {props.text2 ? (
+      <button type="button" className="text-grayscale-400 text-xs" onClick={props.onClick2}>
+        {props.text2}
+      </button>
+    ) : (
+      ''
+    )}
+  </div>
+);
diff --git a/frontend/src/component/common/modal/ModalHeader.tsx b/frontend/src/component/common/modal/ModalHeader.tsx
new file mode 100644
index 00000000..83bf4129
--- /dev/null
+++ b/frontend/src/component/common/modal/ModalHeader.tsx
@@ -0,0 +1,18 @@
+import { MdClear } from 'react-icons/md';
+import { Button } from '../button/Button';
+
+interface IModalHeaderProps {
+  /** 모달 헤더의 제목 텍스트입니다. */
+  content: string;
+  /** 모달을 닫는 함수입니다. */
+  onClose: () => void;
+}
+
+export const ModalHeader = (props: IModalHeaderProps) => (
+  <div className="flex flex-row items-start justify-between border-gray-200 py-4">
+    <h2 className="h-7 text-lg font-bold leading-7">{props.content}</h2>
+    <Button onClick={props.onClose}>
+      <MdClear />
+    </Button>
+  </div>
+);
diff --git a/frontend/src/component/common/modal/ModalInput.tsx b/frontend/src/component/common/modal/ModalInput.tsx
new file mode 100644
index 00000000..53d3fc08
--- /dev/null
+++ b/frontend/src/component/common/modal/ModalInput.tsx
@@ -0,0 +1,25 @@
+interface IModalInputProps {
+  /** 입력 필드의 제목입니다. */
+  title: string;
+  /** 입력 필드의 이름 속성입니다. */
+  name: string;
+  /** 입력 필드의 placeholder 텍스트입니다. */
+  placeholder: string;
+  /** 입력 필드의 현재 값입니다. */
+  value: string;
+  /** 입력 필드 값이 변경될 때 호출되는 함수입니다. */
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+export const ModalInput = (props: IModalInputProps) => (
+  <div className="flex flex-row items-center justify-between py-2">
+    <p className="font-medium">{props.title}</p>
+    <input
+      className="border-grayscale-75 text-grayscale-50 h-[32px] w-[250px] rounded-md border px-3 focus:outline-none focus:ring-1 focus:ring-blue-500"
+      name={props.name}
+      placeholder={props.placeholder}
+      value={props.value}
+      onChange={props.onChange}
+    />
+  </div>
+);
diff --git a/frontend/src/component/header/Header.tsx b/frontend/src/component/header/Header.tsx
index 9292e8ab..ea4c65e4 100644
--- a/frontend/src/component/header/Header.tsx
+++ b/frontend/src/component/header/Header.tsx
@@ -16,20 +16,15 @@ export interface IHeaderOption {
   rightButton?: string;
   title?: ReactNode;
   subtitle?: string;
+  items?: string[];
 }
 
 export const Header = (props: IHeaderProps) => {
   return (
     <header
       className={classNames(
-        'absolute',
-        'z-[2000]',
-        'flex w-full',
-        'flex-col',
-        'gap-2.5',
-        'bg-transparent',
-        'p-4',
-        props.className?.split(' '),
+        'z-2000 absolute flex w-full flex-col gap-2.5 bg-transparent p-4',
+        props.className,
       )}
     >
       {props.children}
diff --git a/frontend/src/component/header/HeaderDropdown.tsx b/frontend/src/component/header/HeaderDropdown.tsx
index d2dfd760..2b853da2 100644
--- a/frontend/src/component/header/HeaderDropdown.tsx
+++ b/frontend/src/component/header/HeaderDropdown.tsx
@@ -3,10 +3,20 @@ import { MdMenu, MdLocationOn } from 'react-icons/md';
 import { DropdownItem } from '@/component/common/dropdown/DropdownItem.tsx';
 import classNames from 'classnames';
 
-// interface IDropdownContainerProps {}
+interface IDropdownContainerProps {
+  items: string[];
+}
+
+export const HeaderDropdown = (props: IDropdownContainerProps) => {
+  // Tailwind의 동적 클래스 네이밍 할당을 위한 변수
+  const textMarkerUser = [
+    'text-marker-user1',
+    'text-marker-user2',
+    'text-marker-user3',
+    'text-marker-user4',
+    'text-marker-user5',
+  ];
 
-// TDDO : props로 전달되면 해석되도록 로직 변경 (props:props: IDropdownContainerProps)
-export const HeaderDropdown = () => {
   return (
     <div>
       <Dropdown>
@@ -14,19 +24,11 @@ export const HeaderDropdown = () => {
           <MdMenu className="h-6 w-6" />
         </Dropdown.Trigger>
         <Dropdown.Menu>
-          {[
-            '사용자 1 보기',
-            '사용자 2 보기',
-            '사용자 3 보기',
-            '사용자 4 보기',
-            '사용자 5 보기',
-          ].map((e, i) => {
+          {props.items.map((e, i) => {
             return (
               <DropdownItem key={e}>
                 {e}
-                <MdLocationOn
-                  className={classNames('w-5', 'h-5', `text-marker-user${i + 1}`, 'fill-current')}
-                />
+                <MdLocationOn className={classNames(`h-5 w-5 fill-current ${textMarkerUser[i]}`)} />
                 {/* 아이콘 색 변경 로직 찾기, 현재는 아이콘색이 반영이 안됨 수정할 사 */}
               </DropdownItem>
             );
diff --git a/frontend/src/component/header/HeaderMainLayout.tsx b/frontend/src/component/header/HeaderMainLayout.tsx
index 1b226bf1..83efa810 100644
--- a/frontend/src/component/header/HeaderMainLayout.tsx
+++ b/frontend/src/component/header/HeaderMainLayout.tsx
@@ -5,6 +5,7 @@ interface IHeaderMainLayoutProps {
   leftButton?: string;
   rightButton?: string;
   title?: ReactNode;
+  items?: string[];
 }
 
 export const HeaderMainLayout = (props: IHeaderMainLayoutProps) => {
@@ -13,7 +14,8 @@ export const HeaderMainLayout = (props: IHeaderMainLayoutProps) => {
       case 'back':
         return <Header.BackButton />;
       case 'dropdown':
-        return <Header.Dropdown />;
+        if (props.items) return <Header.Dropdown items={props.items} />;
+        return <Header.Dropdown items={['사용자 1']} />;
       default:
         return null;
     }
diff --git a/frontend/src/component/layout/header/LayoutHeader.tsx b/frontend/src/component/layout/header/LayoutHeader.tsx
index aad5a1dc..97397959 100644
--- a/frontend/src/component/layout/header/LayoutHeader.tsx
+++ b/frontend/src/component/layout/header/LayoutHeader.tsx
@@ -12,6 +12,7 @@ export const LayoutHeader = () => {
         leftButton={headerOption.leftButton}
         rightButton={headerOption.rightButton}
         title={headerOption.title}
+        items={headerOption.items}
       />
       {headerOption.subtitle && (
         <Header.Subtitle>
diff --git a/frontend/src/component/layout/header/LayoutHeaderProvider.tsx b/frontend/src/component/layout/header/LayoutHeaderProvider.tsx
index 6dce994e..77f6f1e2 100644
--- a/frontend/src/component/layout/header/LayoutHeaderProvider.tsx
+++ b/frontend/src/component/layout/header/LayoutHeaderProvider.tsx
@@ -1,31 +1,94 @@
-import { ReactNode, useState, createContext, useMemo } from 'react';
+import { ReactNode, createContext, useReducer, useMemo, useCallback } from 'react';
 import { IHeaderOption } from '@/component/header/Header.tsx';
 
-interface IHeaderOptionState {
+interface ILayoutHeaderProviderProps {
+  children: ReactNode;
+}
+
+interface IHeaderOptionContext {
   headerOption: IHeaderOption;
-  setHeaderOption: React.Dispatch<React.SetStateAction<IHeaderOption>>;
+  setTitle: (title: string) => void;
+  setSubTitle: (subtitle: string) => void;
+  setLeftButton: (leftButton: string) => void;
+  setRightButton: (rightButton: string) => void;
+  setItems: (items: string[]) => void;
 }
 
 const defaultHeaderOption: IHeaderOption = {
   title: '',
+  subtitle: '',
   leftButton: '',
   rightButton: '',
-  subtitle: '',
+  items: [],
 };
 
-export const HeaderContext = createContext<IHeaderOptionState>({
+export const HeaderContext = createContext<IHeaderOptionContext>({
   headerOption: defaultHeaderOption,
-  setHeaderOption: () => {},
+  setTitle: () => {},
+  setSubTitle: () => {},
+  setLeftButton: () => {},
+  setRightButton: () => {},
+  setItems: () => {},
 });
 
-interface ILayoutHeaderProviderProps {
-  children: ReactNode;
-}
+type Action =
+  | { type: 'SET_TITLE'; payload: string }
+  | { type: 'SET_SUBTITLE'; payload: string }
+  | { type: 'SET_LEFT_BUTTON'; payload: string }
+  | { type: 'SET_RIGHT_BUTTON'; payload: string }
+  | { type: 'SET_ITEMS'; payload: string[] };
+
+const headerReducer = (state: IHeaderOption, action: Action): IHeaderOption => {
+  switch (action.type) {
+    case 'SET_TITLE':
+      return { ...state, title: action.payload };
+    case 'SET_SUBTITLE':
+      return { ...state, subtitle: action.payload };
+    case 'SET_LEFT_BUTTON':
+      return { ...state, leftButton: action.payload };
+    case 'SET_RIGHT_BUTTON':
+      return { ...state, rightButton: action.payload };
+    case 'SET_ITEMS':
+      return { ...state, items: action.payload };
+    default:
+      return state;
+  }
+};
 
 export const LayoutHeaderProvider = (props: ILayoutHeaderProviderProps) => {
-  const [headerOption, setHeaderOption] = useState<IHeaderOption>(defaultHeaderOption);
+  const [headerOption, dispatch] = useReducer(headerReducer, defaultHeaderOption);
+
+  const setTitle = useCallback((title: string) => {
+    dispatch({ type: 'SET_TITLE', payload: title });
+  }, []);
+
+  const setSubTitle = useCallback((subtitle: string) => {
+    dispatch({ type: 'SET_SUBTITLE', payload: subtitle });
+  }, []);
+
+  const setLeftButton = useCallback((leftButton: string) => {
+    dispatch({ type: 'SET_LEFT_BUTTON', payload: leftButton });
+  }, []);
+
+  const setRightButton = useCallback((rightButton: string) => {
+    dispatch({ type: 'SET_RIGHT_BUTTON', payload: rightButton });
+  }, []);
+
+  const setItems = useCallback((items: string[]) => {
+    dispatch({ type: 'SET_ITEMS', payload: items });
+  }, []);
 
-  const contextValue = useMemo(() => ({ headerOption, setHeaderOption }), [headerOption]);
+  const contextValue = useMemo(
+    () => ({
+      headerOption,
+      setTitle,
+      setSubTitle,
+      setLeftButton,
+      setRightButton,
+      setItems,
+    }),
+    [headerOption, setTitle, setSubTitle, setLeftButton, setRightButton, setItems],
+  );
 
   return <HeaderContext.Provider value={contextValue}>{props.children}</HeaderContext.Provider>;
 };
diff --git a/frontend/src/hooks/useModal.ts b/frontend/src/hooks/useModal.ts
new file mode 100644
index 00000000..4488860b
--- /dev/null
+++ b/frontend/src/hooks/useModal.ts
@@ -0,0 +1,10 @@
+import { useState } from 'react';
+
+export const useModal = () => {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+
+  const onOpen = () => setIsOpen(true);
+  const onClose = () => setIsOpen(false);
+
+  return { isOpen, onOpen, onClose };
+};
diff --git a/frontend/src/pages/GuestView.tsx b/frontend/src/pages/GuestView.tsx
index e36522b0..27894010 100644
--- a/frontend/src/pages/GuestView.tsx
+++ b/frontend/src/pages/GuestView.tsx
@@ -6,11 +6,9 @@ export const GuestView = () => {
   const headerContext = useContext(HeaderContext);
 
   useEffect(() => {
-    headerContext.setHeaderOption({
-      ...headerContext.headerOption,
-      leftButton: 'back',
-      rightButton: 'dropdown',
-    });
+    headerContext.setRightButton('dropdown');
+    headerContext.setLeftButton('back');
+    headerContext.setItems(['사용자 1', '테스트 2', '길동이']);
   }, []);
 
   // TODO: geoCoding API를 이용해서 현재 위치나 시작위치를 기반으로 자동 좌표 설정 구현 (현재: 하드코딩)
diff --git a/frontend/src/stories/AuthModal.stories.tsx b/frontend/src/stories/AuthModal.stories.tsx
new file mode 100644
index 00000000..544e774c
--- /dev/null
+++ b/frontend/src/stories/AuthModal.stories.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import { useModal } from '@/hooks/useModal';
+import { AuthModal } from '@/component/authmodal/AuthModal';
+
+export default {
+  title: 'Components/AuthModal',
+  component: AuthModal,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['autodocs'],
+} as Meta<typeof AuthModal>;
+
+const LoginModalTemplate: Story = args => {
+  const { onClose } = useModal();
+
+  return <AuthModal {...args} onClose={onClose} />;
+};
+
+const RegisterModalTemplate: Story = args => {
+  const { onClose } = useModal();
+
+  return <AuthModal {...args} onClose={onClose} />;
+};
+
+export const LoginModal = LoginModalTemplate.bind({});
+LoginModal.args = {
+  isOpen: true,
+  type: 'login',
+};
+LoginModal.parameters = {
+  docs: {
+    description: {
+      story: '로그인 모달 컴포넌트를 렌더링합니다.',
+    },
+  },
+  backgrounds: {
+    default: 'gray',
+    values: [{ name: 'gray', value: '#f3f4f6' }],
+  },
+};
+
+export const RegisterModal = RegisterModalTemplate.bind({});
+RegisterModal.args = {
+  isOpen: true,
+  type: 'register',
+};
+RegisterModal.parameters = {
+  docs: {
+    description: {
+      story: '회원가입 모달 컴포넌트를 렌더링합니다.',
+    },
+  },
+  backgrounds: {
+    default: 'gray',
+    values: [{ name: 'gray', value: '#f3f4f6' }],
+  },
+};
diff --git a/frontend/src/stories/Configure.mdx b/frontend/src/stories/Configure.mdx
index 6a537304..86b0ce21 100644
--- a/frontend/src/stories/Configure.mdx
+++ b/frontend/src/stories/Configure.mdx
@@ -1,364 +1,95 @@
 import { Meta } from "@storybook/blocks";
 
-import Github from "./assets/github.svg";
-import Discord from "./assets/discord.svg";
-import Youtube from "./assets/youtube.svg";
-import Tutorials from "./assets/tutorials.svg";
-import Styling from "./assets/styling.png";
-import Context from "./assets/context.png";
-import Assets from "./assets/assets.png";
-import Docs from "./assets/docs.png";
-import Share from "./assets/share.png";
-import FigmaPlugin from "./assets/figma-plugin.png";
-import Testing from "./assets/testing.png";
-import Accessibility from "./assets/accessibility.png";
-import Theming from "./assets/theming.png";
-import AddonLibrary from "./assets/addon-library.png";
+<Meta title="Introduction" />
 
-export const RightArrow = () => <svg 
-    viewBox="0 0 14 14" 
-    width="8px" 
-    height="14px" 
-    style={{ 
-      marginLeft: '4px',
-      display: 'inline-block',
-      shapeRendering: 'inherit',
-      verticalAlign: 'middle',
-      fill: 'currentColor',
-      'path fill': 'currentColor'
-    }}
->
-  <path d="m11.1 7.35-5.5 5.5a.5.5 0 0 1-.7-.7L10.04 7 4.9 1.85a.5.5 0 1 1 .7-.7l5.5 5.5c.2.2.2.5 0 .7Z" />
-</svg>
-
-<Meta title="Configure your project" />
-
-<div className="sb-container">
-  <div className='sb-section-title'>
-    # Configure your project
-
-    Because Storybook works separately from your app, you'll need to configure it for your specific stack and setup. Below, explore guides for configuring Storybook with popular frameworks and tools. If you get stuck, learn how you can ask for help from our community.
-  </div>
-  <div className="sb-section">
-    <div className="sb-section-item">
-      <img
-        src={Styling}
-        alt="A wall of logos representing different styling technologies"
-      />
-      <h4 className="sb-section-item-heading">Add styling and CSS</h4>
-      <p className="sb-section-item-paragraph">Like with web applications, there are many ways to include CSS within Storybook. Learn more about setting up styling within Storybook.</p>
-      <a
-        href="https://storybook.js.org/docs/configure/styling-and-css/?renderer=react"
-        target="_blank"
-      >Learn more<RightArrow /></a>
-    </div>
-    <div className="sb-section-item">
-      <img
-        src={Context}
-        alt="An abstraction representing the composition of data for a component"
-      />
-      <h4 className="sb-section-item-heading">Provide context and mocking</h4>
-      <p className="sb-section-item-paragraph">Often when a story doesn't render, it's because your component is expecting a specific environment or context (like a theme provider) to be available.</p>
-      <a
-        href="https://storybook.js.org/docs/writing-stories/decorators/?renderer=react#context-for-mocking"
-        target="_blank"
-      >Learn more<RightArrow /></a>
-    </div>
-    <div className="sb-section-item">
-      <img src={Assets} alt="A representation of typography and image assets" />
-      <div>
-        <h4 className="sb-section-item-heading">Load assets and resources</h4>
-        <p className="sb-section-item-paragraph">To link static files (like fonts) to your projects and stories, use the
-        `staticDirs` configuration option to specify folders to load when
-        starting Storybook.</p>
-        <a
-          href="https://storybook.js.org/docs/configure/images-and-assets/?renderer=react"
-          target="_blank"
-        >Learn more<RightArrow /></a>
-      </div>
-    </div>
-  </div>
-</div>
-<div className="sb-container">
-  <div className='sb-section-title'>
-    # Do more with Storybook
-
-    Now that you know the basics, let's explore other parts of Storybook that will improve your experience. This list is just to get you started. You can customise Storybook in many ways to fit your needs.
-  </div>
-
-  <div className="sb-section">
-    <div className="sb-features-grid">
-      <div className="sb-grid-item">
-        <img src={Docs} alt="A screenshot showing the autodocs tag being set, pointing a docs page being generated" />
-        <h4 className="sb-section-item-heading">Autodocs</h4>
-        <p className="sb-section-item-paragraph">Auto-generate living,
-          interactive reference documentation from your components and stories.</p>
-        <a
-          href="https://storybook.js.org/docs/writing-docs/autodocs/?renderer=react"
-          target="_blank"
-        >Learn more<RightArrow /></a>
-      </div>
-      <div className="sb-grid-item">
-        <img src={Share} alt="A browser window showing a Storybook being published to a chromatic.com URL" />
-        <h4 className="sb-section-item-heading">Publish to Chromatic</h4>
-        <p className="sb-section-item-paragraph">Publish your Storybook to review and collaborate with your entire team.</p>
-        <a
-          href="https://storybook.js.org/docs/sharing/publish-storybook/?renderer=react#publish-storybook-with-chromatic"
-          target="_blank"
-        >Learn more<RightArrow /></a>
-      </div>
-      <div className="sb-grid-item">
-        <img src={FigmaPlugin} alt="Windows showing the Storybook plugin in Figma" />
-        <h4 className="sb-section-item-heading">Figma Plugin</h4>
-        <p className="sb-section-item-paragraph">Embed your stories into Figma to cross-reference the design and live
-          implementation in one place.</p>
-        <a
-          href="https://storybook.js.org/docs/sharing/design-integrations/?renderer=react#embed-storybook-in-figma-with-the-plugin"
-          target="_blank"
-        >Learn more<RightArrow /></a>
-      </div>
-      <div className="sb-grid-item">
-        <img src={Testing} alt="Screenshot of tests passing and failing" />
-        <h4 className="sb-section-item-heading">Testing</h4>
-        <p className="sb-section-item-paragraph">Use stories to test a component in all its variations, no matter how
-          complex.</p>
-        <a
-          href="https://storybook.js.org/docs/writing-tests/?renderer=react"
-          target="_blank"
-        >Learn more<RightArrow /></a>
-      </div>
-      <div className="sb-grid-item">
-        <img src={Accessibility} alt="Screenshot of accessibility tests passing and failing" />
-        <h4 className="sb-section-item-heading">Accessibility</h4>
-        <p className="sb-section-item-paragraph">Automatically test your components for a11y issues as you develop.</p>
-        <a
-          href="https://storybook.js.org/docs/writing-tests/accessibility-testing/?renderer=react"
-          target="_blank"
-        >Learn more<RightArrow /></a>
-      </div>
-      <div className="sb-grid-item">
-        <img src={Theming} alt="Screenshot of Storybook in light and dark mode" />
-        <h4 className="sb-section-item-heading">Theming</h4>
-        <p className="sb-section-item-paragraph">Theme Storybook's UI to personalize it to your project.</p>
-        <a
-          href="https://storybook.js.org/docs/configure/theming/?renderer=react"
-          target="_blank"
-        >Learn more<RightArrow /></a>
-      </div>
-    </div>
-  </div>
-</div>
-<div className='sb-addon'>
-  <div className='sb-addon-text'>
-    <h4>Addons</h4>
-    <p className="sb-section-item-paragraph">Integrate your tools with Storybook to connect workflows.</p>
-    <a
-        href="https://storybook.js.org/addons/"
-        target="_blank"
-      >Discover all addons<RightArrow /></a>
-  </div>
-  <div className='sb-addon-img'>
-    <img src={AddonLibrary} alt="Integrate your tools with Storybook to connect workflows." />
-  </div>
-</div>
-
-<div className="sb-section sb-socials">
-    <div className="sb-section-item">
-      <img src={Github} alt="Github logo" className="sb-explore-image"/>
-      Join our contributors building the future of UI development.
-
-      <a
-        href="https://github.com/storybookjs/storybook"
-        target="_blank"
-      >Star on GitHub<RightArrow /></a>
-    </div>
-    <div className="sb-section-item">
-      <img src={Discord} alt="Discord logo" className="sb-explore-image"/>
-      <div>
-        Get support and chat with frontend developers.
-
-        <a
-          href="https://discord.gg/storybook"
-          target="_blank"
-        >Join Discord server<RightArrow /></a>
-      </div>
-    </div>
-    <div className="sb-section-item">
-      <img src={Youtube} alt="Youtube logo" className="sb-explore-image"/>
-      <div>
-        Watch tutorials, feature previews and interviews.
-
-        <a
-          href="https://www.youtube.com/@chromaticui"
-          target="_blank"
-        >Watch on YouTube<RightArrow /></a>
-      </div>
-    </div>
-    <div className="sb-section-item">
-      <img src={Tutorials} alt="A book" className="sb-explore-image"/>
-      <p>Follow guided walkthroughs on for key workflows.</p>
-
-      <a
-          href="https://storybook.js.org/tutorials/"
-          target="_blank"
-        >Discover tutorials<RightArrow /></a>
-    </div>
+<div align="center">
+  <img width="600" alt="image" src="https://github.com/user-attachments/assets/f7973fe3-dd8a-4643-9536-53e63db1f6fe"/>
+  <h3 align="center">🧭 선따라 길따라 🧭</h3>
+  <h4 align="center">중장년층을 위한 접근성을 바탕으로 한 위치 기반 서비스</h4>
 </div>
 
-<style>
-  {`
-  .sb-container {
-    margin-bottom: 48px;
-  }
 
-  .sb-section {
-    width: 100%;
-    display: flex;
-    flex-direction: row;
-    gap: 20px;
-  }
+<div align="center">
+<br/>
 
-  img {
-    object-fit: cover;
-  }
+## 👩‍💻 팀 소개
 
-  .sb-section-title {
-    margin-bottom: 32px;
-  }
+<img width="200" src="https://github.com/user-attachments/assets/ab367ecb-be89-4076-abdf-bf00bdc29a4f"/>
+<div>(따라핑)</div>
 
-  .sb-section a:not(h1 a, h2 a, h3 a) {
-    font-size: 14px;
-  }
+### 안녕하세요, 팀 "따라따라" 입니다!
 
-  .sb-section-item, .sb-grid-item {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-  }
+<br/>
 
-  .sb-section-item-heading {
-    padding-top: 20px !important;
-    padding-bottom: 5px !important;
-    margin: 0 !important;
-  }
-  .sb-section-item-paragraph {
-    margin: 0;
-    padding-bottom: 10px;
-  }
+## 🗝 링크 안내
 
-  .sb-chevron {
-    margin-left: 5px;
-  }
+<p>
+  <a href="https://ddara-docs.vercel.app/">팀 위키</a> |
+  <a href="https://www.notion.so/127b1b2b649180e88f70d6a4648924a0?pvs=4">팀 노션</a> |
+  <a href="https://www.figma.com/design/r9nl4Jcz9VXIMbrpf50wY6/PickMeUp?node-id=90-1897">기획서</a> |
+  <a href="https://www.figma.com/design/r9nl4Jcz9VXIMbrpf50wY6/PickMeUp?node-id=87-929">디자인</a>
 
-  .sb-features-grid {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    grid-gap: 32px 20px;
-  }
+[//]: # (<!--   <br />)
 
-  .sb-socials {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-  }
+[//]: # (  <a href="https://www.notion.so/127b1b2b6491805b9055d480ab56e432?v=ee8c766f016148d7bfd6c6f49d782b10&pvs=4">회의록</a>   |)
 
-  .sb-socials p {
-    margin-bottom: 10px;
-  }
+[//]: # (  <a href="https://www.notion.so/129b1b2b649180ef8ad6f356251f2dec?pvs=4">그라운드 룰</a>   |)
 
-  .sb-explore-image {
-    max-height: 32px;
-    align-self: flex-start;
-  }
+[//]: # (  <a href="https://www.notion.so/812667c55af84dba8d18f4902b56a85e?pvs=4">기능 명세</a> -->)
+</p>
 
-  .sb-addon {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    position: relative;
-    background-color: #EEF3F8;
-    border-radius: 5px;
-    border: 1px solid rgba(0, 0, 0, 0.05);
-    background: #EEF3F8;
-    height: 180px;
-    margin-bottom: 48px;
-    overflow: hidden;
-  }
-
-  .sb-addon-text {
-    padding-left: 48px;
-    max-width: 240px;
-  }
-
-  .sb-addon-text h4 {
-    padding-top: 0px;
-  }
-
-  .sb-addon-img {
-    position: absolute;
-    left: 345px;
-    top: 0;
-    height: 100%;
-    width: 200%;
-    overflow: hidden;
-  }
-
-  .sb-addon-img img {
-    width: 650px;
-    transform: rotate(-15deg);
-    margin-left: 40px;
-    margin-top: -72px;
-    box-shadow: 0 0 1px rgba(255, 255, 255, 0);
-    backface-visibility: hidden;
-  }
-
-  @media screen and (max-width: 800px) {
-    .sb-addon-img {
-      left: 300px;
-    }
-  }
-
-  @media screen and (max-width: 600px) {
-    .sb-section {
-      flex-direction: column;
-    }
-
-    .sb-features-grid {
-      grid-template-columns: repeat(1, 1fr);
-    }
-
-    .sb-socials {
-      grid-template-columns: repeat(2, 1fr);
-    }
-
-    .sb-addon {
-      height: 280px;
-      align-items: flex-start;
-      padding-top: 32px;
-      overflow: hidden;
-    }
-
-    .sb-addon-text {
-      padding-left: 24px;
-    }
-
-    .sb-addon-img {
-      right: 0;
-      left: 0;
-      top: 130px;
-      bottom: 0;
-      overflow: hidden;
-      height: auto;
-      width: 124%;
-    }
+</div>
 
-    .sb-addon-img img {
-      width: 1200px;
-      transform: rotate(-12deg);
-      margin-left: 0;
-      margin-top: 48px;
-      margin-bottom: -40px;
-      margin-left: -24px;
-    }
-  }
-  `}
-</style>
+<div align="center">
+<br/><br/><br/>
+
+
+## 🌱 팀원 소개
+
+<table style={{textAlign: 'center', width: '100%',}}>
+  <thead>
+  <tr>
+    <th>J060_김주원</th>
+    <th>J174_이동율</th>
+    <th>J210_임재도</th>
+    <th>J234_정혜인</th>
+  </tr>
+  </thead>
+  <tbody>
+  <tr>
+    <td><a href="https://github.com/juwon5272"><img src="https://github.com/user-attachments/assets/f774ff48-8831-490f-b0fe-b18b024f7916" width="150px;" alt=""/></a></td>
+    <td><a href="https://github.com/leedongyull"><img src="https://github.com/user-attachments/assets/4d682b1f-0f91-4547-8a7d-1f6b00bee674" width="150px;" alt=""/></a></td>
+    <td><a href="https://github.com/effozen"><img src="https://github.com/user-attachments/assets/92bddae1-19ce-4b06-811e-52df15ac726c" width="150px;" alt=""/></a></td>
+    <td><a href="https://github.com/happyhyep"><img src="https://github.com/user-attachments/assets/40ac933c-3e19-4884-a5e9-da2f2298dd72" width="150px;" alt=""/></a></td>
+  </tr>
+  <tr>
+    <td>FE</td>
+    <td>FE</td>
+    <td>FE</td>
+    <td>Full Stack (FE + BE)</td>
+  </tr>
+  <tr>
+    <td><a href="https://github.com/juwon5272">@juwon5272</a></td>
+    <td><a href="https://github.com/leedongyull">@leedongyull</a></td>
+    <td><a href="https://github.com/effozen">@effozen</a></td>
+    <td><a href="https://github.com/happyhyep">@happyhyep</a></td>
+  </tr>
+  </tbody>
+</table>
+
+<br/>
+
+## ⛏ 기술 스택
+
+추후 추가 예정입니다.
+
+[//]: # (<!--)
+
+[//]: # (## 👨‍👨‍👧‍👦 협업 전략)
+
+[//]: # ()
+[//]: # (## 👂 그라운드 룰)
+
+[//]: # ()
+[//]: # (-->)
+</div>
diff --git a/frontend/src/stories/common/modal/Modal.stories.tsx b/frontend/src/stories/common/modal/Modal.stories.tsx
new file mode 100644
index 00000000..4fb7b29b
--- /dev/null
+++ b/frontend/src/stories/common/modal/Modal.stories.tsx
@@ -0,0 +1,86 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import { Modal } from '@/component/common/modal/Modal';
+import { useModal } from '@/hooks/useModal';
+import { fn } from '@storybook/test';
+
+export default {
+  title: 'Components/common/modal/Modal',
+  component: Modal,
+  tags: ['autodocs'],
+} as Meta<typeof Modal>;
+
+const LoginModalTemplate: Story = () => {
+  const { isOpen, onOpen, onClose } = useModal();
+
+  return (
+    <div className="flex min-h-screen items-center justify-center">
+      <button
+        className="rounded-lg bg-blue-500 px-4 py-2 text-white hover:bg-blue-600"
+        onClick={onOpen}
+        type="button"
+      >
+        로그인
+      </button>
+
+      <Modal isOpen={isOpen} onClose={onClose}>
+        <Modal.Header content="Log In" onClose={onClose} />
+        <Modal.Input title="ID" placeholder="ID" />
+        <Modal.Input title="PW" placeholder="PW" />
+        <Modal.Footer text="로그인" onClick={fn()} text2="회원가입" onClick2={fn()} />
+      </Modal>
+    </div>
+  );
+};
+
+const RegisterModalTemplate: Story = () => {
+  const { isOpen, onOpen, onClose } = useModal();
+
+  return (
+    <div className="flex min-h-screen items-center justify-center">
+      <button
+        className="rounded-lg bg-blue-500 px-4 py-2 text-white hover:bg-blue-600"
+        onClick={onOpen}
+        type="button"
+      >
+        회원가입
+      </button>
+
+      <Modal isOpen={isOpen} onClose={onClose}>
+        <Modal.Header content="Register" onClose={onClose} />
+        <Modal.Input title="ID" placeholder="사용할 ID를 입력해주세요." />
+        <Modal.Input title="Email" placeholder="Email 주소를 입력해주세요." />
+        <Modal.Input title="Name" placeholder="이름을 입력해주세요." />
+        <Modal.Input title="PW" placeholder="사용할 비밀번호를 입력해주세요." />
+        <Modal.Input title="" placeholder="비밀번호를 한 번 더 입력해주세요." />
+        <Modal.Footer text="회원가입" onClick={fn()} />
+      </Modal>
+    </div>
+  );
+};
+
+export const LoginModal = LoginModalTemplate.bind({});
+LoginModal.parameters = {
+  docs: {
+    description: {
+      story: '로그인 모달 컴포넌트를 렌더링합니다.',
+    },
+  },
+  backgrounds: {
+    default: 'gray',
+    values: [{ name: 'gray', value: '#f3f4f6' }],
+  },
+};
+
+export const RegisterModal = RegisterModalTemplate.bind({});
+RegisterModal.parameters = {
+  docs: {
+    description: {
+      story: '회원가입 모달 컴포넌트를 렌더링합니다.',
+    },
+  },
+  backgrounds: {
+    default: 'gray',
+    values: [{ name: 'gray', value: '#f3f4f6' }],
+  },
+};
diff --git a/frontend/src/stories/common/modal/ModalFooter.stories.tsx b/frontend/src/stories/common/modal/ModalFooter.stories.tsx
new file mode 100644
index 00000000..767fca48
--- /dev/null
+++ b/frontend/src/stories/common/modal/ModalFooter.stories.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import { ModalFooter } from '@/component/common/modal/ModalFooter';
+import { fn } from '@storybook/test';
+
+export default {
+  title: 'Components/common/modal/ModalFooter',
+  component: ModalFooter,
+  parameters: { layout: 'centered' },
+  tags: ['autodocs'],
+} as Meta<typeof ModalFooter>;
+
+const Template: Story = args => <ModalFooter {...args} />;
+
+export const OneButton = Template.bind({});
+OneButton.args = {
+  text: '회원가입',
+  onClick: fn(),
+};
+
+export const TwoButton = Template.bind({});
+TwoButton.args = {
+  text: '로그인',
+  onClick: fn(),
+  text2: '회원가입',
+  onClick2: fn(),
+};
diff --git a/frontend/src/stories/common/modal/ModalHeader.stories.tsx b/frontend/src/stories/common/modal/ModalHeader.stories.tsx
new file mode 100644
index 00000000..ca09941b
--- /dev/null
+++ b/frontend/src/stories/common/modal/ModalHeader.stories.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import { ModalHeader } from '@/component/common/modal/ModalHeader';
+import { fn } from '@storybook/test';
+
+export default {
+  title: 'Components/common/modal/ModalHeader',
+  component: ModalHeader,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+} as Meta<typeof ModalHeader>;
+
+const Template: Story = args => <ModalHeader {...args} />;
+
+export const DefaultHeader = Template.bind({});
+DefaultHeader.args = {
+  content: 'Login',
+  onClose: fn(),
+};
diff --git a/frontend/src/stories/common/modal/ModalInput.stories.tsx b/frontend/src/stories/common/modal/ModalInput.stories.tsx
new file mode 100644
index 00000000..8a4968f7
--- /dev/null
+++ b/frontend/src/stories/common/modal/ModalInput.stories.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import { ModalInput } from '@/component/common/modal/ModalInput';
+import { fn } from '@storybook/test';
+
+export default {
+  title: 'Components/common/modal/ModalInput',
+  component: ModalInput,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} as Meta<typeof ModalInput>;
+
+const Template: Story = args => <ModalInput {...args} />;
+
+export const DefaultInput = Template.bind({});
+DefaultInput.args = {
+  title: 'ID',
+  name: 'id',
+  placeholder: '사용할 ID를 입력해주세요.',
+  value: '',
+  onChange: fn(),
+};
+
+export const NoTitle = Template.bind({});
+NoTitle.args = {
+  title: '',
+  name: 'confirmPw',
+  placeholder: '비밀번호를 한 번 더 입력해주세요.',
+  value: '',
+  onChange: fn(),
+};
diff --git a/frontend/src/stories/dropdown/Dropdown.stories.tsx b/frontend/src/stories/dropdown/Dropdown.stories.tsx
new file mode 100644
index 00000000..e81e031d
--- /dev/null
+++ b/frontend/src/stories/dropdown/Dropdown.stories.tsx
@@ -0,0 +1,64 @@
+// Dropdown.stories.tsx
+import type { Meta, StoryObj } from '@storybook/react';
+import { Dropdown } from '@/component/common/dropdown/Dropdown.tsx';
+import { MdLocationOn, MdMenu } from 'react-icons/md';
+import classNames from 'classnames';
+import { DropdownItem } from '@/component/common/dropdown/DropdownItem.tsx';
+
+const meta: Meta<typeof Dropdown> = {
+  title: 'Components/Common/Dropdown/Dropdown',
+  component: Dropdown,
+  parameters: {
+    layout: 'fullscreen', // 중앙 정렬 레이아웃
+  },
+  tags: ['autodocs'],
+  decorators: [
+    Story => (
+      <div
+        style={{
+          height: '300px',
+          display: 'flex',
+          justifyContent: 'center',
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    // 'children'에 대한 컨트롤 비활성화
+    children: { control: false },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const textMarkerUser = [
+  'text-marker-user1',
+  'text-marker-user2',
+  'text-marker-user3',
+  'text-marker-user4',
+  'text-marker-user5',
+];
+
+export const Default: Story = {
+  render: () => (
+    <Dropdown>
+      <Dropdown.Trigger>
+        <MdMenu className="h-6 w-6" />
+      </Dropdown.Trigger>
+      <Dropdown.Menu>
+        {['사용자 1', '사용자 2', '사용자 3', '사용자 4', '사용자 5'].map((e, i) => {
+          return (
+            <DropdownItem key={e}>
+              {e}
+              <MdLocationOn className={classNames(`h-5 w-5 fill-current ${textMarkerUser[i]}`)} />
+              {/* 아이콘 색 변경 로직 찾기, 현재는 아이콘색이 반영이 안됨 수정할 사 */}
+            </DropdownItem>
+          );
+        })}
+      </Dropdown.Menu>
+    </Dropdown>
+  ),
+};
diff --git a/frontend/src/stories/dropdown/DropdownItem.stories.tsx b/frontend/src/stories/dropdown/DropdownItem.stories.tsx
new file mode 100644
index 00000000..d623f021
--- /dev/null
+++ b/frontend/src/stories/dropdown/DropdownItem.stories.tsx
@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { fn } from '@storybook/test';
+
+import { DropdownItem } from '@/component/common/dropdown/DropdownItem.tsx';
+import { ToggleProvider } from '@/component/common/dropdown/DropdownContext.tsx';
+import { MdLocationOn } from 'react-icons/md';
+import classNames from 'classnames';
+
+const meta = {
+  title: 'Components/Common/Dropdown/DropdownItem',
+  component: DropdownItem,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  decorators: [
+    Story => (
+      <ToggleProvider>
+        <Story />
+      </ToggleProvider>
+    ),
+  ],
+  argTypes: {
+    // 'children'에 대한 컨트롤 비활성화
+    children: { control: false },
+  },
+  args: { onClick: fn() },
+} satisfies Meta<typeof DropdownItem>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: (
+      <>
+        사용자 1<MdLocationOn className={classNames(`text-marker-user1 h-5 w-5 fill-current`)} />
+      </>
+    ),
+  },
+};
diff --git a/frontend/src/stories/dropdown/DropdownMenu.stories.tsx b/frontend/src/stories/dropdown/DropdownMenu.stories.tsx
new file mode 100644
index 00000000..f2089419
--- /dev/null
+++ b/frontend/src/stories/dropdown/DropdownMenu.stories.tsx
@@ -0,0 +1,91 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { DropdownMenu } from '@/component/common/dropdown/DropdownMenu.tsx';
+import { DropdownItem } from '@/component/common/dropdown/DropdownItem.tsx';
+import { MdLocationOn } from 'react-icons/md';
+import { ToggleContext } from '@/component/common/dropdown/DropdownContext.tsx';
+import classNames from 'classnames';
+
+const meta = {
+  title: 'Components/Common/Dropdown/DropdownMenu',
+  component: DropdownMenu,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  decorators: [
+    Story => (
+      <ToggleContext.Provider
+        value={{
+          isOpen: true,
+          toggle: () => {},
+        }}
+      >
+        <div
+          style={{
+            height: '300px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          <Story />
+        </div>
+      </ToggleContext.Provider>
+    ),
+  ],
+  argTypes: {
+    // 'children'에 대한 컨트롤 비활성화
+    children: {
+      control: false,
+    },
+  },
+  args: {},
+} satisfies Meta<typeof DropdownMenu>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    children: ['사용자 1', '사용자 2', '사용자 3', '사용자 4', '사용자 5'].map((e, i) => {
+      const textMarkerUser = [
+        'text-marker-user1',
+        'text-marker-user2',
+        'text-marker-user3',
+        'text-marker-user4',
+        'text-marker-user5',
+      ];
+
+      return (
+        <DropdownItem key={e}>
+          {e}
+          <MdLocationOn className={classNames(`h-5 w-5 fill-current ${textMarkerUser[i]}`)} />
+          {/* 아이콘 색 변경 로직 찾기, 현재는 아이콘색이 반영이 안됨 수정할 사 */}
+        </DropdownItem>
+      );
+    }),
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    children: ['사용자 1', '사용자 2'].map((e, i) => {
+      const textMarkerUser = [
+        'text-marker-user1',
+        'text-marker-user2',
+        'text-marker-user3',
+        'text-marker-user4',
+        'text-marker-user5',
+      ];
+
+      return (
+        <DropdownItem key={e}>
+          {e}
+          <MdLocationOn className={classNames(`h-5 w-5 fill-current ${textMarkerUser[i]}`)} />
+          {/* 아이콘 색 변경 로직 찾기, 현재는 아이콘색이 반영이 안됨 수정할 사 */}
+        </DropdownItem>
+      );
+    }),
+  },
+};
diff --git a/frontend/src/stories/dropdown/DropdownTrigger.stories.tsx b/frontend/src/stories/dropdown/DropdownTrigger.stories.tsx
new file mode 100644
index 00000000..f9e01886
--- /dev/null
+++ b/frontend/src/stories/dropdown/DropdownTrigger.stories.tsx
@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { DropdownTrigger } from '@/component/common/dropdown/DropdownTrigger.tsx';
+import { ToggleProvider } from '@/component/common/dropdown/DropdownContext.tsx';
+import { MdMenu, MdMoreVert } from 'react-icons/md';
+
+const meta = {
+  title: 'Components/Common/Dropdown/DropdownTrigger',
+  component: DropdownTrigger,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  decorators: [
+    Story => (
+      <ToggleProvider>
+        <Story />
+      </ToggleProvider>
+    ),
+  ],
+  argTypes: {
+    // 'children'에 대한 컨트롤 비활성화
+    children: { control: false },
+  },
+  args: {},
+} satisfies Meta<typeof DropdownTrigger>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const MenuButton: Story = {
+  args: {
+    // 'children'에 React 엘리먼트를 직접 전달
+    children: <MdMenu className="h-6 w-6" />,
+  },
+};
+
+export const DotButton: Story = {
+  args: {
+    // 'children'에 React 엘리먼트를 직접 전달
+    children: <MdMoreVert className="h-6 w-6" />,
+  },
+};
diff --git a/frontend/src/stories/Button.stories.ts b/frontend/src/stories/example/Button.stories.ts
similarity index 100%
rename from frontend/src/stories/Button.stories.ts
rename to frontend/src/stories/example/Button.stories.ts
diff --git a/frontend/src/stories/Button.tsx b/frontend/src/stories/example/Button.tsx
similarity index 100%
rename from frontend/src/stories/Button.tsx
rename to frontend/src/stories/example/Button.tsx
diff --git a/frontend/src/stories/Header.stories.ts b/frontend/src/stories/example/Header.stories.ts
similarity index 100%
rename from frontend/src/stories/Header.stories.ts
rename to frontend/src/stories/example/Header.stories.ts
diff --git a/frontend/src/stories/Header.tsx b/frontend/src/stories/example/Header.tsx
similarity index 100%
rename from frontend/src/stories/Header.tsx
rename to frontend/src/stories/example/Header.tsx
diff --git a/frontend/src/stories/Page.stories.ts b/frontend/src/stories/example/Page.stories.ts
similarity index 100%
rename from frontend/src/stories/Page.stories.ts
rename to frontend/src/stories/example/Page.stories.ts
diff --git a/frontend/src/stories/Page.tsx b/frontend/src/stories/example/Page.tsx
similarity index 100%
rename from frontend/src/stories/Page.tsx
rename to frontend/src/stories/example/Page.tsx
diff --git a/frontend/src/stories/button.css b/frontend/src/stories/example/button.css
similarity index 100%
rename from frontend/src/stories/button.css
rename to frontend/src/stories/example/button.css
diff --git a/frontend/src/stories/header.css b/frontend/src/stories/example/header.css
similarity index 100%
rename from frontend/src/stories/header.css
rename to frontend/src/stories/example/header.css
diff --git a/frontend/src/stories/page.css b/frontend/src/stories/example/page.css
similarity index 100%
rename from frontend/src/stories/page.css
rename to frontend/src/stories/example/page.css