Merge pull request #84 from Iam2Jo/T2-101-feature/debugging-4

T2 101 feature/debugging 4
Iam2Jo · Nov 16, 2023 · 499a97f · 499a97f
2 parents 63c2c01 + 4a58d9e
commit 499a97f
Show file tree

Hide file tree

Showing 18 changed files with 136 additions and 119 deletions.
diff --git a/app/club/[id]/page.tsx b/app/club/[id]/page.tsx
@@ -0,0 +1,27 @@
+import React, { useEffect } from 'react';
+import { Dormitory } from '@components/Dormitory';
+import { MyChatting } from '@components/MyChatting';
+import { Header } from '@components/Header';
+
+export default function ClubChatting(props: any) {
+  const decodeURL = decodeURIComponent(props.params.id);
+  const id = decodeURL.split('&name=')[0];
+  const name = decodeURL.split('&name=')[1];
+  return (
+    <>
+      <Header />
+      <div
+        style={{
+          display: 'flex',
+          gap: '1rem',
+          padding: '1rem',
+          backgroundColor: '#1f1f1f',
+          height: '100vh',
+        }}
+      >
+        <MyChatting />
+        <Dormitory chatId={id} dormName={name} />
+      </div>
+    </>
+  );
+}
diff --git a/app/club/chatting/chatting.tsx b/app/club/chatting/chatting.tsx
@@ -1,30 +1,13 @@
 'use client';
 
-import { useSearchParams } from 'next/navigation';
-import { useState, useEffect } from 'react';
 import { Dormitory } from '@components/Dormitory';
