WIL (21.09.27-21.10.01)

입사하고나서 일주일 정도 이후부터 관리자 페이지를 만들고 있다.

팀장님, 그리고 디자이너님과 협의후에 argon-dashboard-template 으로 열심히 레이아웃 만들고 컴포넌트 디자인 시작하려고 하는데 그냥 antd 쓰라고 하셔서 다시 처음부터 시작하는 중 ..^^ 우리 팀장님 아무래도 나 뺑뺑이 돌리는데 재미들리신 거 아닐까,,,, 아무튼 그래서 next.js 에서 antd 세팅하고 다시 레이아웃 만들고 있다.

세팅하는 날 개고생한 이유는... less 세팅을 못했기때문이다. 그래서 그냥 sass만 사용하기로 했다.

개발환경 세팅하기

1. next.js + typescript+ sass 세팅

npx create-next-app 프로젝트명
yarn add sass

next.js 9.3 버전부터는 sass를 기본으로 지원한다.

2. `next.config.js` 에서 세팅해주기.

const path = require('path');

module.exports = {
  reactStrictMode: true,
};

module.exports = {
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')], 
  },
  images: {
    disableStaticImages: true,
  },
};

3. next.js 에 typescript 적용하기

yarn add  typescript @types/react @types/node --dev

설치한 후에 tsconfig.json 파일을 생성하고,
_app.js 파일과 index.js파일의 확장자명을 tsx 로 변경한 후,

yarn run dev

명령어로 next.js 를 개발모드로 실행한다. (이 때 tsconfig.json 에 디폴트 세팅이 자동으로 입력된다.)

4. antd 설치

yarn add antd

5. antd 적용하기

먼저 scss 파일들을 모두 import 하는 scss 파일을 만든다.


/* styles/scss/antd.scss */

antd 컴포넌트 추가 
@import '~antd/dist/antd.css';

@import './constants/colors';
@import './constants/fonts';
@import './constants/typography';

@import './base/layouts';

그 다음에 _app.tsx에 antd.scss 파일을 추가한다.

import "../styles/scss/antd.scss";
import React from "react";

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

전역 레이아웃 컴포넌트 설정하기

관리자가 로그인했을 때와 하지 않았을 때의 레이아웃을 다르게 설정해, 관리자 페이지에서 사용되는 컴포넌트에만 관리자 페이지용 레이아웃을 적용하려고 했다.

_app.tsx 에서는 모든 페이지 컴포넌트에는 layout 속성이 있다는 것을 선언해줬다.


/* ./pages/_app.tsx */
import "../styles/scss/antd.scss";
import Head from "next/head";
import Router from "next/router";
import React, {Fragment} from "react";


function MyApp({ Component, pageProps }) {
  
  
  const Layout = Component.layout || (({ children }) => <>{children}</>);

  return (
    <Fragment>
      <Head>
        <meta name="viewport"
          content="width=device-width, initial-scale=1, shrink-to-fit=no"
        />
        <title>Admin Page</title>
      </Head>
      <Layout> <Component {...pageProps} /></Layout>
    </Fragment >)
    ;
}

export default MyApp;

관리자용 기능이 들어가는 페이지 컴포넌트가 Admin 레이아웃 컴포넌트의 자식 노드에 들어가야하기때문에, createRef 로 노드가 생성되게 만들었다.

/* ./layouts/Admin.tsx */

import React, { Fragment, useRef, createRef, useEffect } from 'react';
import { useRouter } from "next/router";
import routes from "./routes";
import { Layout } from 'antd';
const { Header, Footer, Sider, Content } = Layout;

import Sidebar from "Components/Sidebar/Sidebar";
import AdminHeader from 'Components/Header';


function Admin(props: any) {

	const router = useRouter();
	let mainContentRef = createRef<HTMLDivElement>();

	if (typeof window !== "undefined") {
		useEffect(() => {
			window.document.documentElement.scrollTop = 0;
			window.document.scrollingElement!.scrollTop = 0;
			mainContentRef.current!.scrollTop = 0;
		}, []);
	}

	return (
		<Fragment>
			<Layout style={{ minHeight: '100vh' }} className="admin-layout">
				<Sidebar />
				<Layout>
					<div className="main-content" ref={mainContentRef}>
						{props.children}
					</div>
				</Layout>
			</Layout>
		</Fragment>
	);
}

export default Admin;

이제 페이지 컴포넌트에서 해당 컴포넌트의 layout 값을 Admin으로 설정해주면, Admin 컴포넌트의 .main-content div에 페이지 컴포넌트의 노드가 생성되게 된다.

/* pages/admin/dashboard.tsx */
import React, { useState } from 'react';
import { Layout, Menu, Breadcrumb, Row, Col, Card } from 'antd';
import { Content, Footer } from 'antd/lib/layout/layout';
import Admin from 'layouts/Admin';
import AdminHeader from 'Components/Header';
import Button from 'antd/lib/skeleton/Button';

const Dashboard = (props: any) => {
	const [collapsed, onCollapse] = useState(false);

	return (
		<>
			<AdminHeader />
			<Content style={{ minHeight: '100vh', margin: '0 16px' }}>
			</Content>
		</>);
};

Dashboard.layout = Admin;

export default Dashboard;

Author And Source

이 문제에 관하여(WIL (21.09.27-21.10.01)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@nahsooyeon/WIL-21.09.27-21.10.01

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)