7. mylog 계정 만들기 - 계정 정보 보기

등록된 계정 정보를 보고 수정도 할 수 있습니다. 구글 계정과 연동할 수도 있고, 로그인 패스워드도 변경할 수 있습니다.

ChatGPT에게 물었습니다.

Use card view to create a screen where you can view and edit account information.

계정 정보를 보고 수정도 할 수 있는 화면은 card view를 사용하여 만들어 줘.

ChatGPT

 

To create a screen where users can view and edit their account information using a card view in Vuetify, we'll follow these steps:
사용자가 Vuetify의 카드 보기를 사용하여 계정 정보를 보고 편집할 수 있는 화면을 만들려면 다음 단계를 따르세요.

1. Set up Vuex Store: Ensure your Vuex store is set up to handle fetching and updating user data.
   Vuex 스토어 설정: Vuex 스토어가 사용자 데이터 가져오기 및 업데이트를 처리하도록 설정되어 있는지 확인하세요.
2. Create a Vuetify Card Component: Design a component with Vuetify that allows users to view and edit their account information.
   Vuetify 카드 구성 요소 만들기: 사용자가 자신의 계정 정보를 보고 편집할 수 있는 Vuetify를 사용하여 구성 요소를 디자인합니다.
3. Enable Editing with Vuetify Form Elements: Use Vuetify form elements inside the card for editing user details.
   Vuetify 양식 요소로 편집 활성화: 사용자 세부 정보를 편집하려면 카드 내부의 Vuetify 양식 요소를 사용하세요.
4. Save Changes to Firestore: Update the user's information in Firestore when they save changes.
   Firestore에 변경사항 저장: 변경사항을 저장할 때 Firestore에서 사용자 정보를 업데이트합니다.

Step-by-Step Implementation 단계별 구현

1. Update Your Vuex Store

1. Vuex 스토어 업데이트

We need to extend the Vuex store to support updating user information.
사용자 정보 업데이트를 지원하려면 Vuex 스토어를 확장해야 합니다.

Update src/store/index.js

Add actions to fetch and update user information in Firestore:
Firestore에서 사용자 정보를 가져오고 업데이트하는 작업을 추가합니다.

// src/store/index.js
import { createStore } from "vuex";
import { auth, db, collection, getDocs, query, where, updateDoc, doc } from "../firebase";
import { createUserWithEmailAndPassword, onAuthStateChanged } from "firebase/auth";

const store = createStore({
  state: {
    user: null,
    error: null,
    userInfo: null,
  },
  mutations: {
    setUser(state, user) {
      state.user = user;
    },
    setError(state, error) {
      state.error = error;
    },
    setUserInfo(state, userInfo) {
      state.userInfo = userInfo;
    },
  },
  actions: {
    async register({ commit }, { email, password, userData }) {
      try {
        const userCredential = await createUserWithEmailAndPassword(auth, email, password);
        const user = userCredential.user;
        commit("setUser", user);
        commit("setError", null);

        const userRef = collection(db, "users");
        await addDoc(userRef, {
          uid: user.uid,
          email: user.email,
          ...userData,
        });
      } catch (error) {
        commit("setError", error.message);
      }
    },
    async fetchUserInfo({ commit, state }) {
      if (!state.user) return;

      try {
        const q = query(collection(db, "users"), where("uid", "==", state.user.uid));
        const querySnapshot = await getDocs(q);
        querySnapshot.forEach((doc) => {
          commit("setUserInfo", { ...doc.data(), id: doc.id });
        });
      } catch (error) {
        commit("setError", error.message);
      }
    },
    async updateUserInfo({ commit }, updatedInfo) {
      try {
        const userDoc = doc(db, "users", updatedInfo.id);
        await updateDoc(userDoc, updatedInfo);
        commit("setUserInfo", updatedInfo);
        commit("setError", null);
      } catch (error) {
        commit("setError", error.message);
      }
    },
    initializeAuth({ commit }) {
      onAuthStateChanged(auth, (user) => {
        if (user) {
          commit("setUser", user);
          this.dispatch("fetchUserInfo");
        } else {
          commit("setUser", null);
          commit("setUserInfo", null);
        }
      });
    },
  },
  getters: {
    getUser(state) {
      return state.user;
    },
    getError(state) {
      return state.error;
    },
    getUserInfo(state) {
      return state.userInfo;
    },
  },
});

export default store;

2. Create the Account Information Component with Edit Capability

2. 편집 기능이 있는 계정 정보 구성 요소 생성

Create a new Vue component using Vuetify that allows users to view and edit their account information.
사용자가 자신의 계정 정보를 보고 편집할 수 있도록 Vuetify를 사용하여 새로운 Vue 구성 요소를 만듭니다.

