Merge pull request #162 from TRIP-Side-Project/dev

Merge: 10차 main -> dev 합병

index.html

@@ -15,4 +15,4 @@
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
-</html>ㅣ
+</html>

package.json

@@ -20,6 +20,7 @@
     "axios": "^1.6.2",
     "dompurify": "^3.0.8",
     "event-source-polyfill": "^1.0.31",
+    "flowbite": "^2.2.1",
     "lexical": "^0.12.5",
     "loadash": "^1.0.0",
     "lodash": "^4.17.21",

src/App.tsx

@@ -19,7 +19,7 @@ import { useRecoilValue } from "recoil";
 
 function App() {
 	const isOpen = useRecoilValue(notifiState);
-	console.log(isOpen);
+
 	return (
 		<div className="dark:bg-BASIC_BLACK bg-BASIC_WHITE">
 			<BrowserRouter>

src/components/Bookmark/Bookmark.tsx

@@ -7,11 +7,14 @@ import { useMutation } from "@tanstack/react-query";
 
 interface ItemIdProps {
 	itemId: number;
+	type: "forum" | "item";
 }
 
-export default function Bookmark({ itemId }: ItemIdProps) {
+export default function Bookmark({ itemId, type }: ItemIdProps) {
 	// const [isBookmarked, setIsBookMarked] = useState(false);
 	const BASE_URL = import.meta.env.VITE_BASE_URL;
+	const ACCESS_TOKEN = window.localStorage.getItem("access_token");
+	// console.log(itemId);
 
 	const [isBookmarked, setIsBookMarked] = useRecoilState(bookmarksState);
 	// const bookmarkValue = useRecoilValue(bookmarkSelector);
@@ -31,6 +34,24 @@ export default function Bookmark({ itemId }: ItemIdProps) {
 				{
 					headers: {
 						"Content-Type": "application/json",
+						accessToken: `Bearer ${ACCESS_TOKEN}`,
+					},
+				},
+			);
+		},
+	});
+
+	const interestArticleMutation = useMutation({
+		mutationFn: () => {
+			return axios.post(
+				`${BASE_URL}/api/interest-articles`,
+				{
+					articleId: itemId,
+				},
+				{
+					headers: {
+						"Content-Type": "application/json",
+						accessToken: `Bearer ${ACCESS_TOKEN}`,
 					},
 				},
 			);
@@ -39,6 +60,7 @@ export default function Bookmark({ itemId }: ItemIdProps) {
 
 	const addInterestItem = async () => {
 		try {
+			if (type === "forum") await interestArticleMutation.mutateAsync();
 			const response = await interestItemMutation.mutateAsync();
 			console.log(response);
 			handleBookmark();

src/components/cardItems/HotItem.tsx

@@ -42,10 +42,10 @@ const HotItem = () => {
 		<div className="flex-row hidden grid-cols-3 sm:grid gap-x-20 ">
 			{data &&
 				data.map((item: ItemTypes, idx: number) => (
-					<Link to={`/products/detail/${item.id}`}>
+					<Link to={`/products/detail/${item.id}`} key={`HotItem - ${idx}`}>
 						<div
 							key={idx}
-							className="relative flex p-3 border rounded-lg bg-BASIC_WHITE dark:bg-LINE_POINT_COLOR sm:flex-col sm:w-38 md:w-72 border-LIGHT_GRAY_COLOR text-BASIC_BLACK dark:text-ITEM_BG_COLOR"
+							className="relative flex p-3 border rounded-lg bg-BASIC_WHITE dark:bg-LINE_POINT_COLOR sm:flex-col sm:w-38 md:w-72 sm:h-56 md:h-80 border-LIGHT_GRAY_COLOR text-BASIC_BLACK dark:text-ITEM_BG_COLOR"
 						>
 							<div className="overflow-hidden max-h-36 md:max-h-64">
 								<img
@@ -57,7 +57,7 @@ const HotItem = () => {
 							</div>
 							<div className="flex-1 text-sm font-bold">
 								<div className="relative inline-block my-3">
-									<p className="relative z-50 overflow-x-hidden">
+									<p className="relative z-10 overflow-x-hidden">
 										{item.title && item.title.slice(0, 20)}
 									</p>
 									<span className="absolute bottom-0 left-0 hidden w-full p-1 opacity-75 md:block bg-SPECIAL_COLOR dark:bg-MAIN_COLOR"></span>

src/components/comment/Comment.tsx

@@ -62,6 +62,10 @@ const Comment = () => {
 	});
 	//console.log(data); //comments: []
 
+	// useEffect (() => {
+
+	// }, [])
+
 	//중복 데이터 메모이제이션
 	const memoizedData = useMemo(() => data, [data]);
 	// console.log(memoizedData);

src/components/comment/CommentItem.tsx

@@ -40,6 +40,7 @@ const CommentItem = ({ datas, isHide, setIsHide, type }: CommentItems) => {
 					parentInfo={[datas.articleId, datas.parentId, datas.commentId]}
 					editData={datas.content}
 					isEditMode={true}
+					setIsEdit={setIsEdit}
 				/>
 			) : (
 				<div className={bgClass}>
@@ -107,6 +108,7 @@ const CommentItem = ({ datas, isHide, setIsHide, type }: CommentItems) => {
 					{is2CHide && editCommitId === datas.commentId ? (
 						<EditComment
 							parentInfo={[datas.articleId, editCommitId, datas.commentId]}
+							setIsEdit={setIsEdit}
 						/>
 					) : (
 						<></>

src/components/comment/EditComment.tsx

@@ -5,68 +5,145 @@ import Temp2 from "@/assets/img/seeallareas.png";
 import Button, { btnAttributes } from "@/common/button/Button";
 import { loginState } from "@/store/loginState";
 import { useRecoilValue } from "recoil";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 
-export interface ParentInfo {
+export interface ParentInfoTypes {
 	// articleId: number;
 	// parentId: number | null;
 	//  - null이면 오리진 , - number이면 대댓글
 	// commentId: number;
 	parentInfo: [number, number | null, number | null];
 	editData?: string;
 	isEditMode?: boolean;
+	setIsEdit?: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
-const EditComment = ({ parentInfo, editData, isEditMode }: ParentInfo) => {
+interface mutationNewTypes {
+	articleId: number;
+	parentId: number;
+	content: string;
+}
+
+interface mutationAmendTypes {
+	content: string;
+}
+
+const EditComment = ({
+	parentInfo,
+	editData,
+	isEditMode,
+	setIsEdit,
+}: ParentInfoTypes) => {
 	const [isComment, setIsComment] = useState(editData ? editData : "");
 	const BASE_URL = import.meta.env.VITE_BASE_URL;
 	const ACCESS_TOKEN = window.localStorage.getItem("access_token");
 	const userImg = window.localStorage.getItem("profileImg");
+	const articleId = parentInfo[0];
+	const parentId = parentInfo[1];
+	const commentId = parentInfo[2];
 	const isStateLogin = useRecoilValue(loginState);
+	const queryClient = useQueryClient();
 	// const tempLogin = true; //임시 전역 로그인 상태
 
 	//새 댓글 등록하는 함수
-	const sendNewComment = async () => {
-		try {
-			axios.post(
-				`${BASE_URL}/api/comments`,
-				{
-					articleId: parentInfo[0],
-					parentId: parentInfo[1],
-					content: isComment,
-				},
-				{
-					headers: {
-						"Content-Type": "application/json",
-						accessToken: `Bearer ${ACCESS_TOKEN}`,
-					},
+	// const sendNewComment = async () => {
+	// 	try {
+	// 		axios.post(
+	// 			`${BASE_URL}/api/comments`,
+	// 			{
+	// 				articleId: parentInfo[0],
+	// 				parentId: parentInfo[1],
+	// 				content: isComment,
+	// 			},
+	// 			{
+	// 				headers: {
+	// 					"Content-Type": "application/json",
+	// 					accessToken: `Bearer ${ACCESS_TOKEN}`,
+	// 				},
+	// 			},
+	// 		);
+	// 		queryClient.invalidateQueries({ queryKey: ["comments"] });
+	// 		console.log("새 댓글 등록 기능 작동!");
+	// 		console.log(`등록 : ${isComment}`);
+	// 		setIsComment("");
+	// 	} catch (err) {
+	// 		throw new Error(`Err ${err}`);
+	// 	}
+	// };
+
+	const sendNewComment = useMutation<void, Error, mutationNewTypes>({
+		mutationFn: async (newComment) => {
+			await axios.post(`${BASE_URL}/api/comments`, newComment, {
+				headers: {
+					"Content-Type": "application/json",
+					accessToken: `Bearer ${ACCESS_TOKEN}`,
 				},
-			);
+			});
 			console.log("새 댓글 등록 기능 작동!");
 			console.log(`등록 : ${isComment}`);
 			setIsComment("");
-		} catch (err) {
-			throw new Error(`Err ${err}`);
-		}
-	};
+		},
+		onSettled: () => queryClient.invalidateQueries({ queryKey: ["comments"] }),
+	});
+
+	const amendComment = useMutation<void, Error, mutationAmendTypes>({
+		mutationFn: async (amendComment) => {
+			try {
+				await axios.patch(
+					`${BASE_URL}/api/comments/${commentId}`,
+					amendComment,
+					{
+						headers: {
+							"Content-Type": "application/json",
+							accessToken: `Bearer ${ACCESS_TOKEN}`,
+						},
+					},
+				);
+				queryClient.invalidateQueries({ queryKey: ["comments"] });
+				console.log("댓글 수정하는 기능 작동!");
+				console.log(`수정 : ${isComment}`);
+			} catch (Err) {
+				throw new Error(`${Err}`);
+			}
+		},
+	});
 
 	//댓글 수정 전달하는 함수
-	const amendComment = async () => {
+	// const amendComment = async () => {
+	// 	try {
+	// 		axios.patch(
+	// 			`${BASE_URL}/api/comments/${parentInfo[2]}`,
+	// 			{ content: isComment },
+	// 			{
+	// 				headers: {
+	// 					"Content-Type": "application/json",
+	// 					accessToken: `Bearer ${ACCESS_TOKEN}`,
+	// 				},
+	// 			},
+	// 		);
+	// 		queryClient.invalidateQueries({ queryKey: ["comments"] });
+	// 		console.log("댓글 수정하는 기능 작동!");
+	// 		console.log(`수정 : ${isComment}`);
+	// 		//페이지 리랜덜이 확인 필요
+	// 	} catch (err) {
+	// 		throw new Error(`댓글 수정 버튼 에러 ${err}`);
+	// 	}
+	// };
+
+	const handleEditClick = async () => {
 		try {
-			axios.patch(
-				`${BASE_URL}/api/comments/${parentInfo[2]}`,
-				{ content: isComment },
-				{
-					headers: {
-						"Content-Type": "application/json",
-						accessToken: `Bearer ${ACCESS_TOKEN}`,
-					},
-				},
-			);
-			console.log("댓글 수정하는 기능 작동!");
-			console.log(`수정 : ${isComment}`);
-			//페이지 리랜덜이 확인 필요
+			if (isEditMode) {
+				await amendComment.mutateAsync({ content: isComment });
+				setIsEdit?.(false);
+			} else {
+				await sendNewComment.mutateAsync({
+					articleId: articleId,
+					parentId: parentId as number,
+					content: isComment as string,
+				});
+			}
 		} catch (err) {
-			throw new Error(`댓글 수정 버튼 에러 ${err}`);
+			throw new Error(`${err}`);
 		}
 	};
 
@@ -79,7 +156,8 @@ const EditComment = ({ parentInfo, editData, isEditMode }: ParentInfo) => {
 
 		isLogin: isStateLogin,
 		loginBtnType: true,
-		onClick: isEditMode ? amendComment : sendNewComment,
+		// onClick: isEditMode ? amendComment : sendNewComment,
+		onClick: handleEditClick,
 	};
 
 	return (

src/components/header/Mmenu.tsx

@@ -21,14 +21,14 @@ const Mmenu = ({ openNav, onSubMenuClose }: NavTypes) => {
 			<div className="pr-5">
 				<button onClick={() => setIsOpen(!isOpen)}>
 					{isOpen ? (
-						<Close width={"38px"} height={"38px"} />
+						<Close width={"38px"} height={"38px"} fillColor={"#222222"} />
 					) : (
 						<Hamburger width={"42px"} height={"42px"} />
 					)}
 				</button>
 			</div>
 			{isOpen && (
-				<div className="absolute left-0 z-10 flex flex-col w-screen shadow-md bg-BASIC_WHITE top-32 dark:bg-BASIC_BLACK dark:text-BASIC_WHITE">
+				<div className="absolute left-0 z-30 flex flex-col w-screen shadow-md bg-BASIC_WHITE top-32 dark:bg-BASIC_BLACK dark:text-BASIC_WHITE">
 					<button
 						className="py-8 border-b font-xl border-LIGHT_GRAY_COLOR"
 						onClick={() => {