├── Demo
├── Demo.gif
└── Demo2.gif
├── phoenixia
├── public
│ ├── logo.jpg
│ ├── manifest.json
│ └── index.html
├── src
│ ├── Screens
│ │ └── Main
│ │ │ ├── index.js
│ │ │ ├── MainContainer.js
│ │ │ └── MainPresenter.js
│ ├── assets
│ │ ├── Images
│ │ │ ├── 10CM.jpg
│ │ │ ├── BOL4.jpeg
│ │ │ ├── ZICO.jpeg
│ │ │ ├── DJJOEY.jpg
│ │ │ ├── KIMNY.jpeg
│ │ │ └── YANGDALL.jpg
│ │ └── Fonts
│ │ │ ├── soonchunhyang.otf
│ │ │ ├── soonchunhyang.ttf
│ │ │ └── soonchunhyang.woff
│ ├── Constants
│ │ ├── Colors.js
│ │ ├── TimeTableData.js
│ │ └── DeliveryData.js
│ ├── index.js
│ ├── index.css
│ └── Components
│ │ ├── App.js
│ │ ├── TopButton.js
│ │ ├── GlobalStyles.js
│ │ ├── Router.js
│ │ ├── Footer.js
│ │ ├── LineUpDetail.js
│ │ ├── FestivalTimer.js
│ │ ├── Header.js
│ │ ├── LineUp.js
│ │ ├── Delivery.js
│ │ └── TimeTable.js
├── .gitignore
├── package.json
└── README.md
├── LICENSE
├── .gitignore
└── README.md
/Demo/Demo.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alstn2468/sch-phoenixia-festival/HEAD/Demo/Demo.gif
--------------------------------------------------------------------------------
/Demo/Demo2.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alstn2468/sch-phoenixia-festival/HEAD/Demo/Demo2.gif
--------------------------------------------------------------------------------
/phoenixia/public/logo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alstn2468/sch-phoenixia-festival/HEAD/phoenixia/public/logo.jpg
--------------------------------------------------------------------------------
/phoenixia/src/Screens/Main/index.js:
--------------------------------------------------------------------------------
1 | import MainContainer from "./MainContainer.js";
2 |
3 | export default MainContainer;
4 |
--------------------------------------------------------------------------------
/phoenixia/src/assets/Images/10CM.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alstn2468/sch-phoenixia-festival/HEAD/phoenixia/src/assets/Images/10CM.jpg
--------------------------------------------------------------------------------
/phoenixia/src/assets/Images/BOL4.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alstn2468/sch-phoenixia-festival/HEAD/phoenixia/src/assets/Images/BOL4.jpeg
--------------------------------------------------------------------------------
/phoenixia/src/assets/Images/ZICO.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alstn2468/sch-phoenixia-festival/HEAD/phoenixia/src/assets/Images/ZICO.jpeg
--------------------------------------------------------------------------------
/phoenixia/src/assets/Images/DJJOEY.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alstn2468/sch-phoenixia-festival/HEAD/phoenixia/src/assets/Images/DJJOEY.jpg
--------------------------------------------------------------------------------
/phoenixia/src/assets/Images/KIMNY.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alstn2468/sch-phoenixia-festival/HEAD/phoenixia/src/assets/Images/KIMNY.jpeg
--------------------------------------------------------------------------------
/phoenixia/src/assets/Images/YANGDALL.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alstn2468/sch-phoenixia-festival/HEAD/phoenixia/src/assets/Images/YANGDALL.jpg
--------------------------------------------------------------------------------
/phoenixia/src/assets/Fonts/soonchunhyang.otf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alstn2468/sch-phoenixia-festival/HEAD/phoenixia/src/assets/Fonts/soonchunhyang.otf
--------------------------------------------------------------------------------
/phoenixia/src/assets/Fonts/soonchunhyang.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alstn2468/sch-phoenixia-festival/HEAD/phoenixia/src/assets/Fonts/soonchunhyang.ttf
--------------------------------------------------------------------------------
/phoenixia/src/assets/Fonts/soonchunhyang.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alstn2468/sch-phoenixia-festival/HEAD/phoenixia/src/assets/Fonts/soonchunhyang.woff
--------------------------------------------------------------------------------
/phoenixia/src/Constants/Colors.js:
--------------------------------------------------------------------------------
1 | export const BACKGROUND_COLOR = "rgba(0,0,0,0)";
2 | export const TINT_COLOR = "#FFFFFF";
3 | export const SCH_LOGO_COLOR_ONE = "#AAD047";
4 | export const SCH_LOGO_COLOR_TWO = "#007A85";
5 | export const SCH_LOGO_COLOR_THR = "#1BBCF0";
6 |
--------------------------------------------------------------------------------
/phoenixia/src/index.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom";
3 | import App from "Components/App";
4 | import "react-app-polyfill/ie11";
5 | import "react-app-polyfill/ie9";
6 | import "./index.css";
7 |
8 | ReactDOM.render(, document.getElementById("root"));
9 |
--------------------------------------------------------------------------------
/phoenixia/src/index.css:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: "soonchunhyang";
3 | src: local("soonchunhyang"),
4 | url("./assets/Fonts/soonchunhyang.ttf") format("truetype"),
5 | url("./assets/Fonts/soonchunhyang.otf") format("opentype"),
6 | url("./assets/Fonts/soonchunhyang.woff") format("woff");
7 | }
8 |
--------------------------------------------------------------------------------
/phoenixia/src/Components/App.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Router from "./Router";
3 | import GlobalStyles from "Components/GlobalStyles";
4 |
5 | function App() {
6 | return (
7 | <>
8 |
9 |
10 | >
11 | );
12 | }
13 | export default App;
14 |
--------------------------------------------------------------------------------
/phoenixia/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 | /build
13 |
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 |
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 |
--------------------------------------------------------------------------------
/phoenixia/src/Components/TopButton.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { TinyButton as ScrollUpButton } from "react-scroll-up-button";
3 | import { BACKGROUND_COLOR } from "../Constants/Colors";
4 |
5 | export default () => (
6 |
13 | );
14 |
--------------------------------------------------------------------------------
/phoenixia/src/Components/GlobalStyles.js:
--------------------------------------------------------------------------------
1 | import { createGlobalStyle } from "styled-components";
2 | import reset from "styled-reset";
3 | import { TINT_COLOR, BACKGROUND_COLOR } from "../Constants/Colors";
4 |
5 | const globalStyles = createGlobalStyle`
6 | ${reset};
7 | * {
8 | box-sizing: border-box;
9 | text-decoration: none;
10 | padding: 0px;
11 | margin: 0px;
12 | font-family: "soonchunhyang" !important;
13 | background-color: ${BACKGROUND_COLOR};
14 | font-weight: 500;
15 | color: ${TINT_COLOR};
16 | }
17 | `;
18 |
19 | export default globalStyles;
20 |
--------------------------------------------------------------------------------
/phoenixia/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "logo.jpg",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | },
10 | {
11 | "src": "logo.jpg",
12 | "type": "image/png",
13 | "sizes": "192x192"
14 | },
15 | {
16 | "src": "logo.jpg",
17 | "type": "image/png",
18 | "sizes": "512x512"
19 | }
20 | ],
21 | "start_url": ".",
22 | "display": "standalone",
23 | "theme_color": "#000000",
24 | "background_color": "#ffffff"
25 | }
26 |
--------------------------------------------------------------------------------
/phoenixia/src/Components/Router.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import {
3 | HashRouter as Router,
4 | Route,
5 | Switch,
6 | Redirect
7 | } from "react-router-dom";
8 | import Header from "../Components/Header";
9 | import Main from "../Screens/Main";
10 | import Footer from "../Components/Footer";
11 | import TopButton from "../Components/TopButton";
12 |
13 | export default () => {
14 | return (
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 | );
25 | };
26 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2019 Kimminsu
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 |
8 | # Runtime data
9 | pids
10 | *.pid
11 | *.seed
12 | *.pid.lock
13 |
14 | # Directory for instrumented libs generated by jscoverage/JSCover
15 | lib-cov
16 |
17 | # Coverage directory used by tools like istanbul
18 | coverage
19 |
20 | # nyc test coverage
21 | .nyc_output
22 |
23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
24 | .grunt
25 |
26 | # Bower dependency directory (https://bower.io/)
27 | bower_components
28 |
29 | # node-waf configuration
30 | .lock-wscript
31 |
32 | # Compiled binary addons (https://nodejs.org/api/addons.html)
33 | build/Release
34 |
35 | # Dependency directories
36 | node_modules/
37 | jspm_packages/
38 |
39 | # TypeScript v1 declaration files
40 | typings/
41 |
42 | # Optional npm cache directory
43 | .npm
44 |
45 | # Optional eslint cache
46 | .eslintcache
47 |
48 | # Optional REPL history
49 | .node_repl_history
50 |
51 | # Output of 'npm pack'
52 | *.tgz
53 |
54 | # Yarn Integrity file
55 | .yarn-integrity
56 |
57 | # dotenv environment variables file
58 | .env
59 |
60 | # next.js build output
61 | .next
62 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # 2019 피닉시아 축제 소개 페이지
2 |
3 |    
4 |
5 | ## [김민수](https://github.com/alstn2468)
6 |
7 | ## [ [Facebook](https://www.facebook.com/profile.php?id=100003769223078) ] [ [Github](https://github.com/alstn2468) ] [ [LinkedIn](https://www.linkedin.com/in/minsu-kim-336289160/) ] [ [Blog](https://alstn2468.github.io/) ]
8 |
9 | ## 개요
10 |
11 | **ReactJS**를 사용해 구현한 **순천향대학교 축제(피닉시아)** 소개 홈페이지 입니다.
12 | `PR`과 `ISSUE`는 언제나 환영입니다. ⭐️는 더 환영입니다. 😀😀😀
13 |
14 | ## Page Link
15 |
16 | #### [바로가기](https://alstn2468.github.io/SCH_Phoenixia_Festival/#/)
17 |
18 | ## To Do List
19 |
20 | - [x] 축제 시간 타이머
21 | - [x] 불꽃 놀이 이펙트
22 | - [x] 라인업 정보
23 | - [x] 배달음식 정보
24 | - [x] 시간표
25 |
26 | ## Demo Image
27 |
28 | ### Desktop
29 |
30 |
31 |
32 | ### Mobile
33 |
34 |
35 |
--------------------------------------------------------------------------------
/phoenixia/src/Components/Footer.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import styled from "styled-components";
3 |
4 | const FooterContainer = styled.div`
5 | display: flex;
6 | width: 100%;
7 | height: 80px;
8 | border-top: 1px solid;
9 | border-top-color: white;
10 | justify-content: center;
11 | align-items: center;
12 | position: fixed;
13 | bottom: 0;
14 | z-index: 1;
15 |
16 | @media screen and (max-width: 768px) {
17 | flex: 1;
18 | height: 60px;
19 | }
20 | `;
21 |
22 | const FooterText = styled.span`
23 | color: #9e9e9e;
24 | font-size: 14px;
25 |
26 | @media screen and (max-width: 768px) {
27 | font-size: 10px;
28 | }
29 | `;
30 |
31 | const NameLinkText = styled.a`
32 | font-size: 14px;
33 | color: #d1d1d1;
34 |
35 | @media screen and (max-width: 768px) {
36 | font-size: 10px;
37 | }
38 | `;
39 |
40 | export default () => (
41 |
42 |
43 | Copyright 2019.{" "}
44 |
45 | Kim Min Su
46 | {" "}
47 | All rights reserved.
48 |
49 |
50 | );
51 |
--------------------------------------------------------------------------------
/phoenixia/src/Constants/TimeTableData.js:
--------------------------------------------------------------------------------
1 | export const DAY_ONE_TIMETABLE = [
2 | { time: "10:00 ~ 17:00", content: "리허설" },
3 | { time: "17:00 ~ 18:30", content: "향록 가요제" },
4 | { time: "18:30 ~ 21:00", content: "순믈리에" },
5 | { time: "21:00 ~ 22:30", content: "연예인 공연" }
6 | ];
7 |
8 | export const DAY_TWO_TIMETABLE = [
9 | { time: "10:00 ~ 18:00", content: "리허설" },
10 | { time: "18:00 ~ 20:00", content: "미스테리 노래방" },
11 | { time: "20:00 ~ 21:00", content: "동아리 공연" },
12 | { time: "21:00 ~ 22:30", content: "연예인 공연" }
13 | ];
14 |
15 | export const DAY_THR_TIMETABLE = [
16 | { time: "10:00 ~ 17:00", content: "리허설" },
17 | { time: "17:00 ~ 19:30", content: "우리말 겨루기" },
18 | { time: "19:30 ~ 20:00", content: "동아리 공연" },
19 | { time: "20:30 ~ 22:30", content: "연예인 공연" }
20 | ];
21 |
22 | export const STD_UNION_TIMETABLE = [
23 | { time: "10:00 ~ 18:00", content: "노점 (16:30분 Order Cut)" },
24 | { time: "18:00 ~ 23:00", content: "주점 (23:30분 Order Cut)" }
25 | ];
26 |
27 | export const PHOENIX_SQUARE_TIMETABLE = [
28 | { time: "10:00 ~ 23:00", content: "피크닉존" }
29 | ];
30 |
31 | export const COMMON_TIMETABLE = [
32 | { time: "10:00 ~ 16:30", content: "주간 푸드트럭" },
33 | { time: "10:00 ~ 23:00", content: "야간 푸드트럭" }
34 | ];
35 |
--------------------------------------------------------------------------------
/phoenixia/src/Constants/DeliveryData.js:
--------------------------------------------------------------------------------
1 | export const NearDeliveryData = [
2 | { name: "깻잎두마리치킨", number: "041-548-5511" },
3 | { name: "돈치킨", number: "041-545-0402" },
4 | { name: "마슬랜치킨", number: "041-544-9630" },
5 | { name: "마슬랜치탕", number: "041-541-8990" },
6 | { name: "멕켄", number: "041-542-4881" },
7 | { name: "미쳐버린파닭", number: "041-532-2522" },
8 | { name: "빅원치킨", number: "041-544-0009" },
9 | { name: "짱닭", number: "041-531-5558" },
10 | { name: "페리카나", number: "041-542-9998" },
11 | { name: "BBQ", number: "041-541-9982" },
12 | { name: "썬오브비앤피", number: "041-533-4666" },
13 | { name: "오구쌀피자", number: "041-549-5969" },
14 | { name: "지정환피자", number: "041-547-2700" }
15 | ];
16 |
17 | export const FarDeliveryData = [
18 | { name: "교촌치킨", number: "041-541-1007" },
19 | { name: "굽네치킨", number: "041-542-8294" },
20 | { name: "네네치킨", number: "041-543-8292" },
21 | { name: "땅땅치킨", number: "041-546-6363" },
22 | { name: "또래오래", number: "041-531-5202" },
23 | { name: "만땅치킨", number: "041-531-0096" },
24 | { name: "치킨트리플", number: "041-533-9003" },
25 | { name: "치킨플러스", number: "041-5441-9003" },
26 | { name: "코리엔탈깻잎칩킨", number: "041-531-7750" },
27 | { name: "파스타먹은닭", number: "041-542-7577" }
28 | ];
29 |
--------------------------------------------------------------------------------
/phoenixia/src/Components/LineUpDetail.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import styled from "styled-components";
3 | import PropTypes from "prop-types";
4 |
5 | const Container = styled.div`
6 | display: flex;
7 | width: 90%;
8 | height: 50%;
9 | flex-direction: column;
10 | justify-content: center;
11 | align-items: center;
12 |
13 | @media screen and (max-width: 768px) {
14 | height: 100%;
15 | }
16 | `;
17 |
18 | const DetailImage = styled.img`
19 | border-radius: 10px;
20 | width: 200px;
21 | height: 140px;
22 |
23 | @media screen and (max-width: 768px) {
24 | width: 70px;
25 | height: 50px;
26 | }
27 | `;
28 |
29 | const DetailContent = styled.div`
30 | width: 100%;
31 | margin: 10px 0px 0px 0px;
32 | text-align: center;
33 | font-size: 26px;
34 | font-weight: 500;
35 |
36 | @media screen and (max-width: 768px) {
37 | margin: 7px 0px 0px 0px;
38 | font-size: 12px;
39 | }
40 | `;
41 |
42 | const LineUpDetail = ({ path, name }) => (
43 |
44 |
45 | {name}
46 |
47 | );
48 |
49 | LineUpDetail.propTypes = {
50 | path: PropTypes.string.isRequired,
51 | name: PropTypes.string.isRequired
52 | };
53 |
54 | export default LineUpDetail;
55 |
--------------------------------------------------------------------------------
/phoenixia/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "phoenixia",
3 | "version": "0.1.1",
4 | "homepage": "https://alstn2468.github.io/SCH_Phoenixia_Festival",
5 | "private": true,
6 | "dependencies": {
7 | "file-loader": "^4.2.0",
8 | "gh-pages": "^2.1.1",
9 | "prop-types": "^15.7.2",
10 | "react-anchor-link-smooth-scroll": "^1.0.12",
11 | "react-app-polyfill": "^1.0.2",
12 | "react-compound-timer": "^1.1.5",
13 | "react-dom": "^16.9.0",
14 | "react-router-dom": "^5.0.1",
15 | "react-scripts": "3.1.1",
16 | "react-scroll-up-button": "^1.6.4",
17 | "styled-components": "^4.3.2",
18 | "styled-reset": "^4.0.0",
19 | "swiper": "^4.5.1"
20 | },
21 | "scripts": {
22 | "start": "react-scripts start",
23 | "build": "react-scripts build",
24 | "test": "react-scripts test",
25 | "eject": "react-scripts eject",
26 | "predeploy": "npm run build",
27 | "deploy": "gh-pages -d build"
28 | },
29 | "eslintConfig": {
30 | "extends": "react-app"
31 | },
32 | "browserslist": {
33 | "production": [
34 | ">0.2%",
35 | "not dead",
36 | "not op_mini all"
37 | ],
38 | "development": [
39 | "last 1 chrome version",
40 | "last 1 firefox version",
41 | "last 1 safari version"
42 | ]
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/phoenixia/src/Screens/Main/MainContainer.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import MainPresenter from "./MainPresenter";
3 |
4 | export default class extends React.Component {
5 | state = {
6 | time: 0,
7 | error: null,
8 | timetable: 0
9 | };
10 |
11 | leftButtonClick = () => {
12 | this.setState(state => ({
13 | timetable: parseInt((state.timetable - 1 + 3) % 3)
14 | }));
15 | };
16 |
17 | rightButtonClick = () => {
18 | this.setState(state => ({
19 | timetable: parseInt((state.timetable + 1) % 3)
20 | }));
21 | };
22 |
23 | componentDidMount() {
24 | let error;
25 | const festival = new Date(2019, 8, 30);
26 |
27 | try {
28 | let now = new Date();
29 | this.setState({ time: festival - now.getTime() });
30 | } catch (e) {
31 | error = e;
32 | this.setState({ error });
33 | } finally {
34 | }
35 | }
36 |
37 | render() {
38 | const { time, error, timetable } = this.state;
39 | console.log(time);
40 |
41 | return (
42 |
49 | );
50 | }
51 | }
52 |
--------------------------------------------------------------------------------
/phoenixia/src/Screens/Main/MainPresenter.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import styled from "styled-components";
3 | import PropTypes from "prop-types";
4 | import FestivalTimer from "../../Components/FestivalTimer";
5 | import LineUp from "../../Components/LineUp";
6 | import Delivery from "../../Components/Delivery";
7 | import TimeTable from "../../Components/TimeTable";
8 |
9 | const Container = styled.div`
10 | height: 100vh;
11 | display: flex;
12 | justify-content: center;
13 | align-items: center;
14 | `;
15 |
16 | const FireWorksContainer = styled.canvas`
17 | width: 100%;
18 | height: 100vh;
19 | position: fixed;
20 | z-index: 0;
21 | `;
22 |
23 | const MainPresenter = ({
24 | time,
25 | error,
26 | timetable,
27 | leftButtonClick,
28 | rightButtonClick
29 | }) => (
30 | <>
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
47 |
48 | >
49 | );
50 |
51 | MainPresenter.propTypes = {
52 | time: PropTypes.number.isRequired,
53 | error: PropTypes.string,
54 | timetable: PropTypes.number.isRequired,
55 | leftButtonClick: PropTypes.func.isRequired,
56 | rightButtonClick: PropTypes.func.isRequired
57 | };
58 |
59 | export default MainPresenter;
60 |
--------------------------------------------------------------------------------
/phoenixia/src/Components/FestivalTimer.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import styled from "styled-components";
3 | import Timer from "react-compound-timer";
4 | import PropTypes from "prop-types";
5 | import { BACKGROUND_COLOR } from "../Constants/Colors";
6 |
7 | const TimerContainer = styled.div`
8 | z-index: 1;
9 | border: 1px solid white;
10 | padding: 25px 30px 10px 30px;
11 | border-radius: 20px;
12 | background-color: ${BACKGROUND_COLOR};
13 |
14 | @media screen and (max-width: 768px) {
15 | padding: 15px 30px 10px 30px;
16 | }
17 | `;
18 |
19 | const TimerText = styled.div`
20 | font-size: 100px;
21 | font-family: "Aldrich", sans-serif !important;
22 |
23 | @media screen and (max-width: 768px) {
24 | font-size: 40px;
25 | }
26 | `;
27 |
28 | const FestivalTimer = ({ time }) => (
29 |
30 |
31 | {time !== 0 ? (
32 |
36 | `${value < 10 ? `0${value}` : value}:`
37 | }
38 | >
39 | {() => (
40 | <>
41 |
42 |
43 |
44 |
46 | `${value < 10 ? `0${value}` : value}`
47 | }
48 | />
49 | >
50 | )}
51 |
52 | ) : null}
53 |
54 |
55 | );
56 |
57 | FestivalTimer.propTypes = {
58 | time: PropTypes.number.isRequired
59 | };
60 |
61 | export default FestivalTimer;
62 |
--------------------------------------------------------------------------------
/phoenixia/README.md:
--------------------------------------------------------------------------------
1 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
2 |
3 | ## Available Scripts
4 |
5 | In the project directory, you can run:
6 |
7 | ### `npm start`
8 |
9 | Runs the app in the development mode.
10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
11 |
12 | The page will reload if you make edits.
13 | You will also see any lint errors in the console.
14 |
15 | ### `npm test`
16 |
17 | Launches the test runner in the interactive watch mode.
18 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
19 |
20 | ### `npm run build`
21 |
22 | Builds the app for production to the `build` folder.
23 | It correctly bundles React in production mode and optimizes the build for the best performance.
24 |
25 | The build is minified and the filenames include the hashes.
26 | Your app is ready to be deployed!
27 |
28 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
29 |
30 | ### `npm run eject`
31 |
32 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!**
33 |
34 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
35 |
36 | Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
37 |
38 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
39 |
40 | ## Learn More
41 |
42 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
43 |
44 | To learn React, check out the [React documentation](https://reactjs.org/).
45 |
46 | ### Code Splitting
47 |
48 | This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
49 |
50 | ### Analyzing the Bundle Size
51 |
52 | This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
53 |
54 | ### Making a Progressive Web App
55 |
56 | This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
57 |
58 | ### Advanced Configuration
59 |
60 | This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
61 |
62 | ### Deployment
63 |
64 | This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
65 |
66 | ### `npm run build` fails to minify
67 |
68 | This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify
69 |
--------------------------------------------------------------------------------
/phoenixia/src/Components/Header.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import styled from "styled-components";
3 | import {
4 | TINT_COLOR,
5 | SCH_LOGO_COLOR_THR,
6 | SCH_LOGO_COLOR_ONE,
7 | SCH_LOGO_COLOR_TWO
8 | } from "../Constants/Colors";
9 | import AnchorLink from "react-anchor-link-smooth-scroll";
10 |
11 | const HeaderContainer = styled.header`
12 | width: 100%;
13 | height: 80px;
14 | flex-direction: row;
15 | display: flex;
16 | align-items: center;
17 | border-bottom: 1px solid;
18 | border-bottom-color: white;
19 | margin-bottom: 10px;
20 | position: fixed;
21 | top: 0;
22 | z-index: 2;
23 |
24 | @media screen and (max-width: 768px) {
25 | flex: 1;
26 | height: 60px;
27 | }
28 | `;
29 |
30 | const HeaderTitleContainer = styled.div`
31 | display: flexbox;
32 | flex: 7;
33 | padding-left: 40px;
34 |
35 | @media screen and (max-width: 768px) {
36 | flex: 1;
37 | padding-left: 5px;
38 | }
39 |
40 | @media (min-width: 1300px) {
41 | padding-left: 60px;
42 | }
43 | `;
44 |
45 | const HeaderTitleText = styled.span`
46 | font-size: 24px;
47 | font-weight: 700;
48 | background-color: ${props => props.color};
49 | padding: 10px;
50 |
51 | @media screen and (max-width: 768px) {
52 | font-size: 14px;
53 | padding: 5px;
54 | }
55 | `;
56 |
57 | const NavContainer = styled.div`
58 | align-items: center;
59 | justify-content: center;
60 | display: flexbox;
61 | flex: 3;
62 |
63 | @media screen and (max-width: 768px) {
64 | flex: 1;
65 | }
66 | `;
67 |
68 | const NavItem = styled(AnchorLink)`
69 | padding: 0px 10px;
70 |
71 | @media screen and (max-width: 768px) {
72 | padding: 0px 5px;
73 | }
74 | `;
75 |
76 | const NavItemText = styled.span`
77 | font-size: 16px;
78 | :visited {
79 | color: ${TINT_COLOR};
80 | }
81 | :hover {
82 | color: ${SCH_LOGO_COLOR_THR};
83 | }
84 |
85 | @media screen and (max-width: 768px) {
86 | font-size: 10px;
87 | }
88 | `;
89 |
90 | export default () => (
91 |
92 |
93 | 2019
94 |
95 | 피닉시아
96 |
97 | 축제
98 |
99 |
100 |
101 | 타이머
102 |
103 |
104 | 라인업
105 |
106 |
107 | 배달음식
108 |
109 |
110 | 시간표
111 |
112 |
113 |
114 | );
115 |
--------------------------------------------------------------------------------
/phoenixia/src/Components/LineUp.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import styled from "styled-components";
3 | import {
4 | SCH_LOGO_COLOR_ONE,
5 | SCH_LOGO_COLOR_TWO,
6 | SCH_LOGO_COLOR_THR
7 | } from "../Constants/Colors";
8 | import LineUpDetail from "./LineUpDetail";
9 | import BOL4 from "../assets/Images/BOL4.jpeg";
10 | import YANGDALL from "../assets/Images/YANGDALL.jpg";
11 | import TENCM from "../assets/Images/10CM.jpg";
12 | import KIMNY from "../assets/Images/KIMNY.jpeg";
13 | import ZICO from "../assets/Images/ZICO.jpeg";
14 | import DJJOEY from "../assets/Images/DJJOEY.jpg";
15 |
16 | const LineUpContainer = styled.div`
17 | display: flex;
18 | width: 100%;
19 | height: 100%;
20 | justify-content: center;
21 | align-items: center;
22 | flex-direction: row;
23 | z-index: 1;
24 |
25 | @media screen and (max-width: 768px) {
26 | flex-direction: column;
27 | height: 76%;
28 | }
29 | `;
30 |
31 | const DayLineUpContainer = styled.div`
32 | flex: 1;
33 | margin: 5px 30px;
34 | padding: 10px;
35 |
36 | @media screen and (max-width: 768px) {
37 | width: 70%;
38 | height: 100px;
39 | margin: 5px 0px;
40 | }
41 | `;
42 |
43 | const DayTextContainer = styled.div`
44 | margin: 15px 0px;
45 | padding: 10px;
46 | border-radius: 10px;
47 | background-color: ${props => props.color};
48 |
49 | @media screen and (max-width: 768px) {
50 | margin: 5px 0px;
51 | padding: 5px;
52 | }
53 | `;
54 |
55 | const DayText = styled.h2`
56 | text-align: center;
57 | font-size: 24px;
58 | font-weight: 700;
59 |
60 | @media screen and (max-width: 768px) {
61 | font-size: 18px;
62 | }
63 | `;
64 |
65 | const DetailContainer = styled.div`
66 | display: flex;
67 | flex-direction: column;
68 | border: 3px solid ${props => props.color};
69 | border-radius: 10px;
70 | height: 400px;
71 | justify-content: center;
72 | align-items: center;
73 |
74 | @media screen and (max-width: 768px) {
75 | height: 100px;
76 | flex-direction: row;
77 | border: 2px solid ${props => props.color};
78 | }
79 | `;
80 |
81 | const LineUp = () => (
82 |
83 |
84 |
85 | Day 1
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 | Day 2
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 | Day 3
104 |
105 |
106 |
107 |
108 |
109 |
110 |
111 | );
112 |
113 | export default LineUp;
114 |
--------------------------------------------------------------------------------
/phoenixia/src/Components/Delivery.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import styled from "styled-components";
3 | import { NearDeliveryData, FarDeliveryData } from "../Constants/DeliveryData";
4 |
5 | const DeliveryContainer = styled.div`
6 | display: flex;
7 | width: 100%;
8 | height: 100%;
9 | justify-content: center;
10 | align-items: center;
11 | flex-direction: row;
12 | z-index: 1;
13 |
14 | @media screen and (max-width: 768px) {
15 | flex-direction: column;
16 | height: 76%;
17 | }
18 | `;
19 |
20 | const DeliveryDetailContainer = styled.div`
21 | flex: 1;
22 | margin: 5px 30px;
23 |
24 | @media screen and (max-width: 768px) {
25 | width: 70%;
26 | height: 100px;
27 | margin: 5px 0px;
28 | }
29 | `;
30 |
31 | const TextContainer = styled.div`
32 | margin: 15px 0px;
33 | padding-bottom: 10px;
34 |
35 | @media screen and (max-width: 768px) {
36 | margin: 5px 0px;
37 | padding-bottom: 5px;
38 | }
39 | `;
40 |
41 | const Text = styled.h2`
42 | text-align: center;
43 | font-size: 24px;
44 | font-weight: 700;
45 |
46 | @media screen and (max-width: 768px) {
47 | font-size: 18px;
48 | }
49 | `;
50 |
51 | const DetailContainer = styled.div`
52 | display: flex;
53 | height: 600px;
54 | flex-direction: column;
55 | align-items: center;
56 | overflow: auto;
57 |
58 | -ms-overflow-style: none;
59 | &::-webkit-scrollbar {
60 | display: none !important;
61 | }
62 |
63 | @media screen and (max-width: 768px) {
64 | height: 180px;
65 | }
66 |
67 | @media (min-width: 1300px) {
68 | height: 450px;
69 | }
70 | `;
71 |
72 | const DataContainer = styled.div`
73 | width: 100%;
74 | height: 30px;
75 | display: inline-block;
76 | font-size: 20px;
77 | margin: 7px 0px;
78 | text-align: center;
79 |
80 | @media screen and (max-width: 768px) {
81 | font-size: 12px;
82 | margin: 4px 0px;
83 | }
84 | `;
85 |
86 | const NameContainer = styled.div`
87 | display: inline-block;
88 | padding: 5px;
89 | border: 1px solid white;
90 | width: 35%;
91 | border-radius: 5px;
92 | margin-right: 5px;
93 |
94 | @media screen and (max-width: 768px) {
95 | width: 50%;
96 | margin-right: 2px;
97 | }
98 | `;
99 |
100 | const NumberContainer = styled.div`
101 | display: inline-block;
102 | border: 1px solid white;
103 | padding: 5px;
104 | border-radius: 5px;
105 | width: 45%;
106 | `;
107 |
108 | const WarningTitleContainer = styled.div`
109 | padding-top: 40px;
110 | text-align: center;
111 | font-weight: 600;
112 | font-size: 18px;
113 |
114 | @media screen and (max-width: 768px) {
115 | padding-top: 20px;
116 | font-size: 14px;
117 | }
118 | `;
119 |
120 | const WarningContainer = styled.div`
121 | text-align: center;
122 | font-size: 14px;
123 | padding-top: 10px;
124 |
125 | @media screen and (max-width: 768px) {
126 | font-size: 10px;
127 | padding-top: 5px;
128 | }
129 | `;
130 |
131 | const Delivery = () => (
132 |
133 |
134 |
135 | 학교 근처 배달되는 치킨 피자
136 |
137 |
138 | {NearDeliveryData.map(data => (
139 |
140 |
141 | {data.name}
142 |
143 |
144 | {data.number}
145 |
146 |
147 | ))}
148 |
149 |
150 |
151 |
152 | 멀지만 배달 오는 곳
153 |
154 |
155 | {FarDeliveryData.map(data => (
156 |
157 |
158 | {data.name}
159 |
160 |
161 | {data.number}
162 |
163 |
164 | ))}
165 | 주의사항
166 |
167 | 2018년 12월 13일 기준이며 배달비가 있을 수 있습니다.
168 |
169 |
170 |
171 |
172 | );
173 |
174 | export default Delivery;
175 |
--------------------------------------------------------------------------------
/phoenixia/src/Components/TimeTable.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import PropTypes from "prop-types";
3 | import styled from "styled-components";
4 | import {
5 | DAY_ONE_TIMETABLE,
6 | DAY_TWO_TIMETABLE,
7 | DAY_THR_TIMETABLE,
8 | STD_UNION_TIMETABLE,
9 | PHOENIX_SQUARE_TIMETABLE,
10 | COMMON_TIMETABLE
11 | } from "../Constants/TimeTableData";
12 | import { SCH_LOGO_COLOR_TWO } from "../Constants/Colors";
13 |
14 | const Container = styled.div`
15 | z-index: 1;
16 | display: flex;
17 | width: 100%;
18 | justify-content: center;
19 | align-items: center;
20 | `;
21 |
22 | const ButtonContainer = styled.div`
23 | flex: 1.5;
24 | display: flex;
25 | justify-content: center;
26 | align-items: center;
27 |
28 | @media screen and (max-width: 768px) {
29 | flex: 1;
30 | }
31 |
32 | @media (min-width: 1300px) {
33 | flex: 2.5;
34 | }
35 | `;
36 |
37 | const ButtonContent = styled.button`
38 | border: none;
39 | font-size: 40px;
40 | font-weight: 800;
41 | :hover {
42 | color: ${SCH_LOGO_COLOR_TWO};
43 | }
44 |
45 | @media screen and (max-width: 768px) {
46 | font-size: 20px;
47 | }
48 | `;
49 |
50 | const TimeTableContainer = styled.div`
51 | border: 1px solid white;
52 | flex: 7;
53 | padding: 10px;
54 |
55 | @media screen and (max-width: 768px) {
56 | flex: 8;
57 | }
58 |
59 | @media (min-width: 1300px) {
60 | flex: 5;
61 | padding: 5px;
62 | }
63 | `;
64 |
65 | const TimeTableTitle = styled.div`
66 | width: 20%;
67 | font-size: 26px;
68 | font-weight: 600;
69 | padding: 10px 0px;
70 | border-bottom: 2px solid white;
71 | margin-left: 10px;
72 | margin-bottom: 20px;
73 |
74 | @media screen and (max-width: 768px) {
75 | padding: 5px 0px;
76 | width: 30%;
77 | font-size: 16px;
78 | margin-bottom: 5px;
79 | margin-left: 0px;
80 | }
81 |
82 | @media (min-width: 1300px) {
83 | margin-left: 10px;
84 | margin-bottom: 5px;
85 | font-size: 20px;
86 | padding: 5px 0px;
87 | }
88 | `;
89 |
90 | const LocationTitle = styled.div`
91 | font-size: 18px;
92 | padding: 10px 0px;
93 | margin-left: 20px;
94 |
95 | @media screen and (max-width: 768px) {
96 | font-size: 14px;
97 | margin-left: 5px;
98 | }
99 |
100 | @media (min-width: 1300px) {
101 | margin-left: 10px;
102 | padding: 5px 0px;
103 | font-size: 16px;
104 | }
105 | `;
106 |
107 | const TimeTableContent = styled.div`
108 | display: flex;
109 | flex: 1;
110 | flex-direction: row;
111 | justify-content: center;
112 | align-items: center;
113 | text-align: center;
114 | `;
115 |
116 | const TimeTableTimeText = styled.div`
117 | flex: 1;
118 | padding: 10px 0px;
119 | border: 1px solid white;
120 | border-radius: 5px;
121 | margin: 5px 10px;
122 |
123 | @media screen and (max-width: 768px) {
124 | font-size: 10px;
125 | padding: 5px 5px;
126 | margin: 5px 0px;
127 | }
128 |
129 | @media (min-width: 1300px) {
130 | font-size: 12px;
131 | }
132 | `;
133 |
134 | const TimeTableContentText = styled.div`
135 | flex: 1;
136 | padding: 10px 0px;
137 | border: 1px solid white;
138 | border-radius: 5px;
139 | margin: 5px 10px;
140 |
141 | @media screen and (max-width: 768px) {
142 | font-size: 10px;
143 | padding: 5px 0px;
144 | margin: 5px 0x;
145 | flex: 2;
146 | }
147 |
148 | @media (min-width: 1300px) {
149 | font-size: 12px;
150 | }
151 | `;
152 |
153 | const TimeTable = ({ timetable, leftButtonClick, rightButtonClick }) => (
154 |
155 |
156 | {"<"}
157 |
158 |
159 | Day {timetable + 1}
160 | 소운동장
161 | {timetable === 0 ? (
162 | <>
163 | {DAY_ONE_TIMETABLE.map(data => (
164 |
165 | {data.time}
166 |
167 | {data.content}
168 |
169 |
170 | ))}
171 | >
172 | ) : timetable === 1 ? (
173 | <>
174 | {DAY_TWO_TIMETABLE.map(data => (
175 |
176 | {data.time}
177 |
178 | {data.content}
179 |
180 |
181 | ))}
182 | >
183 | ) : (
184 | <>
185 | {DAY_THR_TIMETABLE.map(data => (
186 |
187 | {data.time}
188 |
189 | {data.content}
190 |
191 |
192 | ))}
193 | >
194 | )}
195 | 학생회관
196 | {STD_UNION_TIMETABLE.map(data => (
197 |
198 | {data.time}
199 | {data.content}
200 |
201 | ))}
202 | 피닉스 광장
203 | {PHOENIX_SQUARE_TIMETABLE.map(data => (
204 |
205 | {data.time}
206 | {data.content}
207 |
208 | ))}
209 | 공통
210 | {COMMON_TIMETABLE.map(data => (
211 |
212 | {data.time}
213 | {data.content}
214 |
215 | ))}
216 |
217 |
218 | {">"}
219 |
220 |
221 | );
222 |
223 | TimeTable.propTypes = {
224 | timetable: PropTypes.number.isRequired,
225 | leftButtonClick: PropTypes.func.isRequired,
226 | rightButtonClick: PropTypes.func.isRequired
227 | };
228 |
229 | export default TimeTable;
230 |
--------------------------------------------------------------------------------
/phoenixia/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
15 |
16 |
20 |
21 |
30 | 2019 피닉시아 축제
31 |
32 |
33 |
34 |
35 |
45 |
46 |
172 |
179 |
180 |
181 |
--------------------------------------------------------------------------------