From 8bdc14b90c94656c9b2623bffce1d05309e5697c Mon Sep 17 00:00:00 2001
From: Jiwon <87058411+raipen@users.noreply.github.com>
Date: Sun, 2 Apr 2023 21:54:14 +0900
Subject: [PATCH] Style: sample data button and return input button (#36)

---
 summe/package.json                            |  2 +-
 summe/src/component/InputLink.css             | 27 +++++++++---------
 summe/src/component/InputLink.jsx             |  4 +--
 summe/src/component/button/Button.css         | 17 +++--------
 .../component/button/Return2InputButton.jsx   |  3 +-
 summe/src/page/main/Main.jsx                  | 28 ++++++++++---------
 6 files changed, 38 insertions(+), 43 deletions(-)

diff --git a/summe/package.json b/summe/package.json
index 79dda02..a73b653 100644
--- 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
index ca5a5d9..04b2b59 100644
--- 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
index 8c4ff97..6e671f7 100644
--- 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
index f856ded..945c332 100644
--- 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
index bbc03c4..5c7be13 100644
--- a/summe/src/component/button/Return2InputButton.jsx
+++ b/summe/src/component/button/Return2InputButton.jsx
@@ -1,3 +1,4 @@
+import "./Button.css";
 export default function Return2InputButton({ setIsGraph }) {
     const handleClick = () => {
         setIsGraph(false);
@@ -5,7 +6,7 @@ export default function Return2InputButton({ setIsGraph }) {
 
     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
index 198b7e7..2361b24 100644
--- 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}