+ {editingCommentId === comment.id ? (
+
+
+
+
+
+ );
+};
+
+export default CommentInput;
diff --git a/src/components/Boards/ArticleCard.module.css b/src/components/Boards/ArticleCard.module.css
new file mode 100644
index 000000000..125103c01
--- /dev/null
+++ b/src/components/Boards/ArticleCard.module.css
@@ -0,0 +1,102 @@
+.link {
+ text-decoration: none;
+}
+
+.article-box {
+ display: flex;
+ gap: 16px;
+ flex-direction: column;
+ border-bottom: 1px solid var(--color-white-300);
+ height: 138px;
+ background-color: var(--color-white-500);
+
+ @media screen and (max-width: 376px) {
+ height: 136px;
+ }
+}
+
+.article-title-box {
+ display: flex;
+ justify-content: space-between;
+ gap: 8px;
+}
+
+.article-title {
+ font-weight: 600;
+ font-size: 20px;
+ line-height: 32px;
+ color: var(--color-blue-300);
+ margin: 0;
+
+ @media screen and (max-width: 376px) {
+ font-size: 18px;
+ line-height: 26px;
+ }
+}
+
+.product-img {
+ width: 72px;
+ height: 72px;
+ border-radius: 8px;
+ border: 1px solid var(--color-white-400);
+ object-fit: contain;
+ position: relative;
+}
+
+.info-box {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.user-info-box {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ gap: 8px;
+}
+
+.user-profile {
+ width: 24px;
+ height: 24px;
+ position: relative;
+}
+
+.user-nickname {
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 24px;
+ color: var(--color-blue-400);
+}
+
+.date {
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 24px;
+ color: var(--color-blue-600);
+}
+
+.like-count-box {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ gap: 8px;
+}
+
+.heart {
+ width: 24px;
+ height: 24px;
+ position: relative;
+}
+
+.like-count {
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 26px;
+ color: var(--color-blue-500);
+}
+
+.image-component {
+ position: absolute;
+ width: 100%;
+}
diff --git a/src/components/Boards/ArticleCard.tsx b/src/components/Boards/ArticleCard.tsx
new file mode 100644
index 000000000..0f7c14970
--- /dev/null
+++ b/src/components/Boards/ArticleCard.tsx
@@ -0,0 +1,55 @@
+import React from "react";
+import { Articles } from "../../util/types";
+import styles from "./ArticleCard.module.css";
+import { formatDate } from "../../util/formatDates";
+import { Link } from "react-router-dom";
+import profileBig from "../../assets/images/profileBig.svg";
+import heartIcon from "../../assets/images/heartIcon.svg";
+import noPic from "../../assets/image/noPic.png";
+
+interface ArticleCardProps {
+ article: Articles;
+}
+
+const ArticleCard = ({ article }: ArticleCardProps) => {
+ return (
+
+
+
+
{article.title}
+
(e.currentTarget.src = noPic)}
+ />
+
+
+
+
+
+
+
{article.writer.nickname}
+
{formatDate(article.createdAt)}
+
+
+
+
+
+
{article.likeCount}
+
+
+
+
+ );
+};
+
+export default ArticleCard;
diff --git a/src/components/Boards/BestArticleCard.module.css b/src/components/Boards/BestArticleCard.module.css
new file mode 100644
index 000000000..281fe1d5e
--- /dev/null
+++ b/src/components/Boards/BestArticleCard.module.css
@@ -0,0 +1,145 @@
+.link {
+ text-decoration: none;
+}
+
+.article-box {
+ display: flex;
+ flex-direction: column;
+ background-color: var(--color-white-100);
+ width: 384px;
+ height: 169px;
+ border-radius: 8px;
+ gap: 10px;
+ padding: 0 24px;
+
+ @media screen and (max-width: 744px) {
+ width: 340px;
+ height: 198px;
+ padding: 0 16px 24px;
+ }
+
+ @media screen and (max-width: 376px) {
+ width: 343px;
+ height: 198px;
+ gap: 16px;
+ padding: 0 16px 24px;
+ }
+}
+
+.best-sticker {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: var(--color-blue-200);
+ width: 102px;
+ height: 30px;
+ border-bottom-left-radius: 16px;
+ border-bottom-right-radius: 16px;
+ gap: 5px;
+}
+
+.best-img {
+ width: 16px;
+ height: 16px;
+ position: relative;
+}
+
+.image-component {
+ width: 100%;
+ position: absolute;
+}
+
+.best-title {
+ font-weight: 600;
+ font-size: 16px;
+ line-height: 26px;
+ color: var(--color-white-200);
+}
+
+.title-box {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ gap: 8px;
+
+ @media screen and (max-width: 744px) {
+ gap: 40px;
+ }
+
+ @media screen and (max-width: 376px) {
+ gap: 40px;
+ }
+}
+
+.article-title {
+ font-weight: 600;
+ font-size: 20px;
+ line-height: 32px;
+ color: var(--color-blue-300);
+ white-space: nowrap;
+
+ @media screen and (max-width: 744px) {
+ font-weight: 600;
+ font-size: 18px;
+ line-height: 26px;
+ }
+
+ @media screen and (max-width: 376px) {
+ font-size: 18px;
+ line-height: 26px;
+ }
+}
+
+.product-img {
+ width: 72px;
+ height: 72px;
+ border: 1px solid var(--color-white-300);
+ border-radius: 6px;
+ object-fit: contain;
+ position: relative;
+}
+
+.info-container {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.info-box {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.nickname {
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 24px;
+ color: var(--color-blue-400);
+ margin-right: 8px;
+}
+
+.info-img {
+ width: 16px;
+ height: 16px;
+ margin-right: 4px;
+ position: relative;
+}
+
+.like-count {
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 24px;
+ color: var(--color-blue-500);
+}
+
+.create-date {
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 24px;
+ color: var(--color-blue-600);
+}
+
+.image-component {
+ position: absolute;
+}
diff --git a/src/components/Boards/BestArticleCard.tsx b/src/components/Boards/BestArticleCard.tsx
new file mode 100644
index 000000000..f88db74f4
--- /dev/null
+++ b/src/components/Boards/BestArticleCard.tsx
@@ -0,0 +1,58 @@
+import React from "react";
+import { Articles } from "../../util/types";
+import styles from "./BestArticleCard.module.css";
+import { formatDate } from "../../util/formatDates";
+import { Link } from "react-router-dom";
+import bestIcon from "../../assets/images/bestIcon.svg";
+import heartIcon from "../../assets/images/heartIcon.svg";
+
+interface BestArticleCardProps {
+ articles: Articles;
+}
+
+const BestArticleCard = ({ articles }: BestArticleCardProps) => {
+ return (
+
+
+
+
+
+
+
Best
+
+
+
{articles.title}
+
+
+
+
+
+
+
{articles.writer.nickname}
+
+
+
+
{articles.likeCount}
+
+
+ {formatDate(articles.createdAt)}
+
+
+
+
+ );
+};
+
+export default BestArticleCard;
diff --git a/src/components/Boards/BestBoardList.module.css b/src/components/Boards/BestBoardList.module.css
new file mode 100644
index 000000000..ba732d94d
--- /dev/null
+++ b/src/components/Boards/BestBoardList.module.css
@@ -0,0 +1,43 @@
+.best-container {
+ max-width: 1200px;
+ width: 100%;
+ margin: 0 auto;
+ overflow: hidden;
+ margin-bottom: 40px;
+
+ @media screen and (max-width: 744px) {
+ width: 100%;
+ padding: 0 24px;
+ margin-bottom: 24px;
+ }
+
+ @media screen and (max-width: 376px) {
+ width: 100%;
+ padding: 0 16px;
+ }
+}
+
+.title {
+ font-weight: 700;
+ font-size: 20px;
+ line-height: 24px;
+ color: var(--color-blue-100);
+ margin-bottom: 24px;
+
+ @media screen and (max-width: 376px) {
+ font-size: 18px;
+ line-height: 26px;
+ margin-bottom: 16px;
+ }
+}
+
+.best-box {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ gap: 24px;
+
+ @media screen and (max-width: 744px) {
+ gap: 16px;
+ }
+}
diff --git a/src/components/Boards/BestBoardList.tsx b/src/components/Boards/BestBoardList.tsx
new file mode 100644
index 000000000..0104f70b1
--- /dev/null
+++ b/src/components/Boards/BestBoardList.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+import styles from "./BestBoardList.module.css";
+
+import { Articles } from "../../util/types";
+import BestArticleCard from "./BestArticleCard";
+
+interface BestBoardListProps {
+ bestArticles: Articles[];
+}
+
+const BestBoardList = ({ bestArticles }: BestBoardListProps) => {
+ return (
+
+
베스트 게시글
+
+ {bestArticles.map((articles) => (
+
+ ))}
+
+
+ );
+};
+
+export default BestBoardList;
diff --git a/src/components/Boards/BoardList.module.css b/src/components/Boards/BoardList.module.css
new file mode 100644
index 000000000..df908ddff
--- /dev/null
+++ b/src/components/Boards/BoardList.module.css
@@ -0,0 +1,234 @@
+.board-list-container {
+ max-width: 1200px;
+ width: 100%;
+ margin: 0 auto;
+ @media screen and (max-width: 744px) {
+ width: 100%;
+ padding: 0 24px;
+ }
+
+ @media screen and (max-width: 376px) {
+ width: 100%;
+ padding: 0 16px;
+ }
+}
+
+.title-box {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 24px;
+
+ @media screen and (max-width: 744px) {
+ margin-bottom: 48px;
+ }
+
+ @media screen and (max-width: 376px) {
+ margin-bottom: 16px;
+ }
+}
+
+.title {
+ font-weight: 700;
+ font-size: 20px;
+ line-height: 32px;
+ color: var(--color-blue-300);
+
+ @media screen and (max-width: 376px) {
+ font-size: 18px;
+ line-height: 26px;
+ }
+}
+
+.write-button {
+ border-radius: 8px;
+ padding: 12px 23px;
+ background-color: var(--color-blue-200);
+ color: var(--color-white-200);
+ font-weight: 600;
+ font-size: 16px;
+ border: none;
+ cursor: pointer;
+ &:hover {
+ background-color: #6babfa;
+ transform: translateY(-3px);
+ }
+}
+
+.search-box {
+ display: flex;
+ width: 100%;
+ align-items: center;
+ gap: 16px;
+ margin-bottom: 24px;
+
+ @media screen and (max-width: 744px) {
+ gap: 6px;
+ margin-bottom: 40px;
+ width: 100%;
+ }
+
+ @media screen and (max-width: 376px) {
+ gap: 13px;
+ margin-bottom: 16px;
+ }
+}
+
+.search-bar {
+ flex-grow: 1;
+ flex-shrink: 1;
+ height: 42px;
+ border: none;
+ border-radius: 12px;
+ padding: 9px 20px 9px 44px;
+ background-color: var(--color-white-400);
+ background-image: url("../../assets/images/searchIcon.png");
+ background-repeat: no-repeat;
+ background-position: left 16px center;
+ background-size: 20px;
+}
+
+.order-by-select {
+ flex-shrink: 0;
+ width: 100%;
+ height: 42px;
+ border: 1px solid var(--color-white-300);
+ border-radius: 12px;
+ padding: 10px 20px;
+ gap: 10px;
+ font-weight: 400;
+ font-size: 16px;
+ color: var(--color-blue-300);
+
+ @media screen and (max-width: 376px) {
+ display: none;
+ }
+}
+
+.option {
+ font-weight: 400;
+ font-size: 16px;
+ color: var(--color-blue-300);
+
+ @media screen and (max-width: 376px) {
+ font-weight: 400;
+ font-size: 16px;
+ color: var(--color-blue-300);
+ }
+}
+
+.sort-icon {
+ display: none;
+ position: relative;
+ @media screen and (max-width: 376px) {
+ display: block;
+ position: relative;
+ width: 42px;
+ height: 42px;
+ border: 1px solid var(--color-white-300);
+ border-radius: 6px;
+ }
+}
+
+.image-component {
+ position: absolute;
+}
+
+.article-container {
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+}
+
+.article-box {
+ display: flex;
+ flex-direction: column;
+ border-bottom: 1px solid var(--color-white-300);
+ height: 138px;
+ background-color: var(--color-white-500);
+
+ @media screen and (max-width: 376px) {
+ height: 136px;
+ }
+}
+
+.article-title-box {
+ display: flex;
+ justify-content: space-between;
+ gap: 8px;
+}
+
+.article-title {
+ font-weight: 600;
+ font-size: 20px;
+ line-height: 32px;
+ color: var(--color-blue-300);
+ margin: 0;
+
+ @media screen and (max-width: 376px) {
+ font-size: 18px;
+ line-height: 26px;
+ }
+}
+
+.product-img {
+ width: 72px;
+ height: 72px;
+ border-radius: 8px;
+ border: 1px solid var(--color-white-400);
+ object-fit: contain;
+ position: relative;
+}
+
+.info-box {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.user-info-box {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ gap: 8px;
+}
+
+.user-profile {
+ width: 24px;
+ height: 24px;
+ position: relative;
+}
+
+.user-nickname {
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 24px;
+ color: var(--color-blue-400);
+}
+
+.date {
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 24px;
+ color: var(--color-blue-600);
+}
+
+.like-count-box {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ gap: 8px;
+}
+
+.heart {
+ width: 24px;
+ height: 24px;
+ position: relative;
+}
+
+.like-count {
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 26px;
+ color: var(--color-blue-500);
+}
diff --git a/src/components/Boards/BoardList.tsx b/src/components/Boards/BoardList.tsx
new file mode 100644
index 000000000..2626e5fb0
--- /dev/null
+++ b/src/components/Boards/BoardList.tsx
@@ -0,0 +1,46 @@
+import React, { useState } from "react";
+import styles from "./BoardList.module.css";
+import { Articles } from "../../util/types";
+import { Link } from "react-router-dom";
+import ArticleCard from "./ArticleCard";
+import BoardSearchSort from "./BoardSearchSort";
+
+interface BoardListProps {
+ articles: Articles[];
+ onOrderChange: (newOrder: string) => void;
+}
+
+const BoardList = ({ articles, onOrderChange }: BoardListProps) => {
+ const [searchQuery, setSearchQuery] = useState("");
+
+ const handleSearch = (query: string) => {
+ setSearchQuery(query);
+ };
+
+ const filteredArticles = articles.filter((article) =>
+ article.title.toLowerCase().includes(searchQuery.toLowerCase())
+ );
+
+ return (
+
+
+
+
+ {filteredArticles.map((article, index) => (
+
+ ))}
+
+
+ );
+};
+
+export default BoardList;
diff --git a/src/components/Boards/BoardSearchSort.module.css b/src/components/Boards/BoardSearchSort.module.css
new file mode 100644
index 000000000..05cf2c028
--- /dev/null
+++ b/src/components/Boards/BoardSearchSort.module.css
@@ -0,0 +1,79 @@
+.search-box {
+ display: flex;
+ width: 100%;
+ align-items: center;
+ gap: 16px;
+ margin-bottom: 24px;
+
+ @media screen and (max-width: 744px) {
+ gap: 6px;
+ margin-bottom: 40px;
+ width: 100%;
+ }
+
+ @media screen and (max-width: 376px) {
+ gap: 13px;
+ margin-bottom: 16px;
+ }
+}
+
+.search-bar {
+ flex-grow: 1;
+ flex-shrink: 1;
+ height: 42px;
+ border: none;
+ border-radius: 12px;
+ padding: 9px 20px 9px 44px;
+ background-color: var(--color-white-400);
+ background-image: url("../../assets/images/searchIcon.png");
+ background-repeat: no-repeat;
+ background-position: left 16px center;
+ background-size: 20px;
+}
+
+.order-by-select {
+ flex-shrink: 0;
+ width: 100%;
+ height: 42px;
+ border: 1px solid var(--color-white-300);
+ border-radius: 12px;
+ padding: 10px 20px;
+ gap: 10px;
+ font-weight: 400;
+ font-size: 16px;
+ color: var(--color-blue-300);
+
+ @media screen and (max-width: 376px) {
+ display: none;
+ }
+}
+
+.option {
+ font-weight: 400;
+ font-size: 16px;
+ color: var(--color-blue-300);
+
+ @media screen and (max-width: 376px) {
+ font-weight: 400;
+ font-size: 16px;
+ color: var(--color-blue-300);
+ }
+}
+
+.sort-icon {
+ display: none;
+ position: relative;
+ @media screen and (max-width: 376px) {
+ display: block;
+ position: relative;
+ width: 42px;
+ height: 42px;
+ border: 1px solid var(--color-white-300);
+ border-radius: 6px;
+ }
+}
+
+.image-component {
+ position: absolute;
+ width: 100%;
+}
diff --git a/src/components/Boards/BoardSearchSort.tsx b/src/components/Boards/BoardSearchSort.tsx
new file mode 100644
index 000000000..a4c59e34c
--- /dev/null
+++ b/src/components/Boards/BoardSearchSort.tsx
@@ -0,0 +1,48 @@
+import React from "react";
+import styles from "./BoardSearchSort.module.css";
+import sortIcon from "../../assets/images/sortIcon.svg";
+
+interface BoardSearchSortProps {
+ searchQuery: string;
+ onSearchChange: (query: string) => void;
+ onOrderChange: (newOrder: string) => void;
+}
+
+const BoardSearchSort = ({
+ searchQuery,
+ onSearchChange,
+ onOrderChange,
+}: BoardSearchSortProps) => {
+ return (
+
+
onSearchChange(e.target.value)}
+ value={searchQuery}
+ />
+
+
+
+
+
+
+
+ );
+};
+
+export default BoardSearchSort;
diff --git a/src/components/DetailItemPage/Comment.tsx b/src/components/DetailItemPage/Comment.tsx
index 0bb67ce4f..f39a869df 100644
--- a/src/components/DetailItemPage/Comment.tsx
+++ b/src/components/DetailItemPage/Comment.tsx
@@ -7,6 +7,7 @@ interface CommentComponentProps {
comment: CommentProps;
isEditing: boolean;
onEditClick: (comment: CommentProps) => void;
+ onDeleteClick: (id: number) => void;
onEditSave: (id: number, content: string) => void;
onEditCancel: () => void;
activeDropdown: number | null;
@@ -28,13 +29,15 @@ interface CommentProps {
const Comment = ({
comment,
onEditClick,
+ onDeleteClick,
isEditing,
onEditSave,
onEditCancel,
activeDropdown,
onDropdownToggle,
}: CommentComponentProps) => {
- const [editedContent, setEditedContent] = useState
(comment.content); // 수정할 내용
+ const [editedContent, setEditedContent] = useState(comment.content);
+
return (
@@ -71,6 +74,7 @@ const Comment = ({
/>
)}
+ {/* 드롭다운 클릭한 댓글 id 와 해당 id가 같으면 UI 나타내기 */}
{activeDropdown === comment.id && (
-
+
)}
Loading...
;
}
@@ -109,7 +134,10 @@ const CommentsList = () => {
handleEditClick(comment.id, comment.writer.id)}
+ onDeleteClick={() =>
+ handleDeleteClick(comment.id, comment.writer.id)
+ }
isEditing={editingCommentId === comment.id}
onEditSave={handleEditSave}
onEditCancel={handleEditCancel}
diff --git a/src/components/DetailItemPage/DetailItem.css b/src/components/DetailItemPage/DetailItem.css
index e79b47756..2c2243872 100644
--- a/src/components/DetailItemPage/DetailItem.css
+++ b/src/components/DetailItemPage/DetailItem.css
@@ -20,7 +20,7 @@
}
.deatilItem-image-box {
- width: 486px;
+ min-width: 486px;
height: 486px;
}
@@ -46,6 +46,7 @@
display: flex;
justify-content: space-between;
align-items: center;
+ position: relative;
}
.detailItem-name {
@@ -58,6 +59,7 @@
.detailItem-menu {
width: 3px;
height: 13px;
+ cursor: pointer;
}
.detailItem-price {
@@ -142,6 +144,7 @@
display: flex;
align-items: center;
gap: 4px;
+ cursor: pointer;
}
.favoriteCount-image {
@@ -197,10 +200,12 @@
font-weight: 600;
color: #f3f4f6;
margin-top: 16px;
+ cursor: pointer;
}
.question-register-button:disabled {
background-color: #9ca3af;
+ cursor: not-allowed;
}
.question-register-button:not(:disabled) {
@@ -253,6 +258,42 @@
height: 16px;
}
+.dropdown-menu {
+ width: 139px;
+ position: absolute;
+ background-color: #ffffff;
+ border: 1px solid #d1d5db;
+ border-radius: 8px;
+ padding: 8px;
+ z-index: 1;
+ top: 40px;
+ right: 0px;
+ display: flex;
+ flex-direction: column;
+}
+
+.dropdown-menu button:hover {
+ background-color: #f3f4f6;
+}
+
+.dropdown-text {
+ font-size: 16px;
+ font-weight: 400;
+ color: #6b7280;
+ background: none;
+ border: none;
+ padding-top: 16px;
+ padding-bottom: 12px;
+ font-size: 14px;
+ color: #1f2937;
+ cursor: pointer;
+ height: 46px;
+}
+
+.dropdown-image {
+ cursor: pointer;
+}
+
/* 반응형 - Tablet */
@media screen and (max-width: 1199px) and (min-width: 768px) {
.detailItem-container {
@@ -262,7 +303,7 @@
}
.deatilItem-image-box {
- width: 340px;
+ min-width: 340px;
height: 340px;
}
diff --git a/src/components/DetailItemPage/DetailItem.tsx b/src/components/DetailItemPage/DetailItem.tsx
index 7a3927ea9..161411a1f 100644
--- a/src/components/DetailItemPage/DetailItem.tsx
+++ b/src/components/DetailItemPage/DetailItem.tsx
@@ -1,6 +1,6 @@
import React, { useState, useEffect } from "react";
-import { useParams, Link } from "react-router-dom";
-import { getProductsById } from "../../api/api";
+import { useParams, Link, useNavigate } from "react-router-dom";
+import { deleteProductById, getProductsById } from "../../api/api";
import CommentsList from "./CommentsList";
import "./DetailItem.css";
import UserInfo from "./UserInfo";
@@ -9,6 +9,11 @@ import QuestionForm from "./QuestionForm";
import FavoriteCount from "./FavoriteCount";
import moreMenu from "../../assets/image/Group 33735.png";
import arrow from "../../assets/image/Group 33736.png";
+import noPic from "../../assets/image/noPic.png";
+import { useDispatch, useSelector } from "react-redux";
+import { setProductInfo } from "../../redux/productSlice";
+import { RootState } from "../../redux/store";
+import { toast } from "react-toastify";
interface Product {
createdAt: Date;
@@ -25,16 +30,22 @@ interface Product {
}
const DetailItem = () => {
- const { productId } = useParams<{ productId: string }>();
const [loading, setLoading] = useState(false);
const [product, setProduct] = useState(null);
const [error, setError] = useState(null);
+ const [activeDropdown, setActiveDropdown] = useState(false);
+ const { productId } = useParams<{ productId: string }>();
+ const productDetail = useSelector((state: RootState) => state.productInfo);
+ const user = useSelector((state: RootState) => state.userInfo.user);
+ const dispatch = useDispatch();
+ const navigate = useNavigate();
useEffect(() => {
const fetchProductsById = async () => {
try {
setLoading(true);
const result = await getProductsById(productId);
+ dispatch(setProductInfo(result));
setProduct(result);
} catch (err) {
setError((err as Error).message);
@@ -46,6 +57,33 @@ const DetailItem = () => {
fetchProductsById();
}, [productId]);
+ const isDropdown = () => {
+ setActiveDropdown((prev) => !prev);
+ };
+
+ const handleEditProduct = (writerId: number) => {
+ if (writerId !== user.id) {
+ toast.warning("본인이 등록한 물품만 수정할 수 있습니다.");
+ return;
+ }
+ navigate(`/additem/${productId}`);
+ };
+
+ const handleDeleteProduct = async (productId: number, writerId: number) => {
+ if (writerId !== user.id) {
+ toast.warning("본인이 등록한 물품만 삭제할 수 있습니다.");
+ return;
+ }
+ try {
+ await deleteProductById(productId);
+ toast.success("상품이 삭제되었습니다.");
+ navigate("/items");
+ } catch (error) {
+ toast.error("상품 삭제 실패");
+ console.error("상품 삭제 실패:", error);
+ }
+ };
+
if (loading) {
return Loading...
;
}
@@ -64,8 +102,9 @@ const DetailItem = () => {
(e.currentTarget.src = noPic)}
/>
@@ -76,7 +115,29 @@ const DetailItem = () => {
className="detailItem-menu"
src={moreMenu}
alt="메뉴 더보기 버튼"
+ onClick={isDropdown}
/>
+ {activeDropdown && (
+
+
+
+
+ )}
{product.price}원
diff --git a/src/components/DetailItemPage/FavoriteCount.tsx b/src/components/DetailItemPage/FavoriteCount.tsx
index aba19b1f5..5333ca204 100644
--- a/src/components/DetailItemPage/FavoriteCount.tsx
+++ b/src/components/DetailItemPage/FavoriteCount.tsx
@@ -1,20 +1,70 @@
-import React from "react";
-import heart from "../../assets/image/Icon (2).png";
+import React, { useState } from "react";
+import { useSelector } from "react-redux";
+import { RootState } from "../../redux/store";
+import heartIcon from "../../assets/images/heartIcon.svg";
+import heartIconRed from "../../assets/images/heartIconRed.svg";
+import { deleteFavorite, postFavorite } from "../../api/posts";
+import { useMutation } from "@tanstack/react-query";
+import { toast } from "react-toastify";
interface FavoriteCountProps {
count: number;
}
const FavoriteCount = ({ count }: FavoriteCountProps) => {
+ const [currentCount, setCurrentCount] = useState(count);
+ const productDetail = useSelector((state: RootState) => state.productInfo);
+ const [clickFavorite, setClickFavorite] = useState(productDetail.isFavorite);
+
+ const postMutation = useMutation({
+ mutationFn: () => postFavorite(productDetail.id),
+ onSuccess: () => {
+ toast.success("상품 좋아요가 완료되었습니다.");
+ setClickFavorite(true);
+ setCurrentCount((prev) => prev + 1);
+ },
+ onError: (error: unknown) => {
+ if (error instanceof Error) {
+ toast.error(`${error.message}`);
+ } else {
+ toast.error("상품 좋아요가 실패했습니다. 다시 시도해주세요");
+ }
+ },
+ });
+
+ const deleteMutation = useMutation({
+ mutationFn: () => deleteFavorite(productDetail.id),
+ onSuccess: () => {
+ toast.success("상품 좋아요를 취소했습니다.");
+ setClickFavorite(false);
+ setCurrentCount((prev) => prev - 1);
+ },
+ onError: (error: unknown) => {
+ if (error instanceof Error) {
+ toast.error(`${error.message}`);
+ } else {
+ toast.error("상품 좋아요 취소에 실패했습니다. 다시 시도해주세요");
+ }
+ },
+ });
+
+ const handleFavoriteToggle = () => {
+ if (clickFavorite) {
+ deleteMutation.mutate();
+ } else {
+ postMutation.mutate();
+ }
+ };
+
return (