Create AccountInfoCard.vue

Create a new file AccountInfoCard.vue in the src/components directory:
src/comComponents 디렉터리에 AccountInfoCard.vue라는 새 파일을 만듭니다.

touch src/components/AccountInfoCard.vue

Implement AccountInfoCard.vue

Here’s how you can implement the component using Vuetify's v-card and form elements for editing:
Vuetify의 'v-card' 및 편집용 양식 요소를 사용하여 구성요소를 구현하는 방법은 다음과 같습니다.

<template>
  <v-container>
    <v-row justify="center">
      <v-col cols="12" md="8" lg="6">
        <v-card class="mx-auto" outlined>
          <v-card-title>
            <span class="text-h6">Account Information</span>
          </v-card-title>

          <v-card-text>
            <v-form ref="form" v-model="valid" lazy-validation>
              <!-- Email Field (Non-Editable) -->
              <v-text-field
                label="Email"
                v-model="editableUserInfo.email"
                disabled
                readonly
              ></v-text-field>

              <!-- Name Field -->
              <v-text-field
                label="Name"
                v-model="editableUserInfo.name"
                :rules="[rules.required]"
              ></v-text-field>

              <!-- Age Field -->
              <v-text-field
                label="Age"
                v-model="editableUserInfo.age"
                :rules="[rules.required, rules.numeric]"
                type="number"
              ></v-text-field>
            </v-form>
          </v-card-text>

          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn color="primary" @click="saveChanges" :disabled="!valid">Save</v-btn>
            <v-btn color="grey" @click="cancelEdit">Cancel</v-btn>
          </v-card-actions>

          <v-card-text v-if="error" class="error--text">{{ error }}</v-card-text>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
import { mapActions, mapGetters } from "vuex";

export default {
  data() {
    return {
      editableUserInfo: {
        email: "",
        name: "",
        age: "",
        id: "", // Add an id to identify the document in Firestore
      },
      valid: false,
      rules: {
        required: (value) => !!value || "Required.",
        numeric: (value) => !isNaN(parseInt(value)) || "Must be a number.",
      },
    };
  },
  computed: {
    ...mapGetters(["getUserInfo", "getError"]),
    userInfo() {
      return this.getUserInfo;
    },
    error() {
      return this.getError;
    },
  },
  watch: {
    userInfo: {
      handler(newValue) {
        this.editableUserInfo = { ...newValue }; // Clone the userInfo to editableUserInfo
      },
      immediate: true,
    },
  },
  methods: {
    ...mapActions(["fetchUserInfo", "updateUserInfo"]),
    saveChanges() {
      this.updateUserInfo(this.editableUserInfo);
    },
    cancelEdit() {
      this.editableUserInfo = { ...this.userInfo }; // Reset form to original data
    },
  },
  created() {
    this.fetchUserInfo(); // Fetch user info when the component is created
  },
};
</script>

<style scoped>
.error--text {
  color: red;
}
</style>

3. Register and Use the Component in Your Application

3. 애플리케이션에 구성 요소 등록 및 사용

To use the AccountInfoCard.vue component in your application, include it in your main component or any parent component where you want to display it.
애플리케이션에서 AccountInfoCard.vue 구성 요소를 사용하려면 이를 표시하려는 기본 구성 요소나 상위 구성 요소에 포함하세요.

Update App.vue

Include the AccountInfoCard component in your App.vue:
App.vue에 AccountInfoCard 구성 요소를 포함합니다.

<template>
  <v-app>
    <v-main>
      <AccountInfoCard />
    </v-main>
  </v-app>
</template>

<script>
import AccountInfoCard from "./components/AccountInfoCard.vue";

export default {
  components: {
    AccountInfoCard,
  },
};
</script>

4. Run Your Application

4. 애플리케이션 실행

Make sure everything is set up correctly and run your Vue application:
모든 것이 올바르게 설정되었는지 확인하고 Vue 애플리케이션을 실행하십시오.

npm run serve

Summary 요약

By following these steps, you have created a screen using Vuetify's card view that allows users to view and edit their account information. This component uses Vuex to fetch and update data from Firestore, providing a seamless user experience for managing account details. The card component is interactive, allowing users to update their information directly and save changes back to Firestore.

다음 단계를 수행하면 사용자가 자신의 계정 정보를 보고 편집할 수 있는 Vuetify의 카드 보기를 사용하는 화면이 생성되었습니다. 이 구성요소는 Vuex를 사용하여 Firestore에서 데이터를 가져오고 업데이트하여 계정 세부정보 관리를 위한 원활한 사용자 환경을 제공합니다. 카드 구성요소는 대화형이므로 사용자가 정보를 직접 업데이트하고 변경사항을 Firestore에 다시 저장할 수 있습니다.