+
+ );
+}
+
+//텍스트 타입
+function TextInput({ id, type, placeholder, formStyle, onChange, onKeyDown }) {
+ const handleChange = (e) => {
+ if (e.target.id === "price") {
+ // 숫자 포멧
+ const value = e.target.value;
+ const onlyNumbers = value.replace(/[^0-9]/g, "");
+ const formattedValue = onlyNumbers.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+
+ e.target.value = formattedValue;
+ }
+ onChange(e);
+ };
+
+ return (
+ {title}
+ <> + {type == null ? ( + + ) : type == "file" ? ( +
+
+
+
+ );
+}
+
+//파일 & 미리보기
+function ImageFileGroup({ formStyle }) {
+ const inputRef = useRef();
+ const [preview, setPreview] = useState("");
+ const [fileError, setFileError] = useState("");
+
+ const handleInputChange = () => {
+ if (!preview) {
+ const value = inputRef.current.files[0]; //value
+ setPreview(URL.createObjectURL(value));
+ }
+ };
+
+ const handleInputClick = (e) => {
+ if (preview) {
+ e.preventDefault();
+ setFileError("*이미지 등록은 최대 1개 까지 가능합니다.");
+ }
+ };
+
+ const handleClearClick = () => {
+ const inputNode = inputRef.current; //노드애 직접 접근해 선택한 요소
+
+ if (!inputNode) return;
+ setPreview("");
+ setFileError("");
+ URL.revokeObjectURL(preview);
+ };
+
+ return (
+
+
+ {preview && (
+
+ );
+}
+
+//텍스트 area
+function TextArea({ id, placeholder, onChange, formStyle }) {
+ return (
+
+ 
+
+
+ )}
+ {fileError && {fileError}
} +
+
+
+
+ );
+}
+
+export default InputGroup;
diff --git a/src/main.jsx b/src/main.jsx
index 820103ef..e55b63a5 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -1,17 +1,17 @@
import { StrictMode } from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import { createRoot } from "react-dom/client";
-import "./assets/css/common.css";
+import "./assets/scss/common.scss";
import App from "./App.jsx";
import Items from "./pages/Items.jsx";
-import AddItems from "./pages/AddItems.jsx";
+import AddItem from "./pages/AddItem.jsx";
createRoot(document.getElementById("root")).render(
+
+
+
-
-
베스트 상품
+
+
베스트 상품
-
-
전체 상품
+
+
+
상품 등록하기