Refactor: character API 적용 및 용어 통일

e2e/landing.spec.ts

@@ -15,13 +15,3 @@ test('로그인 페이지 클릭', async ({ page }) => {
   await expect(page).toHaveTitle(/Log in/);
   await expect(page).toHaveURL(/.*login/);
 });
-
-test('영준과 대화하기 클릭', async ({ page }) => {
-  await page.goto('/');
-
-  await page.getByRole('link', { name: '영준이와 대화하기' }).click();
-
-  await expect(page).toHaveTitle(/ToonChat/);
-  await expect(page).toHaveTitle(/대화 with/);
-  await expect(page).toHaveURL(/.*chats\/\d+/);
-});

src/components/chat/Header.tsx

@@ -4,21 +4,13 @@ import useSocketStore from '@/store/socket';
 import useChatStore from '@/store/chat';
 import color from '@/styles/color';
 import { useSession } from 'next-auth/react';
+import { CharacterStateProps } from '@/types/characterInfo';
 import FriendShip from './characterHeader/FriendShip';
 import CharacterInfo from './characterHeader/CharacterInfo';
-import SettingIcon from '../icons/SettingIcon';
-
-interface CharacterState {
-  characterId: string,
-  characterName: string,
-  hashTag: string,
-  imageUrl: string,
-  settingClick: () => void,
-}
 
 // TODO: Back 버튼을 누르면 지금 홈으로 돌아가지만 채팅 리스트뷰가 완성되면 그쪽으로 Link 될 예정
