From 9a7403f49d88d4cc93aa54236c591bb6cb59584a Mon Sep 17 00:00:00 2001
From: suzinxix <suzinxix@gmail.com>
Date: Sun, 4 Dec 2022 14:31:16 +0900
Subject: [PATCH] [#9] feat: implement youtube popup

---
 bowwowcare/dist/output.css                    | 203 +++++++++---------
 bowwowcare/src/components/Modal/Modal.js      |  22 ++
 .../src/components/Solution/Solution.js       |  49 +++--
 .../Solution/YoutubeEmbed/YoutubeEmbed.js     |  22 ++
 .../Solution/YoutubeEmbed/youtube.css         |  14 ++
 bowwowcare/src/utils/Dictionary.js            |   2 +-
 .../src/views/SolutionPage/SolutionPage.js    |  24 ++-
 7 files changed, 213 insertions(+), 123 deletions(-)
 create mode 100644 bowwowcare/src/components/Modal/Modal.js
 create mode 100644 bowwowcare/src/components/Solution/YoutubeEmbed/YoutubeEmbed.js
 create mode 100644 bowwowcare/src/components/Solution/YoutubeEmbed/youtube.css

diff --git a/bowwowcare/dist/output.css b/bowwowcare/dist/output.css
index 6e488a4..9c3e6cf 100644
--- a/bowwowcare/dist/output.css
+++ b/bowwowcare/dist/output.css
@@ -22,7 +22,7 @@
 
 ::before,
 ::after {
-  --tw-content: '';
+  --tw-content: "";
 }
 
 /*
@@ -41,10 +41,12 @@ html {
   /* 3 */
   tab-size: 4;
   /* 3 */
-  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   /* 4 */
   -webkit-font-feature-settings: normal;
-          font-feature-settings: normal;
+  font-feature-settings: normal;
   /* 5 */
 }
 
@@ -81,7 +83,7 @@ Add the correct text decoration in Chrome, Edge, and Safari.
 
 abbr:where([title]) {
   -webkit-text-decoration: underline dotted;
-          text-decoration: underline dotted;
+  text-decoration: underline dotted;
 }
 
 /*
@@ -125,7 +127,8 @@ code,
 kbd,
 samp,
 pre {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    "Liberation Mono", "Courier New", monospace;
   /* 1 */
   font-size: 1em;
   /* 2 */
