Dev (#125)

* fix: ui 버그 수정

* prompt 수정, console 제거 (#123)

* release 추가 (#124)

---------

Co-authored-by: 이재협 <zzok3312@naver.com>

.github/release-drafter.yml

@@ -0,0 +1,21 @@
+name: Release Drafter
+
+# Components of the release notes
+categories:
+  - title: '🚀 Features'
+    labels:
+      - 'feature'
+  - title: '🐛 Bug Fixes'
+    labels:
+      - 'bug'
+  - title: '🧹 Chores'
+    labels:
+      - 'chore'
+change-template: '- $TITLE @$AUTHOR (#$NUMBER)'
+version-template: 'v$NEXT_PATCH_VERSION'
+template: |
+  ## What's Changed
+
+  $CHANGES
+
+  **Full Changelog**: https://github.com/$REPO/compare/$PREVIOUS_TAG...$NEW_TAG

.github/workflows/release-drafter.yml

@@ -0,0 +1,22 @@
+name: Release Drafter
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    types: [closed]
+  release:
+    types: [published]
+
+jobs:
+  update_release_draft:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      - name: Update Release Drafter
+        uses: release-drafter/release-drafter@v5
+        with:
+          config-name: release-drafter.yml

package.json

@@ -68,6 +68,7 @@
     "axios": "^1.6.8",
     "bootstrap": "^5.3.3",
     "clsx": "^2.1.1",
+    "dayjs": "^1.11.11",
     "firebase": "^10.11.1",
     "openai": "^4.40.2",
     "openai-edge": "^1.2.2",

src/api/gpt.tsx

@@ -14,7 +14,17 @@ interface RepoData {
 }
 
 export const CallGPT = async (repoData: RepoData) => {
-  const { data, member, avatar_url, techStackList, packageManagerList, descriptionList, aboutRepo, githubRepo, openAiKey } = repoData;
+  const {
+    data,
+    member,
+    avatar_url,
+    techStackList,
+    packageManagerList,
+    descriptionList,
+    aboutRepo,
+    githubRepo,
+    openAiKey,
+  } = repoData;
 
   const prompt = `
       레포지토리의 이름: ${data.name}
@@ -41,46 +51,47 @@ export const CallGPT = async (repoData: RepoData) => {
       프로젝트에 대한 설명: ${descriptionList}
       ${aboutRepo.map(item => `${item.title}: ${item.value}`).join("\n")}
   
-      위의 값들은 github API를 이용해서 레포지토리의 정보를 가져온 것이고, 아래는 README 파일을 생성하는데 사용될 예시 템플릿입니다. 위의 정보들을 사용해 아래 각각의 섹션들에 해당하는 내용을 추가해서 README를 작성해주세요. 
+      위의 데이터들은 README 파일을 작성하려는 프로젝트에 대한 정보이고, 아래는 README 파일을 생성하는데 사용될 예시 템플릿입니다. 
+      위의 데이터를 사용해 아래 각각의 섹션들에 해당하는 내용을 예시와 같은 형태로 프로젝트에 맞게 README를 작성해주세요. 
       추가적으로 생략되는 섹션이 없도록 해주세요.
       "" 안에 들어있는 내용들을 각각의 섹션에 들어가야 할 내용을 설명해 놓은 것입니다.
-      ''안에 들어있는 내용은 예시입니다. 만약 해당 섹션에 추가할 내용을 가져올 수 없는 경우에는 예시와 똑같이 작성하지 말고 "직접 입력해주세요" 라는 문구를 넣어주세요.
+      ''안에 들어있는 내용은 어떻게 작성되어야 하는지에 대한 예시 내용입니다. 
+      만약 해당 섹션에 추가할 내용을 찾을 수 없는 경우에는 예시의 내용과 상관없이 "내용을 직접 입력해주세요" 라는 문구를 넣어주세요.
+      
+      여기부터 아래로는 README 파일을 작성하는데 사용될 예시 템플릿입니다.
   
-      "아래 이미지는 무조건 추가해줘"
+      "아래 이미지는 리드미 파일 맨위에 항상 추가해줘"
       
       ![프로젝트-로고나 메인화면-입력해주세요](https://github.com/Readme-Monster/readme-monster/assets/88364280/96e680e5-613f-4818-8603-8afbb0c9acb1)
       
-      "최근 커밋이나 업데이트에 해당하는 값을 아래와 같은 형식으로 가져와서 넣어주세요."
+      "최근 커밋이나 업데이트에 해당하는 값을 나타내주는 부분입니다. 아래와 같은 형식으로 데이터를 가져와서 넣어주세요."
   
       [![Commit Activity](https://img.shields.io/github/commit-activity/m/${githubRepo.slice(-2).join("/")})](https://github.com/${githubRepo.slice(-2).join("/")}/pulse)
   
-      # 레포지토리 이름
-  
-      "레포지토리에 대한 간략한 설명이 들어가는 위치입니다. 위의 프로젝트에 대한 설명 데이터를 이용해 작성해주세요. 해당하는 내용을 찾을 수 없는 경우 '직접 작성해주세요'라고 작성해주세요."
+      # 레포지토리의 이름
   
-      'Readme Monster는 GitHub 레포지토리의 Readme 파일을 자동으로 생성해주는 서비스입니다.'
+      "레포지토리에 대한 간략한 설명이 들어가는 위치입니다. 위에서 전달받은 프로젝트에 대한 설명 데이터와 레포지토리의 설명 데이터를 이용해 자연스럽게 작성해주세요. 해당 데이터가 없는 경우 '직접 작성해주세요'라고 작성해주세요."
   
       ## 링크
   
       "레포지토리에 관련된 링크들이 들어갈 위치입니다."
   
       '- [서비스 바로가기](배포되어있는 링크가 들어갈 위치)'
       '- [디자인](디자인 관련 링크가 들어갈 위치)'
-      '- [Wiki](위키 링크가 들어갈 위치)'
+      '- [Wiki](깃허브 위키탭의 링크가 들어갈 위치)'
   
       ## 기술 스택
   
-      "해당 레포지토리에서 사용된 기술 스택들이 들어갈 위치입니다. 위에서 가져온 정보중에 사용한 기술 스택에 해당하는 내용을 참고해서 작성해주세요"
-      "아래의 배지는 예시로 사용된 것이니, 직접 사용하실 때에는 해당 기술 스택에 맞는 배지를 사용해주세요."
+      "해당 레포지토리에서 사용된 기술 스택들이 들어갈 위치입니다. 위에서 전달받은 레포지토리의 프로그래밍 언어 데이터와 사용한 기술 스택 데이터를 모두 추가해서 작성해주세요"
+      "아래의 배지는 예시로 사용된 것이니, 직접 사용하실 때에는 해당 기술 스택에 맞는 배지에 대한 데이터를 사용해주세요."
       
       '![Badge](https://img.shields.io/badge/TypeScript-3178C6?style=flat&logo=typescript&logoColor=white)'
   
       ## 설치 방법
   
       "해당 프로젝트를 로컬 환경에서 실행시키기 위해 실행해야하는 명령어들이 들어갈 위치"
-      "아래의 예시는 yarn을 사용하는 경우입니다. 위에서 주어진 사용하는 패키지 매니저 값에 따라서 해당하는 패키지 매니저를 사용하는 방법을 추가해주세요."
-  
-      'yarn install'
+
+      "위에서 전달받은 사용하는 패키지 매니저 데이터값에 따라 해당 패키지매니저를 사용하는 방법을 추가해주세요."
   
       ## 팀원을 소개합니다
   
@@ -92,22 +103,18 @@ export const CallGPT = async (repoData: RepoData) => {
       
       '|[![](https://avatars.githubusercontent.com/u/팀원1 avatar_url)](https://github.com/팀원1)|[![](https://avatars.githubusercontent.com/u/팀원2 avatar_url)](https://github.com/팀원2)|[![](https://avatars.githubusercontent.com/u/팀원3 avatar_url)](https://github.com/팀원3)|[![](https://avatars.githubusercontent.com/u/팀원4 avatar_url)](https://github.com/팀원4)|'
       '|:---:|:---:|:---:|:---:|'
-      '| 팀원1 이름 | 팀원2 이름 | 팀원3 이름 | 팀원4 이름 |'
+      '| 팀원1 | 팀원2 | 팀원3 | 팀원4 |'
   
       ## 코드 기여자
   
-     " 코드 기여자들의 GitHub 프로필 링크가 들어갈 위치입니다. 코드 기여자들의 프로필 링크를 추가해주세요."
-      `;
+     "코드 기여자들의 GitHub 프로필 링크가 들어갈 위치입니다. 코드 기여자들의 프로필 링크를 추가해주세요."
+`;
 
   const configuration = new Configuration({
     apiKey: openAiKey,
   });
   const openai = new OpenAIApi(configuration);
 
-  // const prompt = "안녕";
-
-  console.log("prompt", prompt);
-
   try {
     const response = await openai.createChatCompletion({
       model: "gpt-3.5-turbo-16k",
@@ -127,5 +134,4 @@ export const CallGPT = async (repoData: RepoData) => {
     console.error("Error generating README:", error);
     throw new Error("Failed to generate README");
   }
-
 };

src/components/Editor/Components/AiGenerator.tsx

@@ -1,8 +1,8 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 // @ts-nocheck
 import React, { useEffect, useRef, useState } from "react";
-import { Configuration, OpenAIApi } from "openai-edge";
 import axios from "axios";
+import dayjs from "dayjs";
 
 import LoadingSpinner from "components/Common/LoadingSpinner/LoadingSpinner";
 import { CallGPT } from "api/gpt";
@@ -52,7 +52,7 @@ const AiGenerator = ({
     if (description) {
       setDescriptionList(description);
     }
-  }, [githubAddress, openAiKey, techStack, packageManager]);
+  }, [githubAddress, openAiKey, techStack, packageManager, description]);
 
   useEffect(() => {
     if (formList) {
@@ -68,7 +68,7 @@ const AiGenerator = ({
 
   const getRepos = async () => {
     if (!githubRepo.length || !openAiToken) {
-      alert("Please enter the GitHub repository address and OpenAI key.");
+      alert("깃허브 레포지토리 주소와 OpenAI 키를 입력해주세요.");
       return;
     }
 
@@ -90,7 +90,6 @@ const AiGenerator = ({
           member?.data.map(ele => ele.login).join(),
           member?.data.map(ele => ele.avatar_url).join(),
         );
-        // console.log("aiResponse", aiResponse);
         // setResponseData(aiResponse.choices[0].message.content.trim());
       }
     } catch (error) {
@@ -116,7 +115,7 @@ const AiGenerator = ({
 
     setIsLoading(true);
     const stream = await CallGPT(repoData);
-    console.log(stream);
+
     await handleStreamResponse(stream, chunk => {
       if (responseContainerRef.current) {
         responseContainerRef.current.innerText += chunk;
@@ -125,18 +124,17 @@ const AiGenerator = ({
     });
   };
 
-  console.log(responseData);
-
   const handleCloseModal = () => {
     setIsModalOpen(false);
     if (prevResponseData.current !== responseData && responseData) {
       prevResponseData.current = responseData;
 
       const newSectionId = state.editSections.length + state.selectSections.length + 1;
+      const currentDateTime = dayjs().format("DD/MM/YY HH:mm");
       const newSection = {
         id: newSectionId,
-        name: "자동생성RM",
-        title: "자동생성RM",
+        name: `RM ${currentDateTime}`,
+        title: `RM ${currentDateTime}`,
         markdown: responseData,
       };
 

src/components/Editor/Components/AutoForm.tsx

@@ -37,7 +37,7 @@ const AutoForm = () => {
       w-full h-[45px] p-[10px] ${link ? "pl-[40px]" : "pl-[10px]"}
       rounded-[8px] drop-shadow-[0_1px_1px_rgba(173,181,189,0.25)] border border-[#F1F3F5]
       focus:outline-none focus:ring-2 focus:ring-textBlue
-      placeholder-[#ADB5BD] placeholder:text-[14px]
+      placeholder-[#ADB5BD] placeholder:text-[14px] text-textPrimary
       ${value === "" ? "bg-red-100" : "bg-white"}
     `;
   };
@@ -48,9 +48,6 @@ const AutoForm = () => {
   const packageManagerInputStyle = createInputStyle(packageManager);
   const descriptionInputStyle = createInputStyle(description);
 
-  console.log("openAiKey", openAiKey);
-  console.log("githubAddress", githubAddress);
-  console.log("formList", formList);
   return (
     <div className="w-full h-full max-h-full rounded-[8px] bg-white border-solid border border-textTertiary p-[20px] flex flex-col gap-[30px]">
       <div className="w-full min-h-[140px] flex-Center flex-col text-center">
@@ -146,7 +143,7 @@ const AutoForm = () => {
               className="
               w-full h-[45px] p-[10px]
               focus:outline-none focus:ring-2 focus:ring-textBlue
-              rounded-[8px] border-solid border border-[#DEE2E6]
+              rounded-[8px] border-solid border border-[#DEE2E6] text-textPrimary
               placeholder-[#ADB5BD] placeholder:text-[14px]
               "
               placeholder={"값을 입력해주세요."}

src/components/Editor/Modal/AddAutoContentsModal.tsx

@@ -34,7 +34,7 @@ const AddSectionModal = ({ modalRef, modalOutSideClick, onClose, openModal, setF
     <div
       ref={modalRef}
       onClick={e => modalOutSideClick(e)}
-      className="h-full w-full z-10 fixed left-0 top-0 flex-Center bg-textPrimary bg-opacity-70"
+      className="h-full w-full z-10 fixed left-0 top-0 flex-Center bg-textPrimary bg-opacity-70 p-[24px]"
     >
       <div className="w-full max-w-[550px] h-auto bg-white rounded-[8px] p-[20px] flex flex-col">
         <div className="text-center p-[20px]">
@@ -47,7 +47,7 @@ const AddSectionModal = ({ modalRef, modalOutSideClick, onClose, openModal, setF
             className="
               w-full h-[45px] p-[10px] 
               rounded-[8px] border-solid border border-[#DEE2E6] 
-              placeholder-[#ADB5BD] placeholder:text-[14px]
+              placeholder-[#ADB5BD] placeholder:text-[14px] text-textPrimary
               focus:outline-none focus:ring-2 focus:ring-textBlue"
             placeholder="추가할 정보의 제목을 입력해 주세요."
             onChange={e => setInfoTitle(e.target.value)}

src/components/Editor/Modal/AddSectionModal.tsx

@@ -27,7 +27,8 @@ const AddSectionModal = ({ modalRef, modalOutSideClick, onClose, openModal }: Pr
       id: createId,
       name: title,
       title: title,
-      markdown: `## ${title}
+      markdown: `
+## ${title}
 
 `,
     };

src/components/Editor/Modal/ResultContentsModal.tsx

@@ -10,9 +10,9 @@ const ResultContentsModal = forwardRef<HTMLDivElement, ModalProps>(({ isOpen, on
   if (!isOpen) return null;
 
   return (
-    <div className="fixed inset-0 flex items-center justify-center z-50 bg-gray-700 bg-opacity-75">
-      <div className="bg-white w-1/2 p-4 h-[80%] flex flex-col justify-around rounded-md">
-        <div ref={ref} className="p-4 h-[90%] overflow-scroll bg-gray-100 rounded-md" />
+    <div className="fixed inset-0 flex items-center justify-center z-50 bg-gray-700 bg-opacity-75 p-[24px]">
+      <div className="bg-white sm:w-1/2 w-full p-4 h-[80%] flex flex-col justify-around rounded-md">
+        <div ref={ref} className="p-4 h-[90%] overflow-scroll bg-gray-100 rounded-md text-textPrimary" />
         <button onClick={onClose} className="mt-4 w-full bg-blue-500 text-white p-2 rounded-md hover:bg-blue-600">
           닫기
         </button>

src/components/MyPage/UserPrevious/index.tsx

@@ -32,8 +32,6 @@ const UserPreviousList = ({
     const savedDate = new Date(seconds * 1000);
     const difference = Math.floor((currentDate.getTime() - savedDate.getTime()) / (1000 * 3600 * 24));
 
-    console.log(difference);
-
     if (difference === 0) {
       return "Today";
     } else if (difference === 1) {