userPromptレイアウトの作成とapiリクエスト関数の生成

__tests__/api/prompt/getMessage.test.ts

@@ -0,0 +1,37 @@
+import getMessage from '@/src/api/prompts/getMessage';
+import {StorageMessage} from '@/src/interfaces/prompt';
+import req from '@/src/api/apiUtils';
+
+jest.mock('@/src/api/apiUtils');
+
+describe('getMessage function', () => {
+  it('should return messages', async () => {
+    const mockMessages: StorageMessage[] = [
+      {
+        id: '1',
+        answer: 'Test answer 1',
+        question: 'Test question 1',
+      },
+      {
+        id: '2',
+        answer: 'Test answer 2',
+        question: 'Test question 2',
+      },
+    ];
+
+    (req as jest.Mock).mockResolvedValue({
+      data: {
+        messages: mockMessages,
+      },
+    });
+
+    const result = await getMessage(1, 1, 1, 2);
+    expect(result).toEqual(mockMessages);
+  });
+
+  it('should throw an error if the request fails', async () => {
+    (req as jest.Mock).mockRejectedValue(new Error('Request failed'));
+
+    await expect(getMessage(1, 1, 1, 2)).rejects.toThrow('Request failed');
+  });
+});

__tests__/api/prompt/getPrompt.test.ts

@@ -0,0 +1,20 @@
+import getPrompt from '@/src/api/prompts/getPrompt';
+import req from '@/src/api/apiUtils';
+
+jest.mock('@/src/api/apiUtils');
+
+describe('getPrompt', () => {
+  it('should call the correct endpoint and return data', async () => {
+    const mockData = {message: 'test'};
+    (req as jest.Mock).mockResolvedValue({data: mockData});
+
+    const result = await getPrompt(1, 2, 3, 4);
+
+    expect(req).toHaveBeenCalledWith(
+      '/class/1/prompts/2?page=3&limit=4',
+      'get',
+      'nest'
+    );
+    expect(result).toEqual(mockData);
+  });
+});

__tests__/api/prompt/patchMessage.test.ts

@@ -0,0 +1,20 @@
+import patchMessage from '@/src/api/prompts/patchMessage';
+import req from '@/src/api/apiUtils';
+
+jest.mock('@/src/api/apiUtils');
+
+describe('patchMessage', () => {
+  it('should call the correct endpoint and return response', async () => {
+    const mockResponse = {status: 200};
+    (req as jest.Mock).mockResolvedValue(mockResponse);
+
+    const result = await patchMessage(1, 2, 3, true);
+
+    expect(req).toHaveBeenCalledWith(
+      '/class/1/prompts/2/messages/3?is_save=true',
+      'patch',
+      'nest'
+    );
+    expect(result).toEqual(mockResponse);
+  });
+});

__tests__/api/prompt/postPrompt.test.ts

@@ -0,0 +1,19 @@
+import postPrompt from '@/src/api/prompts/postPrompt';
+import req from '@/src/api/apiUtils';
+
+jest.mock('@/src/api/apiUtils');
+
+describe('postPrompt', () => {
+  it('should call the correct endpoint with the correct body and return response', async () => {
+    const mockResponse = {status: 200};
+    (req as jest.Mock).mockResolvedValue(mockResponse);
+
+    const message = 'test message';
+    const result = await postPrompt(1, 2, message);
+
+    expect(req).toHaveBeenCalledWith('/class/1/prompts/2', 'post', 'nest', {
+      message,
+    });
+    expect(result).toEqual(mockResponse);
+  });
+});

public/svgs/prompt/index.ts

@@ -0,0 +1,6 @@
+const icons = {
+  delete: '/svgs/prompt/delete.svg',
+  drive: '/svgs/prompt/drive.svg',
+};
+
+export default icons;

src/api/prompts/getMessage.ts

@@ -0,0 +1,21 @@
+import {StorageMessage} from '@/src/interfaces/prompt';
+import req from '../apiUtils';
+
+const getMessage = async (
+  cId: number,
+  id: number,
+  pageNumber: number,
+  limitNumber: number
+): Promise<StorageMessage[]> => {
+  const response = await req(
+    `/class/${cId}/prompts/${id}/messages/saved?page=${pageNumber}&limit=${limitNumber}`,
+    'get',
+    'nest'
+  );
+
+  console.log(response);
+
+  return response.data.messages;
+};
+
+export default getMessage;

src/api/prompts/getPrompt.ts

@@ -0,0 +1,21 @@
+import req from '../apiUtils';
+import {PromptMessages} from '@/src/interfaces/prompt';
+
+const getPrompt = async (
+  cId: number,
+  id: number,
+  pageNumber: number,
+  limitNumber: number
+): Promise<PromptMessages> => {
+  const response = await req(
+    `/class/${cId}/prompts/${id}?page=${pageNumber}&limit=${limitNumber}`,
+    'get',
+    'nest'
+  );
+
+  console.log(response);
+
+  return response.data;
+};
+
+export default getPrompt;

src/api/prompts/patchMessage.ts

@@ -0,0 +1,20 @@
+import req from '../apiUtils';
+
+const patchMessage = async (
+  cId: number,
+  id: number,
+  mId: number,
+  isSave: boolean
+) => {
+  const response = await req(
+    `/class/${cId}/prompts/${id}/messages/${mId}?is_save=${isSave}`,
+    'patch',
+    'nest'
+  );
+
+  console.log(response);
+
+  return response;
+};
+
+export default patchMessage;

