[김희진] sprint7

src/api/comment.js

@@ -0,0 +1,11 @@
+import axios from "axios";
+
+const BASE_URL = process.env.REACT_APP_BASE_URL;
+
+export async function getComments(productId) {
+  const response = await axios.get(
+    `${BASE_URL}/products/${productId}/comments?limit=3`
+  );
+
+  return response.data.list;
+}

src/api/products.js

@@ -10,3 +10,9 @@ export async function getProducts(params) {
 
   return response.data;
 }
+
+export async function getProductInfo(productId) {
+  const response = await axios.get(`${BASE_URL}/products/${productId}`);
+
+  return response.data;
+}

src/components/Comment/Comment.jsx

@@ -0,0 +1,12 @@
+import * as S from "./Comment.styles";
+import CommentInput from "./CommentInput";
+import CommentList from "./CommentList";
+
+export default function Comment() {
+  return (
+    <S.Container>
+      <CommentInput />
+      <CommentList />
+    </S.Container>
+  );
+}

src/components/Comment/Comment.styles.jsx

@@ -0,0 +1,9 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  max-width: 1200px;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+`;

src/components/Comment/CommentInput.jsx

@@ -0,0 +1,26 @@
+import Input from "../common/Input/Input";
+import * as S from "./CommentInput.styles";
+import { useState } from "react";
+
+export default function CommentInput() {
+  const [comment, setComment] = useState("");
+
+  return (
+    <S.CommentContainer>
+      <Input
+        label="문의하기"
+        placeholder="개인정보를 공유 및 요청하거나, 명예 훼손, 무단 광고, 불법 정보 유포시 모니터링 후 삭제될 수 있으며, 이에 대한 민형사상 책임은 게시자에게 있습니다."
+        height="104px"
+        largeHeight="140px"
+        isTextarea
+        value={comment}
+        onChange={(e) => setComment(e.target.value)}
+      />
+      <S.RegisterBtn>
+        <button disabled={!comment.trim()} onClick={() => setComment("")}>
+          등록
+        </button>
+      </S.RegisterBtn>
+    </S.CommentContainer>
+  );
+}

src/components/Comment/CommentInput.styles.jsx

@@ -0,0 +1,35 @@
+import styled from "styled-components";
+import theme from "../../styles/theme";
+
+export const CommentContainer = styled.div`
+  width: 100%;
+`;
+
+export const RegisterBtn = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+
+  button {
+    width: 74px;
+    height: 42px;
+    border-radius: 8px;
+    font: ${theme.font.H5Bold};
+    color: ${theme.color.gray100};
+    background-color: ${theme.color.blue};
+    margin-top: 24px;
+    cursor: pointer;
+
+    &:disabled {
+      background-color: ${theme.color.gray400};
+
+      &:hover {
+        background-color: ${theme.color.gray400};
+      }
+    }
+
+    &:hover {
+      background-color: ${theme.color.blueHover};
+    }
+  }
+`;

src/components/Comment/CommentList.jsx

