MBTI 프로젝트 -(1):json-server와의 통신

뇌절이 와서 코드를 GPT한테 시키는데도 이해가 안 된다. 구조부터 다시 설정해서 다시 짜고있다.

 

json-server를 위한 api 폴더와 testResult.js

 

import axios from "axios";


export const getTestResults = async () => {
  const response = await axios.get(API_URL);
  return response.data;
};

export const createTestResult = async (resultData) => {
  const response = await axios.get(API_URL, resultData);
  return response.data;
};

export const deleteTestResult = async (id) => {
  const response = await axios.delete(`${API_URL}/${id}`);
  return response.data;
};

export const updateTestResultVisibility = async (id, visibility) => {
  const response = await axios.patch(`${API_URL}/${id}`, { visibility });
  return response.data;
};

 

 

이번 프로젝트에서 서버의 역할은 데이터를 단순히 저장하고, 가져오는 역할만을 한다.

먼저 클라이언트에서 테스트 문항에 사용자가 선택을 하고 '제출' 이벤트가 발생하면 createTestResult를 이용하여 서버로 테스트의 결과를 채점하고 전송한다.

 

TestForm, TestPage를 통해 문항을 렌더링하고 TestPage에서는 서버로의 데이터 제출을 담당하도록했다.

 

import { useState } from "react";
import TestForm from "../components/TestForm";
import { calculateMBTI, mbtiDescriptions } from "../utils/mbtiCalculator";
import { createTestResult } from "../api/testResults";
import { useNavigate } from "react-router-dom";

const TestPage = ({ user }) => {
  const navigate = useNavigate();
  const [result, setResult] = useState(null);

  const handleTestSubmit = async (answers) => {
    console.log("Submitted answers:", answers);
    const mbtiResult = calculateMBTI(answers);
    console.log("Calculated MBTI result:", mbtiResult);
    setResult(mbtiResult);

    const testDate = new Date().toISOString();
    console.log("Test date:", testDate);

    const testData = {
      userId: user?.id || "guest",
      result: mbtiResult,
      answers: answers,
      createdAt: testDate,
      isPublic: false,
      description: mbtiDescriptions[mbtiResult] || "해당 성격 유형에 대한 설명이 없습니다.",
    };

    console.log("Data to be sent to API:", testData);

    try {
      await createTestResult(testData);
      console.log("Test result saved successfully:", mbtiResult);
    } catch (error) {
      console.error("Error saving test result:", error);
    }
  };

  const handleNavigateToResults = () => {
    console.log("Navigating to results page with result:", result);
    navigate("/results", { state: { result } });
  };

  return (
    <div className="flex flex-col items-center justify-center w-full bg-white min-h-screen">
      <div className="w-full max-w-lg p-8 bg-slate-200 rounded-lg">
        {!result ? (
          <>
            <h1 className="mb-6 text-3xl font-bold text-primary-color">
              MBTI 테스트
            </h1>
            <TestForm onSubmit={handleTestSubmit} />
          </>
        ) : (
          <>
            <h1 className="mb-6 text-3xl font-bold text-primary-color">
              테스트 결과: {result}
            </h1>
            <p className="mb-6 text-lg text-gray-700">
              {mbtiDescriptions[result] ||
                "해당 성격 유형에 대한 설명이 없습니다."}
            </p>
            <button
              onClick={handleNavigateToResults}
              className="w-full bg-primary-color text-white py-3 rounded-lg font-semibold hover:bg-primary-dark transition duration-300 hover:text-[#FF5A5F]"
            >
              결과 페이지로 이동하기
            </button>
          </>
        )}
      </div>
    </div>
  );
};

export default TestPage;

 

json-server과의 통신을 우선적으로 하므로 주어진 코드가 있었다.

이것마저도 작성 못하는 수준이니 말 다했다.

 

눈 여겨볼 것은 서버로 전송할 데이터이다. API와의 통신은 처음해보는거라 로직이 전혀 세워지지않은 것 같다

 

  const handleTestSubmit = async (answers) => {
    const mbtiResult = calculateMBTI(answers);
    console.log("mbtiResult", mbtiResult);
    setResult(mbtiResult);

    const testDate = new Date().toISOString();
    /* Test 결과는 mbtiResult 라는 변수에 저장이 됩니다. 이 데이터를 어떻게 API 를 이용해 처리 할 지 고민해주세요. */
    const testData = {
      answers: answers,
      result: mbtiResult,
      description: mbtiDescriptions[result],
      createdAt: testDate,
      isPublic: false,
    };
    try {
      await createTestResult(testData);
      console.log(testData);
    } catch (error) {
      console.log(error);
    }
  };

---

지금까지는로컬에서 데이터를 불러와 UI를 구성하는 것이 주로 하던 작업이지만,  json-server를 활용해 API를 직접 호출하고, 데이터를 주고받는 과정이 생각보다 머릿속에서 잘 정리되지 않았다.

그냥 삽질하는 날이었나보다, 도전과제도 할  수 있나 모르겠다 (창@자 빠지게 힘들다)