🐛 Fix: 지역 정보 모달에 글타래 "전체" 조회 추가 (#27)

prgrms-web-devcourse-final-project · Dec 6, 2024 · 91792f7 · 91792f7
1 parent 9ecf08a
commit 91792f7
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 12 deletions.
diff --git a/src/api/threadApi.js b/src/api/threadApi.js
@@ -7,6 +7,7 @@ export const getThreadList = async () => {
         const response = await axios({
             method: 'get',
             url: `${baseURL}/threads`,
+            withCredentials: true,
         });
 
         return response.data;

diff --git a/src/components/layout/AreaInfoPanel.jsx b/src/components/layout/AreaInfoPanel.jsx
@@ -1,16 +1,18 @@
+import { useQuery } from '@tanstack/react-query';
 import Remix from '../common/Remix';
 import EmptyList from '../common/EmptyList';
 import dateFormat from '../../utils/dateFormat';
+import { getThreadList } from '../../api/threadApi';
 import tempTown from '../../datas/temp-area-information.json'; // 임시 지역 데이터
 
 const AreaThreadArticle = ({ articleObject }) => {
     // 지역 글타래 미리보기 아이템 (내장 컴포넌트)
     return (
         <li className="area-thread-item">
             <div className="area-thread-item-image-wrapper">
-                {articleObject.images ? (
+                {articleObject.threadImages.length > 0 ? (
                     <img
-                        src={articleObject.previewImage}
+                        src={articleObject.threadImages[0].imageSrc}
                         alt="글타래 이미지 미리보기"
                     />
                 ) : (
@@ -20,12 +22,17 @@ const AreaThreadArticle = ({ articleObject }) => {
 
             <dl className="area-thread-item-descriptions">
                 <dt className="area-thread-item-title">
-                    {articleObject.title}
+                    {articleObject.threadTitle}
                 </dt>
 
                 <dd className="area-thread-item-daterange">
-                    <span>{dateFormat(articleObject.dateBegin)}</span>~
-                    <span>{dateFormat(articleObject.dateEnds)}</span>
+                    <span>
+                        {dateFormat(articleObject.threadAliveRange.begin)}
+                    </span>
+                    ~
+                    <span>
+                        {dateFormat(articleObject.threadAliveRange.ends)}
+                    </span>
                 </dd>
             </dl>
         </li>
@@ -41,6 +48,11 @@ const AreaInfoPanel = ({ isAreaInfoShowing, setPanel, currentLocation }) => {
         return `${R} ${G} ${B}`;
     };
 
+    const { isPending, error, data } = useQuery({
+        queryKey: ['repoData'],
+        queryFn: () => getThreadList(),
+    });
+
     return (
         <>
             <button
@@ -129,8 +141,10 @@ const AreaInfoPanel = ({ isAreaInfoShowing, setPanel, currentLocation }) => {
                 </div>
 
                 <ul className="area-threads-list">
-                    {tempTown.currentThreads.length > 0 ? (
-                        tempTown.currentThreads.map((item, index) => {
+                    {isPending ? (
+                        <>로딩중...</>
+                    ) : data ? (
+                        data.map((item, index) => {
                             return (
                                 <AreaThreadArticle
                                     articleObject={item}

diff --git a/src/datas/temp-db.json b/src/datas/temp-db.json
@@ -86,7 +86,7 @@
             "id": 0,
             "threadType": "places",
             "threadTitle": "글타래 제목",
-            "threadCoverImage": "https://www.naver.com",
+            "threadCoverImage": "https://picsum.photos/640/480",
             "threadAliveRange": {
                 "isExpiring": true,
                 "begin": "2024-01-01",
@@ -121,7 +121,7 @@
             "threadImages": [
                 {
                     "imageID": 0,
-                    "imageURL": "https://www.naver.com",
+                    "imageURL": "https://picsum.photos/640/480",
                     "originName": "image",
                     "originFileType": "jpg",
                     "imageWidth": 640,
@@ -198,7 +198,7 @@
             "reviewImages": [
                 {
                     "imageID": 1,
-                    "imageURL": "https://www.naver.com",
+                    "imageURL": "https://picsum.photos/640/480",
                     "originName": "image",
                     "originFileType": "jpg",
                     "imageWidth": 640,
@@ -207,7 +207,7 @@
                 },
                 {
                     "imageID": 2,
-                    "imageURL": "https://www.naver.com",
+                    "imageURL": "https://picsum.photos/640/480",
                     "originName": "image",
                     "originFileType": "jpg",
                     "imageWidth": 640,

diff --git a/src/pages/CommunityPage.jsx b/src/pages/CommunityPage.jsx
@@ -11,7 +11,6 @@ const CommunityPage = () => {
     });
 
     const { isPending, error, data } = useQuery({
-        queryKey: ['repoData'],
         queryFn: () => getThreadList(),
     });
-Original file line number
+Diff line change
@@ Expand Up / @@ -11,7 +11,6 @@ const CommunityPage = () => { @@
         });
         const { isPending, error, data } = useQuery({
-            queryKey: ['repoData'],
             queryFn: () => getThreadList(),
         });
@@ Expand Down @@