[김찬기] Sprint6

jsconfig.json

@@ -2,7 +2,6 @@
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
-      "@/*": ["src/*"],
       "@components/*": ["src/components/*"],
       "@hooks/*": ["src/hooks/*"],
       "@context/*": ["src/context/*"],

src/assets/scss/base/_reset.scss

@@ -74,7 +74,8 @@ button {
 img {
   vertical-align: top;
 }
-input {
+input,
+textarea {
   padding: 0;
   margin: 0;
   border: none;

src/assets/scss/common/_index.scss

@@ -0,0 +1 @@
+@forward "input";

src/assets/scss/common/_input.scss

@@ -0,0 +1,38 @@
+.field {
+  position: relative;
+
+  .field-box {
+    display: block;
+    width: 100%;
+    height: 5.6rem;
+    padding: 0 2.4rem;
+    border: 1px solid transparent;
+    border-radius: 12px;
+    background: var(--color-secondary-100);
+
+    &:focus,
+    &.valid {
+      border: 1px solid var(--color-primary-100);
+      outline: none;
+    }
+
+    &.error {
+      border: 1px solid var(--color-error);
+      outline: none;
+    }
+
+    &::placeholder {
+      color: var(--color-secondary-400);
+    }
+
+    &:has(~ button) {
+      padding-right: 5rem;
+    }
+  }
+
+  textarea.field-box {
+    height: 28.2rem;
+    padding: 2.4rem;
+    resize: none;
+  }
+}

src/assets/scss/style.scss

@@ -1 +1,2 @@
 @use "base";
+@use "common";

src/components/Field/Error.jsx

@@ -0,0 +1,12 @@
+import styles from "./Error.module.scss";
+
+export function Error({ error }) {
+  if (!error) {
+    return null;
+  }
+  return (
+    <div className={styles["item-error"]}>
+      {error || "오류가 발생했습니다."}
+    </div>
+  );
+}

src/components/Field/Error.module.scss

@@ -0,0 +1,7 @@
+.item-error {
+  margin-top: 0.8rem;
+  padding-left: 1.6rem;
+  font-size: 1.4rem;
+  font-weight: 600;
+  color: var(--color-error);
+}

src/components/Field/FieldItem.jsx

@@ -0,0 +1,15 @@
+import styles from "./FieldItem.module.scss";
+
+export function FieldItem({ children }) {
+  return <div className={styles["form-item"]}>{children}</div>;
+}
+
+function Label({ htmlFor, children }) {
+  return (
+    <label className={styles["item-label"]} htmlFor={htmlFor}>
+      {children}
+    </label>
+  );
+}
+
+FieldItem.Label = Label;

src/components/Field/FieldItem.module.scss

@@ -0,0 +1,26 @@
+@use "@assets/scss/base/mixins";
+
+.form-item {
+  margin-bottom: 2.4rem;
+  position: relative;
+
+  @include mixins.mobile {
+    margin-bottom: 1.6rem;
+  }
+
+  .item-label {
+    display: inline-block;
+    margin-bottom: 1.6rem;
+    font-size: 1.8rem;
+    font-weight: 700;
+
+    @include mixins.mobile {
+      margin-bottom: 0.8rem;
+      font-size: 1.4rem;
+    }
+  }
+
+  .item-field {
+    position: relative;
+  }
+}

src/components/Field/Form.jsx

@@ -0,0 +1,13 @@
+import { Alert, LoadingSpinner } from "@components/ui";
+
+export function Form({ isLoading, error, onSubmit, children }) {
+  return (
+    <>
+      {isLoading && <LoadingSpinner />}
+      {error && (
+        <Alert mode="error">{error.message || "오류가 발생했습니다."}</Alert>
+      )}
+      <form onSubmit={onSubmit}>{children}</form>
+    </>
+  );
+}

src/components/Field/ImageUpload.jsx

@@ -0,0 +1,46 @@
+import useSingleFile from "@hooks/useSingleFile";
+import { Preview, Error } from "@components/Field";
+import iconPlus from "@assets/img/icon/icon_plus.svg";
+import styles from "./ImageUpload.module.scss";
+
+const LIMIT_SIZE_MB = 2;
+
+export function ImageUpload({
+  error,
+  value,
+  id,
+  name,
+  onChange,
+  placeholder = "이미지 등록",
+}) {
+  const { fileProps, fileError, handleRemove, preview } = useSingleFile({
+    name,
+    value,
+    accept: "image/*",
+    limiSize: LIMIT_SIZE_MB,
+    onChange: (file) => onChange(name, file),
+    errorMessage: {
+      max: "이미지 등록은 최대 1개까지 가능합니다.",
+      accept: "이미지 파일만 업로드 가능합니다.",
+    },
+  });
+
+  // 두가지 에러 동시에 보내려고 문자열로 합침
+  const fileInputError = [fileError, error].filter((err) => err).join(" / ");
+
+  return (
+    <>
+      <div className={styles["thumbnail-list"]}>
+        <label className={styles["upload-button"]}>
+          <span className={styles["upload-label"]}>
+            <img src={iconPlus} alt="이미지 업로드" />
+            {placeholder}
+          </span>
+          <input id={id} name={name} className="a11y" {...fileProps} />
+        </label>
+        {preview && <Preview src={preview} onRemove={handleRemove} />}
+      </div>
+      <Error error={fileInputError} />
+    </>
+  );
+}

src/components/Field/ImageUpload.module.scss

@@ -0,0 +1,37 @@
+.thumbnail-list {
+  display: flex;
+  gap: 2.4rem;
+}
+
+.upload-button {
+  overflow: hidden;
+  position: relative;
+  display: block;
+  width: 100%;
+  max-width: 28.2rem;
+  border-radius: 1.6rem;
+  background: var(--color-secondary-100);
+  cursor: pointer;
+
+  &:before {
+    content: "";
+    display: block;
+    width: 100%;
+    height: 0;
+    padding-bottom: 100%;
+  }
+
+  .upload-label {
+    position: absolute;
+    left: 0;
+    top: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 1.3rem;
+    width: 100%;
+    height: 100%;
+    color: var(--color-secondary-400);
+  }
+}

src/components/Input/index.jsx → src/components/Field/Input.jsx

@@ -1,17 +1,11 @@
 import { useState } from "react";
 import clsx from "clsx";
+import { Error } from "@components/Field";
 import iconViewOn from "@assets/img/icon/icon_view_on.svg";
 import iconViewOff from "@assets/img/icon/icon_view_off.svg";
-import styles from "./styles.module.scss";
+import styles from "./Input.module.scss";
 
-export default function Input({
-  type = "text",
-  id,
-  label,
-  error,
-  value,
-  ...props
-}) {
+export function Input({ type = "text", error, value, ...props }) {
   const [currentType, setCurrentType] = useState(type);
   const valid = value && !error;
 
@@ -20,14 +14,11 @@ export default function Input({
   }
 
   return (
-    <div className={styles["form-item"]}>
-      <label className={styles["item-label"]} htmlFor={id}>
-        {label}
-      </label>
-      <div className={styles["item-field"]}>
+    <>
+      <div className="field">
         <input
           type={currentType}
-          className={clsx(styles["input-box"], valid && styles.valid)}
+          className={clsx("field-box", valid && "valid", error && "error")}
           value={value}
           {...props}
         />
@@ -48,7 +39,7 @@ export default function Input({
           </button>
         )}
       </div>
-      {error && <div className={styles["item-error"]}>{error}</div>}
-    </div>
+      <Error error={error} />
+    </>
   );
 }

src/components/Field/Input.module.scss

@@ -0,0 +1,20 @@
+.item-btn {
+  position: absolute;
+  top: 50%;
+  right: 2.4rem;
+  transform: translateY(-50%);
+  width: 2.4rem;
+  height: 2.4rem;
+  background-repeat: no-repeat;
+  background-size: 100% auto;
+  background-position: center;
+}
+
+.visibility-btn .icon-visibility-off,
+.visibility-btn.on .icon-visibility-on {
+  display: none;
+}
+
+.visibility-btn.on .icon-visibility-off {
+  display: block;
+}

src/components/Field/NumberInput.jsx

@@ -0,0 +1,35 @@
+import { useState } from "react";
+import clsx from "clsx";
+import { Error } from "@components/Field";
+
+export function NumberInput({
+  type = "number",
+  error,
+  value,
+  formatter,
+  ...props
+}) {
+  const [currentType, setCurrentType] = useState(type);
+  const valid = value && !error;
+  const formattedValue = formatter
+    ? currentType === "text"
+      ? formatter(value)
+      : value
+    : value;
+
+  return (
+    <>
+      <div className="field">
+        <input
+          type={currentType}
+          className={clsx("field-box", valid && "valid", error && "error")}
+          value={formattedValue}
+          onFocus={() => setCurrentType("number")}
+          onBlur={() => setCurrentType("text")}
+          {...props}
+        />
+      </div>
+      <Error error={error} />
+    </>
+  );
+}

src/components/Field/Preview.jsx

@@ -0,0 +1,13 @@
+import clearIcon from "@assets/img/icon/icon_clear.svg";
+import styles from "./Preview.module.scss";
+
+export function Preview({ src, onRemove }) {
+  return (
+    <figure className={styles.cover}>
+      <button type="button" className={styles.button} onClick={onRemove}>
+        <img src={clearIcon} alt="삭제" />
+      </button>
+      <img src={src} alt="상품 이미지" className={styles.img} />
+    </figure>
+  );
+}

src/components/Field/Preview.module.scss

@@ -0,0 +1,34 @@
+.cover {
+  overflow: hidden;
+  position: relative;
+  display: block;
+  width: 100%;
+  max-width: 28.2rem;
+  border-radius: 1.6rem;
+  background: var(--color-secondary-100);
+
+  &:before {
+    content: "";
+    display: block;
+    width: 100%;
+    height: 0;
+    padding-bottom: 100%;
+  }
+
+  .img {
+    position: absolute;
+    left: 0;
+    top: 0;
+    max-width: 100%;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .button {
+    z-index: 1;
+    position: absolute;
+    top: 1.2rem;
+    right: 1.2rem;
+  }
+}