Merge pull request #14 from URECA-PODONG/feat/#5

feat(#5):update
URECA-PODONG · Oct 28, 2024 · b87bd0a · b87bd0a
2 parents 1ce2e6a + bfe30fa
commit b87bd0a
Show file tree

Hide file tree

Showing 3 changed files with 236 additions and 31 deletions.
diff --git a/src/pages/PetItemPage/PetItemDetailPage.jsx b/src/pages/PetItemPage/PetItemDetailPage.jsx
@@ -1,13 +1,17 @@
 import { useEffect, useState } from "react";
+import { HiArrowLeft } from "react-icons/hi";
 import { useNavigate, useParams } from "react-router-dom";
 import styled from "styled-components";
-
+import { VscAccount } from "react-icons/vsc";
+import { IoChatbubbleEllipsesOutline } from "react-icons/io5";
+import { FiHeart } from "react-icons/fi";
 
 const PetItemDetailPage = () => {
   const navigate = useNavigate();
   const {no} = useParams();// %% URL에서 글 번호(no)를 가져옴 %%
-  const [itemDetail, setItemDetail] = useState({});
-
+  const [itemDetail, setItemDetail] = useState([]);
+  const [comments, setComments] = useState([]);
+  const [counter,setCounter] =useState(0);
   useEffect(()=>{
     fetch(`http://localhost:8080/api/petItems/${no}`)
     .then((response) => response.json())
@@ -16,14 +20,59 @@ const PetItemDetailPage = () => {
       setItemDetail(json);
     });
   },[no])
+
+  useEffect(()=>{
+    fetch(`http://localhost:8080/api/comments`)
+    .then((response) => response.json())
+    .then((json) => {
+      console.log("댓글 :", json);
+      setComments(json);
+    });
+  },[no])
+
+  function good () {
+    setCounter(counter+1);
+    console.log("좋아요 :", counter)
+  }
+
   return (
     <ItemTitle>
-      <h1>나눔 상세보기 </h1>
-      <p>글 번호: {itemDetail.petItemId}</p> 
-      <p>제목: {itemDetail.name}</p>
-      <p>내용: {itemDetail.description}</p>
-
-    <button onClick={(e)=>{navigate("/petitemList")} }>게시글 목록</button>
+      <RowTi>
+        <button onClick={() => {navigate("/petitemList");}}>
+          <HiArrowLeft1 />
+        </button>
+        <H1>나눔</H1>
+      </RowTi>
+
+      <ListImg>{itemDetail.imageUrl}</ListImg>
+      <ImgBt>
+      <ImgNo>1 / 5</ImgNo>
+      </ImgBt>
+      <User1><VscAccount1/>작성자: {itemDetail.user}</User1>
+      <Title>제목: {itemDetail.name}</Title>
+      <Icons>
+        <div>
+          <Like1 onClick={()=>{good()}}/>{counter}
+          <Comment1/>2
+        </div>
+        <div>
+          <ListPrice> {(itemDetail.price ? `${itemDetail.price.toLocaleString()}원` : <나눔>나눔</나눔>)}</ListPrice>
+        </div>
+      </Icons>
+      <Contents>작성글: {itemDetail.description}</Contents>
+      <Line />
+      {comments.map((item)=>(
+      <div  key={item.commentId}>
+      <User2><VscAccount1/>작성자: {item.length > 0 && item[0].user}
+        <ListDate key={item.commentId}>
+          {new Date(item.createdAt).toLocaleDateString('ko-KR', {
+            timeZone: 'Asia/Seoul' 
+          })}
+        </ListDate>
+      </User2>
+        <Comment>{item.comment}</Comment>
+        </div>
+      ))}
     </ItemTitle>
   );
 };
