🎞 영화 검색 웹 애플리케이션 프로젝트
프로젝트 개요
영화 검색 웹 애플리케이션은 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와의 데이터 통신 및 처리 방법
을 익히는 것입니다.
또한, 사용자 경험을 고려하여 직관적이고 효율적인 영화 검색 서비스를 제공하는 것을 목표로 하였습니다.
프로젝트 계획
- 기획 단계: 프로젝트의 목적과 주요 기능을 정의하고, UI/UX 디자인을 계획
- 개발 단계: Vue.js를 사용하여 프론트엔드를 개발하고, KOFIC API와의 연동
- 테스트 단계: 각 기능의 동작을 테스트하고, 버그를 수정하여 안정적인 서비스를 제공
- 배포 단계: 완성된 애플리케이션을 웹 호스팅 서비스에 배포
📕 기획 단계
스토리보드
- 메인 화면
- Main에 Logo와 인기, 장르별 Movie List가 표시됩니다.
- Search bar를 통해 사용자가 영화 제목을 입력할 수 있습니다.
- 각 영화는 포스터와 제목 정보로 구성됩니다.
- 사용자는 Bright , Dark Mode를 설정할 수 있습니다. (다음 방문 시에도 사용자가 선택한 모드가 유지됩니다.)
- 검색 결과
- 입력시 실시간으로 입력한 영화가 Filtering 되어 화면에 표시됩니다.
- 일정 갯수를 화면에 표시하고 일정 갯수가 넘어가면 더 불러오기를 클릭합니다.
- 더 불러오기 버튼 클릭 시 Movie Data를 더 불러옵니다.
- 영화 선택
- 사용자는 검색 결과에서 원하는 Movie를 선택할 수 있습니다.
- 선택한 Movie에 대한 자세한 정보가 표시됩니다.
- 에러 처리
- 사용자가 잘못된 검색어를 입력하거나 검색 결과가 없는 경우에 대비하여 에러 메시지가 표시됩니다.
- 사용자가 다시 시도할 수 있도록 "재시도" 버튼이나 자동으로 포커스가 검색 창에 맞춰집니다.
UI/UX 디자인
Design Tool
- Canva
- Logo
- 메인 화면
- 상세 화면
- 검색 화면
💻 개발 단계
메인 화면
🔥 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 선택자에 변수 추가 후 사용
- 상세 보기
- 검색
🔧 테스트 단계
- 에러
- 추가 및 수정
'밥줄 > Vue.js' 카테고리의 다른 글
[Vue.js] PDF TO SVG(HTML (0) | 2024.05.27 |
---|---|
[Vue.js] Side Project Tools 만들기 (3) (0) | 2024.02.26 |
[Vue.js] Side Project Tools 만들기 (2) (0) | 2024.02.20 |
[Vue.js]Web browser에서 Source maps 숨기기 (0) | 2024.01.31 |
[Vue.js] Side Project Tools 만들기 (1) (1) | 2024.01.23 |