[이상달] refactor/sprint8

src/components/Banner/Banner.tsx

@@ -0,0 +1,53 @@
+/** @jsxImportSource @emotion/react */
+import { ReactNode } from "react";
+import { useNavigate } from "react-router-dom";
+import Button from "@/components/ui/Button";
+import BannerStyle from "./BannerStyle";
+
+interface BannerProps {
+  title: string | ReactNode;
+  imgSrc: string;
+  imgAlt: string;
+  linkTo?: string;
+  ariaLabel?: string;
+  lazyLoading?: boolean;
+}
+
+const Banner = ({
+  title,
+  linkTo,
+  imgSrc,
+  imgAlt,
+  ariaLabel,
+  lazyLoading,
+}: BannerProps) => {
+  const navigate = useNavigate();
+
+  return (
+    <div css={BannerStyle} aria-label={ariaLabel}>
+      <div className="banner-container">
+        <div className="banner-info">
+          <h2 className="banner-title">{title}</h2>
+          {linkTo && (
+            <Button
+              onClick={() => navigate(linkTo)}
+              aria-label="상품 페이지로 이동"
+              variant="bannerPrimary"
+              size="lg"
+            >
+              구경하러 가기
+            </Button>
+          )}
+        </div>
+        <img
+          className="banner-img"
+          loading={lazyLoading ? "lazy" : "eager"}
+          src={imgSrc}
+          alt={imgAlt}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default Banner;

src/components/Banner/BannerStyle.ts

@@ -0,0 +1,128 @@
+/** @jsxImportSource @emotion/react */
+import { css } from "@emotion/react";
+import { BREAKPOINTS } from "@/constants/responsive";
+
+const BannerStyle = css`
+  min-height: 540px;
+  background: var(--background-blue);
+  color: var(--gray700);
+  text-align: center;
+
+  .banner-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    height: 100%;
+    min-height: 540px;
+  }
+
+  .banner-hero {
+    background: var(--background-blue-light);
+  }
+
+  .banner-title {
+    font-size: var(--banner-font-size);
+    margin-bottom: 18px;
+    word-break: keep-all;
+
+    @media (min-width: ${BREAKPOINTS.tablet}px) {
+      margin-bottom: 24px;
+    }
+
+    @media (min-width: ${BREAKPOINTS.desktop}px) {
+      margin-bottom: 32px;
+    }
+  }
+
+  .banner-info {
+    padding-top: 120px;
+  }
+
+  .banner-hero .banner-info {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 0 auto;
+    padding-top: 48px;
+    max-width: 240px;
+  }
+
+  .banner-info .btn-lg {
+    display: block;
+    width: 100%;
+    font-size: var(--banner-btn-font-size);
+    line-height: 24px;
+    max-width: 356px;
+  }
+
+  .banner-img {
+    width: 100%;
+    max-width: 744px;
+    margin: 0 auto;
+  }
+
+  @media (min-width: 640px) {
+    .banner-hero .banner-info {
+      padding: 84px 0 210px;
+      max-width: none;
+    }
+  }
+
+  @media (min-width: ${BREAKPOINTS.tablet}px) {
+    :root {
+      --banner-btn-font-size: 20px;
+    }
+
+    .banner {
+      height: 926px;
+    }
+    .banner.banner-hero {
+      height: 770px;
+    }
+
+    .banner-info .btn-lg {
+      line-height: 32px;
+    }
+  }
+
+  @media (min-width: ${BREAKPOINTS.desktop}px) {
+    .banner-container {
+      width: var(--container-width);
+      margin: 0 auto;
+    }
+
+    .banner,
+    .banner.banner-hero {
+      height: 540px;
+    }
+
+    .banner-hero .banner-info {
+      align-items: flex-start;
+    }
+
+    .banner-container {
+      flex-direction: row;
+      justify-content: center;
+      align-items: flex-end;
+    }
+
+    .banner-info {
+      padding-bottom: 10.75rem;
+    }
+    .banner-hero .banner-info {
+      padding-bottom: 6.25rem;
+    }
+
+    .banner-title {
+      text-align: left;
+    }
+  }
+
+  @supports (font-size: clamp(1rem, 2vw, 3rem)) {
+    :root {
+      --banner-font-size: clamp(32px, 5vw, 40px);
+    }
+  }
+`;
+
+export default BannerStyle;

src/components/Form/LoginForm.tsx

@@ -0,0 +1,88 @@
+/** @jsxImportSource @emotion/react */
+import FormStyle from "./FormStyle";
+import { Link } from "react-router-dom";
+import Button from "@/components/ui/Button";
+import SocialLogin from "@/components/SocialLogin/SocialLogin";
+import logoImg from "@/assets/images/logo.svg";
+import loginUser from "@/services/post/loginUser";
+import InputField from "../ui/Form/InputField";
+import PasswordField from "../ui/Form/PasswordField";
+import useAuthForm from "@/hooks/useAuthForm";
+
+const LoginForm = () => {
+  const {
+    formRef,
+    isSubmitting,
+    submitError,
+    handleBlur,
+    validateForm,
+    isFormValid,
+    fieldErrors,
+    handleSubmit,
+  } = useAuthForm({
+    onSubmit: async (userData) => {
+      await loginUser(userData);
+    },
+  });
+
+  return (
+    <form
+      className="form"
+      ref={formRef}
+      onSubmit={validateForm}
+      css={FormStyle}
+    >
+      <div className="form-logo">
+        <Link to="/" aria-label="새로고침">
+          <img src={logoImg} alt="판다마켓 로고" width="396" height="132" />
+        </Link>
+      </div>
+
+      <div className="form-contents">
+        <InputField
+          label="이메일"
+          inputId="userEmail"
+          type="email"
+          name="email"
+          placeholder="이메일"
+          required
+          onBlur={handleBlur}
+          fieldError={fieldErrors.email}
+        />
+        <PasswordField
+          label="비밀번호"
+          inputId="userPassword"
+          name="password"
+          placeholder="비밀번호"
+          onBlur={handleBlur}
+          fieldError={fieldErrors.password}
+        />
+
+        <Button
+          type="submit"
+          className="btn-lg btn-primary"
+          id="loginBtn"
+          disabled={!isFormValid}
+          variant="primary"
+          size="lg"
+          onClick={handleSubmit}
+        >
+          {isSubmitting ? "로그인중..." : "로그인"}
+        </Button>
+
+        {submitError && <p>{`${submitError}`}</p>}
+
+        <SocialLogin />
+
+        <div className="form-footer">
+          판다마켓이 처음이신가요?
+          <Link className="form-footer-link" to="/signUp">
+            회원가입
+          </Link>
+        </div>
+      </div>
+    </form>
+  );
+};
+
+export default LoginForm;

src/components/Form/SignUpForm.tsx

@@ -0,0 +1,106 @@
+/** @jsxImportSource @emotion/react */
+import { Link } from "react-router-dom";
+import logoImg from "@/assets/images/logo.svg";
+import Button from "@/components/ui/Button";
+import SocialLogin from "@/components/SocialLogin/SocialLogin";
+import InputField from "@/components/ui/Form/InputField";
+import PasswordField from "@/components/ui/Form/PasswordField";
+import FormStyle from "./FormStyle";
+import useAuthForm from "@/hooks/useAuthForm";
+import createUser from "@/services/post/createUser";
+
+const SignUpForm = () => {
+  const {
+    formRef,
+    isSubmitting,
+    submitError,
+    handleBlur,
+    validateForm,
+    isFormValid,
+    fieldErrors,
+    handleSubmit,
+  } = useAuthForm({
+    onSubmit: async (userData) => {
+      await createUser(userData);
+    },
+  });
+
+  return (
+    <form
+      className="form"
+      method="POST"
+      ref={formRef}
+      onSubmit={validateForm}
+      css={FormStyle}
+    >
+      <div className="form-logo">
+        <Link to="/" aria-label="새로고침">
+          <img src={logoImg} alt="판다마켓 로고" width="396" height="132" />
+        </Link>
+      </div>
+
+      <div className="form-contents">
+        <InputField
+          label="이메일"
+          inputId="userEmail"
+          type="email"
+          name="email"
+          placeholder="이메일"
+          required
+          onBlur={handleBlur}
+          fieldError={fieldErrors.email}
+        />
+        <InputField
+          label="닉네임"
+          inputId="userNickname"
+          type="text"
+          name="nickname"
+          placeholder="닉네임"
+          required
+          onBlur={handleBlur}
+          fieldError={fieldErrors.nickname}
+        />
+        <PasswordField
+          label="비밀번호"
+          inputId="userPassword"
+          name="password"
+          placeholder="비밀번호"
+          onBlur={handleBlur}
+          fieldError={fieldErrors.password}
+        />
+        <PasswordField
+          label="비밀번호 확인"
+          inputId="userPasswordChk"
+          name="passwordCheck"
+          placeholder="비밀번호 확인"
+          onBlur={handleBlur}
+          fieldError={fieldErrors.passwordCheck}
+        />
+
+        <Button
+          type="submit"
+          variant="primary"
+          size="lg"
+          id="signupBtn"
+          disabled={!isFormValid}
+          onClick={handleSubmit}
+        >
+          {isSubmitting ? "회원가입중..." : "회원가입"}
+        </Button>
+
+        {submitError && <p>{`${submitError}`}</p>}
+
+        <SocialLogin />
+
+        <div className="form-footer">
+          이미 회원이신가요?
+          <Link className="form-footer-link" to="/login">
+            로그인
+          </Link>
+        </div>
+      </div>
+    </form>
+  );
+};
+
+export default SignUpForm;