문의하기 페이지 제작

app/(home)/page.tsx

@@ -1 +1 @@
-export { default } from '@/pages/coming-soon';
+export { default } from '@/pages/landing';

app/support/assist/page.tsx

@@ -1 +1 @@
-export { default } from '@/pages/coming-soon';
+export { default } from '@/pages/support';

app/support/request/page.tsx

@@ -1 +1 @@
-export { default } from '@/pages/coming-soon';
+export { default } from '@/pages/support';

next.config.mjs

@@ -9,9 +9,16 @@ const nextConfig = {
           source: '/client/:path*',
           destination: `${process.env.NEXT_PUBLIC_API_BASE_URL}/:path*`,
         },
+        {
+          source: '/filtering/:path*',
+          destination: `${process.env.NEXT_PUBLIC_FILTERING_API_BASE_URL}/:path*`,
+        },
       ];
     },
   }),
+  compiler: {
+    removeConsole: process.env.NODE_ENV === 'production',
+  },
   images: {
     remotePatterns: [
       {

src/app/layouts/default.tsx

@@ -11,7 +11,7 @@ interface Props {
 const Layout: FC<Props> = ({ children }) => {
   return (
     <AuthProvider>
-      <Header />
+      <Header isFixed />
       <main>{children}</main>
     </AuthProvider>
   );

src/app/styles/globals.css

@@ -5,17 +5,18 @@
 @tailwind utilities;
 
 @layer base {
-    html {
-        font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
-    }
+  html {
+    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
+    scrollbar-width: thin;
+  }
 
-    body {
-        @apply tracking-tight overflow-x-hidden;
-    }
+  body {
+    @apply tracking-tight overflow-x-hidden;
+  }
 }
 
 @layer components {
-    .wrapper {
-        @apply max-w-screen-xl mx-auto px-5 md:max-xl:px-7;
-    }
+  .wrapper {
+    @apply max-w-screen-xl mx-auto px-5 md:px-7 lg:px-10;
+  }
 }

src/entities/chatting-room/index.ts

@@ -0,0 +1 @@
+export { ChattingRoomProvider, useChattingRoomStore } from './store';

src/entities/chatting-room/lib.ts

@@ -0,0 +1,36 @@
+import { addParsedTime } from '@/entities/message';
+
+const getCounterpart = (
+  chattingRoom: ChattingRoom.RawData,
+  currentMemberId?: MemberId,
+) => {
+  if (chattingRoom.channelType === 'group' || !currentMemberId) {
+    return undefined;
+  }
+  return chattingRoom.userList.find((id) => id !== currentMemberId);
+};
+
+export const getChattingRoomMap = ({
+  chattingRooms,
+  memberId,
+}: {
+  chattingRooms?: ChattingRoom.RawData[];
+  memberId?: MemberId;
+}) => {
+  if (!chattingRooms) {
+    return {};
+  }
+
+  return Object.fromEntries(
+    chattingRooms.map((room) => {
+      return [
+        room.roomId,
+        {
+          ...room,
+          lastMessage: addParsedTime(room.lastMessage),
+          counterpart: getCounterpart(room, memberId),
+        },
+      ];
+    }),
+  );
+};

src/pages/chat/store/chatting-room.tsx → src/entities/chatting-room/store.tsx

@@ -5,12 +5,10 @@ import { useStore } from 'zustand';
 import { createStore } from 'zustand/vanilla';
 
 import { useMemberStore } from '@/entities/member';
-import { addParsedTime } from '@/entities/message';
 
-import { getCounterpart } from '../lib';
+import { getChattingRoomMap } from './lib';
 
 type RoomId = ChattingRoom['roomId'];
-type MemberId = Member['uuid'];
 
 interface State {
   chattingRoomMap: Record<RoomId, ChattingRoom>;
@@ -55,25 +53,15 @@ const ChattingRoomContext = createContext<ChattingRoomStoreApi | null>(null);
 
 export const ChattingRoomProvider: FC<{
   children: ReactNode;
-  chattingRooms: ChattingRoom.RawData[];
+  chattingRooms?: ChattingRoom.RawData[];
   chattingMemberMap: Record<MemberId, Member>;
 }> = ({ children, chattingRooms, chattingMemberMap }) => {
   const storeRef = useRef<ChattingRoomStoreApi | null>(null);
   const memberId = useMemberStore((state) => state.member?.uuid);
 
   if (storeRef.current === null) {
-    const chattingRoomMap = Object.fromEntries(
-      chattingRooms.map((room) => {
-        return [
-          room.roomId,
-          {
-            ...room,
-            lastMessage: addParsedTime(room.lastMessage),
-            counterpart: getCounterpart(room, memberId),
-          },
-        ];
-      }),
-    );
+    const chattingRoomMap = getChattingRoomMap({ chattingRooms, memberId });
+
     storeRef.current = createChattingRoomStore({
       chattingRoomMap,
       chattingMemberMap,

src/features/messages/index.ts

@@ -0,0 +1 @@
+export { default as Messages } from './ui/messages';

src/widgets/chatting/ui/message.tsx → src/features/messages/ui/message.tsx

@@ -1,11 +1,14 @@
+import { usePathname } from 'next/navigation';
 import { memo } from 'react';
 
+import { useChattingRoomStore } from '@/entities/chatting-room';
 import { useMemberStore } from '@/entities/member';
 import {
   MessageNotice,
   MessageReceived,
   MessageSent,
 } from '@/entities/message';
+import { TUTORIAL_CHAT_MEMBER_ID } from '@/shared/config';
 
 const evaluateIsFirst = (message: Message.Common, prevMessage?: Message) => {
   if (!prevMessage || prevMessage.type === 'NoticeMessage') {
@@ -24,12 +27,26 @@ const evaluateIsLast = (message: Message.Common, nextMessage?: Message) => {
   );
 };
 
+const useMemberId = () => {
+  const memberId = useMemberStore((state) => state.member?.uuid);
+
+  const pathname = usePathname();
+  if (pathname === '/') {
+    return TUTORIAL_CHAT_MEMBER_ID.user;
+  }
+
+  return memberId;
+};
+
 const Message = memo<{
   message: Message;
-  prevMessage?: Message;
-  nextMessage?: Message;
+  prevMessage: Message | undefined;
+  nextMessage: Message | undefined;
 }>(({ message, prevMessage, nextMessage }) => {
-  const currentMemberId = useMemberStore((state) => state.member?.uuid);
+  const currentMemberId = useMemberId();
+  const chattingMemberMap = useChattingRoomStore(
+    (state) => state.chattingMemberMap,
+  );
 
   if (message.type === 'NoticeMessage') {
     const text = message.content; // TODO: 테스트 필요
@@ -50,8 +67,7 @@ const Message = memo<{
     );
   }
 
-  // TODO: senderId를 통해서 유저 정보를 가져와야 함
-  const sender = { nickname: '테스트', profileLink: null };
+  const sender = chattingMemberMap[message.senderId];
 
   return (
     <MessageReceived

src/features/messages/ui/messages.tsx

@@ -0,0 +1,18 @@
+import Message from './message';
+
+interface Props {
+  messages: Message[];
+}
+
+const Messages = ({ messages }: Props) => {
+  return messages.map((message, index) => (
+    <Message
+      key={message.messageId}
+      message={message}
+      prevMessage={messages[index - 1]}
+      nextMessage={messages[index + 1]}
+    />
+  ));
+};
+
+export default Messages;

src/pages/chat/ui/chatting/list-item-nickname.tsx

@@ -1,6 +1,6 @@
 import { Skeleton } from '@heroui/react';
 
-import { useChattingRoomStore } from '../../store/chatting-room';
+import { useChattingRoomStore } from '@/entities/chatting-room';
 
 const Nickname: FC<{
   chattingRoom: ChattingRoom;

src/pages/chat/ui/chatting/list-item-preview.tsx

@@ -2,7 +2,7 @@
 
 import { Chip } from '@heroui/react';
 
-import { useChattingRoomStore } from '../../store/chatting-room';
+import { useChattingRoomStore } from '@/entities/chatting-room';
 
 const Preview: FC<{
   chattingRoomId: ChattingRoom['roomId'];

src/pages/chat/ui/chatting/list.tsx

@@ -1,9 +1,8 @@
 'use client';
 
+import { useChattingRoomStore } from '@/entities/chatting-room';
 import ChattingListItem from '@/pages/chat/ui/chatting/list-item';
 
-import { useChattingRoomStore } from '../../store/chatting-room';
-
 const compareDate = (a: ChattingRoom, b: ChattingRoom) => {
   if (a.lastMessage.createdDate > b.lastMessage.createdDate) {
     return -1;

src/pages/chat/ui/page.tsx

@@ -1,11 +1,11 @@
+import { ChattingRoomProvider } from '@/entities/chatting-room';
 import { WebsocketProvider as WebsocketConnector } from '@/features/websocket';
 import { requestChattingMemberMap } from '@/pages/chat/api/member';
 import { Chatting } from '@/widgets/chatting';
 import ServiceContent from '@/widgets/service-content';
 
 import { requestChattingList } from '../api/chatting';
 import { CHATTING_ACTION_KEY } from '../config';
-import { ChattingRoomProvider } from '../store/chatting-room';
 import ChattingList from './chatting/list';
 
 const ChattingPage = async () => {

src/pages/landing/api.ts

@@ -0,0 +1,25 @@
+'use client';
+
+import axios from 'axios';
+
+import { FILTERING_API_BASE_URL } from '@/shared/config';
+
+const baseURL =
+  process.env.NODE_ENV === 'development'
+    ? '/filtering'
+    : FILTERING_API_BASE_URL;
+
+const client = axios.create({
+  baseURL,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+});
+
+export const fetchFilteringPrediction = async (text: string) => {
+  return client.post('/predict', { text }).then((res) => {
+    const { prediction } = res.data;
+    console.debug('prediction:', prediction);
+    return prediction === 2;
+  });
+};

src/pages/landing/index.ts

@@ -0,0 +1 @@
+export { default } from './ui/page';

src/pages/landing/lib/tutorial-chatting.ts

@@ -0,0 +1,26 @@
+'use client';
+
+let id = 0;
+
+export const createMessage = (
+  content: string,
+  senderId: string,
+): Message.Common => {
+  const messageId = id++;
+  const date = new Date();
+  const createdDate = date.toISOString();
+  const time = date.toLocaleTimeString('ko-KR', {
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+
+  return {
+    type: 'Common',
+    content,
+    messageId,
+    createdDate,
+    time,
+    senderId,
+    filteredLevel: 0,
+  };
+};

src/pages/landing/ui/page.tsx

@@ -0,0 +1,15 @@
+import { Hero } from '@/shared/ui';
+
+import TutorialChatting from './tutorial-chatting/chatting';
+import TutorialChattingDescription from './tutorial-chatting/description';
+
+const LandingPage = () => {
+  return (
+    <Hero className='bg-sky-50/40' isFirst>
+      <TutorialChattingDescription />
+      <TutorialChatting />
+    </Hero>
+  );
+};
+
+export default LandingPage;

src/pages/landing/ui/tutorial-chatting/chatting-body.tsx

@@ -0,0 +1,50 @@
+'use client';
+
+import { CardBody, CardFooter } from '@heroui/react';
+import { useEffect, useRef, useState } from 'react';
+
+import { Messages } from '@/features/messages';
+import { TUTORIAL_CHAT_MEMBER_ID } from '@/shared/config';
+import { ChattingInput } from '@/widgets/chatting';
+
+import { fetchFilteringPrediction } from '../../api';
+import { createMessage } from '../../lib/tutorial-chatting';
+
+const TutorialChattingBody = () => {
+  const ref = useRef<HTMLDivElement>(null);
+  const [messages, setMessages] = useState<Message[]>([
+    createMessage('안녕하세요', TUTORIAL_CHAT_MEMBER_ID.ai),
+    createMessage('무엇을 도와드릴까요?', TUTORIAL_CHAT_MEMBER_ID.ai),
+  ]);
+
+  const handleSendMessage = (value: string) => {
+    fetchFilteringPrediction(value).then((filtered) => {
+      if (filtered) {
+        // TODO: 필터링된 메시지 추가
+      }
+      const message = createMessage(value, TUTORIAL_CHAT_MEMBER_ID.user);
+      setMessages((prev) => [...prev, message]);
+    });
+  };
+
+  useEffect(() => {
+    if (ref.current) {
+      ref.current.scrollTop = ref.current.scrollHeight;
+    }
+  }, [messages]);
+
+  return (
+    <>
+      <CardBody className='overflow-y-hidden p-0'>
+        <div ref={ref} className='overflow-y-auto px-1'>
+          <Messages messages={messages} />
+        </div>
+      </CardBody>
+      <CardFooter className='px-1 pb-2 pt-3'>
+        <ChattingInput onSendMessage={handleSendMessage} />
+      </CardFooter>
+    </>
+  );
+};
+
+export default TutorialChattingBody;