├── .gitignore
├── .prettierrc
├── public
    ├── favicon.ico
    ├── robots.txt
    ├── airpods-max.mp4
    └── index.html
├── web-test-runner.config.js
├── src
    ├── App.test.tsx
    ├── index.tsx
    ├── routes
    │   ├── NotFound.tsx
    │   ├── Home.tsx
    │   └── Mac.tsx
    ├── App.tsx
    ├── components
    │   ├── Menu.tsx
    │   └── Menu.css
    └── logo.svg
├── .eslintrc.js
├── snowpack.config.js
├── tsconfig.json
├── README.md
├── LICENSE
├── types
    └── static.d.ts
└── package.json


/.gitignore:
--------------------------------------------------------------------------------
1 | .build
2 | build
3 | web_modules
4 | node_modules


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "singleQuote": true,
3 |   "trailingComma": "all"
4 | }
5 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wonderlandpark/apple-clone/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/public/airpods-max.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wonderlandpark/apple-clone/HEAD/public/airpods-max.mp4


--------------------------------------------------------------------------------
/web-test-runner.config.js:
--------------------------------------------------------------------------------
1 | // NODE_ENV=test - Needed by "@snowpack/web-test-runner-plugin"
2 | process.env.NODE_ENV = 'test';
3 | 
4 | module.exports = {
5 |   plugins: [require('@snowpack/web-test-runner-plugin')()],
6 | };
7 | 


--------------------------------------------------------------------------------
/src/App.test.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | import { render } from '@testing-library/react'
 3 | import { expect } from 'chai'
 4 | import App from './App'
 5 | 
 6 | describe('<App>', () => {
 7 |   it('renders learn react link', () => {
 8 |     const { getByText } = render(<App />)
 9 |     const linkElement = getByText(/learn react/i)
10 |     expect(document.body.contains(linkElement))
11 |   })
12 | })
13 | 


--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import ReactDOM from 'react-dom'
 3 | import App from './App'
 4 | 
 5 | import 'bootstrap/dist/css/bootstrap.css'
 6 | 
 7 | ReactDOM.render(
 8 |   <React.StrictMode>
 9 |     <App />
10 |   </React.StrictMode>,
11 |   document.getElementById('root')
12 | )
13 | 
14 | // Hot Module Replacement (HMR) - Remove this snippet to remove HMR.
15 | // Learn more: https://www.snowpack.dev/#hot-module-replacement
16 | if (import.meta.hot) {
17 |   import.meta.hot.accept()
18 | }
19 | 


