Merge pull request #26 from Nexters/feat/#22

[Feat/#22] 인덱스 페이지 구현

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>;

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>
+  );
+}

src/shared/lib/reactQuery/ReactQueryClientProvider.tsx

@@ -1,10 +1,31 @@
 'use client';
 
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { isServer, QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactNode } from 'react';
 
-const queryClient = new QueryClient();
+function makeQueryClient() {
+  return new QueryClient({
+    defaultOptions: {
+      queries: {
+        staleTime: 60 * 1000,
+      },
+    },
+  });
+}
+
+let browserQueryClient: QueryClient | undefined = undefined;
+
+function getQueryClient() {
+  if (isServer) {
+    return makeQueryClient();
+  } else {
+    if (!browserQueryClient) browserQueryClient = makeQueryClient();
+    return browserQueryClient;
+  }
+}
 
 export default function ReactQueryClientProvider({ children }: { children: ReactNode }) {
+  const queryClient = getQueryClient();
+
   return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
 }

src/tarot/apis/getTarotQuestionRecommends.ts

@@ -2,15 +2,15 @@ import apiClient from '@/shared/lib/axios/apiClient';
 import { z } from 'zod';
 
 export type TarotQuestionRecommendListResponse = {
-  question: {
+  questions: {
     recommendQuestionId: number;
     question: string;
     referenceCount: number;
   }[];
 };
 
 const schema = z.object({
-  question: z.array(
+  questions: z.array(
     z.object({
       recommendQuestionId: z.number(),
       question: z.string(),
@@ -19,7 +19,7 @@ const schema = z.object({
   ),
 });
 
-type TarotQuestionRecommendListData = z.infer<typeof schema>;
+export type TarotQuestionRecommendListData = z.infer<typeof schema>;
 
 const validate = (data: TarotQuestionRecommendListResponse): TarotQuestionRecommendListData => {
   const validatedData = schema.parse(data);