From 88d28d152e5d3d318e4391185c2926216f671496 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EC=98=81=EC=A3=BC?= Date: Thu, 4 Jul 2024 15:50:22 +0900 Subject: [PATCH 01/15] =?UTF-8?q?rename(App.jsx):=20Router.jsx=EB=A1=9C=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .github/pull_request_template.md | 5 +++-- src/{App.jsx => Router.jsx} | 6 ++++-- src/index.jsx | 4 ++-- src/pages/Items.jsx | 6 +++--- src/pages/NotFound.jsx | 11 +++++++++++ 5 files changed, 23 insertions(+), 9 deletions(-) rename src/{App.jsx => Router.jsx} (85%) create mode 100644 src/pages/NotFound.jsx diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index 7129bc34b..780fcd7cb 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -23,7 +23,7 @@ design - 타블렛, 모바일 사이즈 미디어 쿼리 적용 -- 피그마 시안과 다른 디자인 부분(폰트, pageNavBar) 수정 +- 피그마 시안과 다른 디자인 부분(폰트 미적용, pageNavBar 레이아웃) 수정 fix @@ -43,4 +43,5 @@ factor ## 멘토에게 -- +- AddItem 페이지의 컴포넌트를 ItemDetails(아이템 정보 입력), ItemImageUpload(아이템 이미지 등록 기능), ItemTags(아이템 태그 추가 및 삭제 기능)로 분리해봤습니다. 관심사의 분리가 잘 이루어진 건지 모르겠습니다. +- 컴포넌트를 나누다보니 프롭 리프팅을 자주 사용하게 되는 것 같습니다. 프롭 드릴링 문제를 예방하려면, 프롭 리프팅은 어느정도 사용하는 게 적절할까요? 가이드 라인이 있는지 궁금합니다! diff --git a/src/App.jsx b/src/Router.jsx similarity index 85% rename from src/App.jsx rename to src/Router.jsx index a92990ba7..9e8d4f1d9 100644 --- a/src/App.jsx +++ b/src/Router.jsx @@ -7,8 +7,9 @@ import SignIn from "./pages/SignIn"; import Items from "./pages/Items"; import AddItem from "./pages/AddItem"; import Community from "./pages/Community"; +import NotFound from "./pages/NotFound"; -function App() { +function Router() { return (
@@ -19,10 +20,11 @@ function App() { } /> } /> } /> + } /> ); } -export default App; +export default Router; diff --git a/src/index.jsx b/src/index.jsx index 3a300dd1b..a8b04abbb 100644 --- a/src/index.jsx +++ b/src/index.jsx @@ -1,12 +1,12 @@ import React from "react"; import ReactDOM from "react-dom/client"; -import App from "./App"; +import Router from "./Router"; import "./assets/styles/global.css"; import "./assets/styles/mediaquery.css"; const root = ReactDOM.createRoot(document.getElementById("root")); root.render( - + ); diff --git a/src/pages/Items.jsx b/src/pages/Items.jsx index c6a9fad4b..190de865b 100644 --- a/src/pages/Items.jsx +++ b/src/pages/Items.jsx @@ -1,7 +1,7 @@ import React from "react"; -import BestItemsContainer from "../components/items/BestItemsContainer"; -import AllItemsContainer from "../components/items/AllItemsContainer"; -import PageNavBar from "../components/items/PageNavBar"; +import BestItemsContainer from "../components/Items/BestItemsContainer"; +import AllItemsContainer from "../components/Items/AllItemsContainer"; +import PageNavBar from "../components/Items/PageNavBar"; import "./Items.css"; function Items() { diff --git a/src/pages/NotFound.jsx b/src/pages/NotFound.jsx new file mode 100644 index 000000000..e3470b17f --- /dev/null +++ b/src/pages/NotFound.jsx @@ -0,0 +1,11 @@ +import React from "react"; + +function NotFound() { + return ( + <> +

X

+ + ); +} + +export default NotFound; From fee62ed0123269303ef7acaa2ca8e710807fadf7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EC=98=81=EC=A3=BC?= Date: Thu, 4 Jul 2024 16:36:58 +0900 Subject: [PATCH 02/15] =?UTF-8?q?refactor(Additem.jsx):=20ItemDetails,=20I?= =?UTF-8?q?temTags=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=B6=84?= =?UTF-8?q?=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/AddItem/ItemDetails.jsx | 21 +++++++++++++-------- src/components/AddItem/ItemTags.jsx | 7 ++++--- src/pages/AddItem.jsx | 23 +++-------------------- 3 files changed, 20 insertions(+), 31 deletions(-) diff --git a/src/components/AddItem/ItemDetails.jsx b/src/components/AddItem/ItemDetails.jsx index 7046e83a0..58f8b0071 100644 --- a/src/components/AddItem/ItemDetails.jsx +++ b/src/components/AddItem/ItemDetails.jsx @@ -1,7 +1,14 @@ import React from "react"; -import ItemTags from "./ItemTags"; -function ItemDetails({ details, onDetailsChange, onTagsChange }) { +function ItemDetails({ details, setDetails }) { + const handleDetailsChange = (e) => { + const { name, value } = e.target; + setDetails((prevDetails) => ({ + ...prevDetails, + [name]: value, + })); + }; + return (
@@ -13,7 +20,7 @@ function ItemDetails({ details, onDetailsChange, onTagsChange }) { name="itemName" placeholder="상품명을 입력해주세요" value={details.itemName} - onChange={onDetailsChange} + onChange={handleDetailsChange} />
@@ -25,7 +32,7 @@ function ItemDetails({ details, onDetailsChange, onTagsChange }) { name="itemDescription" placeholder="상품 소개를 입력해주세요" value={details.itemDescription} - onChange={onDetailsChange} + onChange={handleDetailsChange} /> @@ -33,16 +40,14 @@ function ItemDetails({ details, onDetailsChange, onTagsChange }) { - -
); } diff --git a/src/components/AddItem/ItemTags.jsx b/src/components/AddItem/ItemTags.jsx index c1cd497bc..3c37f80cb 100644 --- a/src/components/AddItem/ItemTags.jsx +++ b/src/components/AddItem/ItemTags.jsx @@ -1,6 +1,7 @@ import React, { useState } from "react"; -function ItemTags({ tags, onTagsChange }) { +function ItemTags({ initialTags }) { + const [tags, setTags] = useState(initialTags); const [tagInput, setTagInput] = useState(""); const handleInputChange = (e) => { @@ -10,13 +11,13 @@ function ItemTags({ tags, onTagsChange }) { const handleAddTag = (e) => { if (e.key === "Enter" && tagInput.trim()) { e.preventDefault(); - onTagsChange([...tags, tagInput.trim()]); + setTags([...tags, tagInput.trim()]); setTagInput(""); } }; const handleRemoveTag = (index) => { - onTagsChange(tags.filter((element, i) => i !== index)); + setTags(tags.filter((element, i) => i !== index)); }; return ( diff --git a/src/pages/AddItem.jsx b/src/pages/AddItem.jsx index 449020ef7..a8bf0c69f 100644 --- a/src/pages/AddItem.jsx +++ b/src/pages/AddItem.jsx @@ -2,6 +2,7 @@ import React, { useState, useEffect } from "react"; import "./AddItem.css"; import ItemImageUpload from "../components/AddItem/ItemImageUpload"; import ItemDetails from "../components/AddItem/ItemDetails"; +import ItemTags from "../components/AddItem/ItemTags"; function AddItem() { const [uploadedImage, setUploadedImage] = useState(null); @@ -17,21 +18,6 @@ function AddItem() { setUploadedImage(file); }; - const handleDetailsChange = (e) => { - const { name, value } = e.target; - setItemDetails((prevDetails) => ({ - ...prevDetails, - [name]: value, - })); - }; - - const handleTagsChange = (newTags) => { - setItemDetails((prevDetails) => ({ - ...prevDetails, - itemTags: newTags, - })); - }; - const handleSubmit = (e) => { e.preventDefault(); console.log("제출된 상품 정보:", itemDetails); @@ -58,11 +44,8 @@ function AddItem() { image={uploadedImage} onImageChange={handleImageChange} /> - + + ); From 500ee08e736cf93f1297e1ebe3a92175a6bfa3d5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EC=98=81=EC=A3=BC?= Date: Thu, 4 Jul 2024 16:52:04 +0900 Subject: [PATCH 03/15] =?UTF-8?q?refactor(ItemTags.jsx):=20tag=20=EB=B0=B0?= =?UTF-8?q?=EC=97=B4=20=EB=A0=8C=EB=8D=94=EB=A7=81=20index=20=EA=B0=92=20-?= =?UTF-8?q?>=20id=20=EA=B0=92?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/AddItem/ItemTags.jsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/AddItem/ItemTags.jsx b/src/components/AddItem/ItemTags.jsx index 3c37f80cb..407ab28fd 100644 --- a/src/components/AddItem/ItemTags.jsx +++ b/src/components/AddItem/ItemTags.jsx @@ -11,13 +11,13 @@ function ItemTags({ initialTags }) { const handleAddTag = (e) => { if (e.key === "Enter" && tagInput.trim()) { e.preventDefault(); - setTags([...tags, tagInput.trim()]); + setTags([...tags, { id: Date.now(), value: tagInput.trim() }]); setTagInput(""); } }; - const handleRemoveTag = (index) => { - setTags(tags.filter((element, i) => i !== index)); + const handleRemoveTag = (id) => { + setTags(tags.filter((tag) => tag.id !== id)); }; return ( @@ -32,12 +32,12 @@ function ItemTags({ initialTags }) { onKeyDown={handleAddTag} />
    - {tags.map((tag, index) => ( -
  • - {tag} + {tags.map((tag) => ( +
  • + {tag.value}
    • ))} From b06669a7021a2d1240f9801bd1408a1e821a989e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EC=98=81=EC=A3=BC?= Date: Thu, 4 Jul 2024 16:53:52 +0900 Subject: [PATCH 04/15] =?UTF-8?q?refactor(ItemDetails.jsx):=20htmlFor=20?= =?UTF-8?q?=EC=86=8D=EC=84=B1=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/AddItem/ItemDetails.jsx | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/src/components/AddItem/ItemDetails.jsx b/src/components/AddItem/ItemDetails.jsx index 58f8b0071..3767fa4fb 100644 --- a/src/components/AddItem/ItemDetails.jsx +++ b/src/components/AddItem/ItemDetails.jsx @@ -12,7 +12,9 @@ function ItemDetails({ details, setDetails }) { return (
    - +
    - +