+
+
+ `
+ }
+}
\ No newline at end of file
diff --git a/src/core/CoreMovie.js b/src/core/CoreMovie.js
new file mode 100644
index 00000000..3955dda5
--- /dev/null
+++ b/src/core/CoreMovie.js
@@ -0,0 +1,85 @@
+///// 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] // μμΌλ©΄ μ½λ°± λ°°μ΄λ‘ ν λΉ!
+ }
+}
\ No newline at end of file
diff --git a/src/main.css b/src/main.css
new file mode 100644
index 00000000..99bce33f
--- /dev/null
+++ b/src/main.css
@@ -0,0 +1,402 @@
+/* νλ‘μ νΈμμ μ¬μ©ν μμ λ³μ */
+html {
+ --color-black: #02001a;
+ --color-white: #FFF;
+ --color-white-50:rgba(225,225,225,.5);
+ --color-white-30:rgba(225,225,225,.3);
+ --color-white-20:rgba(225,225,225,.2);
+ --color-white-10:rgba(225,225,225,.1);
+ --color-white-5:rgba(225,225,225,.05);
+ --color-primary: #D2FF58;
+ --color-hover: #B0E212;
+ --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 Queries, cssμ μΌλΆλ‘, μΉνμ΄μ§λ μ±μ λ―Έλμ΄(νλ©΄ ν¬κΈ°, ν΄μλ λ±)μ λ°λΌ
+ μ€νμΌμ λ€λ₯΄κ² μ μ©ν μ μλλ‘ ν΄μ£Όλ κΈ°μ , λ°μν μΉνμ΄μ§ ꡬν κ°λ₯.
+ λ°μν λ μ΄μμμ μν λ―Έλμ΄μΏΌλ¦¬ μ μ© */
+@media (max-width: 1200px) {
+ .container {
+ padding: 40px;
+ }
+}
+@media (max-width: 600px) {
+ .container {
+ padding: 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);
+}
+.btn-primary{
+ background-color: var(--color-primary);
+ color: var(--color-black);
+}
+.btn-primary:hover {
+ background-color: var(--color-hover);
+ color: var(--color-white);
+}
+
+
+/* λ‘λ© μ λλ©μ΄μ
μΆκ° */
+.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(μ€μΌλ ν€) UI */
+.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(255,255,255,0),
+ rgba(255,255,255,.1),
+ rgba(255,255,255,0)
+ );
+ transform: translateX(-100%);
+ animation: skeleton-loader 2s infinite;
+}
+@keyframes skeleton-loader {
+ 0% { transform: translateX(-100%); }
+ 100% { transform: translateX(100%); }
+}
+
+
+header {
+ padding: 20px 40px;
+ background-color: rgba(125, 140, 94, 0.5);
+ 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: 20px;
+ 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: 600px) {
+ 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 {
+ margin-bottom: 40px;
+}
+.headline h1 {
+ font-family: "Oswald", sans-serif;
+ font-size: 80px;
+ line-height: 1;
+ margin-bottom: 40px;
+ text-align: center;
+}
+.headline h1 span {
+ color: var(--color-primary);
+}
+@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: 25px;
+ 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: 15px;
+ 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 {
+ width: 100%;
+ max-width: 300px;
+ margin: 20px auto;
+ display: block;
+}
+.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);
+}
+.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) {
+ .the-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;
+}
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
new file mode 100644
index 00000000..f8ebf3e0
--- /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..758a2a71
--- /dev/null
+++ b/src/routes/About.js
@@ -0,0 +1,28 @@
+import { Component } from '../core/CoreMovie'
+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} + +
+ + + ` + } +} + +// htmlλ΄μ©μ λͺ¨λ κ²μ μμ±νμ§ μκ³ , storeμμ μ 보λ₯Ό κ΄λ¦¬νλ €κ³ νλ€ +// store/about.js \ No newline at end of file diff --git a/src/routes/Home.js b/src/routes/Home.js new file mode 100644 index 00000000..012e63c8 --- /dev/null +++ b/src/routes/Home.js @@ -0,0 +1,22 @@ +import { Component } from '../core/CoreMovie' +import Headline from '../components/Headline' +import Search from '../components/Search' +import MovieList from '../components/MovieList' +import MovieListMore from '../components/MovieListMore' + +export default class Home extends Component { // Home 컨ν¬λνΈλ + render() { + const headline = new Headline().el // λ³μ ν λΉ + const search = new Search().el + const movieList = new MovieList().el + const movieListMore = new MovieListMore().el + + this.el.classList.add('container') // μ μΌ λ¨Όμ 컨ν μ΄λμ΄λ¦μ κ°μ§κ³ μλ divμμλ‘ λ§λ€μ΄μ§ κ²μ΄κ³ + this.el.append( // λ΄λΆμ + headline, // headlineμ»΄ν¬λνΈμ μμλ₯Ό λ°μ΄λ£λλ€ + 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..665c4cad --- /dev/null +++ b/src/routes/Movie.js @@ -0,0 +1,63 @@ +import { Component } from '../core/CoreMovie' +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}
+