인프런 커뮤니티 질문&답변

호겸님의 프로필 이미지
호겸

작성한 질문수

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

비회원 장바구니 구현 리뷰

해결된 질문

작성

·

756

0

노션에 비회원 장바구니 구현 리뷰 코드 그대로 복붙해서 실행하면 에러400에 화면이 안뜹니다!

 

답변 1

0

안녕하세요!

어떤 상황인지 정확한 파악이 어렵습니다.
코드와 네트워크의 response를 함께 올려주시면 감사하겠습니다.

감사합니다.😂

호겸님의 프로필 이미지
호겸
질문자

 

{"errors":[{"message":"Context creation failed: 토큰 만료","extensions":{"code":"UNAUTHENTICATED","exception":{"stacktrace":["AuthenticationError: Context creation failed: 토큰 만료"," at Object.getUserFromAccessToken (/codecamp_backend_api/dist/common/libraries/security.js:24:15)"," at Object.context (/codecamp_backend_api/dist/common/libraries/configApollo.js:7:35)"," at Object.<anonymous> (/codecamp_backend_api/node_modules/@nestjs/graphql/dist/utils/merge-defaults.util.js:17:39)"," at Generator.next (<anonymous>)"," at /codecamp_backend_api/node_modules/tslib/tslib.js:117:75"," at new Promise (<anonymous>)"," at Object.__awaiter (/codecamp_backend_api/node_modules/tslib/tslib.js:113:16)"," at ApolloServer.moduleOptions.context (/codecamp_backend_api/node_modules/@nestjs/graphql/dist/utils/merge-defaults.util.js:16:54)"," at ApolloServer.<anonymous> (/codecamp_backend_api/node_modules/apollo-server-core/dist/ApolloServer.js:666:38)"," at Generator.next (<anonymous>)"," at fulfilled (/codecamp_backend_api/node_modules/apollo-server-core/dist/ApolloServer.js:5:58)"," at runMicrotasks (<anonymous>)"," at processTicksAndRejections (internal/process/task_queues.js:93:5)"]}}}]}

 

import { useQuery, gql } from "@apollo/client";
import { MouseEvent } from "react";
import {
  type IBoard,
   type IQuery,
   type IQueryFetchBoardsArgs,
} from "../../src/commons/types/generated/types";

const FETCH_BOARDS = gql`
  query fetchBoards($page: Int) {
    fetchBoards(page: $page) {
      _id
      writer
      title
      contents
    }
  }
`;

export default function StaticRoutedPage() {
  const { data } = useQuery<Pick<IQuery, "fetchBoards">, IQueryFetchBoardsArgs>(
    FETCH_BOARDS
  );

  const onClickBasket = (basket: IBoard) => () => {
    console.log(basket);

    // 1. 기존 장바구니 가져오기
    const baskets: Array<Pick<IBoard, "contents" | "title" | "_id" | "writer">> =
      JSON.parse(localStorage.getItem("baskets") ?? "[]");

    // 2. 이미 담겼는지 확인하기
    const temp = baskets.filter((el) => el._id === basket._id);
    if (temp.length === 1) {
      alert("이미 담으신 물품입니다!!!");
      return;
    }

    // 3. 해당 장바구니에 담기
    baskets.push(basket);
    localStorage.setItem("baskets", JSON.stringify(baskets));
  };

  return (
    <>
      {data?.fetchBoards.map((el) => (
        <div key={el._id}>
          <span style={{ margin: "10px" }}>{el.writer}</span>
          <span style={{ margin: "10px" }}>{el.title}</span>
          <button onClick={onClickBasket(el)}>장바구니담기</button>
        </div>
      ))}
    </>
  );
}

에러를 읽어보시면 토큰 만료라고 쓰여있네요!
브라우저의 어플리케이션에서 토큰을 삭제해주시고, 다시 로그인 해주세요!
그리고 실패한 요청을 다시 요청해보시길 바랍니다!

감사합니다.😁

호겸님의 프로필 이미지
호겸

작성한 질문수

질문하기