Merge pull request #222 from ojm51/React-오정민-sprint7

[오정민] Sprint7

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() {
           <Route path="items">
             <Route index element={<ItemsPage />} />
             <Route path="additem" element={<AddItemPage />} />
+            <Route path=":productId" element={<ProductDetailPage />} />
           </Route>
         </Route>
       </Routes>

src/components/Nav.css

@@ -59,7 +59,7 @@ nav {
   cursor: pointer;
 }
 
-.active {
+.menu.active {
   color: var(--blue);
 }
 

src/components/ProductDetail/Comment.css

@@ -0,0 +1,43 @@
+.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);
+}
+
+.writer-wrapper {
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+  margin-bottom: 24px;
+}
+
+.writer.image {
+  margin-right: 8px;
+}
+
+.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);
+}

src/components/ProductDetail/Comment.jsx

@@ -0,0 +1,34 @@
+import "./Comment.css";
+
+import getTimeElapsed from "../../utils/getTimeElapsed";
+
+function Comment({ comment }) {
+  const {
+    writer: { image, nickname },
+    content,
+    updatedAt,
+  } = comment;
+
+  const timeElapsed = getTimeElapsed(new Date(updatedAt));
+
+  return (
+    <div className="comment-wrapper">
+      <div className="comment-content">{content}</div>
+      <div className="writer-wrapper">
+        <img
+          className="writer image"
+          src={image}
+          alt={nickname}
+          width="40px"
+          height="40px"
+        />
+        <div className="comment-info">
+          <div className="nickname">{nickname}</div>
+          <div className="time-elapsed">{timeElapsed}</div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Comment;

src/components/ProductDetail/CommentList.css

@@ -0,0 +1,71 @@
+.add-inquiry-wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: flex-end;
+  width: 100%;
+}
+
+.inquiry-label {
+  width: 100%;
+  font-size: 16px;
+  font-weight: normal;
+  color: var(--gray900);
+}
+
+.inquiry-content {
+  width: 100%;
+  height: 104px;
+  margin-top: 16px;
+  margin-bottom: 16px;
+  padding: 16px 24px;
+  border: none;
+  border-radius: 12px;
+  background-color: var(--gray100);
+}
+.inquiry-content::placeholder {
+  font-size: 16px;
+  font-weight: normal;
+  color: var(--gray400);
+}
+
+.add-inquiry-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-inquiry-button.active {
+  background-color: var(--blue);
+  cursor: pointer;
+}
+
+.comment-lists {
+  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);
+}

src/components/ProductDetail/CommentList.jsx

@@ -0,0 +1,67 @@
+import { useState } from "react";
+
+import "./CommentList.css";
+import inquiryEmptyImage from "../../assets/images/Img_inquiry_empty.png";
+
+import Comment from "./Comment";
+
+function CommentList({ comments }) {
+  const [isInputFill, setIsInputFill] = useState(false);
+
+  const handleValueChange = (e) => {
+    setIsInputFill(e.target.value !== "");
+  };
+
+  const buttonClassName = isInputFill
+    ? "add-inquiry-button active"
+    : "add-inquiry-button";
+
+  const placeholder =
+    "개인정보를 공유 및 요청하거나 명예 훼손, 무단 광고, 불법 정보 유포 시 모니터링 후 삭제될 수 있으며, " +
+    "이에 대한 민형사상 책임은 게시자에게 있습니다.";
+
+  return (
+    <>
+      <div className="add-inquiry-wrapper">
+        <label className="inquiry-label" htmlFor="inquiry">
+          문의하기
+        </label>
+        <textarea
+          className="inquiry-content"
+          id="inquiry"
+          placeholder={placeholder}
+          onChange={handleValueChange}
+        ></textarea>
+        <button className={buttonClassName} disabled={!isInputFill}>
+          등록
+        </button>
+      </div>
+
+      <div className="inquiry-wrapper">
+        {comments.length !== 0 ? (
+          <ul className="comment-lists">
+            {comments.map((comment) => {
+              return (
+                <li key={comment.id}>
+                  <Comment comment={comment} />
+                </li>
+              );
+            })}
+          </ul>
+        ) : (
+          <div className="no-inquiry-wrapper">
+            <img
+              src={inquiryEmptyImage}
+              alt="아직 문의가 없습니다."
+              width="200px"
+              height="200px"
+            />
+            <div className="no-inquiry-text">아직 문의가 없습니다.</div>
+          </div>
+        )}
+      </div>
+    </>
+  );
+}
+
+export default CommentList;

src/components/ProductDetail/ProductDetailContent.css

@@ -0,0 +1,81 @@
+.contents-wrapper {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 24px;
+  padding-bottom: 32px;
+  width: 100%;
+  border-bottom: solid 1px var(--gray200);
+}
+
+.contents-wrapper .image {
+  width: 486px;
+  height: 486px;
+  margin-right: 24px;
+  object-fit: cover;
+  border-radius: 16px;
+}
+
+.contents-wrapper .contents {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.title-wrapper {
+  display: flex;
+  justify-content: space-between;
+}
+
+.contents-wrapper .title {
+  padding-bottom: 16px;
+  font-size: 24px;
+  font-weight: 600;
+  color: var(--gray800);
+}
+
+.contents-wrapper .price {
+  margin-bottom: 16px;
+  padding-bottom: 16px;
+  border-bottom: solid 1px var(--gray200);
+  font-size: 40px;
+  font-weight: 600;
+  color: var(--gray800);
+}
+
+.contents-label {
+  padding-bottom: 8px;
+  font-size: 14px;
+  font-weight: normal;
+  color: var(--gray600);
+}
+
+.description-wrapper .description {
+  padding-bottom: 23px;
+  font-weight: normal;
+  line-height: 140%;
+  color: var(--gray800);
+}
+
+.description-wrapper .tag {
+  list-style: none;
+}
+
+.contents .like-button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 87px;
+  height: 40px;
+  border: solid 1px var(--gray200);
+  border-radius: 35px;
+  background-color: var(--white);
+  cursor: pointer;
+}
+
+.like-button .like-num {
+  padding-left: 4px;
+  font-size: 16px;
+  font-weight: normal;
+  color: var(--gray500);
+}