[KOBG-15] 시연 영상 프로토타입

app/main/my-learning/[level]/ending/page.tsx

@@ -13,9 +13,11 @@ import { useLevelParam } from '@/hooks/useLevelParam';
 export default function LevelCompletionPage() {
   const router = useRouter();
   const { currentLanguage } = useLanguageStore();
+  const { username, increaseLevel } = useUserStore();
   const levelParam = useLevelParam();
 
   const handleBtnClick = () => {
+    increaseLevel();
     router.push(ROUTES.MAIN.ROOT);
   };
 
@@ -39,7 +41,7 @@ export default function LevelCompletionPage() {
           className="mt-26 mb-8"
         />
         <CharacterText
-          title={'내일도 즐겁게 공부해 보자!'}
+          title={`내일도 즐겁게 공부해 보자!`}
           subtitle={"Let's have fun studying tomorrow!"}
           audio
         />

app/main/my-learning/[level]/step1/page.tsx

@@ -25,19 +25,19 @@ export default function LevelStep1Page() {
   //TODO: API 연결
   const phrases = [
     {
-      phrase: '너는 취미가 뭐야?',
-      romanization: 'Neo nun / chui mi ga / muh ya',
-      translation: 'What is your hobby?',
+      phrase: '우리 일 교시 뭐야?',
+      romanization: 'Uri / il / gyosi / moya?',
+      translation: 'What is our first class?',
     },
     {
-      phrase: '오늘 날씨 어때?',
-      romanization: 'Oneul nalssi eottae?',
-      translation: 'How is the weather today?',
+      phrase: '수업 언제 시작해?',
+      romanization: 'Sueop / eonje / sijakhae?',
+      translation: 'When does the class start?',
     },
     {
       phrase: '무슨 음식을 좋아해?',
-      romanization: 'Museun eumsigeul joahae?',
-      translation: 'What food do you like?',
+      romanization: 'Oneul / sukjje / da / haesseo?',
+      translation: 'Did you finish today’s homework?',
     },
   ];
 

app/main/my-learning/[level]/step2/page.tsx

@@ -25,31 +25,33 @@ type QuestionItem = {
 
 const questions: QuestionItem[] = [
   {
-    question: '안녕 너는 좋아하는 게 뭐야?',
-    questionTrans: 'What do you like?',
-    hint: '취미가 뭐야? 라고 말해 봐!',
-    translation: 'What is your hobby?',
-    correction: '안녕! 너는 취미가 뭐야?',
-    explanation: '문장 시작에 ~ 자연스러운 대화가 됩니다.',
-    answer: '그렇구나! 나도 이거 좋아해!',
+    question: '안녕 오늘 첫 수업 뭐였지?',
+    questionTrans: 'Hi what is first class today again?',
+    hint: 'Start by saying a subject in Korean!',
+    translation: 'I think it was Korean class',
+    correction: '국어 시간이었던 것 같아.',
+    explanation:
+      '‘이였던거’는 ‘였던 것’으로 교정할 수 있어요. 또한, ‘같아’는 ‘같애’로 바꾸는 것이 더 자연스러워요.',
+    answer: '맞아, 국어 시간이지! 알려줘서 고마워!',
   },
   {
-    question: '너는 주말에 뭐 해?',
-    questionTrans: 'What do you do on weekends?',
-    hint: '주말에 뭐 해? 라고 말해 봐!',
-    translation: 'What do you do on weekends?',
-    correction: '너는 주말에 주로 뭐 해?',
-    explanation: '조금 더 자연스러운 질문으로 ~',
-    answer: '재밌었겠다!',
+    question: '국어 시간 언제 시작 하더라?',
+    questionTrans: 'When does Korean class start?',
+    hint: 'Say a number in Korean',
+    translation: 'nine',
+    correction: '아홉시',
+    explanation:
+      '문장이 올바르게 표현되었습니다. 시간 표현이 명확하고 간결합니다.',
+    answer: '쉬는 시간 얼마 안남았네!',
   },
   {
-    question: '네가 제일 좋아하는 음식은 뭐야?',
-    questionTrans: 'What is your most favorite food?',
-    hint: '좋아하는 음식을 말해 봐!',
-    translation: 'What is your favorite food?',
-    correction: '네가 가장 좋아하는 음식은 뭐야?',
-    explanation: '"가장"이 더 자연스러운 표현입니다.',
-    answer: '맛있겠다!',
+    question: '혹시 숙제 다 했어?',
+    questionTrans: 'Did you do your homework?',
+    hint: "Try to say '응' or '아니'",
+    translation: 'Yeah, I finished all my homework.',
+    correction: '응 숙제 다 했어.',
+    explanation: '문장이 자연스럽고 맞습니다. 잘 하셨어요!',
+    answer: '대단해! 숙제를 다 했다니 정말 멋져!',
   },
 ];
 

app/main/my-learning/[level]/step3/page.tsx

@@ -79,10 +79,14 @@ export default function LevelStep3Page() {
         </div>
 
         <div className="grid grid-cols-3 gap-2">
-          {[1, 2, 3].map((item, idx) => (
+          {[
+            { ko: '숙제', en: 'Homework' },
+            { ko: '수업', en: 'Class' },
+            { ko: '1교시', en: 'First class' },
+          ].map((item, idx) => (
             <div key={idx} className="bg-white rounded-2xl p-3">
               <div className="flex flex-row items-center gap-2 mb-1">
-                <h3 className="text-black text-h3-bold">단어{item}</h3>
+                <h3 className="text-black text-h3-bold">{item.ko}</h3>
                 <Image
                   src={'/icons/bookmark-unchecked.svg'}
                   alt={'bookmark icon'}
@@ -92,7 +96,7 @@ export default function LevelStep3Page() {
                 />
               </div>
               <div className="text-secondary-300 text-trans-cp2-regular">
-                단어 뜻 {item}
+                {item.en}
               </div>
             </div>
           ))}

app/main/my-learning/_components/roadmap/LevelModal.tsx

@@ -5,6 +5,7 @@ import { motion, AnimatePresence } from 'framer-motion';
 import LevelModalList from './LevelModalList';
 import { useRouter } from 'next/navigation';
 import { ROUTES } from '@/constants/routes';
+import { useUserStore } from '@/stores/userStore';
 
 interface LevelModalProps {
   levelNum: number;
@@ -20,22 +21,29 @@ export default function LevelModal({
   showButton = false,
 }: LevelModalProps) {
   const router = useRouter();
+  const { currentLevel } = useUserStore();
 
   // TODO: API 연동
-  const levelGoals = [
-    {
-      goal: '반갑게 인사하기',
-      sub: "Sharing each other's hobbies.",
-    },
-    {
-      goal: '좋아하는 음식 말하기',
-      sub: 'Talk about your favorite foods.',
-    },
-    {
-      goal: '하루 일과 소개하기',
-      sub: 'Introduce your daily routine.',
-    },
-  ];
+  const levelGoalsMap: Record<number, { goal: string; sub: string }[]> = {
+    1: [
+      {
+        goal: '사용할 문장 알아볼까?',
+        sub: "Let's check out some sentences to use.",
+      },
+      { goal: '같이 대화해볼까?', sub: 'Wanna try a conversation together?' },
+      { goal: '오늘의 레슨은 어땠어?', sub: "How was today's lesson?" },
+    ],
+    2: [
+      { goal: '친구랑 어떻게 말할까?', sub: 'How do you talk with a friend?' },
+      { goal: '인사 연습해보자!', sub: "Let's practice greetings!" },
+      {
+        goal: '오늘 배운 인사, 어땠어?',
+        sub: 'How were the greetings you learned today?',
+      },
+    ],
+  };
+
+  const levelGoals = levelGoalsMap[levelNum] || [];
 
   const handleStart = () => {
     router.push(ROUTES.MAIN.MY_LEARNING.getStep(levelNum, 'intro1'));
@@ -74,6 +82,7 @@ export default function LevelModal({
                 key={idx}
                 levelGoalText={item.goal}
                 levelGoalSubText={item.sub}
+                completeGoal={levelNum !== currentLevel}
               />
             ))}
           </div>

app/main/my-learning/_locales/text.json

@@ -7,34 +7,34 @@
         "jp": "言語を選択してください!\n翻訳に使用します。",
         "chn": "选择一种语言!\n我们将用它进行翻译。"
     },
-    "characterText": "주제는 취미와 좋아하는 것들이야.",
+    "characterText": "오늘의 주제는 학교에 대한 이야기야.",
     "characterSubText": {
         "vt": "Không có ngôn ngữ mà tôi muốn.",
-        "en": "The topics are your hobbies and favorite things.",
+        "en": "Today's topic is about school.",
         "jp": "私の欲しい言語がありません。",
         "chn": "没有我想要的语言。"
     },
     "phrase1": {
         "id": 1,
-        "kor": "너는 취미가 뭐야?",
+        "kor": "우리 1교시 뭐야?",
         "vt": "Không có ngôn ngữ mà tôi muốn.",
         "en": "What is your hobby?",
         "jp": "私の欲しい言語がありません。",
         "chn": "没有我想要的语言。"
       },
     "phrase2": {
       "id": 2,
-       "kor": "너는 이름이 뭐야?",
+       "kor": "수업 언제 시작해?",
        "vt": "Không có ngôn ngữ mà tôi muốn.",
-        "en": "What is your name?",
+        "en": "When does the class start?",
         "jp": "あなたの名前は何ですか？",
         "chn": "你叫什么名字？"
     },
     "phrase3": {
       "id": 3,
-       "kor": "가장 좋아하는게 뭐야?",
+       "kor": "오늘 숙제 다 했어?",
        "vt": "Không có ngôn ngữ mà tôi muốn.",
-        "en": "What is your favorite thing?",
+        "en": "Did you finish today’s homework?",
         "jp": "あなたの名前は何ですか？",
         "chn": "你叫什么名字？"
     }
@@ -73,17 +73,17 @@
       },
     "phrase2": {
       "id": 2,
-       "kor": "서로의 취미 공유하기",
+       "kor": "수업 시간 알려주기",
        "vt": "Không có ngôn ngữ mà tôi muốn.",
-        "en": "Sharing each other’s hobbies",
+        "en": "Telling the class schedule",
         "jp": "あなたの名前は何ですか？",
         "chn": "你叫什么名字？"
     },
     "phrase3": {
       "id": 3,
-       "kor": "좋아하는 것 말하기",
+       "kor": "숙제 했는지 물어보기",
        "vt": "Không có ngôn ngữ mà tôi muốn.",
-        "en": "Talking about what you like",
+        "en": "Asking if they did their homework",
         "jp": "あなたの名前は何ですか？",
         "chn": "你叫什么名字？"
     }

app/main/my-learning/page.tsx

@@ -7,53 +7,27 @@ import LevelButton from './_components/roadmap/LevelButton';
 import { useUserStore } from '@/stores/userStore';
 
 export default function MyLearningPage() {
-  const { username } = useUserStore();
+  const { username, currentLevel } = useUserStore();
   const scrollRef = useRef<HTMLDivElement>(null);
 
   const levelData = [
-    { text: '학교에 가자!', subText: "Let's go to School!" },
-    { text: '숙제를 하자!', subText: "Let's do Homework!" },
-    { text: '책 읽기', subText: 'Reading Books' },
-    { text: '운동하기', subText: 'Exercise Time' },
-    { text: '음악 듣기', subText: 'Listening Music' },
-    { text: '영화 보기', subText: 'Watch a Movie' },
-    { text: '친구 만나기', subText: 'Meeting Friends' },
-    { text: '게임 하기', subText: 'Play Games' },
+    { text: '학교에 가자!', subText: "Let's go to school!" },
+    { text: '친구랑 인사하기', subText: 'Greeting with a friend' },
+    { text: '밥 먹으러 가자!', subText: "Let's go eat!" },
+    { text: '길을 물어보기', subText: 'Asking for directions' },
+    { text: '가족 소개하기', subText: 'Introducing family' },
+    { text: '날씨 이야기', subText: 'Talking about the weather' },
+    { text: '쇼핑하기', subText: 'Going shopping' },
+    { text: '취미 이야기', subText: 'Talking about hobbies' },
+    { text: '시간 말하기', subText: 'Telling the time' },
+    { text: '병원 가기', subText: 'Going to the hospital' },
+    // { text: '교통수단 이용하기', subText: 'Using transportation' },
+    // { text: '음식 주문하기', subText: 'Ordering food' },
+    // { text: '학교 생활 이야기', subText: 'Talking about school life' },
+    // { text: '수학여행 가기', subText: 'Going on a school trip' },
+    // { text: '미래 꿈 이야기', subText: 'Talking about future dreams' },
   ];
 
-  const currentLevel = 1; // 현재 레벨 예시
-
-  // 부드러운 스크롤 함수
-  const smoothScrollTo = (
-    container: HTMLElement,
-    target: number,
-    duration: number,
-  ) => {
-    const start = container.scrollTop;
-    const change = target - start;
-    let currentTime = 0;
-    const increment = 16; // 약 60fps
-
-    const animateScroll = () => {
-      currentTime += increment;
-      const val = easeInOutQuad(currentTime, start, change, duration);
-      container.scrollTop = val;
-
-      if (currentTime < duration) {
-        requestAnimationFrame(animateScroll);
-      }
-    };
-    animateScroll();
-  };
-
-  // easing 함수
-  const easeInOutQuad = (t: number, b: number, c: number, d: number) => {
-    t /= d / 2;
-    if (t < 1) return (c / 2) * t * t + b;
-    t--;
-    return (-c / 2) * (t * (t - 2) - 1) + b;
-  };
-
   //TODO: 사용자 진도로 자동 스크롤, 커스텀 훅 혹은 유틸로 리팩토링
   useEffect(() => {
     const smoothScrollTo = (

app/onboarding/login/page.tsx

@@ -6,6 +6,7 @@ import Logo from '@/components/Logo';
 import GoogleSignInButton from './_components/GoogleLoginBtn';
 import { googleLogin } from './_utils/googleLogin';
 import { ROUTES } from '@/constants/routes';
+import Button from '@/components/buttons/_index';
 
 export default function LoginPage() {
   const router = useRouter();
@@ -55,7 +56,12 @@ export default function LoginPage() {
         transition={{ duration: 0.6, delay: 2.4, ease: 'easeIn' }}
         className="mt-10"
       >
-        <GoogleSignInButton onClick={handleGoogleLogin} />
+        {/* <GoogleSignInButton onClick={handleGoogleLogin} /> */}
+        <Button
+          text={'회원가입'}
+          className="w-screen max-w-91"
+          onClick={handleGoogleLogin}
+        />
       </motion.div>
     </div>
   );

stores/userStore.ts

@@ -11,11 +11,15 @@ interface UserStore {
   setSchool: (school: SchoolOption['value']) => void;
   grade: string;
   setGrade: (grade: string) => void;
+
+  currentLevel: number;
+  setCurrentLevel: (level: number) => void;
+  increaseLevel: () => void;
 }
 
 export const useUserStore = create(
   persist<UserStore>(
-    set => ({
+    (set, get) => ({
       username: '',
       setUsername: name => set({ username: name }),
       age: '',
@@ -24,6 +28,13 @@ export const useUserStore = create(
       setSchool: school => set({ school }),
       grade: '',
       setGrade: grade => set({ grade }),
+
+      currentLevel: 1,
+      setCurrentLevel: level => set({ currentLevel: level }),
+      increaseLevel: () => {
+        const { currentLevel } = get();
+        set({ currentLevel: currentLevel + 1 });
+      },
     }),
     {
       name: 'user-store', // localStorage key