src/api/prompts/postPrompt.ts

@@ -0,0 +1,19 @@
+import req from '../apiUtils';
+
+const postPrompt = async (cId: number, id: number, message: string) => {
+  const body = {
+    message: message,
+  };
+  const response = await req(
+    `/class/${cId}/prompts/${id}`,
+    'post',
+    'nest',
+    body
+  );
+
+  console.log(response);
+
+  return response;
+};
+
+export default postPrompt;

src/app/[className]/[materialName]/components/Quiz.tsx

@@ -0,0 +1,56 @@
+'use client';
+import {useState} from 'react';
+
+const Quiz = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const toggleDropdown = () => {
+    setIsOpen(!isOpen);
+  };
+  return (
+    <>
+      <div className="py-4">
+        <div className="text-lg font-medium p-1">Question</div>
+        <div className="border-2 p-5 rounded-lg leading-8">Question</div>
+      </div>
+      <div className="h-4"></div>
+      <div className="">
+        <div className="flex justify-between items-center relative py-1">
+          <div className="font-medium px-1">Answer</div>
+          <div className="">
+            <button
+              className="border-2 p-2 rounded-lg bg-gray-100 text-sm"
+              onClick={toggleDropdown}
+            >
+              View commentary
+            </button>
+            {isOpen ? (
+              <div className="absolute top-12 right-0 bg-gray-100 w-full p-5 border-2  rounded-lg leading-8 drop-shadow-md">
+                <div className="font-semibold">
+                  Correct Answer: <span className="text-red-500 ">A</span>
+                </div>
+                <div className="font-medium pt-2">haesul</div>
+              </div>
+            ) : null}
+          </div>
+        </div>
+        <ul>
+          <li className="py-2">
+            <div className="w-full border-2 p-5 rounded-lg text-m">A.</div>
+          </li>
+          <li className="py-2">
+            <div className="w-full border-2 p-5 rounded-lg text-m">B.</div>
+          </li>
+          <li className="py-2">
+            <div className="w-full border-2 p-5 rounded-lg text-m">C.</div>
+          </li>
+          <li className="py-2">
+            <div className="w-full border-2 p-5 rounded-lg text-m">D.</div>
+          </li>
+        </ul>
+      </div>
+    </>
+  );
+};
+
+export default Quiz;

src/app/[className]/[materialName]/components/UserContainer.tsx

@@ -0,0 +1,26 @@
+'use client';
+import {useState} from 'react';
+import {Dashboard, TabsMapping} from '@/src/components/dashboard';
+// import Material from './Material';
+import Quiz from './Quiz';
+
+const UserContainer = () => {
+  const TABS = ['Material', 'Quiz'];
+  const [activeTab, setActiveTab] = useState(TABS[0]);
+  const tabMapping = {
+    // Material: <Material />,
+    Quiz: <Quiz />,
+  };
+  return (
+    <div className="w-full">
+      <Dashboard
+        activeTab={activeTab}
+        setActiveTab={setActiveTab}
+        tabs={TABS}
+      />
+      <TabsMapping activeTab={activeTab} tabMapping={tabMapping} />
+    </div>
+  );
+};
+
+export default UserContainer;

src/app/[className]/[materialName]/components/index.ts

@@ -0,0 +1,5 @@
+// import ManageContainer from './ManageContainer';
+import UserContainer from './UserContainer';
+
+// export {ManageContainer, UserContainer};
+export {UserContainer};

src/app/[className]/[materialName]/components/subComponents/PromptChat.tsx

@@ -0,0 +1,57 @@
+import {useEffect, useState} from 'react';
+import Image from 'next/image';
+import getPrompt from '@/src/api/prompts/getPrompt';
+import patchMessage from '@/src/api/prompts/patchMessage';
+import {PromptMessagesProps} from '@/src/interfaces/prompt';
+import icons from '@/public/svgs/prompt';
+
+const PromptChat = () => {
+  const [messages, setMsg] = useState<PromptMessagesProps[]>();
+
+  useEffect(() => {
+    getPrompt(1, 1, 1, 6).then(res => {
+      res.messages.reverse();
+      setMsg(res.messages);
+    });
+  }, []);
+
+  const handleClickIcon = (mId: number) => {
+    patchMessage(1, 1, mId, true).then(res => {
+      console.log(res);
+    });
+  };
+
+  return (
+    <div className="h-full">
+      {messages?.map((message, index) => {
+        return (
+          <div key={index}>
+            <div className="pb-5 flex justify-end">
+              <div className="w-5/6 bg-gray-300 p-5 rounded-l-lg rounded-tr-lg">
+                {message.question}
+              </div>
+            </div>
+            <div className="pb-5 flex justify-start items-end">
+              <div className="w-5/6 bg-blue-300 p-5 rounded-r-lg rounded-tl-lg">
+                {message.answer}
+              </div>
+              <div className="px-2">
+                <Image
+                  src={icons.drive}
+                  width={25}
+                  height={25}
+                  alt="icon"
+                  onClick={() => {
+                    handleClickIcon(parseInt(message.id));
+                  }}
+                />
+              </div>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default PromptChat;