From 7f0a11d5d49b7776b081a511356c5d44ed54bc92 Mon Sep 17 00:00:00 2001
From: sa_yoshiii <sayako.yoshikawa1129@gmail.com>
Date: Mon, 11 Jul 2022 12:17:35 +0900
Subject: [PATCH] =?UTF-8?q?=E6=A4=9C=E7=B4=A2=E7=B5=90=E6=9E=9C=E4=B8=80?=
 =?UTF-8?q?=E8=A6=A7=E3=83=9A=E3=83=BC=E3=82=B8=E3=83=98=E3=83=83=E3=83=80?=
 =?UTF-8?q?=E3=83=BC=E4=BD=9C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.tsx        | 52 +++++++++++++++++++++++++++++++++++++++-------
 src/utils/media.ts |  5 +++++
 2 files changed, 49 insertions(+), 8 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 1818bbf..cc0e4e6 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -6,6 +6,7 @@ import Button from "./component/Button";
 import Gallery from "./component/Gallery";
 import { color } from "./utils/color";
 import Label from "./component/Label";
+import { contWidth } from "./utils/media";
 // import Setword from "./pages/Setwords";
 // import Result from "./pages/Result";
 
@@ -75,10 +76,15 @@ function App() {
       <GlobalStyle />
       {isDisplay ? (
         <>
+          <SResultHeader>
+            <SContWrap>
+              <SResultHeading>{searchWords}</SResultHeading>
+            </SContWrap>
+          </SResultHeader>
           <Gallery fetchData={fetchData} />
-          <button type="button" onClick={handleDisplay}>
-            表示
-          </button>
+          <Button type="button" variant="outlined" onClick={handleDisplay}>
+            Back to SearchPage
+          </Button>
         </>
       ) : (
         <SContainer>
@@ -106,11 +112,14 @@ function App() {
               </SInputSection>
             </form>
             {searchWords.length !== 0 && (
-              <SLabelWrap>
-                {searchWords.map((word, index) => (
-                  <Label key={index}>{word}</Label>
-                ))}
-              </SLabelWrap>
+              <>
+                <SWordTitle>Setting Words</SWordTitle>
+                <SLabelWrap>
+                  {searchWords.map((word, index) => (
+                    <Label key={index}>{word}</Label>
+                  ))}
+                </SLabelWrap>
+              </>
             )}
             <Button variant="contained" type="button" onClick={handleDisplay}>
               SHOW
@@ -182,10 +191,37 @@ const SInputSection = styled.div`
   margin-bottom: 40px;
   border-bottom: 1px solid ${color.labelcolor};
 `;
+const SWordTitle = styled.h3`
+  font-size: 24px;
+  font-weight: 600;
+  letter-spacing: 0.024em;
+  margin-bottom: 24px;
+`;
 const SLabelWrap = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
   margin-bottom: 40px;
 `;
+const SResultHeader = styled.header`
+  background: ${color.primary};
+  filter: drop-shadow(0 5px 20px rgba(0, 0, 0, 0.1));
+  position: fixed;
+  width: 100%;
+`;
+const SContWrap = styled.div`
+  max-width: ${contWidth.lg + contWidth.lgSpace * 2}px;
+  margin: 0 auto;
+  padding: 0 ${contWidth.lgSpace}px;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  height: 70px;
+`;
+const SResultHeading = styled.h1`
+  color: ${color.secondary};
+  font-size: 42px;
+  font-weight: 400;
+  letter-spacing: 0.01em;
+`;
 export default App;
diff --git a/src/utils/media.ts b/src/utils/media.ts
index 539ae0f..6a46adf 100644
--- a/src/utils/media.ts
+++ b/src/utils/media.ts
@@ -2,6 +2,11 @@ export const breakpoints = {
   sm: 640,
 };
 
+export const contWidth = {
+  lg: 1200,
+  lgSpace: 50,
+};
+
 export const media = (key: keyof typeof breakpoints) => {
   return (style: TemplateStringsArray | String) =>
     `@media (max-width: ${breakpoints[key]}px) { ${style} }`;