Merge branch 'main' of https://github.com/Nexters/DDD-web into feat/#15

Author: Jxxunnn

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

@@ -4,12 +4,6 @@ import { NextResponse } from "next/server";
 export async function POST() {
   const mockData: CreateChatRoomResponse = {
     roomId: 1,
-    message: {
-      messageId: 1,
-      type: "SYSTEM_NORMAL",
-      sender: "SYSTEM",
-      answer: ["안녕이다냥?"],
-    },
   };
 
   return NextResponse.json({ data: mockData });

src/app/api/v1/tarot/question/recommends/route.ts

@@ -3,22 +3,27 @@ import { NextResponse } from "next/server";
 
 export async function GET() {
   const mockData: TarotQuestionRecommendListResponse = {
-    question: [
+    questions: [
       {
         recommendQuestionId: 1,
         question: "썸남 썸녀랑 잘 될까?",
         referenceCount: 1,
       },
       {
         recommendQuestionId: 2,
-        question: "상반기에 취업할 수 있을까?",
+        question: "상반기에 취업할 수 있을까? 상반기에 취업할 수 있을까? 상반기에 취업할 수 있을까?",
         referenceCount: 222,
       },
       {
         recommendQuestionId: 3,
         question: "그 사람은 내 생각하고 있을까?",
         referenceCount: 3333,
       },
+      {
+        recommendQuestionId: 4,
+        question: "그 사람은 내 생각하고 있을까?",
+        referenceCount: 3334,
+      },
     ],
   };
 

src/app/page.tsx

@@ -1,11 +1,18 @@
-import HeaderContent from "@/shared/components/HeaderContent";
-import MainContent from "@/shared/components/MainContent";
+import ChatOverview from "@/chat/components/ChatOverview";
+import { getTarotQuestionRecommends } from "@/tarot/apis/getTarotQuestionRecommends";
+import { dehydrate, HydrationBoundary, QueryClient } from "@tanstack/react-query";
+
+export default async function HomePage() {
+  const queryClient = new QueryClient();
+
+  await queryClient.prefetchQuery({
+    queryKey: ["tarotQuestionRecommends"],
+    queryFn: getTarotQuestionRecommends,
+  });
 
-export default function HomePage() {
   return (
-    <>
-      <HeaderContent>{null}</HeaderContent>
-      <MainContent>{null}</MainContent>
-    </>
+    <HydrationBoundary state={dehydrate(queryClient)}>
+      <ChatOverview />
+    </HydrationBoundary>
   );
 }

src/chat/apis/createChatRoom.ts

@@ -1,26 +1,12 @@
 import apiClient from "@/shared/lib/axios/apiClient";
 import { z } from "zod";
-import { MessageCategorySchema } from "../models/messageCategory";
-import { MessageSenderTypeSchema } from "../models/messageSender";
 
 export type CreateChatRoomResponse = {
   roomId: number;
-  message: {
-    messageId: number;
-    type: string;
-    sender: string;
-    answer: string[];
-  };
 };
 
 const schema = z.object({
   roomId: z.number(),
-  message: z.object({
-    messageId: z.number(),
-    type: z.literal(MessageCategorySchema.Enum.SYSTEM_NORMAL_REPLY),
-    sender: z.literal(MessageSenderTypeSchema.Enum.SYSTEM),
-    answer: z.array(z.string()),
-  }),
 });
 
 type CreateChatRoomData = z.infer<typeof schema>;
@@ -32,12 +18,10 @@ const validate = (data: CreateChatRoomResponse): CreateChatRoomData => {
 
 export const createChatRoom = () => {
   return apiClient
-    .post<CreateChatRoomResponse>(
-      `${process.env.NEXT_PUBLIC_API_BASE_URL}/api/v1/chat/room`,
-    )
+    .post<CreateChatRoomResponse>(`${process.env.NEXT_PUBLIC_API_BASE_URL}/api/v1/chat/room`)
     .then((res) => validate(res.data))
     .catch((error) => {
       console.error(error);
-      return undefined;
+      throw error;
     });
 };

src/chat/apis/getChatMessagesByRoomId.ts

@@ -50,6 +50,6 @@ export const getChatMessagesByRoomId = (roomId: number) => {
     .then((res) => validate(res.data))
     .catch((error) => {
       console.error(error);
-      return undefined;
+      throw error;
     });
 };

src/chat/apis/sendChatMessage.ts

@@ -46,6 +46,6 @@ export const sendChatMessage = (request: SendChatMessageRequest) => {
     .then((res) => validate(res.data))
     .catch((error) => {
       console.error(error);
-      return undefined;
+      throw error;
     });
 };

src/chat/components/ChatOverview/index.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import QuickQuestionPickerBox from '@/chat/components/QuickQuestionPickerBox';
+import MainContent from '@/shared/components/MainContent';
+import { css } from 'styled-components';
+
+export default function ChatOverview() {
+  return (
+    <MainContent>
+      <h1
+        css={css`
+          margin-top: 170px;
+          text-align: center;
+          ${(props) => props.theme.fonts.headline2}
+        `}
+      >
+        AI 타로 술사, 타로냥에게
+        <br /> 무엇이든 물어봐라냥
+      </h1>
+      <div
+        css={css`
+          margin-top: 32px;
+        `}
+      >
+        <QuickQuestionPickerBox />
+      </div>
+    </MainContent>
+  );
+}

src/chat/components/QuickQuestionPicker/index.tsx

@@ -0,0 +1,70 @@
+import { ColorsTypes } from '@/shared/lib/styledComponents/theme';
+import { css, useTheme } from 'styled-components';
+type Props = {
+  question: string;
+  onClick: () => void;
+  selectedCount: number;
+  color: keyof Pick<ColorsTypes, 'primary03' | 'primary01' | 'grey10' | 'grey60'>;
+};
+
+export default function QuickQuestionPicker({ question, onClick, selectedCount, color }: Props) {
+  const theme = useTheme();
+  const formattedSelectedCount = selectedCount.toLocaleString();
+
+  const componentTheme = (() => {
+    switch (color) {
+      case 'primary03':
+      case 'grey60':
+        return {
+          backgroundColor: theme.colors[color],
+          titleColor: theme.colors.white,
+          captionColor: theme.colors.grey10,
+        };
+      case 'primary01':
+      case 'grey10':
+        return {
+          backgroundColor: theme.colors[color],
+          titleColor: theme.colors.grey70,
+          captionColor: theme.colors.grey60,
+        };
+
+      default:
+        const _exhausted: never = color;
+        throw new Error(`처리되지 않은 색상 타입입니다. ${_exhausted}`);
+    }
+  })();
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      css={css`
+        min-height: 94px;
+        padding: 8px 12px;
+        border: none;
+        border-radius: 8px;
+        background-color: ${componentTheme.backgroundColor};
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        text-align: left;
+        cursor: pointer;
+      `}
+    >
+      <p
+        css={css`
+          ${theme.fonts.subHead3}
+          color: ${componentTheme.titleColor};
+        `}
+      >
+        {question}
+      </p>
+      <p
+        css={css`
+          ${theme.fonts.caption}
+          color: ${componentTheme.captionColor};
+        `}
+      >{`${formattedSelectedCount}명이 질문 중`}</p>
+    </button>
+  );
+}

src/chat/components/QuickQuestionPickerBox/index.tsx

@@ -0,0 +1,77 @@
+import { createUserKeyCookie } from '@/auth/utils/createUserKeyCookie';
+import { useCreateChatRoom } from '@/chat/hooks/useCreateChatRoom';
+import { useSendChatMessage } from '@/chat/hooks/useSendChatMesasge';
+import { TarotQuestionRecommendListData } from '@/tarot/apis/getTarotQuestionRecommends';
+import { useTarotQuestionRecommends } from '@/tarot/hooks/useTarotQuestionRecommends';
+import { useRouter } from 'next/navigation';
+import { css } from 'styled-components';
+import QuickQuestionPicker from '../QuickQuestionPicker';
+import RefreshQuickQuestionButton from '../RefreshQuickQuestionButton';
+
+export default function QuickQuestionPickerBox() {
+  const { data } = useTarotQuestionRecommends();
+  const { mutate: createChatRoom } = useCreateChatRoom();
+  const { mutateAsync: sendChatMessage } = useSendChatMessage();
+  const router = useRouter();
+
+  if (!data) return null;
+
+  const adaptQuestionRecommends = (data: TarotQuestionRecommendListData) => {
+    const colors = ['primary03', 'grey10', 'primary01', 'grey60'] as const;
+    return data.questions.map((question, i) => ({
+      ...question,
+      color: colors[i],
+      onClick: async () => {
+        await createUserKeyCookie();
+        createChatRoom(undefined, {
+          onSuccess: (data) => {
+            sendChatMessage(
+              {
+                roomId: data.roomId,
+                message: question.question,
+                intent: 'RECOMMEND_QUESTION',
+                referenceQuestionId: question.recommendQuestionId,
+              },
+              {
+                onSuccess: () => {
+                  router.push(`/chats/${data.roomId}`);
+                },
+              }
+            );
+          },
+        });
+      },
+    }));
+  };
+
+  return (
+    <div>
+      <div
+        css={css`
+          display: grid;
+          grid-template-columns: repeat(2, 1fr);
+          grid-template-rows: repeat(2, 1fr);
+          gap: 8px;
+        `}
+      >
+        {adaptQuestionRecommends(data).map((question) => (
+          <QuickQuestionPicker
+            key={question.recommendQuestionId}
+            question={question.question}
+            onClick={question.onClick}
+            selectedCount={question.referenceCount}
+            color={question.color}
+          />
+        ))}
+      </div>
+      <div
+        css={css`
+          width: fit-content;
+          margin: 12px auto 0;
+        `}
+      >
+        <RefreshQuickQuestionButton />
+      </div>
+    </div>
+  );
+}

src/chat/components/RefreshQuickQuestionButton/index.tsx

@@ -0,0 +1,33 @@
+import { useQueryClient } from '@tanstack/react-query';
+import { css } from 'styled-components';
+
+export default function RefreshQuickQuestionButton() {
+  const queryClient = useQueryClient();
+
+  const handleClick = () => {
+    queryClient.invalidateQueries({ queryKey: ['tarotQuestionRecommends'] });
+  };
+
+  return (
+    <button
+      type="button"
+      onClick={handleClick}
+      css={css`
+        padding: 5px 8px;
+        border: none;
+        background-color: transparent;
+        color: ${(props) => props.theme.colors.grey60};
+        cursor: pointer;
+      `}
+    >
+      <span
+        css={css`
+          ${(props) => props.theme.fonts.body1};
+        `}
+      >
+        추천 질문 변경
+      </span>
+      {/* TODO: 아이콘 추가 */}
+    </button>
+  );
+}