@tipp/ui 2.1.18 → 2.1.20

package/dist/molecules/time-select.js

@@ -7,7 +7,7 @@ import "../chunk-NWJSLIQ3.js";
 import "../chunk-BXX3B3E4.js";
 import "../chunk-2BPFXK4L.js";
 import "../chunk-A6W2ZWYA.js";
-import "../chunk-QD5ZSFPG.js";
+import "../chunk-A5S42XBJ.js";
 import "../chunk-YJ7ZFOYL.js";
 import "../chunk-5ZITU5L7.js";
 import "../chunk-3F45OPXG.js";
@@ -20,7 +20,7 @@ import "../chunk-5H3YPCZK.js";
 import "../chunk-FR2GDOU2.js";
 import "../chunk-74DX4CU7.js";
 import "../chunk-OYM4XCHQ.js";
-import "../chunk-F6YQBCJB.js";
+import "../chunk-H62G2ANJ.js";
 import "../chunk-5AVBYDPB.js";
 import "../chunk-365QMK4D.js";
 import "../chunk-YO3BQW6S.js";
@@ -34,19 +34,18 @@ import "../chunk-XQOL7UBI.js";
 import "../chunk-TULWX7D6.js";
 import "../chunk-TQOQC4PZ.js";
 import "../chunk-VTJZMOSP.js";
-import "../chunk-45VFASWZ.js";
-import "../chunk-3IT3NVK6.js";
-import "../chunk-LDBWASUA.js";
+import "../chunk-IKQOD3UU.js";
+import "../chunk-34OQDUQR.js";
 import "../chunk-UOYF3DBN.js";
 import "../chunk-DDUKEE5E.js";
 import "../chunk-HYITAA4J.js";
 import "../chunk-U7N2PWMO.js";
 import "../chunk-O3DNDMV3.js";
 import "../chunk-HYE34QEM.js";
-import "../chunk-YXO6QOFA.js";
+import "../chunk-BCRXWYJ3.js";
 import "../chunk-ACVANQJ4.js";
 import "../chunk-2DZ2Y3JI.js";
-import "../chunk-SSNESKAJ.js";
+import "../chunk-KXF3A4OR.js";
 import "../chunk-B6XJN6EC.js";
 import "../chunk-HEDMSFPW.js";
 import "../chunk-MIMJ7LON.js";
@@ -60,8 +59,9 @@ import "../chunk-FC7WH2S6.js";
 import "../chunk-FCIHNIOH.js";
 import "../chunk-YGL6SWKN.js";
 import "../chunk-4Y5BEXVN.js";
-import "../chunk-LMWTEDYS.js";
-import "../chunk-LH57PIY2.js";
+import "../chunk-I7UUXACJ.js";
+import "../chunk-PARGQUJB.js";
+import "../chunk-LDBWASUA.js";
 import "../chunk-25HMMI7R.js";
 import "../chunk-AFPH32MF.js";
 import "../chunk-LQY4RKWI.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tipp/ui",
-  "version": "2.1.18",
+  "version": "2.1.20",
   "private": false,
   "type": "module",
   "exports": {

package/src/atoms/heading.tsx

@@ -45,19 +45,7 @@ export function Heading(props: HeadingProps): React.ReactNode {
           mapFn: mapVariant,
         })
       : size;
