2021-1-capstone-design1 / MAC_Project1

Go to a project
Toggle navigation Toggle navigation pinning
이정민
3400528a 1 parent ecbbbfc8

react 세팅

Inline Side-by-side
Showing 14 changed files with 212 additions and 0 deletions
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*
1 +{
2 + "name": "website",
3 + "version": "0.1.0",
4 + "private": true,
5 + "dependencies": {
6 + "@testing-library/jest-dom": "^5.11.4",
7 + "@testing-library/react": "^11.1.0",
8 + "@testing-library/user-event": "^12.1.10",
9 + "react": "^17.0.2",
10 + "react-dom": "^17.0.2",
11 + "react-scripts": "4.0.3",
12 + "styled-components": "^5.2.3",
13 + "web-vitals": "^1.0.1"
14 + },
15 + "scripts": {
16 + "start": "react-scripts start",
17 + "build": "react-scripts build",
18 + "test": "react-scripts test",
19 + "eject": "react-scripts eject"
20 + },
21 + "eslintConfig": {
22 + "extends": [
23 + "react-app",
24 + "react-app/jest"
25 + ]
26 + },
27 + "browserslist": {
28 + "production": [
29 + ">0.2%",
30 + "not dead",
31 + "not op_mini all"
32 + ],
33 + "development": [
34 + "last 1 chrome version",
35 + "last 1 firefox version",
36 + "last 1 safari version"
37 + ]
38 + }
39 +}
No preview for this file type
1 +<!DOCTYPE html>
2 +<html lang="en">
3 + <head>
4 + <meta charset="utf-8" />
5 + <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
6 + <meta name="viewport" content="width=device-width, initial-scale=1" />
7 + <meta name="theme-color" content="#000000" />
8 + <meta
9 + name="description"
10 + content="Web site created using create-react-app"
11 + />
12 + <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13 + <!--
14 + manifest.json provides metadata used when your web app is installed on a
15 + user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16 + -->
17 + <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18 + <!--
19 + Notice the use of %PUBLIC_URL% in the tags above.
20 + It will be replaced with the URL of the `public` folder during the build.
21 + Only files inside the `public` folder can be referenced from the HTML.
22 +
23 + Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24 + work correctly both with client-side routing and a non-root public URL.
25 + Learn how to configure a non-root public URL by running `npm run build`.
26 + -->
27 + <title>React App</title>
28 + </head>
29 + <body>
30 + <noscript>You need to enable JavaScript to run this app.</noscript>
31 + <div id="root"></div>
32 + <!--
33 + This HTML file is a template.
34 + If you open it directly in the browser, you will see an empty page.
35 +
36 + You can add webfonts, meta tags, or analytics to this file.
37 + The build step will place the bundled scripts into the <body> tag.
38 +
39 + To begin the development, run `npm start` or `yarn start`.
40 + To create a production bundle, use `npm run build` or `yarn build`.
41 + -->
42 + </body>
43 +</html>
1 +{
2 + "short_name": "React App",
3 + "name": "Create React App Sample",
4 + "icons": [
5 + {
6 + "src": "favicon.ico",
7 + "sizes": "64x64 32x32 24x24 16x16",
8 + "type": "image/x-icon"
9 + },
10 + {
11 + "src": "logo192.png",
12 + "type": "image/png",
13 + "sizes": "192x192"
14 + },
15 + {
16 + "src": "logo512.png",
17 + "type": "image/png",
18 + "sizes": "512x512"
19 + }
20 + ],
21 + "start_url": ".",
22 + "display": "standalone",
23 + "theme_color": "#000000",
24 + "background_color": "#ffffff"
25 +}
1 +# https://www.robotstxt.org/robotstxt.html
2 +User-agent: *
3 +Disallow:
1 +import Header from "./components/Header";
2 +
3 +function App() {
4 + return (
5 + <div className="App">
6 + <Header />
7 + </div>
8 + );
9 +}
10 +
11 +export default App;
1 +import styled from "styled-components";
2 +
3 +const Header = () => {
4 + return <Container></Container>;
5 +};
6 +
7 +const Container = styled.div`
8 + width: 100%;
9 + height: 4rem;
10 + background-color: white;
11 + box-shadow: ${({ theme }) => theme.boxShadow.normal};
12 +`;
13 +
14 +export default Header;
1 +body {
2 + margin: 0;
3 + font-size: 10px;
4 + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
5 + 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
6 + sans-serif;
7 + -webkit-font-smoothing: antialiased;
8 + -moz-osx-font-smoothing: grayscale;
9 + background-color: #f7f7f7;
10 +}
11 +
12 +code {
13 + font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
14 + monospace;
15 +}
1 +import React from "react";
2 +import ReactDOM from "react-dom";
3 +import App from "./App";
4 +import { theme } from "./theme";
5 +import "./index.css";
6 +import { ThemeProvider } from "styled-components";
7 +
8 +ReactDOM.render(
9 + <React.StrictMode>
10 + <ThemeProvider theme={theme}>
11 + <App />
12 + </ThemeProvider>
13 + </React.StrictMode>,
14 + document.getElementById("root")
15 +);
1 +export const theme = {
2 + color: {
3 + purple: "#8661de",
4 + blue: "#00bac7",
5 + gray: "#f6f6f6",
6 + green: "#07b495",
7 + lightGreen: "#99ecdd",
8 + darkGray: "#54595d",
9 + },
10 + boxShadow: {
11 + normal: "0 3px 8px 0 rgb(0 0 0 / 10%)",
12 + purple: "0 3px 8px 0 #d6c9ff",
13 + blue: "0 3px 8px 0 #b3e2e6",
14 + },
15 +};
16 +
17 +const customMediaQuery = (maxWidth) => `@media (max-width: ${maxWidth}px)`;
18 +
19 +export const media = {
20 + custom: customMediaQuery,
21 + pc: customMediaQuery(1440),
22 + tablet: customMediaQuery(768),
23 + mobile: customMediaQuery(576),
24 +};
This diff could not be displayed because it is too large.