[Vue3 + vite + tailwindCSS] 다른 유저 프로필 보기

 

현재는 홈에서 다른 유저의 프로필을 클릭했을 때 다른 유저의 프로필을 볼 수 없다. 

 

 

그래서 router의 추가로 

profile/ :uid 파라미터를 주어서 

 

각 유저에 맞게 

프로필을 가져오도록 할거임

 

rotuer-> index.js에서 

router를 추가한다. 

 

  {

    path: "/profile",

    name: "profile",

    component: Profile,

    title: "프로필",

    icon: "far fa-user fa-fw text-2xl",

    meta: { isMenu: true, layout: "DefaultLayout", requireAuth: true },

  },

  {

    path: "/profile/:uid",

    component: Profile,

    icon: "far fa-user fa-fw text-2xl",

    meta: { isMenu: false, layout: "DefaultLayout", requireAuth: true },

  },

 

 

위의 프로필은 menu에 포함되는 것이라서 isMenu를 true로 

아래의 프로필은 각 프로필 이미지를 클릭했을 때 이동하는 페이지로

uid를 파라미터로 넘겨줄거임

 

이는 메뉴가 아니기 때문에 isMenu는 false로 설정한다. 

 

Profile 컴포넌트로 돌아온다./

 

import { useRoute } from "vue-router";

import router from "../router";

 

라우터를 import 해준다. 

 

 

중요한것은 

onBeforeMount 

에서 제일 먼저 해줘야하는 것이 

route에 파라미터의 여부임 

그래서 

router의 params에 uid값이 있을 경우에는 그 값으로 없을 경우에는 현재 currentUser의 uid로 

profileUID를 설정한다.

 

    onBeforeMount(() => {

      const profileUID = route.params.uid ?? currentUser.value.uid;

      //get user

      const userDocRef = doc(db, "users", profileUID);

      const getUserInfo = query(userDocRef);

      const un = onSnapshot(getUserInfo, (doc) => {

        profileUser.value = doc.data();

      });

 

 

그리고 아래의 코드들도 

currentUser.value.uid =>  profileUID로 수정함

      //get tweets

      const tweetsQuery = query(

        collection(db, "tweets"),

        where("uid", "==", profileUID),

        orderBy("created_at", "desc")

      );

 

 

 

프론트 단에서

profileUser가 있을 경우에만 프로필 가져오게 if문을 사용하여 오류 예방

 

그리고 currentUser-> profileUser로 변경한다. 

 

<template>

  <div class="flex flex-1" v-if="profileUser">

    <!-- 프로필 섹션 -->

    <div class="flex-1 flex flex-col border-r border-color">

      <!-- title -->

      <div class="px-3 py-1 flex border-b border-color">

        <button class="mr-4" @click="router.go(-1)">

          <i

            class="fas fa-arrow-left text-primary p-3 py-1 rounded-full hover:bg-blue-50"

          ></i>

        </button>

        <div>

          <div class="font-extrabold text-lg">{{ profileUser.email }}</div>

          <div class="text-xs text-gray">{{ profileUser.num_tweets }} 트윗</div>

        </div>

      </div>

      <!-- 프로필 백그라운드 이미지-->

      <div class="bg-gray-300 h-40 relative flex-none">

        <!-- 프로필이미지 -->

        <div

          class="w-28 h-28 border-4 border-white bg-gray-100 rounded-full absolute -bottom-14 left-2"

        >

          <img

            :src="`${profileUser.profile_image_url}`"

            class="rounded-full opacity-90 hover:opacity-100 cursor-pointer"

          />

        </div>

      </div>

      <!-- 프로필 수정 버튼 -->

      <div class="text-right mr-2 mt-2">

        <button

          class="border border-primary text-primary px-3 py-2 hover:bg-blue-50 font-bold rounded-full text-sm"

        >

          프로필 수정

        </button>

      </div>

      <!-- 유저 정보 -->

      <div class="mx-3 mt-2">

        <div class="font-extrabold text-lg">{{ profileUser.email }}</div>

        <div class="text-gray">@{{ profileUser.username }}</div>

        <div>

          <span class="text-gray">가입일:</span>

          <span class="text-gray">

            {{ moment(profileUser.created_at).format("YYYY년 MM월") }}</span

          >

        </div>

        <div>

          <span class="font-bold mr-1">{{

            profileUser.followings.length

          }}</span>

          <span class="text-gray mr-3">팔로우 중</span>

          <span class="font-bold mr-1">{{ profileUser.followers.length }}</span>

          <span class="text-gray">팔로워</span>

        </div>

      </div>