[STYLE] #2 : 레이아웃 수정

- 전체화면 스크롤 없앰
- 전체화면 리사이즈 될 때마다 캔버스도 리사이즈
- 그 외 컴포넌트 구조 변경 등...

src/App.js

@@ -1,34 +1,13 @@
 import React from 'react';
-import styled from 'styled-components';
-import TabAreaContainer from './components/layout/TabAreaContainer';
 
-const Main = styled.main`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  h1 {
-    padding: 5px;
-    background-color: var(--darkest-gray);
-    color: #fff;
-  }
-`;
-
-const Wrapper = styled.div`
-  display: flex;
-  flex-grow: 1;
-  background-color: var(--dark-gray);
-`;
+import Main from './components/layout/Main';
+import TabPanelContainer from './components/container/TabPanelContainer';
 
 const App = () => {
-  //console.log('App');
   return (
     <Main>
-      <h1>Pictor</h1>
-      <Wrapper>
-        <TabAreaContainer target="SIDEBAR" />
-        <TabAreaContainer target="CANVAS" />
-      </Wrapper>
+      <TabPanelContainer target="SIDEBAR" />
+      <TabPanelContainer target="CANVAS" />
     </Main>
   );
 };

src/components/container/CanvasContainer.js

@@ -1,18 +1,18 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import {
   changeDrawnPicture,
   changeCanvasMode,
   addPicture,
 } from '../../redux/pictures';
 
-import TopButtons from '../parts/tabPanel/TopButtons';
-import Contents from '../parts/tabPanel/Contents';
+import TopButtons from '../layout/tabPanel/TopButtons';
+import Content from '../layout/tabPanel/Content';
 import Button from '../common/Button';
 import Canvas from '../parts/Canvas';
 
 const CanvasContainer = () => {
-  console.log('CanvasContainer');
+  //console.log('CanvasContainer');
   const dispatch = useDispatch();
   const { canvasMode } = useSelector(state => state.pictures);
   const [myCanvas, setMyCanvas] = useState(null);
@@ -44,9 +44,9 @@ const CanvasContainer = () => {
           CLEAR!
         </Button>
       </TopButtons>
-      <Contents>
+      <Content>
         <Canvas setMyCanvas={setMyCanvas} />
-      </Contents>
+      </Content>
     </>
   );
 };

src/components/container/ImagesContainer.js

@@ -11,9 +11,9 @@ import {
 } from '../../redux/pictures';
 import styled from 'styled-components';
 
-import TopButtons from '../parts/tabPanel/TopButtons';
-import TopFilter from '../parts/tabPanel/TopFilter';
-import Contents from '../parts/tabPanel/Contents';
+import TopButtons from '../layout/tabPanel/TopButtons';
+import TopFilter from '../layout/tabPanel/TopFilter';
+import Content from '../layout/tabPanel/Content';
 import FileUploader from '../common/FileUploader';
 import Images from '../parts/Images';
 import Button from '../common/Button';
@@ -131,13 +131,13 @@ const ImagesContainer = () => {
       <TopFilter>
         <Select data={typeList} onChange={onChange} />
       </TopFilter>
-      <Contents>
+      <Content>
         <Images
           selectedType={selectedType}
           selectedList={selectedList}
           onToggle={onToggle}
         />
-      </Contents>
+      </Content>
     </>
   );
 };

src/components/container/PatternsContainer.js

@@ -8,8 +8,8 @@ import {
 } from '../../redux/pictures';
 
 import Images from '../parts/Images';
-import TopButtons from '../parts/tabPanel/TopButtons';
-import Contents from '../parts/tabPanel/Contents';
+import TopButtons from '../layout/tabPanel/TopButtons';
+import Content from '../layout/tabPanel/Content';
 import Button from '../common/Button';
 import SVG from '../common/SVG';
 import Input from '../common/Input';
