[이태경] Sprint8

package.json

@@ -12,6 +12,7 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-hook-form": "^7.62.0",
     "react-router-dom": "^6.30.0",
     "react-scripts": "5.0.1",
     "sass": "^1.89.0",

src/App.tsx

@@ -2,8 +2,9 @@ import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import routes from "./routes";
 import "./styles/style.scss";
 import ToastContainer from "./components/Toast/ToastContainer";
-import { Global } from "@emotion/react";
+import { Global, ThemeProvider } from "@emotion/react";
 import { globalStyle } from "./styles/globalStyle";
+import { theme } from "@styles/theme";
 
 function App() {
   const router = createBrowserRouter(routes, {
@@ -13,9 +14,11 @@ function App() {
   });
   return (
     <>
-      <Global styles={globalStyle} />
-      <RouterProvider router={router} future={{ v7_startTransition: true }} />
-      <ToastContainer />
+      <ThemeProvider theme={theme}>
+        <Global styles={globalStyle(theme)} />
+        <RouterProvider router={router} future={{ v7_startTransition: true }} />
+        <ToastContainer />
+      </ThemeProvider>
     </>
   );
 }

src/components/AuthFormInput/AuthFormInput.tsx

@@ -0,0 +1,25 @@
+import PasswordInput from "../PasswordInput/PasswordInput";
+import Input from "../Input/Input";
+import { forwardRef, InputHTMLAttributes } from "react";
+
+interface Props extends InputHTMLAttributes<HTMLInputElement> {
+  label: string;
+  errorMsg?: string;
+}
+
+const AuthFormInput = forwardRef<HTMLInputElement, Props>(
+  ({ label, errorMsg, ...props }, ref) => {
+    return (
+      <div className="auth-form__item">
+        <label className="auth-form__label">{label}</label>
+        {props.type === "password" ? (
+          <PasswordInput ref={ref} {...props} />
+        ) : (
+          <Input ref={ref} {...props} />
+        )}
+        {errorMsg && <p className="auth-form__error-msg">{errorMsg}</p>}
+      </div>
+    );
+  }
+);
+export default AuthFormInput;

src/components/AuthGuide/AuthGuide.js → src/components/AuthGuide/AuthGuide.tsx

@@ -1,6 +1,12 @@
 import { Link } from "react-router-dom";
 
-const AuthGuide = ({ guideTxt, linkTxt, linkUrl }) => {
+interface Props {
+  guideTxt: string;
+  linkTxt: string;
+  linkUrl: string;
+}
+
+const AuthGuide = ({ guideTxt, linkTxt, linkUrl }: Props) => {
   return (
     <div className="auth-guide">
       <p className="auth-guide__txt">{guideTxt}</p>

src/components/Button/Button.tsx

@@ -1,15 +1,12 @@
 import { ButtonHTMLAttributes, ReactNode } from "react";
 import { ButtonStyle, ButtonStyleProps } from "./ButtonStyle";
 
-interface BaseButtonProps {
-  onClick?: () => void;
+interface ButtonProps
+  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "color" | "children">,
+    ButtonStyleProps {
   children: ReactNode;
 }
 
-type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &
-  BaseButtonProps &
-  ButtonStyleProps;
-
 const Button = ({ onClick, children, ...props }: ButtonProps) => {
   return (
     <ButtonStyle onClick={onClick} {...props}>

src/components/Button/ButtonStyle.ts

@@ -2,34 +2,35 @@ import { css } from "@emotion/react";
 import styled from "@emotion/styled/macro";
 import { mq } from "../../styles/mixins";
 import { Link } from "react-router-dom";
+import { theme } from "@styles/theme";
 
 export interface ButtonStyleProps {
-  color?: keyof typeof ButtonColors;
+  variant?: keyof typeof ButtonStyles;
   size?: keyof typeof ButtonSize;
   round?: boolean;
 }
 
-export const ButtonColors = {
+export const ButtonStyles = {
   primary: css`
     color: #fff;
-    background-color: var(--btn-primary);
+    background-color: ${theme.btn.primary};
 
     &:hover {
-      background-color: var(--btn-primary-hover);
+      background-color: ${theme.btn.hover};
     }
 
     &:active {
-      background-color: var(--btn-primary-click);
+      background-color: ${theme.btn.click};
     }
 
     &:disabled {
-      background-color: var(--btn-disabled);
+      background-color: ${theme.btn.disabled};
     }
   `,
   white: css`
-    border: 1px solid var(--primary-color);
-    color: var(--primary-color);
-    background-color: var(--white);
+    border: 1px solid ${theme.colors.primaryColor};
+    color: ${theme.colors.primaryColor};
+    background-color: ${theme.colors.white};
   `,
   custom: css``,
 };
@@ -69,7 +70,7 @@ export const ButtonBaseStyle = (props: ButtonStyleProps) => css`
   cursor: pointer;
 
   ${props.size ? ButtonSize[props.size] : ButtonSize["sm"]};
-  ${props.color ? ButtonColors[props.color] : ButtonColors["primary"]};
+  ${props.variant ? ButtonStyles[props.variant] : ButtonStyles["primary"]};
   border-radius: ${props.round ? "40px" : "8px"};
 `;
 

src/components/Input/Input.tsx

@@ -0,0 +1,14 @@
+import { forwardRef, InputHTMLAttributes } from "react";
+import styles from "./Input.module.scss";
+
+interface Props extends InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = forwardRef<HTMLInputElement, Props>(
+  ({ className, ...props }, ref) => {
+    return (
+      <input ref={ref} className={`${styles.input} ${className}`} {...props} />
+    );
+  }
+);
+
+export default Input;

src/components/PasswordInput/PasswordInput.tsx

@@ -0,0 +1,47 @@
+import { forwardRef, InputHTMLAttributes } from "react";
+import usePasswordToggle from "../../hooks/usePasswordToggle";
+import styles from "./PasswordInput.module.scss";
+
+interface Props extends InputHTMLAttributes<HTMLInputElement> {
+  placeholder?: string;
+  className?: string;
+  isToggle?: boolean;
+}
+
+const PasswordInput = forwardRef<HTMLInputElement, Props>(
+  ({ placeholder, className, isToggle = true, ...props }, ref) => {
+    const { toggle, handleClickToggle, toggleImg } = usePasswordToggle();
+
+    const { type, ...otherProps } = props;
+
+    return (
+      <div className={styles["password-box"]}>
+        <input
+          ref={ref}
+          type={toggle ? "text" : "password"}
+          placeholder={placeholder}
+          className={`${styles["password-input"]} ${className}`}
+          {...otherProps}
+        />
+        {isToggle && (
+          <button
+            type="button"
+            className={styles["password__toggle-btn"]}
+            aria-label="비밀번호 표시"
+            aria-pressed={toggle}
+            onClick={handleClickToggle}
+          >
+            <img
+              src={toggleImg}
+              width="24"
+              height="24"
+              alt="비밀번호 보기 아이콘"
+            />
+          </button>
+        )}
+      </div>
+    );
+  }
+);
+
+export default PasswordInput;

src/components/TagItem/TagItem.tsx

@@ -8,15 +8,20 @@ interface TagItemBase {
   children: ReactNode;
 }
 
-type TextProps = HTMLAttributes<HTMLSpanElement> &
-  TagItemBase & {
-    type: "text";
-  };
-type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &
-  TagItemBase & {
-    type: "button";
-    onClick: () => void;
-  };
+interface TextProps
+  extends Omit<HTMLAttributes<HTMLSpanElement>, "children">,
+    TagItemBase {
+  type: "text";
+}
+interface ButtonProps
+  extends Omit<
+      ButtonHTMLAttributes<HTMLButtonElement>,
+      "onClick" | "type" | "children"
+    >,
+    TagItemBase {
+  type: "button";
+  onClick: () => void;
+}
 
 type TagItemProps = TextProps | ButtonProps;