diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..b512c09 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +node_modules \ No newline at end of file diff --git a/jsconfig.json b/jsconfig.json new file mode 100644 index 0000000..5875dc5 --- /dev/null +++ b/jsconfig.json @@ -0,0 +1,6 @@ +{ + "compilerOptions": { + "baseUrl": "src" + }, + "include": ["src"] +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..eb7f1ec --- /dev/null +++ b/package.json @@ -0,0 +1,39 @@ +{ + "name": "01.junglecinema", + "version": "0.1.0", + "private": true, + "dependencies": { + "@testing-library/jest-dom": "^5.14.1", + "@testing-library/react": "^13.0.0", + "@testing-library/user-event": "^13.2.1", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "react-scripts": "5.0.1", + "styled-components": "^6.0.7", + "web-vitals": "^2.1.0" + }, + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test", + "eject": "react-scripts eject" + }, + "eslintConfig": { + "extends": [ + "react-app", + "react-app/jest" + ] + }, + "browserslist": { + "production": [ + ">0.2%", + "not dead", + "not op_mini all" + ], + "development": [ + "last 1 chrome version", + "last 1 firefox version", + "last 1 safari version" + ] + } +} diff --git a/public/footerImgs/icon-facebook.svg b/public/footerImgs/icon-facebook.svg new file mode 100644 index 0000000..84be9ec --- /dev/null +++ b/public/footerImgs/icon-facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/footerImgs/icon-instagram.svg b/public/footerImgs/icon-instagram.svg new file mode 100644 index 0000000..bf1e31a --- /dev/null +++ b/public/footerImgs/icon-instagram.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/footerImgs/icon-twitter.svg b/public/footerImgs/icon-twitter.svg new file mode 100644 index 0000000..b40dbde --- /dev/null +++ b/public/footerImgs/icon-twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/footerImgs/jungle.png b/public/footerImgs/jungle.png new file mode 100644 index 0000000..8faad95 Binary files /dev/null and b/public/footerImgs/jungle.png differ diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..1dfda0e --- /dev/null +++ b/public/index.html @@ -0,0 +1,16 @@ + + + + + + + + 01.정글 시네마 + + +
+ + diff --git a/src/App.js b/src/App.js new file mode 100644 index 0000000..39aef59 --- /dev/null +++ b/src/App.js @@ -0,0 +1,14 @@ +import Home from "./page/Home"; + +import GlobalStyle from "./styles/GlobalStyle"; + +function App() { + return ( + <> + + + + ); +} + +export default App; diff --git a/src/assets/fonts/NotoSansKRBlack.otf b/src/assets/fonts/NotoSansKRBlack.otf new file mode 100644 index 0000000..5599581 Binary files /dev/null and b/src/assets/fonts/NotoSansKRBlack.otf differ diff --git a/src/assets/fonts/NotoSansKRBold.otf b/src/assets/fonts/NotoSansKRBold.otf new file mode 100644 index 0000000..be388bf Binary files /dev/null and b/src/assets/fonts/NotoSansKRBold.otf differ diff --git a/src/assets/fonts/NotoSansKRMedium.otf b/src/assets/fonts/NotoSansKRMedium.otf new file mode 100644 index 0000000..5ddbbc0 Binary files /dev/null and b/src/assets/fonts/NotoSansKRMedium.otf differ diff --git a/src/assets/fonts/NotoSansKRRegular.otf b/src/assets/fonts/NotoSansKRRegular.otf new file mode 100644 index 0000000..7c5c2fa Binary files /dev/null and b/src/assets/fonts/NotoSansKRRegular.otf differ diff --git a/src/assets/fonts/RobotoRegular.ttf b/src/assets/fonts/RobotoRegular.ttf new file mode 100644 index 0000000..ddf4bfa Binary files /dev/null and b/src/assets/fonts/RobotoRegular.ttf differ diff --git a/src/assets/fonts/fontComponent.js b/src/assets/fonts/fontComponent.js new file mode 100644 index 0000000..d898980 --- /dev/null +++ b/src/assets/fonts/fontComponent.js @@ -0,0 +1,13 @@ +import NotoSansKRBlack from "../fonts/NotoSansKRBlack.otf"; +import NotoSansKRBold from "../fonts/NotoSansKRBold.otf"; +import NotoSansKRMedium from "../fonts/NotoSansKRMedium.otf"; +import NotoSansKRRegular from "../fonts/NotoSansKRRegular.otf"; +import RobotoRegular from "../fonts/RobotoRegular.ttf"; + +export { + NotoSansKRBlack, + NotoSansKRBold, + NotoSansKRMedium, + NotoSansKRRegular, + RobotoRegular, +}; diff --git a/src/components/footer/Footer.css b/src/components/footer/Footer.css new file mode 100644 index 0000000..4c24b2a --- /dev/null +++ b/src/components/footer/Footer.css @@ -0,0 +1,74 @@ +/* footer */ +.footer-container { + width: 100%; + padding: 53px 0 38px; + + background: var(--gray-6); +} +.inner-container { + width: 70%; + margin: auto; +} + +/* title, social */ +.footer-header { + display: flex; + justify-content: space-between; + + padding-bottom: 42px; + margin-bottom: 36px; + border-bottom: 1px solid var(--input-box); +} +.footer-title { + font-size: 22px; + font-family: "Roboto"; + font-weight: 700; + line-height: 26px; +} +.social-group { + display: flex; + gap: 22px; +} + +/* 회사정보 */ +.company { + display: flex; + justify-content: space-between; + align-items: center; + gap: 50px; + + color: var(--gray-2); + + font-size: 14px; + font-family: "Noto-400"; + line-height: 20px; +} +.company > dl > dt, +.company > dl > dd { + display: inline-block; +} +.company > dl > dt { + font-family: "Noto-700"; + margin-right: 5px; +} +.company .company-name { + margin: 0; +} +.company .company-name::after { + content: "|"; + + margin: 0 5px 0 7px; + + font-family: "Noto-400"; +} +.company .company-info { + font-family: "Noto-400"; + margin: 0; +} +.line::after { + content: "|"; + + margin: 0 5px; + + font-family: "Noto-400"; +} diff --git a/src/components/footer/Footer.jsx b/src/components/footer/Footer.jsx new file mode 100644 index 0000000..c0dcf71 --- /dev/null +++ b/src/components/footer/Footer.jsx @@ -0,0 +1,57 @@ +import React from "react"; + +import "./Footer.css"; + +const Footer = () => { + return ( +
+
+ {/* 회사 이름 , 소셜미디어 링크 */} +
+

Jungle Cinema

+ {/* 소셜미디어 링크 */} + +
+ {/* 회사 정보 */} +
+

정글 시네마 회사 정보

+
+
(주) 정글 시네마
+
대표
+
라이언
+
사업자 번호
+
000-0000-0000
+
광고 영화 및 비디오물 제작업
+
주소
+
+
서울특별시
+
+
+ + The Jungle logo +
+
+
+ ); +}; + +export default Footer; diff --git a/src/components/main/Main.css b/src/components/main/Main.css new file mode 100644 index 0000000..a052047 --- /dev/null +++ b/src/components/main/Main.css @@ -0,0 +1,229 @@ +/* 정글 시네마 영화 목록 */ +.main-container { + max-width: 1060px; + padding: 0 30px 30px; + margin: 91px auto 135px; + + border: 2px solid var(--gray-4); + border-radius: 15px; + + background: var(--gray-6); +} + +/* 제목과 네비게이션*/ +.main-header { + padding: 41px 0 18px; + + text-align: center; +} +/* 제목 */ +.main-title { + display: inline-block; + margin-bottom: 37px; + + font-size: 24px; + font-family: "Roboto"; + font-weight: 700; + line-height: 28px; +} +/* 네비게이션 */ +.main-nav { + position: relative; + + display: flex; + justify-content: center; + gap: 50px; + + padding-top: 18px; + margin: 0 10%; +} +/* 제목과 네비게이션을 나누는 선 */ +.main-nav::before { + content: ""; + + position: absolute; + top: 0; + left: 0; + + width: 100%; + height: 2px; + + background-color: var(--gray-4); +} +.main-nav button { + padding: 10px 5px; + font-family: "Roboto"; + line-height: 19px; +} +/* 활성화 되고있는 버튼 */ +.button-active { + font-weight: 900; +} + +/* article */ +.main-content { + padding: 26px 27px 30px; + + border: 2px solid var(--gray-4); + border-radius: 15px; + + background-color: #fff; +} +/* ul 반응형을 위한 그리드 */ +.main-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); + gap: 24px 23px; +} +/* li 영화 목록 */ +.movie-item { + position: relative; + + display: flex; + flex-direction: column; + + padding: 19px 20px 60px; + + border: 2px solid var(--gray-4); + border-radius: 10px; + + box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3); + + font-family: "Noto-400"; + line-height: 19px; +} +/* 영화 포스터 */ +.movie-poster { + margin-bottom: 11px; + + border: 1px solid var(--gray-4); + border-radius: 10px; + + box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); +} +/* 영화제목 */ +/* .over-text-cover { + overflow: hidden; +} */ +.movie-name { + margin-bottom: 12px; + + font-family: "Noto-900"; + line-height: 23px; + + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +/* .movie-name:hover { + animation: leftToRight 3s infinite ease-in-out; +} +@keyframes leftToRight { + 0% { + transform: translateX(0%); + left: 0%; + + text-overflow: initial; + overflow: unset; + } + + 100% { + transform: translateX(-100%); + left: 100%; + text-overflow: initial; + overflow: unset; + } +} */ + +/* 영화 관련 내용을 담음 */ +.movie-detail { + position: relative; + + font-size: 13px; +} +.movie-star { + position: absolute; + top: 0; + right: 0; +} + +.movie-detail dt:not(:last-child) { + margin-bottom: 5px; +} + +.movie-detail dt::before { + margin-right: 5px; + + color: var(--gray-3); +} +.movie-genre::before { + content: "개요"; +} +/* 별 이미지 */ +.movie-star::before { + content: "평점"; + + padding-right: 18px; + + background: url(./MovieImgs/star.svg) no-repeat 28px 4px / 12px; +} +.movie-release::before { + content: "개봉"; +} +.movie-actor::before { + content: "출연"; +} + +/* 예매와 예고편 박스 */ +.link-group { + position: absolute; + bottom: 0; + left: 0; + + display: flex; + justify-content: space-around; + align-items: center; + + width: 100%; + + border-top: 1px solid var(--gray-4); + border-radius: 0 0 10px 10px; + + font-size: 14px; + + background: var(--gray-6); +} + +.link-group li { + width: 100%; + + padding: 12px 10px; + + text-align: center; + + font-family: "Noto-500"; + line-height: 20px; +} + +.trailer-box { + border-left: 1px solid var(--gray-4); +} +.trailer { + font-family: "Noto-500"; + line-height: 20px; +} +/* 플레이 이미지 */ +.trailer::before { + content: ""; + + display: inline-block; + + width: 16px; + height: 16px; + + margin-right: 2px; + + background: url(./MovieImgs/play.svg) no-repeat center; + + vertical-align: sub; +} diff --git a/src/components/main/Main.jsx b/src/components/main/Main.jsx new file mode 100644 index 0000000..7dbab84 --- /dev/null +++ b/src/components/main/Main.jsx @@ -0,0 +1,102 @@ +import React, { useState } from "react"; + +import movieJson from "data/data.json"; +import movieReverseJson from "data/dataReverse.json"; + +import "./Main.css"; +const Main = () => { + // jsonData + const [movieData, setMovieData] = useState(movieJson); + + // nav button + const movieType = ["현재상영영화", "개봉예정영화", "박스오피스"]; + + // 어떤 nav button을 사용중인지를 알기 위한 useState와 함수 + const [movieActiveType, setMovieActiveType] = useState("현재상영영화"); + + const activeMovie = (activeTitle) => { + if (activeTitle === "현재상영영화") { + setMovieData(movieJson); + setMovieActiveType("현재상영영화"); + } else if (activeTitle === "개봉예정영화") { + setMovieData(movieReverseJson); + setMovieActiveType("개봉예정영화"); + } else { + setMovieData(movieJson); + setMovieActiveType("박스오피스"); + } + }; + + // trailer , 예매하기 준비중 + const readyTo = (e) => { + e.preventDefault(); + alert("준비중"); + }; + + return ( +
+
+

정글 시네마 영화 목록

+ {/* 네비게이션 */} + +
+ + {/* 정글 시네마 영화 목록 컨텐츠 */} +
+

{movieActiveType}

+
    + {movieData.map((item) => ( +
  • + {`${item.title} + {/*
    */} +

    {item.title}

    + {/*
    */} +
    +
    {item.genre}
    +
    {item.star}
    +
    {item.release}
    +
    {item.actor}
    +
    + {/* 외부 링크 */} + +
    • + ))} +
+
+
+ ); +}; + +export default Main; diff --git a/src/components/main/MovieImgs/play.svg b/src/components/main/MovieImgs/play.svg new file mode 100644 index 0000000..5519196 --- /dev/null +++ b/src/components/main/MovieImgs/play.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/main/MovieImgs/star.svg b/src/components/main/MovieImgs/star.svg new file mode 100644 index 0000000..89c2344 --- /dev/null +++ b/src/components/main/MovieImgs/star.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/components/main/MoviePoster/poster-img1.png b/src/components/main/MoviePoster/poster-img1.png new file mode 100644 index 0000000..80ffd75 Binary files /dev/null and b/src/components/main/MoviePoster/poster-img1.png differ diff --git a/src/components/main/MoviePoster/poster-img2.png b/src/components/main/MoviePoster/poster-img2.png new file mode 100644 index 0000000..800f071 Binary files /dev/null and b/src/components/main/MoviePoster/poster-img2.png differ diff --git a/src/components/main/MoviePoster/poster-img3.png b/src/components/main/MoviePoster/poster-img3.png new file mode 100644 index 0000000..620a636 Binary files /dev/null and b/src/components/main/MoviePoster/poster-img3.png differ diff --git a/src/components/main/MoviePoster/poster-img4.png b/src/components/main/MoviePoster/poster-img4.png new file mode 100644 index 0000000..c593969 Binary files /dev/null and b/src/components/main/MoviePoster/poster-img4.png differ diff --git a/src/components/main/MoviePoster/poster-img5.png b/src/components/main/MoviePoster/poster-img5.png new file mode 100644 index 0000000..9ec9e84 Binary files /dev/null and b/src/components/main/MoviePoster/poster-img5.png differ diff --git a/src/components/main/MoviePoster/poster-img6.png b/src/components/main/MoviePoster/poster-img6.png new file mode 100644 index 0000000..99c47a3 Binary files /dev/null and b/src/components/main/MoviePoster/poster-img6.png differ diff --git a/src/components/main/MoviePoster/poster-img7.png b/src/components/main/MoviePoster/poster-img7.png new file mode 100644 index 0000000..d5151ad Binary files /dev/null and b/src/components/main/MoviePoster/poster-img7.png differ diff --git a/src/components/main/MoviePoster/poster-img8.png b/src/components/main/MoviePoster/poster-img8.png new file mode 100644 index 0000000..924737a Binary files /dev/null and b/src/components/main/MoviePoster/poster-img8.png differ diff --git a/src/data/data.json b/src/data/data.json new file mode 100644 index 0000000..ab2b77d --- /dev/null +++ b/src/data/data.json @@ -0,0 +1,82 @@ +[ + { + "id": 1, + "title": "위니브 월드 : 새로운 시대 로드맵으로 Python 완전 정복!", + "poster": "./MoviePoster/poster-img1.png", + "genre": "판타지", + "star": "9.05", + "release": "2021.03.27", + "actor": "라이캣, 소울곰, 개리씨", + "url": "https://www.inflearn.com/roadmaps/399" + }, + { + "id": 2, + "title": "눈떠보니 코딩테스트 전날 With JAVA", + "poster": "./MoviePoster/poster-img2.png", + "genre": "스릴러", + "star": "8.25", + "release": "2021.04.01", + "actor": "자바독, 개리씨, 빙키", + "url": "https://ridibooks.com/books/2773000043?_s=search&_q=%EB%88%88%EB%96%A0%EB%B3%B4%EB%8B%88&_rdt_sid=search&_rdt_idx=8" + }, + { + "id": 3, + "title": "파이썬 부트캠프", + "poster": "./MoviePoster/poster-img3.png", + "genre": "드라마", + "star": "8.77", + "release": "2021.04.12", + "actor": "캣, 파이, 썬, 뮤라", + "url": "https://www.inflearn.com/course/%ED%8C%8C%EC%9D%B4%EC%8D%AC-%EB%B6%80%ED%8A%B8%EC%BA%A0%ED%94%84" + }, + { + "id": 4, + "title": "파이큐티의 사랑", + "poster": "./MoviePoster/poster-img4.png", + "genre": "로맨스", + "star": "8.81", + "release": "2021.04.08", + "actor": "파이썬, 큐티", + "url": "https://www.inflearn.com/course/pyqt-gui" + }, + { + "id": 5, + "title": "NGINX의 춤", + "poster": "./MoviePoster/poster-img5.png", + "genre": "드라마", + "star": "9.88", + "release": "2021.04.15", + "actor": "NGINX, 노션", + "url": "" + }, + { + "id": 6, + "title": "어쩌다 밋업", + "poster": "./MoviePoster/poster-img6.png", + "genre": "드라마", + "star": "9.25", + "release": "2021.04.17", + "actor": "라이캣, 자바독, 소울곰", + "url": "" + }, + { + "id": 7, + "title": "파이게임 어드벤처", + "poster": "./MoviePoster/poster-img7.png", + "genre": "판타지액션", + "star": "8.56", + "release": "2021.04.05", + "actor": "개리씨, 파이썬", + "url": "https://www.inflearn.com/course/%ED%8C%8C%EC%9D%B4%EA%B2%8C%EC%9E%84-%EC%96%B4%EB%93%9C%EB%B2%A4%EC%B3%90" + }, + { + "id": 8, + "title": "MBTI는 내 운명", + "poster": "./MoviePoster/poster-img8.png", + "genre": "로맨스", + "star": "9.02", + "release": "2021.04.12", + "actor": "라이캣, 개리씨, 자바독", + "url": "" + } +] diff --git a/src/data/dataReverse.json b/src/data/dataReverse.json new file mode 100644 index 0000000..2eed142 --- /dev/null +++ b/src/data/dataReverse.json @@ -0,0 +1,82 @@ +[ + { + "id": 8, + "title": "MBTI는 내 운명", + "poster": "./MoviePoster/poster-img8.png", + "genre": "로맨스", + "star": "9.02", + "release": "2021.04.12", + "actor": "라이캣, 개리씨, 자바독", + "url": "" + }, + { + "id": 7, + "title": "파이게임 어드벤처", + "poster": "./MoviePoster/poster-img7.png", + "genre": "판타지액션", + "star": "8.56", + "release": "2021.04.05", + "actor": "개리씨, 파이썬", + "url": "https://www.inflearn.com/course/%ED%8C%8C%EC%9D%B4%EA%B2%8C%EC%9E%84-%EC%96%B4%EB%93%9C%EB%B2%A4%EC%B3%90" + }, + { + "id": 6, + "title": "어쩌다 밋업", + "poster": "./MoviePoster/poster-img6.png", + "genre": "드라마", + "star": "9.25", + "release": "2021.04.17", + "actor": "라이캣, 자바독, 소울곰", + "url": "" + }, + { + "id": 5, + "title": "NGINX의 춤", + "poster": "./MoviePoster/poster-img5.png", + "genre": "드라마", + "star": "9.88", + "release": "2021.04.15", + "actor": "NGINX, 노션", + "url": "" + }, + { + "id": 4, + "title": "파이큐티의 사랑", + "poster": "./MoviePoster/poster-img4.png", + "genre": "로맨스", + "star": "8.81", + "release": "2021.04.08", + "actor": "파이썬, 큐티", + "url": "https://www.inflearn.com/course/pyqt-gui" + }, + { + "id": 3, + "title": "파이썬 부트캠프", + "poster": "./MoviePoster/poster-img3.png", + "genre": "드라마", + "star": "8.77", + "release": "2021.04.12", + "actor": "캣, 파이, 썬, 뮤라", + "url": "https://www.inflearn.com/course/%ED%8C%8C%EC%9D%B4%EC%8D%AC-%EB%B6%80%ED%8A%B8%EC%BA%A0%ED%94%84" + }, + { + "id": 2, + "title": "눈떠보니 코딩테스트 전날 With JAVA", + "poster": "./MoviePoster/poster-img2.png", + "genre": "스릴러", + "star": "8.25", + "release": "2021.04.01", + "actor": "자바독, 개리씨, 빙키", + "url": "https://ridibooks.com/books/2773000043?_s=search&_q=%EB%88%88%EB%96%A0%EB%B3%B4%EB%8B%88&_rdt_sid=search&_rdt_idx=8" + }, + { + "id": 1, + "title": "위니브 월드 : 새로운 시대 로드맵으로 Python 완전 정복!", + "poster": "./MoviePoster/poster-img1.png", + "genre": "판타지", + "star": "9.05", + "release": "2021.03.27", + "actor": "라이캣, 소울곰, 개리씨", + "url": "https://www.inflearn.com/roadmaps/399" + } +] diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..8db5acb --- /dev/null +++ b/src/index.js @@ -0,0 +1,10 @@ +import React from "react"; +import ReactDOM from "react-dom/client"; +import App from "./App"; + +const root = ReactDOM.createRoot(document.getElementById("root")); +root.render( + + + +); diff --git a/src/page/Home.jsx b/src/page/Home.jsx new file mode 100644 index 0000000..4a3c8e2 --- /dev/null +++ b/src/page/Home.jsx @@ -0,0 +1,16 @@ +import React from "react"; + +import Main from "../components/main/Main"; +import Footer from "../components/footer/Footer"; + +const Home = () => { + return ( + <> +

정글 시네마

+
+