yapp-project#15 issue 레시피 등록

See: Github issue yapp-project#15 --------------------------------------- ### 작업파일 * components 폴더 내 파일들 -> commonstep * containers 폴더 내 파일들 -> enrolment --------------------------------------- ### 작업내용 * 저장하기 누를 시 완료 팝업 생성 및 상단 닫기 버튼 위치 클릭 시 닫은 이벤트 구현
Sung-jin · Mar 27, 2019 · 5d6ff96 · 5d6ff96
1 parent e2b7662
commit 5d6ff96
Show file tree

Hide file tree

Showing 3 changed files with 143 additions and 5 deletions.
diff --git a/src/components/CommonStep/CommonStep.jsx b/src/components/CommonStep/CommonStep.jsx
@@ -5,7 +5,7 @@ import { Edit, Button } from "../../components";
 
 const cx = classNames.bind(styles);
 
-const Div = ({ contents, onChangeStepStatus }) => {
+const Div = ({ contents, onChangeStepStatus, onSaveRecipe }) => {
   return (
     <div className={cx("common-container")}>
       <div className={cx("common-container-header")}>
@@ -21,7 +21,7 @@ const Div = ({ contents, onChangeStepStatus }) => {
           <span>STEP 3</span>
         </span>
 
-        <span className={cx("save")}>저장하기</span>
+        <span className={cx("save")} onClick={onSaveRecipe}>저장하기</span>
       </div>
 
       <div className={cx("common-container-body")}>
@@ -31,7 +31,7 @@ const Div = ({ contents, onChangeStepStatus }) => {
 
             <span className={cx("common-container-detail")}>
               <span className={cx("common-container-contour")}></span>
-              
+
               {contents[0].detail}
             </span>
           </div>
@@ -143,6 +143,36 @@ const Div = ({ contents, onChangeStepStatus }) => {
           </div>
         </div>
       </div>
+
+      <div className={cx("done-container close")}>
+        <div className={cx("done-notification-area")}>
+          <span className={cx("done-closeButton")} onClick={onSaveRecipe}></span>
+
+          <span className={cx("done-icon")}></span>
+
+          <span className={cx("done-title")}>Thank you!</span>
+
+          <span className={cx("done-content")}>
+            나만의 레시피가 성공적으로 등록되었습니다!
+            <br></br>
+            많은 사람들과 레시피를 공유해보세요.
+          </span>
+
+          <div className={cx("button-area")}>
+            <Button
+              className={cx("confirm")}
+              value="레시피 확인하기"
+              // onClick={this.onSearh}
+            />
+
+            <Button
+              className={cx("enrollment")}
+              value="새 레시피 등록하기"
+              // onClick={this.onSearh}
+            />
+          </div>
+        </div>
+      </div>
     </div>
   );
 };

diff --git a/src/containers/Enrolment/Enrolment.jsx b/src/containers/Enrolment/Enrolment.jsx
@@ -79,18 +79,26 @@ class Header extends Component {
     }
   };
 
-  common_form = (contents, onChangeStepStatus) => {
+  onSaveRecipe = event => {
+    let doneView = document.querySelector(".done-container");
+
+    doneView.classList.toggle("close");
+  };
+
+  common_form = (contents, onChangeStepStatus, onSaveRecipe) => {
     return [
       <CommonStep
         contents={contents}
         onChangeStepStatus={onChangeStepStatus}
+        onSaveRecipe={onSaveRecipe}
       />
     ];
   };
 
   render() {
     return (
-      <Div className="content" content={this.common_form(this.contents, this.onChangeStepStatus)}></Div>
+      <Div className="content" content={this.common_form(this.contents, this.onChangeStepStatus, this.onSaveRecipe)}></Div>
+
     );
   }
 }

diff --git a/src/containers/Enrolment/Enrolment.scss b/src/containers/Enrolment/Enrolment.scss
@@ -404,4 +404,104 @@
     clear: both;
   }
 
+  .done-container {
+    width: 100%;
+    height: 100%;
+    z-index: 2;
+    position: absolute;
+    top: 0;
+    left: 0;
+    background-color: rgba(0,0,0,0.5);
+
+    .done-notification-area {
+      width: 800px;
+      height: 640px;
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%,-50%);
+      border: 1px solid #707070;
+      border-radius: 20px;
+      background: #fff;
+    }
+
+    .done-closeButton {
+      display: block;
+      position: absolute;
+      width: 20px;
+      height: 20px;
+      right: 25px;
+      top: 25px;
+      border: 1px solid #000;
+      cursor: pointer;
+    }
+
+    .done-icon {
+      display: block;
+      width: 200px;
+      height: 200px;
+      margin-top: 62px;
+      margin-left: auto;
+      margin-right: auto;
+      border: 1px solid #707070;
+      border-radius: 100px;
+      background-color: inherit;
+    }
+
+    .done-title {
+      display: block;
+      margin-top: 15px;
+      font-family: NotoSans;
+      font-size: 80px;
+      font-weight: bold;
+      font-style: normal;
+      font-stretch: normal;
+      line-height: 1.36;
+      letter-spacing: normal;
+      text-align: center;
+      color: #707070;
+    }
+
+    .done-content {
+      display: block;
+      font-family: NanumGothicOTF;
+      font-size: 15px;
+      font-weight: normal;
+      font-style: normal;
+      font-stretch: normal;
+      line-height: 1.67;
+      letter-spacing: normal;
+      text-align: center;
+      color: #707070;
+      white-space: pre-line;
+    }
+
+    .button-area {
+      width: 100%;
+      margin-top: 50px;
+      text-align: center;
+
+      button {
+        display: inline-block;
+        width: 245px;
+        height: 80px;
+        border-radius: 20px;
+        font-family: NanumGothicOTF;
+        font-size: 20px;
+        font-weight: bold;
+        font-style: normal;
+        font-stretch: normal;
+        line-height: 1.5;
+        letter-spacing: normal;
+        text-align: center;
+        color: #707070;
+      }
+
+      button:first-child {
+        margin-right: 80px;
+      }
+    }
+
+  }
+
 }