[이태경] 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,31 @@
+import PasswordInput from "../PasswordInput/PasswordInput";
+import Input from "../Input/Input";
+import { forwardRef, InputHTMLAttributes } from "react";
+import {
+  AuthFormItem,
+  AuthFormLabel,
+  AuthFormErrorMsg,
+} from "@styles/formStyles";
+
+interface Props extends InputHTMLAttributes<HTMLInputElement> {
+  label: string;
+  errorMsg?: string;
+}
+
+const AuthFormInput = forwardRef<HTMLInputElement, Props>(
+  ({ label, errorMsg, ...props }, ref) => {
+    return (
+      <AuthFormItem>
+        <AuthFormLabel>{label}</AuthFormLabel>
+        {props.type === "password" ? (
+          <PasswordInput ref={ref} {...props} />
+        ) : (
+          <Input ref={ref} {...props} />
+        )}
+        {errorMsg && <AuthFormErrorMsg>{errorMsg}</AuthFormErrorMsg>}
+      </AuthFormItem>
+    );
+  }
+);
+
+export default AuthFormInput;

src/components/AuthGuide/AuthGuide.tsx

@@ -0,0 +1,39 @@
+import styled from "@emotion/styled/macro";
+import { theme } from "@styles/theme";
+import { Link } from "react-router-dom";
+
+interface Props {
+  guideTxt: string;
+  linkTxt: string;
+  linkUrl: string;
+}
+
+const AuthGuide = ({ guideTxt, linkTxt, linkUrl }: Props) => {
+  return (
+    <AuthGuideBox>
+      <p>{guideTxt}</p>
+      <AuthGuideLink to={linkUrl} aria-label={`${linkTxt} 페이지로 이동`}>
+        {linkTxt}
+      </AuthGuideLink>
+    </AuthGuideBox>
+  );
+};
+
+const AuthGuideBox = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 24px;
+  font-size: 14px;
+  font-weight: 500;
+  gap: 5px;
+`;
+
+const AuthGuideLink = styled(Link)`
+  text-decoration: underline;
+  text-underline-offset: 3px;
+  text-decoration-thickness: 2px;
+  color: ${theme.colors.primaryColor};
+`;
+
+export default AuthGuide;

src/components/AuthSns/AuthSns.js → src/components/AuthSns/AuthSns.tsx

@@ -1,12 +1,13 @@
 import { Link } from "react-router-dom";
 import snsGoogle from "../../assets/images/icons/ic_sns_google.svg";
 import snsKakao from "../../assets/images/icons/ic_sns_kakao.svg";
+import styled from "@emotion/styled/macro";
 
 const AuthSns = () => {
   return (
-    <div className="auth-sns">
-      <h2 className="auth-sns__label">간편 로그인하기</h2>
-      <ul className="auth-sns__list">
+    <AuthSnsBox>
+      <AuthSnsLabel>간편 로그인하기</AuthSnsLabel>
+      <AuthSnsList>
         <li>
           <Link
             to="https://www.google.com/"
@@ -23,9 +24,31 @@ const AuthSns = () => {
             <img src={snsKakao} alt="카카오톡 아이콘" width="44" height="44" />
           </Link>
         </li>
-      </ul>
-    </div>
+      </AuthSnsList>
+    </AuthSnsBox>
   );
 };
 
+const AuthSnsBox = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 24px;
+  padding: 16px 23px;
+  background-color: #e6f2ff;
+  border-radius: 8px;
+`;
+
+const AuthSnsLabel = styled.h2`
+  display: block;
+  font-size: 16px;
+  font-weight: 500;
+`;
+
+const AuthSnsList = styled.ul`
+  display: flex;
+  align-items: center;
+  gap: 16px;
+`;
+
 export default AuthSns;

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 ButtonHTMLAttributes<HTMLButtonElement>,
+    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,10 @@
+import { forwardRef, InputHTMLAttributes } from "react";
+import { InputStyle } from "@styles/formStyles";
+
+interface Props extends InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = forwardRef<HTMLInputElement, Props>(({ ...props }, ref) => {
+  return <InputStyle ref={ref} {...props} />;
+});
+
+export default Input;