From e7fdd6288244b63a66cdf366ade388a6ce32cb97 Mon Sep 17 00:00:00 2001 From: Jeongmin Oh Date: Wed, 3 Jul 2024 23:13:54 +0900 Subject: [PATCH 1/8] =?UTF-8?q?feat(ProductListItem):=20=EA=B0=81=20?= =?UTF-8?q?=EC=83=81=ED=92=88=20=ED=81=B4=EB=A6=AD=20=EC=8B=9C=20=EC=83=81?= =?UTF-8?q?=ED=92=88=EC=9D=98=20=EC=83=81=EC=84=B8=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=EB=A1=9C=20=EC=9D=B4=EB=8F=99=ED=95=98=EB=8A=94=20?= =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Main.js | 2 ++ src/components/additem/FileInput.js | 1 - src/components/api.js | 2 +- src/components/items/BestProductList.js | 2 +- src/components/items/ProductListItem.css | 4 ++++ src/components/items/ProductListItem.js | 22 +++++++++++++--------- src/pages/ProductDetailPage.jsx | 5 +++++ 7 files changed, 26 insertions(+), 12 deletions(-) create mode 100644 src/pages/ProductDetailPage.jsx diff --git a/src/Main.js b/src/Main.js index c55e172eb..7b47d5218 100644 --- a/src/Main.js +++ b/src/Main.js @@ -3,6 +3,7 @@ import { BrowserRouter, Routes, Route } from "react-router-dom"; import App from "./App"; import ItemsPage from "./pages/ItemsPage"; import AddItemPage from "./pages/AddItemPage"; +import ProductDetailPage from "./pages/ProductDetailPage"; function Main() { return ( @@ -13,6 +14,7 @@ function Main() { } /> } /> + } /> diff --git a/src/components/additem/FileInput.js b/src/components/additem/FileInput.js index 590c48239..290b9d1b8 100644 --- a/src/components/additem/FileInput.js +++ b/src/components/additem/FileInput.js @@ -42,7 +42,6 @@ function FileInput({ name, onChange }) { 업로드한 이미지 미리보기 ({ id: products.id, - title: products.name, + name: products.name, description: products.description, price: products.price, image: products.images, diff --git a/src/components/items/BestProductList.js b/src/components/items/BestProductList.js index 21b3d36b6..c9e61f1f6 100644 --- a/src/components/items/BestProductList.js +++ b/src/components/items/BestProductList.js @@ -2,7 +2,7 @@ import "./BestProductList.css"; import ProductListItem from "./ProductListItem"; function BestProductList({ products }) { - const sortedProducts = products.sort( + const sortedProducts = [...products].sort( (a, b) => b["favoriteCount"] - a["favoriteCount"] ); const showedProducts = sortedProducts.slice(0, 4); diff --git a/src/components/items/ProductListItem.css b/src/components/items/ProductListItem.css index 2ae86b489..47baed7ed 100644 --- a/src/components/items/ProductListItem.css +++ b/src/components/items/ProductListItem.css @@ -1,3 +1,7 @@ +.product-detail-link { + text-decoration: none; +} + .image { display: block; margin-bottom: 16px; diff --git a/src/components/items/ProductListItem.js b/src/components/items/ProductListItem.js index 8a3ed099a..9a4050273 100644 --- a/src/components/items/ProductListItem.js +++ b/src/components/items/ProductListItem.js @@ -1,20 +1,24 @@ +import { Link } from "react-router-dom"; + import "./ProductListItem.css"; import likeIcon from "../../assets/images/ic_heart_empty.png"; function ProductListItem({ item, className }) { - const { title, price, image, favoriteCount } = item; + const { id, name, price, image, favoriteCount } = item; const classNames = `image ${className}`; return ( -
- {title} -
{title}
-
{price}원
-
- 좋아요 아이콘 -
{favoriteCount}
+ +
+ {name} +
{name}
+
{price}원
+
+ 좋아요 아이콘 +
{favoriteCount}
+
-
+ ); } diff --git a/src/pages/ProductDetailPage.jsx b/src/pages/ProductDetailPage.jsx new file mode 100644 index 000000000..e42a92ba4 --- /dev/null +++ b/src/pages/ProductDetailPage.jsx @@ -0,0 +1,5 @@ +function ProductDetailPage() { + return
; +} + +export default ProductDetailPage; From f6df0ae56db962adb792920a6e703acb92b1a564 Mon Sep 17 00:00:00 2001 From: Jeongmin Oh Date: Fri, 5 Jul 2024 11:53:44 +0900 Subject: [PATCH 2/8] =?UTF-8?q?feat(ProductDetailPage):=20=EC=83=81?= =?UTF-8?q?=ED=92=88=20=EC=83=81=EC=84=B8=20=ED=8E=98=EC=9D=B4=EC=A7=80?= =?UTF-8?q?=EC=97=90=EC=84=9C=20=EC=86=8C=EA=B0=9C=EA=B8=80=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/images/ic_back.png | Bin 0 -> 706 bytes src/assets/images/ic_heart_empty.png | Bin 459 -> 2280 bytes src/assets/images/ic_heart_full.png | Bin 335 -> 1391 bytes src/assets/images/ic_kebab.png | Bin 0 -> 188 bytes src/assets/images/img_default.png | Bin 0 -> 10360 bytes src/components/ProductDetail/Comment.jsx | 0 src/components/ProductDetail/CommentList.jsx | 0 .../ProductDetail/ProductDetailContent.css | 80 ++++++++++++++++ .../ProductDetail/ProductDetailContent.jsx | 86 ++++++++++++++++++ src/components/ProductDetail/Tag.css | 13 +++ src/components/ProductDetail/Tag.jsx | 7 ++ src/components/api.js | 12 ++- src/components/items/ProductListItem.css | 10 +- src/components/items/ProductListItem.js | 36 ++++++-- src/pages/ItemsPage.js | 2 +- src/pages/ProductDetailPage.css | 31 +++++++ src/pages/ProductDetailPage.jsx | 40 +++++++- 17 files changed, 298 insertions(+), 19 deletions(-) create mode 100644 src/assets/images/ic_back.png create mode 100644 src/assets/images/ic_kebab.png create mode 100644 src/assets/images/img_default.png create mode 100644 src/components/ProductDetail/Comment.jsx create mode 100644 src/components/ProductDetail/CommentList.jsx create mode 100644 src/components/ProductDetail/ProductDetailContent.css create mode 100644 src/components/ProductDetail/ProductDetailContent.jsx create mode 100644 src/components/ProductDetail/Tag.css create mode 100644 src/components/ProductDetail/Tag.jsx create mode 100644 src/pages/ProductDetailPage.css diff --git a/src/assets/images/ic_back.png b/src/assets/images/ic_back.png new file mode 100644 index 0000000000000000000000000000000000000000..55a926b79ffe77eacb959c3939845ddf44800c81 GIT binary patch literal 706 zcmV;z0zLhSP)Ng`+_myE&+s zDJR{EhRQ}_)m7HXl0;A7IhC0ZKr6pA+(xO%rGg4`DH570&4+QqImJO1=%E7@Lk`X-#Up8pUhF|xCi&*}xy zN|No!H<|aFH}!&;Tau!1`BLnXOeFOJNOAy@9DpPTAnA~wdO_@xOsngIjc)9cW`?rQ zdO@_3*nS>=uo4d@iNhb6+RnCj6q<5lnMtfE5Q9A`smS>wq@=Y)(wstIkP}oA>vL`s z`Pqkn206hbvF>KM<$0ELE*#_pk#t0mD)0Y9vW1+pOXB8tZi@%$buvjHCd3< o1nVPIqyz&100000008jDFNj`kbgL~^F8}}l07*qoM6N<$f*i*+n*aa+ literal 0 HcmV?d00001 diff --git a/src/assets/images/ic_heart_empty.png b/src/assets/images/ic_heart_empty.png index 0d2e8e4c2cebfb2cdd011020233735cf1213bcf2..30b0c80f44040f614021b01cebc118d6da3499e2 100644 GIT binary patch delta 2275 zcmV<92pspz1LzSpiBL{Q4GJ0x0000DNk~Le0001B0001B2nGNE0OFW;H~;_u32;bR za{vG#H~;`4H~~eLF<_B4AAbmaNkln({6hQx;Y!5{;QJF5HONW^Rh@r4t z1uCE;6}SW2GsrfXA(c;EW&*ZIu!qiamsHqQNX2<3gEfYkK$k9;E~N;QnG8m^`Tu+( zwzPY@ciNLr*1iVN>P~zA@BaP&-`@qmVzF2(7K_DVu~;k?i^Vc5Fn{PH71u4k{Rc|W zf^i3+#2ol22%zXV(BuKU#@@Uf`4GIC>oy?+=I*#*;*?=3Tc`*n`K| zhjB1VPXj`PF$K_6-+Kcq_|P{XBXAVDYs*X3xbK7mAVA^wKI-M5X&N1cX%n--hytRA zUdO+d5?n?LT$8czPvE+vl|g;=zB?^ynp-I20MYeDTF}NOkCxH?| zv-1{y1Nq2r;=?`|37{tW?KYK)TYOgl8c`9_b2T~`XjvHZ)iE>^Ypc$G}U8^=hfpGLU zdwh!!)0o;L8T|XA((JcpXx@Q1VL=UnQf0+ug7GHto5bs*zL5c4c zVqY}rctNGEPdH>=t}$qw0I^K)B~)xcmN*#~-c+2K9BPuj>}iuq0Ty$lQa}JayNZJ$ zLq`FA=Ld|j5?Bs#Q{wHQ7wN}cr&K_@Y=7h+m~JhB13jg0|WsED&-Vd4#5L1 zbT>ynh>w}nCWvv-4N9s2W7t5m+?{s7fK^ptt)2k|=7~Ok=VVucIEaWU>d<=psk%<7 zfT;AYJKxRJiKbzJ%5*^Vs+NKB?VR5G04~UUqQ-Ud-NS(FcVmK-WF;{!svPm3!SJ+u5x!cJtC@) z1xd-IZgqyX0;IEGza(!RhK!l7-EmoQGVP)PO%mmTS}kcwUU~M8y8=T3*?rcM)`8ZO zlxHSVz@u;Zr4Cin7SW zGk|!}@S2~UD{nargb^SEcJVmPgxSUFbr!&n_}7m`?Y(RSNu>aSlyL5RnSXK}*Cd@P zpS@5nK7Z!@0s~C66^jb5PKesk>};a&Z$U~@D}dPD@qUjj7w7N=trr)*EN?YD?_U@& zH1@%5jJDubqmlmEw5p?3M0>`h_7TWC7=tO(+x)XaXVW<|wExVA0*ILk1}0AE8!$qR}DV}Q*#4=FEh zD((El(NG7uo9UtOFQM@Nf(*!P2DDM^F5e$rAL8QNhvUIIQMs8WcYpj#e*^kJ9^F(l zk?Z|%Ggb6O0YqNh)X2?z9DkyhIX6>9-xNS-xv4BXYa(${OY8TKz|B;V*&;0BeG<^8h7{eN&%DV2=cB$Fm|Gea*dfQhW!Och5q1KMc0siPPKrC6Lbvze8& zyIV|f(p506p zxm5t6@{mwLn*|1b5XcwXEK|uQ$h889+3@8JOIP-o12S%h4#bU8oEF>0-#bU8oEEbE!VzC?*{{eLI!0DjgF=hY&002ovPDHLkV1h!@B`g2{ delta 439 zcmV;o0Z9Jn5z7NMiBL{Q4GJ0x0000DNk~Le0000G0000G2nGNE03Y-JVE_OC32;bR za{vGf6951U69E94oEVWdAAbR0Nklsp@&@V~+#_JD%--HOdxQ%Hqgd%Ao86h6`F7_A;I9RDmD)wn zr4$q)m5^}dNM~s6+UO~7C%j_53zv73;U2(iwnrS)0>W!nS0JcM1b@ew2jNvG?d_TXfLl(`41r8 zz_Yx-lg=$ffJT3I)jeOTS6wJU-Cy0?yrJ%&!PNW)`aO0%9unOF#^`tDzWLGsUFOFM zRkaD8eK&@he7--?!DoZ>DMHm_8PObIS{vXY@QuCzoT?wkz6PMt)uE^17u917kSS+$ zrVx|BMEZ3s%e2C?vp5QzJ({#LyjKs4}3efi_6 z5~cwVp4V^nl@tK^Fhp+%;(&Rp&)%t5TM!)_D<=#Wy+f}r_f)GthelAnA)EE_=NC6n zgW3+DSC{+hDksn=Upv8s9hzN7ZutwUk`M5-GXYOBsDT;e8h4l5y0*-h&pxIbkg^I&Sx8c=}PgV3}GViz! z%+4Xm#M%Gs3@~6h;QnG=5cu4EU_}dF54bD$r1d+Z z#sW?;W(Xqhncmu>#)A18Sv6J%+>hv85In#=TM2s)z*!m-omGV3ds`8^14vrGH<^0w zY%OBvTM+y(<3RPKjNt&>0>PiMI)pPEAo8;o8CFinYJWYD5$YojXc=)p%WwwaDF`(v zr&aGVCSnwQf8;vDnTY)bf2F&Rs{_o| zJF{ ziofizqJIY40n!VcU^iCBwV-?mf(4ViFy@waa)23Bklui>1ifySIfZJ!?dhY-3y_@> zUxU!c(;X+p=(!xNLy@eKehD4B8edZ*Lq9)>}b?Brj7V$V?lJZqA(#WLeLsisVo-vn+c}8sFR%T0+TG-NjkCwDF0f@j0}% zJ$Sf z3?@^}q%Te5Ym!b=H3Mb6op_U&OUWTfHUvGyEaYXG>v5UUmy$!U5{cSo;KaPc-;Jkb zX8Ok0tW2gnYa!3%vf(fljn82vLeOJqbTt5?m*zku(x;Ko)co_E&5e^bmlXs-5F`Xa l5ClOG1VIo4K@fyxd<0+-*gGp}=D7d>002ovPDHLkV1mnAc=G@N delta 314 zcmV-A0mc6B3eN&IiBL{Q4GJ0x0000DNk~Le0000G0000G2nGNE03Y-JVE_OC32;bR za{vGf6951U69E94oEVWdAAbPkNklpi zB}fHw01ocTm@(224g_ePDySQ?BMq0P~F}WZ7yE1VQAoz!16ZcVORi`k%{(Yio4o z=DS!k M07*qoM6N<$g3X10hX4Qo diff --git a/src/assets/images/ic_kebab.png b/src/assets/images/ic_kebab.png new file mode 100644 index 0000000000000000000000000000000000000000..b390f973f5e094a02a3d874acb45d424de1c4966 GIT binary patch literal 188 zcmeAS@N?(olHy`uVBq!ia0vp^5+KaM1|%Pp+x`GjoCO|{#S9GG!XV7ZFl!D-1!HlL zyA#8@b22Z19F}xPUq=Rpjs4tz5?O)#Ku;IPkP61P7kBeADDp4|+|ND15W>U6<8+ci z=R`Qq1QU@5*DpM<2x8cEZ~4zTMIYB*GjKW>DXcnEo~!srm3yPfVr_;;dP2GN>~cRD dZHz85%1+WS{j~aw?H-`v44$rjF6*2Ung9%@H_`wA literal 0 HcmV?d00001 diff --git a/src/assets/images/img_default.png b/src/assets/images/img_default.png new file mode 100644 index 0000000000000000000000000000000000000000..463f0aaa2a1c52d121e064db47e2fb6feaebb02a GIT binary patch literal 10360 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 A8vp { + e.target.src = errorImage; +}; + +function ProductDetailContent({ product }) { + const { + id, + name, + description, + price, + images, + favoriteCount, + tags = [], + } = product; + + const [isButtonClicked, setIsButtonClicked] = useState(false); + const handleButtonClick = () => { + setIsButtonClicked(!isButtonClicked); + }; + + return ( +
+ {name} +
+
+
+
{name}
+ 케밥 메뉴 아이콘 +
+
{price}원
+ +
+
상품 소개
+
{description}
+
상품 태그
+
    + {tags.length > 0 && + tags.map((tag) => { + return ( +
  • + +
    • + ); + })} +
+
+
+ + +
+
+ ); +} + +export default ProductDetailContent; diff --git a/src/components/ProductDetail/Tag.css b/src/components/ProductDetail/Tag.css new file mode 100644 index 000000000..8b9d1b133 --- /dev/null +++ b/src/components/ProductDetail/Tag.css @@ -0,0 +1,13 @@ +.product-tag { + margin-right: 8px; + padding: 6px 16px; + height: 36px; + float: left; + border-radius: 26px; + background-color: var(--gray100); + font-size: 16px; + font-weight: normal; + text-align: center; + line-height: 24px; + color: var(--gray800); +} diff --git a/src/components/ProductDetail/Tag.jsx b/src/components/ProductDetail/Tag.jsx new file mode 100644 index 000000000..0eaff8bf1 --- /dev/null +++ b/src/components/ProductDetail/Tag.jsx @@ -0,0 +1,7 @@ +import "./Tag.css"; + +function Tag({ tag }) { + return
#{tag}
; +} + +export default Tag; diff --git a/src/components/api.js b/src/components/api.js index f4392dc9b..6d37531d4 100644 --- a/src/components/api.js +++ b/src/components/api.js @@ -1,6 +1,6 @@ const BASE_URL = "https://panda-market-api.vercel.app"; -async function fetchProductData() { +export async function fetchProductData() { const url = `${BASE_URL}/products`; const response = await fetch(url); @@ -20,4 +20,12 @@ async function fetchProductData() { return data; } -export default fetchProductData; +export async function fetchProductDataWithId(productId) { + const url = `${BASE_URL}/products/${productId}`; + const response = await fetch(url); + + if (!response || !response.ok) return []; + const result = await response.json(); + + return result; +} diff --git a/src/components/items/ProductListItem.css b/src/components/items/ProductListItem.css index 47baed7ed..e1901dc70 100644 --- a/src/components/items/ProductListItem.css +++ b/src/components/items/ProductListItem.css @@ -2,7 +2,7 @@ text-decoration: none; } -.image { +.product-list-item .image { display: block; margin-bottom: 16px; object-fit: cover; @@ -19,28 +19,28 @@ height: 221px; } -.title { +.product-list-item .title { margin-bottom: 6px; font-weight: 500; font-size: 14px; color: var(--gray800); } -.price { +.product-list-item .price { margin-bottom: 6px; font-weight: bold; font-size: 16px; color: var(--gray800); } -.like { +.product-list-item .like { display: flex; justify-content: flex-start; align-items: center; gap: 4px; } -.like-num { +.product-list-item .like-num { font-weight: 500; font-size: 12px; color: var(--gray600); diff --git a/src/components/items/ProductListItem.js b/src/components/items/ProductListItem.js index 9a4050273..626ab5933 100644 --- a/src/components/items/ProductListItem.js +++ b/src/components/items/ProductListItem.js @@ -2,23 +2,39 @@ import { Link } from "react-router-dom"; import "./ProductListItem.css"; import likeIcon from "../../assets/images/ic_heart_empty.png"; +import errorImage from "../../assets/images/img_default.png"; + +const onErrorImg = (e) => { + e.target.src = errorImage; +}; function ProductListItem({ item, className }) { const { id, name, price, image, favoriteCount } = item; const classNames = `image ${className}`; return ( - -
- {name} -
{name}
-
{price}원
-
- 좋아요 아이콘 -
{favoriteCount}
-
+
+ + {name} + +
{name}
+
{price}원
+
+ 좋아요 아이콘 +
{favoriteCount}
- +
); } diff --git a/src/pages/ItemsPage.js b/src/pages/ItemsPage.js index 2a1da7e86..9f3b38eae 100644 --- a/src/pages/ItemsPage.js +++ b/src/pages/ItemsPage.js @@ -1,7 +1,7 @@ import { useState, useEffect } from "react"; import "./ItemsPage.css"; -import fetchProductData from "../components/api"; +import { fetchProductData } from "../components/api"; import BestProductList from "../components/items/BestProductList"; import AllProductList from "../components/items/AllProductList"; diff --git a/src/pages/ProductDetailPage.css b/src/pages/ProductDetailPage.css new file mode 100644 index 000000000..b27c012a0 --- /dev/null +++ b/src/pages/ProductDetailPage.css @@ -0,0 +1,31 @@ +.product-detail { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 1200px; + margin: 70px auto 0; + padding-top: 24px; +} + +.backto-list-button { + display: flex; + justify-content: center; + align-items: center; + width: 240px; + height: 48px; + padding: 12px; + border: none; + border-radius: 40px; + background-color: var(--blue); + font-size: 18px; + font-weight: 600; + text-decoration: none; + line-height: 24px; + color: var(--white); + cursor: pointer; +} + +.backto-list-button-img { + margin-left: 10px; +} diff --git a/src/pages/ProductDetailPage.jsx b/src/pages/ProductDetailPage.jsx index e42a92ba4..f12ea2886 100644 --- a/src/pages/ProductDetailPage.jsx +++ b/src/pages/ProductDetailPage.jsx @@ -1,5 +1,43 @@ +import { useParams, Link } from "react-router-dom"; +import { useState, useEffect } from "react"; +import { fetchProductDataWithId } from "../components/api"; + +import "./ProductDetailPage.css"; +import goBackIcon from "../assets/images/ic_back.png"; + +import ProductDetailContent from "../components/ProductDetail/ProductDetailContent"; +import CommentList from "../components/ProductDetail/CommentList"; + function ProductDetailPage() { - return
; + const [productDetails, setProductDetails] = useState([]); + + const { productId } = useParams(); + + useEffect(() => { + async function getProductDetail() { + const data = await fetchProductDataWithId(productId); + setProductDetails(data); + } + + getProductDetail(); + }, []); + + return ( +
+ + {/* */} + + 목록으로 돌아가기 + 되돌아가기 아이콘 + +
+ ); } export default ProductDetailPage; From 1dc576fb80d543bfc0155e9201701f59ea7a15b2 Mon Sep 17 00:00:00 2001 From: Jeongmin Oh Date: Fri, 5 Jul 2024 16:43:02 +0900 Subject: [PATCH 3/8] =?UTF-8?q?feat(CommentList):=20=EB=AC=B8=EC=9D=98?= =?UTF-8?q?=ED=95=98=EA=B8=B0=20textarea=20=EB=B0=8F=20=EB=93=B1=EB=A1=9D?= =?UTF-8?q?=20=EB=B2=84=ED=8A=BC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Nav.css | 2 +- src/components/ProductDetail/CommentList.css | 48 +++++++++++++++++++ src/components/ProductDetail/CommentList.jsx | 37 ++++++++++++++ .../ProductDetail/ProductDetailContent.css | 1 + src/pages/ProductDetailPage.css | 1 + src/pages/ProductDetailPage.jsx | 2 +- 6 files changed, 89 insertions(+), 2 deletions(-) create mode 100644 src/components/ProductDetail/CommentList.css diff --git a/src/components/Nav.css b/src/components/Nav.css index 16a0f7313..a75ef0a92 100644 --- a/src/components/Nav.css +++ b/src/components/Nav.css @@ -59,7 +59,7 @@ nav { cursor: pointer; } -.active { +.menu.active { color: var(--blue); } diff --git a/src/components/ProductDetail/CommentList.css b/src/components/ProductDetail/CommentList.css new file mode 100644 index 000000000..e7ccff84d --- /dev/null +++ b/src/components/ProductDetail/CommentList.css @@ -0,0 +1,48 @@ +.ask-wrapper { + display: flex; + flex-direction: column; + justify-content: flex-end; + align-items: flex-end; + margin-bottom: 24px; + width: 100%; +} + +.ask-label { + width: 100%; + font-size: 16px; + font-weight: normal; + color: var(--gray900); +} + +.ask-content { + width: 100%; + height: 104px; + margin-top: 16px; + margin-bottom: 16px; + padding: 16px 24px; + border: none; + border-radius: 12px; + background-color: var(--gray100); +} +.ask-content::placeholder { + font-size: 16px; + font-weight: normal; + color: var(--gray400); +} + +.add-ask-button { + width: 74px; + height: 42px; + padding: auto 23px; + border: none; + border-radius: 8px; + background-color: var(--gray400); + font-size: 16px; + font-weight: 600; + color: var(--white); +} + +.add-ask-button.active { + background-color: var(--blue); + cursor: pointer; +} diff --git a/src/components/ProductDetail/CommentList.jsx b/src/components/ProductDetail/CommentList.jsx index e69de29bb..721e80ed6 100644 --- a/src/components/ProductDetail/CommentList.jsx +++ b/src/components/ProductDetail/CommentList.jsx @@ -0,0 +1,37 @@ +import { useMemo, useState } from "react"; +import "./CommentList.css"; + +function CommentList() { + const placeholder = + "개인정보를 공유 및 요청하거나 명예 훼손, 무단 광고, 불법 정보 유포 시 모니터링 후 삭제될 수 있으며, " + + "이에 대한 민형사상 책임은 게시자에게 있습니다."; + + const [isInputFill, setIsInputFill] = useState(false); + + const handleValueChange = (e) => { + setIsInputFill(e.target.value !== ""); + }; + + const buttonClassName = isInputFill + ? "add-ask-button active" + : "add-ask-button"; + + return ( +
+ + + +
+ ); +} + +export default CommentList; diff --git a/src/components/ProductDetail/ProductDetailContent.css b/src/components/ProductDetail/ProductDetailContent.css index 581149899..9dd17be78 100644 --- a/src/components/ProductDetail/ProductDetailContent.css +++ b/src/components/ProductDetail/ProductDetailContent.css @@ -1,6 +1,7 @@ .contents-wrapper { display: flex; justify-content: space-between; + margin-bottom: 24px; padding-bottom: 32px; width: 100%; border-bottom: solid 1px var(--gray200); diff --git a/src/pages/ProductDetailPage.css b/src/pages/ProductDetailPage.css index b27c012a0..829eba6e6 100644 --- a/src/pages/ProductDetailPage.css +++ b/src/pages/ProductDetailPage.css @@ -14,6 +14,7 @@ align-items: center; width: 240px; height: 48px; + margin-bottom: 24px; padding: 12px; border: none; border-radius: 40px; diff --git a/src/pages/ProductDetailPage.jsx b/src/pages/ProductDetailPage.jsx index f12ea2886..e1f8116c9 100644 --- a/src/pages/ProductDetailPage.jsx +++ b/src/pages/ProductDetailPage.jsx @@ -25,7 +25,7 @@ function ProductDetailPage() { return (
- {/* */} + 목록으로 돌아가기 Date: Fri, 5 Jul 2024 22:01:15 +0900 Subject: [PATCH 4/8] =?UTF-8?q?feat(ProductDetailPage):=20=EC=BD=94?= =?UTF-8?q?=EB=A9=98=ED=8A=B8=20=EB=AA=A9=EB=A1=9D=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ProductDetail/Comment.css | 29 ++++++++++++++++++ src/components/ProductDetail/Comment.jsx | 31 ++++++++++++++++++++ src/components/ProductDetail/CommentList.css | 5 ++++ src/components/ProductDetail/CommentList.jsx | 24 +++++++++++---- src/pages/ItemsPage.js | 2 +- src/pages/ProductDetailPage.jsx | 14 ++++++--- src/{components => utils}/api.js | 14 ++++++++- 7 files changed, 107 insertions(+), 12 deletions(-) create mode 100644 src/components/ProductDetail/Comment.css rename src/{components => utils}/api.js (68%) diff --git a/src/components/ProductDetail/Comment.css b/src/components/ProductDetail/Comment.css new file mode 100644 index 000000000..03bdbaf72 --- /dev/null +++ b/src/components/ProductDetail/Comment.css @@ -0,0 +1,29 @@ +.comment-wrapper { + margin-bottom: 24px; + border-bottom: solid 1px var(--gray200); +} + +.comment-content { + margin-bottom: 24px; + font-size: 16px; + font-weight: normal; + line-height: 140%; + color: var(--gray800); +} + +.comment-wrapper .writer { + display: flex; + justify-content: flex-start; + align-items: flex-start; + margin-bottom: 24px; +} + +.writer .image { + margin-right: 8px; +} + +.comment-wrapper .nickname { + font-size: 14px; + font-weight: normal; + color: var(--gray600); +} diff --git a/src/components/ProductDetail/Comment.jsx b/src/components/ProductDetail/Comment.jsx index e69de29bb..469b0b69f 100644 --- a/src/components/ProductDetail/Comment.jsx +++ b/src/components/ProductDetail/Comment.jsx @@ -0,0 +1,31 @@ +import "./Comment.css"; + +function Comment({ comment }) { + const { + writer: { image, nickname }, + content, + updateAt, + } = comment; + + const updateDate = new Date(updateAt); + const updatedTime = new Date(updateAt) - new Date(); + + return ( +
+
{content}
+
+ {nickname} +
{nickname}
+
{updateAt}
+
+
+ ); +} + +export default Comment; diff --git a/src/components/ProductDetail/CommentList.css b/src/components/ProductDetail/CommentList.css index e7ccff84d..f6020a340 100644 --- a/src/components/ProductDetail/CommentList.css +++ b/src/components/ProductDetail/CommentList.css @@ -46,3 +46,8 @@ background-color: var(--blue); cursor: pointer; } + +.comment-lists { + width: 100%; + list-style: none; +} diff --git a/src/components/ProductDetail/CommentList.jsx b/src/components/ProductDetail/CommentList.jsx index 721e80ed6..82c7940ef 100644 --- a/src/components/ProductDetail/CommentList.jsx +++ b/src/components/ProductDetail/CommentList.jsx @@ -1,11 +1,9 @@ -import { useMemo, useState } from "react"; -import "./CommentList.css"; +import { useState } from "react"; -function CommentList() { - const placeholder = - "개인정보를 공유 및 요청하거나 명예 훼손, 무단 광고, 불법 정보 유포 시 모니터링 후 삭제될 수 있으며, " + - "이에 대한 민형사상 책임은 게시자에게 있습니다."; +import "./CommentList.css"; +import Comment from "./Comment"; +function CommentList({ comments }) { const [isInputFill, setIsInputFill] = useState(false); const handleValueChange = (e) => { @@ -16,6 +14,10 @@ function CommentList() { ? "add-ask-button active" : "add-ask-button"; + const placeholder = + "개인정보를 공유 및 요청하거나 명예 훼손, 무단 광고, 불법 정보 유포 시 모니터링 후 삭제될 수 있으며, " + + "이에 대한 민형사상 책임은 게시자에게 있습니다."; + return (
); } diff --git a/src/pages/ItemsPage.js b/src/pages/ItemsPage.js index 9f3b38eae..cdf733ce6 100644 --- a/src/pages/ItemsPage.js +++ b/src/pages/ItemsPage.js @@ -1,7 +1,7 @@ import { useState, useEffect } from "react"; import "./ItemsPage.css"; -import { fetchProductData } from "../components/api"; +import { fetchProductData } from "../utils/api"; import BestProductList from "../components/items/BestProductList"; import AllProductList from "../components/items/AllProductList"; diff --git a/src/pages/ProductDetailPage.jsx b/src/pages/ProductDetailPage.jsx index e1f8116c9..90f0daed5 100644 --- a/src/pages/ProductDetailPage.jsx +++ b/src/pages/ProductDetailPage.jsx @@ -1,6 +1,6 @@ import { useParams, Link } from "react-router-dom"; import { useState, useEffect } from "react"; -import { fetchProductDataWithId } from "../components/api"; +import { fetchProductDataById, fetchProductComment } from "../utils/api"; import "./ProductDetailPage.css"; import goBackIcon from "../assets/images/ic_back.png"; @@ -10,22 +10,28 @@ import CommentList from "../components/ProductDetail/CommentList"; function ProductDetailPage() { const [productDetails, setProductDetails] = useState([]); + const [productComments, setProductComments] = useState([]); const { productId } = useParams(); useEffect(() => { async function getProductDetail() { - const data = await fetchProductDataWithId(productId); + const data = await fetchProductDataById(productId); setProductDetails(data); } - getProductDetail(); + + async function getProductComment() { + const data = await fetchProductComment(productId); + setProductComments(data); + } + getProductComment(); }, []); return (
- + 목록으로 돌아가기 Date: Fri, 5 Jul 2024 22:49:28 +0900 Subject: [PATCH 5/8] =?UTF-8?q?feat(Comment):=20=EC=BD=94=EB=A9=98?= =?UTF-8?q?=ED=8A=B8=EA=B0=80=20=EC=97=85=EB=8D=B0=EC=9D=B4=ED=8A=B8=20?= =?UTF-8?q?=EB=90=9C=20=EC=8B=9C=EC=A0=90=EC=9C=BC=EB=A1=9C=EB=B6=80?= =?UTF-8?q?=ED=84=B0=20=EA=B2=BD=EA=B3=BC=ED=95=9C=20=EC=8B=9C=EA=B0=84?= =?UTF-8?q?=EC=9D=84=20=EA=B3=84=EC=82=B0=ED=95=98=EB=8A=94=20util=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ProductDetail/Comment.css | 20 +++++++++++++++--- src/components/ProductDetail/Comment.jsx | 15 ++++++++------ src/utils/getTimeElapsed.js | 26 ++++++++++++++++++++++++ 3 files changed, 52 insertions(+), 9 deletions(-) create mode 100644 src/utils/getTimeElapsed.js diff --git a/src/components/ProductDetail/Comment.css b/src/components/ProductDetail/Comment.css index 03bdbaf72..ec67daf37 100644 --- a/src/components/ProductDetail/Comment.css +++ b/src/components/ProductDetail/Comment.css @@ -11,19 +11,33 @@ color: var(--gray800); } -.comment-wrapper .writer { +.writer-wrapper { display: flex; justify-content: flex-start; align-items: flex-start; margin-bottom: 24px; } -.writer .image { +.writer.image { margin-right: 8px; } -.comment-wrapper .nickname { +.comment-info { + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; +} + +.comment-info .nickname { + margin-bottom: 4px; font-size: 14px; font-weight: normal; color: var(--gray600); } + +.comment-info .time-elapsed { + font-size: 12px; + font-weight: normal; + color: var(--gray400); +} diff --git a/src/components/ProductDetail/Comment.jsx b/src/components/ProductDetail/Comment.jsx index 469b0b69f..31a29d41c 100644 --- a/src/components/ProductDetail/Comment.jsx +++ b/src/components/ProductDetail/Comment.jsx @@ -1,19 +1,20 @@ import "./Comment.css"; +import getTimeElapsed from "../../utils/getTimeElapsed"; + function Comment({ comment }) { const { writer: { image, nickname }, content, - updateAt, + updatedAt, } = comment; - const updateDate = new Date(updateAt); - const updatedTime = new Date(updateAt) - new Date(); + const timeElapsed = getTimeElapsed(new Date(updatedAt)); return (
{content}
-
+
-
{nickname}
-
{updateAt}
+
+
{nickname}
+
{timeElapsed}
+
); diff --git a/src/utils/getTimeElapsed.js b/src/utils/getTimeElapsed.js new file mode 100644 index 000000000..7c4975705 --- /dev/null +++ b/src/utils/getTimeElapsed.js @@ -0,0 +1,26 @@ +const getTimeElapsed = (updatedTime) => { + const milliSeconds = new Date() - updatedTime; + + const seconds = milliSeconds / 1000; + if (seconds < 60) return `방금 전`; + + const minutes = seconds / 60; + if (minutes < 60) return `${Math.floor(minutes)}분 전`; + + const hours = minutes / 60; + if (hours < 24) return `${Math.floor(hours)}시간 전`; + + const days = hours / 24; + if (days < 7) return `${Math.floor(days)}일 전`; + + const weeks = days / 7; + if (weeks < 5) return `${Math.floor(weeks)}주 전`; + + const months = days / 30; + if (months < 12) return `${Math.floor(months)}개월 전`; + + const years = days / 365; + return `${Math.floor(years)}년 전`; +}; + +export default getTimeElapsed; From a4d823977af28b913ac4e08bced83d25253a29d2 Mon Sep 17 00:00:00 2001 From: Jeongmin Oh Date: Fri, 5 Jul 2024 23:16:24 +0900 Subject: [PATCH 6/8] =?UTF-8?q?feat(CommentList):=20=EC=BD=94=EB=A9=98?= =?UTF-8?q?=ED=8A=B8=EA=B0=80=20=EC=97=86=EB=8A=94=20=EA=B2=BD=EC=9A=B0?= =?UTF-8?q?=EB=A5=BC=20=EC=B2=98=EB=A6=AC=ED=95=98=EB=8A=94=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/images/Img_inquiry_empty.png | Bin 0 -> 20946 bytes src/components/ProductDetail/CommentList.css | 32 +++++++-- src/components/ProductDetail/CommentList.jsx | 70 ++++++++++++------- 3 files changed, 69 insertions(+), 33 deletions(-) create mode 100644 src/assets/images/Img_inquiry_empty.png diff --git a/src/assets/images/Img_inquiry_empty.png b/src/assets/images/Img_inquiry_empty.png new file mode 100644 index 0000000000000000000000000000000000000000..46dc924ab2a6cc2ac2de0aa37c32a02c8ce8a941 GIT binary patch literal 20946 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 literal 0 HcmV?d00001 diff --git a/src/components/ProductDetail/CommentList.css b/src/components/ProductDetail/CommentList.css index f6020a340..4d7e6a850 100644 --- a/src/components/ProductDetail/CommentList.css +++ b/src/components/ProductDetail/CommentList.css @@ -1,20 +1,19 @@ -.ask-wrapper { +.add-inquiry-wrapper { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end; - margin-bottom: 24px; width: 100%; } -.ask-label { +.inquiry-label { width: 100%; font-size: 16px; font-weight: normal; color: var(--gray900); } -.ask-content { +.inquiry-content { width: 100%; height: 104px; margin-top: 16px; @@ -24,13 +23,13 @@ border-radius: 12px; background-color: var(--gray100); } -.ask-content::placeholder { +.inquiry-content::placeholder { font-size: 16px; font-weight: normal; color: var(--gray400); } -.add-ask-button { +.add-inquiry-button { width: 74px; height: 42px; padding: auto 23px; @@ -42,7 +41,7 @@ color: var(--white); } -.add-ask-button.active { +.add-inquiry-button.active { background-color: var(--blue); cursor: pointer; } @@ -51,3 +50,22 @@ width: 100%; list-style: none; } + +.inquiry-wrapper { + width: 100%; + margin-bottom: 24px; +} + +.no-inquiry-wrapper { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.no-inquiry-text { + font-size: 16px; + font-weight: normal; + line-height: 24px; + color: var(--gray400); +} diff --git a/src/components/ProductDetail/CommentList.jsx b/src/components/ProductDetail/CommentList.jsx index 82c7940ef..ef22f27ae 100644 --- a/src/components/ProductDetail/CommentList.jsx +++ b/src/components/ProductDetail/CommentList.jsx @@ -1,6 +1,8 @@ import { useState } from "react"; import "./CommentList.css"; +import inquiryEmptyImage from "../../assets/images/Img_inquiry_empty.png"; + import Comment from "./Comment"; function CommentList({ comments }) { @@ -11,38 +13,54 @@ function CommentList({ comments }) { }; const buttonClassName = isInputFill - ? "add-ask-button active" - : "add-ask-button"; + ? "add-inquiry-button active" + : "add-inquiry-button"; const placeholder = "개인정보를 공유 및 요청하거나 명예 훼손, 무단 광고, 불법 정보 유포 시 모니터링 후 삭제될 수 있으며, " + "이에 대한 민형사상 책임은 게시자에게 있습니다."; return ( -
- - - - -
    - {comments.map((comment) => { - return ( -
  • - -
    • - ); - })} -
-
+ <> +
+ + + +
+ +
+ {comments.length !== 0 ? ( +
    + {comments.map((comment) => { + return ( +
  • + +
    • + ); + })} +
+ ) : ( +
+ 아직 문의가 없습니다. +
아직 문의가 없습니다.
+
+ )} +
+ ); } From 32cd55bd8a618ee2a6f9de99c6ac840ff82e1cc4 Mon Sep 17 00:00:00 2001 From: Jeongmin Oh Date: Fri, 5 Jul 2024 23:21:00 +0900 Subject: [PATCH 7/8] =?UTF-8?q?rename:=20jsx=20=EC=BD=94=EB=93=9C=EB=A5=BC?= =?UTF-8?q?=20=EB=A6=AC=ED=84=B4=ED=95=98=EB=8A=94=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=EC=9D=98=20=ED=99=95=EC=9E=A5=EC=9E=90?= =?UTF-8?q?=EB=A5=BC=20js=EC=97=90=EC=84=9C=20jsx=EB=A1=9C=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/{Nav.js => Nav.jsx} | 0 src/components/additem/{AddItemForm.js => AddItemForm.jsx} | 0 src/components/additem/{FileInput.js => FileInput.jsx} | 0 src/components/additem/{TextInput.js => TextInput.jsx} | 0 src/components/items/{AllProductList.js => AllProductList.jsx} | 0 src/components/items/{BestProductList.js => BestProductList.jsx} | 0 src/components/items/{ProductListItem.js => ProductListItem.jsx} | 0 src/pages/{AddItemPage.js => AddItemPage.jsx} | 0 src/pages/{ItemsPage.js => ItemsPage.jsx} | 0 9 files changed, 0 insertions(+), 0 deletions(-) rename src/components/{Nav.js => Nav.jsx} (100%) rename src/components/additem/{AddItemForm.js => AddItemForm.jsx} (100%) rename src/components/additem/{FileInput.js => FileInput.jsx} (100%) rename src/components/additem/{TextInput.js => TextInput.jsx} (100%) rename src/components/items/{AllProductList.js => AllProductList.jsx} (100%) rename src/components/items/{BestProductList.js => BestProductList.jsx} (100%) rename src/components/items/{ProductListItem.js => ProductListItem.jsx} (100%) rename src/pages/{AddItemPage.js => AddItemPage.jsx} (100%) rename src/pages/{ItemsPage.js => ItemsPage.jsx} (100%) diff --git a/src/components/Nav.js b/src/components/Nav.jsx similarity index 100% rename from src/components/Nav.js rename to src/components/Nav.jsx diff --git a/src/components/additem/AddItemForm.js b/src/components/additem/AddItemForm.jsx similarity index 100% rename from src/components/additem/AddItemForm.js rename to src/components/additem/AddItemForm.jsx diff --git a/src/components/additem/FileInput.js b/src/components/additem/FileInput.jsx similarity index 100% rename from src/components/additem/FileInput.js rename to src/components/additem/FileInput.jsx diff --git a/src/components/additem/TextInput.js b/src/components/additem/TextInput.jsx similarity index 100% rename from src/components/additem/TextInput.js rename to src/components/additem/TextInput.jsx diff --git a/src/components/items/AllProductList.js b/src/components/items/AllProductList.jsx similarity index 100% rename from src/components/items/AllProductList.js rename to src/components/items/AllProductList.jsx diff --git a/src/components/items/BestProductList.js b/src/components/items/BestProductList.jsx similarity index 100% rename from src/components/items/BestProductList.js rename to src/components/items/BestProductList.jsx diff --git a/src/components/items/ProductListItem.js b/src/components/items/ProductListItem.jsx similarity index 100% rename from src/components/items/ProductListItem.js rename to src/components/items/ProductListItem.jsx diff --git a/src/pages/AddItemPage.js b/src/pages/AddItemPage.jsx similarity index 100% rename from src/pages/AddItemPage.js rename to src/pages/AddItemPage.jsx diff --git a/src/pages/ItemsPage.js b/src/pages/ItemsPage.jsx similarity index 100% rename from src/pages/ItemsPage.js rename to src/pages/ItemsPage.jsx From 94aa1f3429fa6749ef1cd18cb17058813c391ec3 Mon Sep 17 00:00:00 2001 From: Jeongmin Oh Date: Fri, 5 Jul 2024 23:28:07 +0900 Subject: [PATCH 8/8] =?UTF-8?q?feat(ProductDetailPage):=20useEffect?= =?UTF-8?q?=EC=9D=98=20=EC=A2=85=EC=86=8D=EC=84=B1=20=EB=B0=B0=EC=97=B4?= =?UTF-8?q?=EC=97=90=20productId=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/ProductDetailPage.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/ProductDetailPage.jsx b/src/pages/ProductDetailPage.jsx index 90f0daed5..9a9974656 100644 --- a/src/pages/ProductDetailPage.jsx +++ b/src/pages/ProductDetailPage.jsx @@ -26,7 +26,7 @@ function ProductDetailPage() { setProductComments(data); } getProductComment(); - }, []); + }, [productId]); return (