[Mission003] 자바스크립트로 Form 과 Modal 에 대한 UI 만들기

mission003/ganeodolu/css/index.css

@@ -0,0 +1,171 @@
+/*mdc override*/
+:root {
+  --mdc-theme-primary: #333;
+}
+
+.mdc-button__raised:not(:disabled), .mdc-button__unelevated:not(:disabled) {
+  background-color: var(--mdc-theme-primary,#333);
+}
+
+.mdc-dialog__surface {
+  width: 400px;
+}
+
+.mdc-card__actions {
+  padding: 0;
+}
+
+.mdc-text-field {
+  margin: 10px auto;
+}
+
+.mdc-dialog__actions {
+  padding-right: 0;
+}
+/*mdc override*/
+
+body {
+  margin: 0;
+  background-color: darkslategrey;
+}
+
+.dark-overlay {
+  width: 100%;
+  background-color: rgba(0,0,0,.2);
+  height: 50vh;
+  z-index: 10;
+}
+
+.signup-card {
+  max-width: 400px;
+  margin: 100px auto;
+}
+
+.signup-card h2{
+  margin-top: 32px;
+}
+
+form.signup {
+  padding: 24px;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.hidden {
+  display: none;
+}
+
+.bullet-o{
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: center;
+}
+
+.bullet-o > div{
+  height: 15px;
+  width: 15px;
+  margin: 20px 10px;
+  border-radius: 100px;
+  z-index: 2;
+}
+
+.bullet{
+  background-color: lightgrey;
+
+}
+
+.bullet-active{
+  background-color: #333 !important;
+}
+
+.bullet-line{
+  opacity: 0.3;
+  background: lightgrey;
+  height: 3px;
+  width: 70px;
+  display: block;
+  left: 50%;
+  margin-top: -29px;
+  margin-left: -35px;
+  position: absolute;
+  z-index: 1;
+}
+
+.pdd-top-0 {
+  padding-top: 0px !important;
+}
+
+.width-100 {
+  width: 100%;
+}
+
+.flex-container {
+  display: flex;
+}
+
+.mrg-right-10 {
+  margin-right: 10px;
+}
+
+#add-family-button {
+  display: block;
+  margin: 0 auto;
+}
+
+.stepper {
+  position: relative;
+}
+
+.coffee-emoji {
+  font-size: 100px;
+  margin: 40px 0 70px 0;
+}
+
+.margin-center {
+  margin: 0% auto;
+}
+
+.my-info-view-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+}
+
+.text-bold {
+  font-weight: bold;
+}
+
+.my-info {
+  padding: 30px;
+}
+
+.my-info-card {
+  width: 400px;
+  padding: 30px;
+  position: relative;
+}
+
+#my-info-edit-button {
+  top: 16px;
+  right: 16px;
+  position: absolute;
+}
+
+.no-margin {
+  margin: 0px;
+}
+
+.margin-16 {
+  margin: 16px;
+}
+
+.margin-8 {
+  margin: 8px;
+}
+
+.text-gray {
+  color: gray;
+}

mission003/ganeodolu/form/FamilyForm.js

@@ -0,0 +1,44 @@
+import { renderedFamilyTemplate } from '../js/template.js'
+import { TITLENAME } from '../js/constant.js';
+
+export default function FamilyForm(
+    {
+        $targetTitle,
+        $targetAddFamilyFormData,
+        $targetAddFamilyButton,
+        $targetFamilyContainer,
+        $targetCompleteButton,
+        $targetStep2,
+        $targetStep3,
+        data
+    }) {
+    this.data = data;
+
+    let renderedHTMLFamily = ``
+    let familyName = $targetFamilyContainer[0];
+    let familyRelation = $targetFamilyContainer[1];
+
+    $targetAddFamilyButton.addEventListener('click', (e) => {
+        $targetFamilyContainer = document.querySelectorAll('.flex-container div input')
+        e.preventDefault()
+        if (familyName.value && familyRelation.value) {
+            renderedHTMLFamily = renderedFamilyTemplate(renderedHTMLFamily, $targetFamilyContainer)
+            this.data['Family']['name'].push(familyName.value)
+            this.data['Family']['relation'].push(familyRelation.value)
+            familyName.value = ''
+            familyRelation.value = ''
+            familyName.focus()
+        }
+        $targetAddFamilyFormData.innerHTML = renderedHTMLFamily
+        mdc.autoInit()
+    })
+
+    $targetCompleteButton.addEventListener('click', (e) => {
+        e.preventDefault()
+        if (e.target.classList.contains('done')) {
+            $targetStep2.classList.add('hidden')
+            $targetTitle.textContent = TITLENAME.SETP3
+            $targetStep3.classList.remove('hidden')
+        }
+    })
+}