@@ -0,0 +1,101 @@
+import * as S from "./CommentList.styles";
+import dots from "../../assets/icons/dots.svg";
+import { useState, useEffect } from "react";
+import { getComments } from "../../api/comment";
+import { useParams } from "react-router-dom";
+import User from "../User/User";
+import Input from "../common/Input/Input";
+import NoneComment from "../NoneComment/NoneComment";
+
+export default function CommentList() {
+  const [comments, setComments] = useState([]);
+  const [commentId, setCommentId] = useState(null);
+  const [editCommentId, setEditCommentId] = useState(null);
+  const { productId } = useParams();
+
+  useEffect(() => {
+    getComments(productId)
+      .then((result) => setComments(result))
+      .catch((error) => console.error(error));
+  }, []);
+
+  function SelectBox({ comment }) {
+    const options = [
+      {
+        id: 1,
+        option: "수정하기",
+        onClick: () => {
+          setEditCommentId(comment.id);
+          setCommentId(null);
+        },
+      },
+      {
+        id: 2,
+        option: "삭제하기",
+        onClick: () => {
+          setCommentId(null);
+        },
+      },
+    ];
+    return (
+      <S.SelectList>
+        {options.map((s) => (
+          <S.SelectItem key={s.id} onClick={s.onClick}>
+            {s.option}
+          </S.SelectItem>
+        ))}
+      </S.SelectList>
+    );
+  }
+
+  const handleOpenClick = (commentId) => {
+    setCommentId((prevId) => (prevId === commentId ? null : commentId));
+  };
+
+  if (comments.length === 0) return <NoneComment />;
+
+  return (
+    <S.ListContainer>
+      {comments.map((comment) => (
+        <S.Comment key={comment.id}>
+          {editCommentId === comment.id ? (
+            <Input
+              placeholder="개인정보를 공유 및 요청하거나, 명예 훼손, 무단 광고, 불법 정보 유포시 모니터링 후 삭제될 수 있으며, 이에 대한 민형사상 책임은 게시자에게 있습니다."
+              value={comment.content}
+              style={{ height: "80px" }}
+              isTextarea
+            />
+          ) : (
+            <S.Content>
+              <S.Text>{comment.content}</S.Text>
+              <S.Select>
+                <S.Dots
+                  src={dots}
+                  onClick={() => handleOpenClick(comment.id)}
+                />
+                {commentId === comment.id && <SelectBox comment={comment} />}
+              </S.Select>
+            </S.Content>
+          )}
+          <S.UserWrapper>
+            <User
+              owner={comment.writer.nickname}
+              createdAt={
+                comment.updatedAt !== "" ? comment.updatedAt : comment.createdAt
+              }
+              detail={false}
+            />
+            {editCommentId === comment.id && (
+              <S.EditBtn>
+                <span onClick={() => setEditCommentId(null)}>취소</span>
+                <button onClick={() => setEditCommentId(null)}>
+                  수정 완료
+                </button>
+              </S.EditBtn>
+            )}
+          </S.UserWrapper>
+        </S.Comment>
+      ))}
+    </S.ListContainer>
+  );
+}

src/components/Comment/CommentList.styles.jsx

@@ -0,0 +1,105 @@
+import styled from "styled-components";
+import theme from "../../styles/theme";
+
+export const ListContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 40px;
+
+  @media (max-width: 375px) {
+    gap: 16px;
+  }
+`;
+
+export const Comment = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid ${theme.color.gray200};
+`;
+
+export const Content = styled.div`
+  display: flex;
+  justify-content: space-between;
+`;
+
+export const Text = styled.div`
+  font: ${theme.font.H7Regular};
+  color: ${theme.color.gray800};
+`;
+
+export const Select = styled.div`
+  position: relative;
+`;
+
+export const Dots = styled.img`
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+`;
+
+export const SelectList = styled.ul`
+  width: 139px;
+  display: flex;
+  flex-direction: column;
+  background-color: ${theme.color.white};
+  border: 1px solid ${theme.color.gray300};
+  border-radius: 8px;
+  position: absolute;
+  right: 0;
+`;
+
+export const SelectItem = styled.li`
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 16px 0;
+  font: ${theme.font.H5Regular};
+  color: ${theme.color.gray500};
+  cursor: pointer;
+
+  &:hover {
+    font: ${theme.font.H5Bold};
+    color: ${theme.color.gray800};
+  }
+`;
+
+export const UserWrapper = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+export const EditBtn = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+
+  span {
+    padding: 0 20px;
+    font: ${theme.font.H5Bold};
+    color: ${theme.color.gray500};
+    cursor: pointer;
+  }
+
+  button {
+    width: 106px;
+    height: 42px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: ${theme.color.blue};
+    border-radius: 8px;
+    font: ${theme.font.H5Bold};
+    color: ${theme.color.gray100};
+    cursor: pointer;
+
+    &:hover {
+      background-color: ${theme.color.blueHover};
+    }
+  }
+`;