FIRE-232-fe-get-요청을-보내서-9-개-rooms에-대한-정보를-잘-받아온다

package.json

@@ -13,6 +13,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-horizontal-scrolling-menu": "^3.1.0",
+    "react-query": "^3.39.1",
     "react-router-dom": "6",
     "react-scripts": "5.0.1",
     "socket.io-client": "^4.5.1",

src/App.tsx

@@ -1,22 +1,27 @@
 import React from 'react';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import { QueryClient, QueryClientProvider } from 'react-query';
 import Layout from './components/layout/Layout';
 import Room from './pages/Room';
 import Main from './pages/Main';
 
+const queryClient = new QueryClient();
+
 function App() {
   return (
-    <BrowserRouter>
-      <Routes>
-        <Route path="/" element={<Layout />}>
-          <Route index element={<Main />} />
-        </Route>
-        <Route path="/room" element={<Layout />}>
-          <Route path=":roomId" element={<Room />} />
-        </Route>
-        <Route path="/main" element={<Main />} />
-      </Routes>
-    </BrowserRouter>
+    <QueryClientProvider client={queryClient}>
+      <BrowserRouter>
+        <Routes>
+          <Route path="/" element={<Layout />}>
+            <Route index element={<Main />} />
+          </Route>
+          <Route path="/room" element={<Layout />}>
+            <Route path=":roomId" element={<Room />} />
+          </Route>
+          <Route path="/main" element={<Main />} />
+        </Routes>
+      </BrowserRouter>
+    </QueryClientProvider>
   );
 }
 

src/blocks.json

@@ -7,7 +7,7 @@
       "avatar": "1"
     },
     "title": "모여서 도란도란 코딩",
-    "detail": "상세설명입니다. 내용을 입력해주세요! 우리모두 모여서 도란도란 코딩해요.",
+    "details": "상세설명입니다. 내용을 입력해주세요! 우리모두 모여서 도란도란 코딩해요.",
     "tags": ["Front-End", "React", "TypeScript"],
     "current": 2,
     "total": 4
@@ -20,7 +20,7 @@
       "avatar": "18"
     },
     "title": "백엔드 쌉고수 구함",
-    "detail": "상세설명입니다. 내용을 입력해주세요! 우리모두 모여서 도란도란 코딩해요.",
+    "details": "상세설명입니다. 내용을 입력해주세요! 우리모두 모여서 도란도란 코딩해요.",
     "tags": ["Back-End", "Nest.js", "TypeScript"],
     "current": 2,
     "total": 4
@@ -33,7 +33,7 @@
       "avatar": "3"
     },
     "title": "백준 플레달기",
-    "detail": "상세설명입니다. 내용을 입력해주세요! 우리모두 모여서 도란도란 코딩해요.",
+    "details": "상세설명입니다. 내용을 입력해주세요! 우리모두 모여서 도란도란 코딩해요.",
     "tags": ["Algorithm", "C++"],
     "current": 2,
     "total": 4
@@ -46,7 +46,7 @@
       "avatar": "17"
     },
     "title": "SWM team Fire",
-    "detail": "상세설명입니다. 내용을 입력해주세요! 우리모두 모여서 도란도란 코딩해요.",
+    "details": "상세설명입니다. 내용을 입력해주세요! 우리모두 모여서 도란도란 코딩해요.",
     "tags": ["SWM", "Fire"],
     "current": 2,
     "total": 4
@@ -59,7 +59,7 @@
       "avatar": "11"
     },
     "title": "42서울 하던사람",
-    "detail": "상세설명입니다. 내용을 입력해주세요! 우리모두 모여서 도란도란 코딩해요.",
+    "details": "상세설명입니다. 내용을 입력해주세요! 우리모두 모여서 도란도란 코딩해요.",
     "tags": ["Algorithm", "42Seoul"],
     "current": 2,
     "total": 4
@@ -72,7 +72,7 @@
       "avatar": "13"
     },
     "title": "369팀 모각코",
