Skip to content
Snippets Groups Projects
Commit 9d6768ac authored by Hong seok min's avatar Hong seok min
Browse files

완

parent bbbcb869
No related branches found
No related tags found
No related merge requests found
Expand all Show whitespace changes
Inline Side-by-side
Showing
with 4229 additions and 110 deletions
.babelrc 0 → 100644
+ 6
− 0
View file @ 9d6768ac
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}
\ No newline at end of file
.gitignore 0 → 100755
+ 25
− 0
View file @ 9d6768ac
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# production
/build
package-lock.json
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*
README.md
+ 1
− 66
View file @ 9d6768ac
![Build Status](https://gitlab.com/pages/plain-html/badges/master/build.svg) # muiStarterKit
---
Example plain HTML site using GitLab Pages.
Learn more about GitLab Pages at https://pages.gitlab.io and the official
documentation https://docs.gitlab.com/ce/user/project/pages/.
---
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
**Table of Contents** *generated with [DocToc](https://github.com/thlorenz/doctoc)*
- [GitLab CI](#gitlab-ci)
- [GitLab User or Group Pages](#gitlab-user-or-group-pages)
- [Did you fork this project?](#did-you-fork-this-project)
- [Troubleshooting](#troubleshooting)
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
## GitLab CI
This project's static Pages are built by [GitLab CI][ci], following the steps
defined in [`.gitlab-ci.yml`](.gitlab-ci.yml):
```
image: alpine:latest
pages:
stage: deploy
script:
- echo 'Nothing to do...'
artifacts:
paths:
- public
only:
- master
```
The above example expects to put all your HTML files in the `public/` directory.
## GitLab User or Group Pages
To use this project as your user/group website, you will need one additional
step: just rename your project to `namespace.gitlab.io`, where `namespace` is
your `username` or `groupname`. This can be done by navigating to your
project's **Settings**.
Read more about [user/group Pages][userpages] and [project Pages][projpages].
## Did you fork this project?
If you forked this project for your own use, please go to your project's
**Settings** and remove the forking relationship, which won't be necessary
unless you want to contribute back to the upstream project.
## Troubleshooting
1. CSS is missing! That means that you have wrongly set up the CSS URL in your
HTML files. Have a look at the [index.html] for an example.
[ci]: https://about.gitlab.com/gitlab-ci/
[index.html]: https://gitlab.com/pages/plain-html/blob/master/public/index.html
[userpages]: https://docs.gitlab.com/ce/user/project/pages/introduction.html#user-or-group-pages
[projpages]: https://docs.gitlab.com/ce/user/project/pages/introduction.html#project-pages
index.html 0 → 100644
+ 12
− 0
View file @ 9d6768ac
<!doctype html>
<html>
<head>
<title> muiBasic </title>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
</head>
<body>
<div id="app"></div>
<script src="./app.bundle.js" type="text/javascript"></script>
</body>
</html>
package.json 0 → 100644
+ 37
− 0
View file @ 9d6768ac
{
"name": "muibasic_starterkit",
"version": "1.0.0",
"description": "Boiler plate for MaterialUI Development",
"main": "webpack.config.js",
"dependencies": {
"@emotion/react": "^11.9.3",
"@emotion/styled": "^11.9.3",
"@mui/icons-material": "^5.13.7",
"@mui/material": "^5.8.6"
},
"devDependencies": {
"@babel/cli": "^7.18.6",
"@babel/core": "^7.18.6",
"@babel/plugin-proposal-class-properties": "^7.18.6",
"@babel/preset-env": "^7.18.6",
"@babel/preset-react": "^7.18.6",
"babel-loader": "^8.2.5",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"webpack": "^5.73.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.13.2"
},
"scripts": {
"start": "webpack-dev-server --open --mode development --port 3000",
"build": "webpack --mode development",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"Material",
"UI",
"ReactJS"
],
"author": "Seok Min Hong",
"license": "MIT"
}
public/app.bundle.js 0 → 100644
+ 3786
− 0
View file @ 9d6768ac
This diff is collapsed.
public/index.html
+ 10
− 20
View file @ 9d6768ac
<!DOCTYPE html> <!doctype html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <title> muiBasic </title>
<meta name="generator" content="GitLab Pages"> <meta charset="UTF-8"/>
<title>Plain HTML site using GitLab Pages</title> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<link rel="stylesheet" href="style.css">
</head> </head>
<body> <body>
<div class="navbar"> <div id="app"></div>
<a href="https://pages.gitlab.io/plain-html/">Plain HTML Example</a> <script src="./app.bundle.js" type="text/javascript"></script>
<a href="https://gitlab.com/pages/plain-html/">Repository</a>
<a href="https://gitlab.com/pages/">Other Examples</a>
</div>
<h1>Hello World!</h1>
<p>
This is a simple plain-HTML website on GitLab Pages, without any fancy static site generator.
</p>
</body> </body>
</html> </html>
public/style.css deleted 100644 → 0
+ 0
− 24
View file @ bbbcb869
body {
font-family: sans-serif;
margin: auto;
max-width: 1280px;
}
.navbar {
background-color: #313236;
border-radius: 2px;
max-width: 800px;
}
.navbar a {
color: #aaa;
display: inline-block;
font-size: 15px;
padding: 10px;
text-decoration: none;
}
.navbar a:hover {
color: #ffffff;
}
src/App.js 0 → 100644
+ 77
− 0
View file @ 9d6768ac
import React from 'react';
import MusicList from './MusicList';
import music_list from './data';
import SearchPage from './SearchPage';
import {Box, Tabs, Tab, Typography, AppBar, CssBaseline} from '@mui/material';
import Favorites from './Favorites';
export default function App () {
const [currentTab, setCurrentTab] = React.useState(0);
const [searchResult, setSearchResult] = React.useState([]);
const [favoriteList, setFavoriteList] = React.useState([]);
const [likes, setLikes] = React.useState({});
const handleTabChange = (event, newValue) => {
setCurrentTab(newValue);
}
const addToFavoriteList = (item) => {
setFavoriteList((prevList) => [...prevList, item]);
};
const handleLikes = (id) => {
const updatedLikes = { ...likes, [id]: !likes[id] };
setLikes(updatedLikes);
};
const removeFromFavoriteList = (id) => {
setFavoriteList((prevList) => prevList.filter((item) => item.collectionId !== id));
};
return (
<React.Fragment>
<AppBar title="Hong seokmin" position="fixed">
<Typography align="center" variant="h3" color="inherit">Hong Seok Min </Typography>
</AppBar>
<div style={{height: 60, width: '100%'}}></div>
{/*<MusicList list={music_list}>
</MusicList>*/}
{/*<SearchPage/>*/}
<Box sx={{borderBottom: 1, borderColor: 'divider'}}>
<Tabs value={currentTab} onChange={handleTabChange} aria-label='basic tabs'centered>
<Tab label='Search Music' value={0}/>
<Tab label='Favorite' value={1}/>
<Tab label='More Contents' value={2}/>
</Tabs>
</Box>
{ currentTab === 0 && (
<SearchPage
list={searchResult}
onSearch={setSearchResult}
favoriteList={favoriteList}
addToFavoriteList={addToFavoriteList}
likes={likes}
handleLikes={handleLikes}
/>
)}
{/* { currentTab == 1 && <Typography align='center' variant='h2'> Item Two</Typography>} */}
{currentTab === 1 && (
<Favorites
favoriteList={favoriteList}
addToFavoriteList={addToFavoriteList}
likes={likes}
handleLikes={handleLikes}
removeFromFavoriteList={removeFromFavoriteList}
/>
)}
{ currentTab == 2 && <Typography align='center' variant='h2'> Item Three</Typography>}
</React.Fragment>
)
}
src/Favorites.js 0 → 100644
+ 49
− 0
View file @ 9d6768ac
import React from "react";
import { Card, CardContent, CardActions, Typography, IconButton } from "@mui/material";
import { Favorite, FavoriteBorder } from "@mui/icons-material";
import { useState } from "react";
const styles = {
content: {},
layout: {
display: 'flex',
justifyContent: 'center'
},
card: {
minWidth: 275,
maxWidth: 600,
marginButtom: "20pt",
marginLeft: 'auto',
marginRight: 'auto',
},
}
export default function Favorites ({favoriteList, likes, handleLikes, removeFromFavoriteList}) {
const [favoriteLikes, setFavoriteLikes] = useState(likes);
const toggleFavorite = (id) => {
const updatedLikes = { ...favoriteLikes, [id]: !favoriteLikes[id] };
setFavoriteLikes(updatedLikes);
handleLikes(id);
};
const filteredFavoriteList = favoriteList.filter((item) => favoriteLikes[item.collectionId] === true);
return (
<div>
{filteredFavoriteList.map((item) => (
<Card sx={styles.card} key={item.collectionId}>
<CardContent>
<Typography variant="subtitle1">{item.artisName}</Typography>
<Typography variant="subtitle2">{item.collectionCensoredName}</Typography>
</CardContent>
<CardActions>
<IconButton onClick={() => toggleFavorite(item.collectionId)}>
{favoriteLikes[item.collectionId] ? <Favorite /> : <FavoriteBorder />}
</IconButton>
</CardActions>
</Card>
))}
</div>
);
}
src/MusicList.js 0 → 100644
+ 69
− 0
View file @ 9d6768ac
import React from "react";
import { Card, CardContent, CardActions, Typography, IconButton } from "@mui/material";
import { Favorite, FavoriteBorder } from "@mui/icons-material";
import SnackMsg from "./SnackMsg";
const styles = {
content: {},
layout: {
display: 'flex',
justifyContent: 'center'
},
card: {
minWidth: 275,
maxWidth: 600,
marginButtom: "20pt",
marginLeft: 'auto',
marginRight: 'auto',
},
};
export default function MusicList({ list, favoriteList, addToFavoriteList, likes, handleLikes }) {
let [snackState, setSnackState] = React.useState({ open: false, msg: '' });
const toggleFavorite = (id, name) => () => {
const updatedLikes = { ...likes, [id]: !likes[id] };
handleLikes(id);
setSnackState({ ...snackState, open: true, msg: `${name} is clicked` });
if (updatedLikes[id]) {
if (!favoriteList.find((item) => item.collectionId === id)) {
addToFavoriteList(list.find((item) => item.collectionId === id));
}
} else {
const updatedFavoriteList = favoriteList.filter((item) => item.collectionId !== id);
addToFavoriteList(updatedFavoriteList);
}
};
const handleSnackbarClose = (event, reason) => {
if (reason === 'clickaway') {
return;
}
setSnackState({ open: false, msg: '' });
};
return (
<div>
{list.map((item) => {
return (
<Card sx={styles.card} key={item.collectionId}>
<CardContent>
<Typography variant="subtitle1">{item.artisName}</Typography>
<Typography variant="subtitle2">{item.collectionCensoredName}</Typography>
</CardContent>
<CardActions>
<IconButton onClick={toggleFavorite(item.collectionId, item.collectionName)}>
{likes[item.collectionId] === true ? <Favorite /> : <FavoriteBorder />}
<SnackMsg open={snackState.open} message={snackState.msg} onClose={handleSnackbarClose} />
</IconButton>
</CardActions>
</Card>
);
})}
</div>
);
}
src/SearchPage.js 0 → 100644
+ 46
− 0
View file @ 9d6768ac
import React from "react";
import { Button, TextField } from "@mui/material";
import MusicList from "./MusicList";
export default function SearchPage ({list, onSearch, favoriteList, addToFavoriteList, likes, handleLikes }) {
const [searchWord, setSearchWord] = React.useState('');
const handleSearch = (event) => {
event.preventDefault();
console.log(searchWord);
setSearchWord('');
fetch(`http://itunes.apple.com/search?term=${searchWord}&entity=album`)
.then(r => r.json()).then(r => {
console.log(r);
onSearch(r.results);
setSearchWord('');
}).catch(e => console.log('error when search musician'));
}
const handleSearchTextChange = (event) => {
setSearchWord(event.target.value);
}
return (
<React.Fragment>
<form style= {{display: 'flex', marginTop : 20, marginbottom : 15}}>
<div style={{display : 'flex', marginLeft : 'auto', marginRight : 'auto',}}>
<TextField variant='outlined' label="Music Album Search" type='search' style={{width : 450}}
onChange={handleSearchTextChange} value={searchWord}>
</TextField>
<Button variant="contained" color='primary'
type='submit' onClick={handleSearch}
style={{marginLeft : 20}}>
Search
</Button>
</div>
</form>
<MusicList list={list}
favoriteList={favoriteList}
addToFavoriteList={addToFavoriteList}
likes={likes}
handleLikes={handleLikes} >
</MusicList>
</React.Fragment>
)
}
src/SnackMsg.js 0 → 100644
+ 18
− 0
View file @ 9d6768ac
import React from "react";
import { Alert, Snackbar } from "@mui/material";
const SnackMsg = (props) => {
return (
<Snackbar
open={props.open}
anchorOrigin={{vertical : 'bottom', horizontal : 'right'}}
autoHideDuration={3000}
onClose={props.onClose}
message={props.message}>
</Snackbar>
);
}
export default SnackMsg;
\ No newline at end of file
src/data.js 0 → 100644
+ 60
− 0
View file @ 9d6768ac
This diff is collapsed.
src/index.js 0 → 100644
+ 5
− 0
View file @ 9d6768ac
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App/>, document.getElementById('app'));
webpack.config.js 0 → 100644
+ 28
− 0
View file @ 9d6768ac
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: {
app: './src/index.js'
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'public')
},
module: {
rules: [{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}]
},
devServer: {
hot: true,
allowedHosts: 'all',
},
plugins: [
new webpack.HotModuleReplacementPlugin()
]
};
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment

feedback to tooltime@ajou.ac.kr or hwan@ajou.ac.kr