Fix: ai의 json형식말고 text형식으로 넣기, 프롬프트 수정, 모달 absolute -> fixed로 변경

src/app/api/generate/description/route.ts

@@ -11,10 +11,7 @@ const openai = new OpenAIApi(config);
 export const runtime = 'edge';
 
 export async function POST(req: Request): Promise<Response> {
-  if (
-    process.env.KV_REST_API_URL &&
-    process.env.KV_REST_API_TOKEN
-  ) {
+  if (process.env.KV_REST_API_URL && process.env.KV_REST_API_TOKEN) {
     const ip = req.headers.get('x-forwarded-for');
     console.log(ip);
     const ratelimit = new Ratelimit({
@@ -43,10 +40,10 @@ export async function POST(req: Request): Promise<Response> {
     messages: [
       {
         role: 'system',
-        content:
-        `You are a summary helper who summarizes the text. 
-        The input value is a complex form of JSON, and you summarize the value of the "text" key. 
+        content: `You are a summary helper who summarizes the text. 
+        The input value inclues title and contents. 
         The output format follows the tone of the text and outputs it in two sentences in Korean. 
+        If the input value contains the newline letter \n, don't bring it to the output value
         You don't answer except for two sentences that are summarized.`,
       },
       {

src/app/api/generate/tags/route.ts

@@ -11,10 +11,7 @@ const openai = new OpenAIApi(config);
 export const runtime = 'edge';
 
 export async function POST(req: Request): Promise<Response> {
-  if (
-    process.env.KV_REST_API_URL &&
-    process.env.KV_REST_API_TOKEN
-  ) {
+  if (process.env.KV_REST_API_URL && process.env.KV_REST_API_TOKEN) {
     const ip = req.headers.get('x-forwarded-for');
     console.log(ip);
     const ratelimit = new Ratelimit({
@@ -43,14 +40,13 @@ export async function POST(req: Request): Promise<Response> {
     messages: [
       {
         role: 'system',
-        content:
-          `Your task is to extract two of the most important software-related keywords in the article. 
-          The input value is a complex form of JSON, and you only focus on the value of the "text" key. 
+        content: `Your task is to extract two of the most important software-related keywords in the article. 
+          The input value inclues title and contents. 
           The output format is a JavaScript array containing strings, except for two special characters. 
           You don't answer except for the keyword arrangement.
           -------------------------
           The example input form is as follows.
-          {"type": "doc", "content": [{"type": "paragraph"}, {"type": "heading", "attrs": {"level": 2}, "content": [{"text": "톱레벨 클래스는 한 파일에 하나만 담으라", "type": "text"}]}, {"type": "paragraph"}, {"type": "paragraph", "content": [{"text": "한 파일에 클래스를 여러 개 선언하면,", "type": "text"}]}, {"type": "bulletList", "attrs": {"tight": true}, "content": [{"type": "listItem", "content": [{"type": "paragraph", "content": [{"text": "소스 파일이 컴파일 되는 순서에 따라 동작이 다를 수 있다.", "type": "text"}]}]}, {"type": "listItem", "content": [{"type": "paragraph", "content": [{"text": "예시:", "type": "text"}]}, {"type": "codeBlock", "attrs": {"language": "java"}, "content": [{"text": "// 파일: MyClass.java\n\npublic class MyClass {\n    // 클래스 내용\n}\n\npublic class AnotherClass {\n    // 다른 클래스 내용\n}", "type": "text"}]}, {"type": "paragraph", "content": [{"text": " 위와 같은 파일이 있을 때, ", "type": "text"}, {"text": "AnotherClass.java", "type": "text", "marks": [{"type": "link", "attrs": {"href": "http://AnotherClass.java", "class": "text-stone-400 underline underline-offset-[3px] hover:text-stone-600 transition-colors cursor-pointer", "target": "_blank"}}]}, {"text": " 파일을 만들어 또 다른 클래스를 정의한다면 예상치 못한 동작이 발생한다.", "type": "text"}]}]}]}, {"type": "paragraph"}, {"type": "paragraph", "content": [{"text": "따라서 톱레벨 클래스는 한 파일에 하나만 만들자.", "type": "text", "marks": [{"type": "bold"}]}]}, {"type": "paragraph", "content": [{"text": "굳이 여러 클래스를 하나의 파일에 담고 싶다면 정적 멤버 클래스를 활용하자.", "type": "text", "marks": [{"type": "bold"}]}]}, {"type": "paragraph"}]}
+          title : ..., contents : ...
           -------------------------
           The sample output form is as follows.
           ["Nextjs", "자바"]`,

src/components/create/memo/CreateMemoModal.tsx

@@ -62,7 +62,7 @@ export default function CreateMemoModal({
   };
 
   return (
-    <div className="absolute top-0 left-0 w-screen h-screen bg-white">
+    <div className="fixed top-0 left-0 w-screen h-screen bg-white">
       <div
         className="fixed flex flex-col sm:shadow-lg bg-white rounded-2xl p-4 sm:p-10 
 sm:top-1/2 sm:left-1/2 sm:transform sm:-translate-x-1/2 mt-10 sm:mt-0 sm:-translate-y-1/2 w-full sm:w-[750px] sm:min-h-[400px] h-full sm:h-auto overflow-y-auto"

src/components/create/memo/EditorForm.tsx

@@ -380,7 +380,8 @@ export default function EditorForm({ userId }: Props) {
       return;
     }
 
-    const text = JSON.stringify(editor?.getJSON());
+    const text = `title : ${title}, contents : ${getDescription(memoText)}`;
+
     await descriptionAI.complete(text);
     await tagsAI.complete(text);
     editor?.setOptions({ editable: false });
@@ -455,7 +456,7 @@ export default function EditorForm({ userId }: Props) {
         </div>
         {generateAI.isLoading && <FakeEditor editor={fakeEditor} />}
         {(descriptionAI.isLoading || tagsAI.isLoading) && (
-          <div className="absolute f top-0 left-0 w-screen h-screen flex flex-col justify-center items-center bg-white opacity-90">
+          <div className="fixed top-0 left-0 w-screen h-screen flex flex-col justify-center items-center bg-white opacity-90">
             <RingLoader className="self-center" color="#4992FF" />
             <div className="text-center font-medium text-soma-grey-60 text-sm my-5">
               AI가 description, tags를 자동생성중입니다...