+
+
+
![영화 포스터 이미지]()
+
+
+
설명입니다. 설명입니다
+
평점 매기기
+
+
+ `;
+ }
+}
+
+customElements.define("modal-component", ModalComponent);
diff --git a/src/components/element/MoreButtonComponent.js b/src/components/element/MoreButtonComponent.js
new file mode 100644
index 000000000..359c50a4a
--- /dev/null
+++ b/src/components/element/MoreButtonComponent.js
@@ -0,0 +1,20 @@
+import CustomComponent from "../../abstracts/CustomComponent";
+
+export default class MoreButtonComponent extends CustomComponent {
+ static get observedAttributes() {
+ return ["data-action"];
+ }
+
+ attributeChangedCallback() {
+ const actionType = this.getAttribute("data-action");
+ this.querySelector("button").setAttribute("data-action", actionType);
+ }
+
+ template() {
+ return `
+
+ `;
+ }
+}
+
+customElements.define("more-button", MoreButtonComponent);
diff --git a/src/components/element/TitleComponent.js b/src/components/element/TitleComponent.js
new file mode 100644
index 000000000..e42630fa8
--- /dev/null
+++ b/src/components/element/TitleComponent.js
@@ -0,0 +1,9 @@
+import CustomComponent from "../../abstracts/CustomComponent";
+
+export default class TitleComponent extends CustomComponent {
+ setTitle(movieListTitle) {
+ this.textContent = movieListTitle;
+ }
+}
+
+customElements.define("movie-list-title", TitleComponent);
diff --git a/src/components/movie/ErrorComponent.js b/src/components/movie/ErrorComponent.js
new file mode 100644
index 000000000..76bd9bbc1
--- /dev/null
+++ b/src/components/movie/ErrorComponent.js
@@ -0,0 +1,16 @@
+import CustomComponent from "../../abstracts/CustomComponent";
+import ErrorImg from "../../../templates/error.png";
+export default class ErrorComponent extends CustomComponent {
+ template() {
+ return `
+
+
+
오류
+
+
예상치 못한 오류가 발생했어요 :(
+
+ `;
+ }
+}
+
+customElements.define("error-page", ErrorComponent);
diff --git a/src/components/movie/MovieComponent.js b/src/components/movie/MovieComponent.js
new file mode 100644
index 000000000..c93f5fc07
--- /dev/null
+++ b/src/components/movie/MovieComponent.js
@@ -0,0 +1,28 @@
+import CustomComponent from "../../abstracts/CustomComponent";
+import StarEmptyImg from "../../../templates/star_empty.png";
+import StarFilledImg from "../../../templates/star_filled.png";
+
+export default class MovieComponent extends CustomComponent {
+ template() {
+ const title = this.getAttribute("title");
+ const voteAverage = this.getAttribute("vote_average");
+ const posterPath = this.getAttribute("poster_path");
+
+ return `
+
+
+
+
${title}
+
${voteAverage}
+
+ `;
+ }
+}
+
+customElements.define("movie-item", MovieComponent);
diff --git a/src/components/movie/MovieListComponent.js b/src/components/movie/MovieListComponent.js
new file mode 100644
index 000000000..1b2198fea
--- /dev/null
+++ b/src/components/movie/MovieListComponent.js
@@ -0,0 +1,46 @@
+import CustomComponent from "../../abstracts/CustomComponent";
+import MovieListPageComponent from "./MovieListPageComponent";
+import MovieComponent from "./MovieComponent";
+import ErrorComponent from "./ErrorComponent";
+import { STATUS } from "../../constants/constants";
+
+export default class MovieListComponent extends CustomComponent {
+ #page;
+
+ initialPage() {
+ this.#page = document.createElement("movie-list-page");
+ this.innerHTML = ``;
+ this.append(this.#page);
+
+ this.#page.setAttribute("data-status", STATUS.LOADING);
+ }
+
+ appendNewPage() {
+ const errorPage = this.querySelector("error-page");
+ if (errorPage) {
+ errorPage.remove();
+ }
+ this.#page = document.createElement("movie-list-page");
+ this.append(this.#page);
+
+ this.#page.setAttribute("data-status", STATUS.LOADING);
+ }
+
+ renderPageSuccess(movieItems) {
+ if (!movieItems.length) {
+ this.#page.setAttribute("data-status", "no-result");
+ return;
+ }
+ this.#page.setAttribute("data-movie-list", JSON.stringify(movieItems));
+ this.#page.setAttribute("data-status", STATUS.SUCCESS);
+ }
+
+ renderPageFail() {
+ if (this.querySelector("error-page")) return;
+
+ const errorPage = document.createElement("error-page");
+ this.#page.replaceWith(errorPage);
+ }
+}
+
+customElements.define("movie-list", MovieListComponent);
diff --git a/src/components/movie/MovieListPageComponent.js b/src/components/movie/MovieListPageComponent.js
new file mode 100644
index 000000000..cf62b5f6c
--- /dev/null
+++ b/src/components/movie/MovieListPageComponent.js
@@ -0,0 +1,54 @@
+import { PAGE_LENGTH, STATUS } from "../../constants/constants";
+import CustomComponent from "../../abstracts/CustomComponent";
+import MovieComponent from "./MovieComponent";
+import MovieSkeletonComponent from "./MovieSkeletonComponent";
+
+export default class MovieListPageComponent extends CustomComponent {
+ static get observedAttributes() {
+ return ["data-status"];
+ }
+
+ attributeChangedCallback() {
+ const status = this.getAttribute("data-status");
+ const movieList = JSON.parse(this.getAttribute("data-movie-list"));
+
+ switch (status) {
+ case STATUS.LOADING:
+ this.innerHTML = `
+ ${Array.from(
+ { length: PAGE_LENGTH },
+ (_) => `
`
+ ).join("")}
+ `;
+ break;
+ case STATUS.SUCCESS:
+ this.innerHTML = `
+ ${movieList
+ .map((movieItem) => {
+ return `
+
+ `;
+ })
+ .join("")}
+ `;
+ break;
+ case STATUS.NO_RESULT:
+ this.innerHTML = `
+
+
검색 결과를 찾지 못하였습니다.
+
+ - 단어의 철자가 정확한지 확인해 보세요.
+ - 검색어의 단어 수를 줄이거나, 보다 일반적인 검색어로 다시 검색해 보세요.
+ - 두 단어 이상의 검색어인 경우, 띄어쓰기를 확인해 보세요.
+
+
+ `;
+ break;
+ }
+ }
+}
+
+customElements.define("movie-list-page", MovieListPageComponent);
diff --git a/src/components/movie/MovieSkeletonComponent.js b/src/components/movie/MovieSkeletonComponent.js
new file mode 100644
index 000000000..0be1e4e61
--- /dev/null
+++ b/src/components/movie/MovieSkeletonComponent.js
@@ -0,0 +1,17 @@
+import CustomComponent from "../../abstracts/CustomComponent";
+
+export default class MovieSkeletonComponent extends CustomComponent {
+ template() {
+ return `
+
+
+
+ `;
+ }
+}
+
+customElements.define("movie-item-skeleton", MovieSkeletonComponent);
diff --git a/src/constants/constants.ts b/src/constants/constants.ts
new file mode 100644
index 000000000..dad9130dc
--- /dev/null
+++ b/src/constants/constants.ts
@@ -0,0 +1,23 @@
+export const PAGE_LENGTH = 20;
+
+export const STATUS = {
+ LOADING: "loading",
+ SUCCESS: "success",
+ NO_RESULT: "no-result",
+} as const;
+
+export const ACTION = {
+ MORE_POPULAR: "more_popular",
+ MORE_SEARCH: "more_search",
+ POPULAR: "popular",
+ SEARCH: "search",
+} as const;
+
+export const REQUEST_URL = "https://api.themoviedb.org/3";
+
+export const SEARCH_WARNING = "검색어를 입력해주세요.";
+
+export const TITLE = {
+ POPULAR: "지금 인기있는 영화",
+ SEARCH: "검색결과",
+} as const;
diff --git a/src/index.js b/src/index.js
index e69de29bb..8af9924d7 100644
--- a/src/index.js
+++ b/src/index.js
@@ -0,0 +1,6 @@
+// 웹 컴포넌트 사용 시 import 해주어야 함 (이하 파일 동일)
+import AppComponent from "./components/AppComponent";
+import ModalComponent from "./components/ModalComponent";
+
+import "../templates/reset.css";
+import "../templates/common.css";
diff --git a/src/util/MovieList.ts b/src/util/MovieList.ts
new file mode 100644
index 000000000..e145e04ca
--- /dev/null
+++ b/src/util/MovieList.ts
@@ -0,0 +1,16 @@
+import { MovieElementData, MovieItem } from "../abstracts/type";
+
+const transformMovieItemsType = (
+ movieItems: MovieItem[]
+): MovieElementData[] => {
+ return movieItems.map(
+ ({ poster_path, id, title, vote_average }: MovieItem) => ({
+ poster_path,
+ id,
+ title,
+ vote_average,
+ })
+ );
+};
+
+export default transformMovieItemsType;
diff --git a/templates/common.css b/templates/common.css
index b22b31a29..f4b088f64 100644
--- a/templates/common.css
+++ b/templates/common.css
@@ -45,14 +45,6 @@ button {
/* https://andrew.hedges.name/experiments/aspect_ratio/ */
-.item-list {
- display: grid;
- margin: 48px 0;
- grid-template-columns: repeat(4, 180px);
- grid-column-gap: 160px;
- grid-row-gap: 48px;
-}
-
.item-card {
display: flex;
flex-direction: column;
@@ -123,7 +115,7 @@ button.primary {
background-position: 0% 50%;
}
}
-header {
+app-header {
width: 100%;
min-width: 1200px;
height: 72px;
@@ -136,7 +128,7 @@ header {
margin-bottom: 48px;
}
-header h1 {
+app-header h1 {
cursor: pointer;
user-select: none;
font-size: 2rem;
@@ -145,20 +137,147 @@ header h1 {
color: #f33f3f;
}
-header > .search-box {
+app-header > .search-box {
background: #fff;
padding: 8px;
border-radius: 4px;
}
-header .search-box > input {
+app-header .search-box > input {
border: 0;
}
-header .search-box > .search-button {
+app-header .search-box > .search-button {
width: 14px;
border: 0;
text-indent: -1000rem;
background: url("./search_button.png") transparent no-repeat 0 1px;
background-size: contain;
}
+
+movie-list-page {
+ display: grid;
+ margin: 48px 0;
+ grid-template-columns: repeat(4, 180px);
+ grid-column-gap: 160px;
+ grid-row-gap: 48px;
+ position: relative;
+}
+
+.hide {
+ display: none;
+}
+
+error-page {
+ width: 100%;
+ height: 562px;
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+ justify-content: center;
+ border-radius: 12px;
+ color: white;
+}
+
+.error-title {
+ display: flex;
+ align-items: center;
+ justify-content: flex-start;
+ margin-bottom: 14px;
+ font-size: 48px;
+ font-weight: 900;
+ width: 316px;
+}
+
+.error-title > h1 {
+ margin-left: 11px;
+}
+
+.error-content {
+ font-size: 24px;
+ font-weight: 600;
+}
+
+.no-result-box {
+ padding: 32px 36px;
+ font-size: 1.4rem;
+ line-height: 2.1rem;
+ width: 100%;
+ position: absolute;
+}
+
+.no-result-title {
+ padding-right: 20px;
+ font-weight: 700;
+ font-size: 1.6rem;
+ line-height: 2.4rem;
+ color: #ffffff;
+ word-wrap: break-word;
+ word-break: break-all;
+}
+
+.no-result-recommends {
+ margin-top: 22px;
+ font-size: 1.3rem;
+ line-height: 2rem;
+ color: #ffffff;
+}
+
+.no-result-recommends > li {
+ margin-top: 4px;
+}
+
+movie-list-title {
+ font-size: 2rem;
+ font-weight: bold;
+ user-select: none;
+}
+
+.error-cta-btn {
+ border: none;
+ background: white;
+ font-size: 1.2rem;
+ font-weight: 600;
+ margin-top: 25px;
+ padding: 15px 30px;
+ border-radius: 10px;
+}
+
+modal-component {
+ position: absolute;
+ top: 0;
+ left: 0;
+
+ width: 100%;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex: 1;
+
+ overflow: none;
+ background-color: rgba(0, 0, 0, 0.6);
+ /* body.style.overflow = hidden */
+}
+
+.modal-body {
+ background-color: #222222;
+ color: white;
+ padding: 0 32px;
+}
+
+.content-header {
+ display: flex;
+}
+
+.content-body {
+ display: flex;
+}
+
+.movie-detail-header {
+ display: flex;
+}
+
+body {
+ overflow: hidden;
+}
diff --git a/templates/error.png b/templates/error.png
new file mode 100644
index 0000000000000000000000000000000000000000..694599a0e48a29700e73dd623e1f2a7c6f851550
GIT binary patch
literal 1167
zcmV;A1aSL_P)
L6!;#738P@s33GesDPvbLIpqtKm}X}kP6OJ03A5e*gM=@NNm}@Tkl%m
zjAkG3aBFELdu^=@D2k#eilQir(i$^VjJ0-$E_0HOWZz#q|L1P4`5TE@xxSDrNS_-R^e%4fLG*~=GM9$?*z
z$~D^NoV?%{5=l0IkNX^Y+F42b7!E-PspCOT2;$Jwy7C#;L2?vGGJp>~$548BLn%og
zNg;@SY>9!UoaE~Ny=Pv$!7v!OP$Zfai9Nu&jf)P-IvvS(2oZUJbz65&7|;L}djP{v
z|DMDPq#jT*Q(=nm11jdja^U~@!0w81f;ruff{WDMxp
z4UGda9?;@uODX1|1~CShLrJ9zHHa}l2PKvLP=go)e1?)r7ith=0NwRUrwcXE5Hv6`
z)6klxbz_@`2JbgJFG$Hl4KOfjfPslIfPs=qvE^tb4HIfGIu8ha(1p4v;sGyEQZbsl1lL5)j@c(EJ6)Nw;?k!@;7AsKQK_Fn37o$4^X5mVj9I7;2w&UsE1aPn8kUa
zgYONDXf<@VSP1g}XaOabo7fa}$x_4>lvr+K8%opDc{)017#cwc;@Qt$Y-8zSoO(f+
zpOVHYpC}DF7+3BA2Eq^ZL>}P(v3kM3xs`q;DgI1#=nwU3{!CR8`+LM2GTy@H7>J7Z
z14OaEC#O~f*9V$IVeaX{JV63ltRtUcigoxOOme%4aX!naoRzgH@9X5WJS(~)9o!&;
z?2=`ER>b2$b0y12`3J}(J1xb}ig*ArXa@t==WMb)phwGArculQj23Q{Q`7*AmM)f2
zJT=kZ;31}!Pt?~4H7LwRazpt>{S09WQ&jH5MwGu5tUDxUtOq!ViZ4}*bw`-o+41mb
zr*eeJD%N?!($>q;CYGNZ71YTewk|_(xZ!(h?mV%fJ)%9ue}r{M8Q$3Kz)I)wXpRaf
z{vwuxeLp>wvQ
literal 0
HcmV?d00001
diff --git a/webpack.config.js b/webpack.config.js
index 4a0efabbe..f457d4b5a 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -12,6 +12,7 @@ module.exports = {
static: "./dist",
open: true,
historyApiFallback: true,
+ port: 8081,
},
output: {
publicPath: "/",