채팅 페이지에 api 연결

frontend/src/apis/gets.ts

@@ -1,13 +1,13 @@
-import { Chat, MoimInfo, Participation } from '@_types/index';
-
+import { Chat, ChattingPreview, MoimInfo, Participation } from '@_types/index';
 import {
   GetChamyoAll,
   GetChamyoMine,
   GetChat,
+  GetChattingPreview,
   GetMoim,
   GetMoims,
-  GetPleases,
   GetMyInfo,
+  GetPleases,
   GetZzimMine,
 } from './responseTypes';
 
@@ -44,6 +44,13 @@ export const getMoim = async (moimId: number): Promise<MoimInfo> => {
   return json.data;
 };
 
+export const getChatPreview = async (): Promise<ChattingPreview[]> => {
+  const response = await ApiClient.getWithAuth(`chat/preview`);
+
+  const json: GetChattingPreview = await response.json();
+  return json.data.chatPreviewResponses;
+};
+
 export const getChat = async (
   moimId: number,
   recentChatId?: number,

frontend/src/apis/posts.ts

@@ -1,5 +1,6 @@
-import ApiClient from './apiClient';
 import { MoimInputInfo, PleaseInfoInput } from '@_types/index';
+
+import ApiClient from './apiClient';
 import { PostMoim } from './responseTypes';
 
 export const postMoim = async (moim: MoimInputInfo): Promise<number> => {
@@ -50,6 +51,34 @@ export const postInterest = async (pleaseId: number, isInterested: boolean) => {
     isInterested,
   });
 };
