TIL #44 React 아웃소싱 프로젝트-2

하루 하나씩 작성하는 TIL #44

---

6/18 (수)

임시 데이터로 받아오던 값을 supabase에서 받아오도록 수정하였다.

로그인 정보가 없을 시 헤더에 로그인 버튼
로그인 정보가 있을 시 마이페이지 로그아웃 버튼을 구현하였다.

---

현 파일 구조.

---

MyPage

import React, { useState, useEffect } from 'react';
import SavedShopsList from './SavedShopsList.jsx';
import ReviewsList from './ReviewsList.jsx';
import { getUserInfo } from '../../api/auth';

const MyPage = () => {
  const [nickname, setNickname] = useState('');
  const [userId, setUserId] = useState('');

  const fetchNickname = async () => {
    try {
      const userInfo = JSON.parse(localStorage.getItem('userInfo'));
      if (!userInfo || !userInfo.id) {
        console.error('No user info found in localStorage.');
        return;
      }

      const userId = userInfo.id;
      const user = await getUserInfo(userId); // getUserInfo 함수 호출

      if (user) {
        setNickname(user.nickname);
        setUserId(userId);
      } else {
        console.error('유저 정보를 불러오는데 실패했습니다.');
      }
    } catch (error) {
      console.error('닉네임을 불러오는데에 실패했습니다.', error.message);
    }
  };

  useEffect(() => {
    fetchNickname();
  }, []);

  return (
    <div className="w-full min-h-screen flex flex-col items-center"> 
      <div className="container bg-[#E5E1EF] p-4 rounded shadow mt-16 mb-20 w-3/4"> 
        <h1 className="text-3xl font-bold mb-10">💜{nickname || 'Loading...'}💜</h1>
        <div className="my-4">
          <h2 className="text-xl font-semibold mb-4">
            닉네임 💜{nickname || 'Loading...'}💜님의 찜 목록
          </h2>
          <div className="p-4 bg-gray-100 rounded shadow min-h-40 mb-8"> 
            <SavedShopsList userId={userId} /> 
          </div>
        </div>
        <div className="my-4">
          <h2 className="text-xl font-semibold mb-4">
            닉네임 💜{nickname || 'Loading...'}💜님이 작성한 리뷰
          </h2>
          <div className="p-4 bg-gray-100 rounded shadow min-h-40 mb-4">
            <ReviewsList userId={userId} />
          </div>
        </div>
      </div>
    </div>
  );
};

export default MyPage;

---

ReviewsList

import React, { useState, useEffect } from 'react';
import supabase from '../../supabase/supabaseClient';

const ReviewsList = ({ userId }) => {
  const [reviews, setReviews] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchReviews = async () => {
      try {
        const { data, error } = await supabase
          .from('reviews')
          .select('id, content, created_at')
          .eq('user_id', userId);

        if (error) {
          throw error;
        }

        setReviews(data);
      } catch (error) {
        console.error('리뷰를 불러오는 데 실패했습니다:', error.message);
      } finally {
        setLoading(false);
      }
    };

    if (userId) {
      fetchReviews();
    }
  }, [userId]);

  if (loading) {
    return <div>Loading...</div>;
  }

  return (
    <ul className="list-none">
      {reviews.map((review) => (
        <li key={review.id} className="p-2 bg-white rounded shadow mb-2">
          <p>{review.content}</p>
          <small>{new Date(review.created_at).toLocaleDateString()}</small>
        </li>
      ))}
    </ul>
  );
};

export default ReviewsList;

---

SavedShopList.jsx

import React, { useState, useEffect } from 'react';
import supabase from '../../supabase/supabaseClient';

const SavedShopsList = ({ userId }) => {
  const [shops, setShops] = useState([]);
  const [loading, setLoading] = useState(true);

  const fetchSavedShops = async () => {
    try {
      // likes 테이블에서 shop_name 가져오기
      const { data, error } = await supabase
        .from('likes')
        .select('shop_name')
        .eq('user_id', userId);

      if (error) {
        throw error;
      }

      const shopNames = data.map((item) => item.shop_name);

      setShops(shopNames);
    } catch (error) {
      console.error('찜한 상점을 불러오는 데 실패했습니다:', error.message);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    if (userId) {
      fetchSavedShops();
    }
  }, [userId]);

  if (loading) {
    return <div>Loading...</div>;
  }

  return (
    <ul className="list-none">
      {shops.map((shopName, index) => (
        <li key={index} className="p-2 bg-white rounded shadow mb-2">{shopName}</li>
      ))}
    </ul>
  );
};

export default SavedShopsList;

---

테스트 모습