diff --git a/public/fonts/NotoSansJP-Black.woff b/public/fonts/NotoSansJP-Black.woff new file mode 100644 index 0000000..6d1eb87 Binary files /dev/null and b/public/fonts/NotoSansJP-Black.woff differ diff --git a/public/fonts/NotoSansJP-Black.woff2 b/public/fonts/NotoSansJP-Black.woff2 new file mode 100644 index 0000000..57b73ce Binary files /dev/null and b/public/fonts/NotoSansJP-Black.woff2 differ diff --git a/public/fonts/NotoSansJP-Bold.woff b/public/fonts/NotoSansJP-Bold.woff new file mode 100644 index 0000000..528d5dc Binary files /dev/null and b/public/fonts/NotoSansJP-Bold.woff differ diff --git a/public/fonts/NotoSansJP-Bold.woff2 b/public/fonts/NotoSansJP-Bold.woff2 new file mode 100644 index 0000000..7385f01 Binary files /dev/null and b/public/fonts/NotoSansJP-Bold.woff2 differ diff --git a/public/fonts/NotoSansJP-ExtraBold.woff b/public/fonts/NotoSansJP-ExtraBold.woff new file mode 100644 index 0000000..3d5b403 Binary files /dev/null and b/public/fonts/NotoSansJP-ExtraBold.woff differ diff --git a/public/fonts/NotoSansJP-ExtraBold.woff2 b/public/fonts/NotoSansJP-ExtraBold.woff2 new file mode 100644 index 0000000..e23b593 Binary files /dev/null and b/public/fonts/NotoSansJP-ExtraBold.woff2 differ diff --git a/public/fonts/NotoSansJP-ExtraLight.woff b/public/fonts/NotoSansJP-ExtraLight.woff new file mode 100644 index 0000000..8d60693 Binary files /dev/null and b/public/fonts/NotoSansJP-ExtraLight.woff differ diff --git a/public/fonts/NotoSansJP-ExtraLight.woff2 b/public/fonts/NotoSansJP-ExtraLight.woff2 new file mode 100644 index 0000000..c43674f Binary files /dev/null and b/public/fonts/NotoSansJP-ExtraLight.woff2 differ diff --git a/public/fonts/NotoSansJP-Light.woff b/public/fonts/NotoSansJP-Light.woff new file mode 100644 index 0000000..dbe70e4 Binary files /dev/null and b/public/fonts/NotoSansJP-Light.woff differ diff --git a/public/fonts/NotoSansJP-Light.woff2 b/public/fonts/NotoSansJP-Light.woff2 new file mode 100644 index 0000000..d0ead44 Binary files /dev/null and b/public/fonts/NotoSansJP-Light.woff2 differ diff --git a/public/fonts/NotoSansJP-Medium.woff b/public/fonts/NotoSansJP-Medium.woff new file mode 100644 index 0000000..fdfffa1 Binary files /dev/null and b/public/fonts/NotoSansJP-Medium.woff differ diff --git a/public/fonts/NotoSansJP-Medium.woff2 b/public/fonts/NotoSansJP-Medium.woff2 new file mode 100644 index 0000000..5d3da28 Binary files /dev/null and b/public/fonts/NotoSansJP-Medium.woff2 differ diff --git a/public/fonts/NotoSansJP-Regular.woff b/public/fonts/NotoSansJP-Regular.woff new file mode 100644 index 0000000..cad2210 Binary files /dev/null and b/public/fonts/NotoSansJP-Regular.woff differ diff --git a/public/fonts/NotoSansJP-Regular.woff2 b/public/fonts/NotoSansJP-Regular.woff2 new file mode 100644 index 0000000..d31b328 Binary files /dev/null and b/public/fonts/NotoSansJP-Regular.woff2 differ diff --git a/public/fonts/NotoSansJP-SemiBold.woff b/public/fonts/NotoSansJP-SemiBold.woff new file mode 100644 index 0000000..2922f15 Binary files /dev/null and b/public/fonts/NotoSansJP-SemiBold.woff differ diff --git a/public/fonts/NotoSansJP-SemiBold.woff2 b/public/fonts/NotoSansJP-SemiBold.woff2 new file mode 100644 index 0000000..4ec2170 Binary files /dev/null and b/public/fonts/NotoSansJP-SemiBold.woff2 differ diff --git a/public/fonts/NotoSansJP-Thin.woff b/public/fonts/NotoSansJP-Thin.woff new file mode 100644 index 0000000..517b984 Binary files /dev/null and b/public/fonts/NotoSansJP-Thin.woff differ diff --git a/public/fonts/NotoSansJP-Thin.woff2 b/public/fonts/NotoSansJP-Thin.woff2 new file mode 100644 index 0000000..85a6b50 Binary files /dev/null and b/public/fonts/NotoSansJP-Thin.woff2 differ diff --git a/public/fonts/Pretendard-Black.woff b/public/fonts/Pretendard-Black.woff new file mode 100644 index 0000000..20b0641 Binary files /dev/null and b/public/fonts/Pretendard-Black.woff differ diff --git a/public/fonts/Pretendard-Black.woff2 b/public/fonts/Pretendard-Black.woff2 new file mode 100644 index 0000000..306697c Binary files /dev/null and b/public/fonts/Pretendard-Black.woff2 differ diff --git a/public/fonts/Pretendard-Bold.woff b/public/fonts/Pretendard-Bold.woff new file mode 100644 index 0000000..bfc573c Binary files /dev/null and b/public/fonts/Pretendard-Bold.woff differ diff --git a/public/fonts/Pretendard-Bold.woff2 b/public/fonts/Pretendard-Bold.woff2 new file mode 100644 index 0000000..d99618c Binary files /dev/null and b/public/fonts/Pretendard-Bold.woff2 differ diff --git a/public/fonts/Pretendard-ExtraBold.woff b/public/fonts/Pretendard-ExtraBold.woff new file mode 100644 index 0000000..14a61ab Binary files /dev/null and b/public/fonts/Pretendard-ExtraBold.woff differ diff --git a/public/fonts/Pretendard-ExtraBold.woff2 b/public/fonts/Pretendard-ExtraBold.woff2 new file mode 100644 index 0000000..d7a908e Binary files /dev/null and b/public/fonts/Pretendard-ExtraBold.woff2 differ diff --git a/public/fonts/Pretendard-ExtraLight.woff b/public/fonts/Pretendard-ExtraLight.woff new file mode 100644 index 0000000..a7af8a2 Binary files /dev/null and b/public/fonts/Pretendard-ExtraLight.woff differ diff --git a/public/fonts/Pretendard-ExtraLight.woff2 b/public/fonts/Pretendard-ExtraLight.woff2 new file mode 100644 index 0000000..0c41886 Binary files /dev/null and b/public/fonts/Pretendard-ExtraLight.woff2 differ diff --git a/public/fonts/Pretendard-Light.woff b/public/fonts/Pretendard-Light.woff new file mode 100644 index 0000000..6e00ad2 Binary files /dev/null and b/public/fonts/Pretendard-Light.woff differ diff --git a/public/fonts/Pretendard-Light.woff2 b/public/fonts/Pretendard-Light.woff2 new file mode 100644 index 0000000..805d10c Binary files /dev/null and b/public/fonts/Pretendard-Light.woff2 differ diff --git a/public/fonts/Pretendard-Medium.woff b/public/fonts/Pretendard-Medium.woff new file mode 100644 index 0000000..71b13eb Binary files /dev/null and b/public/fonts/Pretendard-Medium.woff differ diff --git a/public/fonts/Pretendard-Medium.woff2 b/public/fonts/Pretendard-Medium.woff2 new file mode 100644 index 0000000..a96e69b Binary files /dev/null and b/public/fonts/Pretendard-Medium.woff2 differ diff --git a/public/fonts/Pretendard-Regular.woff b/public/fonts/Pretendard-Regular.woff new file mode 100644 index 0000000..741be57 Binary files /dev/null and b/public/fonts/Pretendard-Regular.woff differ diff --git a/public/fonts/Pretendard-Regular.woff2 b/public/fonts/Pretendard-Regular.woff2 new file mode 100644 index 0000000..a5d5aea Binary files /dev/null and b/public/fonts/Pretendard-Regular.woff2 differ diff --git a/public/fonts/Pretendard-SemiBold.woff b/public/fonts/Pretendard-SemiBold.woff new file mode 100644 index 0000000..7bf2860 Binary files /dev/null and b/public/fonts/Pretendard-SemiBold.woff differ diff --git a/public/fonts/Pretendard-SemiBold.woff2 b/public/fonts/Pretendard-SemiBold.woff2 new file mode 100644 index 0000000..d5a7717 Binary files /dev/null and b/public/fonts/Pretendard-SemiBold.woff2 differ diff --git a/public/fonts/Pretendard-Thin.woff b/public/fonts/Pretendard-Thin.woff new file mode 100644 index 0000000..665fe44 Binary files /dev/null and b/public/fonts/Pretendard-Thin.woff differ diff --git a/public/fonts/Pretendard-Thin.woff2 b/public/fonts/Pretendard-Thin.woff2 new file mode 100644 index 0000000..8ce8ee2 Binary files /dev/null and b/public/fonts/Pretendard-Thin.woff2 differ diff --git a/public/fonts/Room No.703.ttf b/public/fonts/Room No.703.ttf deleted file mode 100644 index 8c2edd4..0000000 Binary files a/public/fonts/Room No.703.ttf and /dev/null differ diff --git a/public/static/images/common/Logo.svg b/public/static/images/common/Logo.svg new file mode 100644 index 0000000..fa04f4d --- /dev/null +++ b/public/static/images/common/Logo.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/public/static/images/common/nav-arr.svg b/public/static/images/common/nav-arr.svg new file mode 100644 index 0000000..a9ddbf4 --- /dev/null +++ b/public/static/images/common/nav-arr.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/common/profile_icon.svg b/public/static/images/common/profile_icon.svg new file mode 100644 index 0000000..837e4f5 --- /dev/null +++ b/public/static/images/common/profile_icon.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/public/static/images/common/select-arr.svg b/public/static/images/common/select-arr.svg new file mode 100644 index 0000000..aa74665 --- /dev/null +++ b/public/static/images/common/select-arr.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/common/signout_icon.svg b/public/static/images/common/signout_icon.svg new file mode 100644 index 0000000..a20ccdb --- /dev/null +++ b/public/static/images/common/signout_icon.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/app/canvas/page.jsx b/src/app/canvas/page.jsx new file mode 100644 index 0000000..1caf015 --- /dev/null +++ b/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( +
+
+
+
+ +
+
+
+ ) +} \ No newline at end of file diff --git a/src/app/colorpicker/page.jsx b/src/app/colorpicker/page.jsx deleted file mode 100644 index 45cc9dc..0000000 --- a/src/app/colorpicker/page.jsx +++ /dev/null @@ -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 ( - <> -
- -
-
{color}
- - ) -} diff --git a/src/app/datepicker/page.jsx b/src/app/datepicker/page.jsx deleted file mode 100644 index e7a76f5..0000000 --- a/src/app/datepicker/page.jsx +++ /dev/null @@ -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 ( - <> -
- -
-
- -
- - ) -} diff --git a/src/app/favicon.ico b/src/app/favicon.ico deleted file mode 100644 index 718d6fe..0000000 Binary files a/src/app/favicon.ico and /dev/null differ diff --git a/src/app/font-test/page.jsx b/src/app/font-test/page.jsx deleted file mode 100644 index 6952e17..0000000 --- a/src/app/font-test/page.jsx +++ /dev/null @@ -1,7 +0,0 @@ -export default function FontTestPage() { - return ( - <> -
font test
- - ) -} diff --git a/src/app/globals.css b/src/app/globals.css deleted file mode 100644 index 875c01e..0000000 --- a/src/app/globals.css +++ /dev/null @@ -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; - } -} diff --git a/src/app/grid/page.jsx b/src/app/grid/page.jsx index 514efcb..6d95e18 100644 --- a/src/app/grid/page.jsx +++ b/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() diff --git a/src/app/inputwrap/page.jsx b/src/app/inputwrap/page.jsx new file mode 100644 index 0000000..b0b7b57 --- /dev/null +++ b/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( +
+
+

BTN WRAP

+
+ + + +
+
+
+

Select WRAP

+
+ +
+
+
+

Input WRAP

+
+ +
+
+
+

DatePicker WRAP

+
+
+ +
+
+ +
+
+
+
+

colorpicker

+
+ +
+
+
+ ) +} \ No newline at end of file diff --git a/src/app/layout.js b/src/app/layout.js index e4745fe..cd200d7 100644 --- a/src/app/layout.js +++ b/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', diff --git a/src/app/page.js b/src/app/page.js index 07debc9..d7d0570 100644 --- a/src/app/page.js +++ b/src/app/page.js @@ -1,12 +1,11 @@ -import Test from '@/components/Test' +import PublishPage from "@/components/publishpage/PublishPage"; + export default function Home() { return ( <> -

