Merge branch 'refs/heads/frontend' into feature/fe/#197-doLogin

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 />

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>
+  );
+};

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>
   );
 };

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>
+  );
+};

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"

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}

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 (

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;