Merge pull request #45 from Nexters/feat/#44

src/app/api/v1/chat/room/message/route.ts

@@ -1,43 +1,33 @@
-import {
-  SendChatMessageRequest,
-  SendChatMessageResponse,
-} from "@/chat/apis/sendChatMessage";
+import { SendChatMessageRequest } from "@/chat/apis/sendChatMessage";
 import { NextRequest, NextResponse } from "next/server";
 
 export async function POST(request: NextRequest) {
   const body: SendChatMessageRequest = await request.json();
 
   console.log(body);
 
-  const normalReplyMockData: SendChatMessageResponse = {
+  const normalReplyMockData = {
     messageId: 1,
     type: "SYSTEM_NORMAL_REPLY",
     sender: "SYSTEM",
-    answers: [
-      "안녕 내담자",
-      "따듯한 마룻바닥이 그리운 겨울 밤이야",
-      "오늘은 어떤게 궁금해서 찾어왔어냥?",
-    ],
+    answers: ["안녕 내담자", "따듯한 마룻바닥이 그리운 겨울 밤이야", "오늘은 어떤게 궁금해서 찾어왔어냥?"],
   };
 
-  const invalidQuestionReplyMockData: SendChatMessageResponse = {
+  const invalidQuestionReplyMockData = {
     messageId: 1,
     type: "SYSTEM_INVALID_QUESTION_REPLY",
     sender: "SYSTEM",
     answers: ["잘못된 질문이네냥!", "다시 질문해보라냥!"],
   };
 
-  const questionReplyMockData: SendChatMessageResponse = {
+  const questionReplyMockData = {
     messageId: 1,
     type: "SYSTEM_TAROT_QUESTION_REPLY",
     sender: "SYSTEM",
-    answers: [
-      "전남친이 아직 미련이 남았는지 궁금하구낭!",
-      "타로카드로 그 사람의 마음을 함계 들여다 볼까냥?",
-    ],
+    answers: ["전남친이 아직 미련이 남았는지 궁금하구낭!", "타로카드로 그 사람의 마음을 함계 들여다 볼까냥?"],
   };
 
-  const questionAcceptanceReplyMockData: SendChatMessageResponse = {
+  const questionAcceptanceReplyMockData = {
     messageId: 1,
     type: "SYSTEM_TAROT_QUESTION_ACCEPTANCE_REPLY",
     sender: "SYSTEM",

src/app/api/v1/chat/room/messages/route.ts

@@ -1,4 +1,3 @@
-import { ChatMessagesByRoomIdResponse } from "@/chat/apis/getChatMessagesByRoomId";
 import { NextRequest } from "next/server";
 
 import { NextResponse } from "next/server";
@@ -9,38 +8,29 @@ export async function GET(request: NextRequest) {
 
   console.log(roomId);
 
-  const mockData: ChatMessagesByRoomIdResponse = {
+  const mockData = {
     messages: [
       {
         messageId: 1,
         type: "USER_NORMAL",
         sender: "SYSTEM",
-        answers: [
-          "타로결과를 다시 보고 싶으면 카드를 눌러보라냥🐾",
-          "또 궁금한 거 있어냥?",
-        ],
+        answers: ["타로결과를 다시 보고 싶으면 카드를 눌러보라냥🐾", "또 궁금한 거 있어냥?"],
         tarotName: "M_00",
         tarotResultId: 1,
       },
       {
         messageId: 2,
         type: "USER_TAROT_QUESTION",
         sender: "USER",
-        answers: [
-          "이 타로 카드가 의미하는 게 뭐냐냥?",
-          "뭔가 다른 카드를 보고 싶다냥.",
-        ],
+        answers: ["이 타로 카드가 의미하는 게 뭐냐냥?", "뭔가 다른 카드를 보고 싶다냥."],
         tarotName: "M_01",
         tarotResultId: 2,
       },
       {
         messageId: 3,
         type: "SYSTEM_TAROT_RESULT",
         sender: "SYSTEM",
-        answers: [
-          "새로운 결과를 보고 싶다면 다른 질문을 해보라냥!",
-          "타로 카드 속에 숨겨진 비밀을 알려줄게냥!",
-        ],
+        answers: ["새로운 결과를 보고 싶다면 다른 질문을 해보라냥!", "타로 카드 속에 숨겨진 비밀을 알려줄게냥!"],
         tarotName: "M_02",
         tarotResultId: 3,
       },

src/app/api/v1/tarot/result/[resultId]/route.ts

@@ -1,12 +1,11 @@
-import { TarotReadingResultResponse } from "@/tarot/apis/getTarotReadingResultById";
 import { NextRequest, NextResponse } from "next/server";
 
 export async function GET(request: NextRequest) {
   const resultId = request.nextUrl.pathname.split("/")[4];
 
   console.log(parseInt(resultId, 10));
 
-  const mockData: TarotReadingResultResponse = {
+  const mockData = {
     tarot: "M_00",
     type: "연애",
     cardValue: {

src/app/api/v1/tarot/select/route.ts

@@ -1,21 +1,15 @@
-import {
-  SelectTarotCardRequest,
-  SelectTarotCardResponse,
-} from "@/tarot/apis/selectTarotCard";
+import { SelectTarotCardRequest } from "@/tarot/apis/selectTarotCard";
 import { NextRequest, NextResponse } from "next/server";
 
 export async function POST(request: NextRequest) {
   const body: SelectTarotCardRequest = await request.json();
   console.log(body);
 
-  const mockData: SelectTarotCardResponse = {
+  const mockData = {
     messageId: 1,
     type: "SYSTEM_TAROT_RESULT",
     sender: "SYSTEM",
-    answer: [
-      "타로결과를 다시 보고 싶으면 카드를 눌러보라냥🐾",
-      "또 궁금한 거 있어냥?",
-    ],
+    answer: ["타로결과를 다시 보고 싶으면 카드를 눌러보라냥🐾", "또 궁금한 거 있어냥?"],
     tarotName: "M_00",
     tarotResultId: 1,
   };

src/chat/apis/createChatRoom.ts

@@ -1,24 +1,24 @@
 import apiClient from "@/shared/lib/axios/apiClient";
 import { z } from "zod";
 
-export type CreateChatRoomResponse = {
+type serverResponse = {
   roomId: number;
 };
 
 const schema = z.object({
   roomId: z.number(),
 });
 
-type CreateChatRoomData = z.infer<typeof schema>;
+export type CreateChatRoomResponse = z.infer<typeof schema>;
 
-const validate = (data: CreateChatRoomResponse): CreateChatRoomData => {
+const validate = (data: serverResponse): CreateChatRoomResponse => {
   const validatedData = schema.parse(data);
   return validatedData;
 };
 
-export const createChatRoom = () => {
+export const createChatRoom = (): Promise<CreateChatRoomResponse> => {
   return apiClient
-    .post<CreateChatRoomResponse>(`${process.env.NEXT_PUBLIC_API_BASE_URL}/api/v1/chat/room`)
+    .post<serverResponse>(`${process.env.NEXT_PUBLIC_API_BASE_URL}/api/v1/chat/room`)
     .then((res) => validate(res.data))
     .catch((error) => {
       console.error(error);

src/chat/apis/getChatMessagesByRoomId.ts

@@ -1,10 +1,10 @@
 import apiClient from "@/shared/lib/axios/apiClient";
-import { TarotCardIdSchema } from "@/tarot/models/tarotCardId";
+import { TarotCardIdSchema } from "@/tarot/types/tarotCardId";
 import { z } from "zod";
-import { MessageCategorySchema } from "../models/messageCategory";
-import { MessageSenderTypeSchema } from "../models/messageSender";
+import { MessageCategorySchema } from "../types/messageCategory";
+import { MessageSenderTypeSchema } from "../types/messageSender";
 
-export type ChatMessagesByRoomIdResponse = {
+type serverResponse = {
   messages: {
     messageId: number;
     type: string;
@@ -28,16 +28,16 @@ const schema = z.object({
   ),
 });
 
-export type ChatMessagesByRoomIdData = z.infer<typeof schema>;
+export type ChatMessagesByRoomIdResponse = z.infer<typeof schema>;
 
-const validate = (data: ChatMessagesByRoomIdResponse): ChatMessagesByRoomIdData => {
+const validate = (data: serverResponse): ChatMessagesByRoomIdResponse => {
   const validatedData = schema.parse(data);
   return validatedData;
 };
 
-export const getChatMessagesByRoomId = (roomId: number) => {
+export const getChatMessagesByRoomId = (roomId: number): Promise<ChatMessagesByRoomIdResponse> => {
   return apiClient
-    .get<ChatMessagesByRoomIdResponse>(`${process.env.NEXT_PUBLIC_API_BASE_URL}/api/v1/chat/room/messages`, {
+    .get<serverResponse>(`${process.env.NEXT_PUBLIC_API_BASE_URL}/api/v1/chat/room/messages`, {
       params: {
         roomId,
       },

src/chat/apis/sendChatMessage.ts

@@ -1,7 +1,7 @@
 import apiClient from "@/shared/lib/axios/apiClient";
 import { z } from "zod";
-import { MessageCategorySchema } from "../models/messageCategory";
-import { MessageSenderTypeSchema } from "../models/messageSender";
+import { MessageCategorySchema } from "../types/messageCategory";
+import { MessageSenderTypeSchema } from "../types/messageSender";
 
 export type SendChatMessageRequest = {
   roomId: number;
@@ -10,7 +10,7 @@ export type SendChatMessageRequest = {
   referenceQuestionId?: number;
 };
 
-export type SendChatMessageResponse = {
+type serverResponse = {
   messageId: number;
   type: string;
   sender: string;
@@ -30,19 +30,16 @@ const schema = z.object({
   answers: z.array(z.string()),
 });
 
-type SendChatMessageData = z.infer<typeof schema>;
+export type SendChatMessageResponse = z.infer<typeof schema>;
 
-const validate = (data: SendChatMessageResponse): SendChatMessageData => {
+const validate = (data: serverResponse): SendChatMessageResponse => {
   const validatedData = schema.parse(data);
   return validatedData;
 };
 
-export const sendChatMessage = (request: SendChatMessageRequest) => {
+export const sendChatMessage = (request: SendChatMessageRequest): Promise<SendChatMessageResponse> => {
   return apiClient
-    .post<SendChatMessageResponse>(
-      `${process.env.NEXT_PUBLIC_API_BASE_URL}/api/v1/chat/room/message`,
-      request,
-    )
+    .post<serverResponse>(`${process.env.NEXT_PUBLIC_API_BASE_URL}/api/v1/chat/room/message`, request)
     .then((res) => validate(res.data))
     .catch((error) => {
       console.error(error);

src/chat/components/Card.tsx

@@ -1,14 +1,13 @@
 "use client";
 
-import Image from "next/image";
-import styled from "styled-components";
 import CardBack from "@/shared/assets/images/cardBack.webp";
 import { cubicBezier, easeOut } from "motion";
 import { div } from "motion/react-client";
-import { useState } from "react";
-import { Dispatch, SetStateAction, useRef, useEffect } from "react";
-import { CardPickState } from "../models/CardPickState";
-import { DeckState } from "../models/DeckState";
+import Image from "next/image";
+import { Dispatch, SetStateAction, useEffect, useRef, useState } from "react";
+import styled from "styled-components";
+import { CardPickState } from "../types/CardPickState";
+import { DeckState } from "../types/DeckState";
 interface PropTypes {
   idx: number;
   deckState: DeckState;
@@ -17,13 +16,7 @@ interface PropTypes {
   cardPickState: CardPickState[];
 }
 
-const Card = ({
-  idx,
-  deckState,
-  setDeckState,
-  onClick,
-  cardPickState,
-}: PropTypes) => {
+const Card = ({ idx, deckState, setDeckState, onClick, cardPickState }: PropTypes) => {
   const [isCardShadow, setIsCardShadow] = useState(false);
   const [moveDistance, setMoveDistance] = useState(0);
   const cardRef = useRef<HTMLDivElement>(null);
@@ -98,11 +91,7 @@ const Card = ({
       onClick={handleClickCard}
       onAnimationComplete={onAnimationEnd}
     >
-      <CardWrapper
-        src={CardBack}
-        alt="카드 뒷면 이미지"
-        isCardShadow={isCardShadow}
-      />
+      <CardWrapper src={CardBack} alt="카드 뒷면 이미지" isCardShadow={isCardShadow} />
     </CardAnimationWrapper>
   );
 };
@@ -120,8 +109,7 @@ const CardAnimationWrapper = styled(div)`
 const CardWrapper = styled(Image)<{ isCardShadow: boolean }>`
   border-radius: 8px;
 
-  box-shadow: ${({ isCardShadow }) =>
-    isCardShadow ? "-8px 0px 12px 0px rgba(0, 0, 0, 0.15)" : ""};
+  box-shadow: ${({ isCardShadow }) => (isCardShadow ? "-8px 0px 12px 0px rgba(0, 0, 0, 0.15)" : "")};
 
   width: 100px;
   height: 160px;

src/chat/components/ChatBubble.tsx

@@ -1,5 +1,5 @@
-import { MessageSenderType } from "@/chat/models/messageSender";
-import { TarotCardIdType } from "@/tarot/models/tarotCardId";
+import { MessageSenderType } from "@/chat/types/messageSender";
+import { TarotCardIdType } from "@/tarot/types/tarotCardId";
 import findCardById from "@/tarot/utils/findCardById";
 import Image from "next/image";
 import Link from "next/link";

src/chat/components/ChatBubbleGroup.tsx

@@ -1,4 +1,4 @@
-import { MessageType } from "@/chat/models/message";
+import { MessageType } from "@/chat/types/message";
 import { css, styled } from "styled-components";
 import ChatAvatar from "./ChatAvatar";
 import ChatBubble from "./ChatBubble";

src/chat/components/ChatCardSelect.tsx

@@ -6,8 +6,8 @@ import * as motion from "motion/react-client";
 import { useParams, useRouter } from "next/navigation";
 import { useEffect, useRef, useState } from "react";
 import styled from "styled-components";
-import { CardPickState } from "../models/CardPickState";
-import { DeckState } from "../models/DeckState";
+import { CardPickState } from "../types/CardPickState";
+import { DeckState } from "../types/DeckState";
 import Card from "./Card";
 
 const riseUpCardDeck = {

src/chat/components/ChatRoom.tsx

@@ -41,6 +41,7 @@ export default function ChatRoom() {
     if (!data) return;
     copyServerState(data.messages);
     if (!initialMessage) return;
+    console.log(initialMessage);
     router.replace(pathname);
     const message = JSON.parse(initialMessage) as SendChatMessageRequest;
 
@@ -65,6 +66,7 @@ export default function ChatRoom() {
 
     sendChatMessage(JSON.parse(initialMessage), {
       onSuccess: async (data) => {
+        console.log(data);
         deleteMessage(loadingMessageId);
 
         addMessage({

src/chat/components/QuickQuestionPickerBox.tsx

@@ -1,5 +1,5 @@
 import { useCreateChatRoom } from "@/chat/hooks/useCreateChatRoom";
-import { TarotQuestionRecommendListData } from "@/tarot/apis/getTarotQuestionRecommends";
+import { TarotQuestionRecommendListResponse } from "@/tarot/apis/getTarotQuestionRecommends";
 import { useTarotQuestionRecommends } from "@/tarot/hooks/useTarotQuestionRecommends";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
@@ -16,7 +16,7 @@ export default function QuickQuestionPickerBox() {
 
   if (!data) return null;
 
-  const adaptQuestionRecommends = (data: TarotQuestionRecommendListData) => {
+  const adaptQuestionRecommends = (data: TarotQuestionRecommendListResponse) => {
     const colors = ["primary03", "grey10", "primary01", "grey60"] as const;
     return data.questions.map((question, i) => ({
       ...question,

src/chat/hooks/useChatMessagesStore.tsx

@@ -1,6 +1,6 @@
 import { createContext, useCallback, useContext, useReducer } from "react";
-import { ChatMessagesByRoomIdData } from "../apis/getChatMessagesByRoomId";
-import { MessageType } from "../models/message";
+import { ChatMessagesByRoomIdResponse } from "../apis/getChatMessagesByRoomId";
+import { MessageType } from "../types/message";
 
 type AddMessageAction = {
   type: "ADD_MESSAGE";
@@ -9,7 +9,7 @@ type AddMessageAction = {
 
 type CopyServerStateAction = {
   type: "COPY_SERVER_STATE";
-  payload: ChatMessagesByRoomIdData["messages"];
+  payload: ChatMessagesByRoomIdResponse["messages"];
 };
 
 type DeleteMessageAction = {
@@ -49,7 +49,7 @@ const chatMessagesReducer = (state: MessageType[], action: Action) => {
 type ChatMessagesContextType = {
   state: MessageType[];
   addMessage: (message: MessageType) => void;
-  copyServerState: (messages: ChatMessagesByRoomIdData["messages"]) => void;
+  copyServerState: (messages: ChatMessagesByRoomIdResponse["messages"]) => void;
   deleteMessage: (messageId: MessageType["messageId"]) => void;
   editMessage: (message: MessageType) => void;
 };
@@ -71,7 +71,7 @@ export const ChatMessagesProvider = ({ children }: { children: React.ReactNode }
     dispatch({ type: actionTypes.ADD_MESSAGE, payload: message });
   }, []);
 
-  const copyServerState = useCallback((messages: ChatMessagesByRoomIdData["messages"]) => {
+  const copyServerState = useCallback((messages: ChatMessagesByRoomIdResponse["messages"]) => {
     dispatch({ type: actionTypes.COPY_SERVER_STATE, payload: messages });
   }, []);