기본 환경 세팅 및 헤더 추가

public/static/images/common/nav-arr.svg

@@ -0,0 +1,3 @@
+<svg width="6" height="10" viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.25 8.5L4.75 5L1.25 1.5" stroke="white" stroke-width="1.5"/>
+</svg>

public/static/images/common/profile_icon.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="icon">
+<g id="elements">
+<circle id="Ellipse 1533" cx="12" cy="12" r="8.25" stroke="#BEBEBE" stroke-width="1.5"/>
+<path id="Vector" d="M7.94995 16.5C10.0485 14.302 13.9289 14.1986 16.05 16.5M14.2455 9.75C14.2455 10.9926 13.2367 12 11.9923 12C10.7479 12 9.73912 10.9926 9.73912 9.75C9.73912 8.50736 10.7479 7.5 11.9923 7.5C13.2367 7.5 14.2455 8.50736 14.2455 9.75Z" stroke="#BEBEBE" stroke-width="1.5" stroke-linecap="round"/>
+</g>
+</g>
+</svg>

public/static/images/common/select-arr.svg

@@ -0,0 +1,3 @@
+<svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector 4" d="M1.5 1.25L5 4.75L8.5 1.25" stroke="white" stroke-width="1.5"/>
+</svg>

public/static/images/common/signout_icon.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="icon">
+<g id="elements">
+<path id="Rectangle 2333" d="M14.6667 17C14.6012 18.6462 13.2294 20.0439 11.3917 19.9989C10.9641 19.9885 10.4357 19.8394 9.37877 19.5413C6.83521 18.8239 4.62716 17.6181 4.09738 14.9169C4 14.4204 4 13.8617 4 12.7442L4 11.2558C4 10.1383 4 9.5796 4.09738 9.08307C4.62716 6.38191 6.83521 5.17614 9.37878 4.45869C10.4357 4.16057 10.9641 4.01151 11.3917 4.00106C13.2294 3.9561 14.6012 5.35384 14.6667 7.00001" stroke="#BEBEBE" stroke-width="1.5" stroke-linecap="round"/>
+<path id="Vector" d="M19.9999 12H10.2222M19.9999 12C19.9999 11.3776 18.2272 10.2147 17.7777 9.7778M19.9999 12C19.9999 12.6224 18.2272 13.7853 17.7777 14.2222" stroke="#BEBEBE" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</g>
+</svg>

src/app/canvas/page.jsx

@@ -0,0 +1,16 @@
+import CanvasMenu from '@/components/canvas_menu/CanvasMenu'
+import Header from '@/components/header/Header'
+import '@/styles/style.scss'
+
+export default function CanvasPage() {
+    return(
+        <div className="wrap">
+            <Header/>
+            <div className="content">
+                <div className="canvas-wrap">
+                    <CanvasMenu/>
+                </div>
+            </div>
+        </div>
+    )
+}

src/app/colorpicker/page.jsx

@@ -1,17 +0,0 @@
-'use client'
-
-import { useState } from 'react'
-import ColorPicker from '@/components/colorpicker/ColorPicker'
-
-export default function ColorpickerPage() {
-  const [color, setColor] = useState('#ff0000')
-
-  return (
-    <>
-      <div>
-        <ColorPicker color={color} setColor={setColor} />
-      </div>
-      <div style={{ paddingTop: '10px' }}>{color}</div>
-    </>
-  )
-}

src/app/datepicker/page.jsx

@@ -1,32 +0,0 @@
-'use client'
-
-import RangeDatePicker from '@/components/datepicker/RangeDatePicker'
-import SingleDatePicker from '@/components/datepicker/SingleDatePicker'
-import { useState } from 'react'
-
-export default function DatepickerPage() {
-  const [startDate, setStartDate] = useState(new Date())
-  const singleDatePickerProps = {
-    startDate,
-    setStartDate,
-  }
-
-  const [dateRange, setDateRange] = useState([null, null])
-  const [startRangeDate, endRangeDate] = dateRange
-  const rangeDatePickerProps = {
-    startRangeDate,
-    endRangeDate,
-    setDateRange,
-  }
-
-  return (
-    <>
-      <div style={{ padding: '20px' }}>
-        <SingleDatePicker {...singleDatePickerProps} />
-      </div>
-      <div style={{ padding: '20px' }}>
-        <RangeDatePicker {...rangeDatePickerProps} />
-      </div>
-    </>
-  )
-}

src/app/font-test/page.jsx

@@ -1,7 +0,0 @@
-export default function FontTestPage() {
-  return (
-    <>
-      <div className="font-test">font test</div>
-    </>
-  )
-}

