Skip to content

Commit

Permalink
Merge pull request #85 from URECA-PODONG/feat/#4
Browse files Browse the repository at this point in the history 
design: 전체 페이지 디자인 디테일 수정
  • Loading branch information
@ckdwns1221
ckdwns1221 authored Nov 7, 2024
2 parents 871a162 + f138f54 commit c9835fa
Show file tree
Hide file tree
Showing 15 changed files with 547 additions and 559 deletions.
14 changes: 14 additions & 0 deletions public/images/payment/paymentBankBook.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions public/images/payment/paymentCard.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions public/images/payment/paymentPhone.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
40 changes: 21 additions & 19 deletions src/components/Images.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,9 @@ export const images = {
cameraIcon: '/images/common/cameraIcon.svg',
loginDogCat: '/images/common/loginDogCat.svg',
logo: '/images/common/logo.svg',
kakaobtn:'/images/common/kakaobtn.svg',
kakaobtn: '/images/common/kakaobtn.svg',
cancel: '/images/common/cancelButton.svg',


// community
categoryAll: '/images/community/categoryAll.svg',
categoryAnonymity: '/images/community/categoryAnonymity.svg',
Expand All @@ -29,23 +28,21 @@ export const images = {

// mypage

alert: "/images/myPage/alert.svg",
blockHand: "/images/myPage/blockHand.svg",
bogwan: "/images/myPage/bogwan.svg",
calendar: "/images/myPage/calendar.svg",
hide: "/images/myPage/hide.svg",
imseeJeojang: "/images/myPage/imseeJeojang.svg",
myActivity: "/images/myPage/myActivity.svg",
bag: "/images/myPage/bag.svg",
coupon: "/images/myPage/coupon.svg",
missing: "/images/myPage/missing.svg",
paw: "/images/myPage/paw.svg",
point:"/images/myPage/point.svg",
review:"/images/myPage/review.svg",
mypagecat:"/images/myPage/mypagecat.svg",
dogprofile:"/images/myPage/dogprofile.svg",


alert: '/images/myPage/alert.svg',
blockHand: '/images/myPage/blockHand.svg',
bogwan: '/images/myPage/bogwan.svg',
calendar: '/images/myPage/calendar.svg',
hide: '/images/myPage/hide.svg',
imseeJeojang: '/images/myPage/imseeJeojang.svg',
myActivity: '/images/myPage/myActivity.svg',
bag: '/images/myPage/bag.svg',
coupon: '/images/myPage/coupon.svg',
missing: '/images/myPage/missing.svg',
paw: '/images/myPage/paw.svg',
point: '/images/myPage/point.svg',
review: '/images/myPage/review.svg',
mypagecat: '/images/myPage/mypagecat.svg',
dogprofile: '/images/myPage/dogprofile.svg',

// walk
walkMap: '/images/walk/walkMap.svg',
Expand All @@ -64,4 +61,9 @@ export const images = {
carouselImage6: '/images/carousel/carouselImage6.svg',
carouselImage7: '/images/carousel/carouselImage7.svg',
carouselImage8: '/images/carousel/carouselImage8.svg',

// payment
paymentBankBook: '/images/payment/paymentBankBook.svg',
paymentCard: '/images/payment/paymentCard.svg',
paymentPhone: '/images/payment/paymentPhone.svg',
};
16 changes: 9 additions & 7 deletions src/components/common/MainNav.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@ import { useState, useEffect } from 'react';
import styled from 'styled-components';
import { HiOutlineShoppingCart } from 'react-icons/hi';
import { FaRegUserCircle, FaRegBell } from 'react-icons/fa';
import { PiDogBold } from 'react-icons/pi';
import { Link,useNavigate,useParams } from 'react-router-dom';
import { Link, useNavigate } from 'react-router-dom';
import { images } from '../Images';

const MainNav = () => {
const [isScrolled, setIsScrolled] = useState(false);
Expand All @@ -19,7 +19,6 @@ const MainNav = () => {
}
}, [location.pathname]);


useEffect(() => {
const handleScroll = () => {
setIsScrolled(window.scrollY > 0);
Expand All @@ -44,13 +43,13 @@ const MainNav = () => {
{ icon: <HiOutlineShoppingCart size={17} />, link: '/shoppingCart' },
];



return (
<>
<Navbar $isScrolled={isScrolled}>
<AnimalWrap>
<AnimalName>발바닥천국</AnimalName>
<AnimalName>
<img src={images.logo} alt="로고" />
</AnimalName>
</AnimalWrap>
<NavIconWrap>
{icons.map((item, index) => (
Expand Down Expand Up @@ -107,7 +106,10 @@ const AnimalWrap = styled.div`
`;

const AnimalName = styled.div`
margin-left: 4px;
margin-left: 5px;
img {
width: 90px;
}
`;

const NavIconWrap = styled.div`
Expand Down
101 changes: 44 additions & 57 deletions src/pages/CommunityPage/CommunityDetail.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
import { useEffect, useState } from "react";
import { FiHeart } from "react-icons/fi";
import { IoChatbubbleEllipsesOutline } from "react-icons/io5";
import { VscAccount } from "react-icons/vsc";
import { useParams } from "react-router-dom";
import styled from "styled-components";
import axios from "../../apis/AxiosInstance";
import { useEffect, useState } from 'react';
import { FiHeart } from 'react-icons/fi';
import { IoChatbubbleEllipsesOutline } from 'react-icons/io5';
import { VscAccount } from 'react-icons/vsc';
import { useParams } from 'react-router-dom';
import styled from 'styled-components';
import axios from '../../apis/AxiosInstance';

const CommunityDetail = () => {
const { no } = useParams(); // %% URL에서 글 번호(no)를 가져옴 %%
const [itemDetail, setItemDetail] = useState([]);
const [comments, setComments] = useState([]);
const [newComment, setNewComment] = useState("");
const [newComment, setNewComment] = useState('');
const [users, setUsers] = useState({});
const [itemUserNickname, setItemUserNickname] = useState("");
const [itemUserNickname, setItemUserNickname] = useState('');
const [loading, setLoading] = useState(true); // 로딩 상태 관리

useEffect(() => {
Expand All @@ -21,39 +21,35 @@ const CommunityDetail = () => {
// 나눔 상세 가져오기
const itemResponse = await axios.get(`/communities/${no}`);
setItemDetail(itemResponse.data);
console.log("나눔 상세 :", itemResponse.data);
console.log('나눔 상세 :', itemResponse.data);

// 작성자의 닉네임 가져오기
const userResponse = await axios.get(`/user/${itemResponse.data.user}`);
setItemUserNickname(userResponse.data.nickname);
} catch (error) {
console.error("Error fetching item or user data:", error);
console.error('Error fetching item or user data:', error);
}
};

const fetchComments = async () => {
try {
// 댓글 목록 가져오기
const commentsResponse = await axios.get(`/communityComments`);
const relevantComments = commentsResponse.data.filter(
(item) => item.post === parseInt(no)
);
const relevantComments = commentsResponse.data.filter(item => item.post === parseInt(no));
setComments(relevantComments);
console.log("댓글 목록 :", relevantComments);
console.log('댓글 목록 :', relevantComments);

// 댓글 작성자들의 유저 정보 가져오기
const userIds = [...new Set(relevantComments.map((item) => item.user))];
const userResponses = await Promise.all(
userIds.map((userId) => axios.get(`/user/${userId}`))
);
const userIds = [...new Set(relevantComments.map(item => item.user))];
const userResponses = await Promise.all(userIds.map(userId => axios.get(`/user/${userId}`)));

const userMap = {};
userResponses.forEach((response) => {
userResponses.forEach(response => {
userMap[response.data.userId] = response.data.nickname;
});
setUsers(userMap);
} catch (error) {
console.error("Error fetching comments or user data:", error);
console.error('Error fetching comments or user data:', error);
} finally {
setLoading(false); // 모든 로딩 완료 후 로딩 상태 해제
}
Expand All @@ -72,43 +68,41 @@ const CommunityDetail = () => {
...itemDetail,
good: updatedGood,
})
.then((response) => {
console.log("좋아요 업데이트:", response.data);
setItemDetail((prevDetail) => ({ ...prevDetail, good: updatedGood }));
.then(response => {
console.log('좋아요 업데이트:', response.data);
setItemDetail(prevDetail => ({ ...prevDetail, good: updatedGood }));
})
.catch((error) => {
console.error("좋아요 업데이트 실패:", error);
.catch(error => {
console.error('좋아요 업데이트 실패:', error);
});
};

// 댓글 등록
const handleCommentSubmit = (e) => {
const handleCommentSubmit = e => {
e.preventDefault();
const userId = localStorage.getItem("userId");
const userId = localStorage.getItem('userId');
axios
.post("/communityComments", {
.post('/communityComments', {
post: no,
user: userId,
comment: newComment,
})
.then((response) => {
console.log("댓글 등록 성공:", response.data);
setNewComment("");
.then(response => {
console.log('댓글 등록 성공:', response.data);
setNewComment('');
return axios.get(`/communityComments`);
})
.then((response) => {
const relevantComments = response.data.filter(
(item) => item.post === parseInt(no)
);
.then(response => {
const relevantComments = response.data.filter(item => item.post === parseInt(no));
setComments(relevantComments);
})
.catch((error) => {
console.error("댓글 등록 실패:", error);
.catch(error => {
console.error('댓글 등록 실패:', error);
});
};

// 댓글 입력 핸들러
const handleCommentChange = (e) => {
const handleCommentChange = e => {
setNewComment(e.target.value);
};

Expand All @@ -121,7 +115,7 @@ const CommunityDetail = () => {
</ImgBt>
<User1>
<VscAccount1 />
작성자: {itemUserNickname || "로딩 중..."}
작성자: {itemUserNickname || '로딩 중...'}
</User1>
<Title>제목: {itemDetail.title}</Title>
<Icons>
Expand All @@ -136,26 +130,20 @@ const CommunityDetail = () => {
{comments.length}
</LikeCommentBox>
<div>
<ListPrice>
{itemDetail.price ? (
`${itemDetail.price.toLocaleString()}원`
) : (
<나눔>나눔</나눔>
)}
</ListPrice>
<ListPrice>{itemDetail.price ? `${itemDetail.price.toLocaleString()}원` : <나눔>나눔</나눔>}</ListPrice>
</div>
</Icons>
<Contents>작성글: {itemDetail.contents}</Contents>
<Line />
<CommentST>
{comments.map((item) => (
{comments.map(item => (
<div key={item.communityCommentId}>
<User2>
<VscAccount1 />
작성자: {users[item.user] || "로딩 중..."}
작성자: {users[item.user] || '로딩 중...'}
<ListDate>
{new Date(item.createdAt).toLocaleDateString("ko-KR", {
timeZone: "Asia/Seoul",
{new Date(item.createdAt).toLocaleDateString('ko-KR', {
timeZone: 'Asia/Seoul',
})}
</ListDate>
</User2>
Expand Down Expand Up @@ -194,7 +182,7 @@ const ListImg = styled.img`
background-color: #d9d9d9;
border-radius: 10px;
flex-shrink: calc(); /* 이미지 크기를 고정 */
background-image: url(${(props) => props.src}); /* 이미지 URL 설정 */
background-image: url(${props => props.src}); /* 이미지 URL 설정 */
background-size: cover; /* 이미지를 채우도록 설정 */
background-position: center; /* 이미지 중앙 정렬 */
`;
Expand Down Expand Up @@ -308,7 +296,7 @@ const Comment = styled.div`
margin-top: 5px;
background: #ffffff;
padding: 10px;
border-radius: 10px;
border-radius: 8px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
line-height: 1.5;
`;
Expand All @@ -318,8 +306,7 @@ const CommentFrom = styled.form`
display: flex;
justify-content: flex-end;
bottom: 0px;
margin-top: 10px;
margin-bottom: 70px;
margin: 20px 0 80px;
padding: 0 20px;
`;

Expand All @@ -330,7 +317,7 @@ const CommentCC = styled.input`
border-style: none;
outline: none;
background-color: #f0f0f0;
border-radius: 20px;
border-radius: 8px;
padding: 0px 15px;
font-size: 14px;
transition: background-color 0.3s ease;
Expand All @@ -351,7 +338,7 @@ const CommentSubmit = styled.button`
background-color: #ff6e00;
color: white;
border: none;
border-radius: 15px;
border-radius: 8px;
transition: background-color 0.3s ease;
&:hover {
background-color: #e65c00;
Expand Down
Loading

0 comments on commit c9835fa

Please sign in to comment.