feat: ステップ実行中だけ「ステップ実行モード」というラベルを付ける (#148)

src/app/(withAuth)/courses/[courseId]/lectures/[lectureId]/problems/[problemId]/ProblmBody.tsx

@@ -14,6 +14,7 @@ import {
   Card,
   Heading,
   HStack,
+  Tag,
   Tooltip,
   useDisclosure,
   VStack,
@@ -115,7 +116,14 @@ export const ProblemBody: React.FC<Props> = (props) => {
       <VStack align="stretch" flexBasis={0} flexGrow={1} minW={0} spacing={4}>
         <VStack align="stretch" as={Card} overflow="hidden" spacing={0}>
           <VStack align="stretch" borderBottomWidth="1px" p={5}>
-            <Heading size="md">問題</Heading>
+            <HStack>
+              <Heading size="md">問題</Heading>
+              {problemType === 'step' && (
+                <Tag colorScheme="brand" fontWeight="bold" size="sm" variant="solid">
+                  ステップ実行モード
+                </Tag>
+              )}
+            </HStack>
 
             <div>
               <Box as="span" fontWeight="bold">