feat: axios로 정보 가져오기

.env

@@ -0,0 +1 @@
+REACT_APP_TOKEN="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjgwOTNmZTQ5LTY2ZjUtNDhhNC04NGU3LTg1YzFlODExOGJmMCIsImlhdCI6MTY4MTk2ODQxMSwiZXhwIjoxNjgyMDU0ODExfQ.J41aMtpTAt8cKbL4uvsRXtu3YixGXuMH0ki08Voq0BM"

.eslintrc.js

@@ -39,27 +39,27 @@ module.exports = {
     'arrow-body-style': 'off', // 화살표 함수의 본문 스타일을 강제하지 않는다
     'prefer-arrow-callback': 'off', // 가능한 경우 화살표 함수를 사용하는 것을 강제하지 않는다
     'react/react-in-jsx-scope': 'off', // 리액트를 JSX 스코프에 가져오는 것을 강제하지 않는다 (React 17 이상)
-    'import/no-extraneous-dependencies': [
-      'error',
-      {
-        devDependencies: [
-          'src/**/*.{test,spec}.{js,jsx,ts,tsx}',
-          '**/__tests__/**/*.{js,jsx,ts,tsx}',
-        ],
-        optionalDependencies: false,
-        peerDependencies: false,
-      },
-    ],
+    // 'import/no-extraneous-dependencies': [
+    //   'error',
+    //   {
+    //     devDependencies: [
+    //       'src/**/*.{test,spec}.{js,jsx,ts,tsx}',
+    //       '**/__tests__/**/*.{js,jsx,ts,tsx}',
+    //     ],
+    //     optionalDependencies: false,
+    //     peerDependencies: false,
+    //     packagePath: './package.json',
+    //   },
+    // ],
     'no-use-before-define': 'off', // 정의되기 전에 사용하는 것을 금지하는 규칙을 끈다
     'import/extensions': 'off', // 모듈 import 시 파일 확장자를 생략할 수 있도록 한다
     'import/no-unresolved': 'off', // 경로가 올바르게 해결되지 않는 모듈 import를 허용한다
-    'no-restricted-exports': 'on', // 특정 export를 제한하는 규칙을 끈다
     'import/prefer-default-export': 'off', // 단일 export가 있는 경우 기본 export를 선호하는 규칙을 끈다
     'react-hooks/rules-of-hooks': 'error', // 훅의 규칙을 준수하도록 강제한다 (에러로 표시)
     'react-hooks/exhaustive-deps': 'warn', // 훅의 의존성을 검사하고 경고를 표시한다
     'react/jsx-props-no-spreading': 'off', // JSX 속성 전개를 허용한다
-    'no-unused-vars': 'off', // 사용하지 않는 변수를 허용한다 (TypeScript ESLint 규칙에서 처리)
-    '@typescript-eslint/no-unused-vars': ['error'], // 사용하지 않는 변수를 에러로 표시한다
+    'no-unused-vars': 'off', // 사용하지 않는 변수를 허용한다
+    '@typescript-eslint/no-unused-vars': 'off', // 사용하지 않는 변수를 허용한다 (TypeScript)
     'react/require-default-props': 'off',
     '@typescript-eslint/no-use-before-define': ['error'], // TypeScript에서 정의되기 전에 사용하는 것을 에러로 표시한다
     'react/jsx-filename-extension': [

package.json

@@ -11,6 +11,8 @@
     "@types/node": "^16.18.23",
     "@types/react": "^18.0.37",
     "@types/react-dom": "^18.0.11",
+    "axios": "^1.3.6",
+    "dotenv": "^16.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.10.0",

src/components/pages/chat/channel-page/Channel.tsx

@@ -1,10 +1,54 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import axios from 'axios';
 import Layout from '../../../commons/layout/Layout';
 
+const List = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  background-color: #3ab5c5;
+`;
+
 export default function Channel() {
+  const [data, setData] = useState(null);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const token = process.env.REACT_APP_TOKEN;
+      const config = {
+        headers: { Authorization: `Bearer ${token}` },
+      };
+
+      try {
+        const response = await axios.get(
+          'http://127.0.0.1:3000/channels',
+          config,
+        );
+        setData(response.data);
+        console.log(response.data);
+      } catch (error) {
+        console.error('Error fetching data:', error);
+      }
+    };
+
+    fetchData();
+  }, []);
+
   return (
     <Layout>
-      <div>Channel</div>
+      <List>
+        <h1>Channel</h1>
+        {data ? (
+          <pre>{JSON.stringify(data, null, 2)}</pre>
+        ) : (
+          <p>Loading data...</p>
+        )}
+        <h2>hello</h2>
+      </List>
     </Layout>
   );
 }