[PR] 과제 업로드 로딩 페이지(UploadLoadingPage) 및 단계 페이지(UploadStepPage) 모바일 반응형 UI 설정

src/entities/project/ui/prompt-card/PromptCard.tsx

@@ -23,8 +23,8 @@ const PromptLine = ({ line }: { line: string }) => {
       color={color}
       display="block"
       fontFamily="mono"
-      fontSize="sm"
-      lineHeight="1.4"
+      fontSize={{ base: "xs", md: "sm" }}
+      lineHeight="1.5"
     >
       {line}
     </Text>
@@ -47,62 +47,69 @@ export const PromptCard = ({
       bg="neutral.50"
       border="1px solid"
       borderColor="neutral.50"
-      borderRadius="2xl"
+      borderRadius={{ base: "xl", md: "2xl" }}
       overflow="hidden"
       w="full"
     >
       <Flex
-        align="center"
+        align={{ base: "flex-start", md: "center" }}
         borderBottom="1px solid"
         borderBottomColor="neutral.50"
+        direction="row"
+        gap={{ base: 3, md: 0 }}
         justify="space-between"
-        pb="17px"
-        pt="16px"
-        px={6}
+        pb={{ base: 3, md: "17px" }}
+        pt={{ base: 3, md: "16px" }}
+        px={{ base: 4, md: 6 }}
       >
         <Flex align="center" gap={2}>
           <DocumentTextIcon boxSize={3} color="neutral.600" />
-          <Text color="neutral.600" fontSize="xs" fontWeight="medium">
+          <Text
+            color="neutral.600"
+            fontSize={{ base: "2xs", md: "xs" }}
+            fontWeight="medium"
+          >
             {label}
           </Text>
         </Flex>
 
         <Box
           as="button"
+          alignSelf={{ base: "flex-start", md: "auto" }}
           bg="white"
           border="1px solid"
           borderColor="neutral.50"
           borderRadius="lg"
           boxShadow="0px 1px 2px 0px rgba(0,0,0,0.05)"
           cursor="pointer"
           onClick={onCopy}
-          px="13px"
-          py="7px"
+          px={{ base: 3, md: "13px" }}
+          py={{ base: 1.5, md: "7px" }}
           _hover={{ boxShadow: "0px 2px 4px 0px rgba(0,0,0,0.08)" }}
         >
-          <Flex align="center" gap="6px">
+          <Flex align="center" gap={{ base: 1.5, md: "6px" }}>
             <CopyIcon boxSize={3} color={copied ? "seed" : "neutral.900"} />
             <Text
               color={copied ? "seed" : "neutral.900"}
-              fontSize="xs"
+              fontSize={{ base: "2xs", md: "xs" }}
               fontWeight="semibold"
-              lineHeight="16px"
+              lineHeight="1.4"
             >
               {copied ? "복사됨 ✓" : "복사하기"}
             </Text>
           </Flex>
         </Box>
       </Flex>
 
-      <Box bg="neutral.50" p="28px">
+      <Box bg="neutral.50" p={{ base: 4, md: "28px" }}>
         {isPrompt ? (
           lines.map((line, i) => <PromptLine key={i} line={line} />)
         ) : (
           <Text
             color="neutral.900"
-            fontSize="sm"
+            fontSize={{ base: "xs", md: "sm" }}
             fontWeight="medium"
-            lineHeight="1.4"
+            lineHeight="1.5"
             whiteSpace="pre-wrap"
           >
             {content}

src/features/upload/components/features/upload-step/UploadStepIndicator.tsx

@@ -9,77 +9,90 @@ type Props = {
 
 export const UploadStepIndicator = ({ current, stepCodes }: Props) => {
   return (
-    <Box position="relative" px="88px" w="full">
+    <Box overflowX={{ base: "auto", md: "visible" }} w="full">
       <Flex
-        align="center"
-        justify="space-between"
-        left="88px"
-        maxW="672px"
-        position="absolute"
-        px={12}
-        right="88px"
-        top="22px"
+        align="flex-start"
+        justify={{ base: "flex-start", md: "space-between" }}
+        maxW={{ base: "none", md: "672px" }}
+        mx={{ base: 0, md: "auto" }}
+        px={{ base: 4, md: 0 }}
+        w={{ base: "max-content", md: "full" }}
       >
-        {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;
+          const isLast = i === stepCodes.length - 1;
 
           return (
-            <Flex align="center" direction="column" gap={3} key={code} w={24}>
+            <Flex align="flex-start" flexShrink={0} key={code}>
               <Flex
                 align="center"
-                boxSize={12}
-                justify="center"
-                position="relative"
+                direction="column"
+                gap={{ base: 2, md: 3 }}
+                px={{ base: 2, md: 0 }}
+                w={{ base: "88px", md: "96px" }}
               >
-                <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}
+                  boxSize={{ base: 10, md: 12 }}
                   justify="center"
                   position="relative"
-                  zIndex={1}
                 >
-                  <Text
-                    color="white"
-                    fontSize="xs"
-                    fontWeight="bold"
-                    lineHeight="16px"
-                    textAlign="center"
+                  <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={{ base: 6, md: 7 }}
+                    justify="center"
+                    position="relative"
+                    zIndex={1}
                   >
-                    {stepId}
-                  </Text>
+                    <Text
+                      color="white"
+                      fontSize={{ base: "2xs", md: "xs" }}
+                      fontWeight="bold"
+                      lineHeight="1"
+                      textAlign="center"
+                    >
+                      {stepId}
+                    </Text>
+                  </Flex>
                 </Flex>
+
+                <Text
+                  color={isActive ? "neutral.900" : "neutral.600"}
+                  fontSize={{ base: "xs", md: "sm" }}
+                  fontWeight={isActive ? "bold" : "medium"}
+                  lineHeight={{ base: "1.4", md: "20px" }}
+                  textAlign="center"
+                  whiteSpace="normal"
+                  wordBreak="keep-all"
+                >
+                  {ROADMAP_STEP_NAMES[code] ?? code}
+                </Text>
               </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>
+              {!isLast && (
+                <Box
+                  alignSelf="flex-start"
+                  bg="neutral.100"
+                  flexShrink={0}
+                  h="2px"
+                  mt={{ base: "19px", md: "23px" }}
+                  w={{ base: "24px", md: "48px" }}
+                />
+              )}
             </Flex>
           );
         })}

src/features/upload/components/features/upload-step/UploadStepResultInput.tsx

@@ -7,10 +7,10 @@ type Props = {
 
 export const UploadStepResultInput = ({ value, onChange }: Props) => {
   return (
-    <VStack align="flex-start" gap={6} w="full">
+    <VStack align="flex-start" gap={{ base: 4, md: 6 }} w="full">
       <Text
         color="neutral.900"
-        fontSize="2xl"
+        fontSize={{ base: "xl", md: "2xl" }}
         fontWeight="bold"
         lineHeight="1.4"
       >
@@ -28,11 +28,11 @@ export const UploadStepResultInput = ({ value, onChange }: Props) => {
           border="none"
           borderRadius="xl"
           color="neutral.900"
-          fontSize="sm"
+          fontSize={{ base: "xs", md: "sm" }}
           fontWeight="medium"
           minH={60}
           onChange={(e) => onChange(e.target.value)}
-          p={6}
+          p={{ base: 4, md: 6 }}
           placeholder="이전 단계 프롬프트로 얻은 AI의 답변을 여기에 붙여넣어 주세요. 정보를 입력하면 다음 단계 로드맵이 더욱 정교해집니다."
           resize="vertical"
           value={value}
@@ -41,14 +41,19 @@ export const UploadStepResultInput = ({ value, onChange }: Props) => {
           backdropFilter="blur(2px)"
           bg="rgba(255,255,255,0.6)"
           borderRadius="4px"
-          bottom="20px"
+          bottom={{ base: "16px", md: "20px" }}
           position="absolute"
           px={2}
           py={1}
-          right="20px"
+          right={{ base: "16px", md: "20px" }}
         >
           <Text color="neutral.600" fontSize="xs" fontWeight="medium">
-            Ctrl + V
+            <Box as="span" display={{ base: "none", md: "inline" }}>
+              Ctrl + V
+            </Box>
+            <Box as="span" display={{ base: "inline", md: "none" }}>
+              붙여넣기
+            </Box>
           </Text>
         </Box>
       </Box>

src/features/upload/ui/section/UploadLoadingSection.tsx

@@ -25,8 +25,8 @@ export const UploadLoadingSection = ({
       <Box
         bg="seed.subtle"
         borderRadius="full"
-        filter="blur(32px)"
         boxSize="800px"
+        filter="blur(32px)"
         left="50%"
         opacity={0.5}
         position="absolute"
@@ -36,11 +36,11 @@ export const UploadLoadingSection = ({
       />
 
       <VStack
-        gap={6}
+        gap={{ base: 4, md: 6 }}
         left="50%"
         maxW="576px"
         position="absolute"
-        px={6}
+        px={{ base: 4, md: 6 }}
         textAlign="center"
         top="50%"
         transform="translate(-50%, -50%)"
@@ -49,35 +49,47 @@ export const UploadLoadingSection = ({
       >
         <Image
           alt="background circle"
-          src={AbstractBackgroundCircle}
           boxSize={30}
           objectFit="contain"
+          src={AbstractBackgroundCircle}
         />
 
         <SproutAnimation progress={progress} />
 
-        <VStack gap={4}>
+        <VStack gap={{ base: 3, md: 4 }}>
           <Text
             color="neutral.900"
-            fontSize="4xl"
+            fontSize={{ base: "2xl", md: "4xl" }}
             fontWeight="bold"
-            lineHeight="40px"
+            lineHeight={{ base: "1.35", md: "40px" }}
           >
             AI가 과제의 핵심을
             <br />
             분석하고 있어요
           </Text>
-          <Text color="neutral.600" fontSize="lg" fontWeight="medium">
+          <Text
+            color="neutral.600"
+            fontSize={{ base: "sm", md: "lg" }}
+            fontWeight="medium"
+          >
             분석이 완료되면 나만의 로드맵이 펼쳐집니다.
           </Text>
         </VStack>
 
-        <VStack gap={3} maxW={80} w="full">
+        <VStack gap={{ base: 2, md: 3 }} maxW={80} w="full">
           <Flex align="center" justify="space-between" w="full">
-            <Text color="seed" fontSize="xs" fontWeight="medium">
+            <Text
+              color="seed"
+              fontSize={{ base: "2xs", md: "xs" }}
+              fontWeight="medium"
+            >
               {currentStepMessage}
             </Text>
-            <Text color="seed" fontSize="xs" fontWeight="medium">
+            <Text
+              color="seed"
+              fontSize={{ base: "2xs", md: "xs" }}
+              fontWeight="medium"
+            >
               {Math.round(progress)}%
             </Text>
           </Flex>
@@ -98,7 +110,11 @@ export const UploadLoadingSection = ({
             />
           </Box>
 
-          <Text color="neutral.600" fontSize="xs" pt={2}>
+          <Text
+            color="neutral.600"
+            fontSize={{ base: "2xs", md: "xs" }}
+            pt={{ base: 1, md: 2 }}
+          >
             잠시만 기다려주세요, 거의 다 되었습니다.
           </Text>
         </VStack>