Feat: 채팅 페이지에 API 연결

TeamATM · Oct 22, 2023 · 6147460 · 6147460
1 parent da5cf03
commit 6147460
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 90 deletions.
diff --git a/src/components/chat/Header.tsx b/src/components/chat/Header.tsx
@@ -6,19 +6,17 @@ import color from '@/styles/color';
 import { useSession } from 'next-auth/react';
 import FriendShip from './characterHeader/FriendShip';
 import CharacterInfo from './characterHeader/CharacterInfo';
-import SettingIcon from '../icons/SettingIcon';
 
 interface CharacterState {
-  characterId: string,
+  characterId: number,
   characterName: string,
   hashTag: string,
   imageUrl: string,
-  settingClick: () => void,
 }
 
 // TODO: Back 버튼을 누르면 지금 홈으로 돌아가지만 채팅 리스트뷰가 완성되면 그쪽으로 Link 될 예정
 const Header : FC<CharacterState> = ({
-  characterId, characterName, hashTag, imageUrl, settingClick,
+  characterId, characterName, hashTag, imageUrl,
 }) => {
   // TODO: 친밀도를 API로 받아와야 작업이 가능함!
   const [userStatus, setUserStatus] = useState({
@@ -50,9 +48,6 @@ const Header : FC<CharacterState> = ({
         maxFriendShipExp={userStatus.maxFriendShipExp}
         friendShipLv={userStatus.friendShipLv}
       />
-      <button type="button" onClick={settingClick} css={css`border: none; background-color: ${color.white};`}>
-        <SettingIcon color={color.lightGray} />
-      </button>
     </header>
   );
 };

diff --git a/src/components/chat/Main.tsx b/src/components/chat/Main.tsx
@@ -10,7 +10,7 @@ import CharacterSpeak from './messageBox/CharacterSpeak';
 import Loading from '../common/dialog/Loading';
 
 interface MainProps {
-  characterId: string,
+  characterId: number,
   characterName: string,
   imageUrl: string
 }

diff --git a/src/pages/chats/[character].tsx b/src/pages/chats/[character].tsx
@@ -1,103 +1,66 @@
-import { GetServerSideProps } from 'next';
 import { css } from '@emotion/react';
 import MessageInput from '@/components/chat/MessageInput';
 import Header from '@/components/chat/Header';
 import Main from '@/components/chat/Main';
 import SEO from '@/components/common/head/SEO';
-import Dialog from '@/components/common/dialog/Dialog';
-import TuneSetting from '@/components/chat/tuneSetting/TuneSetting';
 import { useEffect, useState } from 'react';
 import useChatStore from '@/store/chat';
+import { useRouter } from 'next/router';
+import { CharacterInfo } from '@/types/characterInfo';
+import { findCharacterById } from '@/utils/api/character';
+import Loading from '@/components/common/dialog/Loading';
 
-interface CharacterProps {
-  characterName: string,
-  characterId: string,
-  hashTag: string,
-  imageUrl: string,
-}
-
-const Character = ({
-  characterProps: {
-    characterName, characterId, hashTag, imageUrl,
-  },
-}
-  : { characterProps: CharacterProps }) => {
-  const [settingModal, setSettingModal] = useState(false);
+const Character = () => {
+  const router = useRouter();
+  const { character: characterId } = router.query;
+  const [characterInfo, setCharacterInfo] = useState<CharacterInfo>();
   const { setChatInfo } = useChatStore();
+
   useEffect(() => {
-    setChatInfo(characterName, characterId);
-  }, []);
+    if (characterId && typeof characterId === 'string') {
+      findCharacterById(characterId)
+        .then((data) => {
+          setCharacterInfo(data);
+          setChatInfo(data.characterName, data.characterId);
+        })
+        .catch((error) => {
+          console.error('Error fetching post:', error);
+        });
+    }
+  }, [characterId]);
 
   return (
     <>
-      <SEO title={`대화 with ${characterName}`} />
+      <SEO title={characterInfo ? `대화 with ${characterInfo.characterName}` : '로딩 중'} />
       <section css={pageCSS}>
-        <div>
-          <Header
-            characterId={characterId}
-            imageUrl={imageUrl}
-            characterName={characterName}
-            hashTag={hashTag}
-            settingClick={() => setSettingModal(!settingModal)}
-          />
-          <Main characterId={characterId} characterName={characterName} imageUrl={imageUrl} />
-        </div>
-        <MessageInput characterId={Number(characterId)} characterName={characterName} />
+        {characterInfo
+          ? (
+            <>
+              <div>
+                <Header
+                  characterId={characterInfo.characterId}
+                  imageUrl={characterInfo.profileImageUrl}
+                  characterName={characterInfo.characterName}
+                  hashTag={characterInfo.hashTag}
+                />
+                <Main
+                  characterId={characterInfo.characterId}
+                  characterName={characterInfo.characterName}
+                  imageUrl={characterInfo.profileImageUrl}
+                />
+              </div>
+              <MessageInput
+                characterId={Number(characterId)}
+                characterName={characterInfo.characterName}
+              />
+            </>
+          ) : <Loading />}
       </section>
-      { settingModal && (
-      <Dialog closeModal={() => { setSettingModal(false); }} theme="white">
-        <TuneSetting closeModal={() => { setSettingModal(false); }} />
-      </Dialog>
-      )}
     </>
   );
 };
 export default Character;
 
-// TODO: vercel 배포에서 임시API로는 서버사이드 랜더링이
-// 잘 안되는 상황이었음. 더미데이터를 여기에서 따로 뽑고 이후 서버 연결하면 지울 예정
-const characterDataSet = [
-  {
-    'bot-name': '이영준',
-    'hash-tag': '#카카오페이지 #김비서가왜그럴까',
-    'image-url': '/leeyj.png',
-  }, {
-    'bot-name': '김미소',
-    'hash-tag': '#카카오페이지 #김비서가왜그럴까',
-    'image-url': '/kimms.png',
-  },
-];
-
-export const getServerSideProps
-:GetServerSideProps<{characterProps:CharacterProps}> = async (context) => {
-  const characterId = context.query.character;
-
-  if (Array.isArray(characterId) || !characterId) {
-    return {
-      notFound: true,
-    };
-  }
-
-  const idNumber = parseInt(characterId, 10);
-  if (Number.isNaN(idNumber) || idNumber < 0 || idNumber >= characterDataSet.length) {
-    return {
-      notFound: true,
-    };
-  }
-  const dataSet = characterDataSet[idNumber];
-
-  return {
-    props: {
-      characterProps: {
-        characterName: dataSet['bot-name'],
-        characterId,
-        hashTag: dataSet['hash-tag'],
-        imageUrl: dataSet['image-url'],
-      },
-    },
-  };
-};
-
 const pageCSS = css`
   min-height: 100vh;
   display: flex;

diff --git a/src/utils/api/chats.ts b/src/utils/api/chats.ts
@@ -5,7 +5,7 @@ export const recentChatAPI = async () => {
   return result.data;
 };
 
-export const chatHistoryAPI = async (characterId: string) => {
+export const chatHistoryAPI = async (characterId: number) => {
   const result = await chatInstance.get(`/chat/history/${characterId}`);
   return result.data;
 };
diff --git a/src/utils/services/chats.ts b/src/utils/services/chats.ts
@@ -10,7 +10,7 @@ interface resultData {
 
 type GetHistory = (
   setLoading: (isLoading: boolean) => void,
-  characterId: string,
+  characterId: number,
   characterName: string,
   initChatContents: (history:ChatContentsState[]) => void
 ) => void