Style: sample data button and return input button (#36)

SummarizeMe · Apr 2, 2023 · 8bdc14b · 8bdc14b
1 parent 969d1e9
commit 8bdc14b
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 43 deletions.
diff --git a/summe/package.json b/summe/package.json
@@ -39,5 +39,5 @@
       "last 1 safari version"
     ]
   },
-  "proxy": "http://192.168.35.200:8080/"
+  "proxy": "http://localhost:8080/"
 }
diff --git a/summe/src/component/InputLink.css b/summe/src/component/InputLink.css
@@ -1,42 +1,43 @@
+.inputWrapper{
+  width: 100%;
+  max-width: 1200px;
+  min-width: 300px;
+  display: flex;
+  margin: auto;
+}
+
 .inputLink {
-  width: 30%;
   margin: 3px 10px;
   background-color: transparent;
   height: 30px;
-  width: calc(50% - 4px);
-  max-width: 800px;
-  min-width: 50px;
   border: 2px solid rgba(0, 0, 0, 0.23);
   border-radius: 7px;
+  flex-grow: 1;
 }
 
 .inputLink:hover {
   box-shadow: 1px 1px 3px #b0bec5; /* 그림자 효과 */
 }
 
-.selected {
+.typeButton.selected {
   background-color: #cfd8dc;
-  width: 60px;
-  height: 30px;
-  border-radius: 7px;
-  margin: 2px;
-  border: 1px solid #b0bec5;
 }
 
-.selected:hover {
+.typeButton.selected:hover {
   box-shadow: 1px 1px 3px #607d8b; /* 그림자 효과 */
 }
 
-.notselected {
+.typeButton {
   /* background-color: #eceff1; */
   background-color: white;
   width: 60px;
   height: 30px;
   border-radius: 7px;
   margin: 2px;
+  flex-grow: 0;
   border: 1px solid #b0bec5;
 }
 
-.notselected:hover {
+.typeButton:hover {
   box-shadow: 1px 1px 3px #b0bec5; /* 그림자 효과 */
 }
diff --git a/summe/src/component/InputLink.jsx b/summe/src/component/InputLink.jsx
@@ -5,7 +5,7 @@ export default function InputLink({ input, setInput}) {
   let urlTypes = ["github", "tistory", "velog", "notion"];
 
   return (
-    <div>
+    <div className="inputWrapper">
       <input
         className="inputLink"
         type="text"
@@ -26,7 +26,7 @@ export default function InputLink({ input, setInput}) {
               f.preventDefault();
               setInput({...input, type: e});
             }}
-            className={input.type === e ? "selected" : "notselected"}
+            className={input.type === e ? "selected typeButton" : "typeButton"}
           >
             {e.charAt(0).toUpperCase() + e.slice(1)}
           </button>

diff --git a/summe/src/component/button/Button.css b/summe/src/component/button/Button.css
@@ -19,7 +19,7 @@
   box-shadow: 1px 1px 3px #b0bec5; /* 그림자 효과 */
 }
 
-.viewGraphButton {
+.viewGraphButton,.returnInputButton {
   /* background-color: #eceff1; */
   background-color: white;
   color: #78909c;
@@ -37,33 +37,24 @@
   margin: 2px;
   /* box-shadow: 1px 1px; 그림자 효과 */
   border: 1px solid #b0bec5;
-  margin: auto;
-  margin-top: 5px;
-  margin-bottom: 5px;
+  margin: 5px auto 50px auto;
 }
 
-.viewGraphButton:hover {
+.viewGraphButton:hover,.returnInputButton:hover {
   box-shadow: 1px 1px 3px #b0bec5; /* 그림자 효과 */
 }
 
 .sampleData {
-  /* background-color: #eceff1; */
   background-color: white;
-
   display: flex;
   justify-content: center;
   align-items: center;
-
   line-height: 30px;
   width: 100px;
   height: 20px;
   border-radius: 7px;
-  margin: 2px;
-  /* box-shadow: 1px 1px; 그림자 효과 */
   border: 1px solid #b0bec5;
-  margin-left: 13%;
-  margin-top: 5px;
-  margin-bottom: 5px;
+  margin: 5px 0 5px 10px;
 }
 .sampleData:hover {
   box-shadow: 1px 1px 3px #b0bec5; /* 그림자 효과 */

diff --git a/summe/src/component/button/Return2InputButton.jsx b/summe/src/component/button/Return2InputButton.jsx
@@ -1,11 +1,12 @@
+import "./Button.css";
 export default function Return2InputButton({ setIsGraph }) {
     const handleClick = () => {
         setIsGraph(false);
     };
 
     return (
         <>
-            <button onClick={handleClick}>Return To Input</button>
+            <button className="returnInputButton" onClick={handleClick}>Return To Input</button>
         </>
     );
 }
diff --git a/summe/src/page/main/Main.jsx b/summe/src/page/main/Main.jsx
@@ -33,19 +33,21 @@ export default function Main() {
       <div style={{ textAlign: "center" }}>
         <SummeLogo />
 
-        <SampleData setInput={setInput} />
-        {input.map((e, i) => {
-          return (
-            <InputLink
-              key={i + 1}
-              input={e}
-              setInput={(e) => {
-                setInput(input.map((f, j) => (j === i ? e : f)));
-              }}
-            />
-          );
-        })}
-        <AddInputButton setInput={setInput} />
+        <div style={{margin:"auto",width:"calc(50% + 256px)"}}>
+          <SampleData setInput={setInput} />
+          {input.map((e, i) => {
+            return (
+              <InputLink
+                key={i + 1}
+                input={e}
+                setInput={(e) => {
+                  setInput(input.map((f, j) => (j === i ? e : f)));
+                }}
+              />
+            );
+          })}
+          <AddInputButton setInput={setInput} />
+        </div>
         <ViewGraphButton
           input={input}
           setInput={setInput}