mission003/ganeodolu/form/MyInfoForm.js

@@ -0,0 +1,24 @@
+import { renderedMyInfoTemplate } from '../js/template.js'
+import { TITLENAME } from '../js/constant.js';
+
+export default function MyInfoForm({ $targetTitle, $targetMyInfo, $targetCompleteButton, $targetStep1, $targetStep3, dialog, data }) {
+    this.data = data;
+    this.dialog = dialog;
+
+    $targetCompleteButton.addEventListener('click', (e) => {
+        e.preventDefault()
+        if (e.target.classList.contains('done')) {
+            $targetStep3.classList.add('hidden')
+
+            $targetMyInfo.innerHTML = renderedMyInfoTemplate(this.data)
+
+            const $targetMyInfoEdit = document.querySelector('#my-info-edit-button')
+            $targetMyInfoEdit.addEventListener('click', (e) => {
+                this.dialog.open()
+                mdc.autoInit()
+                $targetStep1.classList.remove('hidden')
+                $targetTitle.textContent = TITLENAME.STEP1
+            })
+        }
+    })
+}

mission003/ganeodolu/form/UserForm.js

@@ -0,0 +1,57 @@
+import { FORMNAME, TITLENAME, INPUTCOUNT } from '../js/constant.js'
+
+export default function UserForm({ $targetTitle, $targetUserForm, $targetInput, $targetPhone, $targetEmail, $targetIntroduce, $targetAgreement, $targetCheckBox, $targetCompleteButton, $targetStep1, $targetStep2, data }) {
+    this.data = data;
+    let agreementCheck = false;
+
+    function areFilledEmailAndPhoneForm(name, $target){
+        if (name === FORMNAME.EMAIL || name === FORMNAME.PHONE) {
+            if ($targetPhone.value || $targetEmail.value) {
+                $target.classList.remove('hidden')
+            } else {
+                $target.classList.add('hidden')
+            }
+        }
+    }
+
+    function areFilledAllForm(){
+        let count = 0;
+        for (let inputIndex = 0; inputIndex < $targetInput.length; inputIndex++) {
+            if ($targetInput[inputIndex].value) {
+                count++
+            }
+        }
+        if (count === INPUTCOUNT.ALL && agreementCheck) {
+            $targetCompleteButton.classList.remove('hidden')
+        } else {
+            $targetCompleteButton.classList.add('hidden')
+        }
+    }
+
+    $targetUserForm.addEventListener('change', (e) => {
+        let eventName = e.target.name
+        areFilledEmailAndPhoneForm(eventName, $targetAgreement)
+        areFilledAllForm()
+    })
+
+    $targetCheckBox.addEventListener('click', (e) => {
+        agreementCheck = !agreementCheck
+        areFilledAllForm()
+    })
+
+    $targetCompleteButton.addEventListener('click', (e) => {
+        e.preventDefault()
+        for (let inputIndex = 0; inputIndex < INPUTCOUNT.ALL_EXCEPT_PASSWORD; inputIndex++) {
+            data[$targetInput[inputIndex].name] = $targetInput[inputIndex].value
+            if ($targetInput[inputIndex].value) {
+                this.data[$targetInput[inputIndex].name] = $targetInput[inputIndex].value
+            }
+        }
+        if (e.target.classList.contains('done') && agreementCheck) {
+            $targetStep1.classList.add('hidden')
+            $targetTitle.textContent = TITLENAME.STEP2
+            $targetStep2.classList.remove('hidden')
+            this.data['introduce'] = $targetIntroduce.value
+        }
+    })
+}