Date: Wed, 28 May 2025 14:36:51 +0900
Subject: [PATCH 5/5] Make Components
---
src/App.css | 3 +
src/App.jsx | 4 +
src/Pages/AddItem/AddItem.jsx | 144 +++++++++++++++++++++++
src/Pages/Items/Items.module.css | 4 -
src/assets/input/delete.svg | 5 +
src/assets/input/img.svg | 6 +
src/components/Button/Button.jsx | 12 +-
src/components/Button/Button.module.css | 6 +
src/components/Form/FormImg.jsx | 70 +++++++++++
src/components/Form/FormImg.module.css | 32 +++++
src/components/Form/FormInput.css | 14 +++
src/components/Form/FormInput.jsx | 34 ++++++
src/components/Form/FormInput.module.css | 31 +++++
src/components/Header/Header.module.css | 8 +-
src/variables.css | 4 +-
15 files changed, 367 insertions(+), 10 deletions(-)
create mode 100644 src/App.css
create mode 100644 src/Pages/AddItem/AddItem.jsx
create mode 100644 src/assets/input/delete.svg
create mode 100644 src/assets/input/img.svg
create mode 100644 src/components/Form/FormImg.jsx
create mode 100644 src/components/Form/FormImg.module.css
create mode 100644 src/components/Form/FormInput.css
create mode 100644 src/components/Form/FormInput.jsx
create mode 100644 src/components/Form/FormInput.module.css
diff --git a/src/App.css b/src/App.css
new file mode 100644
index 00000000..9dfa9354
--- /dev/null
+++ b/src/App.css
@@ -0,0 +1,3 @@
+:root {
+ background-color: var(--content-bg);
+}
\ No newline at end of file
diff --git a/src/App.jsx b/src/App.jsx
index fcb19062..e80336e4 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,11 +1,15 @@
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Items from './Pages/Items/Items.jsx';
+import AddItem from './Pages/AddItem/AddItem.jsx';
+
+import './App.css'
function App() {
return (
} />
+ }/>
);
diff --git a/src/Pages/AddItem/AddItem.jsx b/src/Pages/AddItem/AddItem.jsx
new file mode 100644
index 00000000..4e83bff8
--- /dev/null
+++ b/src/Pages/AddItem/AddItem.jsx
@@ -0,0 +1,144 @@
+import DeleteImg from '../../assets/input/delete.svg'
+
+import { useState } from "react";
+
+import Nav from "../../components/Nav/Nav";
+import Content from "../../components/Content/Content";
+import Header from '../../components/Header/Header';
+import Button from '../../components/Button/Button';
+import FormImg from "../../components/Form/FormImg";
+import FormInput from "../../components/Form/FormInput";
+
+import styles from './AddItem.module.css';
+
+const INITIAL_VALUES = {
+ name: '',
+ description: '',
+ price: '',
+ tags:[],
+ tagInput:'',
+ images: null,
+};
+
+
+function AddItem() {
+ const [values, setValues] = useState(INITIAL_VALUES)
+ const [isComposing, setIsComposing] = useState(false);
+
+ const handleChange = (name, value) => {
+ setValues((prevValues) => ({
+ ...prevValues,
+ [name]: value,
+ }));
+ };
+
+
+ const handleTagInputKeyDown = (e) => {
+ if (e.key === 'Enter' && !isComposing) {
+ e.preventDefault();
+
+ const newTag = values.tagInput.trim();
+
+ if (newTag !== '') {
+
+ if (!values.tags.includes(`#${newTag}`)) {
+ setValues((prev) => ({
+ ...prev,
+ tags: [...prev.tags, `#${newTag}`],
+ tagInput:'',
+ }))
+ } else {
+ setValues((prev) => ({
+ ...prev,
+ tagInput:'',
+ }))
+ }
+ }}
+ };
+
+
+ const handleRemoveTag = (tagToRemove) => {
+ setValues((prevValues) => ({
+ ...prevValues,
+ tags: prevValues.tags.filter((tag) => tag !== tagToRemove),
+ }));
+ };
+
+ const handleCompositionStart = () => {
+ setIsComposing(true);
+ };
+
+
+ const handleCompositionEnd = () => {
+ setIsComposing(false);
+ };
+
+ const isSubmitDisabled = !values.name || !values.description || values.price <= 0 || !values.images;
+
+ return(
+ <>
+
+
+
+
+
+ );
+}
+
+export default AddItem
\ No newline at end of file
diff --git a/src/Pages/Items/Items.module.css b/src/Pages/Items/Items.module.css
index ec3ac244..9f15564e 100644
--- a/src/Pages/Items/Items.module.css
+++ b/src/Pages/Items/Items.module.css
@@ -1,7 +1,3 @@
-:root {
- background-color: var(--content-bg);
-}
-
.headers {
margin: 16px 0 10px 0;
display: flex;
diff --git a/src/assets/input/delete.svg b/src/assets/input/delete.svg
new file mode 100644
index 00000000..87a00547
--- /dev/null
+++ b/src/assets/input/delete.svg
@@ -0,0 +1,5 @@
+
diff --git a/src/assets/input/img.svg b/src/assets/input/img.svg
new file mode 100644
index 00000000..e56d43e1
--- /dev/null
+++ b/src/assets/input/img.svg
@@ -0,0 +1,6 @@
+
diff --git a/src/components/Button/Button.jsx b/src/components/Button/Button.jsx
index fadb85cc..52abb6ee 100644
--- a/src/components/Button/Button.jsx
+++ b/src/components/Button/Button.jsx
@@ -1,10 +1,14 @@
+import { Link } from "react-router-dom";
import styles from "./Button.module.css";
-function Button({ href, buttonText, type }) {
+function Button({ href, buttonText, type = 'button', disabled }) {
+
+ const buttonClasses = `${styles.button}`;
return (
-
- {buttonText}
-
+
+
);
}
diff --git a/src/components/Button/Button.module.css b/src/components/Button/Button.module.css
index 20bcca07..9493febc 100644
--- a/src/components/Button/Button.module.css
+++ b/src/components/Button/Button.module.css
@@ -5,6 +5,8 @@
display: flex;
align-items: center;
justify-content: center;
+ font-size: var(--font-size-xs);
+ font-weight: 600;
padding: 12px 23px;
border-radius: 8px;
order: 1;
@@ -14,6 +16,10 @@
background-color: var(--primary-300);
}
+.button:disabled {
+ background-color: var(--cool-gray-400);
+}
+
/* Tablet Desktop*/
@media (min-width: 768px) {
.button {
diff --git a/src/components/Form/FormImg.jsx b/src/components/Form/FormImg.jsx
new file mode 100644
index 00000000..95559720
--- /dev/null
+++ b/src/components/Form/FormImg.jsx
@@ -0,0 +1,70 @@
+import Header from "../Header/Header";
+
+import { useState, useRef, useEffect } from "react";
+
+import Img from '../../assets/input/img.svg'
+import DeleteImg from '../../assets/input/delete.svg'
+
+import styles from './FormImg.module.css'
+
+function FormImg({ label, name, value, initialPreview, onChange }) {
+ const [preview, setPreview] = useState(initialPreview);
+ const inputRef = useRef();
+
+ const handleClick = () => {
+ inputRef?.current?.click();
+ };
+
+ const handleChange = (e) => {
+ const nextValue = e.target.files[0];
+ onChange(name, nextValue);
+ };
+
+ const handleClearClick = () => {
+ const inputNode = inputRef.current;
+ if (!inputNode) return;
+
+ inputNode.value = '';
+ onChange(name, null);
+ };
+
+ useEffect(() => {
+ if (!value) return;
+ const nextPreview = URL.createObjectURL(value);
+ setPreview(nextPreview);
+
+ return () => {
+ setPreview(initialPreview);
+ URL.revokeObjectURL(nextPreview);
+ };
+ }, [value, initialPreview]);
+
+
+ return(
+
+
+
+
+
+
+ {preview && (
+
+
+
+
+ )}
+
+
+
+
+ {type === 'textarea' ?
+