src/app/globals.css

@@ -1,33 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-:root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-  }
-}
-
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
-}
-
-@layer utilities {
-  .text-balance {
-    text-wrap: balance;
-  }
-}

src/app/grid/page.jsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useState } from 'react'
 import { useAxios } from '@/hooks/useAxios'
-import QGrid from '@/components/grid/QGrid'
+import QGrid from '@/components/common/grid/QGrid'
 
 export default function GridPage() {
   const { get } = useAxios()

src/app/inputwrap/page.jsx

@@ -0,0 +1,49 @@
+import ColorPicker from "@/components/common/colorpicker/ColorPicker";
+import RangeDatePicker from "@/components/common/datepicker/RangeDatePicker";
+import SingleDatePicker from "@/components/common/datepicker/SingleDatePicker";
+import Qselect from "@/components/common/select/Qselect";
+import '@/styles/_inputcommon.scss'
+
+export default function InputWrapPage (){
+    return(
+        <div className="input-content">
+            <div className="input-wrap">
+                <h1>BTN WRAP</h1>
+                <div className="form-btn">
+                    <button className="btn-frame deepgray">屋根面の割り当て</button>
+                    <button className="btn-frame gray">屋根面の割り当て</button>
+                    <button className="btn-frame small dark">移動</button>
+                </div>
+            </div>
+            <div className="input-wrap">
+                <h1>Select WRAP</h1>
+                <div className="form-select">
+                    <Qselect/>
+                </div>
+            </div>
+            <div className="input-wrap">
+                <h1>Input WRAP</h1>
+                <div className="form-input">
+                    <input type="text"  className="input-origin" placeholder="asdasd"/>
+                </div>
+            </div>
+            <div className="input-wrap">
+                <h1>DatePicker WRAP</h1>
+                <div className="form-datepicker">
+                    <div className="single-date">
+                        <SingleDatePicker/>
+                    </div>
+                    <div className="range-date">
+                        <RangeDatePicker/>
+                    </div>
+                </div>
+            </div>
+            <div className="input-wrap">
+                <h1>colorpicker</h1>
+                <div className="form-colorpicker">
+                    <ColorPicker/>
+                </div>
+            </div>
+        </div>
+    )
+}

src/app/layout.js

@@ -1,6 +1,7 @@
 import RecoilRootWrapper from './RecoilWrapper'
-import QModal from '@/components/modal/QModal'
-import '@/styles/style.scss'
+import QModal from '@/components/common/modal/QModal'
+import '@/styles/common.scss'
+// import '@/styles/style.scss'
 
 export const metadata = {
   title: 'Create Next App',

src/app/page.js

@@ -1,12 +1,11 @@
-import Test from '@/components/Test'
+import PublishPage from "@/components/publishpage/PublishPage";
+
 
 export default function Home() {
   return (
     <>
-      <h1>Hello World</h1>
-      <div className="test">style test</div>
       <div>
-        <Test />
+        <PublishPage />
       </div>
     </>
   )

src/components/Test.jsx

@@ -1,8 +0,0 @@
-export default function Test() {
-  return (
-    <>
-      <h1>Test Component</h1>
-      <p>테스트 컴포넌트 입니다.</p>
-    </>
-  )
-}

src/components/canvas_menu/CanvasMenu.jsx

@@ -0,0 +1,7 @@
+export default function CanvasMenu() {
+    return(
+        <div className="canvas-menu-wrap">
+            
+        </div>
+    )
+}

src/components/common/colorpicker/ColorPicker.jsx

@@ -1,13 +1,16 @@
+'use client'
+import { useState } from 'react'
 import { HexColorPicker } from 'react-colorful'
 
-export default function ColorPicker(props) {
-  const { color, setColor } = props
+export default function ColorPicker() {
+  const [color, setColor] = useState('#ff0000')
 
   return (
     <>
       <div style={{ width: '300px', padding: '20px' }}>
         <HexColorPicker color={color} onChange={setColor} />
       </div>
+      <p>{color}</p>
     </>
   )
 }

src/components/common/datepicker/RangeDatePicker.jsx

@@ -1,8 +1,12 @@
+'use client'
+import { useState } from 'react'
 import DatePicker from 'react-datepicker'
 import 'react-datepicker/dist/react-datepicker.css'
 
-export default function RangeDatePicker(props) {
-  const { startRangeDate, endRangeDate, setDateRange } = props
+export default function RangeDatePicker() {
+  
+  const [dateRange, setDateRange] = useState([null, null])
+  const [startRangeDate, endRangeDate] = dateRange
 
   return (
     <DatePicker

src/components/common/datepicker/SingleDatePicker.jsx

@@ -1,8 +1,11 @@
+'use client'
+
+import { useState } from 'react';
 import DatePicker from 'react-datepicker'
 import 'react-datepicker/dist/react-datepicker.css'
 
-export default function SingleDatePicker(props) {
-  const { startDate, setStartDate } = props
+export default function SingleDatePicker() {
+  const [startDate, setStartDate] = useState(new Date());
 
   return <DatePicker showIcon dateFormat={`yyyy-MM-dd`} selected={startDate} onChange={(date) => setStartDate(date)} />
 }

src/components/common/select/Qselect.jsx

@@ -0,0 +1,19 @@
+'use client'
+import { useState } from "react"
+
+export default function Qselect({title, option}){
+    const [selectAct, setSelectAct] = useState(false);
+
+    return(
+        <div className={`sort-select ${selectAct ? 'active' : ''}`} onClick={() => setSelectAct(!selectAct)}>
+            <p>{title}</p>
+            <ul className="select-item-wrap">
+                {option.map((el, idx) => (
+                    <li key={idx} className="select-item">
+                        <button>{el.name}</button>
+                    </li>
+                ))}
+            </ul>
+        </div>
+    )
+}

src/components/header/Header.jsx

@@ -0,0 +1,82 @@
+'use client'
+import Link from "next/link";
+import Qselect from "../common/select/Qselect";
+
+export default function Header() {
+    const SelectOption = [
+        {name: 'オンライン保証シ',}, {name: 'ステム'}
+    ]
+    const ToggleonMouse = (e, act) => {
+        const listWrap = e.target.parentElement.parentElement;
+        const ListItem = Array.from(listWrap.childNodes)
+        ListItem.forEach(el => {
+            if(act === 'add'){
+                el.classList.add('mouse');
+            }else{
+                el.classList.remove('mouse');
+            }
+        })
+        if(act === 'add'){
+            e.target.parentElement.classList.remove('mouse')
+        }
+    }
+    return(
+        <header>
+            <div className="header-inner">
+                <div className="header-right">
+                    <h1 className="logo">
+                        <Link href={'#'}></Link>
+                    </h1>
+                    <nav>
+                        <ul className="nav-list ">
+                            <li 
+                            className="nav-item " 
+                            onMouseEnter={(e) => ToggleonMouse(e, 'add')} 
+                            onMouseLeave={(e) => ToggleonMouse(e, 'remove')}
+                            >
+                                <Link href={'#'}>ホームへ</Link>
+                            </li>
+                            <li 
+                            className="nav-item" 
+                            onMouseEnter={(e) => ToggleonMouse(e, 'add')} 
+                            onMouseLeave={(e) => ToggleonMouse(e, 'remove')}
+                            >
+                                <button>物品及び図面管理</button>
+                                <ul className="nav-depth2">
+                                    <li className="nav-depth2-item"><Link href={'#'}>新規物件登録</Link></li>
+                                    <li className="nav-depth2-item"><Link href={'#'}>モノ/図面管理</Link></li>
+                                </ul>
+                            </li>
+                            <li 
+                            className="nav-item" 
+                            onMouseEnter={(e) => ToggleonMouse(e, 'add')} 
+                            onMouseLeave={(e) => ToggleonMouse(e, 'remove')}
+                            >
+                                <button>コミュニティ</button>
+                                <ul className="nav-depth2">
+                                    <li className="nav-depth2-item"><Link href={'#'}>お知らせ</Link></li>
+                                    <li className="nav-depth2-item"><Link href={'#'}>FAQ</Link></li>
+                                    <li className="nav-depth2-item"><Link href={'#'}>素材のダウンロード</Link></li>
+                                </ul>
+                            </li>
+                        </ul>
+                    </nav>  
+                </div>
+                <div className="header-left">
+                    <div className="profile-box">
+                        <button className="profile">Kim Ji Young</button>
+                    </div>
+                    <div className="sign-out-box">
+                        <button className="sign-out">ログアウト</button>
+                    </div>
+                    <div className="select-box">
+                        <Qselect title={'Q.ORDER'} option={SelectOption}/>
+                    </div>
+                    <div className="btn-wrap">
+                        <button className="btn-frame small dark">移動</button>
+                    </div>
+                </div>
+            </div>
+        </header>
+    )
+}

src/components/publishpage/PublishPage.jsx

@@ -0,0 +1,92 @@
+'use client'
+
+import Link from 'next/link'
+import { useEffect } from 'react';
+import '@/styles/publishpage.scss'
+
+export default function PublishPage() {
+
+  useEffect(() => {
+    const pageLength = document.querySelectorAll('.coding_stat_web').length;
+
+    const setCodingProcess = () => {
+      let codingEndedWeb = 0;
+
+      document.querySelectorAll('.coding_stat_web').forEach(element => {
+        const codingStatWeb = element.textContent;
+        if (codingStatWeb === '완료') {
+          codingEndedWeb += 1;
+          element.classList.add('final');
+        }
+      });
+
+      const perCompleteWeb = parseInt((codingEndedWeb / pageLength) * 100);
+      document.querySelector('.coding_summary_web').textContent = `진행률 [ ${codingEndedWeb} page / ${pageLength} page] ${perCompleteWeb}% 완료`;
+    };
+
+    setCodingProcess();
+
+    document.querySelectorAll('a').forEach(anchor => {
+      anchor.setAttribute('target', '_blank');
+    });
+  }, []);
+
+  return (
+    <>
+      <div id="g_header">
+        <h1>QCast Japanese</h1>
+      </div>
+      <div id="g_body">
+        <div className="contents">
+          <h3>Flie List</h3>
+          <p className="guide_summary">
+          </p>
+          <ul className="mt-9">
+            <li className="coding_summary_web"></li>
+          </ul>
+          <table className='guide_table'>
+            <colgroup>
+              <col style={{width: '15%'}}/>
+              <col style={{width: '25%'}}/>
+              <col />
+              <col style={{width: '10%'}}/>
+              <col style={{width: '15%'}}/>
+            </colgroup>
+            <thead>
+              <tr>
+                <th>구분</th>
+                <th>Depth</th>
+                <th>파일명</th>
+                <th>퍼블리싱</th>
+                <th>비고</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td className="t-center"><strong>공통</strong></td>			
+                <td><strong className="title">Input 설정 모음</strong></td>
+                <td><Link href="/inputwrap" target="_blank">inputwrap</Link></td>
+                <td className="coding_stat_web"></td>
+                <td className="t-center">2024-09-05</td>
+              </tr> 
+              <tr>
+                <td className="t-center"><strong>그리드</strong></td>			
+                <td><strong className="title"></strong></td>
+                <td><Link href="/grid" target="_blank">Grid</Link></td>
+                <td className="coding_stat_web"></td>
+                <td className="t-center">2024-09-05</td>
+              </tr> 
+              <tr>
+                <td className="t-center"><strong>CanvasPage</strong></td>			
+                <td><strong className="title"></strong></td>
+                <td><Link href="/canvas" target="_blank">CanvasPage</Link></td>
+                <td className="coding_stat_web"></td>
+                <td className="t-center">2024-09-05</td>
+              </tr> 
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </>
+  )
+}

src/styles/_contents.scss

@@ -0,0 +1 @@
+// CanvasPage

src/styles/_fonts.scss

@@ -0,0 +1,199 @@
+@font-face {
+    font-family: 'Noto Sans JP';
+    src: url('/fonts/NotoSansJP-ExtraBold.woff2') format('woff2'),
+        url('/fonts/NotoSansJP-ExtraBold.woff') format('woff');
+    font-weight: bold;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Noto Sans JP';
+    src: url('/fonts/NotoSansJP-Bold.woff2') format('woff2'),
+        url('/fonts/NotoSansJP-Bold.woff') format('woff');
+    font-weight: bold;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Noto Sans JP';
+    src: url('/fonts/NotoSansJP-Black.woff2') format('woff2'),
+        url('/fonts/NotoSansJP-Black.woff') format('woff');
+    font-weight: 900;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Noto Sans JP';
+    src: url('/fonts/NotoSansJP-ExtraLight.woff2') format('woff2'),
+        url('/fonts/NotoSansJP-ExtraLight.woff') format('woff');
+    font-weight: 200;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Noto Sans JP';
+    src: url('/fonts/NotoSansJP-Light.woff2') format('woff2'),
+        url('/fonts/NotoSansJP-Light.woff') format('woff');
+    font-weight: 300;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Noto Sans JP';
+    src: url('/fonts/NotoSansJP-Medium.woff2') format('woff2'),
+        url('/fonts/NotoSansJP-Medium.woff') format('woff');
+    font-weight: 500;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Noto Sans JP';
+    src: url('/fonts/NotoSansJP-Regular.woff2') format('woff2'),
+        url('/fonts/NotoSansJP-Regular.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Noto Sans JP';
+    src: url('/fonts/NotoSansJP-SemiBold.woff2') format('woff2'),
+        url('/fonts/NotoSansJP-SemiBold.woff') format('woff');
+    font-weight: 600;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Noto Sans JP';
+    src: url('/fonts/NotoSansJP-Thin.woff2') format('woff2'),
+        url('/fonts/NotoSansJP-Thin.woff') format('woff');
+    font-weight: 100;
+    font-style: normal;
+    font-display: swap;
+}
+
+// pretendard
+@font-face {
+    font-family: 'Pretendard';
+    src: url('/fonts/Pretendard-Bold.woff2') format('woff2'),
+        url('/fonts/Pretendard-Bold.woff') format('woff');
+    font-weight: bold;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Pretendard';
+    src: url('/fonts/Pretendard-ExtraBold.woff2') format('woff2'),
+        url('/fonts/Pretendard-ExtraBold.woff') format('woff');
+    font-weight: bold;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Pretendard';
+    src: url('/fonts/Pretendard-ExtraBold.woff2') format('woff2'),
+        url('/fonts/Pretendard-ExtraBold.woff') format('woff');
+    font-weight: bold;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Pretendard';
+    src: url('/fonts/Pretendard-ExtraLight.woff2') format('woff2'),
+        url('/fonts/Pretendard-ExtraLight.woff') format('woff');
+    font-weight: 200;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Pretendard';
+    src: url('/fonts/Pretendard-ExtraLight.woff2') format('woff2'),
+        url('/fonts/Pretendard-ExtraLight.woff') format('woff');
+    font-weight: 200;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Pretendard';
+    src: url('/fonts/Pretendard-Light.woff2') format('woff2'),
+        url('/fonts/Pretendard-Light.woff') format('woff');
+    font-weight: 300;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Pretendard';
+    src: url('/fonts/Pretendard-Light.woff2') format('woff2'),
+        url('/fonts/Pretendard-Light.woff') format('woff');
+    font-weight: 300;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Pretendard';
+    src: url('/fonts/Pretendard-Medium.woff2') format('woff2'),
+        url('/fonts/Pretendard-Medium.woff') format('woff');
+    font-weight: 500;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Pretendard';
+    src: url('/fonts/Pretendard-Medium.woff2') format('woff2'),
+        url('/fonts/Pretendard-Medium.woff') format('woff');
+    font-weight: 500;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Pretendard';
+    src: url('/fonts/Pretendard-Regular.woff2') format('woff2'),
+        url('/fonts/Pretendard-Regular.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Pretendard';
+    src: url('/fonts/Pretendard-Black.woff2') format('woff2'),
+        url('/fonts/Pretendard-Black.woff') format('woff');
+    font-weight: 900;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Pretendard';
+    src: url('/fonts/Pretendard-Black.woff2') format('woff2'),
+        url('/fonts/Pretendard-Black.woff') format('woff');
+    font-weight: 900;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Pretendard';
+    src: url('/fonts/Pretendard-Bold.woff2') format('woff2'),
+        url('/fonts/Pretendard-Bold.woff') format('woff');
+    font-weight: bold;
+    font-style: normal;
+    font-display: swap;
+}
+

src/styles/_inputcommon.scss

@@ -0,0 +1,20 @@
+.input-content{
+    max-width: 1600px;
+    margin: 0 auto;
+    .input-wrap{
+        padding: 50px 50px 0;
+        h1{
+            margin-bottom: 20px;
+        }
+        .form-btn{
+            button{
+                margin-right: 10px;
+            }
+        }
+        .form-datepicker{
+            div{
+                margin-bottom: 10px;
+            }
+        }
+    }
+}

src/styles/_layout.scss

@@ -0,0 +1,211 @@
+.wrap{
+    display: flex;
+    flex-direction: column;
+    min-width: 1600px;
+    min-height: 100vh;
+    overflow-x: hidden;
+}
+.content{
+    flex: 1 1 auto;
+    padding-top: 46px;
+}
+
+// header
+// nav item 공통
+@mixin navitem(){
+    position: relative;
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    color: #fff;
+    font-weight: 500;
+    height: 100%;
+    padding-right: 12px;
+    transition: color .17s ease-in-out;
+}
+header{
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    min-width: 1600px;
+    height: 46px;
+    background-color: #1C1C1C;
+    border-bottom: 1px solid #000;
+    
+    .header-inner{
+        display: flex;
+        align-items: center;
+        height: 100%;
+        padding: 0 40px;
+        .header-right{
+            display: flex;
+            height: 100%;
+            align-items: center;
+            .logo{
+                a{
+                    display: block;
+                    width: 232px;
+                    height: 30px;
+                    background: url(../../public/static/images/common/Logo.svg)no-repeat center;
+                    background-size: contain;
+                }
+            }
+            nav{
+                margin-left: 50px;
+                height: 100%;
+                .nav-list{
+                    display: flex;
+                    align-items: center;
+                    height: 100%;
+                    .nav-item{
+                        position: relative;
+                        margin-right: 62px;
+                        height: 100%;
+                        a{
+                            @include navitem;
+                        }
+                        button{
+                            @include navitem;
+                            &:after{
+                                content: '';
+                                position: absolute;
+                                top: 50%;
+                                right: 0;
+                                transform: translateY(-50%);
+                                width: 6px;
+                                height: 10px;
+                                background: url(../../public/static/images/common/nav-arr.svg)no-repeat center;
+                                transition: all .17s ease-in-out;
+                            }
+                        }
+                        &:last-child{
+                            margin-right: 0;
+                        }
+                        .nav-depth2{
+                            position: absolute;
+                            top: calc(100% - 2px);
+                            left: 50%;
+                            transform: translateX(-50%);
+                            min-width: 100px;
+                            background-color: #1C1C1C;
+                            border: 1px solid #464646;
+                            padding: 24px;
+                            opacity: 0;
+                            visibility: hidden;
+                            transition: all .17s ease-in-out;
+                            .nav-depth2-item{
+                                margin-bottom: 10px;
+                                a{
+                                    font-size: 13px;
+                                    font-weight: normal;
+                                    white-space: nowrap;
+                                }
+                                &:last-child{
+                                    margin-bottom: 0;
+                                }
+                            }
+                            &::before{
+                                content: '';
+                                position: absolute;
+                                top: -5px;
+                                left: 50%;
+                                transform: translateX(-50%) rotate(45deg);
+                                width: 8px;
+                                height: 8px;
+                                background-color: #1c1c1c;
+                                border-top: 1px solid #464646;
+                                border-left: 1px solid #464646;
+                            }
+                        }
+                        &.mouse{
+                            > a{
+                                color: rgba(255, 255, 255, 0.30);
+                            }
+                            > button{
+                                color: rgba(255, 255, 255, 0.30);
+                                &:after{
+                                    opacity: 0.3;
+                                }
+                            }
+                        }
+                        &:hover{
+                            .nav-depth2{
+                                opacity: 1;
+                                visibility: visible;
+                            }
+                            > button{
+                                &:after{
+                                    transform: translateY(-50%) rotate(90deg);
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        .header-left{
+            margin-left: auto;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            .profile-box{
+                position: relative;
+                padding-left: 30px;
+                height: 100%;
+                display: flex;
+                align-items: center;
+                margin-right: 20px;
+                cursor: pointer;
+                .profile{
+                    font-size: 13px;
+                    font-weight: normal;
+                    color: #fff;
+                }
+                &::after{
+                    content: '';
+                    position: absolute;
+                    top: 50%;
+                    transform: translateY(-50%);
+                    left: 0;
+                    width: 24px;
+                    height: 24px;
+                    background: url(../../public/static/images/common/profile_icon.svg)no-repeat center;
+                    background-size: cover;
+                }
+            }
+            .sign-out-box{
+                position: relative;
+                padding-left: 30px;
+                height: 100%;
+                display: flex;
+                align-items: center;
+                margin-right: 20px;
+                cursor: pointer;
+                .sign-out{
+                    font-size: 13px;
+                    font-weight: normal;
+                    color: #fff;
+                }
+                &::after{
+                    content: '';
+                    position: absolute;
+                    top: 50%;
+                    transform: translateY(-50%);
+                    left: 0;
+                    width: 24px;
+                    height: 24px;
+                    background: url(../../public/static/images/common/signout_icon.svg)no-repeat center;
+                    background-size: cover;
+                }
+            }
+            .select-box{
+                min-width: 165px;
+                margin-right: 8px;
+                >div{
+                    width: 100%;
+                }
+            }
+        }
+    }
+}

src/styles/_reset.scss

@@ -0,0 +1,266 @@
+* {
+    -webkit-text-size-adjust:none;
+    -moz-text-size-adjust:none;
+    -ms-text-size-adjust:none;
+    text-size-adjust: none;
+    box-sizing: content-box
+}
+*, ::after, ::before {
+    box-sizing: border-box;
+}
+html, body{
+    width: 100%;
+    height: 100%;
+    font-size: 16px;
+}
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font: inherit;
+	vertical-align: baseline;
+    font-family: 'Noto Sans JP', sans-serif;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1.4;
+}
+body:first-of-type caption { display:none;}
+
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+    border-collapse: separate;
+    border-spacing:0;
+    border:0 none;
+}
+caption, th, td {
+    text-align:left;
+    font-weight: normal;
+    border:0;
+}
+
+a { 
+    cursor:pointer;
+    color:#000;
+}
+a, a:hover, a:active {
+    text-decoration:none;
+    -webkit-tap-highlight-color: transparent;
+}
+/*form_style*/
+input, select, textarea, button, a, label {
+    -webkit-tap-highlight-color:rgba(0,0,0,0);
+}
+button,input[type=text], input[type=button] {
+    -webkit-appearance: none;
+    -webkit-border-radius: 0;
+    -webkit-appearance:none;
+    appearance: none;
+    border-radius: 0
+}
+input[type=checkbox], input[type=radio] {
+    box-sizing: border-box;
+    padding: 0;
+}
+input, select, button {
+    border:0 none;
+    outline:none;
+    margin:0;
+}
+select {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+}
+select::-ms-expand {
+    display: none;
+}
+::-webkit-input-placeholder {
+    line-height:1;
+    font-weight:300;
+    font-size:0.938rem;
+    letter-spacing:-0.6px;
+    color:#8b8b8b;
+}
+.log-box ::-webkit-input-placeholder{
+    color:#8b8b8b;
+}
+button{
+    background: transparent;
+    font-family: 'Noto Sans JP', sans-serif;
+    border: none;
+    padding: 0;
+    margin: 0;
+    color: inherit;
+    outline: none;
+    cursor: pointer;
+}
+
+
+// button
+.btn-frame{
+    display: inline-block;
+    padding: 0 10px;
+    height: 34px;
+    line-height: 34px;
+    border-radius: 2px;
+    color: #fff;
+    font-size: 12px;
+    font-weight: 400;
+    border: 1px solid #000;
+    text-align: center;
+    font-family: 'Pretendard', sans-serif;
+    transition: color .12s ease-in-out;
+    cursor: pointer;
+    &.block{
+        width: 100%;
+    }
+    &.small{
+        font-family: 'Noto Sans JP', sans-serif;
+        height: 30px;
+        line-height: 30px;
+        font-size: 13px;
+    }
+
+    &.deepgray{
+        background-color: #2C2C2C;
+        border: 1px solid #484848;
+    }
+    &.gray{
+        background-color: #3C3C3C;
+        border: 1px solid #545454;
+    }
+    &.dark{
+        background-color: #1C1C1C;
+        border: 1px solid #484848;
+    }
+}
+
+// select
+.sort-select{
+    position: relative;
+    display: inline-block;
+    min-width: 100px;
+    height: 30px;
+    line-height: 30px;
+    padding: 0 10px;
+    font-size: 13px;
+    background-color: #373737;
+    border: 1px solid #3F3F3F;
+    border-radius: 2px;
+    border-top-left-radius: 2px;
+    color: #fff;
+    cursor: pointer;
+    .select-item-wrap{
+        position: absolute;
+        top: 100%;
+        left: -1px;
+        clip-path:inset(0 0 100% 0);
+        width: calc(100% + 2px);
+        padding: 12px 20px;
+        background-color: #373737;
+        border: 1px solid #3F3F3F;
+        border-radius: 2px;
+        transition: all 0.17s ease-in-out;
+        visibility: hidden;
+        .select-item{
+            font-size: 12px;
+            color: #fff;
+            line-height: 1.4;
+            padding: 8px 0;
+        }
+    }
+    &::after{
+        content: '';
+        position: absolute;
+        top: 50%;
+        right: 7px;
+        transform: translateY(-50%);
+        width: 10px;
+        height: 6px;
+        background: url(../../public/static/images/common/select-arr.svg) no-repeat center;
+        background-size: cover;
+        transition: all .17s ease-in-out;
+    }
+    &.active{
+        .select-item-wrap{
+            clip-path: inset(0 0 0 0);
+            visibility: visible;
+        }
+        &:after{
+            transform: translateY(-50%) rotate(-180deg);
+        }
+    }
+}
+
+// input
+input[type=text]{
+    &.input-origin{
+        display: inline-block;
+        height: 30px;
+        line-height: 30px;
+        border-radius: 2px;
+        background-color: #313131;
+        color: #fff;
+        font-size: 12px;
+        font-weight: 500;
+        font-family: 'Pretendard', sans-serif;
+        padding: 0 10px;
+        &::placeholder{
+            font-size: 12px;
+        }
+    }
+}
+
+// date-picker
+.single-date{
+    input{
+        border-radius: 2px;
+        color: #fff;
+        font-size: 12px;
+        font-family: 'Pretendard', sans-serif;
+        background-color: #313131;
+    }
+}
+.range-date{
+    input{
+        border-radius: 2px;
+        color: #fff;
+        font-size: 12px;
+        font-family: 'Pretendard', sans-serif;
+        background-color: #313131;
+    }
+    .react-datepicker__input-container{
+        button{
+            &:after{
+                display: none;
+            }
+        }
+    }
+}

src/styles/common.scss

@@ -0,0 +1,2 @@
+@import 'fonts.scss';
+@import 'reset.scss';

src/styles/publishpage.scss

@@ -0,0 +1,49 @@
+
+html, body ,h1,div{ margin: 0; padding: 0; }
+ul, li {padding: 0; margin: 0; list-style: none; }
+body, td { line-height: normal;font-style: normal; font-variant: normal; font-size: 12px;  color: #6b6b6b; }
+table { margin-bottom: 150px; border-collapse: collapse; border-spacing: 0; }
+#g_header h1 { height: 60px; line-height: 60px; padding-left: 28px; margin-top: 0; color: #fff; background: #424242;font-size: 24px;  font-family:'Pretendard', 돋움, Sans-Serif;}
+#g_body { padding: 0 30px; }
+.guide_table { width: 100%;border-top:1px solid #424242;table-layout: auto;}
+.guide_table thead th { background: #f1f1f1; text-align: center; padding:20px 3px;border:1px solid #dadada;border-top:1px solid #424242;font-size:15px;font-weight: 600; font-family:'Pretendard', 돋움, Sans-Serif;}
+.guide_table tbody td { padding:12px 3px; border: solid 1px #dadada;text-align:left;font-size:13px; font-family:'Pretendard', 돋움, Sans-Serif;}
+.t-center{text-align:center!important;}	
+.contents h3{font-size: 16px; margin: 10px 0;}
+.red { color: #ff0000;}
+.blues { color: #001aff;}
+.guide_table tbody td a{color: #001aff; text-decoration: underline;}
+.design_summary_web,
+.design_summary_tab,
+.design_summary_mob { display: inline-block; color: rosybrown; font-weight: bold; font-size: 12px; margin-right: 30px; }
+.coding_summary_web,
+.coding_summary_tab,
+.coding_summary_mob { display: inline-block; color: red; font-weight: bold; font-size: 12px; margin-right: 30px; }
+.dev_summary { display: inline-block; color: green; font-weight: bold; font-size: 12px; margin-right: 30px; }
+.coding_stat_web,
+.coding_stat_tab,
+.coding_stat_mob { background: #ffffff;color:#333;text-align:center!important;}
+.coding_stat_web.final,
+.coding_stat_tab.final,
+.coding_stat_mob.final { background: rgb(255, 116, 98);color:rgb(255, 255, 255);text-align:center!important;}
+.dev_stat_web,
+.dev_stat_web,
+.dev_stat_web { background: rosybrown; color: #fff; }
+.bg_gray { background: #f0f0f0; }
+.tab_li > li { float: left; width: 90px; height: 30px; line-height: 30px; text-align: center; background: #424242; color: #fff; margin-right: 5px; margin-bottom: 5px; }
+.tab_li > li > a { color: #fff; text-decoration: none; display: block; }
+.tab_li > li.on { font-weight: bold; text-decoration: underline; font-size: 16px; }
+td strong {font-size:14px;font-weight:600; color: rgb(0, 0, 0); }
+td strong.title { color: #000; }
+.auto-style1 { height: 20px; }
+.auto-style2 { background: #ddffca; height: 20px; }
+.mt-9{margin-bottom:9px;}
+.exple{margin:10px 0;font-size:18px;}
+.exple span{font-weight:600;}
+.mb10{margin-bottom:5px;}
+.mt10{margin-top:10px;}
+@media (max-width:640px){
+    .guide_table thead tr th:nth-of-type(3){display:none;}
+    .guide_table tbody tr td.coding_stat_web{display:none;}
+    .guide_table col:nth-of-type(3){display:none;}
+}

src/styles/style.scss

@@ -1,23 +1,2 @@
-@import '_test.scss';
-
-body {
-  padding: 0;
-  margin: 0;
-  font-family: RoomNo, sans-serif;
-}
-
-.font-test {
-  font-family: 'RoomNo';
-}
-
-.image-test {
-  background-image: url('/static/images/thomas-tastet-hSODeSbvzE0-unsplash.jpg');
-  width: 200px;
-  height: 200px;
-}
-
-@font-face {
-  font-family: 'RoomNo';
-  font-weight: 200;
-  src: url('/fonts/Room No.703.ttf') format('truetype');
-}
+@import '_layout.scss';
+@import '_contents.scss';