diff --git a/package.json b/package.json index 540ea5a..d867e17 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,8 @@ "next": "15.3.1", "react": "^19.0.0", "react-dom": "^19.0.0", - "sass": "^1.87.0" + "sass": "^1.87.0", + "swiper": "^11.2.6" }, "devDependencies": { "@tailwindcss/postcss": "^4", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 06c9e5f..f253bef 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -20,6 +20,9 @@ importers: sass: specifier: ^1.87.0 version: 1.87.0 + swiper: + specifier: ^11.2.6 + version: 11.2.6 devDependencies: '@tailwindcss/postcss': specifier: ^4 @@ -640,6 +643,10 @@ packages: babel-plugin-macros: optional: true + swiper@11.2.6: + resolution: {integrity: sha512-8aXpYKtjy3DjcbzZfz+/OX/GhcU5h+looA6PbAzHMZT6ESSycSp9nAjPCenczgJyslV+rUGse64LMGpWE3PX9Q==} + engines: {node: '>= 4.7.0'} + tailwindcss@4.1.4: resolution: {integrity: sha512-1ZIUqtPITFbv/DxRmDr5/agPqJwF69d24m9qmM1939TJehgY539CtzeZRjbLt5G6fSy/7YqqYsfvoTEw9xUI2A==} @@ -1157,6 +1164,8 @@ snapshots: client-only: 0.0.1 react: 19.1.0 + swiper@11.2.6: {} + tailwindcss@4.1.4: {} tapable@2.2.1: {} diff --git a/public/assets/fonts/NotoSansJP-Black.woff b/public/assets/fonts/NotoSansJP-Black.woff new file mode 100644 index 0000000..6d1eb87 Binary files /dev/null and b/public/assets/fonts/NotoSansJP-Black.woff differ diff --git a/public/assets/fonts/NotoSansJP-Black.woff2 b/public/assets/fonts/NotoSansJP-Black.woff2 new file mode 100644 index 0000000..57b73ce Binary files /dev/null and b/public/assets/fonts/NotoSansJP-Black.woff2 differ diff --git a/public/assets/fonts/NotoSansJP-Bold.woff b/public/assets/fonts/NotoSansJP-Bold.woff new file mode 100644 index 0000000..528d5dc Binary files /dev/null and b/public/assets/fonts/NotoSansJP-Bold.woff differ diff --git a/public/assets/fonts/NotoSansJP-Bold.woff2 b/public/assets/fonts/NotoSansJP-Bold.woff2 new file mode 100644 index 0000000..7385f01 Binary files /dev/null and b/public/assets/fonts/NotoSansJP-Bold.woff2 differ diff --git a/public/assets/fonts/NotoSansJP-ExtraBold.woff b/public/assets/fonts/NotoSansJP-ExtraBold.woff new file mode 100644 index 0000000..3d5b403 Binary files /dev/null and b/public/assets/fonts/NotoSansJP-ExtraBold.woff differ diff --git a/public/assets/fonts/NotoSansJP-ExtraBold.woff2 b/public/assets/fonts/NotoSansJP-ExtraBold.woff2 new file mode 100644 index 0000000..e23b593 Binary files /dev/null and b/public/assets/fonts/NotoSansJP-ExtraBold.woff2 differ diff --git a/public/assets/fonts/NotoSansJP-ExtraLight.woff b/public/assets/fonts/NotoSansJP-ExtraLight.woff new file mode 100644 index 0000000..8d60693 Binary files /dev/null and b/public/assets/fonts/NotoSansJP-ExtraLight.woff differ diff --git a/public/assets/fonts/NotoSansJP-ExtraLight.woff2 b/public/assets/fonts/NotoSansJP-ExtraLight.woff2 new file mode 100644 index 0000000..c43674f Binary files /dev/null and b/public/assets/fonts/NotoSansJP-ExtraLight.woff2 differ diff --git a/public/assets/fonts/NotoSansJP-Light.woff b/public/assets/fonts/NotoSansJP-Light.woff new file mode 100644 index 0000000..dbe70e4 Binary files /dev/null and b/public/assets/fonts/NotoSansJP-Light.woff differ diff --git a/public/assets/fonts/NotoSansJP-Light.woff2 b/public/assets/fonts/NotoSansJP-Light.woff2 new file mode 100644 index 0000000..d0ead44 Binary files /dev/null and b/public/assets/fonts/NotoSansJP-Light.woff2 differ diff --git a/public/assets/fonts/NotoSansJP-Medium.woff b/public/assets/fonts/NotoSansJP-Medium.woff new file mode 100644 index 0000000..fdfffa1 Binary files /dev/null and b/public/assets/fonts/NotoSansJP-Medium.woff differ diff --git a/public/assets/fonts/NotoSansJP-Medium.woff2 b/public/assets/fonts/NotoSansJP-Medium.woff2 new file mode 100644 index 0000000..5d3da28 Binary files /dev/null and b/public/assets/fonts/NotoSansJP-Medium.woff2 differ diff --git a/public/assets/fonts/NotoSansJP-Regular.woff b/public/assets/fonts/NotoSansJP-Regular.woff new file mode 100644 index 0000000..cad2210 Binary files /dev/null and b/public/assets/fonts/NotoSansJP-Regular.woff differ diff --git a/public/assets/fonts/NotoSansJP-Regular.woff2 b/public/assets/fonts/NotoSansJP-Regular.woff2 new file mode 100644 index 0000000..d31b328 Binary files /dev/null and b/public/assets/fonts/NotoSansJP-Regular.woff2 differ diff --git a/public/assets/fonts/NotoSansJP-SemiBold.woff b/public/assets/fonts/NotoSansJP-SemiBold.woff new file mode 100644 index 0000000..2922f15 Binary files /dev/null and b/public/assets/fonts/NotoSansJP-SemiBold.woff differ diff --git a/public/assets/fonts/NotoSansJP-SemiBold.woff2 b/public/assets/fonts/NotoSansJP-SemiBold.woff2 new file mode 100644 index 0000000..4ec2170 Binary files /dev/null and b/public/assets/fonts/NotoSansJP-SemiBold.woff2 differ diff --git a/public/assets/fonts/NotoSansJP-Thin.woff b/public/assets/fonts/NotoSansJP-Thin.woff new file mode 100644 index 0000000..517b984 Binary files /dev/null and b/public/assets/fonts/NotoSansJP-Thin.woff differ diff --git a/public/assets/fonts/NotoSansJP-Thin.woff2 b/public/assets/fonts/NotoSansJP-Thin.woff2 new file mode 100644 index 0000000..85a6b50 Binary files /dev/null and b/public/assets/fonts/NotoSansJP-Thin.woff2 differ diff --git a/public/assets/fonts/Pretendard-Black.woff b/public/assets/fonts/Pretendard-Black.woff new file mode 100644 index 0000000..20b0641 Binary files /dev/null and b/public/assets/fonts/Pretendard-Black.woff differ diff --git a/public/assets/fonts/Pretendard-Black.woff2 b/public/assets/fonts/Pretendard-Black.woff2 new file mode 100644 index 0000000..306697c Binary files /dev/null and b/public/assets/fonts/Pretendard-Black.woff2 differ diff --git a/public/assets/fonts/Pretendard-Bold.woff b/public/assets/fonts/Pretendard-Bold.woff new file mode 100644 index 0000000..bfc573c Binary files /dev/null and b/public/assets/fonts/Pretendard-Bold.woff differ diff --git a/public/assets/fonts/Pretendard-Bold.woff2 b/public/assets/fonts/Pretendard-Bold.woff2 new file mode 100644 index 0000000..d99618c Binary files /dev/null and b/public/assets/fonts/Pretendard-Bold.woff2 differ diff --git a/public/assets/fonts/Pretendard-ExtraBold.woff b/public/assets/fonts/Pretendard-ExtraBold.woff new file mode 100644 index 0000000..14a61ab Binary files /dev/null and b/public/assets/fonts/Pretendard-ExtraBold.woff differ diff --git a/public/assets/fonts/Pretendard-ExtraBold.woff2 b/public/assets/fonts/Pretendard-ExtraBold.woff2 new file mode 100644 index 0000000..d7a908e Binary files /dev/null and b/public/assets/fonts/Pretendard-ExtraBold.woff2 differ diff --git a/public/assets/fonts/Pretendard-ExtraLight.woff b/public/assets/fonts/Pretendard-ExtraLight.woff new file mode 100644 index 0000000..a7af8a2 Binary files /dev/null and b/public/assets/fonts/Pretendard-ExtraLight.woff differ diff --git a/public/assets/fonts/Pretendard-ExtraLight.woff2 b/public/assets/fonts/Pretendard-ExtraLight.woff2 new file mode 100644 index 0000000..0c41886 Binary files /dev/null and b/public/assets/fonts/Pretendard-ExtraLight.woff2 differ diff --git a/public/assets/fonts/Pretendard-Light.woff b/public/assets/fonts/Pretendard-Light.woff new file mode 100644 index 0000000..6e00ad2 Binary files /dev/null and b/public/assets/fonts/Pretendard-Light.woff differ diff --git a/public/assets/fonts/Pretendard-Light.woff2 b/public/assets/fonts/Pretendard-Light.woff2 new file mode 100644 index 0000000..805d10c Binary files /dev/null and b/public/assets/fonts/Pretendard-Light.woff2 differ diff --git a/public/assets/fonts/Pretendard-Medium.woff b/public/assets/fonts/Pretendard-Medium.woff new file mode 100644 index 0000000..71b13eb Binary files /dev/null and b/public/assets/fonts/Pretendard-Medium.woff differ diff --git a/public/assets/fonts/Pretendard-Medium.woff2 b/public/assets/fonts/Pretendard-Medium.woff2 new file mode 100644 index 0000000..a96e69b Binary files /dev/null and b/public/assets/fonts/Pretendard-Medium.woff2 differ diff --git a/public/assets/fonts/Pretendard-Regular.woff b/public/assets/fonts/Pretendard-Regular.woff new file mode 100644 index 0000000..741be57 Binary files /dev/null and b/public/assets/fonts/Pretendard-Regular.woff differ diff --git a/public/assets/fonts/Pretendard-Regular.woff2 b/public/assets/fonts/Pretendard-Regular.woff2 new file mode 100644 index 0000000..a5d5aea Binary files /dev/null and b/public/assets/fonts/Pretendard-Regular.woff2 differ diff --git a/public/assets/fonts/Pretendard-SemiBold.woff b/public/assets/fonts/Pretendard-SemiBold.woff new file mode 100644 index 0000000..7bf2860 Binary files /dev/null and b/public/assets/fonts/Pretendard-SemiBold.woff differ diff --git a/public/assets/fonts/Pretendard-SemiBold.woff2 b/public/assets/fonts/Pretendard-SemiBold.woff2 new file mode 100644 index 0000000..d5a7717 Binary files /dev/null and b/public/assets/fonts/Pretendard-SemiBold.woff2 differ diff --git a/public/assets/fonts/Pretendard-Thin.woff b/public/assets/fonts/Pretendard-Thin.woff new file mode 100644 index 0000000..665fe44 Binary files /dev/null and b/public/assets/fonts/Pretendard-Thin.woff differ diff --git a/public/assets/fonts/Pretendard-Thin.woff2 b/public/assets/fonts/Pretendard-Thin.woff2 new file mode 100644 index 0000000..8ce8ee2 Binary files /dev/null and b/public/assets/fonts/Pretendard-Thin.woff2 differ diff --git a/public/assets/images/common/btn_arr.svg b/public/assets/images/common/btn_arr.svg new file mode 100644 index 0000000..badbdcd --- /dev/null +++ b/public/assets/images/common/btn_arr.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/images/common/btn_clip.svg b/public/assets/images/common/btn_clip.svg new file mode 100644 index 0000000..873fa81 --- /dev/null +++ b/public/assets/images/common/btn_clip.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/assets/images/common/btn_clip_col.svg b/public/assets/images/common/btn_clip_col.svg new file mode 100644 index 0000000..c61378e --- /dev/null +++ b/public/assets/images/common/btn_clip_col.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/assets/images/common/date_icon.svg b/public/assets/images/common/date_icon.svg new file mode 100644 index 0000000..496e239 --- /dev/null +++ b/public/assets/images/common/date_icon.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/public/assets/images/common/id_delete_icon.svg b/public/assets/images/common/id_delete_icon.svg new file mode 100644 index 0000000..0a48671 --- /dev/null +++ b/public/assets/images/common/id_delete_icon.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/public/assets/images/common/id_input_icon.svg b/public/assets/images/common/id_input_icon.svg new file mode 100644 index 0000000..7dd0a4c --- /dev/null +++ b/public/assets/images/common/id_input_icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/images/common/pw_input_icon.svg b/public/assets/images/common/pw_input_icon.svg new file mode 100644 index 0000000..aeedb19 --- /dev/null +++ b/public/assets/images/common/pw_input_icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/images/common/pw_show_icon.svg b/public/assets/images/common/pw_show_icon.svg new file mode 100644 index 0000000..7c10ba0 --- /dev/null +++ b/public/assets/images/common/pw_show_icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/images/common/search_icon.svg b/public/assets/images/common/search_icon.svg new file mode 100644 index 0000000..e83498c --- /dev/null +++ b/public/assets/images/common/search_icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/images/common/select_arr.svg b/public/assets/images/common/select_arr.svg new file mode 100644 index 0000000..a93ba54 --- /dev/null +++ b/public/assets/images/common/select_arr.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/images/common/side_nav_btn.svg b/public/assets/images/common/side_nav_btn.svg new file mode 100644 index 0000000..ab8e609 --- /dev/null +++ b/public/assets/images/common/side_nav_btn.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/assets/images/layout/side_back_btn.svg b/public/assets/images/layout/side_back_btn.svg new file mode 100644 index 0000000..0697f08 --- /dev/null +++ b/public/assets/images/layout/side_back_btn.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/images/layout/side_nav_close.svg b/public/assets/images/layout/side_nav_close.svg new file mode 100644 index 0000000..918071b --- /dev/null +++ b/public/assets/images/layout/side_nav_close.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/images/layout/side_nav_item_arr.svg b/public/assets/images/layout/side_nav_item_arr.svg new file mode 100644 index 0000000..ccbf0e6 --- /dev/null +++ b/public/assets/images/layout/side_nav_item_arr.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/images/layout/side_nav_profile.svg b/public/assets/images/layout/side_nav_profile.svg new file mode 100644 index 0000000..582c488 --- /dev/null +++ b/public/assets/images/layout/side_nav_profile.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/assets/images/layout/side_swiper_icon01.svg b/public/assets/images/layout/side_swiper_icon01.svg new file mode 100644 index 0000000..63fe798 --- /dev/null +++ b/public/assets/images/layout/side_swiper_icon01.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/public/assets/images/layout/side_swiper_icon02.svg b/public/assets/images/layout/side_swiper_icon02.svg new file mode 100644 index 0000000..0ea547c --- /dev/null +++ b/public/assets/images/layout/side_swiper_icon02.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/app/globals.css b/src/app/globals.css deleted file mode 100644 index a2dc41e..0000000 --- a/src/app/globals.css +++ /dev/null @@ -1,26 +0,0 @@ -@import "tailwindcss"; - -:root { - --background: #ffffff; - --foreground: #171717; -} - -@theme inline { - --color-background: var(--background); - --color-foreground: var(--foreground); - --font-sans: var(--font-geist-sans); - --font-mono: var(--font-geist-mono); -} - -@media (prefers-color-scheme: dark) { - :root { - --background: #0a0a0a; - --foreground: #ededed; - } -} - -body { - background: var(--background); - color: var(--foreground); - font-family: Arial, Helvetica, sans-serif; -} diff --git a/src/app/inputcommon/page.tsx b/src/app/inputcommon/page.tsx new file mode 100644 index 0000000..05c29ea --- /dev/null +++ b/src/app/inputcommon/page.tsx @@ -0,0 +1,202 @@ +'use client' +import { useState } from "react" + +export default function InputCommon() { + const [fileName, setFileName] = useState(null); //file name value + + return ( +
+
+

Input

+
+ + + + + + +
+ + + setFileName(e.target.files?.[0] ?? null)}/> +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+

Button

+
+ + + + + + + + + + + + + +
+
+
+

Check Box

+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+

Radio Button

+
+
+ + +
+
+ + +
+
+ + +
+
+
+
+

Toggle Button

+
+
+ +
+
+
+
+

Select Box

+
+ + +
+ + + +
+
+
+
+

TextArea

+
+ + +
+
+ +
+ ) +} \ No newline at end of file diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 9013a19..f44ee12 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,7 +1,6 @@ import type { Metadata } from "next"; import { Geist, Geist_Mono } from "next/font/google"; -import "./globals.css"; -import "../styles/test.sass"; +import '@/styles/style.scss' const geistSans = Geist({ variable: "--font-geist-sans", @@ -29,7 +28,6 @@ export default function RootLayout({ className={`${geistSans.variable} ${geistMono.variable} antialiased`} > {children} -
test
); diff --git a/src/app/main/page.tsx b/src/app/main/page.tsx new file mode 100644 index 0000000..4528f45 --- /dev/null +++ b/src/app/main/page.tsx @@ -0,0 +1,14 @@ +import Footer from "@/components/layouts/Footer"; +import Header from "@/components/layouts/Header"; + +export default function Layout(){ + return( +
+
+
+ asdasd +
+
+
+ ) +} \ No newline at end of file diff --git a/src/app/page.tsx b/src/app/page.tsx index e68abe6..63d267d 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,103 +1,9 @@ -import Image from "next/image"; +import PublishList from "@/components/PublishList/PublishList"; export default function Home() { return ( -
-
- Next.js logo -
    -
  1. - Get started by editing{" "} - - src/app/page.tsx - - . -
    2. -
  2. - Save and see your changes instantly. -
    3. -
- -
- - Vercel logomark - Deploy now - - - Read our docs - -
-
- +
+
); } diff --git a/src/components/PublishList/PublishList.tsx b/src/components/PublishList/PublishList.tsx new file mode 100644 index 0000000..70431a5 --- /dev/null +++ b/src/components/PublishList/PublishList.tsx @@ -0,0 +1,68 @@ +import Link from 'next/link' +import '@/styles/publishpage.scss' + +export default function PublishList (){ + return( +
+
+

Hanasys 현지조사

+
+
+
+
+
Publish Guide
+
+

※ className은 케밥 케이스 사용 ex) "sample-class"

+

※ img네이밍은 "_"로 사용, 번호 사용시 01, 02 와 같이 2자리 숫자 사용 ex) "img_sample01"

+

※ button, select, checkbox, radio... 등 기본 설정은 InputCommon.jsx에 정의된 내용만 사용

+

※ scss파일 생성시 "_"를 앞에 붙힌 후 생성, 또한 해당 카테고리에 적합한 폴더에 생성

+
+

기본 SetUp Input 모음

+ InputCommon.jsx +
+
+
+
+

Publish List

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Depth01Depth02파일명비고MarkUp완료일
MainMain Page + Main.tsx + + + 2025/04/28
+
+
+
+
+
+ ) +} \ No newline at end of file diff --git a/src/components/layouts/Footer.tsx b/src/components/layouts/Footer.tsx new file mode 100644 index 0000000..8c83970 --- /dev/null +++ b/src/components/layouts/Footer.tsx @@ -0,0 +1,9 @@ +export default function Footer() { + return ( +
+
+ COPYRIGHT©2025 Hanwha Japan All Rights Reserved +
+
+ ) +} \ No newline at end of file diff --git a/src/components/layouts/Header.tsx b/src/components/layouts/Header.tsx new file mode 100644 index 0000000..5ba0864 --- /dev/null +++ b/src/components/layouts/Header.tsx @@ -0,0 +1,112 @@ +'use client' + +import { Swiper, SwiperSlide } from 'swiper/react'; +import 'swiper/css'; +import { useState } from 'react'; +import Link from 'next/link'; + +type HeaderProps = { + name: string; +} + +export default function Header({name}: HeaderProps){ + const [headerAct, setHeaderAct] = useState(false); + + return( +
+
+
+ {/*
+ +
*/} +

{name}

+
+ +
+
+
+
+
+
+
+ profile +
+
+
HONG GILDONG
+
Interplug corp.
+
+
+
+ +
+
+
+ + +
+
+
+ 私は作成した物件 +
+
+ + +
+
+
+ 私は作成したお問 い合わせ +
+
+ + +
+
+
+ 私は作成したお問 い合わせ +
+
+ + +
+ +
+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+
+
+
+
+ ) +} \ No newline at end of file diff --git a/src/styles/abstracts/_index.scss b/src/styles/abstracts/_index.scss new file mode 100644 index 0000000..4745c16 --- /dev/null +++ b/src/styles/abstracts/_index.scss @@ -0,0 +1,2 @@ +@forward 'variables'; +@forward 'mixins'; \ No newline at end of file diff --git a/src/styles/abstracts/_mixins.scss b/src/styles/abstracts/_mixins.scss new file mode 100644 index 0000000..f94b2dd --- /dev/null +++ b/src/styles/abstracts/_mixins.scss @@ -0,0 +1,25 @@ +@mixin flex($gapSize){ + display: flex; + gap: $gapSize; +} + +@mixin ellipsis($col){ + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: $col; + -webkit-box-orient: vertical; +} + +@mixin absoluteCenter{ + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +@mixin defaultFont($size, $weight, $color){ + font-size: $size; + font-weight: $weight; + color: $color; +} \ No newline at end of file diff --git a/src/styles/abstracts/_variables.scss b/src/styles/abstracts/_variables.scss new file mode 100644 index 0000000..1b21ae9 --- /dev/null +++ b/src/styles/abstracts/_variables.scss @@ -0,0 +1,47 @@ +/* color */ +$black-000: #000; +$black-1010: #101010; + +$white-fff: #fff; + +$grey-eee: #eee; +$grey-999: #999; + +$font-c: #2E3A59; +$font-pl-c: #A8B6C7; + +$btn-font-c: #4E637E; + +/* font weight */ +$font-w-100: 100; +$font-w-200: 200; +$font-w-300: 300; +$font-w-400: 400; +$font-w-500: 500; +$font-w-600: 600; +$font-w-700: 700; +$font-w-800: 800; +$font-w-900: 900; + +/* font size */ +$font-s-10: 10px; +$font-s-11: 11px; +$font-s-12: 12px; +$font-s-13: 13px; +$font-s-14: 14px; +$font-s-15: 15px; +$font-s-16: 16px; +$font-s-17: 17px; +$font-s-18: 18px; +$font-s-19: 19px; +$font-s-20: 20px; +$font-s-21: 21px; +$font-s-22: 22px; +$font-s-23: 23px; +$font-s-24: 24px; +$font-s-25: 25px; +$font-s-26: 26px; +$font-s-27: 27px; +$font-s-28: 28px; +$font-s-29: 29px; +$font-s-30: 30px; \ No newline at end of file diff --git a/src/styles/base/_button.scss b/src/styles/base/_button.scss new file mode 100644 index 0000000..42dc8e9 --- /dev/null +++ b/src/styles/base/_button.scss @@ -0,0 +1,91 @@ +@use "../abstracts" as *; + +.btn-frame{ + display:block; + width: 100%; + padding:0 10px; + height:40px; + line-height:40px; + border-radius:4px; + text-align:center; + font-weight:$font-w-600; + font-size:$font-s-13; + color: $btn-font-c; + border: 1px solid #A8B6C7; + transition: all .15s ease-in-out; + cursor:pointer; + &.icon{ + display: flex; + align-items: center; + justify-content: center; + } + &.min{ + height: 30px; + line-height: 30px; + font-weight: $font-w-500; + } + &.login{ + height: 50px; + line-height: 50px; + font-size: $font-s-14; + font-weight: $font-w-600; + background-color: #0081B5; + border-color: #0081B5; + color: $white-fff; + &:hover{ + background-color: #016c96; + } + } + &:disabled{ + opacity: 0.5; + background-color: $grey-eee; + cursor: default; + } + .btn-arr{ + display: block; + width: 7px; + height: 10px; + background: url(/assets/images/common/btn_arr.svg)no-repeat center; + background-size: cover; + margin-left: 12px; + } + .btn-clip{ + display: block; + width: 18px; + height: 18px; + background: url(/assets/images/common/btn_clip.svg)no-repeat center; + background-size: cover; + margin-right: 5px; + transition: all .15s ease-in-out; + } + &.d-blue{ + background-color: #5F738E; + border-color: #5F738E; + color: $white-fff; + &:hover{ + background-color: #466388; + } + } + &.n-blue{ + background-color: #7896BA; + border-color: #7896BA; + color: $white-fff; + &:hover{ + background-color: #668cbb; + } + } + &.l-blue{ + background-color: #A8B6C7; + border-color: #A8B6C7; + color: $white-fff; + } + &.red{ + background-color: #FF5656; + border-color: #FF5656; + color: $white-fff; + &:hover{ + background-color: #db4b4b; + } + } +} + diff --git a/src/styles/base/_check-radio.scss b/src/styles/base/_check-radio.scss new file mode 100644 index 0000000..7467c6c --- /dev/null +++ b/src/styles/base/_check-radio.scss @@ -0,0 +1,205 @@ +@use "../abstracts" as *; + +// check radio 공통 +.check-form-box input[type="checkbox"], +.radio-form-box input[type="radio"]{ + position: static; + margin-left:0; + opacity: 0; + z-index: 1; + flex: 0 0 auto; + cursor: pointer; +} +.check-form-box label, +.radio-form-box label{ + position: relative; + display: inline-block; + margin-bottom:0; + line-height:1.4; + font-size: $font-s-13; + color: $font-c; + vertical-align: top; + word-break:break-all; + cursor: pointer; + -webkit-user-select:none; + -moz-user-select:none; + -ms-user-select:none; + user-select:none; +} + +// check box +.check-form-box{ + position: relative; + label{ + padding-left: 30px; + &::before{ + content: ""; + display: inline-block; + position: absolute; + width: 22px; + height: 22px; + top: -2px; + left: 0; + margin-left: 0px; + border: 1px solid #A8B6C7; + border-radius: 4px; + background-color: #fff; + transition: border 0.15s ease-in-out, color 0.15s ease-in-out; + cursor: pointer; + } + &::after{ + content: ""; + display: inline-block; + position: absolute; + width: 22px; + height: 22px; + top: -2px; + left: 0; + margin-left: 0; + border-color: #fff; + cursor: pointer; + } + } + input[type="checkbox"]:checked + label::before{ + background-color: #A8B6C7; + border-color: #A8B6C7; + } + input[type="checkbox"]:checked + label::after{ + content: ""; + display: inline-block; + position: absolute; + top: -2px; + left: 0%; + width: 7px; + height: 9px; + border: 2px solid #fff; + border-left: none; + border-top: none; + transform: translate(7.75px,4.5px) rotate(45deg); + -ms-transform: translate(7.75px,4.5px) rotate(45deg); + } + input[type="checkbox"]:disabled + label{ + opacity: 0.7; + cursor: default; + } + input[type="checkbox"]:disabled + label::before{ + background-color: #f5f6fa; + cursor: default; + } + input[type="checkbox"]:disabled + label::after{ + cursor: default; + } +} + +// radio box +.radio-form-box{ + position: relative; + label{ + padding-left: 30px; + &::before{ + content: ""; + display: inline-block; + position: absolute; + width: 22px; + height: 22px; + top: -2px; + left: 0; + margin-left: 0; + border: 1px solid #A8B6C7; + border-radius: 100%; + background-color: #fff; + text-align:center; + font-size:17px; + line-height:12px; + transition: border 0.15s ease-in-out, color 0.15s ease-in-out; + cursor: pointer; + } + &::after{ + content: ""; + display: inline-block; + position: absolute; + top: 4px; + left: 6px; + width: 10px; + height: 10px; + background-color: transparent; + border-radius: 50%; + transition: background-color 0.1s ease-in-out; + } + } + + input[type="radio"]:checked + label::after{ + background-color: #A8B6C7; + } + + input[type="radio"]:disabled + label{ + opacity: 0.7; + cursor: default; + } + input[type="radio"]:disabled + label::before{ + background-color: #f5f6fa; + cursor: default; + } + input[type="radio"]:disabled + label::after{ + cursor: default; + } +} + + +//toggle +.toggle-btn { + position: relative; + display: inline-block; + width: 38px; + height: 22px; + input { + display: none; + } + .slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #E9F0F8; + border-radius: 25px; + text-align: center; + line-height: 20px; + color: $white-fff; + font-size: 14px; + font-weight: 400; + transition: .4s; + &:after { + content: ''; + position: absolute; + top: 1px; + right: 8px; + color: white; + font-size: 14px; + font-weight: 400; + } + &:before { + position: absolute; + content: ""; + height: 18px; + width: 18px; + left: 2px; + bottom: 2px; + background-color: $white-fff; + transition: .4s; + border-radius: 50%; + } + } + input:checked + .slider { + background-color: #A8B6C7; + &:after { + content: ''; + left: 10px; + right: auto; + } + &:before { + transform: translateX(16px); + } + } +} diff --git a/src/styles/base/_fonts.scss b/src/styles/base/_fonts.scss new file mode 100644 index 0000000..1c41522 --- /dev/null +++ b/src/styles/base/_fonts.scss @@ -0,0 +1,199 @@ +@font-face { + font-family: 'Noto Sans JP'; + src: url('/assets/fonts/NotoSansJP-ExtraBold.woff2') format('woff2'), + url('/assets/fonts/NotoSansJP-ExtraBold.woff') format('woff'); + font-weight: bold; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Noto Sans JP'; + src: url('/assets/fonts/NotoSansJP-Bold.woff2') format('woff2'), + url('/assets/fonts/NotoSansJP-Bold.woff') format('woff'); + font-weight: bold; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Noto Sans JP'; + src: url('/assets/fonts/NotoSansJP-Black.woff2') format('woff2'), + url('/assets/fonts/NotoSansJP-Black.woff') format('woff'); + font-weight: 900; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Noto Sans JP'; + src: url('/assets/fonts/NotoSansJP-ExtraLight.woff2') format('woff2'), + url('/assets/fonts/NotoSansJP-ExtraLight.woff') format('woff'); + font-weight: 200; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Noto Sans JP'; + src: url('/assets/fonts/NotoSansJP-Light.woff2') format('woff2'), + url('/assets/fonts/NotoSansJP-Light.woff') format('woff'); + font-weight: 300; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Noto Sans JP'; + src: url('/assets/fonts/NotoSansJP-Medium.woff2') format('woff2'), + url('/assets/fonts/NotoSansJP-Medium.woff') format('woff'); + font-weight: 500; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Noto Sans JP'; + src: url('/assets/fonts/NotoSansJP-Regular.woff2') format('woff2'), + url('/assets/fonts/NotoSansJP-Regular.woff') format('woff'); + font-weight: normal; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Noto Sans JP'; + src: url('/assets/fonts/NotoSansJP-SemiBold.woff2') format('woff2'), + url('/assets/fonts/NotoSansJP-SemiBold.woff') format('woff'); + font-weight: 600; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Noto Sans JP'; + src: url('/assets/fonts/NotoSansJP-Thin.woff2') format('woff2'), + url('/assets/fonts/NotoSansJP-Thin.woff') format('woff'); + font-weight: 100; + font-style: normal; + font-display: swap; +} + +// pretendard +@font-face { + font-family: 'Pretendard'; + src: url('/assets/fonts/Pretendard-Bold.woff2') format('woff2'), + url('/assets/fonts/Pretendard-Bold.woff') format('woff'); + font-weight: bold; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Pretendard'; + src: url('/assets/fonts/Pretendard-ExtraBold.woff2') format('woff2'), + url('/assets/fonts/Pretendard-ExtraBold.woff') format('woff'); + font-weight: bold; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Pretendard'; + src: url('/assets/fonts/Pretendard-ExtraBold.woff2') format('woff2'), + url('/assets/fonts/Pretendard-ExtraBold.woff') format('woff'); + font-weight: bold; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Pretendard'; + src: url('/assets/fonts/Pretendard-ExtraLight.woff2') format('woff2'), + url('/assets/fonts/Pretendard-ExtraLight.woff') format('woff'); + font-weight: 200; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Pretendard'; + src: url('/assets/fonts/Pretendard-ExtraLight.woff2') format('woff2'), + url('/assets/fonts/Pretendard-ExtraLight.woff') format('woff'); + font-weight: 200; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Pretendard'; + src: url('/assets/fonts/Pretendard-Light.woff2') format('woff2'), + url('/assets/fonts/Pretendard-Light.woff') format('woff'); + font-weight: 300; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Pretendard'; + src: url('/assets/fonts/Pretendard-Light.woff2') format('woff2'), + url('/assets/fonts/Pretendard-Light.woff') format('woff'); + font-weight: 300; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Pretendard'; + src: url('/assets/fonts/Pretendard-Medium.woff2') format('woff2'), + url('/assets/fonts/Pretendard-Medium.woff') format('woff'); + font-weight: 500; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Pretendard'; + src: url('/assets/fonts/Pretendard-Medium.woff2') format('woff2'), + url('/assets/fonts/Pretendard-Medium.woff') format('woff'); + font-weight: 500; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Pretendard'; + src: url('/assets/fonts/Pretendard-Regular.woff2') format('woff2'), + url('/assets/fonts/Pretendard-Regular.woff') format('woff'); + font-weight: normal; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Pretendard'; + src: url('/assets/fonts/Pretendard-Black.woff2') format('woff2'), + url('/assets/fonts/Pretendard-Black.woff') format('woff'); + font-weight: 900; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Pretendard'; + src: url('/assets/fonts/Pretendard-Black.woff2') format('woff2'), + url('/assets/fonts/Pretendard-Black.woff') format('woff'); + font-weight: 900; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Pretendard'; + src: url('/assets/fonts/Pretendard-Bold.woff2') format('woff2'), + url('/assets/fonts/Pretendard-Bold.woff') format('woff'); + font-weight: bold; + font-style: normal; + font-display: swap; +} + diff --git a/src/styles/base/_index.scss b/src/styles/base/_index.scss new file mode 100644 index 0000000..f01a11e --- /dev/null +++ b/src/styles/base/_index.scss @@ -0,0 +1,7 @@ +@forward 'fonts'; +@forward 'reset'; +@forward 'utilities'; +@forward 'button'; +@forward 'check-radio'; +@forward 'select-textarea'; +@forward 'inputs'; \ No newline at end of file diff --git a/src/styles/base/_inputs.scss b/src/styles/base/_inputs.scss new file mode 100644 index 0000000..26734e9 --- /dev/null +++ b/src/styles/base/_inputs.scss @@ -0,0 +1,187 @@ +@use "../abstracts" as *; + +input[type='number']{ + -moz-appearance: textfield; +} +input::-webkit-outer-spin-button, +input::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; +} + +// input default +.input-frame { + display: block; + width: 100%; + height: 40px; + padding: 0 10px; + background-color: #fff; + background-clip: padding-box; + border: 1px solid #D5DEE8; + border-radius: 4px; + font-size: $font-s-13; + font-weight: $font-w-400; + color: $font-c; + box-shadow: inset 0 0 0 transparent; + transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; + &::placeholder{ + color: $font-pl-c; + } + &:read-only, + &:disabled{ + background-color: #F5F6FA; + } + &:focus{ + border-color: #4e93dd; + } +} + +//file input +.filebox{ + display: flex; + align-items: center; + width: 100%; + .input-frame{ + flex: 1 1 auto; + margin-right: 5px; + color: #999; + cursor: default; + &:read-only{ + background-color: #fff; + } + &:focus{ + border-color: #e5e6e7; + } + } + .file-upload{ + flex: none; + display: inline-block; + height: 30px; + background-color: #fff; + padding: 0 10px; + border-radius: 2px; + font-size: 13px; + line-height: 30px; + color: #000; + border: 1px solid #000; + font-weight: 500; + cursor: pointer; + transition: background .15s ease-in-out; + } + input[type='file']{ + display: none; + } +} + +// search input +.login-input, +.date-input, +.search-input{ + display: flex; + align-items: center; + width: 100%; + padding: 0 10px; + height: 40px; + font-size: $font-s-13; + color: $font-c; + font-weight: $font-w-400; + background-color: $white-fff; + border: 1px solid #D5DEE8; + border-radius: 4px; + input{ + width: 100%; + height: 100%; + background-color: transparent; + &::placeholder{ + color: $font-pl-c; + } + } +} +.search-input{ + .search-icon{ + flex: none; + width: 24px; + height: 24px; + background: url(/assets/images/common/search_icon.svg)no-repeat center; + background-size: cover; + margin-left: 5px; + } +} +.date-input{ + padding-left: 0; + input{ + padding-left: 10px; + } + .date-btn{ + display: flex; + align-items: center; + justify-content: center; + border-right: 1px solid #D5DEE8; + flex: none; + width: 34px; + height: 100%; + i{ + display: block; + width: 24px; + height: 24px; + background: url(/assets/images/common/date_icon.svg)no-repeat center; + background-size: cover; + } + } +} + +.login-input{ + position: relative; + padding-left: 34px; + padding-right: 0; + &:before{ + content: ''; + position: absolute; + top: 50%; + left: 14px; + transform: translateY(-50%); + background-size: cover; + background-repeat: no-repeat; + background-position: center; + } + &.id{ + &::before{ + width: 10px; + height: 12px; + background-image: url(/assets/images/common/id_input_icon.svg); + } + } + &.pw{ + &::before{ + width: 9px; + height: 12px; + background-image: url(/assets/images/common/pw_input_icon.svg); + } + } + .login-icon{ + display: flex; + align-items: center; + justify-content: center; + width: 40px; + height: 100%; + .del-icon{ + display: block; + width: 16px; + height: 16px; + background: url(/assets/images/common/id_delete_icon.svg)no-repeat center; + background-size: cover; + } + .show-icon{ + display: block; + width: 19px; + height: 14px; + background: url(/assets/images/common/pw_show_icon.svg)no-repeat center; + background-size: cover; + } + &.act{ + .show-icon{ + background: url(/assets/images/common/pw_show_icon.svg)no-repeat center; + } + } + } +} diff --git a/src/styles/base/_reset.scss b/src/styles/base/_reset.scss new file mode 100644 index 0000000..dc2f12e --- /dev/null +++ b/src/styles/base/_reset.scss @@ -0,0 +1,47 @@ +@use "../abstracts" as *; + +* { + -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:$font-s-16;}/*font-size:1rem*/ +html, body, +div,dl, dt, dd, ul, ol, li, +h1, h2, h3, h4, h5, h6, +blockquote, p, address, pre, cite, +form, fieldset, input, textarea, select, +table, th, td {margin:0;padding:0;line-height: 1.4; font-family: 'Noto Sans JP', sans-serif;} + +h1, h2, h3, h4, h5, h6 {font-size:100%;font-weight:normal;} + +fieldset, img, abbr,acronym, input, select, button { border:0 none; background:none;} + +ol, ul { list-style:none; } + +table {border-collapse: collapse;border-spacing:0;border:0 none;} +caption, th, td {text-align:left;font-weight: normal;border:0;} + +address, caption, i, em, cite {font-weight:normal;font-style:normal;} +ins { text-decoration:none; } +del { text-decoration:line-through; } + +blockquote:before, blockquote:after, q:before, q:after { content:""; } +blockquote,q { quotes:"" ""; } + +body:first-of-type caption { display:none;} + +a { cursor:pointer;color: $black-000;} +a, a:hover, a:active {text-decoration:none;-webkit-tap-highlight-color: transparent;} + +button { font-family:inherit; outline:none; margin:0; padding: 0; cursor: pointer;} +textarea { -webkit-appearance: none;appearance: none;border-radius:0;-webkit-border-radius: 0; font-family:inherit; resize: none;border:none;outline:0;} +input { font-family:inherit; -webkit-appearance: none;appearance: none;border-radius:0;-webkit-border-radius: 0; border:none;outline:0;} +img { max-width:100%; } + +select {-webkit-appearance:none;-moz-appearance:none; appearance:none} diff --git a/src/styles/base/_select-textarea.scss b/src/styles/base/_select-textarea.scss new file mode 100644 index 0000000..0e78248 --- /dev/null +++ b/src/styles/base/_select-textarea.scss @@ -0,0 +1,62 @@ +@use "../abstracts" as *; + +// select +.select-form{ + display: block; + width: 100%; + height: 40px; + line-height: 39px; + padding: 0px 36px 0px 10px; + border: 1px solid #D5DEE8; + border-radius: 4px; + font-size: $font-s-13; + font-weight: $font-w-400; + color: $font-c; + background:$white-fff url(/assets/images/common/select_arr.svg) calc(100% - 16px) center no-repeat; + background-size:14px 8px; + box-shadow: inset 0 0 0 transparent; + transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; + cursor: pointer; + &:focus{ + outline: none; + border-color: #4e93dd; + } + &:disabled{ + opacity: 1; + background-color: #F5F6FA; + cursor: default; + } +} +.select-flex-form{ + display: flex; + align-items: center; + width: 100%; + gap: 5px; + .select-form{ + flex: 1 1 auto; + } +} + +// textarea +.textarea-form{ + display: block; + width: 100%; + border: 1px solid #D5DEE8; + border-radius: 4px; + min-height: 100px; + padding: 14px; + font-size: $font-s-13; + font-weight: $font-w-400; + color: $font-c; + transition: border-color .15s ease-in-out; + &:focus{ + border-color: #4e93dd; + } + &:disabled{ + border-color: #D5DEE8; + background-color: #F5F6FA; + } + &::placeholder{ + color: $font-pl-c; + } +} \ No newline at end of file diff --git a/src/styles/base/_utilities.scss b/src/styles/base/_utilities.scss new file mode 100644 index 0000000..8ef8031 --- /dev/null +++ b/src/styles/base/_utilities.scss @@ -0,0 +1,36 @@ +/* align */ +.al-c{text-align: center !important;} +.al-r{text-align: right !important;} +.al-l{text-align: left !important;} + +/* text-transform */ +.text-uppercase { text-transform: uppercase; } +.text-lowercase { text-transform: lowercase; } +.text-capitalize { text-transform: capitalize; } + +/* margin */ +.m0{margin: 0 !important;} +.mt5{margin-top: 5px !important;} +.mt10{margin-top: 10px !important;} +.mt15{margin-top: 15px !important;} +.mt20{margin-top: 20px !important;} +.mt25{margin-top: 25px !important;} +.mt30{margin-top: 30px !important;} +.mb5{margin-bottom: 5px !important;} +.mb10{margin-bottom: 10px !important;} +.mb15{margin-bottom: 15px !important;} +.mb20{margin-bottom: 20px !important;} +.mb25{margin-bottom: 25px !important;} +.mb30{margin-bottom: 30px !important;} +.mr5{margin-right: 5px !important;} +.mr10{margin-right: 10px !important;} +.mr15{margin-right: 15px !important;} +.mr20{margin-right: 20px !important;} +.mr25{margin-right: 25px !important;} +.mr30{margin-right: 30px !important;} +.ml5{margin-left: 5px !important;} +.ml10{margin-left: 10px !important;} +.ml15{margin-left: 15px !important;} +.ml20{margin-left: 20px !important;} +.ml25{margin-left: 25px !important;} +.ml30{margin-left: 30px !important;} \ No newline at end of file diff --git a/src/styles/layout/_index.scss b/src/styles/layout/_index.scss new file mode 100644 index 0000000..c1e1dee --- /dev/null +++ b/src/styles/layout/_index.scss @@ -0,0 +1,2 @@ +@forward 'pop-common'; +@forward 'layout'; \ No newline at end of file diff --git a/src/styles/layout/_layout.scss b/src/styles/layout/_layout.scss new file mode 100644 index 0000000..bc1fbf7 --- /dev/null +++ b/src/styles/layout/_layout.scss @@ -0,0 +1,253 @@ +@use "../abstracts" as *; + +// 기본 Frame +.wrap{ + display: flex; + flex-direction: column; + width: 100%; + min-height: 100vh; + overflow-x: hidden; + .container{ + flex: 1 1 auto; + } +} + +// header +.header-warp{ + height: 66px; + z-index: 900000; +} +header{ + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 66px; + border-bottom:1px solid rgba(236, 236, 236, 0.80); + background-color: $white-fff; + .header-inner{ + position: relative; + @include flex(0px); + align-items: center; + justify-content: center; + height: 100%; + .back-button-wrap{ + position: absolute; + top: 50%; + left: 20px; + transform: translateY(-50%); + width: 24px; + height: 24px; + .back-button { + display: block; + width: 100%; + height: 100%; + background:url(/assets/images/layout/side_back_btn.svg) no-repeat center; + background-size: cover; + } + } + .logo{ + a{ + @include defaultFont($font-s-18, $font-w-600, $black-1010); + } + } + .side-button-wrap{ + position: absolute; + top: 50%; + right: 20px; + transform: translateY(-50%); + width: 24px; + height: 24px; + .side-button{ + display: block; + width: 100%; + height: 100%; + background:url(/assets/images/common/side_nav_btn.svg) no-repeat center; + background-size: cover; + } + } + } +} + +.side-nav{ + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.70); + opacity: 0; + visibility: hidden; + z-index: 990000; + transition: all .2s ease-in-out; + .side-nav-inner{ + position: absolute; + top: 0; + right: -310px; + width: 310px; + height: 100%; + @include flex(0px); + flex-direction: column; + border-top-left-radius: 16px; + border-bottom-left-radius: 16px; + background-color: #fff; + z-index: 999000; + transition: all .2s ease-in-out; + } + &.active{ + opacity: 1; + visibility: visible; + .side-nav-inner{ + right: 0; + } + } +} + +.side-nav-header{ + @include flex(0px); + align-items: center; + padding: 20px 20px 0 20px; + .side-header-profile{ + + @include flex(12px); + align-items: center; + .profile-img{ + @include flex(0px); + } + .profile-name{ + font-family: 'Pretendard', sans-serif; + @include defaultFont($font-s-15, $font-w-600, $black-1010); + } + .profile-company{ + font-family: 'Pretendard', sans-serif; + @include defaultFont($font-s-12, $font-w-500, #535763); + } + } + .side-close-wrap{ + margin-left: auto; + .side-close-btn{ + width: 24px; + height: 24px; + background: url(/assets/images/layout/side_nav_close.svg)no-repeat center; + background-size: cover; + } + } +} + +.side-swiper-wrap{ + margin-top: 30px; + padding: 0 20px; + .swiper-slide{ + height: auto; + } + .side-swiper-card{ + width: 100%; + height: 100%; + padding: 16px 20px; + background-color: #F4F9FF; + border-radius: 8px; + cursor: pointer; + .side-swiper-icon{ + width: 20px; + height: 20px; + background-position: center; + background-repeat: no-repeat; + background-size: cover; + margin-bottom: 8px; + &.icon01{ + background-image: url(/assets/images/layout/side_swiper_icon01.svg) + } + &.icon02{ + background-image: url(/assets/images/layout/side_swiper_icon02.svg) + } + } + .side-swiper-infor{ + @include defaultFont($font-s-12, $font-w-500, #7896BA); + word-break: keep-all; + } + } +} + +.side-nav-wrap{ + margin-top: 30px; + padding: 0 20px; + height: calc(100% - 247px); + overflow-y: auto; + .side-nav-list{ + .side-nav-item{ + padding: 12px; + margin-bottom: 8px; + button{ + position: relative; + width: 100%; + text-align: left; + padding-right: 10px; + @include defaultFont($font-s-15, $font-w-500, #4B6586); + &:before{ + content: ''; + position: absolute; + top: 50%; + right: 0; + transform: translateY(-50%); + width: 6px; + height: 11px; + background: url(/assets/images/layout/side_nav_item_arr.svg)no-repeat center; + background-size: cover; + } + } + &:last-child{ + margin-bottom: 0; + } + } + } +} + +.side-nav-footer{ + margin-top: 20px; + padding: 0 20px 34px 20px; + .side-footer-list{ + @include flex(0px); + justify-content: center; + align-items: center; + padding-top: 24px; + border-top: 2px solid #EDEDED; + .side-footer-item{ + position: relative; + display: flex; + padding: 0 12px; + button{ + font-family: 'Pretendard', sans-serif; + text-transform: uppercase; + @include defaultFont($font-s-13, $font-w-500, $font-c); + &.bold{ + font-weight: $font-w-600; + } + } + &::before{ + content: ''; + position: absolute; + top: 50%; + right: 0; + transform: translateY(-50%); + width: 1px; + height: 10px; + background-color: #EDEDED; + } + &:last-child{ + &::before{ + display: none; + } + } + } + } +} + +// footer +footer{ + padding: 24px 20px; + .footer-inner{ + font-family: 'Pretendard', sans-serif; + text-align: center; + @include defaultFont($font-s-11, $font-w-400, #9F9F9F); + } +} \ No newline at end of file diff --git a/src/styles/layout/_pop-common.scss b/src/styles/layout/_pop-common.scss new file mode 100644 index 0000000..00c6cdd --- /dev/null +++ b/src/styles/layout/_pop-common.scss @@ -0,0 +1,53 @@ +@use '../abstracts' as *; + +.modal-popup{ + position: fixed; + top: 0; + left: 0; + width:100%; + height:100%; + overflow-x: hidden; + overflow-y: auto; + background:rgba(0,0,0,.75); + z-index:110000; + .modal-dialog { + position: relative; + display: flex; + align-items: center; + min-height: calc(100% - (24px * 2)); + max-width: 860px; + z-index:111000; + margin: 24px auto; + pointer-events: none; + font-size: $font-s-14; + .modal-content{ + flex:1; + position: relative; + margin: 0 16px; + background-clip: padding-box; + background-color: $white-fff; + outline: 0 none; + pointer-events: auto; + .modal-header { + display: block; + position:relative; + padding:10px + } + .modal-body { + position: relative; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + padding: 10px; + } + .modal-footer { + display: -ms-flexbox; + display: flex; + -ms-flex-align: center; + align-items: center; + -ms-flex-pack: end; + justify-content: flex-end; + padding: 10px; + } + } + } +} \ No newline at end of file diff --git a/src/styles/publishpage.scss b/src/styles/publishpage.scss new file mode 100644 index 0000000..64e89e0 --- /dev/null +++ b/src/styles/publishpage.scss @@ -0,0 +1,124 @@ +@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap'); + +$default-color: #2C2C2C; + +.l{text-align: left !important;} +.c{text-align: center !important;} +.r{text-align: right !important;} + +.red{color: #F00;} + +.publish-list { + font-family: "Noto Sans", sans-serif; + font-optical-sizing: auto; + font-style: normal; + font-variation-settings:"wdth" 100; + display: flex; + flex-direction: column; + width: 100%; + min-height: 100vh; +} +.p-header{ + padding: 20px; + background-color: $default-color; + text-align: center; + h1{ + font-size: 34px; + color: #fff; + font-weight: 600; + } +} + +.p-body{ + margin-top: 30px; + flex: 1 1 auto; + .p-contents{ + max-width: 1480px; + margin: 0 auto; + } +} + +.p-guide{ + border: 1px solid $default-color; + border-radius: 4px; + .p-guide-header{ + font-size: 16px; + color: #fff; + background-color: $default-color; + padding: 10px 20px; + border-radius: 4px 4px 0 0; + } + .p-guide-content{ + padding: 10px 20px; + p{ + font-size: 14px; + margin-bottom: 5px; + span{ + color: red; + } + &:last-child{ + margin-bottom: 0; + } + } + } + .p-guide-inputcommon{ + h3{ + font-size: 16px; + margin: 15px 0 5px; + font-weight: 600; + } + a{ + display: block; + border: 1px solid $default-color; + border-radius: 3px; + background-color: $default-color; + color: #fff; + height: 44px; + line-height: 40px; + padding: 0 10px; + text-align: center; + transition: all .15s ease-in-out; + &:hover{ + background-color: #fff; + color: $default-color; + } + } + } +} + +.p-list-wrap{ + margin-top: 25px; + h2{ + font-size: 22px; + font-weight: 500; + } + .p-list-table{ + margin-top: 10px; + table{ + width: 100%; + border-collapse: collapse; + table-layout: fixed; + th{ + background-color: #eee; + color: #2C2C2C; + text-align: center; + font-size: 14px; + font-weight: 600; + padding: 10px; + border: 1px solid #999; + } + td{ + border: 1px solid #999; + padding: 10px; + font-size: 12px; + a{ + text-decoration: underline; + color: blue; + &:visited{ + color: purple; + } + } + } + } + } +} \ No newline at end of file diff --git a/src/styles/style.scss b/src/styles/style.scss new file mode 100644 index 0000000..f4b1988 --- /dev/null +++ b/src/styles/style.scss @@ -0,0 +1,5 @@ +@use 'abstracts'; +@use 'base'; +@use 'layout'; + + diff --git a/src/styles/test.sass b/src/styles/test.sass deleted file mode 100644 index 6eea541..0000000 --- a/src/styles/test.sass +++ /dev/null @@ -1,8 +0,0 @@ -.test - color: red - font-size: 20px - font-weight: bold - text-align: center - margin: 0 auto - padding: 20px - border: 1px solid #000 \ No newline at end of file