Hello World

-
style test
- +
) diff --git a/src/components/Test.jsx b/src/components/Test.jsx deleted file mode 100644 index df13b65..0000000 --- a/src/components/Test.jsx +++ /dev/null @@ -1,8 +0,0 @@ -export default function Test() { - return ( - <> -

Test Component

-

테스트 컴포넌트 입니다.

- - ) -} diff --git a/src/components/canvas_menu/CanvasMenu.jsx b/src/components/canvas_menu/CanvasMenu.jsx new file mode 100644 index 0000000..eec0532 --- /dev/null +++ b/src/components/canvas_menu/CanvasMenu.jsx @@ -0,0 +1,7 @@ +export default function CanvasMenu() { + return( +
+ +
+ ) +} \ No newline at end of file diff --git a/src/components/colorpicker/ColorPicker.jsx b/src/components/common/colorpicker/ColorPicker.jsx similarity index 57% rename from src/components/colorpicker/ColorPicker.jsx rename to src/components/common/colorpicker/ColorPicker.jsx index fc78d8c..757041e 100644 --- a/src/components/colorpicker/ColorPicker.jsx +++ b/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 ( <>
+

{color}

) } diff --git a/src/components/datepicker/RangeDatePicker.jsx b/src/components/common/datepicker/RangeDatePicker.jsx similarity index 63% rename from src/components/datepicker/RangeDatePicker.jsx rename to src/components/common/datepicker/RangeDatePicker.jsx index ad802f4..660c1b9 100644 --- a/src/components/datepicker/RangeDatePicker.jsx +++ b/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 ( setStartDate(date)} /> } diff --git a/src/components/grid/QGrid.jsx b/src/components/common/grid/QGrid.jsx similarity index 100% rename from src/components/grid/QGrid.jsx rename to src/components/common/grid/QGrid.jsx diff --git a/src/components/modal/QModal.jsx b/src/components/common/modal/QModal.jsx similarity index 100% rename from src/components/modal/QModal.jsx rename to src/components/common/modal/QModal.jsx diff --git a/src/components/common/select/Qselect.jsx b/src/components/common/select/Qselect.jsx new file mode 100644 index 0000000..398ba40 --- /dev/null +++ b/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( +
setSelectAct(!selectAct)}> +