-const Header : FC<CharacterState> = ({
-  characterId, characterName, hashTag, imageUrl, settingClick,
+const Header : FC<CharacterStateProps> = ({
+  characterId, characterName, hashTag, profileImageUrl,
 }) => {
   // TODO: 친밀도를 API로 받아와야 작업이 가능함!
   const [userStatus, setUserStatus] = useState({
@@ -44,15 +36,12 @@ const Header : FC<CharacterState> = ({
   }, [session]);
   return (
     <header css={headerCSS}>
-      <CharacterInfo imageUrl={imageUrl} characterName={characterName} hashTag={hashTag} link="/chats" />
+      <CharacterInfo profileImageUrl={profileImageUrl} characterName={characterName} hashTag={hashTag} link="/chats" />
       <FriendShip
         friendShipExp={userStatus.friendShipExp}
         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>
   );
 };

src/components/chat/Main.tsx

@@ -10,12 +10,12 @@ import CharacterSpeak from './messageBox/CharacterSpeak';
 import Loading from '../common/dialog/Loading';
 
 interface MainProps {
-  characterId: string,
+  characterId: number,
   characterName: string,
-  imageUrl: string
+  profileImageUrl: string
 }
 
-const Main:FC<MainProps> = ({ characterId, characterName, imageUrl }) => {
+const Main:FC<MainProps> = ({ characterId, characterName, profileImageUrl }) => {
   const { chatContents, clearChatContents, initChatContents } = useChatStore();
   const messageEndRef = useRef<HTMLDivElement | null>(null);
   const [loadingHistory, setLoadingHistory] = useState(false);
@@ -42,7 +42,7 @@ const Main:FC<MainProps> = ({ characterId, characterName, imageUrl }) => {
             <CharacterSpeak
               key={chat.id}
               speaker={chat.speaker}
-              imageUrl={imageUrl}
+              profileImageUrl={profileImageUrl}
               content={chat.content}
               timestamp={chat.timestamp}
               loading={chat.loading}

src/components/chat/characterHeader/CharacterInfo.tsx

@@ -7,12 +7,12 @@ import color from '@/styles/color';
 interface CharacterInfoProps {
   characterName: string,
   hashTag: string,
-  imageUrl: string,
+  profileImageUrl: string,
   link: string,
 }
 
 const CharacterInfo: FC<CharacterInfoProps> = ({
-  characterName, hashTag, imageUrl, link,
+  characterName, hashTag, profileImageUrl, link,
 }) => (
   <>
     <Link href={link}>
@@ -28,7 +28,7 @@ const CharacterInfo: FC<CharacterInfoProps> = ({
     </Link>
     <div css={imageWrapperCSS}>
       <Image
-        src={imageUrl}
+        src={profileImageUrl}
         css={imageCSS}
         alt={`/${characterName}`}
         fill
@@ -77,5 +77,5 @@ const characterBackgroundCSS = css`
   overflow: hidden;  // 넘치면 영역을 감추기
   text-overflow: ellipsis; // ... 으로 마무리
   white-space: nowrap; // 아래줄로 내려가는 것을 막기
-  max-width: 11rem;
+  max-width: 10rem;
 `;

src/components/chat/messageBox/CharacterSpeak.tsx

@@ -5,16 +5,16 @@ import LoadingContent from './characterChatContent/LoadingContent';
 import ChatContent from './characterChatContent/ChatContent';
 
 interface CharacterSpeakProps {
-  speaker:string, content: string, timestamp: number, imageUrl: string, loading: boolean,
+  speaker:string, content: string, timestamp: number, profileImageUrl: string, loading: boolean,
 }
 
 const CharacterSpeak: FC<CharacterSpeakProps> = ({
-  speaker, content, timestamp, imageUrl, loading = false,
+  speaker, content, timestamp, profileImageUrl, loading = false,
 }) => (
   <span css={characterSpeakCSS}>
     <div css={imageWrapperCSS}>
       <Image
-        src={imageUrl}
+        src={profileImageUrl}
         alt={speaker}
         css={imageCSS}
         fill

src/components/common/searchBar/SearchBar.tsx

@@ -89,8 +89,7 @@ const inputCSS = css`
   border: none;
   background: none;
   padding-left: 0.75rem;
-  padding-right: 0.75rem;
-  width: 5rem;
+  width: 4rem;
 `;
 
 const buttonCSS = css`

src/components/community/BoardList.tsx

@@ -11,7 +11,9 @@ const BoardList = () => {
 
   useEffect(() => {
     findAllCharacters()
-      .then((data) => setCharacterInfoList(data))
+      .then((data) => {
+        setCharacterInfoList(data);
+      })
       .catch((error) => {
         console.error('Error fetching post:', error);
       });
@@ -21,17 +23,15 @@ const BoardList = () => {
     <section css={boardListWrapperCSS}>
       {characterInfoList ? (
         characterInfoList.map((characterInfo) => (
-          <div key={characterInfo.id}>
+          <div key={characterInfo.characterId}>
             <FriendWrapper
-              key={characterInfo.code}
-              linkUrl={`/community/${characterInfo.code}`}
+              key={characterInfo.characterId}
+              linkUrl={`/community/${characterInfo.characterId}`}
             >
               <FriendInfo
-                characterName={`${characterInfo.name} 게시판`}
-                // TODO: 백엔드는 이미지를 뿌려라!
-                // imageUrl={characterInfo.profileUrl}
-                message={`임시 정보 입니다. ${characterInfo.hashtags}`}
-                imageUrl="/leeyj.png"
+                characterName={`${characterInfo.characterName} 게시판`}
+                message={characterInfo.hashTag}
+                profileImageUrl={characterInfo.profileImageUrl}
               />
             </FriendWrapper>
           </div>

src/components/community/CommunityHeader.tsx

@@ -30,9 +30,9 @@ const CommunityHeader = () => {
           characterInfo
             ? (
               <CharacterInfo
-                imageUrl="/leeyj.png"
-                characterName={`${characterInfo.name} 게시판`}
-                hashTag={characterInfo.hashtags}
+                profileImageUrl={characterInfo.profileImageUrl}
+                characterName={`${characterInfo.characterName} 게시판`}
+                hashTag={characterInfo.hashTag}
                 link="/community"
               />
             )

src/components/community/PostHeader.tsx

@@ -28,10 +28,10 @@ const PostHeader = () => {
           characterInfo
             ? (
               <CharacterInfo
-                imageUrl="/leeyj.png"
-                characterName={`${characterInfo.name} 게시판`}
-                hashTag={characterInfo.hashtags}
-                link={`/community/${characterInfo.code}`}
+                profileImageUrl="/leeyj.png"
+                characterName={`${characterInfo.characterName} 게시판`}
+                hashTag={characterInfo.hashTag}
+                link={`/community/${characterInfo.characterId}`}
               />
             )
             : <Loading />

src/components/friends/ChatLogs.tsx

@@ -2,23 +2,27 @@ import { css } from '@emotion/react';
 import TimeStamp from '@/components/common/timeStamp/TimeStamp';
 import { useEffect, useState } from 'react';
 import { recentChatAPI } from '@/utils/api/chats';
+import { CharacterInfo } from '@/types/characterInfo';
 import FriendWrapper from './friend/FriendWrapper';
 import FriendInfo from './friend/FriendInfo';
 import ChatBadge from './friend/ChatBadge';
 
+interface recentMessageWithCharacterInfo {
+  characterInfo: CharacterInfo;
+  lastMessage: {
+    content: string;
+    createdAt: number;
+    fromUser: boolean;
+  };
+}
+
 const ChatLogs = () => {
   // TODO: 데이터셋을 한 번에 API로 받아오면 더 편하게 작업할 수 있을 것 같음
-  const [chatLogDataSet, setchatLogDataSet] = useState(chatLogDataSample);
+  const [recentChatList, setRecentChatList] = useState<recentMessageWithCharacterInfo[]>([]);
 
   const callRecentAPI = async () => {
-    const recentData = await recentChatAPI();
-    console.log(recentData);
-    const tempDataSet = chatLogDataSet.map((chatLog, index) => ({
-      ...chatLog,
-      message: recentData[index].lastMessage.content,
-      timestamp: recentData[index].lastMessage.createdAt,
-    }));
-    setchatLogDataSet([...tempDataSet]);
+    const recentChatData = await recentChatAPI();
+    setRecentChatList([...recentChatData]);
   };
 
   useEffect(() => {
@@ -27,21 +31,20 @@ const ChatLogs = () => {
 
   return (
     <section css={chatLogsWrapperCSS}>
-      {chatLogDataSet.map((data, index) => (
-        // TODO: 여러 캐릭터가 있을 때 스크롤이 가능한지 확인하기 위함
+      {recentChatList.map(({ characterInfo, lastMessage }, index) => (
         <FriendWrapper
           // eslint-disable-next-line react/no-array-index-key
           key={index}
-          linkUrl={`/chats/${data.characterId}`}
+          linkUrl={`/chats/${characterInfo.characterId}`}
         >
           <FriendInfo
-            characterName={data.characterName}
-            message={data.message}
-            imageUrl={data.imageUrl}
+            characterName={characterInfo.characterName}
+            message={lastMessage.content}
+            profileImageUrl={characterInfo.profileImageUrl}
           />
           <div css={subInfoWrapperCSS}>
-            <TimeStamp timestamp={data.timestamp} />
-            <ChatBadge unreadCount={data.unreadCount} />
+            <TimeStamp timestamp={lastMessage.createdAt} />
+            <ChatBadge unreadCount={lastMessage.fromUser} />
           </div>
         </FriendWrapper>
       ))}
@@ -65,21 +68,3 @@ const subInfoWrapperCSS = css`
   align-items: flex-end;
   margin-right: 0.625rem;
 `;
-
-const chatLogDataSample = [
-  {
-    characterId: '0',
-    characterName: '이영준',
-    imageUrl: '/leeyj.png',
-    message: '.',
-    timestamp: 123123,
-    unreadCount: 1,
-  }, {
-    characterId: '1',
-    characterName: '김미소',
-    imageUrl: '/kimms.png',
-    message: '.',
-    timestamp: 123123,
-    unreadCount: 0,
-  },
-];

src/components/friends/Friends.tsx

@@ -1,27 +1,44 @@
 import { css } from '@emotion/react';
+import { useEffect, useState } from 'react';
+import { CharacterInfo } from '@/types/characterInfo';
+import { findAllCharacters } from '@/utils/api/character';
 import FriendWrapper from './friend/FriendWrapper';
 import FriendHashTag from './friend/FriendHashTag';
 import FriendInfo from './friend/FriendInfo';
 
-const Friends = () => (
-  <section css={friendsWrapperCSS}>
-    {characterDataSet.map((data, index) => (
-      // TODO: 여러 캐릭터가 있을 때 스크롤이 가능한지 확인하기 위함
-      <FriendWrapper
-        // eslint-disable-next-line react/no-array-index-key
-        key={index}
-        linkUrl={`/profile/friends/${data.characterId}`}
-      >
-        <FriendInfo
-          characterName={data.characterName}
-          message={data.statusMessage}
-          imageUrl={data.imageUrl}
-        />
-        <FriendHashTag hashTag={data.hashTag} />
-      </FriendWrapper>
-    ))}
-  </section>
-);
+const Friends = () => {
+  const [characterInfoList, setCharacterInfoList] = useState<CharacterInfo[]>([]);
+
+  useEffect(() => {
+    findAllCharacters()
+      .then((data) => {
+        setCharacterInfoList(data);
+      })
+      .catch((error) => {
+        console.error('Error fetching post:', error);
+      });
+  }, []);
+
+  return (
+    <section css={friendsWrapperCSS}>
+      {characterInfoList.map((characterInfo, index) => (
+        // TODO: 여러 캐릭터가 있을 때 스크롤이 가능한지 확인하기 위함
+        <FriendWrapper
+          // eslint-disable-next-line react/no-array-index-key
+          key={index}
+          linkUrl={`/profile/friends/${characterInfo.characterId}`}
+        >
+          <FriendInfo
+            characterName={characterInfo.characterName}
+            message={characterInfo.statusMessage}
+            profileImageUrl={characterInfo.profileImageUrl}
+          />
+          <FriendHashTag hashTag={characterInfo.hashTag} />
+        </FriendWrapper>
+      ))}
+    </section>
+  );
+};
 
 export default Friends;
 
@@ -31,21 +48,3 @@ const friendsWrapperCSS = css`
   word-break: keep-all;
   padding: 0.375rem;
 `;
-
-// TODO: 이 부분은 API에서 떼와야하는 부분
-const characterDataSet = [
-  {
-    characterName: '이영준',
-    characterId: '0',
-    hashTag: '#카카오페이지 #김비서가왜그럴까',
-    statusMessage: '난 왜 이렇게 완벽한걸까...',
-    imageUrl: '/leeyj.png',
-
-  }, {
-    characterName: '김미소',
-    characterId: '1',
-    hashTag: '#카카오페이지 #김비서가왜그럴까',
-    statusMessage: '조만간 퇴사하려구요 :)',
-    imageUrl: '/kimms.png',
-  },
-];