-import { getFirebaseData } from '@hooks/useFireFetch';
-import { set } from 'lodash';
-
-const ClubChatting = () => {
-  const params = useSearchParams();
-  // const queryString = params.get('id');
-
-  // const id = queryString.split('&name=')[0];
-  // const name = queryString.split('&name=')[1];
-
-  const id = params.get('id');
-  const name = params.get('name');
-
-  useEffect(() => {
-    console.log('id', id);
-    console.log('name', name);
-  }, [id, name]);
 
+const ClubChatting = (id: any, name: any) => {
   if (!id || !name) {
     return <div style={{ backgroundColor: 'white' }}>로딩중...</div>;
   }
 
   return <Dormitory chatId={id} dormName={name} />;
 };
+
 export default ClubChatting;
diff --git a/app/club/club.tsx b/app/club/club.tsx
@@ -21,10 +21,10 @@ import { loadingState } from '@recoil/atom';
 import { Router } from 'next/router';
 
 const club = () => {
-  const SERVER_KEY = '660d616b';
+  const SERVER_KEY = process.env.REACT_APP_SERVER_KEY;
   const [accessToken, setAccessToken] = useState('');
-  const FIND_ALL_CHAT_URL = 'https://fastcampus-chat.net/chat/all';
-  const FIND_MY_CHAT_URL = 'https://fastcampus-chat.net/chat';
+  const FIND_ALL_CHAT_URL = process.env.REACT_APP_FIND_ALL_CHAT_URL;
+  const FIND_MY_CHAT_URL = process.env.REACT_APP_FIND_MY_CHAT_URL;
 
   const headers = {
     'Content-Type': 'application/json',
@@ -100,7 +100,7 @@ const club = () => {
       {createModalOpen && <CreateModal />}
       <Header />
       <styled.ContentWrap>
-        <CandleImg/>
+        <CandleImg />
         <styled.Container>
           <styled.HeaderWrap>
             <styled.Title>CLUB</styled.Title>

diff --git a/app/selectDormitory/selectDormitory.tsx b/app/selectDormitory/selectDormitory.tsx
@@ -10,7 +10,11 @@ import createDormitoryIfNone from '@hooks/createDormitoryIfNone';
 import { RequestBody as RequestBodyCreate } from '@/@types/RESTAPI/createChatting.types';
 import { RequestBody as RequestBodyParticipate } from '@/@types/RESTAPI/participateChatting.types';
 import { getRefreshToken, getToken } from '@utils/service';
-import { getFirebaseData, getFirebaseDatabyKeyVal, updateFirebaseData } from '@hooks/useFireFetch';
+import {
+  getFirebaseData,
+  getFirebaseDatabyKeyVal,
+  updateFirebaseData,
+} from '@hooks/useFireFetch';
 import { useRouter } from 'next/navigation';
 
 interface RequestBody {
@@ -46,11 +50,11 @@ const SelectDormitory = () => {
   const [hufflepuffFirebaseData, setHufflepuffFirebaseData] =
     useState<any>(null);
   const [ravenclawFirebaseData, setRavenclawFirebaseData] = useState<any>(null);
-  const SERVER_KEY = '660d616b';
+  const SERVER_KEY = process.env.REACT_APP_SERVER_KEY;
   const [accessToken, setAccessToken] = useState('');
-  const CREATE_CHAT_URL = 'https://fastcampus-chat.net/chat';
-  const FIND_ALL_USER_URL = 'https://fastcampus-chat.net/users';
-  const GET_MY_INFO_URL = 'https://fastcampus-chat.net/auth/me';
+  const CREATE_CHAT_URL = process.env.REACT_APP_CREATE_CHAT_URL;
+  const FIND_ALL_USER_URL = process.env.REACT_APP_FIND_ALL_USER_URL;
+  const GET_MY_INFO_URL = process.env.REACT_APP_GET_MY_INFO_URL;
 
   const headers = {
     'Content-Type': 'application/json',
@@ -90,7 +94,7 @@ const SelectDormitory = () => {
 
     console.log('chatId: ', firebaseData[0].id);
 
-    const PARTICIPATE_CHAT_URL = 'https://fastcampus-chat.net/chat/participate';
+    const PARTICIPATE_CHAT_URL = process.env.REACT_APP_PARTICIPATE_CHAT_URL;
     const requestData: RequestBodyParticipate = {
       chatId: firebaseData[0].id,
     };
@@ -105,15 +109,15 @@ const SelectDormitory = () => {
       });
   };
 
-    // 로그인되어있지 않다면 로그인페이지 유도
-    const router = useRouter();
-    useEffect(() => {
-      const refreshToken = getRefreshToken();
-      if (!refreshToken) {
-        alert('로그인이 필요합니다.');
-        router.push('/');
-      }
-    }, []);
+  // 로그인되어있지 않다면 로그인페이지 유도
+  const router = useRouter();
+  useEffect(() => {
+    const refreshToken = getRefreshToken();
+    if (!refreshToken) {
+      alert('로그인이 필요합니다.');
+      router.push('/');
+    }
+  }, []);
 
   useEffect(() => {
     const token = getToken();

diff --git a/components/ChatRoomInfoModal/ChatRoomInfoModal.tsx b/components/ChatRoomInfoModal/ChatRoomInfoModal.tsx
@@ -15,7 +15,7 @@ import {
   updateFirebaseData,
   getFirebaseDatabyKeyVal,
 } from '@hooks/useFireFetch';
-
+import { getToken } from '@utils/service';
 interface User {
   id: string;
   picture: string;
@@ -51,14 +51,12 @@ const ChatRoomInfoModal = ({
 ChatRoomInfoModalProps) => {
   if (!isOpen) return null;
 
-  const SERVER_KEY = '660d616b';
-  const ACCESS_TOKEN =
-    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjY2MGQ2MTZiOmhhcnJ5cG90dGVyIiwiaWF0IjoxNjk5MzQ1NDkzLCJleHAiOjE2OTk5NTAyOTN9.b5s4_9f-pVBj9ki17SXc6VvoiApMJZCJXfk5G2wskyo';
-  const GET_MY_INFO_URL = 'https://fastcampus-chat.net/auth/me';
-
+  const SERVER_KEY = process.env.REACT_APP_SERVER_KEY;
+  const GET_MY_INFO_URL = process.env.REACT_APP_GET_MY_INFO_URL;
+  const [accessToken, setAccessToken] = useState('');
   const headers = {
     'Content-Type': 'application/json',
-    Authorization: `Bearer ${ACCESS_TOKEN}`,
+    ...(accessToken && { Authorization: `Bearer ${accessToken}` }),
     serverId: SERVER_KEY,
   };
 
@@ -67,9 +65,10 @@ ChatRoomInfoModalProps) => {
   const [isHost, setIsHost] = useState(false);
   const [chatInfo, setChatInfo] = useState({});
 
-  // const setGryffindorChatInfo = useSetRecoilState(
-  //   dormChatInfo.gryffindorChatInfoState,
-  // );
+  useEffect(() => {
+    const token = getToken();
+    setAccessToken(token);
+  }, []);
 
   useEffect(() => {
     getFirebaseDatabyKeyVal('chatInfo', 'name', dormName).then((res) => {

diff --git a/components/Dormitory/Dormitory.tsx b/components/Dormitory/Dormitory.tsx
@@ -28,6 +28,9 @@ import cutStringAfterColon from '@/utils/cutStringAfterColon';
 import { useRouter } from 'next/navigation';
 
 const Dormitory = ({ chatId, dormName }) => {
+  const [currentChatId, setCurrentChatId] = useState(chatId);
+  const [currentDormName, setCurrentDormName] = useState(dormName);
+
   const params = useSearchParams();
   const router = useRouter();
 
@@ -76,10 +79,10 @@ const Dormitory = ({ chatId, dormName }) => {
 
   const messagesEndRef = useRef<HTMLDivElement | null>(null);
   const messageContainerRef = useRef<HTMLDivElement | null>(null);
-  const SERVER_KEY = '660d616b';
+  const SERVER_KEY = process.env.REACT_APP_SERVER_KEY;
   const [accessToken, setAccessToken] = useState('');
 
-  const CHATROOM_LEAVE_URL = 'https://fastcampus-chat.net/chat/leave';
+  const CHATROOM_LEAVE_URL = process.env.REACT_APP_CHATROOM_LEAVE_URL;
   const myId = findMyId(accessToken);
   const headers = {
     ...(accessToken && { Authorization: `Bearer ${accessToken}` }),

diff --git a/components/FriendSearchToggle/FriendSearchToggle.tsx b/components/FriendSearchToggle/FriendSearchToggle.tsx
@@ -41,8 +41,8 @@ const FriendSearchToggle: React.FC<FriendSearchToggleProps> = ({
     return;
   }
 
-  const GET_ALL_USERS_URL = 'https://fastcampus-chat.net/users';
-  const SERVER_KEY = '660d616b';
+  const GET_ALL_USERS_URL = process.env.REACT_APP_GET_ALL_USERS_URL;
+  const SERVER_KEY = process.env.REACT_APP_SERVER_KEY;
   const ACCESS_TOKEN = accessTokenCookie.split('=')[1];
   const headers = {
     'Content-Type': 'application/json',
@@ -133,4 +133,4 @@ const FriendSearchToggle: React.FC<FriendSearchToggleProps> = ({
   );
 };
 
-export default FriendSearchToggle;
+export default FriendSearchToggle;
diff --git a/components/FriendSearchToggle/socket.js b/components/FriendSearchToggle/socket.js
@@ -11,7 +11,7 @@ if (!accessTokenCookie) {
 
 const accessToken = accessTokenCookie.split('=')[1];
 
-const serverId = '660d616b';
+const serverId = process.env.REACT_APP_SERVER_KEY;
 
 const socket = io('https://fastcampus-chat.net/server', {
   extraHeaders: {

diff --git a/components/InviteToChatRoomModal/InviteToChatRoomModal.tsx b/components/InviteToChatRoomModal/InviteToChatRoomModal.tsx
@@ -10,6 +10,7 @@ import {
 } from '../FriendSearchToggle/FriendSearchToggle.styles';
 import axios from 'axios';
 import { updateFirebaseData } from '@hooks/useFireFetch';
+import { getToken } from '@utils/service';
 
 interface DormChatInfo {
   id: string | null;
@@ -51,17 +52,15 @@ const InviteToChatRoomModal = ({
   const [allUsers, setAllUsers] = useState([]);
   const [currentChatUsers, setCurrentChatUsers] = useState<User[]>([]);
   const [invitedUsers, setInvitedUsers] = useState<InvitedUser[]>([]);
-
-  const SERVER_KEY = '660d616b';
-  const ACCESS_TOKEN =
-    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjY2MGQ2MTZiOmhlcm1pb25lIiwiaWF0IjoxNjk5NDIzOTI4LCJleHAiOjE3MDAwMjg3Mjh9.9FA24mkoipWSd4KlpxTX0L8mKmJj7LAVd_XEcW1Xt7w';
-  const GET_ALL_USERS_URL = 'https://fastcampus-chat.net/users';
-  const GET_ALL_CHATTINGS_URL = 'https://fastcampus-chat.net/chat/all';
-  const INVITE_TO_CHATROOM_URL = 'https://fastcampus-chat.net/chat/invite';
+  const [accessToken, setAccessToken] = useState('');
+  const SERVER_KEY = process.env.REACT_APP_SERVER_KEY;
+  const GET_ALL_USERS_URL = process.env.REACT_APP_GET_ALL_USERS_URL;
+  const GET_ALL_CHATTINGS_URL = process.env.REACT_APP_GET_ALL_CHATTINGS_URL;
+  const INVITE_TO_CHATROOM_URL = process.env.REACT_APP_INVITE_TO_CHATROOM_URL;
 
   const headers = {
     'Content-Type': 'application/json',
-    Authorization: `Bearer ${ACCESS_TOKEN}`,
+    ...(accessToken && { Authorization: `Bearer ${accessToken}` }),
     serverId: SERVER_KEY,
   };
 
@@ -100,6 +99,10 @@ const InviteToChatRoomModal = ({
       users: [...prev.users, ...invitedUsersName],
     }));
   };
+  useEffect(() => {
+    const token = getToken();
+    setAccessToken(token);
+  }, []);
 
   // 현재 채팅에 있는 유저 불러오기
   useEffect(() => {

diff --git a/components/MyChatToggle/MyChatToggle.tsx b/components/MyChatToggle/MyChatToggle.tsx
@@ -15,8 +15,8 @@ interface MyChatToggleProps {
 }
 
 const MyChatToggle: React.FC<MyChatToggleProps> = ({ isVisible, onClose }) => {
-  const SERVER_KEY = '660d616b';
-  const FIND_MY_CHAT_URL = 'https://fastcampus-chat.net/chat';
+  const SERVER_KEY = process.env.REACT_APP_SERVER_KEY;
+  const FIND_MY_CHAT_URL = process.env.REACT_APP_FIND_MY_CHAT_URL;
   const [accessToken, setAccessToken] = useState('');
 
   const headers = {

diff --git a/components/MyChatting/MyChatting.tsx b/components/MyChatting/MyChatting.tsx
@@ -6,13 +6,14 @@ import * as styled from './MyChatting.styles';
 import Link from 'next/link';
 import { getToken } from '@utils/service';
 import UserIcon from '@assets/icon/UserIcon.svg';
+import { useRouter } from 'next/navigation';
 
 // import { ResponseValue } from '@/@types/RESTAPI/findMyChatting.types';
 type ResponseValue = any;
 
 const MyChatting = () => {
-  const SERVER_KEY = '660d616b';
-  const FIND_MY_CHAT_URL = 'https://fastcampus-chat.net/chat';
+  const SERVER_KEY = process.env.REACT_APP_SERVER_KEY;
+  const FIND_MY_CHAT_URL = process.env.REACT_APP_FIND_MY_CHAT_URL;
   const [accessToken, setAccessToken] = useState('');
 
   const headers = {
@@ -79,17 +80,13 @@ const MyChatting = () => {
 
             return (
               <Link
-                key={chat.id}
                 href={
                   chat.name === 'gryffindor' ||
                   chat.name === 'slytherin' ||
                   chat.name === 'hufflepuff' ||
                   chat.name === 'ravenclaw'
                     ? `/selectDormitory/${chat.name}`
-                    : {
-                        pathname: '/club/chatting',
-                        query: { id: chat.id, name: chat.name },
-                      }
+                    : `/club/${chat.id}&name=${chat.name}`
                 }
               >
                 <styled.MyChatting

diff --git a/components/MyPageToggle/MyPageToggle.tsx b/components/MyPageToggle/MyPageToggle.tsx
@@ -44,7 +44,7 @@ const MyPageToggle: React.FC<MyPageToggleProps> = ({ isVisible, onClose }) => {
 
       const accessToken = accessTokenCookie.split('=')[1];
 
-      const serverId = '660d616b';
+      const serverId = process.env.REACT_APP_SERVER_KEY;
 
       const response = await fetch('https://fastcampus-chat.net/auth/me', {
         method: 'GET',
@@ -109,7 +109,7 @@ const MyPageToggle: React.FC<MyPageToggleProps> = ({ isVisible, onClose }) => {
 
       const accessToken = accessTokenCookie.split('=')[1];
 
-      const serverId = '660d616b';
+      const serverId = process.env.REACT_APP_SERVER_KEY;
 
       const response = await fetch('https://fastcampus-chat.net/user', {
         method: 'PATCH',

diff --git a/components/club/chatItem/chatItem.tsx b/components/club/chatItem/chatItem.tsx
@@ -58,7 +58,7 @@ const chatItem = ({ id, name, users }: Chat) => {
     if (isMyChat) {
       const idParam = chatDetail.id;
       const nameParam = chatDetail.name;
-      router.push('/club/chatting' + '?id=' + idParam + '&name=' + nameParam);
+      router.push('/club/' + idParam + '&name=' + nameParam);
       return;
     }
     setJoinModalOpen(true);

diff --git a/components/club/createModal/CreateModal.tsx b/components/club/createModal/CreateModal.tsx
@@ -9,7 +9,7 @@ import { getToken } from '@utils/service';
 import { addFirebaseData } from '@hooks/useFireFetch';
 
 const createModal = () => {
-  const SERVER_KEY = '660d616b';
+  const SERVER_KEY = process.env.REACT_APP_SERVER_KEY;
   const [accessToken, setAccessToken] = useState('');
   const headers = {
     'Content-Type': 'application/json',
@@ -25,15 +25,15 @@ const createModal = () => {
   };
   const [isPrivate, setIsPrivate] = useState(false);
   const [myName, setMyName] = useState('');
-  const GET_MY_INFO_URL = 'https://fastcampus-chat.net/auth/me';
+  const GET_MY_INFO_URL = process.env.REACT_APP_GET_MY_INFO_URL;
 
   const handleCreateChat = async (
     name: string,
     users: string[],
     myName: string,
     isPrivate?: boolean,
   ) => {
-    const CREATE_CHAT_URL = 'https://fastcampus-chat.net/chat';
+    const CREATE_CHAT_URL = process.env.REACT_APP_CREATE_CHAT_URL;
     const requestData: any = {
       name: name,
       users: users,