@@ -33,4 +82,124 @@ export default PetItemDetailPage;
 
 const ItemTitle = styled.div`
   margin: 64px 25px 64px 25px;
+`;
+const RowTi = styled.div`
+  display: flex;
+  margin-bottom: 10px;
+  align-items: center;
+`;
+const HiArrowLeft1 = styled(HiArrowLeft)`
+  font-size: 20px;
+  font-weight: bold;
+  `;
+const H1 = styled.h1`
+  font-size: 18px;
+  font-weight: bold;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right :20px ;
+`;
+const ListImg = styled.div`
+  width: 100%;
+  height: 300px;
+  background-color: #D9D9D9;
+  border-radius: 10px;
+  flex-shrink: 0; /* 이미지 크기를 고정 */
+  background-image: url(${(props) => props.src}); /* 이미지 URL 설정 */
+  background-size: cover; /* 이미지를 채우도록 설정 */
+  background-position: center; /* 이미지 중앙 정렬 */
+`;
+const ImgBt = styled.div`
+  display: flex;
+  position: relative;
+  justify-content: flex-end;
+`;
+const ImgNo = styled.button`
+  background-color: #8D8D8D;
+  border-radius: 30px;
+  font-size: 8px;
+  color: white;
+  border: 1px solid #8D8D8D;
+  width: 35px;
+  height: 20px;
+  position: absolute;
+  bottom: 10px;
+  right: 10px;
+`;
+const User1 = styled.div`
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+  margin-top:10px;
+`;
+
+const VscAccount1 = styled(VscAccount)`
+  font-size: 12px;
+  margin-right: 3px;
+  align-items: center;
+  justify-content:center ;
+  `;
+  const Title = styled.div`
+  font-size: 20px;
+  font-weight: bold;
+  display: flex;
+  margin: 10px 0px 10px 0px;
+`;
+const ListPrice = styled.div`
+  font-size: 20px;
+  font-weight: bold;
+  display: flex;
+  width: 100%;
+`;
+const 나눔 = styled.p`
+  font-size: 15px;
+  font-weight: bold;
+  display: flex;
+  width: 100%;
+  color: #FF6E00;
+  justify-content: end;
+`;
+const Icons = styled.div`
+  font-size: 16px;
+  color: #8D8D8D;
+  display: flex;
+  justify-content: space-between;
+`;
+const Like1 = styled(FiHeart)`
+  font-size: 16px;
+  color: red;
+`;
+const Comment1 = styled(IoChatbubbleEllipsesOutline)`
+  margin-left:10px;
+`;
+const Contents = styled.div`
+  font-size: 16px;
+  margin-bottom: 20px;
+  margin-top: 10px;
+`;
+const Line = styled.hr`
+  border: none;   
+  border-top: 1px solid #FF6E00;
+  margin-bottom: 20px;
+`;
+const User2 = styled.div`
+  display: flex;
+  align-items: center;
+  
+  font-size: 12px;
+  margin-top:10px;
+`;
+const ListDate = styled.div`
+  font-size: 8px;
+  color: #8D8D8D;
+  display: flex;
+  margin-left: 5px;
+  margin-top: 2px;
+`;
+const Comment = styled.div`
+  font-size: 12px;
+  display: flex;
+  
 `;
