From 7b53e81351e7b3efa91d7e3a22843c6f52d8ecd9 Mon Sep 17 00:00:00 2001
From: ckdwns1221 <ckdwns2181@gmail.com>
Date: Wed, 23 Oct 2024 15:23:51 +0900
Subject: [PATCH 1/4] =?UTF-8?q?feat(#3):=20=EA=B2=BD=EB=A1=9C=EC=97=90=20?=
 =?UTF-8?q?=EB=A7=9E=EA=B2=8C=20=EB=B2=84=ED=8A=BC=ED=99=9C=EC=84=B1?=
 =?UTF-8?q?=ED=99=94=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/Footer.jsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/common/Footer.jsx b/src/components/common/Footer.jsx
index df875a1..b73016f 100644
--- a/src/components/common/Footer.jsx
+++ b/src/components/common/Footer.jsx
@@ -3,21 +3,22 @@ import styled from 'styled-components';
 import { FiGift } from 'react-icons/fi';
 import { LuCalendarHeart } from 'react-icons/lu';
 import { images } from '../Images';
-import { Link } from 'react-router-dom';
+import { Link, useLocation } from 'react-router-dom';
 
 const Footer = () => {
+  const location = useLocation();
   const [activeTab, setActiveTab] = useState(null);
 
   const tabs = [
     {
       key: 'gift',
-      icon: <FiGift size={20} color={activeTab === 'gift' ? '#FF6E00' : '#000'} />,
+      icon: <FiGift size={20} color={location.pathname === '/#' ? '#FF6E00' : '#000'} />,
       text: '나눔',
       link: '/#',
     },
     {
       key: 'health',
-      icon: <LuCalendarHeart size={20} color={activeTab === 'health' ? '#FF6E00' : '#000'} />,
+      icon: <LuCalendarHeart size={20} color={location.pathname === '/#' ? '#FF6E00' : '#000'} />,
       text: '건강관리',
       link: '/#',
     },
@@ -41,7 +42,7 @@ const Footer = () => {
         <Link to={link} key={key}>
           <FooterTap onClick={() => handleTabClick(key)}>
             {icon ? icon : <FooterImage src={image} alt={text} />}
-            <FooterText active={activeTab === key}>{text}</FooterText>
+            <FooterText active={location.pathname === link}>{text}</FooterText>
           </FooterTap>
         </Link>
       ))}

From 8c82f915d13e1e928dc06cc0dd88df9f645309a3 Mon Sep 17 00:00:00 2001
From: EunSeok <dldmstjr114@naver.com>
Date: Thu, 24 Oct 2024 09:47:50 +0900
Subject: [PATCH 2/4] feat(#5): page create

---
 src/Router.jsx                              |   4 +
 src/components/common/Footer.jsx            |   6 +-
 src/components/common/Nav.jsx               |   6 +-
 src/pages/PetItemPage/PetItemDetailPage.jsx |  11 ++
 src/pages/PetItemPage/PetItemListPage.jsx   |  21 ++
 src/pages/PetItemPage/PetItemPage.jsx       | 203 ++++++++++++++++++++
 6 files changed, 245 insertions(+), 6 deletions(-)
 create mode 100644 src/pages/PetItemPage/PetItemDetailPage.jsx
 create mode 100644 src/pages/PetItemPage/PetItemListPage.jsx
 create mode 100644 src/pages/PetItemPage/PetItemPage.jsx

diff --git a/src/Router.jsx b/src/Router.jsx
index 206d42e..8177513 100644
--- a/src/Router.jsx
+++ b/src/Router.jsx
@@ -3,6 +3,8 @@ import MainPage from './pages/MainPage/MainPage.jsx';
 import Nav from './components/common/Nav.jsx';
 import Footer from './components/common/Footer';
 import ScrollTop from './components/common/ScrollTop.jsx';
+import PetItemPage from './pages/PetItemPage/PetItemPage.jsx';
+import PetItemListPage from './pages/PetItemPage/PetItemListPage.jsx';
 
 function Router() {
   return (
@@ -11,6 +13,8 @@ function Router() {
         <Nav />
         <Routes>
           <Route path="/" element={<MainPage />} />
+          <Route path="/petitem" element={<PetItemPage />} />
+          <Route path="/petitemList" element={<PetItemListPage />} />
         </Routes>
         <Footer />
         <ScrollTop />
diff --git a/src/components/common/Footer.jsx b/src/components/common/Footer.jsx
index b73016f..5cb5222 100644
--- a/src/components/common/Footer.jsx
+++ b/src/components/common/Footer.jsx
@@ -14,7 +14,7 @@ const Footer = () => {
       key: 'gift',
       icon: <FiGift size={20} color={location.pathname === '/#' ? '#FF6E00' : '#000'} />,
       text: '나눔',
-      link: '/#',
+      link: '/petitemList',
     },
     {
       key: 'health',
@@ -42,7 +42,7 @@ const Footer = () => {
         <Link to={link} key={key}>
           <FooterTap onClick={() => handleTabClick(key)}>
             {icon ? icon : <FooterImage src={image} alt={text} />}
-            <FooterText active={location.pathname === link}>{text}</FooterText>
+            <FooterText $active={location.pathname === link}>{text}</FooterText>
           </FooterTap>
         </Link>
       ))}
@@ -94,5 +94,5 @@ const FooterText = styled.div`
   }
   font-family: 'TTLaundryGothicB';
   font-size: 12px;
-  color: ${({ active }) => (active ? '#FF6E00' : '#000000')};
+  color: ${({ $active }) => ($active ? '#FF6E00' : '#000000')};
 `;
diff --git a/src/components/common/Nav.jsx b/src/components/common/Nav.jsx
index 9efc3b7..e99afb3 100644
--- a/src/components/common/Nav.jsx
+++ b/src/components/common/Nav.jsx
@@ -30,7 +30,7 @@ const Nav = () => {
   ];
 
   return (
-    <Navbar isScrolled={isScrolled}>
+    <Navbar $isScrolled={isScrolled}>
       <AnimalWrap>
         <PiDogBold color="#FF6E00" />
         <AnimalName>반려동물 이름</AnimalName>
@@ -58,8 +58,8 @@ const Navbar = styled.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
-  background-color: ${({ isScrolled }) => (isScrolled ? 'rgba(255, 255, 255, 0.7)' : '#ffffff')};
-  backdrop-filter: ${({ isScrolled }) => (isScrolled ? 'blur(4px)' : 'none')};
+  background-color: ${({ $isScrolled }) => ($isScrolled ? 'rgba(255, 255, 255, 0.7)' : '#ffffff')};
+  backdrop-filter: ${({ $isScrolled }) => ($isScrolled ? 'blur(4px)' : 'none')};
   transition: background-color 0.3s ease, backdrop-filter 0.3s ease;
 
   @media (min-width: 375px) {
diff --git a/src/pages/PetItemPage/PetItemDetailPage.jsx b/src/pages/PetItemPage/PetItemDetailPage.jsx
new file mode 100644
index 0000000..12d3ce0
--- /dev/null
+++ b/src/pages/PetItemPage/PetItemDetailPage.jsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+const PetItemDetailPage = () => {
+  return (
+    <div>
+      <h1>나눔 상세보기 </h1>
+    </div>
+  );
+};
+
+export default PetItemDetailPage;
\ No newline at end of file
diff --git a/src/pages/PetItemPage/PetItemListPage.jsx b/src/pages/PetItemPage/PetItemListPage.jsx
new file mode 100644
index 0000000..b433fe6
--- /dev/null
+++ b/src/pages/PetItemPage/PetItemListPage.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import styled from 'styled-components';
+
+const PetItemListPage = () => {
+  const navigate = useNavigate();
+
+
+  return (
+    <Div>
+      <h1>목록</h1>
+      <button onClick={(e)=>{navigate("/petitem")}}>등록</button>
+    </Div>
+  );
+};
+
+export default PetItemListPage;
+
+const Div = styled.div`
+margin-top: 64px;
+`;
diff --git a/src/pages/PetItemPage/PetItemPage.jsx b/src/pages/PetItemPage/PetItemPage.jsx
new file mode 100644
index 0000000..4b40161
--- /dev/null
+++ b/src/pages/PetItemPage/PetItemPage.jsx
@@ -0,0 +1,203 @@
+import { useState } from "react";
+import styled from "styled-components";
+import { useNavigate } from "react-router-dom";
+import { images } from "../../components/Images";
+import { GoArrowLeft } from "react-icons/go";
+
+const PetItemPage = () => {
+  const navigate = useNavigate();
+
+  function handleCreateClick(e) {
+    e.preventDefault(); // 새로고침 방지
+    const formData = new FormData(e.target);
+    const data = Object.fromEntries(formData.entries());
+    // 현재 시간을 createdAt, updatedAt으로 추가
+    const now = new Date().toISOString();
+    data.createdAt = now;
+    // data.updatedAt = now;
+
+    console.log("data = ", data);
+
+    //글 등록
+    fetch("http://localhost:8080/api/petItems", {
+      method: "POST",
+      body: JSON.stringify(data),
+      headers: { "Content-Type": "application/json; charset=UTF-8" },
+    })
+      .then((response) => response.json())
+      .then((json) => console.log("등록 data : ", json));
+      e.target.reset(); // 폼의 모든 입력값 초기화
+  }
+
+  function handleSubmit(e) {
+    e.preventDefault(); //새로고침 방지
+    handleCreateClick(e);
+  }
+  const [isClicked, setIsClicked] = useState(false); 
+
+  const handleClick = () => {
+    setIsClicked(!isClicked); //버튼 클릭시 상태 반전
+  };
+  return (
+    <ItemTitle>
+      <Row>
+        <button onClick={() => {navigate("/petitemList");}}>
+          <GoArrowLeft1 />
+        </button>
+        <H1>판매 글 작성</H1>
+      </Row>
+      <form onSubmit={handleSubmit}>
+        <label>
+          유저 : <br />
+          <input name="user" type="text" required />
+        </label><br />
+        <label>
+          이미지 첨부 : <br />
+          <img src={images.cameraIcon} alt="카메라아이콘" />
+          <input name="imageUrl" />
+        </label><br />
+        <br />
+        <label>
+          <Title>제목 </Title>
+          <Box name="name" type="text" required  placeholder="제목을 입력해주세요"/>
+        </label>
+        <Title>거래 방식</Title>
+        <Row>
+          <Button1 right="15" isClicked={isClicked} onClick={handleClick}>판매하기</Button1>
+          <Button1 isClicked={isClicked} onClick={handleClick}>나눔하기</Button1>
+        </Row>
+        <br />
+        <label>
+          <Title> 설명 </Title>
+          <Textarea name="description" required placeholder="공유하고 싶은 내용을 작성해주세요"/>
+        </label>
+        <br />
+        <label>
+          나눔상태 : <br />
+          <input type="checkbox" name="status" />
+        </label>
+        <br />
+        <Div>욕설 광고등 운영저책 위반 시 제재를 받으실 수 있습니다</Div>
+        <Button type="submit">작성 완료</Button>
+      </form>
+    </ItemTitle>
+  );
+};
+
+export default PetItemPage;
+
+const ItemTitle = styled.div`
+  margin: 64px 25px 64px 25px;
+`;
+
+const Row = styled.div`
+  display: flex;
+  margin-bottom: 20px;
+  align-items: center;
+`;
+
+const H1 = styled.h1`
+  font-size: 1em;
+  font-weight: bold;
+  top: 0;
+  z-index: 10;
+  width: 100%;
+  height: 64px;
+  padding: 16px;
+  display: flex;
+  align-items: center;
+  padding-left: 25%;
+`;
+
+const GoArrowLeft1 = styled(GoArrowLeft)`
+  font-size: 2em;
+`;
+const Title = styled.div`
+  font-size: 1em;
+  font-weight: bold;
+  display: flex;
+  margin: 5px;
+`;
+const Box = styled.input`
+  top: 0;
+  width: 100%;
+  height: 30px;
+  margin: 10px 0px 15px 0px;
+  display: flex;
+  align-items: center;
+  padding-left: 20px;
+  border-radius: 5px;
+  border: 1px solid #E4E4E4;
+  outline: none;
+  transition: border-color 0.3s;
+  &::placeholder {
+    font-size: 0.7em; /* placeholder의 글씨 크기를 작게 설정 */
+    color: #E4E4E4; /* 필요에 따라 placeholder 색상 변경 */
+  }
+`;
+const Textarea = styled.textarea`
+  margin: 10px 0px 15px 0px;
+  width: 100%;
+  height: 15em;
+  display: flex;
+  align-items: center;
+  padding: 15px;
+  border-radius: 5px;
+  border: 1px solid #E4E4E4;
+  outline: none;
+  transition: border-color 0.3s;
+  &::placeholder {
+    font-size: 0.7em; /* placeholder의 글씨 크기를 작게 설정 */
+    color: #E4E4E4; /* 필요에 따라 placeholder 색상 변경 */
+  }
+`;
+const Button = styled.button`
+  width: 100%;
+  height: 40px;
+  display: flex;
+  background-color: #FF6E00;
+  padding: 15px;
+  border-radius: 6px;
+  border: 1px solid #FF6E00;
+  outline: none;
+  transition: border-color 0.3s;
+  align-items: center;
+  justify-content: center;
+  color: white;
+`;
+const Button1 = styled.button`
+  width: 7em;
+  height: 35px;
+  display: flex;
+  background-color: white;
+  border: 1px solid #8D8D8D;
+  padding: 15px;
+  border-radius: 30px;
+  align-items: center;
+  justify-content: center;
+  color: #8D8D8D;
+  &:hover {
+    background-color: #b8b8b8; /* 호버 시 배경색 */
+    color: white; /* 호버 시 텍스트 색상 */
+  }
+  ${({isClicked}) => isClicked &&`
+    background-color: #8D8D8D;
+    color: white;
+    border: 1px solid #8D8D8D;
+  `}
+  margin-right: ${(props) => (props.right ?`${props.right}px` : '0')};
+`;
+const Div = styled.div`
+  font-size: 0.7em;
+  width: 100%;
+  height: 20px;
+  display: flex;
+  background-color: #FFEFEF;
+  padding: 15px;
+  border-radius: 6px;
+  outline: none;
+  margin-bottom: 15px;
+  align-items: center;
+  justify-content: center;
+  color: #E04F4B;
+`;
\ No newline at end of file

From de3bda6f86dd74f23fe7cee4c02783ed9c30839a Mon Sep 17 00:00:00 2001
From: EunSeok <dldmstjr114@naver.com>
Date: Sat, 26 Oct 2024 12:47:54 +0900
Subject: [PATCH 3/4] feat(#5):PetIteme/PetItemlist/PetItemDetailPage Update

---
 src/Router.jsx                              |   2 +
 src/pages/PetItemPage/PetItemDetailPage.jsx |  33 ++-
 src/pages/PetItemPage/PetItemListPage.jsx   | 213 +++++++++++++++++++-
 src/pages/PetItemPage/PetItemPage.jsx       | 130 ++++++------
 src/styles/GlobalStyles.js                  |   1 -
 5 files changed, 312 insertions(+), 67 deletions(-)

diff --git a/src/Router.jsx b/src/Router.jsx
index 8177513..4fd7e9a 100644
--- a/src/Router.jsx
+++ b/src/Router.jsx
@@ -5,6 +5,7 @@ import Footer from './components/common/Footer';
 import ScrollTop from './components/common/ScrollTop.jsx';
 import PetItemPage from './pages/PetItemPage/PetItemPage.jsx';
 import PetItemListPage from './pages/PetItemPage/PetItemListPage.jsx';
+import PetItemDetailPage from './pages/PetItemPage/PetItemDetailPage.jsx';
 
 function Router() {
   return (
@@ -15,6 +16,7 @@ function Router() {
           <Route path="/" element={<MainPage />} />
           <Route path="/petitem" element={<PetItemPage />} />
           <Route path="/petitemList" element={<PetItemListPage />} />
+          <Route path="/petitemDetail/:no" element={<PetItemDetailPage/>} />
         </Routes>
         <Footer />
         <ScrollTop />
diff --git a/src/pages/PetItemPage/PetItemDetailPage.jsx b/src/pages/PetItemPage/PetItemDetailPage.jsx
index 12d3ce0..a0d0763 100644
--- a/src/pages/PetItemPage/PetItemDetailPage.jsx
+++ b/src/pages/PetItemPage/PetItemDetailPage.jsx
@@ -1,11 +1,36 @@
-import React from 'react';
+import { useEffect, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import styled from "styled-components";
+
 
 const PetItemDetailPage = () => {
+  const navigate = useNavigate();
+  const {no} = useParams();// %% URL에서 글 번호(no)를 가져옴 %%
+  const [itemDetail, setItemDetail] = useState({});
+
+  useEffect(()=>{
+    fetch(`http://localhost:8080/api/petItems/${no}`)
+    .then((response) => response.json())
+    .then((json) => {
+      console.log("item 내용 :", json);
+      setItemDetail(json);
+    });
+  },[no])
   return (
-    <div>
+    <ItemTitle>
       <h1>나눔 상세보기 </h1>
-    </div>
+      <p>글 번호: {itemDetail.petItemId}</p> 
+      <p>제목: {itemDetail.name}</p>
+      <p>내용: {itemDetail.description}</p>
+    
+    <button onClick={(e)=>{navigate("/petitemList")} }>게시글 목록</button>
+    </ItemTitle>
   );
 };
 
-export default PetItemDetailPage;
\ No newline at end of file
+export default PetItemDetailPage;
+
+
+const ItemTitle = styled.div`
+  margin: 64px 25px 64px 25px;
+`;
\ No newline at end of file
diff --git a/src/pages/PetItemPage/PetItemListPage.jsx b/src/pages/PetItemPage/PetItemListPage.jsx
index b433fe6..689080b 100644
--- a/src/pages/PetItemPage/PetItemListPage.jsx
+++ b/src/pages/PetItemPage/PetItemListPage.jsx
@@ -1,15 +1,67 @@
-import React from 'react';
+import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
+import { HiArrowLeft, HiArrowSmDown } from "react-icons/hi";
+import { LuSearch } from "react-icons/lu";
+import { IoChatbubbleEllipsesOutline } from "react-icons/io5";
+import { FcLike } from "react-icons/fc";
 
 const PetItemListPage = () => {
   const navigate = useNavigate();
+  const [petItemList, setPetItemList] = useState([]); 
 
 
+  function handleList() {
+    fetch("http://localhost:8080/api/petItems")
+      .then((response) => response.json())
+      .then((json) => {
+        console.log("게시글 목록:", json); 
+        setPetItemList(json);
+      });
+  }
+
+  useEffect(() => {   
+    handleList();
+  }, []);
+
   return (
     <Div>
-      <h1>목록</h1>
-      <button onClick={(e)=>{navigate("/petitem")}}>등록</button>
+      <RowTi>
+        <button onClick={() => {navigate("/");}}>
+          <HiArrowLeft1 />
+        </button>
+        <H1>나눔</H1>
+      </RowTi>
+      
+        <Search>
+        <Box type="search" placeholder="단어를 입력하세요"/><LuSearch1 />
+        <Buuttons>
+          <ButtonCh>최신순<HiArrowSmDown1 /></ButtonCh>
+          <BuWrite onClick={()=>{navigate("/petitem")}}>글 작성</BuWrite>
+        </Buuttons>
+        </Search>
+      
+      <All>전체 {(petItemList.length).toLocaleString()}개</All>
+        <RowLi>
+          {petItemList.map((item) => ( 
+            <>
+            <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' })}
+                  <Icons>
+                    <FcLike/>4
+                    <IoChatbubbleEllipsesOutline/>2
+                  </Icons>
+                </ListDate>
+          </>
+          ))}
+        </RowLi>
     </Div>
   );
 };
@@ -17,5 +69,158 @@ const PetItemListPage = () => {
 export default PetItemListPage;
 
 const Div = styled.div`
-margin-top: 64px;
+margin: 64px 25px 64px 25px;
+`;
+
+const RowTi = styled.div`
+  display: flex;
+  margin-bottom: 10px;
+  align-items: center;
+`;
+
+const H1 = styled.h1`
+  font-size: 18px;
+  font-weight: bold;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right :20px ;
+`;
+const HiArrowLeft1 = styled(HiArrowLeft)`
+  font-size: 20px;
+  font-weight: bold;
+  `;
+const Buuttons = styled.div`
+    position: absolute;
+    right: 0px;
+    flex-direction: row;
+    display: flex; 
+    gap: 5px;
+    align-self: center;
+  `;
+const Box = styled.input`
+  width: 50%;
+  height: 30px;
+  margin: 10px 0px 10px 0px;
+  align-items: self-start;
+  padding-left: 10px;
+  border-radius: 5px;
+  border: 1px solid #F0F0F0;
+  background-color: #F0F0F0;
+  outline: none;
+  &::placeholder {
+    font-size: 12px; /* placeholder의 글씨 크기를 작게 설정 */
+    color: #B3B3B3; /* 필요에 따라 placeholder 색상 변경 */
+  }
+`;
+const HiArrowSmDown1 = styled(HiArrowSmDown)`
+  font-size: 20px;
+`;
+const Search = styled.div`
+  width: 100%;
+  position: relative;
+  display: flex;
+  justify-content:space-between;             
+`;
+const LuSearch1 = styled(LuSearch)`
+  position: absolute;
+  top: 16px;
+  bottom: 2px;
+  left: 43%;
+  border-radius: 15px;
+  color: #B3B3B3;
+`;
+const ButtonCh = styled.button`
+    display: flex;
+    align-items: center;
+    border-radius: 8px;
+    padding: 3px 0px 3px 6px;
+    &:hover {
+      background-color: #F0F0F0;
+    }
+`;
+const BuWrite = styled.button`
+  width: 64px;
+  height: 28px;
+  font-size: 12px;
+  display: flex;
+  background-color: #FF6E00;
+  border-radius: 8px;
+  border: 1px solid #FF6E00;
+  outline: none;
+  transition: border-color 0.3s;
+  align-items: center;
+  justify-content: center;
+  color: white;
+`;
+const All = styled.div`
+  font-size: 12px;
+  color: #8D8D8D;
+  margin-top: 10px;
+  margin-bottom: 10px;
+`;
+const RowLi = styled.div`
+  display: flex;
+  flex-wrap: wrap; // 화면에 맞춰 자동 줄바꿈
+  gap: 16px;       // 각 Col 사이의 간격
+  margin: 0 -8px;  // Col 패딩 균등 조절
+`;
+const Lists = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  height: 100px;
+`;
+const ListImg = styled.div`
+  width: 100px;
+  height: 100px;
+  background-color: #D9D9D9;
+  border-radius: 8px;
+  flex-shrink: 0; /* 이미지 크기를 고정 */
+  background-image: url(${(props) => props.src}); /* 이미지 URL 설정 */
+  background-size: cover; /* 이미지를 채우도록 설정 */
+  background-position: center; /* 이미지 중앙 정렬 */
+`;
+const ListTitlesContainer = styled.div`
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between; /* 상하 간격 자동 배분 */
+  padding: 5px;
+`;
+const ListTItle = styled.div`
+  display: flex;
+  font-size: 16px;
+  font-weight: bold;
+  width: 100%;
+  align-self: center;
+`;
+const ListUser = styled.div`
+  font-size: 12px;
+  color: #8D8D8D;
+  display: flex;
+  width: 100%;
+  align-self: center;
+`;
+const ListPrice = styled.div`
+  font-size: 15px;
+  font-weight: bold;
+  display: flex;
+  width: 100%;
+  align-self: center;
+`;
+const ListDate = styled.div`
+  font-size: 10px;
+  color: #8D8D8D;
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: flex-end;
+`;
+const Icons = styled.div`
+  font-size: 16px;
+  color: #8D8D8D;
+  margin-left: 6px;
 `;
diff --git a/src/pages/PetItemPage/PetItemPage.jsx b/src/pages/PetItemPage/PetItemPage.jsx
index 4b40161..d4f2c0d 100644
--- a/src/pages/PetItemPage/PetItemPage.jsx
+++ b/src/pages/PetItemPage/PetItemPage.jsx
@@ -1,8 +1,9 @@
-import { useState } from "react";
+
 import styled from "styled-components";
 import { useNavigate } from "react-router-dom";
 import { images } from "../../components/Images";
-import { GoArrowLeft } from "react-icons/go";
+import { HiArrowLeft } from "react-icons/hi";
+import { MdPhotoCamera } from "react-icons/md";
 
 const PetItemPage = () => {
   const navigate = useNavigate();
@@ -33,52 +34,44 @@ const PetItemPage = () => {
     e.preventDefault(); //새로고침 방지
     handleCreateClick(e);
   }
-  const [isClicked, setIsClicked] = useState(false); 
-
-  const handleClick = () => {
-    setIsClicked(!isClicked); //버튼 클릭시 상태 반전
-  };
+  
   return (
     <ItemTitle>
-      <Row>
+      <MainTitle>
         <button onClick={() => {navigate("/petitemList");}}>
-          <GoArrowLeft1 />
+          <HiArrowLeft1 />
         </button>
         <H1>판매 글 작성</H1>
-      </Row>
+      </MainTitle>
       <form onSubmit={handleSubmit}>
         <label>
           유저 : <br />
           <input name="user" type="text" required />
         </label><br />
-        <label>
-          이미지 첨부 : <br />
-          <img src={images.cameraIcon} alt="카메라아이콘" />
-          <input name="imageUrl" />
-        </label><br />
+        <LableImg>
+          <input type="file" style={{display:'none'}} name="imageUrl" multiple={true} />
+          <BuImg>0/5</BuImg><MdPhotoCamera1 />
+        </LableImg>
         <br />
         <label>
           <Title>제목 </Title>
           <Box name="name" type="text" required  placeholder="제목을 입력해주세요"/>
         </label>
         <Title>거래 방식</Title>
-        <Row>
-          <Button1 right="15" isClicked={isClicked} onClick={handleClick}>판매하기</Button1>
-          <Button1 isClicked={isClicked} onClick={handleClick}>나눔하기</Button1>
-        </Row>
-        <br />
+          <label>
+            <ButtonRow>
+              <ButtonNa >판매하기</ButtonNa>
+              <ButtonNa >나눔하기</ButtonNa>
+            </ButtonRow>
+          <Box name="price" type="text" placeholder="금액을 입력해주세요"/>
+          </label>
         <label>
           <Title> 설명 </Title>
           <Textarea name="description" required placeholder="공유하고 싶은 내용을 작성해주세요"/>
         </label>
         <br />
-        <label>
-          나눔상태 : <br />
-          <input type="checkbox" name="status" />
-        </label>
-        <br />
         <Div>욕설 광고등 운영저책 위반 시 제재를 받으실 수 있습니다</Div>
-        <Button type="submit">작성 완료</Button>
+        <BuWrite type="submit">작성 완료</BuWrite>
       </form>
     </ItemTitle>
   );
@@ -90,30 +83,27 @@ const ItemTitle = styled.div`
   margin: 64px 25px 64px 25px;
 `;
 
-const Row = styled.div`
+const MainTitle = styled.div`
   display: flex;
   margin-bottom: 20px;
   align-items: center;
 `;
 
 const H1 = styled.h1`
-  font-size: 1em;
+  font-size: 18px;
   font-weight: bold;
-  top: 0;
-  z-index: 10;
   width: 100%;
-  height: 64px;
-  padding: 16px;
   display: flex;
   align-items: center;
-  padding-left: 25%;
+  justify-content: center;
+  margin-right :20px ;
 `;
 
-const GoArrowLeft1 = styled(GoArrowLeft)`
-  font-size: 2em;
+const HiArrowLeft1 = styled(HiArrowLeft)`
+  font-size: 20px;
 `;
 const Title = styled.div`
-  font-size: 1em;
+  font-size: 15px;
   font-weight: bold;
   display: flex;
   margin: 5px;
@@ -131,7 +121,7 @@ const Box = styled.input`
   outline: none;
   transition: border-color 0.3s;
   &::placeholder {
-    font-size: 0.7em; /* placeholder의 글씨 크기를 작게 설정 */
+    font-size: 10px; /* placeholder의 글씨 크기를 작게 설정 */
     color: #E4E4E4; /* 필요에 따라 placeholder 색상 변경 */
   }
 `;
@@ -147,17 +137,17 @@ const Textarea = styled.textarea`
   outline: none;
   transition: border-color 0.3s;
   &::placeholder {
-    font-size: 0.7em; /* placeholder의 글씨 크기를 작게 설정 */
+    font-size: 10px; /* placeholder의 글씨 크기를 작게 설정 */
     color: #E4E4E4; /* 필요에 따라 placeholder 색상 변경 */
   }
 `;
-const Button = styled.button`
+const BuWrite = styled.button`
   width: 100%;
-  height: 40px;
+  height: 45px;
   display: flex;
   background-color: #FF6E00;
   padding: 15px;
-  border-radius: 6px;
+  border-radius: 8px;
   border: 1px solid #FF6E00;
   outline: none;
   transition: border-color 0.3s;
@@ -165,39 +155,63 @@ const Button = styled.button`
   justify-content: center;
   color: white;
 `;
-const Button1 = styled.button`
-  width: 7em;
-  height: 35px;
+const ButtonRow = styled.div`
+  display: flex;        // 플렉스 박스 레이아웃으로 설정
+  gap: 10px;           // 버튼 간의 간격
+`;
+const ButtonNa = styled.button`
+  width: 85px;
+  height: 30px;
   display: flex;
   background-color: white;
-  border: 1px solid #8D8D8D;
-  padding: 15px;
-  border-radius: 30px;
+  border: 0.3px solid #FF6E00;
+  border-radius: 8px;
   align-items: center;
   justify-content: center;
-  color: #8D8D8D;
+  color: #FF6E00;
   &:hover {
-    background-color: #b8b8b8; /* 호버 시 배경색 */
+    background-color: #FF6E00; /* 호버 시 배경색 */
     color: white; /* 호버 시 텍스트 색상 */
   }
-  ${({isClicked}) => isClicked &&`
-    background-color: #8D8D8D;
-    color: white;
-    border: 1px solid #8D8D8D;
-  `}
-  margin-right: ${(props) => (props.right ?`${props.right}px` : '0')};
 `;
 const Div = styled.div`
-  font-size: 0.7em;
+  font-size: 10px;
+  font-weight: bold;
   width: 100%;
   height: 20px;
   display: flex;
   background-color: #FFEFEF;
   padding: 15px;
-  border-radius: 6px;
+  border-radius: 5px;
   outline: none;
   margin-bottom: 15px;
   align-items: center;
   justify-content: center;
   color: #E04F4B;
-`;
\ No newline at end of file
+`;
+const BuImg = styled.button`
+  background-color: white;
+  border-radius: 8px;
+  padding-top: 25px;
+  font-size: 10px;
+  color: #8D8D8D;
+  border: 1px solid #E4E4E4;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 65px;
+  height: 65px;
+`;
+const MdPhotoCamera1 = styled(MdPhotoCamera)`
+  position: absolute;
+  font-size: 20px;
+  top: 18px;
+  left: 23px;
+  border-radius: 15px;
+  color: #8D8D8D;
+`;
+
+const LableImg = styled.label`
+position: relative;
+display: flex;
+`;  
diff --git a/src/styles/GlobalStyles.js b/src/styles/GlobalStyles.js
index e4e3083..98efed0 100644
--- a/src/styles/GlobalStyles.js
+++ b/src/styles/GlobalStyles.js
@@ -185,7 +185,6 @@ const GlobalStyle = createGlobalStyle`
 
   #root {
     width: 100%;
-    height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;

From bfe30fa53a4a24a4d1cccd3aebe60c9e97be00f4 Mon Sep 17 00:00:00 2001
From: EunSeok <dldmstjr114@naver.com>
Date: Mon, 28 Oct 2024 09:24:48 +0900
Subject: [PATCH 4/4] feat(#5):update

---
 src/pages/PetItemPage/PetItemDetailPage.jsx | 187 +++++++++++++++++++-
 src/pages/PetItemPage/PetItemListPage.jsx   |  51 ++++--
 src/pages/PetItemPage/PetItemPage.jsx       |  29 ++-
 3 files changed, 236 insertions(+), 31 deletions(-)

diff --git a/src/pages/PetItemPage/PetItemDetailPage.jsx b/src/pages/PetItemPage/PetItemDetailPage.jsx
index a0d0763..6f3cb64 100644
--- 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;
+  
 `;
\ No newline at end of file
diff --git a/src/pages/PetItemPage/PetItemListPage.jsx b/src/pages/PetItemPage/PetItemListPage.jsx
index 689080b..1c09b07 100644
--- 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
index d4f2c0d..faafa04 100644
--- 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,7 +49,7 @@ 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>
@@ -58,13 +57,13 @@ const PetItemPage = () => {
           <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;
 `;