diff --git a/src/features/mypage/ui/section/ProjectListSection.tsx b/src/features/mypage/ui/section/ProjectListSection.tsx
index 60d1e5a..1760d98 100644
--- a/src/features/mypage/ui/section/ProjectListSection.tsx
+++ b/src/features/mypage/ui/section/ProjectListSection.tsx
@@ -70,9 +70,18 @@ export const ProjectListSection = () => {
           <ProjectListItem
             key={project.projectId}
             name={project.title}
-            onClick={() =>
-              navigate(DYNAMIC_ROUTE_PATHS.PROJECT_DETAIL(project.projectId))
-            }
+            onClick={() => {
+              if (project.status === "IN_PROGRESS") {
+                navigate(
+                  DYNAMIC_ROUTE_PATHS.UPLOAD_STEP_RESUME_ENTRY(
+                    project.projectId,
+                  ),
+                );
+                return;
+              }
+
+              navigate(DYNAMIC_ROUTE_PATHS.PROJECT_DETAIL(project.projectId));
+            }}
             updatedAt={project.createdAt}
             status={project.status}
             roadmapType={project.roadmapType}
diff --git a/src/features/upload/components/features/index.ts b/src/features/upload/components/features/index.ts
new file mode 100644
index 0000000..56f8211
--- /dev/null
+++ b/src/features/upload/components/features/index.ts
@@ -0,0 +1 @@
+export * from "./upload-step";
diff --git a/src/features/upload/components/features/upload-step/UploadStepIndicator.tsx b/src/features/upload/components/features/upload-step/UploadStepIndicator.tsx
new file mode 100644
index 0000000..308ec3c
--- /dev/null
+++ b/src/features/upload/components/features/upload-step/UploadStepIndicator.tsx
@@ -0,0 +1,89 @@
+import { Box, Flex, Text } from "@chakra-ui/react";
+
+import { ROADMAP_STEP_NAMES } from "@/entities";
+
+type Props = {
+  current: number;
+  stepCodes: string[];
+};
+
+export const UploadStepIndicator = ({ current, stepCodes }: Props) => {
+  return (
+    <Box position="relative" px="88px" w="full">
+      <Flex
+        align="center"
+        justify="space-between"
+        left="88px"
+        maxW="672px"
+        position="absolute"
+        px={12}
+        right="88px"
+        top="22px"
+      >
+        {Array.from({ length: stepCodes.length - 1 }, (_, i) => (
+          <Box key={i} bg="neutral.100" flex={1} h="2px" />
+        ))}
+      </Flex>
+
+      <Flex align="flex-start" justify="space-between" maxW="672px" w="full">
+        {stepCodes.map((code, i) => {
+          const stepId = i + 1;
+          const isActive = stepId === current;
+          const isDone = stepId < current;
+
+          return (
+            <Flex align="center" direction="column" gap={3} key={code} w={24}>
+              <Flex
+                align="center"
+                boxSize={12}
+                justify="center"
+                position="relative"
+              >
+                <Box
+                  bg={isActive ? "seed" : "neutral.100"}
+                  borderRadius="full"
+                  bottom={0}
+                  left={0}
+                  opacity={isActive ? 0.3 : 0.6}
+                  position="absolute"
+                  right={0}
+                  top={0}
+                />
+                <Flex
+                  align="center"
+                  bg={isActive || isDone ? "seed" : "neutral.300"}
+                  borderRadius="full"
+                  boxSize={7}
+                  justify="center"
+                  position="relative"
+                  zIndex={1}
+                >
+                  <Text
+                    color="white"
+                    fontSize="xs"
+                    fontWeight="bold"
+                    lineHeight="16px"
+                    textAlign="center"
+                  >
+                    {stepId}
+                  </Text>
+                </Flex>
+              </Flex>
+
+              <Text
+                color={isActive ? "neutral.900" : "neutral.600"}
+                fontSize="sm"
+                fontWeight={isActive ? "bold" : "medium"}
+                lineHeight="20px"
+                textAlign="center"
+                wordBreak="keep-all"
+              >
+                {ROADMAP_STEP_NAMES[code] ?? code}
+              </Text>
+            </Flex>
+          );
+        })}
+      </Flex>
+    </Box>
+  );
+};
diff --git a/src/features/upload/components/features/upload-step/UploadStepResultInput.tsx b/src/features/upload/components/features/upload-step/UploadStepResultInput.tsx
new file mode 100644
index 0000000..fa20850
--- /dev/null
+++ b/src/features/upload/components/features/upload-step/UploadStepResultInput.tsx
@@ -0,0 +1,57 @@
+import { Box, Text, Textarea, VStack } from "@chakra-ui/react";
+
+type Props = {
+  value: string;
+  onChange: (value: string) => void;
+};
+
+export const UploadStepResultInput = ({ value, onChange }: Props) => {
+  return (
+    <VStack align="flex-start" gap={6} w="full">
+      <Text
+        color="neutral.900"
+        fontSize="2xl"
+        fontWeight="bold"
+        lineHeight="1.4"
+      >
+        작업 결과 입력
+      </Text>
+
+      <Box position="relative" w="full">
+        <Textarea
+          _focusVisible={{
+            outline: "none",
+            boxShadow: "none",
+          }}
+          _placeholder={{ color: "neutral.300" }}
+          bg="neutral.50"
+          border="none"
+          borderRadius="xl"
+          color="neutral.900"
+          fontSize="sm"
+          fontWeight="medium"
+          minH={60}
+          onChange={(e) => onChange(e.target.value)}
+          p={6}
+          placeholder="이전 단계 프롬프트로 얻은 AI의 답변을 여기에 붙여넣어 주세요. 정보를 입력하면 다음 단계 로드맵이 더욱 정교해집니다."
+          resize="vertical"
+          value={value}
+        />
+        <Box
+          backdropFilter="blur(2px)"
+          bg="rgba(255,255,255,0.6)"
+          borderRadius="4px"
+          bottom="20px"
+          position="absolute"
+          px={2}
+          py={1}
+          right="20px"
+        >
+          <Text color="neutral.600" fontSize="xs" fontWeight="medium">
+            Ctrl + V
+          </Text>
+        </Box>
+      </Box>
+    </VStack>
+  );
+};
diff --git a/src/features/upload/components/features/upload-step/index.ts b/src/features/upload/components/features/upload-step/index.ts
new file mode 100644
index 0000000..09b073a
--- /dev/null
+++ b/src/features/upload/components/features/upload-step/index.ts
@@ -0,0 +1,2 @@
+export * from "./UploadStepIndicator";
+export * from "./UploadStepResultInput";
diff --git a/src/features/upload/components/index.ts b/src/features/upload/components/index.ts
new file mode 100644
index 0000000..0e84926
--- /dev/null
+++ b/src/features/upload/components/index.ts
@@ -0,0 +1 @@
+export * from "./features";
diff --git a/src/features/upload/hooks/index.ts b/src/features/upload/hooks/index.ts
new file mode 100644
index 0000000..c8ab502
--- /dev/null
+++ b/src/features/upload/hooks/index.ts
@@ -0,0 +1,5 @@
+export * from "./useUploadStepData";
+export * from "./useUploadStepNavigation";
+export * from "./useUploadStepProject";
+export * from "./useUploadStepResumeRedirect";
+export * from "./useUploadStepSubmission";
diff --git a/src/features/upload/hooks/useUploadStepData.ts b/src/features/upload/hooks/useUploadStepData.ts
new file mode 100644
index 0000000..fab39a7
--- /dev/null
+++ b/src/features/upload/hooks/useUploadStepData.ts
@@ -0,0 +1,63 @@
+import { useEffect, useState } from "react";
+
+import { type ProjectStepResponse, startStepAPI } from "@/entities";
+import { getApiErrorMessage, toaster } from "@/shared";
+
+type Params = {
+  projectId: string;
+  stepCode?: string;
+};
+
+type Result = {
+  stepData: ProjectStepResponse | null;
+  isStepLoading: boolean;
+};
+
+export const useUploadStepData = ({ projectId, stepCode }: Params): Result => {
+  const [stepData, setStepData] = useState<ProjectStepResponse | null>(null);
+  const [isStepLoading, setIsStepLoading] = useState(false);
+
+  useEffect(() => {
+    if (!projectId || !stepCode) {
+      setStepData(null);
+      return;
+    }
+
+    let cancelled = false;
+
+    const fetchStep = async () => {
+      setIsStepLoading(true);
+      setStepData(null);
+
+      try {
+        const data = await startStepAPI({ projectId, stepCode });
+
+        if (!cancelled) {
+          setStepData(data);
+        }
+      } catch (error) {
+        if (!cancelled) {
+          toaster.create({
+            type: "error",
+            description: getApiErrorMessage(error),
+          });
+        }
+      } finally {
+        if (!cancelled) {
+          setIsStepLoading(false);
+        }
+      }
+    };
+
+    void fetchStep();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [projectId, stepCode]);
+
+  return {
+    stepData,
+    isStepLoading,
+  };
+};
diff --git a/src/features/upload/hooks/useUploadStepNavigation.ts b/src/features/upload/hooks/useUploadStepNavigation.ts
new file mode 100644
index 0000000..ae692ce
--- /dev/null
+++ b/src/features/upload/hooks/useUploadStepNavigation.ts
@@ -0,0 +1,31 @@
+import { useCallback } from "react";
+import { useNavigate } from "react-router";
+
+import { DYNAMIC_ROUTE_PATHS, ROUTE_PATHS } from "@/shared";
+
+type Params = {
+  projectId: string;
+  stepNum: number;
+};
+
+type Result = {
+  goToPrevStep: () => void;
+};
+
+export const useUploadStepNavigation = ({
+  projectId,
+  stepNum,
+}: Params): Result => {
+  const navigate = useNavigate();
+
+  const goToPrevStep = useCallback(() => {
+    if (stepNum <= 1) {
+      navigate(ROUTE_PATHS.FILE_UPLOAD);
+      return;
+    }
+
+    navigate(DYNAMIC_ROUTE_PATHS.UPLOAD_STEP(projectId, stepNum - 1));
+  }, [navigate, projectId, stepNum]);
+
+  return { goToPrevStep };
+};
diff --git a/src/features/upload/hooks/useUploadStepProject.ts b/src/features/upload/hooks/useUploadStepProject.ts
new file mode 100644
index 0000000..e33ca2d
--- /dev/null
+++ b/src/features/upload/hooks/useUploadStepProject.ts
@@ -0,0 +1,35 @@
+import {
+  type ProjectDetailResponse,
+  ROADMAP_STEP_CODES,
+  useGetProjectDetail,
+} from "@/entities";
+
+type Params = {
+  projectId: string;
+  stepNum: number;
+};
+
+type Result = {
+  project: ProjectDetailResponse | undefined;
+  steps: string[];
+  stepCode: string | undefined;
+  isLastStep: boolean;
+};
+
+export const useUploadStepProject = ({
+  projectId,
+  stepNum,
+}: Params): Result => {
+  const { data: project } = useGetProjectDetail(projectId);
+  const roadmapType = project?.roadmapType;
+  const steps = roadmapType ? ROADMAP_STEP_CODES[roadmapType] : [];
+  const stepCode = steps[stepNum - 1];
+  const isLastStep = steps.length > 0 && stepNum >= steps.length;
+
+  return {
+    project,
+    steps,
+    stepCode,
+    isLastStep,
+  };
+};
diff --git a/src/features/upload/hooks/useUploadStepResumeRedirect.ts b/src/features/upload/hooks/useUploadStepResumeRedirect.ts
new file mode 100644
index 0000000..4accbbf
--- /dev/null
+++ b/src/features/upload/hooks/useUploadStepResumeRedirect.ts
@@ -0,0 +1,67 @@
+import { useEffect, useMemo } from "react";
+import { useNavigate } from "react-router";
+
+import { useGetProjectDetail } from "@/entities";
+import { DYNAMIC_ROUTE_PATHS } from "@/shared";
+
+type Params = {
+  projectId: string;
+  stepNum: number;
+  enabled: boolean;
+};
+
+type Result = {
+  isResolved: boolean;
+};
+
+export const useUploadStepResumeRedirect = ({
+  projectId,
+  stepNum,
+  enabled,
+}: Params): Result => {
+  const navigate = useNavigate();
+  const shouldResolveResume = enabled && stepNum === 1;
+  const { data: project, isLoading } = useGetProjectDetail(
+    enabled ? projectId : "",
+  );
+
+  const targetStep = useMemo(() => {
+    if (!shouldResolveResume || !project) {
+      return null;
+    }
+
+    const stepResponses = project.stepResponses ?? [];
+
+    if (stepResponses.length === 0) {
+      return stepNum;
+    }
+
+    const nextStepIndex = stepResponses.findIndex(
+      (step) => !step.userSubmittedResult,
+    );
+
+    return nextStepIndex === -1 ? stepResponses.length : nextStepIndex + 1;
+  }, [project, shouldResolveResume, stepNum]);
+
+  useEffect(() => {
+    if (!projectId || targetStep === null || targetStep === stepNum) {
+      return;
+    }
+
+    navigate(DYNAMIC_ROUTE_PATHS.UPLOAD_STEP(projectId, targetStep), {
+      replace: true,
+    });
+  }, [navigate, projectId, stepNum, targetStep]);
+
+  if (!shouldResolveResume) {
+    return { isResolved: true };
+  }
+
+  if (isLoading) {
+    return { isResolved: false };
+  }
+
+  return {
+    isResolved: !project || targetStep === null || targetStep === stepNum,
+  };
+};
diff --git a/src/features/upload/hooks/useUploadStepSubmission.ts b/src/features/upload/hooks/useUploadStepSubmission.ts
new file mode 100644
index 0000000..4e6facc
--- /dev/null
+++ b/src/features/upload/hooks/useUploadStepSubmission.ts
@@ -0,0 +1,89 @@
+import { useCallback, useState } from "react";
+import { useNavigate } from "react-router";
+
+import { completeProjectAPI, saveStepResultAPI } from "@/entities";
+import { DYNAMIC_ROUTE_PATHS, getApiErrorMessage, toaster } from "@/shared";
+
+type Params = {
+  projectId: string;
+  stepNum: number;
+  stepCode?: string;
+  isLastStep: boolean;
+};
+
+type Result = {
+  isSubmitting: boolean;
+  submitStepResult: (resultText: string) => Promise<void>;
+};
+
+export const useUploadStepSubmission = ({
+  projectId,
+  stepNum,
+  stepCode,
+  isLastStep,
+}: Params): Result => {
+  const navigate = useNavigate();
+  const [isSaving, setIsSaving] = useState(false);
+  const [isCompleting, setIsCompleting] = useState(false);
+
+  const submitStepResult = useCallback(
+    async (resultText: string) => {
+      if (
+        !projectId ||
+        !stepCode ||
+        !resultText.trim() ||
+        isSaving ||
+        isCompleting
+      ) {
+        return;
+      }
+
+      setIsSaving(true);
+
+      try {
+        await saveStepResultAPI({ projectId, stepCode, resultText });
+
+        if (isLastStep) {
+          setIsCompleting(true);
+
+          try {
+            await completeProjectAPI(projectId);
+            navigate(DYNAMIC_ROUTE_PATHS.UPLOAD_COMPLETE(projectId));
+          } catch (error) {
+            toaster.create({
+              type: "error",
+              description: getApiErrorMessage(error),
+            });
+          } finally {
+            setIsCompleting(false);
+          }
+
+          return;
+        }
+
+        navigate(DYNAMIC_ROUTE_PATHS.UPLOAD_STEP(projectId, stepNum + 1));
+      } catch (error) {
+        toaster.create({
+          type: "error",
+          description: getApiErrorMessage(error),
+        });
+      } finally {
+        setIsSaving(false);
+      }
+    },
+    [
+      isCompleting,
+      isLastStep,
+      isSaving,
+      navigate,
+      projectId,
+      stepCode,
+      stepNum,
+    ],
+  );
+
+  return {
+    isSubmitting: isSaving || isCompleting,
+    submitStepResult,
+  };
+};
diff --git a/src/features/upload/index.ts b/src/features/upload/index.ts
index 178cd64..69d2709 100644
--- a/src/features/upload/index.ts
+++ b/src/features/upload/index.ts
@@ -1 +1,4 @@
+export * from "./components";
+export * from "./hooks";
+export * from "./ui";
 export * from "./utils";
diff --git a/src/features/upload/ui/index.ts b/src/features/upload/ui/index.ts
new file mode 100644
index 0000000..d489887
--- /dev/null
+++ b/src/features/upload/ui/index.ts
@@ -0,0 +1 @@
+export * from "./section";
diff --git a/src/features/upload/ui/section/UploadStepContentSection.tsx b/src/features/upload/ui/section/UploadStepContentSection.tsx
new file mode 100644
index 0000000..a18ef33
--- /dev/null
+++ b/src/features/upload/ui/section/UploadStepContentSection.tsx
@@ -0,0 +1,162 @@
+import { useState } from "react";
+
+import { Box, Button, Flex, Text, VStack } from "@chakra-ui/react";
+
+import { PromptCard } from "@/entities";
+import { useClipboardCopy } from "@/shared";
+import { ArrowRightIcon } from "@/shared/_assets/icons";
+
+import { UploadStepResultInput } from "../../components";
+import {
+  useUploadStepData,
+  useUploadStepProject,
+  useUploadStepSubmission,
+} from "../../hooks";
+
+type Props = {
+  projectId: string;
+  stepNum: number;
+};
+
+export const UploadStepContentSection = ({ projectId, stepNum }: Props) => {
+  const [resultTextByStep, setResultTextByStep] = useState<
+    Record<string, string>
+  >({});
+  const { copied: copiedPrompt, copy: copyPrompt } = useClipboardCopy();
+  const { copied: copiedFormat, copy: copyFormat } = useClipboardCopy();
+  const { stepCode, isLastStep } = useUploadStepProject({ projectId, stepNum });
+  const { stepData, isStepLoading } = useUploadStepData({
+    projectId,
+    stepCode,
+  });
+  const { isSubmitting, submitStepResult } = useUploadStepSubmission({
+    projectId,
+    stepNum,
+    stepCode,
+    isLastStep,
+  });
+  const resultTextKey = `${projectId}:${stepNum}`;
+  const savedResultText =
+    stepData?.stepCode === stepCode
+      ? (stepData?.userSubmittedResult ?? "")
+      : "";
+  const resultText = resultTextByStep[resultTextKey] ?? savedResultText;
+  const handleResultTextChange = (value: string) => {
+    setResultTextByStep((prev) => ({
+      ...prev,
+      [resultTextKey]: value,
+    }));
+  };
+  const stepName = stepData?.stepName;
+  const providedPromptSnapshot = stepData?.providedPromptSnapshot;
+  const formatPrompt = stepData?.formatPrompt;
+
+  return (
+    <Box
+      bg="white"
+      border="1px solid white"
+      borderRadius="4xl"
+      boxShadow="0px 20px 60px -10px rgba(0,0,0,0.08)"
+      overflow="hidden"
+    >
+      <VStack align="flex-start" gap={8} p={12}>
+        <VStack align="flex-start" gap="11px" w="full">
+          <Text color="seed" fontSize="xs" fontWeight="bold">
+            Step {stepNum}
+          </Text>
+          <Text color="neutral.900" fontSize="2xl" fontWeight="bold">
+            {stepName}
+          </Text>
+          <Text color="neutral.600" fontWeight="regular" lineHeight="1.4">
+            AI가 과제 주제를 분석하여 최적의 자료 조사를 위한 프롬프트를
+            생성했습니다.
+            <br />이 프롬프트를 사용하여 고품질의 레퍼런스를 확보하세요.
+          </Text>
+        </VStack>
+
+        {isStepLoading ? (
+          <Box
+            bg="neutral.50"
+            border="1px solid"
+            borderColor="neutral.50"
+            borderRadius="2xl"
+            overflow="hidden"
+            w="full"
+          >
+            <Box bg="neutral.50" p="28px">
+              <Text
+                color="neutral.300"
+                fontFamily="mono"
+                fontSize="sm"
+                lineHeight="1.4"
+              >
+                프롬프트를 불러오는 중...
+              </Text>
+            </Box>
+          </Box>
+        ) : providedPromptSnapshot ? (
+          <PromptCard
+            content={providedPromptSnapshot}
+            copied={copiedPrompt}
+            label="생성된 프롬프트"
+            onCopy={() => {
+              void copyPrompt(providedPromptSnapshot);
+            }}
+          />
+        ) : null}
+
+        {formatPrompt && (
+          <VStack align="flex-start" gap={6} w="full">
+            <Text
+              color="neutral.900"
+              fontSize="2xl"
+              fontWeight="bold"
+              lineHeight="1.4"
+            >
+              결과 추출
+            </Text>
+            <Text color="neutral.600" fontWeight="regular" lineHeight="1.4">
+              이 프롬프트를 사용하여 ai와 함께 작업한 결과를 추출해주세요.
+            </Text>
+            <PromptCard
+              content={formatPrompt}
+              copied={copiedFormat}
+              label="작업 결과 추출 프롬프트"
+              onCopy={() => {
+                void copyFormat(formatPrompt);
+              }}
+            />
+          </VStack>
+        )}
+
+        <UploadStepResultInput
+          value={resultText}
+          onChange={handleResultTextChange}
+        />
+
+        <Flex justify="flex-end" pt={8} w="full">
+          <Button
+            bg="seed"
+            borderRadius="xl"
+            color="white"
+            disabled={!resultText.trim() || isSubmitting}
+            fontWeight="bold"
+            gap={1}
+            onClick={() => {
+              void submitStepResult(resultText);
+            }}
+            opacity={resultText.trim() && !isSubmitting ? 1 : 0.5}
+            px={10}
+            py={4}
+            _hover={{
+              opacity: resultText.trim() && !isSubmitting ? 0.85 : 0.5,
+            }}
+          >
+            {isLastStep ? "로드맵 완성" : "다음 단계로 진행"}
+            <ArrowRightIcon boxSize={3} />
+          </Button>
+        </Flex>
+      </VStack>
+    </Box>
+  );
+};
diff --git a/src/features/upload/ui/section/UploadStepHeaderSection.tsx b/src/features/upload/ui/section/UploadStepHeaderSection.tsx
new file mode 100644
index 0000000..d542118
--- /dev/null
+++ b/src/features/upload/ui/section/UploadStepHeaderSection.tsx
@@ -0,0 +1,54 @@
+import { Box, Text, VStack } from "@chakra-ui/react";
+
+import { ROADMAP_TYPE_LABEL } from "@/entities";
+import { BackButton } from "@/shared";
+
+import { UploadStepIndicator } from "../../components";
+import { useUploadStepNavigation, useUploadStepProject } from "../../hooks";
+
+type Props = {
+  projectId: string;
+  stepNum: number;
+};
+
+export const UploadStepHeaderSection = ({ projectId, stepNum }: Props) => {
+  const { project, steps } = useUploadStepProject({ projectId, stepNum });
+  const { goToPrevStep } = useUploadStepNavigation({ projectId, stepNum });
+
+  return (
+    <>
+      <VStack align="flex-start" gap={6}>
+        <BackButton label="이전 단계로" onClick={goToPrevStep} />
+
+        <VStack align="flex-start" gap={2}>
+          <Box
+            bg="neutral.50"
+            border="1px solid white"
+            borderRadius="md"
+            color="neutral.600"
+            fontSize="2xs"
+            fontWeight="regular"
+            px="9px"
+            py="5px"
+          >
+            {project?.roadmapType
+              ? (ROADMAP_TYPE_LABEL[project.roadmapType] ?? project.roadmapType)
+              : ""}
+          </Box>
+          <Text
+            color="neutral.900"
+            fontSize="3xl"
+            fontWeight="bold"
+            lineHeight="1.4"
+          >
+            {project?.title}
+          </Text>
+        </VStack>
+      </VStack>
+
+      {steps.length > 0 && (
+        <UploadStepIndicator current={stepNum} stepCodes={steps} />
+      )}
+    </>
+  );
+};
diff --git a/src/features/upload/ui/section/index.ts b/src/features/upload/ui/section/index.ts
new file mode 100644
index 0000000..d17f2c8
--- /dev/null
+++ b/src/features/upload/ui/section/index.ts
@@ -0,0 +1,2 @@
+export * from "./UploadStepContentSection";
+export * from "./UploadStepHeaderSection";
diff --git a/src/pages/upload/_loading/UploadLoadingPage.tsx b/src/pages/upload/_loading/UploadLoadingPage.tsx
index 1d2172f..c023f50 100644
--- a/src/pages/upload/_loading/UploadLoadingPage.tsx
+++ b/src/pages/upload/_loading/UploadLoadingPage.tsx
@@ -5,7 +5,7 @@ import { Box, Flex, Image, Text, VStack } from "@chakra-ui/react";
 
 import { useUploadFlowStore } from "@/entities";
 import { SproutAnimation } from "@/features";
-import { ROUTE_PATHS } from "@/shared";
+import { DYNAMIC_ROUTE_PATHS, ROUTE_PATHS } from "@/shared";
 import AbstractBackgroundCircle from "@/shared/_assets/images/abstract-background-circle.svg";
 
 const LOADING_STEPS = [
@@ -48,7 +48,7 @@ export default function UploadLoadingPage() {
   useEffect(() => {
     if (projectId) {
       const timer = setTimeout(() => {
-        navigate(`${ROUTE_PATHS.UPLOAD_STEP_BASE}/${projectId}/1`);
+        navigate(DYNAMIC_ROUTE_PATHS.UPLOAD_STEP(projectId, 1));
       }, 600);
       return () => clearTimeout(timer);
     }
diff --git a/src/pages/upload/_step/UploadStepPage.tsx b/src/pages/upload/_step/UploadStepPage.tsx
index 50e3166..8fb5756 100644
--- a/src/pages/upload/_step/UploadStepPage.tsx
+++ b/src/pages/upload/_step/UploadStepPage.tsx
@@ -1,607 +1,44 @@
-import { useEffect, useState } from "react";
-import { useNavigate, useParams } from "react-router";
+import { Navigate, useParams, useSearchParams } from "react-router";
 
-import { Box, Button, Flex, Text, Textarea, VStack } from "@chakra-ui/react";
+import { Flex } from "@chakra-ui/react";
 
 import {
-  type ProjectStepResponse,
-  ROADMAP_STEP_CODES,
-  ROADMAP_STEP_NAMES,
-  completeProjectAPI,
-  saveStepResultAPI,
-  startStepAPI,
-  useGetProjectDetail,
-} from "@/entities";
-import { ROUTE_PATHS, getApiErrorMessage, toaster } from "@/shared";
-import {
-  ArrowLeftIcon,
-  ArrowRightIcon,
-  CopyIcon,
-  DocumentTextIcon,
-} from "@/shared/_assets/icons";
-
-function PromptLine({ line }: { line: string }) {
-  if (line.startsWith("# ") || line === "#") {
-    return (
-      <Text
-        as="span"
-        color="seed"
-        display="block"
-        fontSize="sm"
-        lineHeight="1.4"
-        fontFamily="mono"
-      >
-        {line}
-      </Text>
-    );
-  }
-  if (line.startsWith("//")) {
-    return (
-      <Text
-        as="span"
-        color="neutral.300"
-        display="block"
-        fontSize="sm"
-        lineHeight="1.4"
-        fontFamily="mono"
-      >
-        {line}
-      </Text>
-    );
-  }
-  return (
-    <Text
-      as="span"
-      color="neutral.900"
-      display="block"
-      fontSize="sm"
-      lineHeight="1.4"
-      fontFamily="mono"
-    >
-      {line}
-    </Text>
-  );
-}
-
-function StepIndicator({
-  current,
-  stepCodes,
-}: {
-  current: number;
-  stepCodes: string[];
-}) {
-  return (
-    <Box position="relative" px="88px" w="full">
-      <Flex
-        align="center"
-        justify="space-between"
-        left="88px"
-        maxW="672px"
-        position="absolute"
-        px={12}
-        right="88px"
-        top="22px"
-      >
-        {Array.from({ length: stepCodes.length - 1 }, (_, i) => (
-          <Box key={i} bg="neutral.100" flex={1} h="2px" />
-        ))}
-      </Flex>
-
-      <Flex align="flex-start" justify="space-between" maxW="672px" w="full">
-        {stepCodes.map((code, i) => {
-          const stepId = i + 1;
-          const isActive = stepId === current;
-          const isDone = stepId < current;
-
-          return (
-            <Flex align="center" direction="column" gap={3} key={code} w={24}>
-              <Flex
-                align="center"
-                boxSize={12}
-                justify="center"
-                position="relative"
-              >
-                <Box
-                  bg={isActive ? "seed" : "neutral.100"}
-                  borderRadius="full"
-                  bottom={0}
-                  left={0}
-                  opacity={isActive ? 0.3 : 0.6}
-                  position="absolute"
-                  right={0}
-                  top={0}
-                />
-                <Flex
-                  align="center"
-                  bg={isActive || isDone ? "seed" : "neutral.300"}
-                  borderRadius="full"
-                  boxSize={7}
-                  justify="center"
-                  position="relative"
-                  zIndex={1}
-                >
-                  <Text
-                    color="white"
-                    fontSize="xs"
-                    fontWeight="bold"
-                    lineHeight="16px"
-                    textAlign="center"
-                  >
-                    {stepId}
-                  </Text>
-                </Flex>
-              </Flex>
-
-              <Text
-                color={isActive ? "neutral.900" : "neutral.600"}
-                fontSize="sm"
-                fontWeight={isActive ? "bold" : "medium"}
-                lineHeight="20px"
-                textAlign="center"
-                wordBreak="keep-all"
-              >
-                {ROADMAP_STEP_NAMES[code] ?? code}
-              </Text>
-            </Flex>
-          );
-        })}
-      </Flex>
-    </Box>
-  );
-}
-
-function UploadStepContent({
-  projectId,
-  stepNum,
-}: {
-  projectId: string;
-  stepNum: number;
-}) {
-  const navigate = useNavigate();
-
-  const [resultText, setResultText] = useState("");
-  const [copiedPrompt, setCopiedPrompt] = useState(false);
-  const [copiedFormat, setCopiedFormat] = useState(false);
-
-  const [stepData, setStepData] = useState<ProjectStepResponse | null>(null);
-  const [isStepLoading, setIsStepLoading] = useState(false);
-  const [isSaving, setIsSaving] = useState(false);
-  const [isCompleting, setIsCompleting] = useState(false);
-
-  const { data: project } = useGetProjectDetail(projectId);
-  const roadmapType = project?.roadmapType;
-  const steps = roadmapType ? ROADMAP_STEP_CODES[roadmapType] : [];
-  const stepCode = steps[stepNum - 1];
-  const isLastStep = stepNum >= steps.length;
-
-  useEffect(() => {
-    if (!projectId || !stepCode) return;
-
-    const fetchStep = async () => {
-      setIsStepLoading(true);
-      try {
-        const data = await startStepAPI({ projectId, stepCode });
-        setStepData(data);
-      } catch (error) {
-        toaster.create({
-          type: "error",
-          description: getApiErrorMessage(error),
-        });
-      } finally {
-        setIsStepLoading(false);
-      }
-    };
-
-    fetchStep();
-  }, [projectId, stepCode]);
-
-  const copyToClipboard = (text: string, setter: (v: boolean) => void) => {
-    if (!navigator?.clipboard?.writeText) {
-      toaster.create({
-        type: "error",
-        description:
-          "클립보드 복사에 실패했습니다. 브라우저가 클립보드를 지원하지 않습니다.",
-      });
-      return;
-    }
-    navigator.clipboard
-      .writeText(text)
-      .then(() => {
-        setter(true);
-        setTimeout(() => setter(false), 2000);
-      })
-      .catch((error) => {
-        console.error("Failed to copy to clipboard", error);
-        toaster.create({
-          type: "error",
-          description:
-            "클립보드 복사에 실패했습니다. 브라우저 권한 또는 HTTPS 환경을 확인해주세요.",
-        });
-      });
-  };
-
-  const goToPrevStep = () => {
-    if (stepNum <= 1) {
-      navigate(ROUTE_PATHS.FILE_UPLOAD);
-    } else {
-      navigate(`${ROUTE_PATHS.UPLOAD_STEP_BASE}/${projectId}/${stepNum - 1}`);
-    }
-  };
-
-  const goToNextStep = async () => {
-    if (
-      !projectId ||
-      !stepCode ||
-      !resultText.trim() ||
-      isSaving ||
-      isCompleting
-    )
-      return;
-
-    setIsSaving(true);
-    try {
-      await saveStepResultAPI({ projectId, stepCode, resultText });
-
-      if (isLastStep) {
-        setIsCompleting(true);
-        try {
-          await completeProjectAPI(projectId);
-          navigate(
-            ROUTE_PATHS.UPLOAD_COMPLETE.replace(":projectId", projectId),
-          );
-        } catch (error) {
-          toaster.create({
-            type: "error",
-            description: getApiErrorMessage(error),
-          });
-        } finally {
-          setIsCompleting(false);
-        }
-      } else {
-        navigate(`${ROUTE_PATHS.UPLOAD_STEP_BASE}/${projectId}/${stepNum + 1}`);
-      }
-    } catch (error) {
-      toaster.create({
-        type: "error",
-        description: getApiErrorMessage(error),
-      });
-    } finally {
-      setIsSaving(false);
-    }
-  };
-
-  return (
-    <Flex bg="white" direction="column" minH="100vh" pb="127px" pt="80px">
-      <Flex direction="column" gap={10} mx="auto" px={6} w="full" maxW="896px">
-        <VStack align="flex-start" gap={6}>
-          <Button
-            alignSelf="flex-start"
-            color="neutral.600"
-            fontSize="sm"
-            fontWeight="medium"
-            gap={1}
-            onClick={goToPrevStep}
-            px={0}
-            variant="ghost"
-            _hover={{ color: "neutral.900" }}
-          >
-            <ArrowLeftIcon boxSize={3} />
-            이전 단계로
-          </Button>
-
-          <VStack align="flex-start" gap={2}>
-            <Box
-              bg="neutral.50"
-              border="1px solid white"
-              borderRadius="md"
-              color="neutral.600"
-              fontSize="2xs"
-              fontWeight="regular"
-              px="9px"
-              py="5px"
-            >
-              {project?.roadmapType}
-            </Box>
-            <Text
-              color="neutral.900"
-              fontSize="3xl"
-              fontWeight="bold"
-              lineHeight="1.4"
-            >
-              {project?.title}
-            </Text>
-          </VStack>
-        </VStack>
-
-        {steps.length > 0 && (
-          <StepIndicator current={stepNum} stepCodes={steps} />
-        )}
-
-        <Box
-          bg="white"
-          border="1px solid white"
-          borderRadius="4xl"
-          boxShadow="0px 20px 60px -10px rgba(0,0,0,0.08)"
-          overflow="hidden"
-          pb="1px"
-        >
-          <VStack align="flex-start" gap={8} p={12}>
-            <VStack align="flex-start" gap="11px" w="full">
-              <Text color="seed" fontSize="xs" fontWeight="bold">
-                Step {stepNum}
-              </Text>
-              <Text color="neutral.900" fontSize="2xl" fontWeight="bold">
-                {stepData?.stepName}
-              </Text>
-              <Text
-                color="neutral.600"
-                fontWeight="regular"
-                lineHeight="1.4"
-                pt="5px"
-              >
-                AI가 과제 주제를 분석하여 최적의 자료 조사를 위한 프롬프트를
-                생성했습니다.
-                <br />이 프롬프트를 사용하여 고품질의 레퍼런스를 확보하세요.
-              </Text>
-            </VStack>
-
-            <Box
-              bg="neutral.50"
-              border="1px solid"
-              borderColor="neutral.50"
-              borderRadius="2xl"
-              overflow="hidden"
-              w="full"
-            >
-              <Flex
-                align="center"
-                borderBottom="1px solid"
-                borderBottomColor="neutral.50"
-                justify="space-between"
-                py={4}
-                px={6}
-              >
-                <Flex align="center" gap={2}>
-                  <DocumentTextIcon boxSize={3} color="neutral.600" />
-                  <Text color="neutral.600" fontSize="xs" fontWeight="medium">
-                    생성된 프롬프트
-                  </Text>
-                </Flex>
-
-                <Box
-                  as="button"
-                  bg="white"
-                  border="1px solid"
-                  borderColor="neutral.50"
-                  borderRadius="lg"
-                  boxShadow="0px 1px 2px 0px rgba(0,0,0,0.05)"
-                  cursor="pointer"
-                  onClick={() =>
-                    stepData?.providedPromptSnapshot &&
-                    copyToClipboard(
-                      stepData.providedPromptSnapshot,
-                      setCopiedPrompt,
-                    )
-                  }
-                  px="13px"
-                  py="7px"
-                  _hover={{ boxShadow: "0px 2px 4px 0px rgba(0,0,0,0.08)" }}
-                >
-                  <Flex align="center" gap="6px">
-                    <CopyIcon
-                      boxSize={3}
-                      color={copiedPrompt ? "seed" : "neutral.900"}
-                    />
-                    <Text
-                      color={copiedPrompt ? "seed" : "neutral.900"}
-                      fontSize="xs"
-                      fontWeight="semibold"
-                      lineHeight="16px"
-                    >
-                      {copiedPrompt ? "복사됨 ✓" : "복사하기"}
-                    </Text>
-                  </Flex>
-                </Box>
-              </Flex>
-
-              <Box bg="neutral.50" p="28px">
-                {isStepLoading ? (
-                  <Text
-                    color="neutral.300"
-                    fontFamily="mono"
-                    fontSize="sm"
-                    lineHeight="1.4"
-                  >
-                    프롬프트를 불러오는 중...
-                  </Text>
-                ) : (
-                  stepData?.providedPromptSnapshot
-                    ?.split("\n")
-                    .map((line, i) => <PromptLine key={i} line={line} />)
-                )}
-              </Box>
-            </Box>
-
-            {stepData?.formatPrompt && (
-              <VStack align="flex-start" gap={6} w="full">
-                <Text
-                  color="neutral.900"
-                  fontSize="2xl"
-                  fontWeight="bold"
-                  lineHeight="1.4"
-                >
-                  결과 추출
-                </Text>
-                <Text color="neutral.600" fontWeight="regular" lineHeight="1.4">
-                  이 프롬프트를 사용하여 ai와 함께 작업한 결과를 추출해주세요.
-                </Text>
-                <Box
-                  bg="neutral.50"
-                  border="1px solid"
-                  borderColor="neutral.50"
-                  borderRadius="2xl"
-                  overflow="hidden"
-                  w="full"
-                >
-                  <Flex
-                    align="center"
-                    borderBottom="1px solid"
-                    borderBottomColor="neutral.50"
-                    justify="space-between"
-                    py={4}
-                    px={6}
-                  >
-                    <Flex align="center" gap={2}>
-                      <DocumentTextIcon boxSize={3} color="neutral.600" />
-                      <Text
-                        color="neutral.600"
-                        fontSize="xs"
-                        fontWeight="medium"
-                      >
-                        작업 결과 추출 프롬프트
-                      </Text>
-                    </Flex>
-
-                    <Box
-                      as="button"
-                      bg="white"
-                      border="1px solid"
-                      borderColor="neutral.50"
-                      borderRadius="lg"
-                      boxShadow="0px 1px 2px 0px rgba(0,0,0,0.05)"
-                      cursor="pointer"
-                      onClick={() =>
-                        copyToClipboard(stepData.formatPrompt, setCopiedFormat)
-                      }
-                      px="13px"
-                      py="7px"
-                      _hover={{
-                        boxShadow: "0px 2px 4px 0px rgba(0,0,0,0.08)",
-                      }}
-                    >
-                      <Flex align="center" gap="6px">
-                        <CopyIcon
-                          boxSize={3}
-                          color={copiedFormat ? "seed" : "neutral.900"}
-                        />
-                        <Text
-                          color={copiedFormat ? "seed" : "neutral.900"}
-                          fontSize="xs"
-                          fontWeight="semibold"
-                          lineHeight="16px"
-                        >
-                          {copiedFormat ? "복사됨 ✓" : "복사하기"}
-                        </Text>
-                      </Flex>
-                    </Box>
-                  </Flex>
-
-                  <Box bg="neutral.50" p="28px">
-                    {stepData.formatPrompt.split("\n").map((line, i) => (
-                      <PromptLine key={i} line={line} />
-                    ))}
-                  </Box>
-                </Box>
-              </VStack>
-            )}
-
-            <VStack align="flex-start" gap={6} pt="71px" w="full">
-              <Text
-                color="neutral.900"
-                fontSize="2xl"
-                fontWeight="bold"
-                lineHeight="1.4"
-              >
-                작업 결과 입력
-              </Text>
-
-              <Box position="relative" w="full">
-                <Textarea
-                  _focusVisible={{
-                    outline: "none",
-                    boxShadow: "none",
-                  }}
-                  _placeholder={{ color: "neutral.300" }}
-                  bg="neutral.50"
-                  border="none"
-                  borderRadius="xl"
-                  color="neutral.900"
-                  fontSize="sm"
-                  fontWeight="medium"
-                  minH={60}
-                  onChange={(e) => setResultText(e.target.value)}
-                  p={6}
-                  placeholder="이전 단계 프롬프트로 얻은 AI의 답변을 여기에 붙여넣어 주세요. 정보를 입력하면 다음 단계 로드맵이 더욱 정교해집니다."
-                  resize="vertical"
-                  value={resultText}
-                />
-                <Box
-                  backdropFilter="blur(2px)"
-                  bg="rgba(255,255,255,0.6)"
-                  borderRadius="4px"
-                  bottom="20px"
-                  position="absolute"
-                  px={2}
-                  py={1}
-                  right="20px"
-                >
-                  <Text color="neutral.600" fontSize="xs" fontWeight="medium">
-                    Ctrl + V
-                  </Text>
-                </Box>
-              </Box>
-            </VStack>
-
-            <Flex justify="flex-end" pt={8} w="full">
-              <Button
-                bg="seed"
-                borderRadius="xl"
-                color="white"
-                disabled={!resultText.trim() || isSaving}
-                fontWeight="bold"
-                gap={1}
-                onClick={goToNextStep}
-                opacity={resultText.trim() && !isSaving ? 1 : 0.5}
-                px={10}
-                py={4}
-                _hover={{
-                  opacity: resultText.trim() && !isSaving ? 0.85 : 0.5,
-                }}
-              >
-                {isLastStep ? "로드맵 완성" : "다음 단계로 진행"}
-                <ArrowRightIcon boxSize={3} />
-              </Button>
-            </Flex>
-          </VStack>
-        </Box>
-      </Flex>
-    </Flex>
-  );
-}
+  UploadStepContentSection,
+  UploadStepHeaderSection,
+  useUploadStepResumeRedirect,
+} from "@/features";
+import { ROUTE_PATHS } from "@/shared";
 
 export default function UploadStepPage() {
-  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
   const { projectId, step } = useParams<{
     projectId: string;
     step: string;
   }>();
-  const stepNum = parseInt(step ?? "1", 10);
-
-  useEffect(() => {
-    if (!projectId || isNaN(stepNum) || stepNum < 1) {
-      navigate(ROUTE_PATHS.FILE_UPLOAD, { replace: true });
-    }
-  }, [projectId, stepNum, navigate]);
+  const stepNum = Number(step);
+  const isValidStepNum = Number.isInteger(stepNum) && stepNum > 0;
+  const shouldResume = searchParams.get("resume") === "true";
+  const { isResolved } = useUploadStepResumeRedirect({
+    projectId: projectId ?? "",
+    stepNum,
+    enabled: Boolean(projectId) && isValidStepNum && shouldResume,
+  });
+
+  if (!projectId || !isValidStepNum) {
+    return <Navigate replace to={ROUTE_PATHS.FILE_UPLOAD} />;
+  }
 
-  if (!projectId || isNaN(stepNum) || stepNum < 1) {
+  if (shouldResume && !isResolved) {
     return null;
   }
 
   return (
-    <UploadStepContent
-      key={`${projectId}-${stepNum}`}
-      projectId={projectId}
-      stepNum={stepNum}
-    />
+    <Flex bg="white" direction="column" minH="100vh" pb="127px" pt="80px">
+      <Flex direction="column" gap={10} mx="auto" px={6} w="full" maxW="896px">
+        <UploadStepHeaderSection projectId={projectId} stepNum={stepNum} />
+
+        <UploadStepContentSection projectId={projectId} stepNum={stepNum} />
+      </Flex>
+    </Flex>
   );
 }
diff --git a/src/shared/components/common/BackButton.tsx b/src/shared/components/common/BackButton.tsx
new file mode 100644
index 0000000..f692bc8
--- /dev/null
+++ b/src/shared/components/common/BackButton.tsx
@@ -0,0 +1,27 @@
+import { Button } from "@chakra-ui/react";
+
+import { ArrowLeftIcon } from "@/shared/_assets/icons";
+
+type Props = {
+  label: string;
+  onClick: () => void;
+};
+
+export const BackButton = ({ label, onClick }: Props) => {
+  return (
+    <Button
+      alignSelf="flex-start"
+      color="neutral.600"
+      fontSize="sm"
+      fontWeight="medium"
+      gap={1}
+      onClick={onClick}
+      px={0}
+      variant="ghost"
+      _hover={{ color: "neutral.900" }}
+    >
+      <ArrowLeftIcon boxSize={3} />
+      {label}
+    </Button>
+  );
+};
diff --git a/src/shared/components/common/index.ts b/src/shared/components/common/index.ts
index 2f25d1d..e719178 100644
--- a/src/shared/components/common/index.ts
+++ b/src/shared/components/common/index.ts
@@ -1,2 +1,3 @@
+export * from "./BackButton";
 export * from "./ConfirmDialog";
 export * from "./Pagination";
diff --git a/src/shared/constants/route-path.ts b/src/shared/constants/route-path.ts
index 9d6a122..dcef152 100644
--- a/src/shared/constants/route-path.ts
+++ b/src/shared/constants/route-path.ts
@@ -20,4 +20,13 @@ export const ROUTE_PATHS = {
 export const DYNAMIC_ROUTE_PATHS = {
   PROJECT_DETAIL: (projectId: string) =>
     ROUTE_PATHS.PROJECT_DETAIL.replace(":projectId", projectId),
+  UPLOAD_STEP: (projectId: string, step: number | string) =>
+    ROUTE_PATHS.UPLOAD_STEP.replace(":projectId", projectId).replace(
+      ":step",
+      String(step),
+    ),
+  UPLOAD_STEP_RESUME_ENTRY: (projectId: string) =>
+    `${DYNAMIC_ROUTE_PATHS.UPLOAD_STEP(projectId, 1)}?resume=true`,
+  UPLOAD_COMPLETE: (projectId: string) =>
+    ROUTE_PATHS.UPLOAD_COMPLETE.replace(":projectId", projectId),
 };
diff --git a/src/shared/hooks/index.ts b/src/shared/hooks/index.ts
new file mode 100644
index 0000000..ea68209
--- /dev/null
+++ b/src/shared/hooks/index.ts
@@ -0,0 +1 @@
+export * from "./useClipboardCopy";
diff --git a/src/shared/hooks/useClipboardCopy.ts b/src/shared/hooks/useClipboardCopy.ts
new file mode 100644
index 0000000..42c6f84
--- /dev/null
+++ b/src/shared/hooks/useClipboardCopy.ts
@@ -0,0 +1,64 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+
+import { toaster } from "../utils";
+
+type UseClipboardCopyOptions = {
+  successDuration?: number;
+  unsupportedMessage?: string;
+  errorMessage?: string;
+};
+
+export const useClipboardCopy = ({
+  successDuration = 2000,
+  unsupportedMessage,
+  errorMessage,
+}: UseClipboardCopyOptions = {}) => {
+  const [copied, setCopied] = useState(false);
+  const resetTimerRef = useRef<number | null>(null);
+
+  const clearResetTimer = useCallback(() => {
+    if (resetTimerRef.current !== null) {
+      window.clearTimeout(resetTimerRef.current);
+      resetTimerRef.current = null;
+    }
+  }, []);
+
+  useEffect(() => clearResetTimer, [clearResetTimer]);
+
+  const copy = useCallback(
+    async (text: string) => {
+      if (!navigator?.clipboard?.writeText) {
+        toaster.create({
+          type: "error",
+          description:
+            unsupportedMessage ??
+            "클립보드 복사에 실패했습니다. 브라우저가 클립보드를 지원하지 않습니다.",
+        });
+        return false;
+      }
+
+      try {
+        await navigator.clipboard.writeText(text);
+        setCopied(true);
+        clearResetTimer();
+        resetTimerRef.current = window.setTimeout(() => {
+          setCopied(false);
+          resetTimerRef.current = null;
+        }, successDuration);
+        return true;
+      } catch (error) {
+        console.error("Failed to copy to clipboard", error);
+        toaster.create({
+          type: "error",
+          description:
+            errorMessage ??
+            "클립보드 복사에 실패했습니다. 브라우저 권한 또는 HTTPS 환경을 확인해주세요.",
+        });
+        return false;
+      }
+    },
+    [clearResetTimer, errorMessage, successDuration, unsupportedMessage],
+  );
+
+  return { copied, copy };
+};
diff --git a/src/shared/index.ts b/src/shared/index.ts
index a6f2226..1762bff 100644
--- a/src/shared/index.ts
+++ b/src/shared/index.ts
@@ -1,6 +1,7 @@
 export * from "./_assets";
 export * from "./components";
 export * from "./constants";
+export * from "./hooks";
 export * from "./libs";
 export * from "./supabase";
 export * from "./theme";