반환되는 튜플의 1번째 반환값인 `state.step`의 초기값이 `steps` 인자로 전달된 배열의 1번 째 값으로 설정됩니다.

rocky-at-planningo commented 4 months ago

안녕하세요, next14를 지원하는 useFunnel을 찾다가, @CodePsy-2001 님의 next-use-funnel이 훌륭하고, 안정적인 것 같아서 이 라이브러리를 선택하고 사용 중이려고 합니다!

그런데, 제목과 같이 반환되는 튜플의 1번째 반환값인 state.step의 초기값이 steps 인자로 전달된 배열의 1번 째 값으로 설정됩니다.

코드는 아래와 같습니다.

const [Funnel, state, setState] = useFunnel(['step-1', 'step-2', 'step-3'] as const, {
    initialStep: 'step-1',
  }).withState<{}>({});

  console.log(state); // step-2

  return (
    <Funnel>
      <Funnel.Step name="step-1">
        <button
          type="button"
          onClick={() => {
            setState({
              step: 'step-2',
            });
          }}
        >
          go to step-2
        </button>
      </Funnel.Step>
      <Funnel.Step name="step-2">
        <button
          type="button"
          onClick={() => {
            setState({
              step: 'step-3',
            });
          }}
        >
          go to step-3
        </button>
      </Funnel.Step>
      <Funnel.Step name="step-3">
        <button
          type="button"
          onClick={() => {
            setState({
              step: 'step-1',
            });
          }}
        >
          go to step-1
        </button>
      </Funnel.Step>
    </Funnel>
  );

스크린샷

의존성

"dependencies": {
    "@img-comparison-slider/react": "^8.0.1",
    "@supabase/ssr": "^0.1.0",
    "@supabase/supabase-js": "^2.39.4",
    "@tanstack/react-query": "^5.20.2",
    "@vercel/edge": "^1.1.1",
    "blueimp-load-image": "^5.16.0",
    "clsx": "^2.1.0",
    "date-fns": "^3.4.0",
    "downshift": "^9.0.4",
    "framer-motion": "^11.0.24",
    "html2canvas": "^1.4.1",
    "js-cookie": "^3.0.5",
    "jsonwebtoken": "^9.0.2",
    "lodash.clonedeep": "^4.5.0",
    "lodash.isequal": "^4.5.0",
    "next": "14.1.0",
    "next-intl": "^3.7.0",
    "next-use-funnel": "^0.3.2",
    "nextjs-router-events": "^0.0.3",
    "openai": "3.1.0",
    "react": "^18.2.0",
    "react-beautiful-dnd": "^13.1.1",
    "react-dom": "^18.2.0",
    "react-dropzone": "^14.2.3",
    "react-error-boundary": "^4.0.12",
    "react-hook-form": "^7.50.1",
    "react-hot-toast": "^2.4.1",
    "react-joyride": "^2.8.2",
    "react-moveable": "^0.56.0",
    "react-transition-progress": "^0.0.3",
    "react-youtube": "^10.1.0",
    "react-zoom-pan-pinch": "^3.4.3",
    "remark": "^15.0.1",
    "remark-html": "^16.0.1",
    "use-image": "^1.1.1",
    "uuid": "^9.0.1",
    "zustand": "^4.5.0"
  },
  "devDependencies": {
    "@next/bundle-analyzer": "^14.1.0",
    "@svgr/webpack": "^8.1.0",
    "@tanstack/react-query-devtools": "^5.20.2",
    "@testing-library/jest-dom": "^6.4.2",
    "@testing-library/react": "^15.0.5",
    "@types/blueimp-load-image": "^5.16.6",
    "@types/jest": "^29.5.12",
    "@types/js-cookie": "^3.0.6",
    "@types/jsonwebtoken": "^9.0.6",
    "@types/lodash.clonedeep": "^4.5.9",
    "@types/lodash.isequal": "^4.5.8",
    "@types/node": "^20.11.17",
    "@types/react": "^18.2.55",
    "@types/react-beautiful-dnd": "^13.1.8",
    "@types/react-dom": "^18.2.19",
    "@types/uuid": "^9.0.8",
    "@typescript-eslint/eslint-plugin": "^7.0.1",
    "@typescript-eslint/parser": "^7.0.1",
    "autoprefixer": "^10.0.1",
    "eslint": "^8.56.0",
    "eslint-config-next": "14.1.0",
    "eslint-plugin-unicorn": "^51.0.1",
    "eslint-plugin-unused-imports": "^3.0.0",
    "husky": "^9.0.10",
    "ignore-loader": "^0.1.2",
    "jest": "^29.7.0",
    "jest-environment-jsdom": "^29.7.0",
    "lint-staged": "^15.2.2",
    "postcss": "^8",
    "prettier": "^3.2.5",
    "supabase": ">=1.8.1",
    "tailwind-scrollbar": "^3.1.0",
    "tailwindcss": "^3.3.0",
    "ts-node": "^10.9.2",
    "type-fest": "^4.18.2",
    "typescript": "^5.2.2"
  }

추가정보

pathname: /test?type=a
- useFunnel의 1번째 반환값인 setState를 통해 다음 단계로 넘어갈 경우, /test?type=a&funnel-step=step-2로 잘 이동됩니다.

이 훌륭한 라이브러리를 사용하여 제가 마주한 상황을 해결하고 싶은데, 혹시 의심갈만한 부분이 있는지 여쭙고 싶습니다!

감사합니다.

CodePsy-2001 commented 4 months ago

보내주신 코드에서 initialStep 매개변수를 'step-1'으로 전달하셨습니다. "1번째 값"이라고 말씀하셨는데, "0번째 값이 아닌 1번째 값"이라는 의미인가요?

rocky-at-planningo commented 4 months ago

보내주신 코드에서 initialStep 매개변수를 'step-1'으로 전달하셨습니다. "1번째 값"이라고 말씀하셨는데, "0번째 값이 아닌 1번째 값"이라는 의미인가요?

네 말씀 하신 것처럼 "0번째 값이 아닌 1번째 값"이라는 의미입니다!

KIMROTTI commented 3 months ago

@rocky-at-planningo 보내주신 코드에서 이하와 같이 0번째 인덱스 step-1으로 정상 작동하는 것으로 확인됩니다. 오류 재현을 위해 더 상세한 설명이 필요합니다.

initialStep의 테스트 코드는 'src/useRouteFunnel.spec.tsx'에서 확인하실 수 있습니다. https://github.com/CodePsy-2001/next-use-funnel/blob/c4e951e603311df9461d411535e8c88033fa7b83/src/useRouteFunnel.spec.tsx#L38

CodePsy-2001 commented 3 months ago

재현되는 repo 보내주시기 전까지 이슈 닫아두겠습니다.

그리고 next-use-fennel은 peerDependency로 swr을 요구하므로, 사용 전 npm i swr 등으로 swr을 먼저 설치해주시기 바랍니다.

CodePsy-2001 / next-use-funnel