Day37_개인프로젝트_MBTI테스트페이지만들기_1

import api from "./api";

// 회원가입 아이디 검증
const validateId = async (email) => {
  const response = await api.get("/users");
  const existingId = response.data.map((user) => user.id);
  if (existingId.includes(email)) {
    throw new Error("이미 사용중인 아이디입니다.");
  }
};

// 회원가입 함수
export const register = async (email, password, nickname) => {
  // 아이디 검증
  await validateId(email);
  const response = await api.post("/users", {
    email,
    password,
    nickname,
  });
  return response.data;
};

// 로그인 함수
export const login = async (email, password) => {
  const response = await api.get("/users", {
    email,
    password,
  });
  const { token } = response.data;
  localStorage.setItem("authToken", token); // 로그인 성공 시 토큰을 localStorage에 저장
  return response.data;
};

// 로그아웃 함수
export const logout = async () => {
  localStorage.removeItem("authToken"); // 토큰을 로컬 스토리지에서 제거
};

// 사용자 프로필 가져오기 함수
export const getUserProfile = async () => {
  const token = localStorage.getItem("authToken");
  if (!token) {
    throw new Error("No token found");
  }

  const response = await api.get("/profile", {
    headers: { Authorization: `Bearer ${token}` },
  });
  return response.data;
};

// 프로필 업데이트 함수
export const updateProfile = async (formData) => {
  const token = localStorage.getItem("authToken");
  if (!token) {
    throw new Error("No token found");
  }

  const response = await api.put("/profile", formData, {
    headers: { Authorization: `Bearer ${token}` },
  });
  return response.data;
};

import React from "react";
import { useParams } from "react-router-dom";
import useBearsStore from "../../zustand/bearsStore";
import { useEffect } from "react";

const Profile = () => {
  const { id } = useParams();
  const { getUserProfile, user, loading, error } = useBearsStore((state) => ({
    getUserProfile: state.getUserProfile,
    user: state.user,
    loading: state.loading,
    error: state.error,
  }));

  useEffect(() => {
    getUserProfile();
  }, [getUserProfile]);
  return (
    <div className="h-[85vh]">
      <p className="mb-4 mt-4 w-[200px] bg-navy text-white mx-auto rounded">
        Profile
      </p>
      {user ? (
        <div>
          <p>ID : {user.id}</p>
          <p>NICKNAME : {user.nickname}</p>
        </div>
      ) : (
        <div>
          <p>NO USER</p>
        </div>
      )}
    </div>
  );
};

export default Profile;