[이상달] refactor/sprint8

src/components/Banner/Banner.tsx

@@ -0,0 +1,107 @@
+/** @jsxImportSource @emotion/react */
+import { ReactNode } from "react";
+import { useNavigate } from "react-router-dom";
+import Button from "@/components/ui/Button";
+import BannerStyle from "./BannerStyle";
+
+interface BannerInfoProps {
+  align: string;
+  children: ReactNode;
+}
+
+const BannerInfo = ({ children, align }: BannerInfoProps) => {
+  return <div className="banner-info">{children}</div>;
+};
+
+interface BannerButtonProps {
+  linkTo: string;
+  children: ReactNode;
+  ariaLabel?: string;
+}
+
+const BannerButton = ({
+  linkTo,
+  children = "구경하러 가기",
+  ariaLabel,
+}: BannerButtonProps) => {
+  const navigate = useNavigate();
+
+  return (
+    <Button
+      onClick={() => navigate(linkTo)}
+      aria-label={ariaLabel}
+      variant="bannerPrimary"
+      size="lg"
+    >
+      {children}
+    </Button>
+  );
+};
+
+interface BannerImageProps {
+  imgSrc: string;
+  imgAlt: string;
+  lazyLoading?: boolean;
+  align?: string;
+}
+
+const BannerImage = ({
+  imgSrc,
+  imgAlt,
+  lazyLoading,
+  align,
+}: BannerImageProps) => {
+  return (
+    <img
+      className="banner-img"
+      loading={lazyLoading ? "lazy" : "eager"}
+      src={imgSrc}
+      alt={imgAlt}
+    />
+  );
+};
+
+interface BannerProps {
+  title: string | ReactNode;
+  imgSrc: string;
+  imgAlt: string;
+  linkTo?: string;
+  ariaLabel?: string;
+  lazyLoading?: boolean;
+  infoAlign?: string;
+  imgAlign?: string;
+}
+
+const Banner = ({
+  title,
+  linkTo,
+  imgSrc,
+  imgAlt,
+  ariaLabel,
+  lazyLoading,
+  infoAlign = "left",
+  imgAlign = "right",
+}: BannerProps) => {
+  return (
+    <div css={BannerStyle} aria-label={ariaLabel}>
+      <div className="banner-container">
+        <BannerInfo align={infoAlign}>
+          <h2 className="banner-title">{title}</h2>
+          {linkTo && <BannerButton linkTo={linkTo}>구경하러 가기</BannerButton>}
+        </BannerInfo>
+        <BannerImage
+          imgSrc={imgSrc}
+          imgAlt={imgAlt}
+          lazyLoading={lazyLoading}
+          align={imgAlign}
+        />
+      </div>
+    </div>
+  );
+};
+
+Banner.Info = BannerInfo;
+Banner.Button = BannerButton;
+Banner.Image = BannerImage;
+
+export default Banner;

src/components/Banner/BannerStyle.ts

@@ -0,0 +1,126 @@
+/** @jsxImportSource @emotion/react */
+import { css } from "@emotion/react";
+import { BREAKPOINTS } from "@/constants/responsive";
+import { COLORS } from "@/styles/colors";
+import { FONT_SIZES } from "@/styles/fontSizes";
+
+const BannerStyle = css`
+  min-height: 540px;
+  background: ${COLORS.background.blue};
+  color: ${COLORS.gray[700]};
+  text-align: center;
+
+  .banner-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    height: 100%;
+    min-height: 540px;
+  }
+
+  .banner-hero {
+    background: ${COLORS.background.lightBlue};
+  }
+
+  .banner-title {
+    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: ${FONT_SIZES[18]};
+    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) {
+    .banner {
+      height: 926px;
+    }
+    .banner.banner-hero {
+      height: 770px;
+    }
+
+    .banner-info .btn-lg {
+      line-height: 32px;
+      font-size: ${FONT_SIZES[20]};
+    }
+  }
+
+  @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)) {
+    .banner-title {
+      font-size: clamp(32px, 5vw, 40px);
+    }
+  }
+`;
+
+export default BannerStyle;

src/components/Form/LoginForm.tsx

@@ -0,0 +1,89 @@
+/** @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";
+import { renderButtonTextByState } from "@/utils/renderButtonText";
+
+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}
+        >
+          {renderButtonTextByState(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;