Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[1단계 - 영화 목록 불러오기] 윤생(이윤성) 미션 제출합니다. #6

Merged
merged 52 commits into from
Mar 25, 2023
Merged
Changes from 1 commit
Commits
Show all changes
52 commits
Select commit Hold shift + click to select a range
e2865f8
docs: 기능 요구 사항 작성
ksone02 Mar 14, 2023
7bc8633
feat: 컴포넌트 분리 구현
ksone02 Mar 14, 2023
294448a
feat: 이미지 밑 스타일 임포트
ksone02 Mar 14, 2023
cd2da9f
feat: 인기 영화 데이터 fetch 후 render 구현
ksone02 Mar 15, 2023
04cade7
feat: 인기 영화 더보기 기능 구현
ksone02 Mar 15, 2023
b55d92f
feat: 영화 검색 기능 구현
ksone02 Mar 15, 2023
354c7c8
feat: API 키 ignore
ksone02 Mar 15, 2023
1d3bb2f
refactor: 컴포넌트 폴더 분리
ksone02 Mar 15, 2023
0c225ea
feat: 영화 API 페이지 상태관리
ksone02 Mar 15, 2023
5cd6447
refactor: 중복되는 api 호출 로직 모듈화
ksone02 Mar 15, 2023
f7d9a32
refactor: 중복되는 렌더링 로직 모듈화
ksone02 Mar 15, 2023
99e1c57
refactor: initialRender 메서드 변경
ksone02 Mar 15, 2023
9cfe83e
feat: 에러에 따른 렌더링 구현
ksone02 Mar 15, 2023
9ce56fd
feat: 에러 컴포넌트 구현
ksone02 Mar 15, 2023
27d2315
test: 영화 리뷰 미션 e2e 테스트 작성
ksone02 Mar 16, 2023
4c0081f
refactor: Movie List Deprecated 된 코드 제거
ksone02 Mar 16, 2023
4bc7246
refactor: console.log 제거
ksone02 Mar 16, 2023
cef4beb
refactor: MoreButton 컴포넌트 코드 가독성 개선
ksone02 Mar 16, 2023
2847cc7
refactor: 코드 상수화
ksone02 Mar 16, 2023
52b82d7
refactor: event 위임 로직 if문 switch문으로 변경
ksone02 Mar 16, 2023
7671371
refactor: Movie list HTML 구조 변경
ksone02 Mar 16, 2023
cf4c7c0
refactor: header HTML 구조 변경
ksone02 Mar 16, 2023
b416e43
refactor: Movie List Title HTML 구조 변경
ksone02 Mar 16, 2023
042fdf2
refactor: App 내의 불필요한 document 선언 제거
ksone02 Mar 16, 2023
5472125
refactor: Skeleton 불필요한 li태그 제거
ksone02 Mar 16, 2023
f92c4ee
refactor: App 내부 변수명 통일
ksone02 Mar 16, 2023
188c7a8
refactor: App 불필요한 필드 제거
ksone02 Mar 16, 2023
8daad3f
refactor: List Method 네이밍 변경
ksone02 Mar 16, 2023
051e31a
refactor: API 처리 로직 구조 변경
ksone02 Mar 16, 2023
a76098d
feat: 로고 클릭시 input value 초기화
ksone02 Mar 16, 2023
e0adc38
refactor: url 생성 책임 분리
ksone02 Mar 16, 2023
0f334d1
refactor: App 더보기 버튼 액션 변경 메소드 분리
ksone02 Mar 16, 2023
4e865a7
refactor: App 컴포넌트 코드 가독성 개선
ksone02 Mar 16, 2023
c90298e
refactor: TITLE 상수화 객체 타입 단언
ksone02 Mar 16, 2023
5ba2e9b
refactor: 컴포넌트 전체적 가독성 개선
ksone02 Mar 16, 2023
d977044
refactor: constants 디렉토리 변경
ksone02 Mar 16, 2023
37dec5a
docs: README.md 작성
ksone02 Mar 16, 2023
2b4d446
refactor: 사용되지 않는 매개변수 선언 제거
2yunseong Mar 20, 2023
c320fcd
fix: html 마크업 수정
2yunseong Mar 20, 2023
15c8f36
refactor: cypress 불필요한 파일 제거
2yunseong Mar 20, 2023
6836501
refactor: 웹 접근성 개선
2yunseong Mar 20, 2023
81241e9
refactor: 마크업 구조 변경에 따른 테스트 수정
2yunseong Mar 20, 2023
f3d200d
chore: 기술에 대한 정보를 제공하는 주석 추가
2yunseong Mar 20, 2023
749e8f2
refactor: early return / 모호한 네이밍 수정
2yunseong Mar 20, 2023
fe64426
test: 검색창 공백 입력 시/ 입력이 비어있을 시 테스트 추가
2yunseong Mar 20, 2023
7c81f7e
fix: 공백을 입력 시 검색을 하는 오류 수정
2yunseong Mar 20, 2023
298e925
test: 테스트 명 수정
2yunseong Mar 20, 2023
4e6de67
feat: 오류 메세지 페이지에 CTA 버튼 추가
2yunseong Mar 20, 2023
eaf2fbc
refactor: fetch 재사용화를 위한 책임 분리
2yunseong Mar 22, 2023
6e07659
fix: totalPage 상태값 갱신하지 않은 오류 해결
2yunseong Mar 23, 2023
2079624
test: 엘리먼트 선택자 변경
2yunseong Mar 23, 2023
7563963
refactor: custom component 네이밍 변경
2yunseong Mar 23, 2023
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
refactor: custom component 네이밍 변경
2yunseong committed Mar 23, 2023

Verified

This commit was signed with the committer’s verified signature. The key has expired.
kylekurz Kyle Kurz
commit 75639631306667b87d071cfd7fe4f796c046bf51
26 changes: 26 additions & 0 deletions src/components/ModalComponent.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import CustomComponent from "../abstracts/CustomComponent";

export default class ModalComponent extends CustomComponent {
template() {
return `
<div class="modal-body">
<div class="content-header">
<h3>영화 이름</h3>
<button>닫기 버튼</button>
</div>
<div class="content-body">
<img alt="영화 포스터 이미지">
<div class="movie-details">
<div class="movie-detail-header">
<p>장르</p>
<div>별점</div>
</div>
<div> 설명입니다. 설명입니다 </div>
<div> 평점 매기기 </div>
</div>
</div>
`;
}
}

customElements.define("modal-component", ModalComponent);
1 change: 1 addition & 0 deletions src/index.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
// 웹 컴포넌트 사용 시 import 해주어야 함 (이하 파일 동일)
import AppComponent from "./components/AppComponent";
devhyun637 marked this conversation as resolved.
Show resolved Hide resolved
import ModalComponent from "./components/ModalComponent";

import "../templates/reset.css";
import "../templates/common.css";
39 changes: 39 additions & 0 deletions templates/common.css
Original file line number Diff line number Diff line change
@@ -242,3 +242,42 @@ movie-list-title {
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;
}