feat: 아이콘 추가 및 overflow scroll 추가

Readme-Monster · Apr 26, 2024 · 72f565a · 72f565a
1 parent 5290549
commit 72f565a
Show file tree

Hide file tree

Showing 11 changed files with 115 additions and 63 deletions.
diff --git a/src/components/Common/Tabs.tsx b/src/components/Common/Tabs.tsx
@@ -13,7 +13,7 @@ interface TabProps extends TabsProps {
 
 export const Tabs = ({ children, onClick, value }: TabsProps) => {
   return (
-    <div className="w-full min-h-[30px] flex flex-row gap-[40px] mx-[10px]">
+    <div className="w-full min-h-[30px] flex flex-row gap-[40px] mx-[5px]">
       {Children.toArray(children).map((child, idx) => (
         <Tab
           key={idx}

diff --git a/src/components/Editor/Components/Auto.tsx b/src/components/Editor/Components/Auto.tsx
@@ -1,21 +1,30 @@
-import React from "react";
+import React, { useState } from "react";
 // import EditSections from "./EditSections";
 // import SelectSections from "./SelectSections";
 import AutoForm from "./AutoForm";
+import EditSections from "./EditSections";
+import SelectSections from "./SelectSections";
 
 const Auto = () => {
+  const [create, setCreate] = useState<boolean>(false);
+  const handleSuccess = () => setCreate(true);
+
   return (
     <div className="w-full h-full flex flex-col gap-[20px]">
-      {/* <div className="w-full h-auto">
-        <EditSections/>
-      </div>
-      <div className="w-full h-auto">
-        <SelectSections/>
-      </div> */}
-      <AutoForm/>
+      {create ? (
+        <>
+          <div className="w-full h-auto">
+            <EditSections />
+          </div>
+          <div className="w-full h-auto">
+            <SelectSections />
+          </div>
+        </>
+      ) : (
+        <AutoForm onClick={handleSuccess} />
+      )}
     </div>
-
   );
 };
 
-export default Auto;
+export default Auto;
diff --git a/src/components/Editor/Components/AutoForm.tsx b/src/components/Editor/Components/AutoForm.tsx
@@ -1,43 +1,63 @@
 import React from "react";
 import RequiredDot from "../../Common/RequiredDot";
-import { Add } from "@carbon/icons-react";
-import clsx from "clsx";
+import { Add, Link } from "@carbon/icons-react";
 
 interface List {
   title: string;
   placeholder: string;
 }
+interface Props {
+  onClick: () => void;
+}
 
-const AutoForm = () => {
-  const formList: List[] = [{ title: "프로젝트 제목", placeholder: "프로젝트 제목을 입력해주세요." }];
+const AutoForm = ({ onClick }: Props) => {
+  const formList: List[] = [
+    { title: "프로젝트 제목", placeholder: "프로젝트 제목을 입력해주세요." },
+    { title: "프로젝트 소개", placeholder: "프로젝트 소개를 입력해주세요." },
+    { title: "프로젝트 기술", placeholder: "프로젝트 기술을 입력해주세요." },
+    { title: "프로젝트 개요", placeholder: "프로젝트 개요를 입력해주세요." },
+  ];
 
   return (
     <div className="w-full h-full max-h-full rounded-[8px] 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 p-[20px]">
+      <div className="w-full min-h-[140px] flex-Center flex-col text-center">
         <p className="font-bold text-textPrimary text-3xl mb-[10px]">Auto Readme</p>
-        <p className="text-textSecondary">
+        <p className="text-textSecondary mb-0">
           GitHub 링크를 통해 ChatGPT가
           <br />
           Readme를 대신 써드립니다
         </p>
       </div>
-      <div className={clsx("h-full flex flex-col gap-[30px] px-[10px] overflow-scroll")}>
+      <div className="h-[100%] flex flex-col gap-[30px] px-[10px] overflow-scroll">
         <div className="w-full h-[70px]">
-          <p className="text-textPrimary mb-[10px] ml-[10px]">
+          <p className="text-textPrimary mb-[10px] ml-[10px] ">
             GitHub 링크 <RequiredDot />
           </p>
-          <input
-            type="text"
-            className="w-full h-[45px] p-[10px] rounded-[8px] border-solid border border-[#DEE2E6]"
-            placeholder="GitHub 링크를 입력해주세요."
-          ></input>
+          <div className="w-full h-[45px] flex items-center relative">
+            <Link size={20} className="absolute z-1 fill-[#495057] ml-[12px] pointer-events-none" />
+            <input
+              type="text"
+              className="
+                w-full h-[45px] p-[10px] pl-[40px]
+                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="GitHub 링크를 입력해주세요."
+            />
+          </div>
         </div>
         {formList?.map(({ title, placeholder }) => (
           <div className="w-full h-[70px]" key={title}>
             <p className="text-textPrimary mb-[10px] ml-[10px]">{title}</p>
             <input
               type="text"
-              className="w-full h-[45px] p-[10px] rounded-[8px] border-solid border border-[#DEE2E6]"
+              className="
+              w-full h-[45px] p-[10px]
+              focus:outline-none focus:ring-2 focus:ring-textBlue
+              rounded-[8px] border-solid border border-[#DEE2E6]
+              placeholder-[#ADB5BD] placeholder:text-[14px]
+              "
               placeholder={placeholder}
             />
           </div>
@@ -50,7 +70,9 @@ const AutoForm = () => {
         <button className="w-1/2 rounded-[8px] border-solid border border-textTertiary text-textPrimary hover:bg-gray-50">
           Cancle
         </button>
-        <button className="w-1/2 rounded-[8px] bg-textBlue text-white hover:bg-[#6E9EFF]">Create</button>
+        <button onClick={() => onClick()} className="w-1/2 rounded-[8px] bg-textBlue text-white hover:bg-[#6E9EFF]">
+          Create
+        </button>
       </div>
     </div>
   );

diff --git a/src/components/Editor/Components/Builder.tsx b/src/components/Editor/Components/Builder.tsx
@@ -6,13 +6,13 @@ const Builder = () => {
   return (
     <div className="w-full h-full flex flex-col gap-[20px]">
       <div className="w-full h-auto">
-        <EditSections/>
+        <EditSections />
       </div>
       <div className="w-full h-auto">
-        <SelectSections/>
+        <SelectSections />
       </div>
     </div>
   );
 };
 
-export default Builder;
+export default Builder;
diff --git a/src/components/Editor/Components/EditSections.tsx b/src/components/Editor/Components/EditSections.tsx
@@ -3,9 +3,9 @@ import EditSection from "./EditSection";
 
 const EditSections = () => {
   return (
-    <div className="flex flex-col gap-[10px]">
-      <div className="flex-Center flex-row justify-between pt-[10px] h-[45px]">
-        <p className="text-textSecondary ml-[5px] mb-0">Edit Section</p>
+    <div className="flex flex-col gap-[10px] px-[10px]">
+      <div className="flex-Center flex-row justify-between min-h-[30px]">
+        <p className="text-textPrimary ml-[5px] mb-0 text-sm">Edit Section</p>
       </div>
       <div className="flex flex-col gap-[10px]">
         <EditSection />

diff --git a/src/components/Editor/Components/SearchSection.tsx b/src/components/Editor/Components/SearchSection.tsx
@@ -1,13 +1,24 @@
 import React from "react";
+import { Search } from "@carbon/icons-react";
 
 const SearchSection = () => {
   return (
-    <input 
-      type="text" 
-      className="w-full h-[45px] p-[10px] rounded-[8px] border-solid border drop-shadow-[0_1px_1px_rgba(173,181,189,0.25)] border-[#F1F3F5]" 
-      placeholder="section 제목을 입력해주세요"
-    />
+    <form action="">
+      <div className="w-full h-[45px] flex items-center relative">
+        <Search size={20} className="absolute z-1 fill-[#495057] ml-[12px] pointer-events-none" />
+        <input
+          type="text"
+          className="
+            w-full h-[45px] p-[10px] pl-[40px]
+            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="Search for a section"
+        />
+      </div>
+    </form>
   );
 };
 
-export default SearchSection;
+export default SearchSection;
diff --git a/src/components/Editor/Components/SelectSections.tsx b/src/components/Editor/Components/SelectSections.tsx
@@ -19,17 +19,23 @@ const SelectSections = () => {
   };
 
   return (
-    <div className="flex flex-col gap-[10px]">
-      <div className="flex-Center flex-row justify-between pt-[10px]">
-        <p className="text-textSecondary ml-[5px] mb-0">Select Section</p>
-        <Add size={35} className="fill-textBlue cursor-pointer" onClick={openModalAlert} />
+    <div className="h-full flex flex-col gap-[10px] px-[10px]">
+      <div className="flex-Center flex-row justify-between min-h-[40px]">
+        <p className="text-textPrimary ml-[5px] mb-0 text-sm">Select Section</p>
+        <Add size={30} className="fill-textBlue cursor-pointer" onClick={openModalAlert} />
       </div>
-      <div className="flex flex-col gap-[10px]">
+      <div className="h-full max-h-auto flex flex-col gap-[10px]">
         <SearchSection />
         <SelectSection />
         <SelectSection />
         <SelectSection />
         <SelectSection />
+        <SelectSection />
+        <SelectSection />
+        <SelectSection />
+        <SelectSection />
+        <SelectSection />
+        <SelectSection />
       </div>
       {openModal && (
         <AddSectionModal

diff --git a/src/components/Editor/EditorPreviewContainer.tsx b/src/components/Editor/EditorPreviewContainer.tsx
@@ -15,7 +15,7 @@ const EditorPreviewContainer = () => {
     <>
       <div className="w-1/2">
         <div className="w-full h-full flex flex-col gap-[10px]">
-          <div className="min-h-[30px] mx-[10px] flex items-center">
+          <div className="min-h-[30px] mx-[5px] flex items-center">
             <p className="text-textBlue font-semibold mb-0">Edior</p>
           </div>
           <Editor />

diff --git a/src/components/Editor/Modal/AddSectionModal.tsx b/src/components/Editor/Modal/AddSectionModal.tsx
@@ -2,13 +2,12 @@ import React, { useEffect, useRef } from "react";
 
 interface Props {
   modalRef: React.ForwardedRef<HTMLDivElement>;
-  modalOutSideClick: (e:any) => void;
+  modalOutSideClick: (e: any) => void;
   onClose: () => void;
-  openModal: boolean
+  openModal: boolean;
 }
 
-const AddSectionModal = ({modalRef, modalOutSideClick, onClose, openModal} : Props) => {
-
+const AddSectionModal = ({ modalRef, modalOutSideClick, onClose, openModal }: Props) => {
   const inputRef = useRef<HTMLInputElement | null>(null);
 
   useEffect(() => {
@@ -18,34 +17,39 @@ const AddSectionModal = ({modalRef, modalOutSideClick, onClose, openModal} : Pro
   }, []);
 
   return (
-    <div 
-      ref={modalRef} 
-      onClick={(e) => modalOutSideClick(e)} 
+    <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"
     >
       <div className="w-full max-w-[550px] h-auto bg-white rounded-[8px] p-[20px] flex flex-col">
         <div className="text-center p-[20px]">
-          <p className="text-textBlue text-2xl font-bold">New Custom Section</p>
+          <p className="text-textBlue text-2xl font-bold mb-0">New Custom Section</p>
         </div>
         <div className="my-[20px]">
-          <input 
+          <input
             ref={inputRef}
-            type="text" 
-            className="w-full h-[45px] p-[10px] rounded-[8px] border-solid border border-[#DEE2E6] focus:outline-none focus:ring focus:ring-textBlue" 
+            type="text"
+            className="
+              w-full h-[45px] p-[10px] 
+              rounded-[8px] border-solid border border-[#DEE2E6] 
+              placeholder-[#ADB5BD] placeholder:text-[14px]
+              focus:outline-none focus:ring-2 focus:ring-textBlue"
             placeholder="Section Title"
           />
         </div>
         <div className="w-full flex flex-row min-h-[45px] gap-[20px] mt-auto">
-          <button className="w-1/2 rounded-[8px] border-solid border border-textTertiary text-textPrimary hover:bg-gray-50" onClick={onClose}>
-              Cancle
-          </button>
-          <button className="w-1/2 rounded-[8px] bg-textBlue text-white hover:bg-[#6E9EFF]">
-              Create
+          <button
+            className="w-1/2 rounded-[8px] border-solid border border-textTertiary text-textPrimary hover:bg-gray-50"
+            onClick={onClose}
+          >
+            Cancle
           </button>
+          <button className="w-1/2 rounded-[8px] bg-textBlue text-white hover:bg-[#6E9EFF]">Create</button>
         </div>
       </div>
     </div>
   );
 };
 
-export default AddSectionModal;
+export default AddSectionModal;
diff --git a/src/components/Editor/SectionsContainer.tsx b/src/components/Editor/SectionsContainer.tsx
@@ -16,7 +16,7 @@ const SectionsContainer = () => {
         <Tab value="Builder">Builder</Tab>
         <Tab value="Auto">Auto</Tab>
       </Tabs>
-      <div className="w-full h-full flex flex-col gap-[10px]">
+      <div className="w-full h-full flex flex-col gap-[10px] overflow-y-scroll">
         {selectedTab === "Builder" && <Builder />}
         {selectedTab === "Auto" && <Auto />}
       </div>

diff --git a/src/pages/builder/ReadmeBuilder.tsx b/src/pages/builder/ReadmeBuilder.tsx
@@ -9,7 +9,7 @@ const ReadmeBuilder = () => {
       <div className="h-[80px] flex-Center">
         <Header />
       </div>
-      <div className="w-full h-[calc(100%_-_64px)]">
+      <div className="w-full h-[calc(100%_-_80px)]">
         <div className="max-w-full h-full p-[30px] pt-[20px] flex flex-row gap-[30px]">
           <div className="max-w-[400px] w-full h-full">
             <SectionsContainer />