@@ -182,7 +182,7 @@ const SettingsContainer = () => {
           </Button>
         </ButtonInner>
       </TopButtons>
-      <Contents>
+      <Content>
         <ContentsInner>
           <Settings>
             <InnerBlock>
@@ -312,7 +312,7 @@ const SettingsContainer = () => {
             </InnerBlock>
           </Settings>
         </ContentsInner>
-      </Contents>
+      </Content>
     </>
   );
 };

src/components/container/TabPanelContainer.js

@@ -1,29 +1,11 @@
 import React, { useState, useCallback } from 'react';
-import { useSelector } from 'react-redux';
-import styled from 'styled-components';
 
-import Tabs from '../parts/tabPanel/Tabs';
+import TabPanel from '../layout/tabPanel';
 import ImagesContainer from './ImagesContainer';
 import PatternsContainer from './PatternsContainer';
 import CanvasContainer from './CanvasContainer';
 
-const Wrapper = styled.section`
-  display: flex;
-  flex-direction: column;
-  flex: ${props => (props.target === 'SIDEBAR' ? '0 1 20vw' : '1 1 auto')};
-  padding: 5px;
-`;
-
-const ContentsWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  flex: 1 1 auto;
-  background: var(--middle-gray);
-  border: 2px solid var(--border-dark-gray);
-`;
-
-const TabPanel = ({ target }) => {
-  const { drawnPicture } = useSelector(state => state.pictures);
+const TabPanelContainer = ({ target }) => {
   const tabs = target === 'SIDEBAR' ? ['IMAGES', 'PATTERN'] : ['CANVAS'];
   const tabCompObj =
     target === 'SIDEBAR'
@@ -37,11 +19,15 @@ const TabPanel = ({ target }) => {
   const handleTab = useCallback(id => setActiveTab(id), []);
 
   return (
-    <Wrapper target={target}>
-      <Tabs tabs={tabs} activeTab={activeTab} handleTab={handleTab} />
-      <ContentsWrapper>{tabCompObj[activeTab]}</ContentsWrapper>
-    </Wrapper>
+    <TabPanel
+      target={target}
+      tabs={tabs}
+      activeTab={activeTab}
+      handleTab={handleTab}
+    >
+      {tabCompObj[activeTab]}
+    </TabPanel>
   );
 };
 
-export default React.memo(TabPanel);
+export default React.memo(TabPanelContainer);

src/components/layout/Main.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const MainWrapper = styled.main`
+  width: 100vw;
+  height: 100vh;
+`;
+
+const Header = styled.header`
+  position: fixed;
+  top: 0;
+  width: 100vw;
+  height: 26px;
+  h1 {
+    padding: 5px;
+    background-color: var(--darkest-gray);
+    color: #fff;
+  }
+`;
+
+const MainContents = styled.section`
+  display: flex;
+  height: 100vh;
+  background-color: var(--dark-gray);
+`;
+
+const Main = ({ children }) => {
+  return (
+    <MainWrapper>
+      <Header>
+        <h1>Pictor</h1>
+      </Header>
+      <MainContents>{children}</MainContents>
+    </MainWrapper>
+  );
+};
+
+export default Main;

src/components/layout/tabPanel/Content.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  flex: 1 0 50vh;
+  overflow-x: hidden;
+  overflow-y: auto;
+`;
+
+const Content = ({ children }) => {
+  return <Wrapper>{children}</Wrapper>;
+};
+
+export default Content;

src/components/layout/tabPanel/index.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import Tabs from './Tabs';
+
+const Wrapper = styled.div`
+  flex-basis: ${props => (props.target === 'SIDEBAR' ? '20vw' : '80vw')};
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  padding: 5px;
+  padding-top: 31px;
+  &:last-of-type {
+    padding-left: 0;
+  }
+`;
+
+const ContentWrapper = styled.div`
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  background: var(--middle-gray);
+  border: 2px solid var(--border-dark-gray);
+`;
+
+const TabPanel = ({ children, ...props }) => {
+  const { target, tabs, activeTab, handleTab } = props;
+  //console.log('TabPanel layout ', target, tabs);
+  return (
+    <Wrapper target={target}>
+      <Tabs tabs={tabs} activeTab={activeTab} handleTab={handleTab} />
+      <ContentWrapper>{children}</ContentWrapper>
+    </Wrapper>
+  );
+};
+
+export default TabPanel;

