TIL 4주 4일차

프로필 페이지에서 MBTI를 입력하는 칸을 만들었다.

<div class="profile-desc">

            <p id="user-mbti">제 MBTI는 OOOO입니다</p>

            <div id="edit-user-mbti-button-container">

                <button onclick="startMBTIChange()">변경</button>

            </div>

            <p id="user-motd">프로필에 대한 설명</p>

            <div id="edit-user-motd-button-container">

                <button onclick="startMotdChange()">변경</button>

            </div>

        </div>

변경 버튼을 클릭하면 startMBTIChange 함수가 적용된다 

 

-->

window.startMBTIChange = async function() {

    $("#edit-user-mbti-button-container").empty()

    $("#edit-user-mbti-button-container").append(

        `

<input id="new-user-mbti">

<button onclick="onMBTIChanged()">완료</button>

        `

    )

}

id가  "#edit-user-mbti-button-container"

 

에 해당하는 내용을 empty로 비워주고 변경할 내용을 추가하고

onMBTIChanged()  

함수가 적용된다.

 

window.onMBTIChanged = async function() {

    const newMBTI = stripHTMLTags($("#new-user-mbti").val())

    await updateMyProfileMBTI(newMBTI)

    await $("#edit-user-mbti-button-container").empty()

    document.getElementById("user-mbti").innerHTML = newMBTI

    updateUserInfoToCache()

}

 

->>

updateUserInfoToCache()

함수 적용

 

export async function updateMyProfileMBTI(newMBTI) {

    const user = authService.currentUser

    if (user) {

        const docSnap = await getDoc(

            doc(dbService,"userData", user.uid)

        )

        const newName = user.displayName

        const newEmail = user.email

        const newPhotoURL = user.photoURL

        var newMotd = null

        try {

            if (docSnap.exists()) {

                newMotd = docSnap.data()["motd"]

            }

        }

        catch {}

        await setDoc(

            doc(dbService, "userData", user.uid), {

                displayName: newName,

                email: newEmail,

                photoURL: newPhotoURL,

                motd: newMotd,

                mbti: newMBTI

            }

        )

    }

}

export async function getUserMBTI(uid) {

    const user = await getDoc(

        doc(dbService, "userData", uid)

    )

    if (user.exists()) {

        return user.data()["mbti"]

    }

    else {

        return "(mbti)"

    }

}