<aside> 💬 실제 현업에서 프로젝트가 진행 중에 예상치 못한 요구 사항들이 발생하며, 이러한 상황에 대처하고 해결하는 능력은 필수입니다.

</aside>

2단계에서는 이러한 현실적인 시나리오를 경험하고, 문제를 해결하는 역량을 키워보도록 하겠습니다.

요구사항

공통 구현

• 다크 모드를 적용해주세요.
• 애니메이션 효과를 넣어주세요.(ex. 넥플릭스, 왓차 등등)
• 댓글 API는 supabase를 사용합니다.

  • supabase 설치

    <aside> ✔️ npm install @supabase/supabase-js yarn add @supabase/supabase-js

    </aside>

    • API KEY

    // 환경변수 코드 내용 제공
    REACT_APP_SUPABASE_PROJECT_ID={SUPABASE slug}
    REACT_APP_SUPABASE_PROJECT_API_KEY={SUPABASE PROJECT KEY}
    

    import { createClient } from '@supabase/supabase-js';
    
    export const supabase = createClient(
      `https://${process.env.REACT_APP_SUPABASE_PROJECT_ID}.supabase.co`,
      process.env.REACT_APP_SUPABASE_PROJECT_API_KEY
    );
    
    export const TABLE_NAME = 'video_comment';
    

필수 구현

• 영화 목록 페이지
  • 사용자는 원하는 영화를 검색할 수 있어요.
    • popular.json의 title 기준으로 검색이 가능합니다.
    • 뒤로가기 시, 영화 검색 내용이 초기화가 되면 안돼요.
• 영화 상세 페이지

  • 사용자는 관련 영상 목록이 많아 스크롤하기 불편해요.

    • 관련 영상 목록을 편하게 볼수 있도록 개선해주세요.

  • 사용자는 의견을 볼수 있어요.

    const { data } = await supabase
        .from(TABLE_NAME)
        .select()
        .eq('video_id', videoId)
        .order('created_at', { ascending: false });
      setComments(data);
    

  • 사용자는 의견을 남길 수 있어요.

    const { data, error } = await supabase
        .from(TABLE_NAME)
      .insert({ text: commentInput, video_id: videoId })
      .select();
      setComments([data[0], ...comments]);
    

  • 사용자는 의견을 지울 수 있어요.

    await supabase.from(TABLE_NAME).delete().eq('id', id).select();
        setComments(comments.filter((comment) => comment.id !== id));
    

마감 기한

• 11월 26일 오후 6시까지 제출해주세요.

제출 방법

• 메인 또는 develop 브랜치에서 git tag v2.0.0
• git push origin v2.0.0
• 2주차에 사용한 환경변수파일이름/ 환경변수이름과 값을 디스코드 DM으로 보내주세요!

참고문서