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

Feat/#5
URECA-PODONG · Nov 6, 2024 · 9481101 · 9481101
2 parents abfffaf + 6a849ad
commit 9481101
Show file tree

Hide file tree

Showing 7 changed files with 177 additions and 135 deletions.
diff --git a/src/pages/CommunityPage/CommunityDetail.jsx b/src/pages/CommunityPage/CommunityDetail.jsx
@@ -10,12 +10,11 @@ const CommunityDetail = () => {
   const { no } = useParams(); // %% URL에서 글 번호(no)를 가져옴 %%
   const [postDetail, setPostDetail] = useState([]);
   const [comments, setComments] = useState([]);
+  const [refreshComments, setRefreshComments] = useState(false);
 
   useEffect(() => {
-    // 상세정보 불러오기
-
     axios
-      .get(`/communities/${no}`)
+      .get(`https://ureca.store/api/communities/${no}`)
       .then(response => {
         setPostDetail(response.data);
         console.log('나눔 상세 :', response.data);
@@ -24,49 +23,51 @@ const CommunityDetail = () => {
         console.error('Error fetching data:', error);
       });
   }, [no]);
+ // 댓글 목록 불러오기
+useEffect(( ) => {
+  const fetchComments = async () => {
+    try {
+      const response = await axios.get(`https://ureca.store/api/communityComments`);
+      setComments(response.data); // 댓글 목록 갱신
+      console.log('댓글 목록 :', response.data);
+    } catch (error) {
+      console.error('Error:', error);
+    }
+  };
+
+  fetchComments();
+}, [refreshComments]);
 
-  useEffect(() => {
-    axios
-      .get(`/communityComments`)
-      .then(response => {
-        setComments(response.data);
-        console.log('댓글 목록 :', response.data);
-      })
-      .catch(error => {
-        console.error('Error fetching data:', error);
-      });
-  }, []);
 
   // 좋아요 수 증가 함수
   const good = () => {
     const updatedGood = postDetail.good + 1;
-
-    // 서버의 좋아요 수 업데이트 요청
     axios
-      .put(`/communities/${no}`, { ...postDetail, good: updatedGood })
+      .put(`https://ureca.store/api/communities/${no}`, { ...postDetail, good: updatedGood })
       .then(response => {
         console.log('좋아요 업데이트:', response.data);
         setPostDetail(prevDetail => ({ ...prevDetail, good: updatedGood }));
       })
       .catch(error => {
         console.error('좋아요 업데이트 실패:', error);
       });
-  };
+  }
   //댓글 등록
   const handleSubmit = e => {
     e.preventDefault(); // 새로고침 방지
     const formData = new FormData(e.target);
+    const user = localStorage.getItem('userId');
     const data = Object.fromEntries(formData.entries()); //객체로 변환
-    // const now = new Date().toISOString();
-    // data.createdAt = now; // 현재 시간 추가
     data.post = no;
-    //글 등록
+    data.user = user;
     axios
-      .post('/communityComments', data)
+      .post('https://ureca.store/api/communityComments', data)
       .then(response => {
         console.log('등록 : ', response.data);
         setComments(prevComments => [...prevComments, response.data]);
         console.log('등록 data : ', data);
+        alert('댓글이 등록되었습니다!');
+        setRefreshComments(prev => !prev);
       })
       .catch(error => console.error('오류 발생:', error));
 
@@ -76,7 +77,7 @@ const CommunityDetail = () => {
   return (
     <Container>
       <ItemTitle>
-        <ListImg src={`/${postDetail.imageUrl}`} alt={postDetail.imageUrl} />
+        <ListImg src={postDetail.imageUrl} alt={postDetail.imageUrl} />
         <ImgBt>
           <ImgNo>1 / 5</ImgNo>
         </ImgBt>
@@ -122,7 +123,6 @@ const CommunityDetail = () => {
         </CommentST>
       </ItemTitle>
       <CommentFrom onSubmit={handleSubmit}>
-        <input type="number" name="user" placeholder="유저번호" required />
         <CommentCC type="text" name="comment" placeholder="댓글을 달아주세요." required />
         <CommentSubmit type="submit">등록</CommentSubmit>
       </CommentFrom>
@@ -248,15 +248,18 @@ const CommentST = styled.div`
 `;
 const CommentFrom = styled.form`
   width: 100%;
+  position: absolute;
   display: flex;
   justify-content: flex-end;
+  bottom: 0px;
   margin-top: auto;
   margin-bottom: 64px;
 `;
 const Container = styled.div`
   height: 100dvh;
   display: flex;
   flex-direction: column;
+  position: relative;
 `;
 const CommentCC = styled.input`
   height: 40px;

diff --git a/src/pages/CommunityPage/CommunityList.jsx b/src/pages/CommunityPage/CommunityList.jsx
@@ -22,7 +22,7 @@ const CommunityList = () => {
 
   useEffect(() => {
     axios
-      .get('/communities')
+      .get('https://ureca.store/api/communities')
       .then(response => {
         setComunityList(response.data); // 응답 데이터 저장
         console.log('게시글 목록:', response.data);
@@ -39,7 +39,7 @@ const CommunityList = () => {
         const updatedGood = (item.good || 0) + 1;
         // 서버의 좋아요 수 업데이트 요청
         axios
-          .put(`/communities/${postId}`, { ...item, good: updatedGood })
+          .put(`https://ureca.store/api/communities/${postId}`, { ...item, good: updatedGood })
           .then(response => {
             console.log('좋아요 업데이트:', response.data);
           })
@@ -56,7 +56,7 @@ const CommunityList = () => {
   // 댓글 목록 불러오기
   useEffect(() => {
     axios
-      .get(`/communityComments`)
+      .get(`https://ureca.store/api/communityComments`)
       .then(response => {
         setComments(response.data);
         console.log('댓글 목록 :', response.data);
@@ -69,7 +69,7 @@ const CommunityList = () => {
   return (
     <ItemTitle>
       <Col>
-        <CommunityText>community</CommunityText>
+        <CommunityText>고양이가 세상을 지배한다</CommunityText>
         <WriteBtn
           onClick={() => {
             navigate('/community/write');
@@ -96,7 +96,7 @@ const CommunityList = () => {
                   e.preventDefault();
                   navigate(`/community/detail/${item.postId}`);
                 }}>
-                <ListImg src={`/${item.imageUrl}`} />
+                <ListImg src={item.imageUrl}/>
                 <ListTitlesContainer>
                   <ListTItle>제목 : {item.title}</ListTItle>
                   <ListDate>
@@ -180,20 +180,23 @@ const Category = styled.div`
   display: flex;
   justify-content: space-around;
   margin: 10px 0px;
+  align-items: center;
 `;
 const CategoryBtn = styled.div`
   display: flex;
+  font-size:13px ;
   flex-direction: column;
   align-items: center;
+  cursor: pointer;
   opacity: ${({ $active }) => ($active ? '1' : '0.5')};
   transition: opacity 0.3s;
   &:hover {
     opacity: 1;
   }
 `;
 const CategoryImg = styled.img`
-  width: 40px;
-  height: 40px;
+  width: 25px;
+  height: 30px;
 `;
 
 const RowLi = styled.div`
@@ -218,6 +221,7 @@ const ListImg = styled.img`
   background-image: url(${props => props.src}); /* 이미지 URL 설정 */
   background-size: cover; /* 이미지를 채우도록 설정 */
   background-position: center; /* 이미지 중앙 정렬 */
+  cursor: pointer;
 `;
 const ListTitlesContainer = styled.div`
   display: flex;
@@ -263,6 +267,7 @@ const Icons = styled.div`
 `;
 const FcLike1 = styled(FcLike)`
   font-size: 16px;
+  cursor: pointer;
 `;
 const Hr = styled.div`
   width: 100%;

diff --git a/src/pages/CommunityPage/CommunityWrite.jsx b/src/pages/CommunityPage/CommunityWrite.jsx
@@ -16,8 +16,8 @@ const CommunityWrite = () => {
     { src: images.categoryAll, name: '전체' },
     { src: images.categoryFreedom, name: '자유' },
     { src: images.categoryDongNea, name: '동네' },
-    { src: images.categoryExport, name: '전문가' },
-    { src: images.categoryAnonymous, name: '익명' },
+    { src: images.categoryExpert, name: '전문가' },
+    { src: images.categoryAnonymity, name: '익명' },
     { src: images.categoryEvent, name: '이벤트' },
   ];
 
@@ -27,8 +27,7 @@ const CommunityWrite = () => {
 
     // FormData 객체 생성
     const formData = new FormData();
-    // const createdAt = new Date().toISOString();
-    // formData.append('createdAt', createdAt); // 현재 시간 추가
+    const user = localStorage.getItem('userId');
     formData.append('title', title);
     formData.append('contents', contents);
     formData.append('user', user);
@@ -37,7 +36,7 @@ const CommunityWrite = () => {
     }
 
     try {
-      const response = await axios.post('/communities', formData, {
+      const response = await axios.post('https://ureca.store/api/communities', formData, {
         headers: {
           'Content-Type': 'multipart/form-data',
         },
@@ -79,11 +78,6 @@ const CommunityWrite = () => {
     <ItemTitle>
       <Form onSubmit={handleSubmit}>
         <div>
-          <label htmlFor="user">
-            유저 : <br />
-            <input id="user" value={user} type="number" onChange={e => setUser(e.target.value)} required />
-          </label>
-          <br />
           <LableImg htmlFor="imageUrl">
             <input type="file" style={{ display: 'none' }} onChange={handleFileChange} accept="image/*" id="imageUrl" />
             {uploadedImage ? (
@@ -134,12 +128,14 @@ const CommunityWrite = () => {
           </label>
           <br />
         </div>
+        <div style={{display:'flex'}}> 
         <SubmitBtn>
           <Div>욕설 광고등 운영저책 위반 시 제재를 받으실 수 있습니다</Div>
           <BuWrite type="submit" disabled={loading}>
             {loading ? '등록중...' : '작성 완료'}
           </BuWrite>
         </SubmitBtn>
+        </div>
       </Form>
     </ItemTitle>
   );
@@ -194,26 +190,27 @@ const Category = styled.div`
   padding: 10px;
   display: flex;
   justify-content: space-around;
-  margin: 10px 0px;
+  margin: 0px 0px;
 `;
 const CategoryBtn = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
   opacity: ${({ $active }) => ($active ? '1' : '0.5')};
   transition: opacity 0.3s;
+  cursor: pointer;
   &:hover {
     opacity: 1;
   }
 `;
 const CategoryImg = styled.img`
-  width: 40px;
-  height: 40px;
+  width: 25px;
+  height: 30px;
 `;
 const Textarea = styled.textarea`
   margin: 10px 0px 15px 0px;
   width: 100%;
-  height: 15em;
+  height: 10em;
   display: flex;
   align-items: center;
   padding: 15px;
@@ -280,13 +277,17 @@ const LableImg = styled.label`
   position: relative;
   display: flex;
   width: 65px;
+  cursor: pointer;
 `;
 const Form = styled.form`
-  height: 100%;
+  height: 100vh;
   display: flex;
+  position: relative;
   flex-direction: column;
 `;
 const SubmitBtn = styled.div`
-  margin-top: auto;
-  margin-bottom: 0px;
+  position: absolute;
+  bottom:0px;
+  width: 100%;
+  justify-content: flex-end;
 `;