{title}

+ +
+ ) +} \ No newline at end of file diff --git a/src/components/header/Header.jsx b/src/components/header/Header.jsx new file mode 100644 index 0000000..1b55fea --- /dev/null +++ b/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( +
+
+
+

+ +

+ +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+ ) +} \ No newline at end of file diff --git a/src/components/publishpage/PublishPage.jsx b/src/components/publishpage/PublishPage.jsx new file mode 100644 index 0000000..4a075ad --- /dev/null +++ b/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 ( + <> +
+

QCast Japanese

+
+
+
+

Flie List

+

+

+
    +
  • +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
구분Depth파일명퍼블리싱비고
공통Input 설정 모음inputwrap2024-09-05
그리드Grid2024-09-05
CanvasPageCanvasPage2024-09-05
+
+
+ + ) +} diff --git a/src/styles/_contents.scss b/src/styles/_contents.scss new file mode 100644 index 0000000..b37322a --- /dev/null +++ b/src/styles/_contents.scss @@ -0,0 +1 @@ +// CanvasPage diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss new file mode 100644 index 0000000..b1d16e8 --- /dev/null +++ b/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; +} + diff --git a/src/styles/_inputcommon.scss b/src/styles/_inputcommon.scss new file mode 100644 index 0000000..55cceb4 --- /dev/null +++ b/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; + } + } + } +} \ No newline at end of file diff --git a/src/styles/_layout.scss b/src/styles/_layout.scss new file mode 100644 index 0000000..86efdf0 --- /dev/null +++ b/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%; + } + } + } + } +} \ No newline at end of file diff --git a/src/styles/_reset.scss b/src/styles/_reset.scss new file mode 100644 index 0000000..8f4ce2a --- /dev/null +++ b/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; + } + } + } +} \ No newline at end of file diff --git a/src/styles/common.scss b/src/styles/common.scss new file mode 100644 index 0000000..8152784 --- /dev/null +++ b/src/styles/common.scss @@ -0,0 +1,2 @@ +@import 'fonts.scss'; +@import 'reset.scss'; \ No newline at end of file diff --git a/src/styles/publishpage.scss b/src/styles/publishpage.scss new file mode 100644 index 0000000..32d5998 --- /dev/null +++ b/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;} +} \ No newline at end of file diff --git a/src/styles/style.scss b/src/styles/style.scss index 1336cc0..68f4c54 100644 --- a/src/styles/style.scss +++ b/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'; \ No newline at end of file