2021-1-capstone-design1 / MAC_Project1

Go to a project
Toggle navigation Toggle navigation pinning
이정민
e991c0f5 1 parent d1e2ee9e

next + ts 세팅

Inline Side-by-side
Showing 23 changed files with 339 additions and 133 deletions
{
"presets": [
"next/babel"
],
"plugins": [
[
"babel-plugin-styled-components",
{
"fileName": true,
"displayName": true,
"pure": true
}
]
]
}
\ No newline at end of file
export const browserslist = ["defaults"];
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# Config
!config/default.json
!config/development.json.sample
config/*.json
# dependencies
/node_modules
/.pnp
.pnp.js
# Next
.next
out
# testing
/coverage
# Logs
npm-debug.log*
# NPM
node_modules/
# production
/build
# Transpiled code
dist
out
.out
# misc
# Dev tools
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
.vscode
.idea
*.swp
*.bak
npm-debug.log*
yarn-debug.log*
yarn-error.log*
node_modules.nosync/
*.env.*
\ No newline at end of file
......
{
"editor.formatOnSave": true,
"prettier.semi": false,
"prettier.trailingComma": "all",
"prettier.singleQuote": true,
"prettier.tslintIntegration": true,
"prettier.tabWidth": 2,
"prettier.printWidth": 120
}
/// <reference types="next" />
/// <reference types="next/types/global" />
/* eslint-disable @typescript-eslint/no-var-requires */
const withBundleAnalyzer = require("@next/bundle-analyzer")({
enabled: process.env.ANALYZE === "true",
});
module.exports = withBundleAnalyzer({
target: "serverless",
env: {
BASE_URL: process.env.BASE_URL,
},
webpack(conf) {
conf.module.rules.push({
test: /\.svg$/,
use: [
{
loader: "@svgr/webpack",
options: {
svgoConfig: {
plugins: [
{
// Enable figma's wrong mask-type attribute work
removeRasterImages: false,
removeStyleElement: false,
removeUnknownsAndDefaults: false,
// Enable svgr's svg to fill the size
removeViewBox: false,
},
],
},
},
},
],
});
// 절대경로
conf.resolve.modules.push(__dirname);
return conf;
},
});
......@@ -6,17 +6,46 @@
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"@next/bundle-analyzer": "^10.0.7",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"styled-components": "^5.2.3",
"web-vitals": "^1.0.1"
"web-vitals": "^1.0.1",
"next": "^10.0.5",
"styled-reset": "^4.3.4"
},
"devDependencies": {
"@babel/core": "^7.13.10",
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@svgr/webpack": "^5.5.0",
"@types/node": "^14.14.22",
"@types/react": "^17.0.0",
"@types/react-dom": "^17.0.0",
"@types/react-window": "^1.8.2",
"@types/styled-components": "^5.1.7",
"@typescript-eslint/eslint-plugin": "^4.14.1",
"@typescript-eslint/eslint-plugin-tslint": "^4.14.1",
"@typescript-eslint/parser": "^4.14.1",
"babel-loader": "^8.2.2",
"eslint": "^7.18.0",
"eslint-config-airbnb-typescript": "^12.3.1",
"eslint-config-prettier": "^8.1.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-react": "^7.22.0",
"eslint-plugin-react-hooks": "^4.2.0",
"prettier": "^2.2.1",
"typescript": "^4.1.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
"dev": "next",
"debug": "NODE_OPTIONS='--inspect' next dev",
"build": "next build",
"start": "next start",
"export": "next export",
"type-check": "tsc",
"eslint": "eslint .",
"analyze": "ANALYZE=true next build"
},
"eslintConfig": {
"extends": [
......
No preview for this file type
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:
body {
margin: 0;
font-size: 10px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: #f7f7f7;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { theme } from "./theme";
import "./index.css";
import { ThemeProvider } from "styled-components";
ReactDOM.render(
<React.StrictMode>
<ThemeProvider theme={theme}>
<App />
</ThemeProvider>
</React.StrictMode>,
document.getElementById("root")
);
import type { AppProps } from "next/app";
import Head from "next/head";
import { ThemeProvider } from "styled-components";
import { GlobalStyle } from "styles/global-style";
import { theme } from "styles/theme";
function MyApp({ Component, pageProps }: AppProps) {
return (
<>
<Head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Gif Generator</title>
</Head>
<GlobalStyle />
<ThemeProvider theme={theme}>
<Component {...pageProps} />
<div id="modal-root" />
</ThemeProvider>
</>
);
}
export default MyApp;
import Document, {
Html,
Head,
Main,
NextScript,
DocumentContext,
} from "next/document";
import { ServerStyleSheet } from "styled-components";
class MyDocument extends Document {
static async getInitialProps(ctx: DocumentContext) {
const sheet = new ServerStyleSheet();
const originalRenderPage = ctx.renderPage;
try {
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: (App) => (props) =>
sheet.collectStyles(<App {...props} />),
});
const initialProps = await Document.getInitialProps(ctx);
return {
...initialProps,
styles: (
<>
{initialProps.styles}
{sheet.getStyleElement()}
</>
),
};
} finally {
sheet.seal();
}
}
render() {
return (
<Html>
<Head>
<meta charSet="utf-8" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<meta property="og:title" content="네이버 예약" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap"
rel="preload"
as="style"
/>
<link
href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap"
rel="stylesheet"
/>
<script
type="text/javascript"
src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=3ioixdkru3"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;
import Header from "components/Header";
import Image from "components/Image";
import styled from "styled-components";
import Header from "./components/Header";
import Image from "./components/Image";
function App() {
return (
const Index = () => (
<Container>
<Header />
<Image />
</Container>
);
}
);
const Container = styled.div`
display: flex;
......@@ -17,4 +15,4 @@ const Container = styled.div`
align-items: center;
`;
export default App;
export default Index;
......
import { createGlobalStyle } from "styled-components";
import { reset } from "styled-reset";
import { media } from "./theme";
export const GlobalStyle = createGlobalStyle`
${reset}
:focus {
outline: none;
border: none;
}
div[role="button"] {
cursor: pointer;
}
::-webkit-scrollbar {
display: none;
}
html{
-webkit-text-size-adjust: none;
font-family: -apple-system,BlinkMacSystemFont,helvetica,Apple SD Gothic Neo,sans-serif;
font-display: fallback;
${media.tablet}{
font-size: 10px;
}
-ms-overflow-style: none;
scrollbar-width: none;
}
button {
background: none;
padding: 0;
border: none;
cursor: pointer;
&:disabled {
cursor: default;
fill: #f2f3f4;
}
}
.pc-tablet-only {
display: block;
${media.mobile} {
display: none;
}
}
.tablet-mobile-only{
display: none;
${media.tablet}{
display:block;
}
}
.mobile-only {
display: none;
${media.mobile} {
display: block;
}
}
`;
import "styled-components";
declare module "styled-components" {
export interface DefaultTheme {
color: {
purple: "#8661de";
blue: "#00bac7";
gray: "#f6f6f6";
green: "#07b495";
lightGreen: "#99ecdd";
darkGray: "#54595d";
};
boxShadow: {
normal: "0 3px 8px 0 rgb(0 0 0 / 10%)";
purple: "0 3px 8px 0 #d6c9ff";
blue: "0 3px 8px 0 #b3e2e6";
};
}
}
export const theme = {
import { DefaultTheme } from "styled-components";
export const theme: DefaultTheme = {
color: {
purple: "#8661de",
blue: "#00bac7",
......@@ -14,7 +16,8 @@ export const theme = {
},
};
const customMediaQuery = (maxWidth) => `@media (max-width: ${maxWidth}px)`;
const customMediaQuery = (maxWidth: number): string =>
`@media (max-width: ${maxWidth}px)`;
export const media = {
custom: customMediaQuery,
......
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"strict": false,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"baseUrl": "src",
"rootDir": "src",
},
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx",
"next.config.js",
"custom.d.ts",
"styled.d.ts",
"src/styles",
"src/pages",
"public",
"**/*.scss",
"src/components",
"resources",
],
"exclude": [
"node_modules",
]
}
\ No newline at end of file
This diff could not be displayed because it is too large.