-    "detail": "상세설명입니다. 내용을 입력해주세요! 우리모두 모여서 도란도란 코딩해요.",
+    "details": "상세설명입니다. 내용을 입력해주세요! 우리모두 모여서 도란도란 코딩해요.",
     "tags": ["Algorithm", "SWM"],
     "current": 2,
     "total": 4

src/components/main/Block.tsx

@@ -7,7 +7,7 @@ import MyAvatar from '../../assets/avatar/MyAvatar';
 export default function Block({
   moderator,
   title,
-  detail,
+  details,
   tags,
 }: blockInterface) {
   const navigate = useNavigate();
@@ -23,7 +23,7 @@ export default function Block({
       </AvatarContainer>
       <DetailContainer>
         <Title>{title}</Title>
-        <Detail>{detail}</Detail>
+        <Detail>{details}</Detail>
         <Tags>
           {tags.map((myTag) => (
             <Tag key={myTag}>#{myTag}</Tag>

src/components/main/Scrolls.tsx

@@ -1,44 +1,58 @@
 import React from 'react';
 import styled from 'styled-components';
 import { ScrollMenu } from 'react-horizontal-scrolling-menu';
+import { useQuery } from 'react-query';
+import axios from 'axios';
 import { LeftArrow, RightArrow } from './Arrow';
 import Block from './Block';
 import blockInterface from '../../interface/block.interface';
-import blocksData from '../../blocks.json';
 import TagStore from '../../stores/tagStore';
 
 export default function Scrolls() {
   const { tag } = TagStore();
-  const filteredData = blocksData.filter((block) =>
-    block.tags.some((blockTag) =>
-      blockTag.toLowerCase().includes(tag.toLowerCase()),
-    )
-      ? block
-      : null,
-  );
+
+  const { isLoading, error, data } = useQuery('roomData', async () => {
+    const { data } = await axios.get('https://xn--hq1br4kwqt.com/api/v1/rooms');
+    return data;
+  });
+
+  if (isLoading)
+    return <div style={{ color: 'white', fontSize: '10rem' }}>loading....</div>;
+
+  if (error) return <div>An error has occurred: </div>;
+
   return (
     <Container>
       <ScrollMenu LeftArrow={LeftArrow} RightArrow={RightArrow}>
-        {filteredData.map(
-          ({ moderator, title, detail, tags, itemId }: blockInterface) => {
-            return (
-              <Block
-                itemId={itemId}
-                key={moderator.nickname}
-                moderator={moderator}
-                title={title}
-                detail={detail}
-                tags={tags}
-                current={0}
-                total={0}
-              />
-            );
-          },
-        )}
+        {data
+          .filter((block) =>
+            block.tags.some((blockTag) =>
+              blockTag.toLowerCase().includes(tag.toLowerCase()),
+            )
+              ? block
+              : null,
+          )
+          .map(
+            ({ moderator, title, details, tags, itemId }: blockInterface) => {
+              return (
+                <Block
+                  itemId={itemId}
+                  key={moderator.nickname}
+                  moderator={moderator}
+                  title={title}
+                  details={details}
+                  tags={tags}
+                  current={0}
+                  total={0}
+                />
+              );
+            },
+          )}
       </ScrollMenu>
     </Container>
   );
 }
+
 const Container = styled.div`
   margin-top: 3.6rem;
   width: calc(100% - 10rem);

src/interface/block.interface.ts

@@ -4,7 +4,7 @@ export default interface blockInterface {
   itemId: number;
   moderator: User;
   title: string;
-  detail?: string;
+  details?: string;
   tags: string[];
   current: number;
   total: number;

yarn.lock

@@ -1027,7 +1027,7 @@
     core-js-pure "^3.20.2"
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.18.3", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.18.3", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.6.tgz#6a1ef59f838debd670421f8c7f2cbb8da9751580"
   integrity sha512-t9wi7/AW6XtKahAe20Yw0/mMljKq0B1r2fPdvaAdV/KPDZewFXdaaa6K7lxmZBZ8FBNpCiAT6iHPmd6QO9bKfQ==
@@ -2849,6 +2849,11 @@ bfj@^7.0.2:
     hoopy "^0.1.4"
     tryer "^1.0.1"
 
+big-integer@^1.6.16:
+  version "1.6.51"
+  resolved "https://registry.yarnpkg.com/big-integer/-/big-integer-1.6.51.tgz#0df92a5d9880560d3ff2d5fd20245c889d130686"
+  integrity sha512-GPEid2Y9QU1Exl1rpO9B2IPJGHPSupF5GnVIP0blYvNOMer2bTvSWs1jGOUg04hTmu67nmLsQ9TBo1puaotBHg==
+
 big.js@^5.2.2:
   version "5.2.2"
   resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
@@ -2919,6 +2924,20 @@ braces@^3.0.2, braces@~3.0.2:
   dependencies:
     fill-range "^7.0.1"
 
+broadcast-channel@^3.4.1:
+  version "3.7.0"
+  resolved "https://registry.yarnpkg.com/broadcast-channel/-/broadcast-channel-3.7.0.tgz#2dfa5c7b4289547ac3f6705f9c00af8723889937"
+  integrity sha512-cIAKJXAxGJceNZGTZSBzMxzyOn72cVgPnKx4dc6LRjQgbaJUQqhy5rzL3zbMxkMWsGKkv2hSFkPRMEXfoMZ2Mg==
+  dependencies:
+    "@babel/runtime" "^7.7.2"
+    detect-node "^2.1.0"
+    js-sha3 "0.8.0"
+    microseconds "0.2.0"
+    nano-time "1.0.0"
+    oblivious-set "1.0.0"
+    rimraf "3.0.2"
+    unload "2.2.0"
+
 browser-process-hrtime@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz#3c9b4b7d782c8121e56f10106d84c0d0ffc94626"
@@ -3688,7 +3707,7 @@ detect-newline@^3.0.0:
   resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-3.1.0.tgz#576f5dfc63ae1a192ff192d8ad3af6308991b651"
   integrity sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==
 
-detect-node@^2.0.4:
+detect-node@^2.0.4, detect-node@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.1.0.tgz#c9c70775a49c3d03bc2c06d9a73be550f978f8b1"
   integrity sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==
@@ -5921,6 +5940,11 @@ jest@^27.4.3:
     import-local "^3.0.2"
     jest-cli "^27.5.1"
 
+[email protected]:
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/js-sha3/-/js-sha3-0.8.0.tgz#b9b7a5da73afad7dedd0f8c463954cbde6818840"
+  integrity sha512-gF1cRrHhIzNfToc802P800N8PpXS+evLLXfsVpowqmAFR9uwbi89WvXg2QspOmXL8QL86J4T1EpFu+yUkwJY3Q==
+
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
@@ -6247,6 +6271,14 @@ map-obj@^4.0.0:
   resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-4.3.0.tgz#9304f906e93faae70880da102a9f1df0ea8bb05a"
   integrity sha512-hdN1wVrZbb29eBGiGjJbeP8JbKjq1urkHJ/LIP/NY48MZ1QVXUsQBV1G1zvYFHn1XE06cwjBsOI2K3Ulnj1YXQ==
 
+match-sorter@^6.0.2:
+  version "6.3.1"
+  resolved "https://registry.yarnpkg.com/match-sorter/-/match-sorter-6.3.1.tgz#98cc37fda756093424ddf3cbc62bfe9c75b92bda"
+  integrity sha512-mxybbo3pPNuA+ZuCUhm5bwNkXrJTbsk5VWbR5wiwz/GC6LIiegBGn2w3O08UG/jdbYLinw51fSQ5xNU1U3MgBw==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+    remove-accents "0.4.2"
+
 mathml-tag-names@^2.1.3:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz#4ddadd67308e780cf16a47685878ee27b736a0a3"
@@ -6320,6 +6352,11 @@ micromatch@^4.0.2, micromatch@^4.0.4, micromatch@^4.0.5:
     braces "^3.0.2"
     picomatch "^2.3.1"
 
+[email protected]:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/microseconds/-/microseconds-0.2.0.tgz#233b25f50c62a65d861f978a4a4f8ec18797dc39"
+  integrity sha512-n7DHHMjR1avBbSpsTBj6fmMGh2AGrifVV4e+WYc3Q9lO+xnSZ3NyhcBND3vzzatt05LFhoKFRxrIyklmLlUtyA==
+
 [email protected], "mime-db@>= 1.43.0 < 2":
   version "1.52.0"
   resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
@@ -6424,6 +6461,13 @@ multicast-dns@^7.2.5:
     dns-packet "^5.2.2"
     thunky "^1.0.2"
 
+[email protected]:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/nano-time/-/nano-time-1.0.0.tgz#b0554f69ad89e22d0907f7a12b0993a5d96137ef"
+  integrity sha512-flnngywOoQ0lLQOTRNexn2gGSNuM9bKj9RZAWSzhQ+UJYaAFG9bac4DW9VHjUAzrOaIcajHybCTHe/bkvozQqA==
+  dependencies:
+    big-integer "^1.6.16"
+
 nanoid@^3.3.4:
   version "3.3.4"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab"
@@ -6603,6 +6647,11 @@ object.values@^1.1.0, object.values@^1.1.5:
     define-properties "^1.1.3"
     es-abstract "^1.19.1"
 
+[email protected]:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/oblivious-set/-/oblivious-set-1.0.0.tgz#c8316f2c2fb6ff7b11b6158db3234c49f733c566"
+  integrity sha512-z+pI07qxo4c2CulUHCDf9lcqDlMSo72N/4rLUpRXf6fu+q8vjt8y0xS+Tlf8NTJDdTXHbdeO1n3MlbctwEoXZw==
+
 obuf@^1.0.0, obuf@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/obuf/-/obuf-1.1.2.tgz#09bea3343d41859ebd446292d11c9d4db619084e"
@@ -7660,6 +7709,15 @@ react-is@^18.0.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
   integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
 
+react-query@^3.39.1:
+  version "3.39.1"
+  resolved "https://registry.yarnpkg.com/react-query/-/react-query-3.39.1.tgz#3876c0fdac7a3b5a84e195534e5fa8fbdd628847"
+  integrity sha512-qYKT1bavdDiQZbngWZyPotlBVzcBjDYEJg5RQLBa++5Ix5jjfbEYJmHSZRZD+USVHUSvl/ey9Hu+QfF1QAK80A==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    broadcast-channel "^3.4.1"
+    match-sorter "^6.0.2"
+
 react-refresh@^0.11.0:
   version "0.11.0"
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046"
@@ -7884,6 +7942,11 @@ relateurl@^0.2.7:
   resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
   integrity sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog==
 
+[email protected]:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/remove-accents/-/remove-accents-0.4.2.tgz#0a43d3aaae1e80db919e07ae254b285d9e1c7bb5"
+  integrity sha512-7pXIJqJOq5tFgG1A2Zxti3Ht8jJF337m4sowbuHsW30ZnkQFnDzy9qBNhgzX8ZLW4+UBcXiiR7SwR6pokHsxiA==
+
 renderkid@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/renderkid/-/renderkid-3.0.0.tgz#5fd823e4d6951d37358ecc9a58b1f06836b6268a"
@@ -7971,7 +8034,7 @@ reusify@^1.0.4:
   resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
   integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
 
-rimraf@^3.0.0, rimraf@^3.0.2:
+rimraf@3.0.2, rimraf@^3.0.0, rimraf@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
   integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
@@ -9052,6 +9115,14 @@ universalify@^2.0.0:
   resolved "https://registry.yarnpkg.com/universalify/-/universalify-2.0.0.tgz#75a4984efedc4b08975c5aeb73f530d02df25717"
   integrity sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==
 
+[email protected]:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/unload/-/unload-2.2.0.tgz#ccc88fdcad345faa06a92039ec0f80b488880ef7"
+  integrity sha512-B60uB5TNBLtN6/LsgAf3udH9saB5p7gqJwcFfbOEZ8BcBHnGwCf6G/TGiEqkRAxX7zAFIUtzdrXQSdL3Q/wqNA==
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+    detect-node "^2.0.4"
+
 [email protected], unpipe@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"