🐛More fixes + additional features

src/components/SellingItem.tsx

@@ -14,9 +14,10 @@ import { getTimeAgo } from '../utils/utils';
 
 type SellingItemProps = {
   ItemInfo: PreviewItem;
+  onStatusChange: (updatedItem: PreviewItem) => void;
 };
 
-const SellingItem = ({ ItemInfo }: SellingItemProps) => {
+const SellingItem = ({ ItemInfo, onStatusChange }: SellingItemProps) => {
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const navigate = useNavigate();
 
@@ -58,6 +59,8 @@ const SellingItem = ({ ItemInfo }: SellingItemProps) => {
         if (!response.ok) {
           throw new Error('상태 변경 요청에 실패했습니다.');
         }
+
+        onStatusChange({ ...ItemInfo, status: Status as 0 | 1 | 2 });
       } catch (error) {
         console.error('에러 발생:', error);
       } finally {
@@ -204,7 +207,7 @@ const SellingItem = ({ ItemInfo }: SellingItemProps) => {
             <div className={styles.subBox}>
               <div className={styles.iconBox}>
                 <img src={chatIcon} className={styles.smallIcon} />
-                {14}
+                {ItemInfo.chatCount}
               </div>
               {ItemInfo.likeCount > 0 && (
                 <div className={styles.iconBox}>

src/pages/BuyerSelectPage.tsx

@@ -2,13 +2,14 @@
   각 채팅방에 해당하는 페이지.
 */
 import { useEffect, useState } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useLocation, useNavigate, useParams } from 'react-router-dom';
 
 import leftarrow from '../assets/leftarrow.svg';
 //import UpperBar from '../components/UpperBar';
 import styles from '../css/BuyerSelectPage.module.css';
 import type { Article } from '../typings/item';
 import type { Item } from '../typings/item';
+import type { LocationState } from '../typings/toolBar';
 
 const BuyerSelectPage = () => {
   const { id } = useParams();
@@ -20,9 +21,16 @@ const BuyerSelectPage = () => {
     new Intl.NumberFormat('ko-KR').format(price),
   );
   const navigate = useNavigate();
+  const location = useLocation();
 
   const handleBackClick = () => {
-    void navigate(-1);
+    const locationState = location.state as LocationState;
+
+    if (locationState !== null && locationState.from === 'mysells') {
+      void navigate(-2);
+    } else {
+      void navigate(-1);
+    }
   };
 
   useEffect(() => {
@@ -136,7 +144,7 @@ const BuyerSelectPage = () => {
                     : itemInfo?.status === 1
                       ? '예약중'
                       : itemInfo?.status === 2
-                        ? '판매완료'
+                        ? '거래완료'
                         : ''}
                 </p>
               </div>

src/pages/ChatRoomPage.tsx

@@ -401,7 +401,7 @@ const ChatRoomPage = () => {
       },
       {
         color: 'black',
-        text: '판매완료',
+        text: '거래완료',
         function: () => {
           handleChangeStatus(2);
           if (itemInfo === null) throw new Error('Item is null');
@@ -491,9 +491,15 @@ const ChatRoomPage = () => {
               </button>
             </>
           )}
-          {itemInfo?.status === 2 &&
-            // 판매완료 상태에서는 아무 버튼도 나타나지 않음
-            null}
+          {itemInfo?.status === 2 && (
+            // 판매완료 상태에서는 아무 버튼도 나타나지 않음 -> 구매자를 위해 후기 보내기 버튼 추가
+            <button
+              className={styles.iteminfoButton}
+              onClick={handleSendReviewClick}
+            >
+              후기 보내기
+            </button>
+          )}
         </div>
       </div>
       <div

src/pages/MannersPage.tsx

@@ -17,6 +17,7 @@ import {
   type ErrorResponseType,
   type Manner,
   mannerTypeLabels,
+  negMannerTypeLabels,
 } from '../typings/user';
 
 const MANNER_INFO_TEXT = `
@@ -34,7 +35,9 @@ const MANNER_INFO_TEXT = `
 const MannersPage = () => {
   const { nickname } = useParams<{ nickname: string }>();
   const [manners, setManners] = useState<Manner[]>([]);
+  const [negManners, setNegManners] = useState<Manner[]>([]);
   const [loading, setLoading] = useState<boolean>(true);
+  const myNickname = localStorage.getItem('nickname');
   const navigate = useNavigate();
 
   useEffect(() => {
@@ -63,7 +66,18 @@ const MannersPage = () => {
 
         const data = (await response.json()) as Manner[];
         console.info(data);
-        setManners(data);
+
+        const PosManners = data.filter(
+          (manner) => !manner.mannerType.startsWith('NEG_'),
+        );
+        setManners(PosManners);
+
+        if (nickname === myNickname) {
+          const NegManners = data.filter((manner) =>
+            manner.mannerType.startsWith('NEG_'),
+          );
+          setNegManners(NegManners);
+        }
       } catch (error) {
         console.error('error:', error);
       } finally {
@@ -72,7 +86,7 @@ const MannersPage = () => {
     };
 
     void fetchMannersInfo();
-  }, [nickname]);
+  }, [nickname, myNickname]);
 
   return (
     <div className={styles.main}>
@@ -123,7 +137,35 @@ const MannersPage = () => {
             <span className={styles.mannerEmoji}>😞</span>
             <span>받은 비매너</span>
           </div>
-          <p className={styles.mannerLine}>받은 비매너가 없어요.</p>
+          {nickname === myNickname ? (
+            negManners.length === 0 ? (
+              <p className={styles.mannerLine}>받은 비매너가 없어요.</p>
+            ) : (
+              <>
+                {negManners
+                  .sort((a, b) => b.count - a.count)
+                  .map((manner, index) => (
+                    <div key={index} className={styles.mannerLine}>
+                      <p>
+                        {
+                          negMannerTypeLabels[
+                            manner.mannerType as keyof typeof negMannerTypeLabels
+                          ]
+                        }
+                      </p>
+                      <div className={styles.mannerLineRight}>
+                        <img src={peopleIcon} style={{ height: '20px' }} />
+                        {manner.count}
+                      </div>
+                    </div>
+                  ))}
+              </>
+            )
+          ) : (
+            <p className={styles.mannerLine}>
+              &lsquo;받은 비매너&rsquo;는 본인에게만 보여요.
+            </p>
+          )}
         </div>
       )}
       <div className={styles.mannerInfoBox}>

src/pages/MySellsPage.tsx

@@ -2,7 +2,7 @@
   나의 판매내역 페이지.
   '판매중', '거래완료' 로만 구분함
 */
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { NavLink, useNavigate } from 'react-router-dom';
 
 import leftArrow from '../assets/leftarrow.svg';
@@ -24,8 +24,8 @@ const MySellsPage = () => {
   const [isLoading, setIsLoading] = useState(true);
   const navigate = useNavigate();
 
-  useEffect(() => {
-    const fetchMySellsInfo = async () => {
+  const fetchMySellsInfo = useCallback(
+    async (fetchType: 'both' | 'selling' | 'sold') => {
       const token = localStorage.getItem('token');
       try {
         if (token === null) throw new Error('No token found');
@@ -51,15 +51,22 @@ const MySellsPage = () => {
         );
         const sold = data.filter((item) => item.status === 2);
 
-        setSellingItems((prevItems) => [...prevItems, ...selling]); // 판매 중 or 예약 중
-        setSoldItems((prevItems) => [...prevItems, ...sold]); // 거래완료
+        if (fetchType === 'both' || fetchType === 'selling') {
+          setSellingItems((prevItems) => [...prevItems, ...selling]); // 판매 중 or 예약 중
+        }
+        if (fetchType === 'both' || fetchType === 'sold') {
+          setSoldItems((prevItems) => [...prevItems, ...sold]); // 거래완료
+        }
       } catch (error) {
         console.error('error:', error);
       }
-    };
+    },
+    [lastId],
+  );
 
-    void fetchMySellsInfo();
-  }, [lastId]);
+  useEffect(() => {
+    void fetchMySellsInfo('both');
+  }, [fetchMySellsInfo]);
 
   useEffect(() => {
     const fetchMyPageInfo = async () => {
@@ -108,6 +115,24 @@ const MySellsPage = () => {
     };
   }, [nextRequestId]);
 
+  const handleStatusChange = (updatedItem: PreviewItem) => {
+    if (activeTab === 'selling') {
+      //setSellingItems((prev) =>
+      //  prev.filter((item) => item.id !== updatedItem.id),
+      //);
+      //setSoldItems([]);
+      //void fetchMySellsInfo('sold');
+      void navigate(`/sendreview/${updatedItem.id}`);
+      void navigate(`/item/buyerselect/${updatedItem.id}`, {
+        state: { from: 'mysells' },
+      });
+    } else {
+      setSoldItems((prev) => prev.filter((item) => item.id !== updatedItem.id));
+      setSellingItems([]);
+      void fetchMySellsInfo('selling');
+    }
+  };
+
   return (
     <div className={styles.main}>
       <div className={styles.upperBar}>
@@ -176,7 +201,11 @@ const MySellsPage = () => {
             ) : (
               <div>
                 {sellingItems.map((item, index) => (
-                  <SellingItem key={index} ItemInfo={item} />
+                  <SellingItem
+                    key={index}
+                    ItemInfo={item}
+                    onStatusChange={handleStatusChange}
+                  />
                 ))}
               </div>
             )}
@@ -189,7 +218,11 @@ const MySellsPage = () => {
             ) : (
               <div>
                 {soldItems.map((item, index) => (
-                  <SellingItem key={index} ItemInfo={item} />
+                  <SellingItem
+                    key={index}
+                    ItemInfo={item}
+                    onStatusChange={handleStatusChange}
+                  />
                 ))}
               </div>
             )}

src/pages/ProfilePage.tsx

@@ -109,10 +109,7 @@ const ProfilePage = () => {
                 프로필 수정
               </NavLink>
             ) : (
-              <NavLink
-                to={`/mannerpraise/${profile.user.nickname}`}
-                className={styles.profileEditButton}
-              >
+              <NavLink to="/temp" className={styles.profileEditButton}>
                 매너 칭찬하기
               </NavLink>
             )}

src/pages/SearchResultPage.tsx

@@ -40,16 +40,16 @@ const SearchResultPage = () => {
         const token = localStorage.getItem('token');
         if (token === null) throw new Error('토큰이 없습니다.');
 
-        const itemResponse = await fetch(`/api/item/search/${lastItemId}`, {
-          method: 'GET',
-          headers: {
-            Authorization: `Bearer ${token}`,
-            'Content-Type': 'application/json',
+        const itemResponse = await fetch(
+          `/api/item/search/${lastItemId}?text=${query}`,
+          {
+            method: 'GET',
+            headers: {
+              Authorization: `Bearer ${token}`,
+              'Content-Type': 'application/json',
+            },
           },
-          body: JSON.stringify({
-            text: query,
-          }),
-        });
+        );
 
         if (!itemResponse.ok) {
           throw new Error(`Failed to fetch items: ${itemResponse.statusText}`);
@@ -64,16 +64,13 @@ const SearchResultPage = () => {
         }
 
         const communityResponse = await fetch(
-          `/api/feed/search/${lastCommunityId}`,
+          `/api/feed/search/${lastCommunityId}?text=${query}`,
           {
             method: 'GET',
             headers: {
               Authorization: `Bearer ${token}`,
               'Content-Type': 'application/json',
             },
-            body: JSON.stringify({
-              text: query,
-            }),
           },
         );
         if (!communityResponse.ok) {

src/pages/SendReviewPage.tsx

@@ -144,13 +144,14 @@ const SendReviewPage = () => {
         }
       }
 
-      if (content !== '') {
+      if (content !== '' && activeMood !== 'bad') {
+        if (itemInfo === undefined) throw new Error('itemInfo is undefined');
         const reviewCreateRequest = {
           content: content,
           location: myLocation,
           isWritedByBuyer: !isSeller,
-          sellerId: itemInfo?.article.seller.id,
-          buyerId: itemInfo?.article.buyer.id,
+          sellerId: itemInfo.article.seller.id,
+          buyerId: itemInfo.article.buyer.id,
           articleId: id,
         };
         console.info(reviewCreateRequest);
@@ -208,10 +209,7 @@ const SendReviewPage = () => {
             <p className={styles.itemTitle}>{itemInfo?.article.title}</p>
             <p>
               거래한 이웃
-              <span style={{ fontWeight: 'bold' }}>
-                {' '}
-                {itemInfo?.article.buyer.nickname}{' '}
-              </span>
+              <span style={{ fontWeight: 'bold' }}> {partner?.nickname} </span>
               {isSeller && (
                 <span
                   className={styles.changeBuyer}
@@ -227,7 +225,7 @@ const SendReviewPage = () => {
           <p className={styles.selectMoodMainText}>
             {myNickname}님,
             <br />
-            {itemInfo?.article.buyer.nickname}님과 거래가 어떠셨나요?
+            {partner?.nickname}님과 거래가 어떠셨나요?
           </p>
           <p className={styles.selectMoodSubText}>
             거래 선호도는 나만 볼 수 있어요.

src/pages/SetLocationPage.tsx

@@ -58,7 +58,7 @@ const SetLocationPage = () => {
       <div className={styles.content}>
         <p className={styles.mainText}>내 동네를 설정해주세요.</p>
         <p className={styles.subText}>
-          당근마켓은 동네 직거래 마켓이에요. <br />내 동네를 설정하고
+          와플마켓은 동네 직거래 마켓이에요. <br />내 동네를 설정하고
           시작해보세요! <br /> 동네 정보는 내 프로필에서 변경할 수도 있어요.
         </p>
         <select

src/pages/TempPage.tsx

@@ -12,8 +12,7 @@ const TempPage = () => {
         alignItems: 'center',
       }}
     >
-      이 기능은 아직 추가되지 않았거나 본 프로젝트에서는 구현되지 않을
-      기능입니다!
+      이 기능은 본 프로젝트에서는 구현되지 않을 기능입니다!
     </div>
   );
 };