fix: ui 버그 수정

Readme-Monster · May 17, 2024 · 5a80fe1 · 5a80fe1
1 parent 01ca17c
commit 5a80fe1
Show file tree

Hide file tree

Showing 7 changed files with 2,285 additions and 2,264 deletions.
diff --git a/.pnp.cjs b/.pnp.cjs
diff --git a/src/api/gpt.tsx b/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}
@@ -97,7 +107,8 @@ export const CallGPT = async (repoData: RepoData) => {
       ## 코드 기여자
   
      " 코드 기여자들의 GitHub 프로필 링크가 들어갈 위치입니다. 코드 기여자들의 프로필 링크를 추가해주세요."
-      `;
+      
+`;
 
   const configuration = new Configuration({
     apiKey: openAiKey,
@@ -127,5 +138,4 @@ export const CallGPT = async (repoData: RepoData) => {
     console.error("Error generating README:", error);
     throw new Error("Failed to generate README");
   }
-
 };
diff --git a/src/components/Editor/Components/AutoForm.tsx b/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"}
     `;
   };
@@ -146,7 +146,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={"값을 입력해주세요."}

diff --git a/src/components/Editor/Modal/AddAutoContentsModal.tsx b/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)}

diff --git a/src/components/Editor/Modal/AddSectionModal.tsx b/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}
 
 `,
     };

diff --git a/src/components/Editor/Modal/ResultContentsModal.tsx b/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>

diff --git a/src/data/index.ts b/src/data/index.ts
@@ -5,7 +5,8 @@ export const sections: SectionsType[] = [
     id: 1,
     name: "프로젝트 제목",
     title: "프로젝트 제목",
-    markdown: `## 프로젝트 제목
+    markdown: `
+## 프로젝트 제목
   
 프로젝트 설명을 입력해 주세요.
 
@@ -15,7 +16,8 @@ export const sections: SectionsType[] = [
     id: 2,
     name: "프로젝트 특징",
     title: "프로젝트 특징",
-    markdown: `## 🧐 프로젝트 특징
+    markdown: `
+## 🧐 프로젝트 특징
   
 - 특징 1
 - 특징 2
@@ -27,7 +29,8 @@ export const sections: SectionsType[] = [
     id: 3,
     name: "이미지",
     title: "이미지",
-    markdown: `## 이미지
+    markdown: `
+## 이미지
   
 ![이미지](https://github.com/Readme-Monster/readme-monster/assets/88364280/96e680e5-613f-4818-8603-8afbb0c9acb1)
 
@@ -37,7 +40,8 @@ export const sections: SectionsType[] = [
     id: 4,
     name: "설치 방법",
     title: "설치 방법",
-    markdown: `## 설치 방법
+    markdown: `
+## 설치 방법
   
 \`\`\`bash
   yarn install readme-monster
@@ -49,7 +53,8 @@ export const sections: SectionsType[] = [
     id: 5,
     name: "기술 스택",
     title: "기술 스택",
-    markdown: `## 🛠️ 기술 스택
+    markdown: `
+## 🛠️ 기술 스택
 
 ![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)
@@ -61,7 +66,8 @@ export const sections: SectionsType[] = [
     id: 6,
     name: "테스트 실행",
     title: "테스트 실행",
-    markdown: `## 테스트 실행
+    markdown: `
+## 테스트 실행
     
 테스트를 실행하려면 다음 명령어를 실행하세요.
     
@@ -75,7 +81,8 @@ export const sections: SectionsType[] = [
     id: 7,
     name: "테이블",
     title: "테이블",
-    markdown: `## 테이블
+    markdown: `
+## 테이블
   
 | Column 1 | Column 2 | Column 3 |
 | -------- | -------- | -------- |
@@ -89,7 +96,8 @@ export const sections: SectionsType[] = [
     id: 8,
     name: "링크",
     title: "링크",
-    markdown: `## 🔗 링크
+    markdown: `
+## 🔗 링크
   
 - [서비스 바로가기](https://readme-monster.netlify.app/)
 - [Wiki](https://github.com/Readme-Monster/readme-monster/wiki)
@@ -101,7 +109,8 @@ export const sections: SectionsType[] = [
     id: 9,
     name: "뱃지",
     title: "뱃지",
-    markdown: `## 뱃지
+    markdown: `
+## 뱃지
 
 https://shields.io/ 를 통해 뱃지를 추가해 보세요.
   
@@ -113,7 +122,8 @@ https://shields.io/ 를 통해 뱃지를 추가해 보세요.
     id: 10,
     name: "코드 작성",
     title: "코드 작성",
-    markdown: `## 코드 작성
+    markdown: `
+## 코드 작성
   
 \`\`\`javascript
 function Code() {