Merge pull request #116 from boostcamp-2020/dev

2주차 배포

.eslintrc

@@ -18,6 +18,7 @@
  "react-hooks/exhaustive-deps": "off",
  "react/require-default-props": "off",
  "import/order": "off",
- "import/prefer-default-export": "off"
+ "import/prefer-default-export": "off",
+ "no-shadow": "off"
  }
 }

package.json

@@ -12,15 +12,17 @@
  "@types/node": "^12.19.4",
  "@types/react": "^16.9.56",
  "@types/react-dom": "^16.9.9",
- "dotenv": "^8.2.0", 
+ "dotenv": "^8.2.0",
  "emotion-reset": "^2.0.7",
  "emotion-theming": "^10.0.27",
  "mapbox-gl": "^1.12.0",
  "react": "^17.0.1",
  "react-dom": "^17.0.1",
  "react-redux": "^7.2.2",
+ "react-router-dom": "^5.2.0",
  "react-scripts": "4.0.0",
  "redux": "^4.0.5",
+ "redux-devtools-extension": "^2.13.8",
  "typescript": "^4.0.5",
  "web-vitals": "^0.2.4"
  },
@@ -51,6 +53,7 @@
  "devDependencies": {
  "@types/mapbox-gl": "^1.12.7",
  "@types/react-redux": "^7.1.11",
+ "@types/react-router-dom": "^5.1.6",
  "@types/redux": "^3.6.0",
  "@typescript-eslint/eslint-plugin": "^4.8.0",
  "@typescript-eslint/parser": "^4.8.0",

src/App.tsx

@@ -1,9 +1,16 @@
 import React from 'react';
+import { Route, Switch } from 'react-router-dom';
 import Main from './pages/Main';
+import Entry from './pages/Entry';
 
 /** 추후에 라우팅해야되면 수정할 예정 */
 function App(): React.ReactElement {
- return <Main />;
+ return (
+ <Switch>
+ <Route path="/" exact component={Entry} />
+ <Route path="/map" component={Main} />
+ </Switch>
+ );
 }
 
 export default App;

src/components/Canvas.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import styled from '../utils/styles/styled';
+import useCanvas from '../hooks/useCanvas';
+
+const Canvas = styled.canvas``;
+
+const Img = styled.img`
+ display: none;
+`;
+
+const CANVAS_WIDTH = 804;
+const CANVAS_HEIGHT = 420;
+
+function CanvasComponent(): React.ReactElement {
+ const { mapImgRef, logoImgRef, canvasRef, mouseDownHandler } = useCanvas();
+
+ return (
+ <>
+ <Img
+ src="/images/map.png"
+ alt="map"
+ crossOrigin="anonymous"
+ ref={mapImgRef}
+ />
+ <Img
+ src="/images/logo.png"
+ alt="logo"
+ crossOrigin="anonymous"
+ ref={logoImgRef}
+ />
+ <Canvas
+ onMouseDown={mouseDownHandler}
+ width={CANVAS_WIDTH}
+ height={CANVAS_HEIGHT}
+ ref={canvasRef}
+ />
+ </>
+ );
+}
+
+export default CanvasComponent;

src/components/Sidebar/SidebarContentMore/ColorStyle.tsx

@@ -1,29 +1,58 @@
 import React from 'react';
 import styled from '../../../utils/styles/styled';
+import useInputRange from '../../../hooks/common/useInputRange';
+import { StyleKeyType } from '../../../store/common/type';
 
-const ColorWrapper = styled.div``;
+const ColorWrapper = styled.div`
+ display: flex;
+ flex-wrap: wrap;
+`;
 
 const ColorTitle = styled.label`
- margin-bottom: 10px;
+ margin: auto 0;
  font-size: 1.7rem;
  font-weight: 600;
  color: ${(props) => props.theme.GREY};
 `;
 
-const ColorCode = styled.div``;
+const ColorCode = styled.div`
+ margin: auto 0 auto 5px;
+ font-size: 1.3rem;
+ font-weight: 600;
+ color: ${(props) => props.theme.LIGHTGREY};
+`;
 
 const ColorPalette = styled.input`
- margin: 10px 20px;
+ margin: 20px 20px 10px 20px;
  width: 100px;
  height: 40px;
 `;
 
-function ColorStyle(): React.ReactElement {
+interface ColorStyleProps {
+ color: string;
+ onStyleChange: (key: StyleKeyType, value: string | number) => void;
+}
+
+function ColorStyle({
+ color,
+ onStyleChange,
+}: ColorStyleProps): React.ReactElement {
+ const { curRange, rangeChangeHandler, rangeMouseUpHandler } = useInputRange({
+ range: color,
+ onStyleChange,
+ });
+
  return (
  <ColorWrapper>
  <ColorTitle htmlFor="styler__color">색상</ColorTitle>
- <ColorCode />
- <ColorPalette type="color" id="styler__color" />
+ <ColorCode>{curRange}</ColorCode>
+ <ColorPalette
+ type="color"
+ id="styler__color"
+ onChange={rangeChangeHandler}
+ onBlur={() => rangeMouseUpHandler(StyleKeyType.color)}
+ value={curRange}
+ />
  </ColorWrapper>
  );
 }