@@ -216,9 +219,9 @@ select {
 */
 
 button,
-[type='button'],
-[type='reset'],
-[type='submit'] {
+[type="button"],
+[type="reset"],
+[type="submit"] {
   -webkit-appearance: button;
   /* 1 */
   background-color: transparent;
@@ -265,7 +268,7 @@ Correct the cursor style of increment and decrement buttons in Safari.
 2. Correct the outline style in Safari.
 */
 
-[type='search'] {
+[type="search"] {
   -webkit-appearance: textfield;
   /* 1 */
   outline-offset: -2px;
@@ -350,7 +353,8 @@ textarea {
 2. Set the default placeholder color to the user's configured gray 400 color.
 */
 
-input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
+input::-webkit-input-placeholder,
+textarea::-webkit-input-placeholder {
   opacity: 1;
   /* 1 */
   color: #9ca3af;
@@ -418,7 +422,9 @@ video {
   display: none;
 }
 
-*, ::before, ::after {
+*,
+::before,
+::after {
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
   --tw-translate-x: 0;
@@ -428,16 +434,16 @@ video {
   --tw-skew-y: 0;
   --tw-scale-x: 1;
   --tw-scale-y: 1;
-  --tw-pan-x:  ;
-  --tw-pan-y:  ;
-  --tw-pinch-zoom:  ;
+  --tw-pan-x: ;
+  --tw-pan-y: ;
+  --tw-pinch-zoom: ;
   --tw-scroll-snap-strictness: proximity;
-  --tw-ordinal:  ;
-  --tw-slashed-zero:  ;
-  --tw-numeric-figure:  ;
-  --tw-numeric-spacing:  ;
-  --tw-numeric-fraction:  ;
-  --tw-ring-inset:  ;
+  --tw-ordinal: ;
+  --tw-slashed-zero: ;
+  --tw-numeric-figure: ;
+  --tw-numeric-spacing: ;
+  --tw-numeric-fraction: ;
+  --tw-ring-inset: ;
   --tw-ring-offset-width: 0px;
   --tw-ring-offset-color: #fff;
   --tw-ring-color: rgb(59 130 246 / 0.5);
@@ -445,24 +451,24 @@ video {
   --tw-ring-shadow: 0 0 #0000;
   --tw-shadow: 0 0 #0000;
   --tw-shadow-colored: 0 0 #0000;
-  --tw-blur:  ;
-  --tw-brightness:  ;
-  --tw-contrast:  ;
-  --tw-grayscale:  ;
-  --tw-hue-rotate:  ;
-  --tw-invert:  ;
-  --tw-saturate:  ;
-  --tw-sepia:  ;
-  --tw-drop-shadow:  ;
-  --tw-backdrop-blur:  ;
-  --tw-backdrop-brightness:  ;
-  --tw-backdrop-contrast:  ;
-  --tw-backdrop-grayscale:  ;
-  --tw-backdrop-hue-rotate:  ;
-  --tw-backdrop-invert:  ;
-  --tw-backdrop-opacity:  ;
-  --tw-backdrop-saturate:  ;
-  --tw-backdrop-sepia:  ;
+  --tw-blur: ;
+  --tw-brightness: ;
+  --tw-contrast: ;
+  --tw-grayscale: ;
+  --tw-hue-rotate: ;
+  --tw-invert: ;
+  --tw-saturate: ;
+  --tw-sepia: ;
+  --tw-drop-shadow: ;
+  --tw-backdrop-blur: ;
+  --tw-backdrop-brightness: ;
+  --tw-backdrop-contrast: ;
+  --tw-backdrop-grayscale: ;
+  --tw-backdrop-hue-rotate: ;
+  --tw-backdrop-invert: ;
+  --tw-backdrop-opacity: ;
+  --tw-backdrop-saturate: ;
+  --tw-backdrop-sepia: ;
 }
 
 ::-webkit-backdrop {
@@ -475,16 +481,16 @@ video {
   --tw-skew-y: 0;
   --tw-scale-x: 1;
   --tw-scale-y: 1;
-  --tw-pan-x:  ;
-  --tw-pan-y:  ;
-  --tw-pinch-zoom:  ;
+  --tw-pan-x: ;
+  --tw-pan-y: ;
+  --tw-pinch-zoom: ;
   --tw-scroll-snap-strictness: proximity;
-  --tw-ordinal:  ;
-  --tw-slashed-zero:  ;
-  --tw-numeric-figure:  ;
-  --tw-numeric-spacing:  ;
-  --tw-numeric-fraction:  ;
-  --tw-ring-inset:  ;
+  --tw-ordinal: ;
+  --tw-slashed-zero: ;
+  --tw-numeric-figure: ;
+  --tw-numeric-spacing: ;
+  --tw-numeric-fraction: ;
+  --tw-ring-inset: ;
   --tw-ring-offset-width: 0px;
   --tw-ring-offset-color: #fff;
   --tw-ring-color: rgb(59 130 246 / 0.5);
@@ -492,24 +498,24 @@ video {
   --tw-ring-shadow: 0 0 #0000;
   --tw-shadow: 0 0 #0000;
   --tw-shadow-colored: 0 0 #0000;
-  --tw-blur:  ;
-  --tw-brightness:  ;
-  --tw-contrast:  ;
-  --tw-grayscale:  ;
-  --tw-hue-rotate:  ;
-  --tw-invert:  ;
-  --tw-saturate:  ;
-  --tw-sepia:  ;
-  --tw-drop-shadow:  ;
-  --tw-backdrop-blur:  ;
-  --tw-backdrop-brightness:  ;
-  --tw-backdrop-contrast:  ;
-  --tw-backdrop-grayscale:  ;
-  --tw-backdrop-hue-rotate:  ;
-  --tw-backdrop-invert:  ;
-  --tw-backdrop-opacity:  ;
-  --tw-backdrop-saturate:  ;
-  --tw-backdrop-sepia:  ;
+  --tw-blur: ;
+  --tw-brightness: ;
+  --tw-contrast: ;
+  --tw-grayscale: ;
+  --tw-hue-rotate: ;
+  --tw-invert: ;
+  --tw-saturate: ;
+  --tw-sepia: ;
+  --tw-drop-shadow: ;
+  --tw-backdrop-blur: ;
+  --tw-backdrop-brightness: ;
+  --tw-backdrop-contrast: ;
+  --tw-backdrop-grayscale: ;
+  --tw-backdrop-hue-rotate: ;
+  --tw-backdrop-invert: ;
+  --tw-backdrop-opacity: ;
+  --tw-backdrop-saturate: ;
+  --tw-backdrop-sepia: ;
 }
 
 ::backdrop {
@@ -522,16 +528,16 @@ video {
   --tw-skew-y: 0;
   --tw-scale-x: 1;
   --tw-scale-y: 1;
-  --tw-pan-x:  ;
-  --tw-pan-y:  ;
-  --tw-pinch-zoom:  ;
+  --tw-pan-x: ;
+  --tw-pan-y: ;
+  --tw-pinch-zoom: ;
   --tw-scroll-snap-strictness: proximity;
-  --tw-ordinal:  ;
-  --tw-slashed-zero:  ;
-  --tw-numeric-figure:  ;
-  --tw-numeric-spacing:  ;
-  --tw-numeric-fraction:  ;
-  --tw-ring-inset:  ;
+  --tw-ordinal: ;
+  --tw-slashed-zero: ;
+  --tw-numeric-figure: ;
+  --tw-numeric-spacing: ;
+  --tw-numeric-fraction: ;
+  --tw-ring-inset: ;
   --tw-ring-offset-width: 0px;
   --tw-ring-offset-color: #fff;
   --tw-ring-color: rgb(59 130 246 / 0.5);
@@ -539,24 +545,24 @@ video {
   --tw-ring-shadow: 0 0 #0000;
   --tw-shadow: 0 0 #0000;
   --tw-shadow-colored: 0 0 #0000;
-  --tw-blur:  ;
-  --tw-brightness:  ;
-  --tw-contrast:  ;
-  --tw-grayscale:  ;
-  --tw-hue-rotate:  ;
-  --tw-invert:  ;
-  --tw-saturate:  ;
-  --tw-sepia:  ;
-  --tw-drop-shadow:  ;
-  --tw-backdrop-blur:  ;
-  --tw-backdrop-brightness:  ;
-  --tw-backdrop-contrast:  ;
-  --tw-backdrop-grayscale:  ;
-  --tw-backdrop-hue-rotate:  ;
-  --tw-backdrop-invert:  ;
-  --tw-backdrop-opacity:  ;
-  --tw-backdrop-saturate:  ;
-  --tw-backdrop-sepia:  ;
+  --tw-blur: ;
+  --tw-brightness: ;
+  --tw-contrast: ;
+  --tw-grayscale: ;
+  --tw-hue-rotate: ;
+  --tw-invert: ;
+  --tw-saturate: ;
+  --tw-sepia: ;
+  --tw-drop-shadow: ;
+  --tw-backdrop-blur: ;
+  --tw-backdrop-brightness: ;
+  --tw-backdrop-contrast: ;
+  --tw-backdrop-grayscale: ;
+  --tw-backdrop-hue-rotate: ;
+  --tw-backdrop-invert: ;
+  --tw-backdrop-opacity: ;
+  --tw-backdrop-saturate: ;
+  --tw-backdrop-sepia: ;
 }
 
 .container {
@@ -986,16 +992,19 @@ video {
 }
 
 .accent-main-color {
-  accent-color: #38A8AC;
+  accent-color: #38a8ac;
 }
 
 .shadow-lg {
-  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
+    0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),
+    0 4px 6px -4px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
+    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
 .hover\:border-main-color:hover {
   --tw-border-opacity: 1;
   border-color: rgb(56 168 172 / var(--tw-border-opacity));
-}
\ No newline at end of file
+}
diff --git a/bowwowcare/src/components/Modal/Modal.js b/bowwowcare/src/components/Modal/Modal.js
new file mode 100644
index 0000000..df2d7cd
--- /dev/null
+++ b/bowwowcare/src/components/Modal/Modal.js
@@ -0,0 +1,22 @@
+import React  from "react";
+import { IoIosClose } from "react-icons/io";
+
+function Modal(props) {
+  return props.trigger ? (
+    <div className="fixed top-0 left-0 w-full h-screen bg-neutral-500/50 flex justify-center items-center ">
+      <div className="px-1 py-6 w-11/12 bg-white rounded-md">
+        <div className="relative flex mx-4">
+          <div className=" w-5/6 text-left">{props.solution}</div>
+          <button className="absolute top-0 right-0" onClick={() => props.setTrigger(false)}>
+            <IoIosClose className="" size="2rem" />
+          </button>
+        </div>
+        <div className="m-4">{props.children}</div>
+      </div>
+    </div>
+  ) : (
+    ""
+  );
+}
+
+export default Modal;
diff --git a/bowwowcare/src/components/Solution/Solution.js b/bowwowcare/src/components/Solution/Solution.js
index fc7ae5f..7010d85 100644
--- a/bowwowcare/src/components/Solution/Solution.js
+++ b/bowwowcare/src/components/Solution/Solution.js
@@ -1,25 +1,42 @@
-import React from "react";
+import React, { useState } from "react";
 
+import Modal from "../Modal/Modal";
+import YoutubeEmbed from "./YoutubeEmbed/YoutubeEmbed";
 import { solutions } from "../../utils/Dictionary";
 
+import "./YoutubeEmbed/youtube.css";
+
 function Solution({ answer, emotion }) {
+  const [popup, setPopup] = useState(false);
+
   return (
     <div>
-      <div>
-        {solutions[emotion]?.map((x) => {
-          if (answer === x.id) {
-            return (
-              <div key={answer} className="shadow-lg rounded-2xl px-6 py-8">
-                <div>{x.question}</div>
-                <div>{x.solution}</div>
-                <button className="h-12 mt-8 rounded-md bg-main-color border-2 border-main-color text-white text-center px-4">
-                  실천하기
-                </button>
-              </div>
-            );
-          }
-        })}
-      </div>
+      {solutions[emotion]?.map((x) => {
+        if (answer === x.id) {
+          return (
+            <div
+              key={answer}
+              className="w-64 text-center shadow-lg rounded-2xl px-6 py-8"
+            >
+              <div className="font-bold">{x.question}</div>
+              <div>{x.solution}</div>
+              <button
+                onClick={() => setPopup(true)}
+                className="h-12 mt-8 px-4 rounded-md text-center bg-white border border-main-color text-main-color hover:bg-main-color hover:text-white"
+              >
+                <div className="hover:text-white">실천하기</div>
+              </button>
+              <Modal
+                trigger={popup}
+                setTrigger={setPopup}
+                solution={x.solution}
+              >
+                <YoutubeEmbed embedId="w7aE4ihj7Ao" />
+              </Modal>
+            </div>
+          );
+        }
+      })}
     </div>
   );
 }
diff --git a/bowwowcare/src/components/Solution/YoutubeEmbed/YoutubeEmbed.js b/bowwowcare/src/components/Solution/YoutubeEmbed/YoutubeEmbed.js
new file mode 100644
index 0000000..47b3563
--- /dev/null
+++ b/bowwowcare/src/components/Solution/YoutubeEmbed/YoutubeEmbed.js
@@ -0,0 +1,22 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+const YoutubeEmbed = ({ embedId }) => (
+  <div className="video-responsive">
+    <iframe
+      width="560"
+      height="315"
+      src={`https://www.youtube.com/embed/${embedId}`}
+      frameBorder="0"
+      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+      allowFullScreen
+      title="Embedded youtube"
+    />
+  </div>
+);
+
+YoutubeEmbed.propTypes = {
+  embedId: PropTypes.string.isRequired
+};
+
+export default YoutubeEmbed;
diff --git a/bowwowcare/src/components/Solution/YoutubeEmbed/youtube.css b/bowwowcare/src/components/Solution/YoutubeEmbed/youtube.css
new file mode 100644
index 0000000..3ef4927
--- /dev/null
+++ b/bowwowcare/src/components/Solution/YoutubeEmbed/youtube.css
@@ -0,0 +1,14 @@
+.video-responsive {
+    overflow: hidden;
+    padding-bottom: 56.25%;
+    position: relative;
+    height: 0;
+  }
+  
+  .video-responsive iframe {
+    left: 0;
+    top: 0;
+    height: 100%;
+    width: 100%;
+    position: absolute;
+  }
\ No newline at end of file
diff --git a/bowwowcare/src/utils/Dictionary.js b/bowwowcare/src/utils/Dictionary.js
index a58a6a8..c53506d 100644
--- a/bowwowcare/src/utils/Dictionary.js
+++ b/bowwowcare/src/utils/Dictionary.js
@@ -53,7 +53,7 @@ export const solutions = {
         {
             id: "3",
             question:"차에 탔어요",
-            solution: "목욕을 싫어하지 않도록 먼저 샴푸를 쓰지 않는 목욕을 목표로 도전해보세요"
+            solution: "TTouch 마사지를 해보세요"
         },
         {
             id: "4",
diff --git a/bowwowcare/src/views/SolutionPage/SolutionPage.js b/bowwowcare/src/views/SolutionPage/SolutionPage.js
index 36ed9a4..6406a86 100644
--- a/bowwowcare/src/views/SolutionPage/SolutionPage.js
+++ b/bowwowcare/src/views/SolutionPage/SolutionPage.js
@@ -2,7 +2,8 @@ import React, { useState, useEffect } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 
 import Header from "../../components/Header";
-import Solution from "../../components/Solution/Solution"
+import Solution from "../../components/Solution/Solution";
+import { solutions } from "../../utils/Dictionary";
 
 function SolutionPage() {
   const location = useLocation();
@@ -19,18 +20,23 @@ function SolutionPage() {
 
   return (
     <div className="mx-8">
-        <Header />
+      <Header />
+      <div className="grid justify-center">
         {Object.entries(location?.state?.answer).map(([key, value]) => {
-          if(value==="예"){
-            return(
-              <div key={key}>{key}번 
-              <Solution answer={key} emotion={emotion}/>
+          if (value === "예") {
+            return (
+              <div
+                key={key}
+                className="mb-10"
+              >
+                <Solution answer={key} emotion={emotion} />
               </div>
-            )
+            );
           }
-})}
+        })}
+      </div>
     </div>
   );
 }
 
-export default SolutionPage;
\ No newline at end of file
+export default SolutionPage;