New feature branch

README.md

@@ -1,54 +1,92 @@
-<br />
-<img src="public/images/rm-logo.png" width="80"/>
-
-## RM은 어떤 서비스인가요?
+# <img src="public/images/rm-logo.png" width="25" /> Readme-Monster 
 ![제목을-입력해주세요_-001](https://github.com/Readme-Monster/readme-monster/assets/88364280/96e680e5-613f-4818-8603-8afbb0c9acb1)
 
-Readme Monster는 사용자가 직관적인 인터페이스를 통해 README 파일을 쉽게 구성할 수 있게 도와주고, OpenAI API를 활용하여 맞춤형 README 내용을 자동으로 생성해주는 온라인 플랫폼입니다. 
+## <img src="public/images/rm-logo.png" width="20" /> RM은 어떤 서비스인가요?
+- Readme-Monster는 사용자가 직관적인 인터페이스를 통해 README 파일을 쉽게 구성할 수 있게 도와주고, OpenAI API를 활용하여 맞춤형 README 내용을 자동으로 생성해주는 온라인 플랫폼입니다. 
 
-## 링크
+## <img src="public/images/rm-logo.png" width="20" /> 링크
 
 - [서비스 바로가기](https://readme-monster.netlify.app/)
 - [디자인](https://framer.com/projects/Untitled--Xf9L3K5EqFYT1UxUF3f9-8hseT)
 - [Wiki](https://github.com/Readme-Monster/readme-monster/wiki)
 
-## RM 팀원을 소개합니다
+## <img src="public/images/rm-logo.png" width="20" /> RM 팀원을 소개합니다
 |[![](https://avatars.githubusercontent.com/u/88364280?v=4)](https://github.com/lee-ji-hong)|[![](https://avatars.githubusercontent.com/u/81367886?v=4)](https://github.com/yonghyun421)|[![](https://avatars.githubusercontent.com/u/72785296?v=4)](https://github.com/JaeHyup0504)|[![](https://avatars.githubusercontent.com/u/66737450?v=4)](https://github.com/cks612)|
 |:---:|:---:|:---:|:---:|
 | 이지홍 | 김용현 | 이재협| 최규성 |
 
-## 기술 스택
+## <img src="public/images/rm-logo.png" width="20" /> 기술 스택
+
+- **프론트엔드** 
+  - ![Badge](https://img.shields.io/badge/React-61DAFB?style=flat&logo=react&logoColor=white) ![Badge](https://img.shields.io/badge/TypeScript-3178C6?style=flat&logo=typescript&logoColor=white) ![Badge](https://img.shields.io/badge/Tailwind_CSS-06B6D4?style=flat&logo=tailwind-css&logoColor=white)
+- **백엔드** 
+  - ![Badge](https://img.shields.io/badge/firebase-FFCA28?style=flat&logo=firebase&logoColor=white)
+- **데브옵스**
+  - ![Badge](https://img.shields.io/badge/githubactions-2088FF?style=flat&logo=githubactions&logoColor=white)
+- **도구 및 라이브러리**
+  - ![Badge](https://img.shields.io/badge/Framer-0055FF?style=flat&logo=framer&logoColor=white) ![Badge](https://img.shields.io/badge/Context_API-5ED3F3?style=flat&logo=react&logoColor=white) ![Badge](https://img.shields.io/badge/openai-412991?style=flat&logo=openai&logoColor=white) ![Badge](https://img.shields.io/badge/git-F05032?style=flat&logo=git&logoColor=white) ![Badge](https://img.shields.io/badge/github-181717?style=flat&logo=github&logoColor=white)
+- **패키지 매니저**
+  - ![Badge](https://img.shields.io/badge/yarn-2C8EBB?style=flat&logo=yarn&logoColor=white)
+- **테스팅**
+  - ![Badge](https://img.shields.io/badge/jest-C21325?style=flat&logo=jest&logoColor=white)
+- **코드 품질**
+  - ![Badge](https://img.shields.io/badge/eslint-4B32C3?style=flat&logo=eslint&logoColor=white) ![Badge](https://img.shields.io/badge/prettier-F7B93E?style=flat&logo=prettier&logoColor=white)
+- **배포**
+  - ![Badge](https://img.shields.io/badge/Netlify-00C7B7?style=flat&logo=netlify&logoColor=white)
 
-![Badge](https://img.shields.io/badge/TypeScript-3178C6?style=flat&logo=typescript&logoColor=white)
-![Badge](https://img.shields.io/badge/React-61DAFB?style=flat&logo=react&logoColor=white)
-![Badge](https://img.shields.io/badge/Tailwind_CSS-06B6D4?style=flat&logo=tailwind-css&logoColor=white)
-![Badge](https://img.shields.io/badge/Context_API-5ED3F3?style=flat&logo=react&logoColor=white)
+## <img src="public/images/rm-logo.png" width="20" /> 기획 배경 (Background)
+- 프로젝트 문서화는 개발 과정에서 매우 중요한 역할을 하지만, 많은 개발자들이 이를 번거롭고 시간이 많이 소모되는 작업으로 여겨 생략하거나 우선순위를 미루는 경우가 많습니다. 
 
-## 기획 배경 (Background)
-프로젝트 문서화는 개발 과정에서 중요한 역할을 하지만, 많은 개발자들이 이를 번거롭고 시간이 많이 소모되는 작업으로 여깁니다. 이러한 문제 인식에서 출발한 README 자동 생성 도구는 다음과 같은 기획 배경을 가지고 있습니다.
+- 이러한 문제 인식에서 출발한 README 자동 생성 도구는 다음과 같은 기획 배경을 가지고 있습니다.
 
 
-## 동기 및 필요성
+### <img src="public/images/rm-logo.png" width="15" /> 동기 및 필요성
 
-- **효율성 증대:** 개발자들이 프로젝트의 기본 구조와 내용을 빠르게 문서화할 수 있도록 돕습니다. 이는 프로젝트 시작 단계에서 많은 시간을 절약할 수 있게 합니다.
-- **표준화된 문서:** README 파일은 프로젝트를 이해하는 데 필수적인 요소입니다. 자동 생성 도구는 프로젝트의 기본 정보, 설치 방법, 사용 방법 등을 표준화된 형식으로 제공함으로써 프로젝트의 전달력을 높입니다.
-- **사용자 경험 개선:** 명확하고 직관적인 문서는 사용자나 기여자가 프로젝트에 쉽게 접근할 수 있도록 돕습니다. 이는 개방성과 협력을 증진시키는 효과가 있습니다.
+- **효율성 증대** 
+  - 개발자들이 프로젝트의 기본 구조와 내용을 빠르게 문서화할 수 있도록 돕습니다. 
+  이는 프로젝트 시작 단계에서 많은 시간을 절약할 수 있게 합니다.
+- **표준화된 문서** 
+  - README 파일은 프로젝트를 이해하는 데 필수적인 요소입니다. 자동 생성 도구는 프로젝트의 기본 정보, 설치 방법, 사용 방법 등을 표준화된 형식으로 제공함으로써 프로젝트의 전달력을 높입니다.
+- **사용자 경험 개선** 
+  - 명확하고 직관적인 문서는 사용자나 기여자가 프로젝트에 쉽게 접근할 수 있도록 돕습니다. 이는 개방성과 협력을 증진시키는 효과가 있습니다.
 
-### 사용자 문제 해결
+### <img src="public/images/rm-logo.png" width="15" /> 사용자 문제 해결
 
-이 도구는 특히 문서 작성에 익숙하지 않거나, 문서 작성을 번거롭게 생각하는 개발자들을 위해 설계되었습니다. 또한, 프로젝트 문서의 품질과 일관성을 유지하고 싶어하는 프로젝트 관리자나 팀 리더에게도 유용합니다.
+- 이 도구는 특히 문서 작성에 익숙하지 않거나, 문서 작성을 번거롭게 생각하는 개발자들을 위해 설계되었습니다. 
+- 또한, 프로젝트 문서의 품질과 일관성을 유지하고 싶어하는 프로젝트 관리자나 팀 리더에게도 유용합니다.
 
-### 이전 시도 및 개선점
+### <img src="public/images/rm-logo.png" width="15" /> 이전 시도 및 개선점
 
-과거에도 프로젝트 문서화를 자동화하려는 다양한 시도가 있었습니다. 이러한 도구들은 주로 템플릿 기반의 접근 방식을 채택했으나, 사용자의 개별 요구사항을 충분히 반영하지 못하는 경우가 많았습니다. 최신 README 자동 생성 도구들은 이러한 한계를 극복하기 위해 더욱 세련되고 사용자 친화적인 기능을 제공하려고 합니다. 예를 들어, 프로젝트 구조를 자동 분석하여 관련 섹션을 자동으로 생성하고, 사용자가 특정 내용을 쉽게 추가하거나 수정할 수 있는 옵션을 제공합니다. 이러한 발전은 개발자 커뮤니티의 피드백과 기술 발전을 통해 가능해졌습니다.
+- 과거에도 프로젝트 문서화를 자동화하려는 다양한 시도가 있었습니다. 이러한 도구들은 주로 템플릿 기반의 접근 방식을 채택했으나, 사용자의 개별 요구사항을 충분히 반영하지 못하는 경우가 많았습니다. 
+- 최신 README 자동 생성 도구들은 이러한 한계를 극복하기 위해 더욱 세련되고 사용자 친화적인 기능을 제공하려고 합니다. 예를 들어, 프로젝트 구조를 자동 분석하여 관련 섹션을 자동으로 생성하고, 사용자가 특정 내용을 쉽게 추가하거나 수정할 수 있는 옵션을 제공합니다. 이러한 발전은 개발자 커뮤니티의 피드백과 기술 발전을 통해 가능해졌습니다.
+
+---
 
-이러한 배경과 동기는 README 자동 생성 도구가 개발자들 사이에서 필요한 해결책이었음을 보여줍니다. 이 도구는 프로젝트 문서화 과정을 간소화하고, 개발자들이 보다 중요한 개발 작업에 더 많은 시간을 할애할 수 있도록 지원합니다.
+- **이러한 배경과 동기는 README 자동 생성 도구가 개발자들 사이에서 필요한 해결책이었음을 보여줍니다. 이 도구는 프로젝트 문서화 과정을 간소화하고, 개발자들이 보다 중요한 개발 작업에 더 많은 시간을 할애할 수 있도록 지원합니다.**
 
-## 설치 방법
+## <img src="public/images/rm-logo.png" width="20" /> 설치 방법
 
 yarn 방식으로 설치해주세요
 
 ```bash
   yarn install
   yarn start
 ``` 
+
+## <img src="public/images/rm-logo.png" width="20" /> 사용 방법
+1. Readme-Monster에 접속합니다.
+<img src="public/images/rm2.png" />
+2. 회원가입 및 로그인을 합니다. (로그인을 하지 않아도 사용 가능합니다.)
+<img src="public/images/rm4.png">
+<img src="public/images/rm3.png">
+3. 원하는 섹션을 선택하고, 해당하는 내용을 입력하여 Readme 파일을 작성합니다. 작성한 파일은 복사하여 사용하거나, 다운로드하여 사용할 수 있습니다.
+<img src="public/images/rm5.png">
+4. 자동으로 Readme 파일을 생성하는 기능을 사용하려면, Auto 탭으로 이동하여 레포지토리 주소와 OpenAI API Key를 입력하고 프로젝트에 대한 간단한 설명을 입력한 후 생성 버튼을 누릅니다.
+<img src="public/images/rm8.png">
+5. 상단의 프로필 아이콘을 클릭하여 프로필 페이지로 이동할 수 있습니다. 프로필 페이지에서는 자신이 작성한 Readme 파일을 확인할 수 있습니다.
+6. 로그아웃을 하려면 프로필 페이지에서 로그아웃 버튼을 클릭합니다.
+7. Readme-Monster를 이용하면서 불편한 점이나 개선사항이 있다면, 상단의 말풍선 아이콘을 클릭하여 피드백을 남겨주세요.
+<img src="public/images/rm6.png">
+8. 상단의 라이트모드/다크모드 버튼을 클릭하여 화면을 변경할 수 있습니다.
+<img src="public/images/rm7.png">
+

package.json

@@ -70,6 +70,7 @@
     "clsx": "^2.1.1",
     "firebase": "^10.11.1",
     "openai": "^4.40.2",
+    "openai-edge": "^1.2.2",
     "qs": "^6.12.1",
     "react": "^18.2.0",
     "react-bootstrap": "^2.10.2",

src/api/gpt.tsx

@@ -0,0 +1,131 @@
+import axios from "axios";
+import { Configuration, OpenAIApi } from "openai-edge";
+
+interface RepoData {
+  data: any;
+  member: string;
+  avatar_url: string;
+  techStackList: string;
+  packageManagerList: string;
+  descriptionList: string;
+  aboutRepo: { title: string; value: string }[];
+  githubRepo: string[];
+  openAiKey: string;
+}
+
+export const CallGPT = async (repoData: RepoData) => {
+  const { data, member, avatar_url, techStackList, packageManagerList, descriptionList, aboutRepo, githubRepo, openAiKey } = repoData;
+
+  const prompt = `
+      레포지토리의 이름: ${data.name}
+      레포지토리의 전체 이름: ${data.full_name}
+      레포지토리 소유자: ${data.owner.login}
+      레포지토리의 설명: ${data.description}
+      레포지토리의 기본 브랜치: ${data.default_branch}
+      레포지토리의 프로그래밍 언어: ${data.language}
+      레포지토리 URL: ${data.html_url}
+      레포지토리 생성일: ${data.created_at}
+      레포지토리 최종 업데이트: ${data.updated_at}
+      레포지토리가 포크된 여부: ${data.fork ? "예" : "아니오"}
+      레포지토리의 포크 수: ${data.forks_count}
+      레포지토리의 스타 수: ${data.stargazers_count}
+      레포지토리의 감시자 수: ${data.watchers_count}
+      레포지토리의 이슈 수: ${data.open_issues_count}
+      레포지토리의 라이선스: ${data.license ? data.license.name : "없음"}
+      레포지토리의 크기: ${data.size} KB
+      레포지토리의 접근 가능 여부: ${data.private ? "비공개" : "공개"}
+      레포지토리의 위키 사용 가능 여부: ${data.has_wiki ? "사용" : "사용 안 함"}
+      레포지토리의 페이지 사용 여부: ${data.has_pages ? "사용" : "사용 안 함"}
+      사용한 기술 스택: ${techStackList}
+      사용한 패키지 매니저: ${packageManagerList}
+      프로젝트에 대한 설명: ${descriptionList}
+      ${aboutRepo.map(item => `${item.title}: ${item.value}`).join("\n")}
+
+      위의 값들은 github API를 이용해서 레포지토리의 정보를 가져온 것이고, 아래는 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](위키 링크가 들어갈 위치)'
+
+      ## 기술 스택
+
+      "해당 레포지토리에서 사용된 기술 스택들이 들어갈 위치입니다. 위에서 가져온 정보중에 사용한 기술 스택에 해당하는 내용을 참고해서 작성해주세요"
+      "아래의 배지는 예시로 사용된 것이니, 직접 사용하실 때에는 해당 기술 스택에 맞는 배지를 사용해주세요."
+
+      '![Badge](https://img.shields.io/badge/TypeScript-3178C6?style=flat&logo=typescript&logoColor=white)'
+
+      ## 설치 방법
+
+      "해당 프로젝트를 로컬 환경에서 실행시키기 위해 실행해야하는 명령어들이 들어갈 위치"
+      "아래의 예시는 yarn을 사용하는 경우입니다. 위에서 주어진 사용하는 패키지 매니저 값에 따라서 해당하는 패키지 매니저를 사용하는 방법을 추가해주세요."
+
+      'yarn install'
+
+      ## 팀원을 소개합니다
+
+      "팀원들의 GitHub 프로필 링크가 들어갈 위치입니다. 이 프로젝트의 팀원들의 이름은 ${member} 이고 각각 팀원들의 avatars는 ${avatar_url} 입니다. 참고해서 팀원들의 프로필 링크를 추가해주세요.
+      팀원은 ${member} 중에 최대 8명까지만 추가할 수 있습니다. 8명을 초과하는 경우 8명까지만 추가해주세요.
+      아래의 템플릿을 참고하여 작성해주세요.
+      해당하는 팀원을 찾을 수 없는 경우 예시와 똑같이 작성하지 말고 알파벳순으로 임의로 작성해주세요."
+
+
+      '|[![](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 이름 |'
+
+      ## 코드 기여자
+
+     " 코드 기여자들의 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",
+      messages: [
+        {
+          role: "system",
+          content:
+            "너의 역할은 user가 넘겨주는 정보와 예시로 주어진 템플릿에 맞게 해당 레포지토리에 대한 Readme 파일을 작성해주는 것입니다.",
+        },
+        { role: "user", content: prompt },
+      ],
+      stream: true,
+    });
+    const stream = response.body;
+    return stream;
+  } catch (error) {
+    console.error("Error generating README:", error);
+    throw new Error("Failed to generate README");
+  }
+
+};