[Vue.js] Movie-search Project

🎞 영화 검색 웹 애플리케이션 프로젝트

 

프로젝트 개요 

 

영화 검색 웹 애플리케이션은 Vue.js 3.X를 사용하여 개발된 웹 애플리케이션입니다. 

 

이 애플리케이션은 사용자가 원하는 영화를 검색하고 해당 영화에 대한 정보를 제공하는 기능을 제공합니다. 

 

한국영화진흥위원회(KOFIC)의 영화진흥위원회 API를 활용하여 영화 데이터를 가져와 사용자에게 제공합니다. 

 

주요 기능 

 

• 영화 검색: 사용자는 검색 창에 영화 제목을 입력하여 원하는 영화를 검색
• 영화 정보 제공: 검색된 영화에 대한 정보(영화 제목, 개봉일, 포스터 등)를 화면에 표시
• TMDB API 연동: TMDB API를 활용하여 영화 데이터를 실시간으로 가져와 화면에 표시
• 장르 별 영화 : 각 장르의 영화 슬라이더를 구현
• 상세 소개 : 영화 소개, cast , 관련 영화를 탐색

 

기술 스택 

 

• Vue.js 3.X
• Vuex
• Vue Router
• Axios
• HTML/CSS
• SCSS
• TMDB API

 

프로젝트 목적

 

이 프로젝트의 목적은 Vue.js를 활용하여 실전 프로젝트를 구현하고, 외부 API와의 데이터 통신 및 처리 방법

을 익히는 것입니다.

 또한, 사용자 경험을 고려하여 직관적이고 효율적인 영화 검색 서비스를 제공하는 것을 목표로 하였습니다. 

 

프로젝트 계획 

 

1. 기획 단계: 프로젝트의 목적과 주요 기능을 정의하고, UI/UX 디자인을 계획
2. 개발 단계: Vue.js를 사용하여 프론트엔드를 개발하고, KOFIC API와의 연동
3. 테스트 단계: 각 기능의 동작을 테스트하고, 버그를 수정하여 안정적인 서비스를 제공
4. 배포 단계: 완성된 애플리케이션을 웹 호스팅 서비스에 배포

 

---

📕 기획 단계

스토리보드

1. 메인 화면 
   • Main에 Logo와 인기, 장르별 Movie List가 표시됩니다. 
   • Search bar를 통해 사용자가 영화 제목을 입력할 수 있습니다.
   • 각 영화는 포스터와 제목 정보로 구성됩니다. 
   • 사용자는 Bright , Dark Mode를 설정할 수 있습니다. (다음 방문 시에도 사용자가 선택한 모드가 유지됩니다.)
2. 검색 결과
   • 입력시 실시간으로 입력한 영화가 Filtering 되어 화면에 표시됩니다.
   • 일정 갯수를 화면에 표시하고 일정 갯수가 넘어가면 더 불러오기를 클릭합니다.
   • 더 불러오기 버튼 클릭 시 Movie Data를 더 불러옵니다.
3. 영화 선택
   • 사용자는 검색 결과에서 원하는 Movie를 선택할 수 있습니다. 
   • 선택한 Movie에 대한 자세한 정보가 표시됩니다. 
4. 에러 처리
   • 사용자가 잘못된 검색어를 입력하거나 검색 결과가 없는 경우에 대비하여 에러 메시지가 표시됩니다. 
   • 사용자가 다시 시도할 수 있도록 "재시도" 버튼이나 자동으로 포커스가 검색 창에 맞춰집니다.

 

UI/UX 디자인

Design Tool

• Canva

1. Logo  

   

   

   Dark Mode

2. 메인 화면

   

   메인 화면 상단

   

   메인 화면 중하단

3. 상세 화면

   

   상세 화면

4. 검색 화면

   

   검색 화면

---

💻 개발 단계

메인 화면

🔥 Dark Mode 구현
요구 사항
1. 사용자가 원하는 Mode Change

2. 사용자가 이전에 사용했던 모드 저장하여 재방문시에도 모드 유지

 // store.vue
  state: {
    theme: "brightMode",
    ...
  },
  mutations: {
    ...
    setTheme(state, theme) {
      state.theme = theme;
    },
  },

default 값 brightMode로 초기화 후

값을 변경해 줄 mutation 선언

// app.js
   data() {
    return {
      localTheme: localStorage.getItem("theme"),
    };
  },
  created() {
    this.localTheme = localStorage.getItem("theme");
    if (this.localTheme) {
      document.documentElement.setAttribute("data-theme", this.localTheme);
      this.$store.commit("setTheme", this.localTheme);
    } else {
      document.documentElement.setAttribute("data-theme", this.$store.state.theme);
      window.localStorage.setItem("theme", this.$store.state.theme);
    }
  },

페이지 created 시에 localStoreage를 체크 후

있다면 html data에 set, store에서 mode를 change,

없다면 default값을 html data에 set

   // MeFix.vue
<template>
  <div class="fix-item">
    <button class="top-btn" @click="scrollTop"><span class="material-symbols-outlined"> arrow_upward </span></button>
    <button class="mode-btn" @click="toggleMode">
      <span class="material-symbols-outlined">
        {{ theme == "brightMode" ? "light_mode" : "dark_mode" }}
      </span>
    </button>
  </div>
</template>

 // MeFix.vue
 computed: {
    theme() {
      return this.$store.state.theme;
    },
  },
   methods: {
    toggleMode() {
      const newTheme = this.theme == "darkMode" ? "brightMode" : "darkMode";
      this.$store.commit("setTheme", newTheme);
      localStorage.setItem("theme", newTheme);
      document.documentElement.setAttribute("data-theme", newTheme);
    },
  },

state에 theme 체크 후 mode change

localStorage, html data도 변경

 // app.scss
html[data-theme="brightMode"] {
  --color-body: #efefef;
  --color-text: #2b2b2b;
  // Fixed
  .fix-item {
    button {
      background-color: #efefef;
      -webkit-box-shadow: 0 0 0 1px #dadcdf, 0 4px 8px 0 rgba(0, 0, 0, 0.15);
      box-shadow: 0 0 0 1px #dadcdf, 0 4px 8px 0 rgba(0, 0, 0, 0.15);
      span {
        color: #2b2b2b;
      }
    }
  }
}
html[data-theme="darkMode"] {
  --color-body: #2b2b2b;
  --color-text: #efefef;
  // Fixed
  .fix-item {
    button {
      background-color: #2b2b2b;
      -webkit-box-shadow: 0 0 0 1px #515254, 0 3px 6px 0 rgba(0, 0, 0, 0.08);
      box-shadow: 0 0 0 1px #515254, 0 3px 6px 0 rgba(0, 0, 0, 0.08);
      span {
        color: #d9dbdf;
      }
    }
  }
}

body {
  background-color: var(--color-body);
  color: var(--color-text);
  font-family: "Noto Sans KR", "바탕체", Dotum, "굴림", sans-serif;
}

 

html 선택자에 변수 추가 후 사용

 

1. 상세 보기
2. 검색

---

🔧 테스트 단계

1. 에러
2. 추가 및 수정

---