-
-    // if (typeof variant === 'string') {
-    //   return mapVariant(variant);
-    // }
-    // if (typeof variant === 'object') {
-    //   const newObj: Partial<Record<Breakpoint, HeadingSize>> = {};
-    //   let key: Breakpoint;
-    //   for (key in variant) {
-    //     newObj[key] = mapVariant(variant[key]);
-    //   }
-    //   return newObj;
-    // }
-    // return size;
+ 
   }, [size, variant]);
 
   return (

package/src/atoms/typo.tsx

@@ -1,9 +1,11 @@
 import type { TextProps as RadixTextProps } from '@radix-ui/themes';
+import type { Responsive } from '@radix-ui/themes/props';
 import { Text as RadixText } from '@radix-ui/themes';
 import React, { useMemo, forwardRef } from 'react';
+import { mapWithResponsive } from '@/utils/map-with-responsive';
 
 export type TypoProps = RadixTextProps & {
-  variant?: 'body' | 'caption' | 'subtitle';
+  variant?: Responsive<'body' | 'caption' | 'subtitle'>;
 };
 
 export const Typo = forwardRef<HTMLSpanElement, TypoProps>(
@@ -12,15 +14,23 @@ export const Typo = forwardRef<HTMLSpanElement, TypoProps>(
 
     const radixSize = useMemo<RadixTextProps['size']>(() => {
       if (size !== undefined) return size;
-      switch (variant) {
-        case 'caption':
-          return '1';
-        case 'subtitle':
-          return '3';
-        case 'body':
-        default:
-          return '2';
-      }
+
+      if (variant === undefined) return '2';
+
+      return mapWithResponsive({
+        value: variant,
+        mapFn: (variantValue?: 'body' | 'caption' | 'subtitle') => {
+          switch (variantValue) {
+            case 'caption':
+              return '1';
+            case 'subtitle':
+              return '3';
+            case 'body':
+            default:
+              return '2';
+          }
+        },
+      });
     }, [size, variant]);
 
     return (

package/src/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/complete-review.tsx

@@ -22,8 +22,8 @@ function CompleteReview(props: {
       justify="between"
       maxHeight="550px"
       maxWidth="650px"
-      px="4"
-      py="6"
+      mx="4"
+      my="6"
       width="100%"
     >
       <Flex align="center" direction="column">

package/src/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/curriculum-review-context.tsx

@@ -75,7 +75,7 @@ function getInitialAnswers(
 function createAnswersYupSchema(
   questions: ReviewQuestionElement[]
 ): Yup.ObjectSchema<Record<string, string | undefined>> {
-  const shape: Record<string, Yup.StringSchema<string | undefined>> = {};
+  const shape: Record<string, Yup.StringSchema> = {};
   questions.forEach((q) => {
     let schema = Yup.string();
     if (q.required) {
@@ -188,7 +188,7 @@ export function CurriculumReviewProvider({
   }, [step]);
 
   const onClickReviewMyAnswer = useCallback((): void => {
-    setStep(1);
+    setStep(0);
   }, []);
 
   const handleSubmit = useCallback((): void => {

package/src/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/index.tsx

@@ -1,15 +1,14 @@
-import React from 'react';
+import React  from 'react';
 import { type CurriculumReviewContents } from '@/types/curriculumContents.type';
-import type { Curriculum } from '@/types';
+import type { Curriculum } from '@/types'; 
 import {
   CurriculumReviewProvider,
   useCurriculumReviewContext,
 } from './curriculum-review-context';
-import StartReview from './start-review'; 
+import StartReview from './start-review';
 import CompleteReview from './complete-review';
 import ReviewQuestion from './ReviewQuestion';
-
-// 내부 분리: 실제 스텝 진행 및 context 활용
+ 
 function CurriculumReviewStepsInner(): React.ReactNode {
   const {
     formik,
@@ -22,11 +21,11 @@ function CurriculumReviewStepsInner(): React.ReactNode {
     currentQuestion,
     currentAnswer,
     currentError,
-    reviewContents, 
-    handleAnswerChange
+    reviewContents,
+    handleAnswerChange,
   } = useCurriculumReviewContext();
   const { questions } = reviewContents;
- 
+
   if (step === 0) {
     return <StartReview onStart={handleStart} />;
   }
@@ -48,7 +47,7 @@ function CurriculumReviewStepsInner(): React.ReactNode {
       />
     );
   }
-  return <CompleteReview onClickReviewMyAnswer={onClickReviewMyAnswer}/>; 
+  return <CompleteReview onClickReviewMyAnswer={onClickReviewMyAnswer} />;
 }
 
 interface CurriculumReviewStepsProps {
@@ -66,7 +65,7 @@ interface CurriculumReviewStepsProps {
     answer: Record<string, string>;
   }) => void;
   mode: 'edit' | 'create';
-  done: boolean;
+  done: boolean; 
 }
 
 function CurriculumReviewSteps({
@@ -79,14 +78,15 @@ function CurriculumReviewSteps({
   onReviewValueChange,
   mode,
   done,
-}: CurriculumReviewStepsProps): React.ReactNode {
+}: CurriculumReviewStepsProps): React.ReactNode { 
+
   return (
     <CurriculumReviewProvider
       curriculum={curriculum}
       defaultValues={defaultValues}
       done={done}
       mode={mode}
-      onClickEndReview={onClickEndReview} 
+      onClickEndReview={onClickEndReview}
       onReviewValueChange={onReviewValueChange}
       onSubmit={onSubmit}
       reviewContents={contents}

package/src/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/start-review.tsx

@@ -118,12 +118,12 @@ function StartReview({ onStart }: StartReviewProps): React.ReactNode {
         height="100%"
         justify="center"
         maxWidth="650px"
-        pb="6"
-        pt="4"
-        px="4"
+        pb={{initial: '6', sm: '0'}}
+        pt={{initial: '4', sm: '0'}}
+        px={{initial: '4', sm: '0'}}
         width="100%"
       >
-        <Typo color="gray">{curriculum.title}</Typo>
+        <Typo color="gray" mb="1">{curriculum.title}</Typo>
         <Heading variant="heading3">{reviewContents.title}</Heading>
         <Separator my="4" style={{ width: 100 }} />
 

package/src/molecules/curriculumV2/CurriculumContents/curriculum-review.tsx

@@ -13,25 +13,74 @@ interface CurriculumReviewProps {
 function CurriculumReview(props: CurriculumReviewProps): React.ReactNode {
   const { item, sectionTitle } = props;
   const { description, buttonTitle } = item;
-  const { curriculum, onReviewSubmit: _onReviewSubmit, onReviewValueChange, curriculumReviewAnswers, tempCurriculumReviewAnswers, curriculumCompleteMap } = useCurriculumContext();
+  const {
+    curriculum,
+    onReviewSubmit: _onReviewSubmit,
+    onReviewValueChange: _onReviewValueChange,
+    curriculumReviewAnswers,
+    tempCurriculumReviewAnswers,
+    curriculumCompleteMap,
+  } = useCurriculumContext();
   const [open, setOpen] = useState(false);
+  const [isChanged, setIsChanged] = useState(false);
+  const [closeDialogOpen, setCloseDialogOpen] = useState(false);
 
-  const onReviewSubmit = useCallback((values: Record<string, string>) => {
-    return _onReviewSubmit({ reviewId: item.uuid, answer: values });
-  }, [item.uuid, _onReviewSubmit]); 
+  const onReviewValueChange = useCallback(
+    ({
+      reviewId,
+      answer,
+    }: {
+      reviewId: string;
+      answer: Record<string, string>;
+    }) => {
+      if (curriculumReviewAnswers[reviewId] === answer[reviewId]) {
+        return;
+      }
+
+      setIsChanged(true);
+      _onReviewValueChange({ reviewId, answer });
+    },
+    [_onReviewValueChange, curriculumReviewAnswers]
+  );
+
+  const onReviewSubmit = useCallback(
+    (values: Record<string, string>) => {
+      return _onReviewSubmit({ reviewId: item.uuid, answer: values }).then(
+        (result) => {
+          setIsChanged(false);
+          return result;
+        }
+      );
+    },
+    [item.uuid, _onReviewSubmit]
+  );
 
   const onClickEndReview = useCallback(() => {
-    setOpen(false); 
+    setOpen(false);
   }, []);
 
+  const onClickCloseDrawer = useCallback(() => {
+    if (isChanged) {
+      setCloseDialogOpen(true);
+    } else {
+      setOpen(false);
+    }
+  }, [isChanged]);
+
   const mode = useMemo(() => {
-    return item.questions.every(question => curriculumReviewAnswers[question.uuid] && curriculumReviewAnswers[question.uuid] !== '') ? 'edit' : 'create';
+    return item.questions.every(
+      (question) =>
+        curriculumReviewAnswers[question.uuid] &&
+        curriculumReviewAnswers[question.uuid] !== ''
+    )
+      ? 'edit'
+      : 'create';
   }, [curriculumReviewAnswers, item.questions]);
 
-  const defaultValues = useMemo(() => { 
+  const defaultValues = useMemo(() => {
     const allAnswers = {
       ...tempCurriculumReviewAnswers,
-      ...curriculumReviewAnswers
+      ...curriculumReviewAnswers,
     };
 
     return item.questions.reduce<Record<string, string>>((acc, question) => {
@@ -44,7 +93,7 @@ function CurriculumReview(props: CurriculumReviewProps): React.ReactNode {
     return Boolean(curriculumCompleteMap[item.uuid]);
   }, [curriculumCompleteMap, item.uuid]);
 
-  const bgColor=  done ? 'var(--color-panel-solid)' : undefined;
+  const bgColor = done ? 'var(--color-panel-solid)' : undefined;
 
   return (
     <Dialog.Root onOpenChange={setOpen} open={open}>
@@ -57,9 +106,9 @@ function CurriculumReview(props: CurriculumReviewProps): React.ReactNode {
         py="3"
         style={{
           backgroundImage: `url(https://tipp-coaching-live.s3.ap-northeast-2.amazonaws.com/images/curriculum_review_bg.png)`,
-          backgroundPosition:'center',
-          backgroundSize:'cover',
-          backgroundRepeat:'no-repeat',
+          backgroundPosition: 'center',
+          backgroundSize: 'cover',
+          backgroundRepeat: 'no-repeat',
         }}
         width="100%"
       >
@@ -71,7 +120,11 @@ function CurriculumReview(props: CurriculumReviewProps): React.ReactNode {
         </Typo>
 
         <Dialog.Trigger>
-          <Button mt="3" style={{ minWidth: 232, backgroundColor: bgColor }} variant={done ? 'outline' : 'solid'}>
+          <Button
+            mt="3"
+            style={{ minWidth: 232, backgroundColor: bgColor }}
+            variant={done ? 'outline' : 'solid'}
+          >
             <Typo truncate>{done ? '나의 응답 다시보기' : buttonTitle}</Typo>
           </Button>
         </Dialog.Trigger>
@@ -93,7 +146,7 @@ function CurriculumReview(props: CurriculumReviewProps): React.ReactNode {
         >
           <CurriculumReviewSteps
             contents={item}
-            curriculum={curriculum} 
+            curriculum={curriculum}
             defaultValues={defaultValues}
             done={done}
             mode={mode}
@@ -102,18 +155,44 @@ function CurriculumReview(props: CurriculumReviewProps): React.ReactNode {
             onSubmit={onReviewSubmit}
             title={sectionTitle}
           />
+          {/* 닫기 버튼 */}
           <Box position="absolute" right="16px" top="16px">
-            <Dialog.Close asChild>
-              <IconButton color="gray" variant="ghost">
-                <Box display={{ initial: 'none', md: 'block' }}>
-                  <Cross1Icon height={20} width={20} />
-                </Box>
-                <Box display={{ initial: 'block', md: 'none' }}>
-                  <Cross1Icon height={16} width={16} />
-                </Box>
-              </IconButton>
-            </Dialog.Close>
+            <IconButton
+              color="gray"
+              onClick={onClickCloseDrawer}
+              variant="ghost"
+            >
+              <Box display={{ initial: 'none', md: 'block' }}>
+                <Cross1Icon height={20} width={20} />
+              </Box>
+              <Box display={{ initial: 'block', md: 'none' }}>
+                <Cross1Icon height={16} width={16} />
+              </Box>
+            </IconButton>
           </Box>
+
+          {/* 진짜 닫겠습니까 모달 */}
+          <Dialog.Root onOpenChange={setCloseDialogOpen} open={closeDialogOpen}>
+            <Dialog.Content
+              buttons={
+                <Flex gap="3" justify="end">
+                  <Dialog.Close asChild>
+                    <Button color="gray" variant="outline">
+                      돌아가기
+                    </Button>
+                  </Dialog.Close>
+                  <Dialog.Close>
+                    <Button color="red" onClick={onClickEndReview}>
+                      나가기
+                    </Button>
+                  </Dialog.Close>
+                </Flex>
+              }
+              title="작성을 중단하시겠습니까?"
+            >
+              <Typo>페이지에서 벗어나면 작성한 내용이 저장되지 않습니다.</Typo>
+            </Dialog.Content>
+          </Dialog.Root>
         </Flex>
       </Dialog.Content>
     </Dialog.Root>

package/src/molecules/curriculumV2/curriculum-sub-nav.tsx

@@ -1,11 +1,5 @@
 import React, { useCallback } from 'react';
-import {
-  Box, 
-  Grid,
-  Heading,
-  IconButton,
-  Typo,
-} from '@/atoms';
+import { Box, Grid, Heading, IconButton, Typo } from '@/atoms';
 import { ChevronLeftIcon, ChevronRightIcon } from '@/icon';
 import { useCurriculumContext } from './curriculum-context';
 
@@ -54,10 +48,19 @@ export function CurriculumSubNav(): React.ReactNode {
         <Box />
       )}
       <Box width="100%">
-        <Heading style={{ textOverflow: 'ellipsis' }} variant="heading4">
-          {selectedItem.title}
-        </Heading>
-        <Typo as="p" color="gray" style={{ textOverflow: 'ellipsis' }}>
+        {/* 데스크탑 타이틀 */}
+        <Box display={{ initial: 'none', md: 'block' }}>
+          <Heading style={{ textOverflow: 'ellipsis' }} variant="heading5">
+            {selectedItem.title}
+          </Heading>
+        </Box>
+
+        {/* 모바일 타이틀 */}
+        <Box display={{ initial: 'block', md: 'none' }}>
+          <Typo weight="bold">{selectedItem.title}</Typo>
+        </Box>
+
+        <Typo as="p" color="gray" mt="1" style={{ textOverflow: 'ellipsis' }} variant='caption'>
           {selectedSectionTitle?.title}
         </Typo>
       </Box>
@@ -76,4 +79,3 @@ export function CurriculumSubNav(): React.ReactNode {
     </Grid>
   );
 }
- 

package/src/molecules/curriculumV2/curriculum-v2-layout.tsx

@@ -30,7 +30,7 @@ export function CurriculumV2Layout(props: {
         <Grid
           columns={{ initial: '1', md: '1fr 340px' }}
           height="100%"
-          maxWidth="1100px"
+          maxWidth="1440px"
           rows={{ initial: 'auto 1fr', md: 'auto' }}
           width="100%"
         >