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

김지환님의 프로필 이미지

작성한 질문수

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

28-01-payment

포트원 imp_uid 관련 문의드려요

24.09.17 22:46 작성

·

49

0

안녕하십니까.

포트원에서 테스트 결제후 받은 imp_uid 값으로 강의 서버의 createPointTransactionOfLoading API에 impUid값을 세팅해서 보내려고 합니다 .

테스트 결제후에 받은 imp_uid 값은 결과값 오는거까지는 잘 되는데, 해당 API에 담아서 보내면 자꾸 404 에러가 뜹니다. 왜 이러는 걸까요 ?

답변 2

2

초무님의 프로필 이미지

2024. 09. 19. 15:03

학습자료에 있는 포트원 key를 사용해야 정상적으로 응답 받을 수 있어요

김지환님의 프로필 이미지
김지환
질문자

2024. 09. 20. 21:06

덕분에 문제를 해결하였습니다 !! 감사드려요 !!

로그님의 프로필 이미지

2024. 09. 27. 15:32

감사드립니다. 저도 해결했어요!!

1

인프런 AI 인턴님의 프로필 이미지

2024. 09. 17. 22:51

안녕하세요, 인프런 AI 인턴입니다. 김지환님.

포트원 결제 후 받은 imp_uid 값을 API에 전송하려고 하시는데, 404 에러가 발생하는 문제에 대해 해결 방법을 알려드리겠습니다.

해당 문제와 관련하여 도움이 될 수 있는 유사한 질문들을 찾아 제공해드립니다.

404 에러는 보통 클라이언트가 요청한 자원(URL)을 서버에서 찾을 수 없을 때 발생합니다. 아래 몇 가지 가능성을 점검해 보세요:

  1. API 경로 확인: createPointTransactionOfLoading API의 경로가 정확한지 확인합니다. 잘못된 경로일 경우 404 에러가 발생합니다.
  2. 서버 상태 확인: 서버가 제대로 작동 중인지 확인합니다. 서버가 꺼져 있거나, 잘못된 포트를 사용 중이라면 404 에러가 발생합니다.
  3. CORS 설정 확인: 서버의 CORS 설정이 적절히 되어 있는지 확인합니다. 클라이언트의 요청이 서버에 의해 거부될 수 있습니다.
  4. 네트워크 요청 방식 확인: 올바른 HTTP 메소드 (GET, POST 등)를 사용하여 요청하고 있는지 확인합니다.
  5. API 문서 참고: 해당 createPointTransactionOfLoading API의 문서나 강의 자료를 참고해서 요청 형식이나 파라미터가 올바른지 확인합니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

김지환님의 프로필 이미지
김지환
질문자

2024. 09. 18. 19:31

해당 사항을 모두 확인하였는데 여전히 404 에러뜹니다. 강의에서 나온거처럼 포트원 테스트 결제로 하고있는데, 테스트 결제로 받은 impUid는 404 에러 뜨는걸까요 ? GraphQL API 문제 페이지에서 createPointTransactionOfLoading API 호출해봐도 404 에러뜹니다. 저의 코드를 보고 답변을 해주시면 감사하겠습니다.

PointModal.index.tsx

const onClickAddPoint = () => {
    const IMP = window.IMP
    IMP.init('imp31236121')
    IMP.request_pay(
      {
        pg: 'kakaopay',
        pay_method: 'card',
        merchant_uid: `payment-${new Date().getTime()}`, // 주문 고유 번호
        name: '마우스',
        amount: selectedPoint,
        buyer_email: 'admin@joonggomarket.com',
        buyer_name: '김지환',
        buyer_tel: '010-5838-5146',
        buyer_addr: '경기도 용인시 기흥구',
        buyer_postcode: '01181',
        m_redirect_url: 'http://localhost:3000/markets', // 모바일에서는 결제시, 페이지 주소가 바뀜. 따라서, 결제 끝나고 돌아갈 주소 입력해야함
      },
      async function (response: any) {
        console.log(response)
        const { success, imp_uid } = response
        if (success) {
          await createPointTransactionOfLoading(imp_uid)
        } else {
          Modal.error({ content: '카카오페이 결제를 정상적으로 처리하지 못하였습니다.' })
        }
      }
    )
  }

useMutationCreatePointTransactionOfLoading.tsx

import { gql, useMutation } from '@apollo/client'
import { Modal } from 'antd'
import type {
  IMutation,
  IMutationCreatePointTransactionOfLoadingArgs,
} from 'src/commons/types/generated/types'
import { useRouter } from 'next/router'
import { FETCH_USER_LOGGEDIN } from '../../quires/user/useQueryFetchUserLoggedIn'

export const CREATE_POINT_TRANSACTION_OF_LOADING = gql`
  mutation createPointTransactionOfLoading($impUid: ID!) {
    createPointTransactionOfLoading(impUid: $impUid) {
      _id
      amount
    }
  }
`

export const useMutationCreatePointTransactionOfLoading = () => {
  const router = useRouter()
  const [createPointTransactionOfLoadingMutation, { loading }] = useMutation<
    Pick<IMutation, 'createPointTransactionOfLoading'>,
    IMutationCreatePointTransactionOfLoadingArgs
  >(CREATE_POINT_TRANSACTION_OF_LOADING)

  const createPointTransactionOfLoading = async (
    impUid: IMutationCreatePointTransactionOfLoadingArgs['impUid']
  ): Promise<void> => {
    try {
      const result = await createPointTransactionOfLoadingMutation({
        variables: {
          impUid,
        },
        refetchQueries: [
          {
            query: FETCH_USER_LOGGEDIN,
          },
        ],
      })
      Modal.success({
        content: `${new Intl.NumberFormat('en-US').format(result?.data.createPointTransactionOfLoading.amount)}원 포인트 충전이 완료되었습니다.`,
      })
    } catch (error) {
      if (error instanceof Error) Modal.error({ content: error.message })
    }
  }

  return { createPointTransactionOfLoading, loading }
}