[Next.js] 최종 팀프로젝트 - (9) 언어수업 첫 화면 UI구성 변경

기존에 이런 형태의 페이지가 완전히 바뀌었다.

1. 기존

여기서,
1) 위에는 녹음 및 수업방식에 대한 설명을 2-3장의 사진으로 주시면 캐러셀로 나타내고,
2) 중간에는 사용언어의 순서를 드롭다운 방식으로 지정을 하고,
3) 녹음 동의 여부를 나타내는 토글이 있었다.
4) '시작하기' 버튼을 누르면 언어와 녹음 동의 여부에 따라 매칭이 진행되는 방식이었다.

2. 변경 후

이렇게,
1) 수업 설명방식의 설명이 필요없어져서 배경 이미지 한 장,
2) (마이페이지에서 내 언어, 학습언어 선택하는 기능이 있어서) 학습언어만 위에 보일 수 있게,
3) 크롬 브라우저에서 녹음이나 화상캠을 켜려면 동의여부를 묻는 알림이 뜨기 때문에 녹음 동의한 사람들만 자동녹음 되는 기능을 하지 않기로 해서 토글은 사라졌다.
4) '시작하기' 버튼을 누르면 매칭이 돼서 화상화면이 나올 때 까지 매칭 중을 알리는 스피너가 나타난다.

3. 코드 변경(디자인 작업 전)

1) 캐러셀 -> 이미지 1장

import img1 from "@/../public/images/book.jpg";
import Image from "next/image";

<Image src={img1} alt={"Image1"} />

그리고, 사용하지 않는 Embla Carousel 모듈은 삭제했다. yarn remove embla-carousel-react

2) user_info 테이블에서 learn_language 데이터 불러와서 보여주기

다른 팀원분께서 매칭을 위한 훅을 만들어 두셔서, 이미 userInfo 데이터가 불러와져있어, UI부분에서 {userInfo?.learn_language}만 적어주었다.

"use client";

import React from "react";
import { useMatching } from "@/hooks/useMatching";
import { redirect } from "next/navigation";
import img1 from "@/../public/images/book.jpg";
import Image from "next/image";

const LessonPage = () => {
	// 매칭로직(사용자정보 데이터 불러오는 훅)
  const { setupMatchingChannel, userInfo, isLoading, isError } = useMatching();
  const handleClickMachingButton = () => {
    if (!userInfo) {
      alert("로그인 후 이용이 가능합니다.");
    }

    setupMatchingChannel();
  };

  if (isLoading) {
    return <div>잠시만 기다려주세요...</div>;
  }

  if (isError) {
    alert("예기치 못한 오류가 발생하였습니다.");
    redirect("/");
  }

  return (
    <>
      <h1>언어수업</h1>
      <Image src={img1} alt={"Image1"} />
      {/*유저인포 데이터에 있는 학습언어 나타내기*/}
      <p>학습언어 : {userInfo?.learn_language}</p>
      <button onClick={handleClickMachingButton}>매칭하기</button>
    </>
  );
};

export default LessonPage;

3) 녹음토글 기능 삭제

4) 매칭하기 버튼 클릭 시 스피너 기능 추가

다른 분께서 만들어둔 useMatching 훅에서 로딩상태를 담는 useState를 추가하여

언어수업 첫 페이지에서 useMatching 훅을 가져올 때, 로딩상태를 담는 isMatching도 같이 props로 넘겨주어 매칭 중일 때 로딩스피너를 보여주는 UI코드를 작성했다.