--------------------------------------------------------------------------------
/src/routes/NotFound.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { Container, Input } from 'reactstrap'
 3 | 
 4 | export default function NotFound () {
 5 |   return (
 6 |     <Container className='text-center' style={{ paddingTop: '50px' }}>
 7 |       <h1 style={{ fontSize: 48, fontWeight: 600 }}>영어할 줄 아세요?</h1>
 8 |       <h3>찾으시는 페이지가 없는 듯하네요.</h3>
 9 |       <div className='search' style={{ padding: '50px 380px' }}>
10 |         <Input style={{ padding: '18px' }} placeholder='영어로만 찾아볼 수 있어요' bsSize='lg'/>
11 |       </div>
12 |     </Container>
13 |   )
14 | }
15 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   env: {
 3 |     browser: true,
 4 |     commonjs: true,
 5 |     es6: true,
 6 |     node: true
 7 |   },
 8 |   extends: ['standard', 'standard-react'],
 9 |   globals: {
10 |     Atomics: 'readonly',
11 |     SharedArrayBuffer: 'readonly'
12 |   },
13 |   parser: 'babel-eslint',
14 |   parserOptions: {
15 |     ecmaVersion: 2021
16 |   },
17 |   rules: {
18 |     semi: ['error', 'never'],
19 |     indent: [
20 |       'error',
21 |       2,
22 |       {
23 |         SwitchCase: 1,
24 |         VariableDeclarator: 'first'
25 |       }
26 |     ]
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------
/snowpack.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import("snowpack").SnowpackUserConfig } */
 2 | module.exports = {
 3 |   mount: {
 4 |     public: '/',
 5 |     src: '/_dist_'
 6 |   },
 7 |   plugins: [
 8 |     '@snowpack/plugin-react-refresh',
 9 |     '@snowpack/plugin-dotenv',
10 |     '@snowpack/plugin-typescript'
11 |   ],
12 |   install: [
13 |     /* ... */
14 |   ],
15 |   installOptions: {
16 |     /* ... */
17 |   },
18 |   devOptions: {
19 |     /* ... */
20 |   },
21 |   buildOptions: {
22 |     /* ... */
23 |   },
24 |   proxy: {
25 |     /* ... */
26 |   },
27 |   alias: {
28 |     /* ... */
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------
/src/App.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { BrowserRouter, Route, Switch } from 'react-router-dom'
 3 | import Menu from './components/Menu'
 4 | 
 5 | import Home from './routes/Home'
 6 | import Mac from './routes/Mac'
 7 | import NotFound from './routes/NotFound'
 8 | 
 9 | function App () {
10 |   return (
11 |     <BrowserRouter>
12 |       <Menu />
13 |       <Switch>
14 |         <Route exact path="/" component={Home}/>
15 |         <Route exact path="/mac" component={Mac} />
16 |         <Route>
17 |           <NotFound />
18 |         </Route>
19 |       </Switch>
20 |     </BrowserRouter>
21 |   )
22 | }
23 | 
24 | export default App
25 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "include": ["src", "types"],
 3 |   "compilerOptions": {
 4 |     "module": "esnext",
 5 |     "target": "esnext",
 6 |     "moduleResolution": "node",
 7 |     "jsx": "preserve",
 8 |     "baseUrl": "./",
 9 |     /* paths - If you configure Snowpack import aliases, add them here. */
10 |     "paths": {},
11 |     /* noEmit - Snowpack builds (emits) files, not tsc. */
12 |     "noEmit": true,
13 |     /* Additional Options */
14 |     "strict": true,
15 |     "skipLibCheck": true,
16 |     "forceConsistentCasingInFileNames": true,
17 |     "resolveJsonModule": true,
18 |     "allowSyntheticDefaultImports": true,
19 |     "importsNotUsedAsValues": "error"
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------
/src/components/Menu.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | import './Menu.css'
 4 | 
 5 | export default function Menu () {
 6 |   return (
 7 |     <nav>
 8 |       <div className='content'>
 9 |         <a className="logo " href="/">
10 |           <img src="https://www.apple.com/ac/globalnav/3/en_US/images/globalnav/apple/image_large.svg" width="45" height="45" alt="" />
11 |         </a>
12 |         <a href="/mac">Mac</a>
13 |         <a href="#">iPad</a>
14 |         <a href="#">iPhone</a>
15 |         <a href="#">Watch</a>
16 |         <a href="#">TV</a>
17 |         <a href="#">Music</a>
18 |         <a href="#">Support</a>
19 |         <a href="#" className="search"></a>
20 |         <a href="#" className="bag"></a>
21 |       </div>
22 |     </nav>
23 |   )
24 | }
25 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # apple-clone
 2 | 
 3 | [애플](https://apple.kr) 클론
 4 | 
 5 | 애플의 여러 사건들을 이용하여 애플 웹페이지를 클론 코딩해보았습니다.
 6 | 
 7 | ## 반응형 디자인
 8 | 
 9 | 이 아닙니다. 구형기기를 지원하지 않는 애플처럼 저는 모바일이나 테블릿을 지원하지 않겠습니다.
10 | ## Available Scripts
11 | 
12 | ### npm start
13 | 
14 | Runs the app in the development mode.
15 | Open http://localhost:8080 to view it in the browser.
16 | 
17 | The page will reload if you make edits.
18 | You will also see any lint errors in the console.
19 | 
20 | ### npm run build
21 | 
22 | Builds a static copy of your site to the `build/` folder.
23 | Your app is ready to be deployed!
24 | 
25 | **For the best production performance:** Add a build bundler plugin like "@snowpack/plugin-webpack" to your `snowpack.config.js` config file.
26 | 
27 | ### npm test
28 | 
29 | Launches the application test runner.
30 | Run with the `--watch` flag (`npm test -- --watch`) to run in interactive watch mode.
31 | 


--------------------------------------------------------------------------------
/src/routes/Home.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { Button, Container } from 'reactstrap'
 3 | 
 4 | export default function Home () {
 5 |   return (
 6 |       <div style={{ position: 'absolute', width: '100%', height: '100%' }}>
 7 |         <video autoPlay muted loop style={{ position: 'absolute', minWidth: '100%', minHeight: '100%', objectFit: 'cover', width: 'auto', height: 'auto' }} id="airpodsMax" src="/airpods-max.mp4" playsInline>
 8 |         </video>
 9 |         <div style={{ textAlign: 'center', position: 'absolute', width: '100%', left: 0, color: "white", paddingTop: '30vh' }}>
10 |           <h1 style={{ fontSize: '7em', fontWeight: 600 }}>Airpods Max</h1>
11 |           <h2 style={{ fontSize: '2em', fontWeight: 600 }}>프리미엄 귀마개.</h2>
12 |           <br/>
13 |           <Button color="light" style={{ borderRadius: 28, color: 'black', padding: '18px 31px' }}>동영상 보기</Button>
14 |           <Button color="light" style={{ borderRadius: 28, marginLeft: '20px', backgroundColor: 'transparent', color: 'white', padding: '18px 31px' }}>더 알아보기</Button>
15 |         </div>
16 |       </div>
17 |   )
18 | }
19 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019 Fred K. Schott
 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 | 


--------------------------------------------------------------------------------
/src/components/Menu.css:
--------------------------------------------------------------------------------
 1 | nav {
 2 |   background: rgba(0,0,0,0.8);
 3 |   backdrop-filter: saturate(100%) blur(20px);
 4 |   height: 44px;
 5 | }
 6 | nav .content {
 7 |   max-width: 1024px;
 8 |   margin: 0 auto;
 9 |   padding-left: calc(max(22px, env(safe-area-inset-left)));
10 |   padding-right: calc(max(22px, env(safe-area-inset-right)));
11 |   display: flex;
12 |   justify-content: space-between;
13 | }
14 | nav .content a {
15 |   position: relative;
16 |   font-size: 14px;
17 |   font-weight: 300;
18 |   letter-spacing: -.01em;
19 |   line-height: 3.14286;
20 |   text-decoration: none;
21 |   opacity: .8;
22 |   color: #f5f5f7;
23 | }
24 | 
25 | nav .content a[href]:hover {
26 |   opacity: 1;
27 | }
28 | 
29 | nav .search {
30 |   background-position: 0 0;
31 |   background-size: 18px 88px;
32 |   background-repeat: no-repeat;
33 |   background-image: url(https://www.apple.com/ac/globalnav/6/en_US/images/be15095f-5a20-57d0-ad14-cf4c638e223a/globalnav_search_image__fca9mfoh8a2q_large.svg);
34 |   width: 18px;
35 |   opacity: .8;
36 | }
37 | 
38 | nav .search:hover {
39 |   opacity: 1;
40 | }
41 | 
42 | nav .bag {
43 |   background-size: 17px 44px;
44 |   background-repeat: no-repeat;
45 |   background-image: url(https://www.apple.com/ac/globalnav/6/en_US/images/be15095f-5a20-57d0-ad14-cf4c638e223a/globalnav_bag_image__bmix8075eg4i_large.svg);
46 |   background-position: center center;
47 |   width: 17px;
48 |   opacity: 0.7;
49 | }
50 | 
51 | nav .bag:hover {
52 |   opacity: 1;
53 | }


--------------------------------------------------------------------------------
/types/static.d.ts:
--------------------------------------------------------------------------------
 1 | /* Use this file to declare any custom file extensions for importing */
 2 | /* Use this folder to also add/extend a package d.ts file, if needed. */
 3 | 
 4 | /* CSS MODULES */
 5 | declare module '*.module.css' {
 6 |   const classes: { [key: string]: string };
 7 |   export default classes;
 8 | }
 9 | declare module '*.module.scss' {
10 |   const classes: { [key: string]: string };
11 |   export default classes;
12 | }
13 | declare module '*.module.sass' {
14 |   const classes: { [key: string]: string };
15 |   export default classes;
16 | }
17 | declare module '*.module.less' {
18 |   const classes: { [key: string]: string };
19 |   export default classes;
20 | }
21 | declare module '*.module.styl' {
22 |   const classes: { [key: string]: string };
23 |   export default classes;
24 | }
25 | 
26 | /* CSS */
27 | declare module '*.css';
28 | declare module '*.scss';
29 | declare module '*.sass';
30 | declare module '*.less';
31 | declare module '*.styl';
32 | 
33 | /* IMAGES */
34 | declare module '*.svg' {
35 |   const ref: string;
36 |   export default ref;
37 | }
38 | declare module '*.bmp' {
39 |   const ref: string;
40 |   export default ref;
41 | }
42 | declare module '*.gif' {
43 |   const ref: string;
44 |   export default ref;
45 | }
46 | declare module '*.jpg' {
47 |   const ref: string;
48 |   export default ref;
49 | }
50 | declare module '*.jpeg' {
51 |   const ref: string;
52 |   export default ref;
53 | }
54 | declare module '*.png' {
55 |   const ref: string;
56 |   export default ref;
57 | }
58 | 
59 | /* CUSTOM: ADD YOUR OWN HERE */
60 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "scripts": {
 3 |     "start": "snowpack dev --reload",
 4 |     "build": "snowpack build --clean",
 5 |     "serve": "serve -s build",
 6 |     "test": "web-test-runner \"src/**/*.test.tsx\"",
 7 |     "eslint": "eslint --fix \"src/**/*.{js,jsx,ts,tsx}\"",
 8 |     "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\"",
 9 |     "lint": "prettier --check \"src/**/*.{js,jsx,ts,tsx}\""
10 |   },
11 |   "dependencies": {
12 |     "bootstrap": "^4.5.3",
13 |     "react": "^17.0.1",
14 |     "react-dom": "^17.0.1",
15 |     "react-router-dom": "^5.2.0",
16 |     "reactstrap": "^8.7.1"
17 |   },
18 |   "devDependencies": {
19 |     "@snowpack/plugin-dotenv": "^2.0.4",
20 |     "@snowpack/plugin-react-refresh": "^2.3.7",
21 |     "@snowpack/plugin-typescript": "^1.1.0",
22 |     "@snowpack/web-test-runner-plugin": "^0.1.4",
23 |     "@testing-library/react": "^11.0.0",
24 |     "@types/chai": "^4.2.13",
25 |     "@types/react": "^16.9.49",
26 |     "@types/react-dom": "^16.9.8",
27 |     "@types/react-router-dom": "^5.1.6",
28 |     "@types/snowpack-env": "^2.3.2",
29 |     "@web/test-runner": "^0.9.7",
30 |     "babel-eslint": "^10.1.0",
31 |     "chai": "^4.2.0",
32 |     "eslint": "^7.14.0",
33 |     "eslint-config-standard": "^16.0.2",
34 |     "eslint-config-standard-jsx": "^10.0.0",
35 |     "eslint-config-standard-react": "^11.0.1",
36 |     "eslint-plugin-import": "^2.22.1",
37 |     "eslint-plugin-node": "^11.1.0",
38 |     "eslint-plugin-promise": "^4.2.1",
39 |     "eslint-plugin-react": "^7.21.5",
40 |     "prettier": "^2.0.5",
41 |     "snowpack": "^2.17.1",
42 |     "typescript": "^4.0.0"
43 |   }
44 | }
45 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="ko">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="description" content="Web site created using create-snowpack-app" />
 8 |     <title>Apple</title>
 9 |     <link rel="stylesheet" href="https://www.apple.com/wss/fonts?family=SF+Pro&amp;v=2" type="text/css">
10 |     <link rel="stylesheet" href="https://www.apple.com/wss/fonts?family=SF+Pro+Icons&amp;v=1" type="text/css">
11 |     <link rel="stylesheet" href="https://www.apple.com/wss/fonts?family=SF+Mono&amp;v=2" type="text/css">
12 |     <link rel="stylesheet" href="https://www.apple.com/wss/fonts?family=Apple+Icons&amp;v=1" type="text/css">
13 |   </head>
14 |   <body>
15 |     <div id="root"></div>
16 |     <noscript>You need to enable JavaScript to run this app.</noscript>
17 |     <script type="module" src="/_dist_/index.js"></script>
18 |     <!--
19 |       This HTML file is a template.
20 |       If you open it directly in the browser, you will see an empty page.
21 | 
22 |       You can add webfonts, meta tags, or analytics to this file.
23 |       The build step will place the bundled scripts into the <body> tag.
24 | 
25 |       To begin the development, run `npm start` or `yarn start`.
26 |       To create a production bundle, use `npm run build` or `yarn build`.
27 |     -->
28 |   </body>
29 | </html>
30 | 
31 | <style>
32 |   * {
33 |     font-family: "SF Pro KR","SF Pro Display","SF Pro Icons","Apple Gothic","HY Gulim","MalgunGothic","HY Dotum","Lexi Gulim","Helvetica Neue","Helvetica","Arial",sans-serif;
34 |   }
35 |   html, body, #root {
36 |     min-height: 100%;
37 |   }
38 | </style>


--------------------------------------------------------------------------------
/src/logo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
2 |   <g fill="#61DAFB">
3 |     <path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4a43.8 43.8 0 00-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9a487.8 487.8 0 00-41.6-50c32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9a467 467 0 00-63.6 11c-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4a44 44 0 0022.5 5.6c27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7a450.4 450.4 0 01-13.5 39.5 473.3 473.3 0 00-27.5-47.4c14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5a532.7 532.7 0 01-24.1 38.2 520.3 520.3 0 01-90.2.1 551.2 551.2 0 01-45-77.8 521.5 521.5 0 0144.8-78.1 520.3 520.3 0 0190.2-.1 551.2 551.2 0 0145 77.8 560 560 0 01-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8a448.8 448.8 0 01-41.2 8 552.4 552.4 0 0027.4-47.8zM421.2 430a412.3 412.3 0 01-27.8-32 619 619 0 0055.3 0c-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9a451.2 451.2 0 01-41-7.9c3.7-12.9 8.3-26.2 13.5-39.5a473.3 473.3 0 0027.5 47.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32a619 619 0 00-55.3 0c9-11.7 18.3-22.4 27.5-32zm-74 58.9a552.4 552.4 0 00-27.4 47.7c-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9a473.5 473.5 0 00-22.2 60.6c-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9a487.8 487.8 0 0041.6 50c-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9a467 467 0 0063.6-11 280 280 0 015.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9a473.5 473.5 0 0022.2-60.6c9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
4 |     <circle cx="420.9" cy="296.5" r="45.7"/>
5 |   </g>
6 | </svg>
7 | 


--------------------------------------------------------------------------------
/src/routes/Mac.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { Container, Row, Col, Button } from 'reactstrap'
 3 | 
 4 | export default function Mac () {
 5 |   return (
 6 |     <div className="main" style={{ background: '#000', minHeight: '100%', paddingTop: '88px' }}>
 7 |       <div className="items" style={{ background: 'rgba(29,29,31,0.6)' }}>
 8 | 
 9 |       </div>
10 |       <Container style={{ color: '#f5f5f7' }}>
11 |         <h1 style={{ background: 'radial-gradient(ellipse at center, #eff1ff 10%, #000 100%)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', fontWeight: 700, fontSize: 70, letterSpacing: 0, textAlign: 'center' }}>이미 도래한<br/>Mac의 미래.</h1>
12 |         <Row style={{ marginTop: '100px', paddingBottom: '80px', backgroundImage: 'url("https://www.apple.com/v/mac/home/aw/images/overview/hero/dark/macbook_air__bfz9o93hnyuq_large.jpg")', backgroundRepeat: 'no-repeat', backgroundPosition: '168px -100px', backgroundSize: '1025px 556px' }}>
13 |           <Col xs="6">
14 |             <span style={{ color: '#f56300', textAlign: 'left' }}>New</span>
15 |             <h2 style={{ fontWeight: 600, fontSize: 56 }}>MacBook English</h2>
16 |             <p style={{ fontSize: 25, fontWeight: 600 }}>English의 흐름을 바꾸다.</p>
17 |             <p style={{ fontSize: 17, fontWeight: 400 }}>₩1,290,000부터</p>
18 |             <p style={{ fontSize: 14, fontWeight: 400, color: '#a1a1a6' }}>출시일은 추후 공개됩니다.</p>
19 |             <p><Button color="primary" style={{ color: '#fff', background: '#2997ff !Important', fontSize: '15px', fontWeight: 400, borderRadius: 22, padding: '10px 20px' }}>구입하기</Button></p>
20 |           </Col>
21 |         </Row>
22 | 
23 |         <Row style={{ paddingBottom: '80px', backgroundImage: 'url("https://www.apple.com//v/mac/home/aw/images/overview/hero/dark/macbook_pro_13__ft1pc3lqwd6y_large.jpg")', backgroundRepeat: 'no-repeat', backgroundPosition: '-50px 70px', backgroundSize: '660px 309px' }}>
24 |           <Col xs="6">
25 | 
26 |           </Col>
27 |           <Col xs="6">
28 |             <span style={{ color: '#f56300', textAlign: 'left' }}>New</span>
29 |             <h2 style={{ fontWeight: 600, fontSize: 56 }}><span style={{ fontSize: 21, fontWeight: 700 }}>13형 모델</span><br/>MacBook Math</h2>
30 |             <p style={{ fontSize: 25, fontWeight: 600 }}>Math중에 수학.</p>
31 |             <p style={{ fontSize: 17, fontWeight: 400 }}>₩1,690,000부터</p>
32 |             <p><Button color="primary" style={{ color: '#fff', background: '#2997ff !Important', fontSize: '15px', fontWeight: 400, borderRadius: 22, padding: '10px 20px' }}>구입하기</Button></p>
33 |           </Col>
34 |         </Row>
35 | 
36 |         <Row style={{ paddingBottom: '80px', backgroundImage: 'url("https://www.apple.com/v/mac/home/aw/images/overview/hero/dark/mac_mini__gc148mlvnziq_large_2x.jpg")', backgroundRepeat: 'no-repeat', backgroundPosition: '500px 51px', backgroundSize: '666px 422px' }}>
37 |           <Col xs="6" >
38 |             <span style={{ color: '#f56300', textAlign: 'left' }}>New</span>
39 |             <h2 style={{ fontWeight: 600, fontSize: 56 }}>Mac Science</h2>
40 |             <p style={{ fontSize: 25, fontWeight: 600 }}>새로운 원소. 어마무시한 가능성.</p>
41 |             <p style={{ fontSize: 17, fontWeight: 400 }}>₩890,000부터</p>
42 |             <p><Button color="primary" style={{ color: '#fff', background: '#2997ff !Important', fontSize: '14px', fontWeight: 400, borderRadius: 22, padding: '10px 20px' }}>구입하기</Button></p>
43 |           </Col>
44 |           <Col xs="6">
45 | 
46 |           </Col>
47 |           
48 |         </Row>
49 |       </Container>
50 |     </div>
51 |   )
52 | }
53 | 


--------------------------------------------------------------------------------