@tipp/ui 2.1.18 → 2.1.19

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-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%"
         >