refactor: Storybook 에러 해결을 위한 Link 래퍼 구현

related on: #22

.vscode/settings.json

@@ -1,3 +1,4 @@
 {
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "liveServer.settings.port": 5501
 }

apps/web/src/app/(onboarding)/onboarding/funnel/page.css.ts

@@ -1,6 +1,6 @@
 import { style } from '@vanilla-extract/css'
 
-import { appearBottom } from '../../../../styles/animations.css'
+import { appearBottom } from '@/styles/animations.css'
 
 export const header = style({
   marginBottom: 40,

apps/web/src/app/(onboarding)/onboarding/funnel/page.tsx

@@ -6,12 +6,13 @@ import {
   SelectBox,
   Text,
 } from '@vook-client/design-system'
-import Link from 'next/link'
 import React from 'react'
 import clsx from 'clsx'
 import { OnboardingFunnel } from '@vook-client/api'
 
-import { appearBottom } from '../../../../styles/animations.css'
+import { Link } from '@/components/Link'
+import { appearBottom } from '@/styles/animations.css'
+
 import { SelectBoxGroup } from '../_components/SelectBoxGroup'
 import { useOnBoarding } from '../_context/useOnboarding'
 import { OnboardingHeader } from '../_components/OnboardingHeader'
@@ -71,8 +72,6 @@ const OnboardingFunnelPage = () => {
     setFunnel(funnel)
   }
 
-  const isStorybook = process.env.IS_STORYBOOK !== undefined
-
   return (
     <div>
       <OnboardingHeader step={1} />
@@ -101,12 +100,12 @@ const OnboardingFunnelPage = () => {
         </SelectBoxGroup>
       </div>
       <div className={buttonGroup}>
-        <Link prefetch={!isStorybook} href="/onboarding/job">
+        <Link href="/onboarding/job">
           <Text type="body-2" color="label-alternative">
             건너뛰기
           </Text>
         </Link>
-        <Link prefetch={!isStorybook} href="/onboarding/job">
+        <Link href="/onboarding/job">
           <Button disabled={selectedFunnel === null} size="middle">
             다음
           </Button>

apps/web/src/app/(onboarding)/onboarding/job/page.css.ts

@@ -1,6 +1,6 @@
 import { style } from '@vanilla-extract/css'
 
-import { appearBottom } from '../../../../styles/animations.css'
+import { appearBottom } from '@/styles/animations.css'
 
 export const header = style({
   marginBottom: 40,

apps/web/src/app/(onboarding)/onboarding/job/page.tsx

@@ -6,11 +6,12 @@ import {
   SelectBox,
   Text,
 } from '@vook-client/design-system'
-import Link from 'next/link'
 import React from 'react'
 import { OnboardingJob, useOnboardingMutation } from '@vook-client/api'
 import { useRouter } from 'next/navigation'
 
+import { Link } from '@/components/Link'
+
 import { SelectBoxGroup } from '../_components/SelectBoxGroup'
 import { useOnBoarding } from '../_context/useOnboarding'
 import { OnboardingHeader } from '../_components/OnboardingHeader'
@@ -88,8 +89,6 @@ const OnboardingJobPage = () => {
     setJob(job)
   }
 
-  const isStorybook = process.env.IS_STORYBOOK !== undefined
-
   return (
     <div>
       <OnboardingHeader step={2} />
@@ -118,17 +117,17 @@ const OnboardingJobPage = () => {
         </SelectBoxGroup>
       </div>
       <div className={buttonGroup}>
-        <Link prefetch={!isStorybook} href="/">
+        <Link href="/">
           <Text type="body-2" color="label-alternative">
             건너뛰기
           </Text>
         </Link>
-        <Link prefetch={!isStorybook} href="/onboarding/funnel">
+        <Link href="/onboarding/funnel">
           <Button filled={false} blueLine={false} size="middle">
             뒤로가기
           </Button>
         </Link>
-        <Link prefetch={!isStorybook} href="/onboarding/job">
+        <Link href="/onboarding/job">
           <Button
             onClick={onSubmitFunnel}
             size="middle"

apps/web/src/components/Link/Link.tsx

@@ -0,0 +1,8 @@
+import React, { PropsWithChildren } from 'react'
+import ActualLink, { LinkProps } from 'next/link'
+
+export const Link = (props: LinkProps & PropsWithChildren) => {
+  const isStorybook = process.env.IS_STORYBOOK !== undefined
+
+  return <ActualLink {...props} prefetch={!isStorybook} />
+}

apps/web/src/components/Link/index.ts

@@ -0,0 +1 @@
+export { Link } from './Link'

apps/workshop/package.json

@@ -42,7 +42,8 @@
     "msw-storybook-addon": "^2.0.2",
     "storybook": "^8.0.10",
     "style-loader": "^4.0.0",
-    "vite": "^4.4.5"
+    "vite": "^4.4.5",
+    "vite-tsconfig-paths": "^4.3.2"
   },
   "msw": {
     "workerDirectory": [

apps/workshop/tsconfig.json

@@ -1,4 +1,13 @@
 {
   "extends": "@vook-client/typescript-config/vite.json",
-  "include": [".storybook/*"]
+  "include": [".storybook/*"],
+  "compilerOptions": {
+    "paths": {
+      "@/providers/*": ["./src/providers/*"],
+      "@/components/*": ["./src/components/*"],
+      "@/styles/*": ["./src/styles/*"],
+      "@/utils/*": ["./src/utils/*"],
+      "@/mocks/*": ["./src/mocks/*"]
+    }
+  }
 }

apps/workshop/vite.config.ts

@@ -1,7 +1,8 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+import tsconfigPaths from 'vite-tsconfig-paths'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), tsconfigPaths()],
 })