src/components/parts/Canvas.js

@@ -1,11 +1,13 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { useSelector } from 'react-redux';
 import styled from 'styled-components';
+
+import { debounce } from '../../utils/commonUtils';
 import { MyCanvas } from '../../lib/myCanvas';
 
 const Wrapper = styled.div`
   width: 100%;
-  height: 99.9%;
+  height: 100%;
 `;
 const CanvasBlock = styled.canvas`
   background-color: #fff;
@@ -15,26 +17,26 @@ const Canvas = ({ setMyCanvas }) => {
   const { pictures, drawnPicture, canvasMode, properties } = useSelector(
     state => state.pictures,
   );
-  console.log('Canvas', drawnPicture, canvasMode, properties);
-
+  const [canvasSize, setCanvasSize] = useState({
+    width: 0,
+    height: 0,
+  });
   const wrapperRef = useRef();
   const canvasRef = useRef();
+  const my = useRef(); // 캔버스 객체
   const ctx = useRef();
-  const my = useRef();
-
-  // 마운트 시점 부모영역 사이즈에 맞추기
-  useEffect(() => {
-    if (wrapperRef.current && canvasRef.current) {
-      canvasRef.current.width = wrapperRef.current.offsetWidth;
-      canvasRef.current.height = wrapperRef.current.offsetHeight;
+  //console.log('Canvas', drawnPicture, canvasMode, properties);
 
-      ctx.current = canvasRef.current.getContext('2d');
-    }
-  }, []);
+  // 캔버스 사이즈 변경
+  const handleResize = () =>
+    setCanvasSize({
+      width: wrapperRef.current.offsetWidth,
+      height: wrapperRef.current.offsetHeight - 1,
+    });
 
-  useEffect(() => {
+  // 캔버스 (재)설정 및 생성
+  const resetMyCanvas = drawnPicture => {
     if (drawnPicture) {
-      console.log('drawnPicture selected!');
       // myCanvas 생성
       const cropImgSrc = pictures.find(pic => pic.id === drawnPicture).src;
       my.current = new MyCanvas(
@@ -53,6 +55,43 @@ const Canvas = ({ setMyCanvas }) => {
         that.drawImage(1.0);
       };
     }
+  };
+
+  // 컴포넌트 마운트/언마운트 시 처리
+  useEffect(() => {
+    if (wrapperRef.current && canvasRef.current) {
+      handleResize(); // 첫 마운트시 즉시 사이즈 적용
+      ctx.current = canvasRef.current.getContext('2d');
+    }
+
+    // 리사이즈 이벤트 핸들러, debounce 적용
+    window.addEventListener('resize', debounce(handleResize, 1000));
+
+    return () => {
+      // cleanup
+      window.removeEventListener('resize', debounce(handleResize, 1000));
+    };
+  }, []);
+
+  // 리사이즈된 부모영역에 맞게 캔버스 사이즈 재조정
+  useEffect(() => {
+    const { width, height } = canvasSize;
+    if (width && height) {
+      canvasRef.current.width = width;
+      canvasRef.current.height = height;
+    }
+
+    // 캔버스 리사이즈된 경우 캔버스랑 context 설정들 전부 리셋됨
+    if (drawnPicture) {
+      resetMyCanvas(drawnPicture);
+    }
+  }, [canvasSize]);
+
+  // 선택한 이미지 바뀐 경우 캔버스 재생성
+  useEffect(() => {
+    if (drawnPicture) {
+      resetMyCanvas(drawnPicture);
+    }
   }, [drawnPicture, setMyCanvas, pictures]);
 
   useEffect(() => {
@@ -83,8 +122,9 @@ const Canvas = ({ setMyCanvas }) => {
         canvasRef.current.height,
       );
     }
+
     return () => {
-      console.log('unmout');
+      //console.log('unmout');
       if (my.current) {
         my.current.canvas.removeEventListener(
           'mousedown',