+export const postLastReadChatId = async (
+  moimId: number,
+  lastReadChatId: number,
+) => {
+  await ApiClient.postWithAuth('chat/last', {
+    moimId,
+    lastReadChatId,
+  });
+};
+
+export const postConfirmDatetime = async (
+  moimId: number,
+  date: string,
+  time: string,
+) => {
+  await ApiClient.postWithAuth('chat/datetime', {
+    moimId,
+    date,
+    time,
+  });
+};
+
+export const postConfirmPlace = async (moimId: number, place: string) => {
+  await ApiClient.postWithAuth('chat/place', {
+    moimId,
+    place,
+  });
+};
 
 export const postPlease = async (please: PleaseInfoInput) => {
   await ApiClient.postWithAuth('please', please);

frontend/src/apis/responseTypes.ts

@@ -1,4 +1,10 @@
-import { Chat, MoimInfo, Participation, Please } from '../types';
+import {
+  Chat,
+  ChattingPreview,
+  MoimInfo,
+  Participation,
+  Please,
+} from '../types';
 
 export interface GetMoims {
   data: { moims: MoimInfo[] };
@@ -12,6 +18,9 @@ export interface PostMoim {
   data: number;
 }
 
+export interface GetChattingPreview {
+  data: { chatPreviewResponses: ChattingPreview[] };
+}
 export interface GetChat {
   data: { chats: Chat[] };
 }

frontend/src/components/Chat/Chat.stories.tsx

@@ -17,7 +17,6 @@ export const Default: Story = {
       nickname: '테바',
       date: '2024-08-01',
       time: '12:12',
-      isConfirmChat: true,
       chatType: 'BASIC',
       isMyMessage: false,
     },

frontend/src/components/ChatList/ChatList.stories.tsx

@@ -19,7 +19,6 @@ export const Default: Story = {
         nickname: '홍길동',
         date: '2024-08-01',
         time: '10:00',
-        isConfirmChat: false,
         chatType: 'BASIC',
       },
       {
@@ -29,7 +28,6 @@ export const Default: Story = {
         nickname: '김철수',
         date: '2024-08-01',
         time: '10:01',
-        isConfirmChat: true,
         chatType: 'BASIC',
       },
       {
@@ -39,7 +37,6 @@ export const Default: Story = {
         nickname: '홍길동',
         date: '2024-08-01',
         time: '10:05',
-        isConfirmChat: false,
         chatType: 'DATETIME',
       },
       {
@@ -49,7 +46,6 @@ export const Default: Story = {
         nickname: '김철수',
         date: '2024-08-01',
         time: '10:06',
-        isConfirmChat: true,
         chatType: 'DATETIME',
       },
       {
@@ -59,7 +55,6 @@ export const Default: Story = {
         nickname: '홍길동',
         date: '2024-08-01',
         time: '10:10',
-        isConfirmChat: false,
         chatType: 'PLACE',
       },
       {
@@ -69,7 +64,6 @@ export const Default: Story = {
         nickname: '김철수',
         date: '2024-08-01',
         time: '10:12',
-        isConfirmChat: true,
         chatType: 'PLACE',
       },
       {
@@ -79,7 +73,6 @@ export const Default: Story = {
         nickname: '홍길동',
         date: '2024-08-01',
         time: '10:15',
-        isConfirmChat: false,
         chatType: 'BASIC',
       },
       {
@@ -89,7 +82,6 @@ export const Default: Story = {
         nickname: '김철수',
         date: '2024-08-01',
         time: '10:16',
-        isConfirmChat: true,
         chatType: 'BASIC',
       },
       {
@@ -99,7 +91,6 @@ export const Default: Story = {
         nickname: '홍길동',
         date: '2024-08-01',
         time: '10:20',
-        isConfirmChat: false,
         chatType: 'DATETIME',
       },
       {
@@ -109,7 +100,6 @@ export const Default: Story = {
         nickname: '김철수',
         date: '2024-08-01',
         time: '10:21',
-        isConfirmChat: true,
         chatType: 'DATETIME',
       },
     ],

frontend/src/components/ChattingPreview/ChattingPreview.stories.tsx

@@ -15,7 +15,7 @@ export const NoContent: Story = {
       moimId: 3,
       title: '운동 모임',
       currentPeople: 10,
-      beforeMoim: true,
+      isStarted: true,
       lastContent: '',
       unreadContentCount: 0,
     },
@@ -28,7 +28,7 @@ export const HasContent: Story = {
       moimId: 2,
       title: '독서 클럽',
       currentPeople: 8,
-      beforeMoim: true,
+      isStarted: true,
       lastContent: '이번 주 독서 토론은 어떤 책으로 할까요?',
       unreadContentCount: 1,
     },
@@ -41,7 +41,7 @@ export const Over300UnreadMessage: Story = {
       moimId: 2,
       title: '독서 클럽',
       currentPeople: 8,
-      beforeMoim: true,
+      isStarted: true,
       lastContent: '이번 주 독서 토론은 어떤 책으로 할까요?',
       unreadContentCount: 301,
     },
@@ -54,7 +54,7 @@ export const AfterMoim: Story = {
       moimId: 2,
       title: '독서 클럽',
       currentPeople: 8,
-      beforeMoim: false,
+      isStarted: false,
       lastContent: '이번 주 독서 토론은 어떤 책으로 할까요?',
       unreadContentCount: 1,
     },

frontend/src/components/ChattingPreview/ChattingPreview.style.ts

@@ -1,10 +1,10 @@
 import { Theme, css } from '@emotion/react';
 
 export const container = ({
-  beforeMoim,
+  isStarted,
   theme,
 }: {
-  beforeMoim: boolean;
+  isStarted: boolean;
   theme: Theme;
 }) => css`
   display: flex;
@@ -17,9 +17,9 @@ export const container = ({
 
   background-color: ${theme.colorPalette.white[100]};
   border: 0.3rem solid;
-  border-color: ${beforeMoim
-    ? theme.colorPalette.orange[100]
-    : theme.colorPalette.yellow[100]};
+  border-color: ${isStarted
+    ? theme.colorPalette.yellow[100]
+    : theme.colorPalette.orange[100]};
   border-radius: 25px;
   box-shadow: 0 0 10px 0 #00000040;
 `;
@@ -32,10 +32,10 @@ export const titleContainer = css`
 
 export const tag = ({
   theme,
-  beforeMoim,
+  isStarted,
 }: {
   theme: Theme;
-  beforeMoim: boolean;
+  isStarted: boolean;
 }) => css`
   ${theme.typography.small}
   display: flex;
@@ -45,13 +45,13 @@ export const tag = ({
   height: 24px;
   padding: 0.2rem 0.6rem;
 
-  color: ${beforeMoim
-    ? theme.colorPalette.white[100]
-    : theme.colorPalette.yellow[800]};
+  color: ${isStarted
+    ? theme.colorPalette.yellow[800]
+    : theme.colorPalette.white[100]};
 
-  background-color: ${beforeMoim
-    ? theme.colorPalette.orange[100]
-    : theme.colorPalette.yellow[50]};
+  background-color: ${isStarted
+    ? theme.colorPalette.yellow[50]
+    : theme.colorPalette.orange[100]};
   border-radius: 1rem;
 `;
 

frontend/src/components/ChattingPreview/ChattingPreview.tsx

@@ -22,23 +22,23 @@ interface ChattingPreviewProps {
 
 export default function ChattingPreview(props: ChattingPreviewProps) {
   const { chatPreview, onClick } = props;
-  const { title, beforeMoim, lastContent, unreadContentCount, currentPeople } =
+  const { title, isStarted, lastContent, unreadContentCount, currentPeople } =
     chatPreview;
   const theme = useTheme();
   const imageUrls = useMemo(
-    () => new Array(chatPreview.currentPeople + 1).fill(''),
+    () => new Array(chatPreview.currentPeople).fill(''),
     // TODO:participation.profile 구현되면 아래 코드로 변경
     // () => moim.participants.map((participation) => participation.profile),
     [chatPreview.currentPeople],
   );
 
   return (
-    <div css={container({ beforeMoim, theme })} onClick={onClick}>
+    <div css={container({ isStarted, theme })} onClick={onClick}>
       <div css={messageContainer}>
         <div css={titleContainer}>
           <h2 css={theme.typography.s2}>{title}</h2>
-          <div css={tag({ theme, beforeMoim })}>
-            {beforeMoim ? '모임 전' : '모임 후'}
+          <div css={tag({ theme, isStarted })}>
+            {isStarted ? '모임 후' : '모임 전'}
           </div>
         </div>
         {lastContent && (
@@ -57,7 +57,7 @@ export default function ChattingPreview(props: ChattingPreviewProps) {
       </div>
 
       <div css={peopleContainer}>
-        <span css={smallGrey400({ theme })}>{`${currentPeople + 1}명`}</span>
+        <span css={smallGrey400({ theme })}>{`${currentPeople}명`}</span>
         <UserPreviewList imageUrls={imageUrls} />
       </div>
     </div>

frontend/src/components/MoimCard/MoimCard.stories.tsx

@@ -26,12 +26,12 @@ export const Default: Story = {
         {
           nickname: '김코딩',
           profile: 'https://avatars.githubusercontent.com/u/78939596?v=4',
-          role: 'moimer',
+          role: 'MOIMER',
         },
         {
           nickname: '김디자인',
           profile: 'https://avatars.githubusercontent.com/u/78939596?v=4',
-          role: 'moimee',
+          role: 'MOIMEE',
         },
       ],
       description: '코딩하면서 놀아요',

frontend/src/components/MoimCardList/MoimCardList.stories.tsx

@@ -37,12 +37,12 @@ export const Default: Story = {
           {
             nickname: '김코딩',
             profile: 'https://avatars.githubusercontent.com/u/78939596?v=4',
-            role: 'moimer',
+            role: 'MOIMER',
           },
           {
             nickname: '김디자인',
             profile: 'https://avatars.githubusercontent.com/u/78939596?v=4',
-            role: 'moimee',
+            role: 'MOIMEE',
           },
         ],
         description: '코딩하면서 놀아요',
@@ -61,12 +61,12 @@ export const Default: Story = {
           {
             nickname: '김코딩',
             profile: 'https://avatars.githubusercontent.com/u/78939596?v=4',
-            role: 'moimer',
+            role: 'MOIMER',
           },
           {
             nickname: '김디자인',
             profile: 'https://avatars.githubusercontent.com/u/78939596?v=4',
-            role: 'moimee',
+            role: 'MOIMEE',
           },
         ],
         description: '코딩하면서 놀아요',
@@ -96,12 +96,12 @@ export const Default: Story = {
           {
             nickname: '김코딩',
             profile: 'https://avatars.githubusercontent.com/u/78939596?v=4',
-            role: 'moimer',
+            role: 'MOIMER',
           },
           {
             nickname: '김디자인',
             profile: 'https://avatars.githubusercontent.com/u/78939596?v=4',
-            role: 'moimee',
+            role: 'MOIMEE',
           },
         ],
         description: '코딩하면서 놀아요',

frontend/src/components/PlaceModalContent/PlaceModalContent.tsx

@@ -26,7 +26,7 @@ export default function PlaceModalContent(props: PlaceModalContentProps) {
   }, [place, onConfirm]);
 
   return (
-    <form css={S.content({ theme })} onSubmit={submitHandler}>
+    <div css={S.content({ theme })} onSubmit={submitHandler}>
       <LabeledInput
         title="장소 입력"
         placeholder="ex. URL, 칼바람 나락"
@@ -59,6 +59,6 @@ export default function PlaceModalContent(props: PlaceModalContentProps) {
           </Button>
         </div>
       </div>
-    </form>
+    </div>
   );
 }