diff --git a/mission003/ganeodolu/css/index.css b/mission003/ganeodolu/css/index.css new file mode 100644 index 0000000..f89f3f8 --- /dev/null +++ b/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; +} diff --git a/mission003/ganeodolu/form/FamilyForm.js b/mission003/ganeodolu/form/FamilyForm.js new file mode 100644 index 0000000..bb23e85 --- /dev/null +++ b/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') + } + }) +} diff --git a/mission003/ganeodolu/form/MyInfoForm.js b/mission003/ganeodolu/form/MyInfoForm.js new file mode 100644 index 0000000..3ab539c --- /dev/null +++ b/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 + }) + } + }) +} diff --git a/mission003/ganeodolu/form/UserForm.js b/mission003/ganeodolu/form/UserForm.js new file mode 100644 index 0000000..4a2ea48 --- /dev/null +++ b/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 + } + }) +} diff --git a/mission003/ganeodolu/index.html b/mission003/ganeodolu/index.html new file mode 100644 index 0000000..2eb44a5 --- /dev/null +++ b/mission003/ganeodolu/index.html @@ -0,0 +1,130 @@ + + + + + + mission003 + + + + + + + + +
+
+
+
+

회원가입 1/3

+
+ +
+
+
+
+
+ + + + + diff --git a/mission003/ganeodolu/js/App.js b/mission003/ganeodolu/js/App.js new file mode 100644 index 0000000..2cd1063 --- /dev/null +++ b/mission003/ganeodolu/js/App.js @@ -0,0 +1,72 @@ +import UserForm from "../form/UserForm.js" +import FamilyForm from "../form/FamilyForm.js" +import MyInfoForm from "../form/MyInfoForm.js" + +export default function App(data) { + this.dialog = new mdc.dialog.MDCDialog(document.querySelector('.mdc-dialog')) + this.dialog.open() + mdc.autoInit() + this.data = data + + const $targetUserForm = document.querySelector('.user-primary-info-container') + const $targetInput = document.querySelectorAll('.mdc-text-field input') + const $targetPhone = document.getElementById('phone') + const $targetEmail = document.getElementById('email') + const $targetIntroduce = document.getElementById('introduce') + + const $targetAgreement = document.querySelector('.mdc-form-field') + const $targetCheckBox = document.querySelector('.mdc-checkbox') + + const $targetCompleteButton1 = document.querySelector('.step1-complete-btn') + const $targetCompleteButton2 = document.querySelector('.step2-complete-btn') + const $targetCompleteButton3 = document.querySelector('.step3-complete-btn') + + const $targetTitle = document.getElementById('my-dialog-title') + + const $targetStep1 = document.getElementById('step1') + const $targetStep2 = document.getElementById('step2') + const $targetStep3 = document.getElementById('step3') + + const $targetAddFamilyFormData = document.querySelector('.user-family-forms-data') + const $targetAddFamilyButton = document.getElementById('add-family-button') + + const $targetMyInfo = document.querySelector('#my-info-view-card') + + let $targetFamilyContainer = document.querySelectorAll('.flex-container div input') + + const userForm = new UserForm({ + $targetTitle, + $targetUserForm, + $targetInput, + $targetPhone, + $targetEmail, + $targetIntroduce, + $targetAgreement, + $targetCheckBox, + $targetCompleteButton: $targetCompleteButton1, + $targetStep1, + $targetStep2, + data: this.data, + }) + + const familyForm = new FamilyForm({ + $targetTitle, + $targetAddFamilyFormData, + $targetAddFamilyButton, + $targetFamilyContainer, + $targetCompleteButton: $targetCompleteButton2, + $targetStep2, + $targetStep3, + data: this.data, + }) + + const myInfoForm = new MyInfoForm({ + $targetTitle, + $targetMyInfo, + $targetCompleteButton: $targetCompleteButton3, + $targetStep1, + $targetStep3, + dialog: this.dialog, + data: this.data, + }) +} diff --git a/mission003/ganeodolu/js/constant.js b/mission003/ganeodolu/js/constant.js new file mode 100644 index 0000000..5c261ed --- /dev/null +++ b/mission003/ganeodolu/js/constant.js @@ -0,0 +1,17 @@ +const FORMNAME = { + EMAIL: 'email', + PHONE: 'phone' +} + +const TITLENAME = { + STEP1: '회원가입 1/3', + STEP2: '가족 구성원 추가 2/3', + SETP3: '입력완료 3/3' +} + +const INPUTCOUNT = { + ALL_EXCEPT_PASSWORD: 3, + ALL: 4 +} + +export { FORMNAME, TITLENAME, INPUTCOUNT } diff --git a/mission003/ganeodolu/js/main.js b/mission003/ganeodolu/js/main.js new file mode 100644 index 0000000..9e0fe27 --- /dev/null +++ b/mission003/ganeodolu/js/main.js @@ -0,0 +1,9 @@ +import App from './App.js' +let data = { + Family: { + name: [], + relation: [] + } +}; + +new App(data) diff --git a/mission003/ganeodolu/js/template.js b/mission003/ganeodolu/js/template.js new file mode 100644 index 0000000..354639c --- /dev/null +++ b/mission003/ganeodolu/js/template.js @@ -0,0 +1,57 @@ +function renderedFamilyTemplate(renderedHTML, $targetFamilyContainer) { + let FamilyContainerLength = $targetFamilyContainer.length; + return renderedHTML += + ` +
+
+ + +
+
+
+ + +
+
+
+ ` +} + +function renderedMyInfoTemplate(data) { + let familyRelations = data.Family.name.map((val, idx) => `
${val} (${data.Family.relation[idx]})
`).join('') + + return ` +
+
+ +
+

나의 정보

+
+
+
이름
+
${data.name}
+
+
+
이메일
+
${data.email}
+
+
+
전화번호
+
${data.phone}
+
+
+
소개
+
${data.introduce}
+
+
+
가족
+ ${familyRelations} +
+
+
+
+
+ ` +} + +export { renderedFamilyTemplate, renderedMyInfoTemplate }