+
+
+ `
+ }
+}
+
+// λ«κΈ° λ²νΌ μ μ.
+const closeButton = document.querySelector('.close');
+
+
+// λ«κΈ°λ₯Ό λλ₯΄λ©΄ νλ©΄μμ μ¬λΌμ§κ².
+function closeVideoBox() {
+ const videoBox = document.getElementById('video_box');
+ const iframe = videoBox.querySelector('iframe');
+ iframe.src = iframe.src.replace("autoplay=1", "autoplay=0");
+ videoBox.style.display = 'none';
+}
+
+
+// λ«κΈ°λ₯Ό λλ₯΄λ©΄ λΉλμ€ μ¬λΌμ§κ²
+closeButton.addEventListener('click', closeVideoBox);
\ No newline at end of file
diff --git a/src/components/MovieItem.js b/src/components/MovieItem.js
new file mode 100644
index 00000000..3fdbd3f9
--- /dev/null
+++ b/src/components/MovieItem.js
@@ -0,0 +1,38 @@
+import { Component } from "../core/dragon";
+
+export default class MovieItem extends Component {
+ constructor(props) {
+ super({
+ props,
+ tagName: 'a'
+ })
+ }
+ render() {
+ const { movie } = this.props
+
+ this.el.setAttribute('href', `#/movie?id=${movie.imdbID}`)
+ this.el.classList.add('movie')
+
+ // ν¬μ€ν° 미리보기 λ체 μ΄λ―Έμ§
+ if (movie.Poster === "N/A") {
+ this.el.style.backgroundImage = `url('https://www.freeiconspng.com/uploads/no-image-icon-8.png')`;
+ this.el.style.backgroundSize = "cover";
+ this.el.style.backgroundPosition = "center";
+ } else {
+ this.el.style.backgroundImage = `url(${movie.Poster})`
+ }
+ // ν¬μ€ν° 미리보기 λ체 μ΄λ―Έμ§
+
+ this.el.innerHTML = /* html */ `
+ 
+
+ `
+
+ }
+}
\ No newline at end of file
diff --git a/src/core/dragon.js b/src/core/dragon.js
new file mode 100644
index 00000000..f6c6b6de
--- /dev/null
+++ b/src/core/dragon.js
@@ -0,0 +1,92 @@
+///// Component /////
+export class Component {
+ constructor(payload = {}) {
+ const {
+ tagName = 'div', // μ΅μμ μμμ νκ·Έ μ΄λ¦
+ props = {},
+ state = {}
+ } = payload
+ this.el = document.createElement(tagName) // μ»΄ν¬λνΈμ μ΅μμ μμ
+ this.props = props // μ»΄ν¬λνΈκ° μ¬μ©λ λ λΆλͺ¨ μ»΄ν¬λνΈμμ λ°λ λ°μ΄ν°
+ this.state = state // μ»΄ν¬λνΈ μμμ μ¬μ©ν λ°μ΄ν°
+ this.render()
+ }
+ render() { // μ»΄ν¬λνΈλ₯Ό λ λλ§νλ ν¨μ
+ // ...
+ }
+}
+
+
+///// Router /////
+// νμ΄μ§ λ λλ§!
+function routeRender(routes) {
+ // μ μν λ ν΄μ λͺ¨λκ° μλλ©΄(ν΄μκ° μμΌλ©΄) /#/λ‘ λ¦¬λ€μ΄λ νΈ!
+ if (!location.hash) {
+ history.replaceState(null, '', '/#/') // (μν, μ λͺ©, μ£Όμ)
+ }
+ const routerView = document.querySelector('router-view')
+ const [hash, queryString = ''] = location.hash.split('?') // λ¬Όμνλ₯Ό κΈ°μ€μΌλ‘ ν΄μ μ 보μ 쿼리μ€νΈλ§μ ꡬλΆ
+
+ // 1) 쿼리μ€νΈλ§μ κ°μ²΄λ‘ λ³νν΄ νμ€ν 리μ μνμ μ μ₯!
+ const query = queryString
+ .split('&')
+ .reduce((acc, cur) => {
+ const [key, value] = cur.split('=')
+ acc[key] = value
+ return acc
+ }, {})
+ history.replaceState(query, '') // (μν, μ λͺ©)
+
+ // 2) νμ¬ λΌμ°νΈ μ 보λ₯Ό μ°Ύμμ λ λλ§!
+ const currentRoute = routes.find(route => new RegExp(`${route.path}/?$`).test(hash))
+ routerView.innerHTML = ''
+ routerView.append(new currentRoute.component().el)
+
+ // 3) νλ©΄ μΆλ ₯ ν μ€ν¬λ‘€ μμΉ λ³΅κ΅¬!
+ window.scrollTo(0, 0)
+}
+export function createRouter(routes) {
+ // μνλ(νμν) κ³³μμ νΈμΆν μ μλλ‘ ν¨μ λ°μ΄ν°λ₯Ό λ°ν!
+ return function () {
+ window.addEventListener('popstate', () => {
+ routeRender(routes)
+ })
+ routeRender(routes)
+ }
+}
+
+
+///// Store /////
+export class Store {
+ constructor(state) {
+ this.state = {} // μν(λ°μ΄ν°)
+ this.observers = {}
+ for (const key in state) {
+ // κ° μνμ λν λ³κ²½ κ°μ(Setter) μ€μ !
+ Object.defineProperty(this.state, key, {
+ // Getter
+ get: () => state[key],
+ // Setter
+ set: val => {
+ state[key] = val
+ if (Array.isArray(this.observers[key])) { // νΈμΆν μ½λ°±μ΄ μλ κ²½μ°!
+ this.observers[key].forEach(observer => observer(val))
+ }
+ }
+ })
+ }
+ }
+ // μν λ³κ²½ ꡬλ
!
+ subscribe(key, cb) {
+ Array.isArray(this.observers[key]) // μ΄λ―Έ λ±λ‘λ μ½λ°±μ΄ μλμ§ νμΈ!
+ ? this.observers[key].push(cb) // μμΌλ©΄ μλ‘μ΄ μ½λ°± λ°μ΄λ£κΈ°!
+ : this.observers[key] = [cb] // μμΌλ©΄ μ½λ°± λ°°μ΄λ‘ ν λΉ!
+
+ // μμ)
+ // observers = {
+ // ꡬλ
ν μνμ΄λ¦: [μ€νν μ½λ°±1, μ€νν μ½λ°±2]
+ // movies: [cb, cb, cb],
+ // message: [cb]
+ // }
+ }
+}
\ No newline at end of file
diff --git a/src/main.css b/src/main.css
new file mode 100644
index 00000000..4f080057
--- /dev/null
+++ b/src/main.css
@@ -0,0 +1,467 @@
+html {
+ --color-black: #0E111B;
+ --color-white: #FFF;
+ --color-White-50:rgba(255,255,255,.5);
+ --color-White-30:rgba(255,255,255,.3);
+ --color-White-20:rgba(255,255,255,.2);
+ --color-White-10:rgba(255,255,255,.1);
+ --color-White-5:rgba(255,255,255,.05);
+ --color-primary: #32cdcd;
+ --color-hover:#f74a06;
+ --color-area: #1C212E;
+
+}
+
+body {
+ background-color: var(--color-black);
+ font-family: "Roboto", sans-serif;
+ line-height: 1.4;
+ color: var(--color-white);
+}
+
+.container {
+ max-width: 1120px;
+ margin: 0 auto;
+ padding: 40px 0;
+}
+@media (max-width: 1200px) {
+ .container{
+ padding: 40px;
+ }
+}
+@media (max-width: 600px) {
+ .container{
+ padding: 40px 20px;
+ }
+}
+
+.btn {
+ height: 50px;
+ padding: 0 20px;
+ border: none;
+ border-radius: 4px;
+ outline: none;
+ font-size: 14px;
+ font-weight: 700;
+ color: var(--color-white);
+ background-color: var(--color-area);
+ cursor: pointer;
+ transition: .3s;
+}
+
+.btn:hover {
+ background-color: var(--color-hover);
+}
+
+.the-loader{
+ width:30px;
+ height:30px;
+ margin: 30px auto;
+ border:4px solid var(--color-primary);
+ border-top-color: transparent;
+ border-radius:50%;
+ animation: loader 1s infinite linear;
+}
+
+.the-loader.hide{
+ display: none;
+}
+
+
+@keyframes loader {
+ 0% { transform: rotate(0deg);}
+ 100% { transform: rotate(360deg); }
+}
+
+.skeleton {
+ position: relative;
+ overflow: hidden;
+ border-radius: 10px;
+ background-color: var(--color-area);
+}
+
+.skeleton::after {
+ content: "";
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ background-image: linear-gradient(270deg,
+ rgba(247, 16, 16, 0),
+ rgba(255, 255, 255, 0.651),
+ rgba(87, 216, 205, 0.616)
+ );
+ transform: translateX(-100%);
+ animation: skeleton-loader 1s infinite;
+}
+
+@keyframes skeleton-loader {
+ 0% { transform: translateX(-100%); }
+ 100% { transform: translateX(100%); }
+}
+
+
+.btn-primary {
+ background-color: var(--color-primary);
+ color: var(--color-black);
+}
+
+.btn-primary:hover{
+ background-color: var(--color-hover);
+ color: var(--color-white);
+}
+
+header {
+ padding: 20px 40px;
+ background-color: rgba(14, 17, 27, .9);
+ position: sticky;
+ top: 0;
+ z-index: 9;
+ display: flex;
+ align-items: flex-end;
+ gap: 40px;
+}
+
+header .logo{
+ font-size: 20px;
+ font-family: "Oswald", sans-serif;
+ color: var(--color-White-50);
+ text-decoration: none;
+}
+
+header .logo span{
+ color: var(--color-primary);
+}
+
+
+header nav ul{
+ display: flex;
+ gap: 14px;
+}
+
+
+header nav ul li a {
+ font-size: 14px;
+ font-weight: 700;
+ color: var(--color-White-50);
+ text-decoration: none;
+}
+
+header nav ul li a.active {
+ color: var(--color-primary);
+}
+
+header .user {
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ background-color: var(--color-area);
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ right: 40px;
+ margin: auto;
+ transition: .3s;
+}
+
+header .user:hover{
+ transform: scale(1.2);
+}
+
+header .user img {
+ width: 100%;
+}
+
+@media (max-width: 60px) {
+ header{
+ padding: 14px 20px;
+ }
+ header nav {
+ display: none;
+ }
+ header .user {
+ right: 20px;
+ }
+}
+
+footer {
+ padding: 40px 40px 60px;
+ text-align: center;
+}
+
+footer a {
+ color: var(--color-White-20);
+ text-decoration: none;
+}
+
+footer a:hover{
+ text-decoration: underline;
+}
+
+.headline {
+ display: flex;
+ align-items: center;
+ width: 100%;
+ flex-direction: column;
+ margin-bottom: 40px;
+}
+
+.headline h1 {
+ font-family: "Oswald", sans-serif;
+ text-align: center;
+ font-size: 40px;
+ line-height: 1;
+ margin-bottom: 40px;
+}
+
+
+.headline h1 span {
+ color: var(--color-primary);
+}
+
+.headline p {
+ color: var(--color-White-30);
+}
+
+.headline img {
+ width: 600px;
+}
+
+@media (max-width:600px) {
+ .headline h1 {
+ font-size: 60px;
+ }
+}
+
+.search {
+ display: flex;
+ gap: 10px;
+ margin-bottom: 30px;
+}
+
+.search input{
+ flex-grow: 1;
+ height: 50px;
+ padding: 0 20px;
+ border-radius: 4px;
+ border: none;
+ outline: none;
+ font-size: 14px;
+ color: var(--color-white);
+ background-color: var(--color-area);
+}
+
+.search input::placeholder {
+ color: var(--color-White-30);
+}
+
+.search .btn {
+ flex-grow: 1;
+ max-width: 150px;
+}
+
+.movie-list {
+ padding: 20px;
+ border-radius: 4px;
+ background-color: var(--color-area);
+}
+
+.movie-list .message {
+ color: var(--color-primary);
+ font-size: 20px;
+ text-align: center;
+}
+
+.movie-list .movies {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ gap: 20px;
+}
+
+.movies .movie {
+ --width: 200px;
+ width: var(--width);
+ height: calc(var(--width) * 3 / 2);
+ border-radius: 4px;
+ background-color: var(--color-black);
+ background-size: cover;
+ overflow: hidden;
+ position: relative;
+}
+
+.movies .movie:hover::after {
+ content: "";
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ border: 6px solid var(--color-primary);
+}
+
+.movies .movie .info {
+ width: 100%;
+ padding: 14px;
+ box-sizing: border-box;
+ font-size: 14px;
+ text-align: center;
+ position: absolute;
+ left: 0;
+ bottom: 0;
+ background-color: rgba(14, 17, 27, .3);
+ backdrop-filter: blur(10px);
+}
+
+.movies .movie .info .year {
+ color: var(--color-primary);
+}
+
+.movies .movie .info .title {
+ color: var(--color-white);
+}
+
+.view-more {
+ display: block;
+ width: 100%;
+ max-width: 300px;
+ margin: 20px auto;
+}
+
+.view-more.hide {
+ display: none;
+}
+
+
+.the-movie {
+ color:var(--color-White-50);
+ display: flex;
+ gap: 70px;
+}
+
+.the-movie .poster {
+ flex-shrink: 0;
+ --width:500px;
+ width: var(--width);
+ height: calc(var(--width) * 3 / 2);
+ border-radius: 10px;
+ background-size: cover;
+ background-color: var(--color-area);
+ background-position: center;
+}
+.the-movie .specs {
+ flex-grow: 1;
+}
+.the-movie .title {
+ font-size: 70px;
+ font-family: "Oswald", sans-serif;
+ line-height: 1;
+ color: var(--color-white);
+ margin-bottom: 30px;
+}
+
+.the-movie .title.skeleton {
+ height: 70px;
+}
+
+
+
+
+.the-movie .labels {
+ color: var(--color-primary);
+ margin-bottom: 20px;
+}
+
+.the-movie .labels.skeleton {
+ height: 30px;
+}
+
+
+.the-movie .plot.skeleton {
+ width: 80%;
+ height: 400px;
+
+}
+
+.the-movie h3 {
+ font-size: 20px;
+ font-family: "Oswald", sans-serif;
+ color: var(--color-white);
+ margin: 24px 0 6px;
+}
+
+@media (max-width: 1200px) {
+ .thr-movie{
+ gap:30px;
+ }
+ .the-movie .poster{
+ --width: 300px;
+ }
+}
+@media (max-width: 720px) {
+ .the-movie{
+ display: block;
+ }
+ .the-movie .title {
+ font-size: 50px;
+ margin-top: 50px;
+ }
+}
+
+
+.about .photo {
+ width: 230px;
+ height: 230px;
+ margin: 0 auto 20px;
+ border-radius: 10px;
+ background-size: cover;
+}
+
+.about .name {
+ font-size: 40px;
+ font-family: "Oswald", sans-serif;
+ margin-bottom: 20px;
+}
+
+.about p {
+ line-height: 1.5;
+ text-align: center;
+ margin-bottom: 4px;
+}
+
+.about a {
+ color: var(--color-primary);
+ text-decoration: none;
+}
+
+.about a:hover {
+ text-decoration: underline;
+}
+
+.not-found h1 {
+ font-size: 70px;
+ font-weight: 700;
+ color: var(--color-White-10);
+ text-align: center;
+}
+
+
+#video_box {
+ position: fixed;
+ width: auto;
+ height: auto;
+ top: 50%;
+ left: 1%;
+}
+
+
+.close {
+ cursor: pointer;
+ display: flex;
+ justify-content: center;
+ color: #0E111B;
+ font-size: 20px;
+ background-color: rgb(6, 234, 250);
+}
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
new file mode 100644
index 00000000..aa4f1da3
--- /dev/null
+++ b/src/main.js
@@ -0,0 +1,7 @@
+import App from './App'
+import router from './routes'
+
+const root = document.querySelector('#root')
+root.append(new App().el)
+
+router()
\ No newline at end of file
diff --git a/src/routes/About.js b/src/routes/About.js
new file mode 100644
index 00000000..8ec71f84
--- /dev/null
+++ b/src/routes/About.js
@@ -0,0 +1,24 @@
+import { Component } from "../core/dragon";
+import aboutStore from '../store/about'
+
+export default class About extends Component {
+ render() {
+ const { photo, name, email, github, blog } = aboutStore.state
+
+ this.el.classList.add('container', 'about')
+ this.el.innerHTML = /* html */ `
+
+ ${name}
++ + ${email} + +
+ + + ` + } +} \ No newline at end of file diff --git a/src/routes/Home.js b/src/routes/Home.js new file mode 100644 index 00000000..cb4d0d20 --- /dev/null +++ b/src/routes/Home.js @@ -0,0 +1,25 @@ +import { Component } from "../core/dragon.js"; +import Headline from "../components/Headline.js"; +import Search from "../components/Search.js"; +import MovieList from "../components/MovieList.js"; +import MovieListMore from "../components/MovieListMore.js"; +import Banner from "../components/Banner.js"; + +export default class Home extends Component { + render() { + const headline = new Headline().el + const banner = new Banner().el + const search = new Search().el + const movieList = new MovieList().el + const movieListMore = new MovieListMore().el + + this.el.classList.add('container') + this.el.append( + headline, + banner, + search, + movieList, + movieListMore + ) + } +} \ No newline at end of file diff --git a/src/routes/Movie.js b/src/routes/Movie.js new file mode 100644 index 00000000..cfc1c445 --- /dev/null +++ b/src/routes/Movie.js @@ -0,0 +1,77 @@ +import { Component } from "../core/dragon"; +import movieStore, { getMovieDetails } from '../store/movie' + + +export default class Movie extends Component { + async render() { + this.el.classList.add('container', 'the-movie') + this.el.innerHTML = /* html */ ` + +${rating.Source} - ${rating.Value}
` + }).join('')} +${movie.Actors}
+${movie.Director}
+${movie.Production}
+${movie.Genre}
+