diff --git a/src/pages/PetItemPage/PetItemListPage.jsx b/src/pages/PetItemPage/PetItemListPage.jsx
@@ -9,7 +9,7 @@ import { FcLike } from "react-icons/fc";
 const PetItemListPage = () => {
   const navigate = useNavigate();
   const [petItemList, setPetItemList] = useState([]); 
-
+  const [counter, setCounter] = useState(0)
 
   function handleList() {
     fetch("http://localhost:8080/api/petItems")
@@ -24,8 +24,13 @@ const PetItemListPage = () => {
     handleList();
   }, []);
 
+  function good () {
+    setCounter(counter+1);
+    console.log("좋아요 :", counter)
+  }
+
   return (
-    <Div>
+    <ItemTitle>
       <RowTi>
         <button onClick={() => {navigate("/");}}>
           <HiArrowLeft1 />
@@ -44,31 +49,34 @@ const PetItemListPage = () => {
       <All>전체 {(petItemList.length).toLocaleString()}개</All>
         <RowLi>
           {petItemList.map((item) => ( 
-            <>
-            <Lists key={item.petItemId} onClick={(e)=>{e.preventDefault();navigate(`/petitemDetail/${item.petItemId}`)}}>
+            <Lists  key={item.petItemId} 
+              onClick={(e)=>{e.preventDefault();
+              navigate(`/petitemDetail/${item.petItemId}`)}}>
               <ListImg>{item.imageUrl}</ListImg>
               <ListTitlesContainer>
                 <ListTItle>{item.name}</ListTItle>
                 <ListUser>작성자{item.user}</ListUser>
-                <ListPrice>{(item.price||0).toLocaleString()}원</ListPrice>
-              </ListTitlesContainer>
-            </Lists>
-                <ListDate>{new Date(item.createdAt).toLocaleDateString('ko-KR', { timeZone: 'Asia/Seoul' })}
+                <ListPrice>{(item.price ? `${item.price.toLocaleString()}원` : <나눔>나눔</나눔>)}</ListPrice>
+                <ListDate>
+                  {new Date(item.createdAt).toLocaleDateString('ko-KR', {
+                    timeZone: 'Asia/Seoul' 
+                    })}
                   <Icons>
-                    <FcLike/>4
-                    <IoChatbubbleEllipsesOutline/>2
+                    <FcLike1 onClick={(e)=>{e.stopPropagation();good()}} />{counter}
+                    <Comment1/>2
                   </Icons>
                 </ListDate>
-          </>
+              </ListTitlesContainer>
+            </Lists>
           ))}
         </RowLi>
-    </Div>
+    </ItemTitle>
   );
 };
 
 export default PetItemListPage;
 
-const Div = styled.div`
+const ItemTitle = styled.div`
 margin: 64px 25px 64px 25px;
 `;
 
@@ -211,6 +219,14 @@ const ListPrice = styled.div`
   width: 100%;
   align-self: center;
 `;
+const 나눔 = styled.p`
+  font-size: 15px;
+  font-weight: bold;
+  display: flex;
+  width: 100%;
+  color: #FF6E00;
+  align-self: center;
+`;
 const ListDate = styled.div`
   font-size: 10px;
   color: #8D8D8D;
@@ -222,5 +238,12 @@ const ListDate = styled.div`
 const Icons = styled.div`
   font-size: 16px;
   color: #8D8D8D;
-  margin-left: 6px;
+  margin-left: 5px;
+`;
+const FcLike1 = styled(FcLike)`
+  font-size: 16px;
+`;
+const Comment1 = styled(IoChatbubbleEllipsesOutline)`
+  font-size: 16px;
+  margin-left: 10px;
 `;
diff --git a/src/pages/PetItemPage/PetItemPage.jsx b/src/pages/PetItemPage/PetItemPage.jsx
@@ -1,7 +1,6 @@
 
 import styled from "styled-components";
 import { useNavigate } from "react-router-dom";
-import { images } from "../../components/Images";
 import { HiArrowLeft } from "react-icons/hi";
 import { MdPhotoCamera } from "react-icons/md";
 
@@ -34,7 +33,7 @@ const PetItemPage = () => {
     e.preventDefault(); //새로고침 방지
     handleCreateClick(e);
   }
-  
+
   return (
     <ItemTitle>
       <MainTitle>
@@ -50,21 +49,21 @@ const PetItemPage = () => {
         </label><br />
         <LableImg>
           <input type="file" style={{display:'none'}} name="imageUrl" multiple={true} />
-          <BuImg>0/5</BuImg><MdPhotoCamera1 />
+          <ImgNo>0/5</ImgNo><MdPhotoCamera1 />
         </LableImg>
         <br />
         <label>
           <Title>제목 </Title>
           <Box name="name" type="text" required  placeholder="제목을 입력해주세요"/>
         </label>
         <Title>거래 방식</Title>
-          <label>
+        <input type="radio" name="status" value="0" checked />나눔
+        <input type="radio" name="status" value="1"  />판매
             <ButtonRow>
-              <ButtonNa >판매하기</ButtonNa>
+              <ButtonPan >판매하기</ButtonPan>
               <ButtonNa >나눔하기</ButtonNa>
             </ButtonRow>
           <Box name="price" type="text" placeholder="금액을 입력해주세요"/>
-          </label>
         <label>
           <Title> 설명 </Title>
           <Textarea name="description" required placeholder="공유하고 싶은 내용을 작성해주세요"/>
@@ -174,6 +173,21 @@ const ButtonNa = styled.button`
     color: white; /* 호버 시 텍스트 색상 */
   }
 `;
+const ButtonPan = styled.button`
+  width: 85px;
+  height: 30px;
+  display: flex;
+  background-color: white;
+  border: 0.3px solid #FF6E00;
+  border-radius: 8px;
+  align-items: center;
+  justify-content: center;
+  color: #FF6E00;
+  &:hover {
+    background-color: #FF6E00; /* 호버 시 배경색 */
+    color: white; /* 호버 시 텍스트 색상 */
+  }
+`;
 const Div = styled.div`
   font-size: 10px;
   font-weight: bold;
@@ -189,7 +203,7 @@ const Div = styled.div`
   justify-content: center;
   color: #E04F4B;
 `;
-const BuImg = styled.button`
+const ImgNo = styled.p`
   background-color: white;
   border-radius: 8px;
   padding-top: 25px;
@@ -207,7 +221,6 @@ const MdPhotoCamera1 = styled(MdPhotoCamera)`
   font-size: 20px;
   top: 18px;
   left: 23px;
-  border-radius: 15px;
   color: #8D8D8D;
 `;