[Next.js] 최종 팀프로젝트 - (3) 언어수업 시작 페이지

UX/UI

• 언어수업에 대해 설명하는 이미지(최대 3장)를 캐러셀로 보여줌.
• 언어부분 클릭하면 드롭다운으로 프로젝트에서 준비한 모든 언어를 보여줌.
• 왼쪽(1사용언어)은 먼저 시작할 언어를 선택하고, 오른쪽(2사용언어)은 10분 뒤 수업할 언어를 선택.
• ‘녹음 토글’은 동의하는지를 온오프하는 토글이며,
  동의하는 사람들끼리 매칭→자동녹음 시작 / 동의하지 않는 사람들끼리 매칭
• ‘시작하기’ 버튼 클릭 → 매칭 중이라는 ‘로딩바’ 오버레이되어 해당 페이지 상단에 띄어줌

기능 구현

1. Carousel(캐러셀: 이미지 최대 3장)

임시로 이미지 3장 파일을 public/images 폴더에 넣어줬다.

1) 라이브러리 사용 (yarn add embla-carousel-react 설치)

참고자료
Embla Carousel 공식문서
Next.js에서 Embla Carousel 라이브러리를 사용하여 Carousel Slider 만들기

2) 원격 이미지, 네트워크 이미지

import Image from 'next/image'

export default function Page() {
  return (
    <Image
      src="<network-image>"
      alt="Picture of the author"
      width={500}
      height={500}
    />
  )
}

3) 원격 이미지 허용을 위한 설정

• ext.config.js 파일에 지원되는 URL 패턴을 정의하여 안전하게 이미지 최적화

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: false,
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: ".com",
        pathname: "/**",
      },
    ],
    formats: ["image/avif", "image/webp"],
  },
};

4) 캐러셀 직접 구현하기 - 참고자료(코드작성X)

캐러셀 이미지 슬라이더 직접 구현하기
무한 캐러셀 컴포넌트 직접 구현하기

2. 언어선택 드롭다운

참고자료
HTML Select 태그로 드롭다운 메뉴 만들기

3. 녹음 토글 스위치

참고자료
Tailwind CSS Togle - Flowbite
Tailwind Toggle and Switch

---

아래 두 가지는 매칭 기능인데 매칭기능을 구현하려면 앞의 데이터와 화상수업에 필요한 데이터를 모두 모아 필터링해줘야하기 때문에 화상수업 기능 구현하시는 팀원과 어떻게 데이터 테이블을 만들지 상의해야 하는 부분이라 우선 여기까지 구현했다.
내가 맡은 역할의 5%를 오늘 구현하는 날인데 할 일을 마쳤다.

이후 부분을 하기 위해 supabase 리얼타임 공부를 해야겠다.

4. 시작 버튼 (화상수업 기능구현하시는 분과 조인)

• 언어선택 + 녹음동의 데이터를 합친 것으로 매칭 시작

5. 매칭중 로딩바

• 로딩 중임을 나타내는 로딩바
• 로딩 최대시간 10분으로 설정하여 매칭 안되면 alert