diff --git a/package.json b/package.json index 13cd1fe..61c7e67 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "react-dom": "^19.0.0", "react-to-pdf": "^2.0.0", "sass": "^1.87.0", + "swiper": "^11.2.6", "zustand": "^5.0.3" }, "devDependencies": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 920681e..08d920f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -41,6 +41,9 @@ importers: sass: specifier: ^1.87.0 version: 1.87.0 + swiper: + specifier: ^11.2.6 + version: 11.2.6 zustand: specifier: ^5.0.3 version: 5.0.3(@types/react@19.0.12)(react@19.1.0) @@ -1306,6 +1309,10 @@ packages: resolution: {integrity: sha512-qsjeeq5YjBZ5eMdFuUa4ZosMLxgr5RZ+F+Y1OrDhuOCEInRMA3x74XdBtggJcj9kOeInz0WE+LgCPDkZFlBYJw==} engines: {node: '>=12.0.0'} + swiper@11.2.6: + resolution: {integrity: sha512-8aXpYKtjy3DjcbzZfz+/OX/GhcU5h+looA6PbAzHMZT6ESSycSp9nAjPCenczgJyslV+rUGse64LMGpWE3PX9Q==} + engines: {node: '>= 4.7.0'} + tailwindcss@4.0.17: resolution: {integrity: sha512-OErSiGzRa6rLiOvaipsDZvLMSpsBZ4ysB4f0VKGXUrjw2jfkJRd6kjRKV2+ZmTCNvwtvgdDam5D7w6WXsdLJZw==} @@ -2534,6 +2541,8 @@ snapshots: svg-pathdata@6.0.3: optional: true + swiper@11.2.6: {} + tailwindcss@4.0.17: {} 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/btn_edit.svg b/public/assets/images/common/btn_edit.svg new file mode 100644 index 0000000..c2db46c --- /dev/null +++ b/public/assets/images/common/btn_edit.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_hide_icon.svg b/public/assets/images/common/pw_hide_icon.svg new file mode 100644 index 0000000..c7565e0 --- /dev/null +++ b/public/assets/images/common/pw_hide_icon.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + 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_del_icon.svg b/public/assets/images/common/search_del_icon.svg new file mode 100644 index 0000000..b6e044e --- /dev/null +++ b/public/assets/images/common/search_del_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/modal_close.svg b/public/assets/images/layout/modal_close.svg new file mode 100644 index 0000000..e8a1829 --- /dev/null +++ b/public/assets/images/layout/modal_close.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/images/layout/modal_header_icon.svg b/public/assets/images/layout/modal_header_icon.svg new file mode 100644 index 0000000..604629e --- /dev/null +++ b/public/assets/images/layout/modal_header_icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/assets/images/layout/modal_header_icon02.svg b/public/assets/images/layout/modal_header_icon02.svg new file mode 100644 index 0000000..2bd5c0f --- /dev/null +++ b/public/assets/images/layout/modal_header_icon02.svg @@ -0,0 +1,6 @@ + + + + + + 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/public/assets/images/main/block_arr.svg b/public/assets/images/main/block_arr.svg new file mode 100644 index 0000000..03c61be --- /dev/null +++ b/public/assets/images/main/block_arr.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/images/main/main_contens_arr.svg b/public/assets/images/main/main_contens_arr.svg new file mode 100644 index 0000000..1e16f03 --- /dev/null +++ b/public/assets/images/main/main_contens_arr.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/images/main/main_icon01.svg b/public/assets/images/main/main_icon01.svg new file mode 100644 index 0000000..12e8423 --- /dev/null +++ b/public/assets/images/main/main_icon01.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/assets/images/main/main_icon02.svg b/public/assets/images/main/main_icon02.svg new file mode 100644 index 0000000..9b67936 --- /dev/null +++ b/public/assets/images/main/main_icon02.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/assets/images/main/main_icon03.svg b/public/assets/images/main/main_icon03.svg new file mode 100644 index 0000000..7462236 --- /dev/null +++ b/public/assets/images/main/main_icon03.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/assets/images/main/main_icon04.svg b/public/assets/images/main/main_icon04.svg new file mode 100644 index 0000000..00a7504 --- /dev/null +++ b/public/assets/images/main/main_icon04.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/assets/images/sub/down_icon.svg b/public/assets/images/sub/down_icon.svg new file mode 100644 index 0000000..3dac9b0 --- /dev/null +++ b/public/assets/images/sub/down_icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/images/sub/top_btn_icon.svg b/public/assets/images/sub/top_btn_icon.svg new file mode 100644 index 0000000..aa7ca4f --- /dev/null +++ b/public/assets/images/sub/top_btn_icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/app/inquiry/page.tsx b/src/app/inquiry/page.tsx new file mode 100644 index 0000000..4e60c5a --- /dev/null +++ b/src/app/inquiry/page.tsx @@ -0,0 +1,7 @@ +export default function page() { + return ( + <> +

1:1 문의

+ + ) +} diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 4766652..6ad7a5e 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,5 +1,7 @@ import type { Metadata } from 'next' import ReactQueryProviders from '@/providers/ReactQueryProvider' +import PopupController from '@/components/ui/PopupController' +import '@/styles/style.scss' export const metadata: Metadata = { title: 'Create Next App', @@ -15,6 +17,7 @@ export default function RootLayout({ {children} + ) diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx new file mode 100644 index 0000000..55261f8 --- /dev/null +++ b/src/app/login/page.tsx @@ -0,0 +1,7 @@ +export default function page() { + return ( + <> +

로그인

+ + ) +} diff --git a/src/app/page.tsx b/src/app/page.tsx index da203cb..e731b65 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,7 +1,17 @@ +import Footer from '@/components/ui/common/Footer' +import Header from '@/components/ui/common/Header' +import Main from '@/components/ui/Main' + export default async function Home() { return ( <> -

퍼블 작업 대기중

+
+
+
+
+
+
+
) } diff --git a/src/app/suitable/page.tsx b/src/app/suitable/page.tsx new file mode 100644 index 0000000..10e60d6 --- /dev/null +++ b/src/app/suitable/page.tsx @@ -0,0 +1,7 @@ +export default function page() { + return ( + <> +

지붕재 적합성

+ + ) +} diff --git a/src/app/survey-sale/page.tsx b/src/app/survey-sale/page.tsx new file mode 100644 index 0000000..cd29fcc --- /dev/null +++ b/src/app/survey-sale/page.tsx @@ -0,0 +1,7 @@ +export default function page() { + return ( + <> +

조사 매물

+ + ) +} diff --git a/src/components/Suitable.tsx b/src/components/Suitable.tsx deleted file mode 100644 index f5766f1..0000000 --- a/src/components/Suitable.tsx +++ /dev/null @@ -1,30 +0,0 @@ -'use client' - -import { suitableApi } from '@/api/suitable' -import { useQuery } from '@tanstack/react-query' -import { useRouter } from 'next/navigation' - -export default function Suitable() { - const router = useRouter() - const { data, error, isPending } = useQuery({ - queryKey: ['suitable-list'], - queryFn: suitableApi.getList, - }) - - return ( - <> -

Suitable

- - {error &&
Error: {error.message}
} - {isPending &&
Loading...
} - {data && data.map((item) =>
{item.product_name}
)} - - ) -} diff --git a/src/components/SuitableDetails.tsx b/src/components/SuitableDetails.tsx deleted file mode 100644 index 795fcdc..0000000 --- a/src/components/SuitableDetails.tsx +++ /dev/null @@ -1,23 +0,0 @@ -'use client' - -import { Suitable, suitableApi } from '@/api/suitable' -import { useQuery, useQueryClient } from '@tanstack/react-query' - -export default function SuitableDetails({ roofMaterial }: { roofMaterial: string }) { - console.log('🚀 ~ SuitableDetails ~ roofMaterial:', roofMaterial) - // const { data, error, isPending } = useQuery({ - // queryKey: ['suitable-details'], - // queryFn: () => suitableApi.getDetails(roofMaterial), - // staleTime: 0, - // }) - const cache = useQueryClient() - const listData = cache.getQueryData(['suitable-list']) as Suitable[] - const data = listData.filter((item) => item.roof_material === roofMaterial) - - return ( - <> -

Searched Roof Material: {roofMaterial}

- {data && data.map((item) =>
{item.product_name}
)} - - ) -} diff --git a/src/components/SuitableSearch.tsx b/src/components/SuitableSearch.tsx deleted file mode 100644 index 9583ede..0000000 --- a/src/components/SuitableSearch.tsx +++ /dev/null @@ -1,21 +0,0 @@ -'use client' - -import { useState } from 'react' -import { useRouter } from 'next/navigation' - -export default function SuitableSearch() { - const router = useRouter() - const [selectedValue, setSelectedValue] = useState('') - - return ( - <> - - - - ) -} diff --git a/src/components/SurveySales.tsx b/src/components/SurveySales.tsx deleted file mode 100644 index f0dba94..0000000 --- a/src/components/SurveySales.tsx +++ /dev/null @@ -1,127 +0,0 @@ -'use client' - -import { surveySalesApi, SurveySalesBasicInfo, SurveySalesDetailInfo } from '@/api/surveySales' -import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query' -import { useState } from 'react' - -export default function SurveySales() { - const [isSearch, setIsSearch] = useState(false) - - const queryClient = useQueryClient() - - const { - mutate: createSurveySales, - isPending, - error, - } = useMutation({ - mutationFn: surveySalesApi.create, - onSuccess: () => { - queryClient.invalidateQueries({ queryKey: ['survey-sales', 'list'] }) - }, - }) - - const handleSurveySales = () => { - const data: SurveySalesBasicInfo = { - representative: 'keyy1315', - store: 'HWJ(T01)', - construction_point: 'HWJ(T01)', - investigation_date: '2025-04-28', - building_name: 'Hanwha Japan Building', - customer_name: 'Hong Gil Dong', - post_code: '1050013', - address: 'Tokyo, Japan', - address_detail: '1-1-1', - submission_status: false, - } - - createSurveySales(data) - } - - const { data, error: errorList } = useQuery({ - queryKey: ['survey-sales', 'list'], - queryFn: surveySalesApi.getList, - enabled: isSearch, - }) - - const { mutate: updateSurveySales } = useMutation({ - mutationFn: surveySalesApi.update, - onSuccess: () => { - queryClient.invalidateQueries({ queryKey: ['survey-sales', 'list'] }) - }, - }) - - const handleUpdateSurveySales = () => { - const detailData: SurveySalesDetailInfo = { - contract_capacity: '1100', - retail_company: 'test company', - supplementary_facilities: 1, - supplementary_facilities_etc: '', - installation_system: 3, - installation_system_etc: '', - construction_year: 4, - construction_year_etc: '', - roof_material: 1, - roof_material_etc: '', - roof_shape: 2, - roof_shape_etc: '', - roof_slope: '4.5', - house_structure: 1, - house_structure_etc: '', - rafter_material: 5, - rafter_material_etc: 'test message', - rafter_size: 3, - rafter_size_etc: '', - rafter_pitch: 2, - rafter_pitch_etc: '', - rafter_direction: 3, - open_field_plate_kind: 3, - open_field_plate_kind_etc: '', - open_field_plate_thickness: '', - leak_trace: false, - waterproof_material: 2, - waterproof_material_etc: '', - insulation_presence: 3, - insulation_presence_etc: '', - structure_order: 2, - structure_order_etc: '', - installation_availability: 1, - installation_availability_etc: '', - memo: 'test memo', - } - - if (!data) return - - const surveySalesData: SurveySalesBasicInfo = { - ...data[0], - detail_info: { ...detailData }, - } - - updateSurveySales(surveySalesData) - } - - return ( - <> -
-
- - - -
-
- {/*
-

Be Warned

-

기본 데이터 세팅 되어있습니다.

-
*/} -
- {errorList &&
Error: {errorList.message}
} - {data && data.map((item) =>
{JSON.stringify(item)}
)} -
- - ) -} diff --git a/src/components/popup/MemberInfomationPopup.tsx b/src/components/popup/MemberInfomationPopup.tsx new file mode 100644 index 0000000..86227d8 --- /dev/null +++ b/src/components/popup/MemberInfomationPopup.tsx @@ -0,0 +1,52 @@ +export default function MemberInfomationPopup() { + return ( +
+
+
+
+
+
+
+ +
+
会員情報
+
+ +
+
+
+
+
+
名前
+ +
+
+
ユーザーID
+ +
+
+
メールアドレス
+ +
+
+
電話番号
+ +
+
+
販売店名
+ +
+
+
建設ID
+ +
+
+ +
+
+
+
+ ) +} diff --git a/src/components/ui/Main.tsx b/src/components/ui/Main.tsx new file mode 100644 index 0000000..3908e6d --- /dev/null +++ b/src/components/ui/Main.tsx @@ -0,0 +1,67 @@ +export default function Main() { + return ( + <> +
+
+
屋根材の照会
+
ご使用の屋根材の適合性をご確認いただけます
+
+ +
+
+
+
+
+
+ +
+ +
+
+
調査物件一覧
+
作成物件確認
+
+
+
+
+
+ +
+ +
+
+
調査物件登録
+
新規物件作成
+
+
+
+
+
+ +
+ +
+
+
1:1お問い合わせ リスト
+
作成問い合わせの確認
+
+
+
+
+
+ +
+ +
+
+
1:1問い合わせ登録
+
新規お問い合わせの 作成
+
+
+
+
+ + ) +} diff --git a/src/components/ui/PopupController.tsx b/src/components/ui/PopupController.tsx new file mode 100644 index 0000000..1d9f4b1 --- /dev/null +++ b/src/components/ui/PopupController.tsx @@ -0,0 +1,10 @@ +'use client' + +import { usePopupController } from '@/store/popupController' +import MemberInfomationPopup from '../popup/MemberInfomationPopup' + +export default function PopupController() { + const popupController = usePopupController() + + return <>{popupController.memberInfomationPopup && } +} diff --git a/src/components/ui/common/Footer.tsx b/src/components/ui/common/Footer.tsx new file mode 100644 index 0000000..dedeb50 --- /dev/null +++ b/src/components/ui/common/Footer.tsx @@ -0,0 +1,9 @@ +export default function Footer() { + return ( + <> +
+
COPYRIGHT©2025 Hanwha Japan All Rights Reserved
+
+ + ) +} diff --git a/src/components/ui/common/Header.tsx b/src/components/ui/common/Header.tsx new file mode 100644 index 0000000..3763b7f --- /dev/null +++ b/src/components/ui/common/Header.tsx @@ -0,0 +1,112 @@ +'use client' + +import { useState } from 'react' +import Link from 'next/link' +import { Swiper, SwiperSlide } from 'swiper/react' + +import type { HeaderProps } from '@/types/Header' + +import 'swiper/css' + +// type HeaderProps = { +// name: string //header 이름 +// backBtn: boolean // 뒤로가기 버튼 유무 +// } + +export default function Header({ name, backBtn }: HeaderProps) { + const [headerAct, setHeaderAct] = useState(false) + + return ( + <> +
+
+
+ {backBtn && ( +
+ +
+ )} +

+ {name} +

+
+ +
+
+
+
+
+
+
+ profile +
+
+
HONG GILDONG
+
Interplug corp.
+
+
+
+ +
+
+
+ + +
+
+
私は作成した物件
+
+ + +
+
+
私は作成したお問 い合わせ
+
+ + +
+
+
私は作成したお問 い合わせ
+
+ + +
+ +
+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+
+
+
+
+ + ) +} diff --git a/src/middleware.ts b/src/middleware.ts index f33778a..5fe31f3 100644 --- a/src/middleware.ts +++ b/src/middleware.ts @@ -7,7 +7,7 @@ import { SessionData, sessionOptions } from './libs/session' export async function middleware(request: NextRequest) { const cookieStore = await cookies() const session = await getIronSession(cookieStore, sessionOptions) - console.log('🚀 ~ middleware ~ session:', session) + // todo: 로그인 기능 추가 시 주석 해제 // if (!session.isLoggedIn) { // return NextResponse.redirect(new URL('/login', request.url)) diff --git a/src/store/popupController.ts b/src/store/popupController.ts new file mode 100644 index 0000000..1c883f3 --- /dev/null +++ b/src/store/popupController.ts @@ -0,0 +1,19 @@ +import { create } from 'zustand' + +type PoupControllerState = { + memberInfomationPopup: boolean + setMemberInfomationPopup: (MemberInfomationPopupState: boolean) => void +} + +type InitialState = { + memberInfomationPopup: boolean +} + +const initialState: InitialState = { + memberInfomationPopup: false, +} + +export const usePopupController = create((set) => ({ + ...initialState, + setMemberInfomationPopup: (memberInfomationPopupState: boolean) => set((state) => ({ ...state, memberInfomationPopupState })), +})) 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..c6d11ad --- /dev/null +++ b/src/styles/base/_button.scss @@ -0,0 +1,99 @@ +@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-500; + 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-edit{ + display: block; + width: 10px; + height: 10px; + background: url(/assets/images/common/btn_edit.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..bbecd6f --- /dev/null +++ b/src/styles/base/_check-radio.scss @@ -0,0 +1,213 @@ +@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.5; + 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: -1px; + 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: -1px; + 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: -1px; + 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: -1px; + 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: 5px; + 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); + } + } +} + +.toggle-form{ + @include flex(8px); + align-items: center; + .toggle-name{ + @include defaultFont($font-s-13, $font-w-400, $font-c) + } +} \ No newline at end of file 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..7bc0784 --- /dev/null +++ b/src/styles/base/_inputs.scss @@ -0,0 +1,197 @@ +@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; + } + .del-icon{ + flex: none; + width: 24px; + height: 24px; + background: url(/assets/images/common/search_del_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; + height: 50px; + line-height: 50px; + &: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_hide_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..256d7c8 --- /dev/null +++ b/src/styles/base/_utilities.scss @@ -0,0 +1,39 @@ +/* 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;} + +// color +.red-f{color: #FF5656 !important;} \ No newline at end of file diff --git a/src/styles/components/_index.scss b/src/styles/components/_index.scss new file mode 100644 index 0000000..4ebdd02 --- /dev/null +++ b/src/styles/components/_index.scss @@ -0,0 +1,4 @@ +@forward 'main'; +@forward 'login'; +@forward 'pop-contents'; +@forward 'sub'; \ No newline at end of file diff --git a/src/styles/components/_login.scss b/src/styles/components/_login.scss new file mode 100644 index 0000000..7aae640 --- /dev/null +++ b/src/styles/components/_login.scss @@ -0,0 +1,19 @@ +@use "../abstracts" as *; + +.login-contents{ + padding: 94px 34px 0; + .login-logo{ + @include defaultFont($font-s-24, $font-w-600, $black-1010); + text-align: center; + } + .login-form-wrap{ + margin-top: 42px; + .login-check-warp{ + margin-top: 24px; + @include flex(14px); + } + .login-btn-wrap{ + margin-top: 24px; + } + } +} \ No newline at end of file diff --git a/src/styles/components/_main.scss b/src/styles/components/_main.scss new file mode 100644 index 0000000..0c1f3b5 --- /dev/null +++ b/src/styles/components/_main.scss @@ -0,0 +1,91 @@ +@use "../abstracts" as *; + +.main-contens{ + width: 100%; + height: auto; + padding: 0 20px; + background-color: $white-fff; +} +.main-head-block{ + padding: 33px 30px; + background: linear-gradient(102deg, #F8F9EC 2.93%, rgba(249, 239, 236, 0.80) 98.22%); + border-radius: 16px; + .head-block-tit{ + @include defaultFont($font-s-18, $font-w-600, #F86A56) + } + .head-block-text{ + @include defaultFont($font-s-13, $font-w-500, #F86A56) + } + .head-block-link-wrap{ + margin-top: 18px; + .head-block-link{ + @include flex(10px); + align-items: center; + padding: 8px 13px; + background-color: #CD8888; + border-radius: 100px; + @include defaultFont($font-s-12, $font-w-600, $white-fff); + .block-arr{ + display: block; + width: 6px; + height: 11px; + background: url(/assets/images/main/block_arr.svg)no-repeat center; + background-size: cover; + } + } + } +} + +.main-grid-wrap{ + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 15px; + margin-top: 15px; + .main-grid-bx{ + min-height: 160px; + padding: 40px 20px 10px; + border-radius: 16px; + &.bx01{ + background: linear-gradient(134deg, #F0EDFF 5.92%, #F0FFF6 96.24%); + } + &.bx02{ + background: linear-gradient(134deg, #FFF4F4 3.38%, #F2FFF5 98.09%); + } + &.bx03{ + background: linear-gradient(136deg, #F7FAF1 3.75%, #E6FCF7 98.46%); + } + &.bx04{ + background: linear-gradient(133deg, #FFFBEF 3.32%, rgba(243, 236, 255, 0.33) 100%); + } + .grid-bx-head{ + @include flex(0px); + align-items: center; + .main-bx-icon{ + @include flex(0px); + } + .main-bx-arr{ + display: block; + margin-left: auto; + width: 24px; + height: 24px; + border-radius: 50%; + background-color: #fff; + background-image: url(/assets/images/main/main_contens_arr.svg); + background-position: center; + background-repeat: no-repeat; + background-size: 12px 12px; + } + } + .grid-bx-body{ + margin-top: 16px; + .grid-bx-body-tit{ + @include defaultFont($font-s-14, $font-w-600, #7896BA); + } + .grid-bx-body-txt{ + @include defaultFont($font-s-12, $font-w-500, #7896BA); + opacity: 0.6; + margin-top: 3px; + } + } + } +} \ No newline at end of file diff --git a/src/styles/components/_pop-contents.scss b/src/styles/components/_pop-contents.scss new file mode 100644 index 0000000..88180a2 --- /dev/null +++ b/src/styles/components/_pop-contents.scss @@ -0,0 +1,36 @@ +@use "../abstracts" as *; + +// 회원정보 팝업 +.member-infor-form-wrap{ + margin-bottom: 20px; +} + +// 우편번호 찾기 팝업 +.zip-code-search-input{ + margin-bottom: 18px; +} +.zip-code-table-wrap{ + .zip-code-table-tit{ + @include defaultFont($font-s-13, $font-w-500, $font-c); + margin-bottom: 10px; + } + .zip-code-table{ + width: 100%; + table-layout: fixed; + border-top: 2px solid #2E3A59; + th{ + @include defaultFont($font-s-13, $font-w-500, $font-c); + padding: 10px; + border-bottom: 1px solid #2E3A59; + text-align: center; + } + td{ + @include defaultFont($font-s-13, $font-w-400, $font-c); + padding: 10px; + border-bottom: 1px solid #ECECEC; + } + } + .btn-flex-wrap{ + margin-top: 20px; + } +} \ No newline at end of file diff --git a/src/styles/components/_sub.scss b/src/styles/components/_sub.scss new file mode 100644 index 0000000..c1f05f8 --- /dev/null +++ b/src/styles/components/_sub.scss @@ -0,0 +1,419 @@ +@use "../abstracts" as *; + +// input form 공통 +.data-input-form-bx{ + margin-bottom: 18px; + &:last-child{ + margin-bottom: 0; + } + .data-input-form-tit{ + @include defaultFont($font-s-13, $font-w-500, $font-c); + margin-bottom: 10px; + .import{ + color: #F00; + } + span{ + display: block; + @include defaultFont($font-s-13, $font-w-400, #A8B6C7); + } + } +} + +.btn-flex-wrap{ + @include flex(5px); + margin-top: 24px; + .btn-bx{ + flex: 1; + } +} + +// 매물 common +.top-btn{ + position: fixed; + bottom: 96px; + right: 15px; + width: 38px; + height: 38px; + background-color: rgba(0, 0, 0, 0.50); + background-image: url(/assets/images/sub/top_btn_icon.svg); + background-position: center; + background-repeat: no-repeat; + background-size: 18px 18px; + border-radius: 50%; + z-index: 90000; +} + +.sale-contents{ + width: 100%; + background-color: #F5F5F5; + .sale-frame{ + padding: 0 20px; + border-top: 1px solid #ECECEC; + border-bottom: 1px solid #ECECEC; + margin-bottom: 10px; + padding-bottom: 24px; + padding-top: 24px; + background-color: $white-fff; + &:first-child{ + padding-top: 0; + border-top: none; + } + &:last-child{ + padding-bottom: 0; + border-bottom: none; + margin-bottom: 0; + } + } +} +.sale-detail-tab-relative{ + height: 40px; + margin-bottom: 10px; +} +.sale-detail-tab-wrap{ + position: fixed; + top: 66px; + left: 0; + width: 100%; + height: 40px; + background-color: $white-fff; + z-index: 98000; + .sale-detail-tab-inner{ + position: relative; + @include flex(0px); + align-items: center; + height: 100%; + .sale-detail-tab{ + flex: 1; + height: 100%; + background-color: #fff; + border-top: 1px solid #DDDFE2; + border-bottom: 1px solid #DDDFE2; + @include defaultFont($font-s-13, $font-w-500, $font-c); + &.act{ + color: $white-fff; + background-color: #5F738E; + border-color: #5F738E; + } + } + } +} + +// 매물 목록 +.sale-form-bx{ + margin-bottom: 14px; + &:last-child{ + margin-bottom: 0; + } +} +.sale-list-wrap{ + .sale-list-item{ + padding-top: 14px; + padding-bottom: 14px; + border-bottom: 1px solid #ECECEC; + cursor: pointer; + &:first-child{ + padding-top: 0; + } + &:last-child{ + border-bottom: none; + padding-bottom: 0; + } + } +} +.sale-item-bx{ + .sale-item-date-bx{ + @include flex(0px); + align-items: center; + margin-bottom: 9px; + .sale-item-num{ + position: relative; + @include defaultFont($font-s-13, $font-w-400, $font-c); + padding-right: 6px; + &::after{ + content: ''; + position: absolute; + top: 50%; + right: 0; + transform: translateY(-50%); + width: 1px; + height: 10px; + background-color: #A2ABB8; + } + } + .sale-item-date{ + @include defaultFont($font-s-13, $font-w-400, #A2ABB8); + padding-left: 6px; + } + } + .sale-item-tit{ + @include defaultFont($font-s-15, $font-w-500, $font-c); + @include ellipsis(1); + margin-bottom: 9px; + } + .sale-item-customer{ + @include defaultFont($font-s-13, $font-w-400, $font-c); + margin-bottom: 9px; + } + .sale-item-update-bx{ + @include flex(0px); + align-items: center; + .sale-item-name{ + position: relative; + @include defaultFont($font-s-13, $font-w-400, #A2ABB8); + padding-right: 6px; + &::after{ + content: ''; + position: absolute; + top: 50%; + right: 0; + transform: translateY(-50%); + width: 1px; + height: 10px; + background-color: #A2ABB8; + } + } + .sale-item-update{ + @include defaultFont($font-s-13, $font-w-400, #A2ABB8); + padding-left: 6px; + } + } +} +.sale-edit-btn{ + margin-top: 24px; +} + +// 매물 상세 +.sale-data-table{ + width: 100%; + table-layout: fixed; + tbody{ + tr{ + th{ + @include defaultFont($font-s-13, $font-w-500, $font-c); + vertical-align: top; + padding: 5px 0; + } + td{ + @include defaultFont($font-s-13, $font-w-400, $font-c); + padding: 5px 0 8px 14px; + .data-down{ + @include flex(8px); + align-items: center; + color: #1259CB; + i{ + display: block; + width: 8px; + height: 12px; + background: url(/assets/images/sub/down_icon.svg)no-repeat center; + background-size: cover; + } + } + } + &:first-child{ + th,td{ + padding-top: 0; + } + } + &:last-child{ + th,td{ + padding-bottom: 0; + } + } + } + } +} + +// 매물 기본정보 +.form-flex{ + @include flex(5px); + .form-bx{ + flex: 1; + } +} +.form-btn{ + margin-top: 12px; +} + +// 매물 전기 지붕정보 +.sale-roof-title{ + @include defaultFont($font-s-15, $font-w-500, $font-c); + padding-bottom: 10px; + margin-bottom: 20px; + border-bottom: 1px solid #2E3A59; +} +.data-check-wrap{ + @include flex(10px); + flex-wrap: wrap; + margin-bottom: 12px; + .radio-form-box, + .check-form-box{ + width: calc(50% - 5px); + } + &.mb0{ + margin-bottom: 0; + } +} +.data-input{ + &.flex{ + @include flex(8px); + align-items: center; + span{ + flex: none; + @include defaultFont($font-s-13, $font-w-400, $font-c); + } + } +} + + +// 1:1 문의 common +.inquiry-frame{ + padding: 0 20px; +} +.badge{ + min-width: 60px; + height: 30px; + line-height: 30px; + padding: 0 8px; + border-radius: 60px; + text-align: center; + font-size: $font-s-12; + font-weight: $font-w-500; + &.blue{ + color: #5497E9; + background-color: #ECF5FF; + } + &.orange{ + color: #F86A56; + background-color: #FFEFED; + } + &.block{ + width: 100%; + + } +} +// 1:1 문의 목록 +.inquiry-table-filter{ + margin-bottom: 24px; + .filter-check{ + margin-bottom: 12px; + } +} +.inquiry-list-tit{ + padding-bottom: 10px; + border-bottom: 1px solid #2E3A59; + @include defaultFont($font-s-13, $font-w-400, $font-c); + span{ + font-weight: $font-w-500; + } +} +.inquiry-list{ + .inquiry-item{ + padding: 10px 0; + cursor: pointer; + border-bottom: 1px solid #ECECEC; + &:last-child{ + border-bottom: none; + padding-bottom: 0; + } + .inquiry-item-bx{ + position: relative; + padding-right: 70px; + .inquiry-item-category{ + @include defaultFont($font-s-13, $font-w-400, $font-c); + margin-bottom: 5px; + } + .inquiry-item-tit{ + @include defaultFont($font-s-15, $font-w-500, $font-c); + @include ellipsis(1); + margin-bottom: 5px; + } + .inquiry-item-date{ + @include defaultFont($font-s-13, $font-w-400, #A2ABB8); + } + .inquiry-badge{ + position: absolute; + top: 0; + right: 0; + } + } + } +} + +// 1:1문의 작성 +.inquiry-file-wrap{ + margin-top: 20px; + .file-list-wrap{ + margin-top: 14px; + } +} +.file-list-tit{ + @include defaultFont($font-s-13, $font-w-500, $font-c); +} +.file-list{ + margin-top: 14px; + .file-item{ + border-top: 1px solid #EDEDED; + cursor: default; + .file-item-bx{ + width: 100%; + padding: 14px 0; + @include flex(0px); + align-items: center; + .file-item-name{ + @include defaultFont($font-s-13, $font-w-400, $font-c); + } + .file-del{ + display: block; + margin-left: auto; + width: 16px; + height: 16px; + background: url(/assets/images/common/id_delete_icon.svg)no-repeat center; + background-size: cover; + } + } + &:last-child{ + .file-item-bx{ + padding-bottom: 0; + } + } + } +} + +// 1:1 문의 상세 +.inquiry-detail-data-table{ + padding: 20px 0; + border-bottom: 1px solid #ECECEC; +} +.inquiry-detail-data{ + padding: 20px 0; + border-bottom: 1px solid #2E3A59; + margin-bottom: 24px; + .inquiry-detail-category{ + @include defaultFont($font-s-13, $font-w-400, $font-c); + margin-bottom: 3px; + } + .inquiry-detail-tit{ + @include defaultFont($font-s-15, $font-w-500, $font-c); + margin-bottom: 10px; + } + .inquiry-detail-txt{ + @include defaultFont($font-s-13, $font-w-400, $font-c); + } +} + +// 1:1 문의 답변 +.inquiry-answer-wrap{ + margin-top: 24px; +} +.inquiry-answer-header{ + padding: 20px 0; + border-top: 1px solid #F86A56; + border-bottom: 1px solid #ECECEC; + .inquiry-answer-tit{ + @include defaultFont($font-s-14, $font-w-500, #F86A56); + margin-bottom: 5px; + } + .inquiry-answer-date{ + @include defaultFont($font-s-13, $font-w-400, #F86A56); + } +} \ 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..6d1e7c4 --- /dev/null +++ b/src/styles/layout/_layout.scss @@ -0,0 +1,254 @@ +@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: 100000; +} +header{ + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 66px; + background-color: $white-fff; + z-index: 100000; + .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); + cursor: pointer; + } + .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..365d2b3 --- /dev/null +++ b/src/styles/layout/_pop-common.scss @@ -0,0 +1,109 @@ +@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; + min-height: calc(100% - (14px * 2)); + max-width: 860px; + z-index:111000; + margin: 14px 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; + border-radius: 16px; + outline: 0 none; + pointer-events: auto; + .modal-header { + display: block; + position:relative; + padding:20px 20px 0; + } + .modal-body { + position: relative; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + padding: 32px 20px; + } + .modal-footer { + display: -ms-flexbox; + display: flex; + -ms-flex-align: center; + align-items: center; + -ms-flex-pack: end; + justify-content: flex-end; + padding: 10px; + } + } + } +} + +// modal-header +.modal-header-inner{ + @include flex(0px); + align-items: center; + .modal-name-wrap{ + @include flex(12px); + align-items: center; + .modal-img{ + @include flex(0px); + align-items: center; + justify-content: center; + width: 38px; + height: 38px; + border-radius: 50%; + background-color: $black-1010; + } + .modal-name{ + @include defaultFont($font-s-15, $font-w-600, $black-1010) + } + } + .modal-close{ + display: block; + margin-left: auto; + width: 24px; + height: 24px; + background: url(/assets/images/layout/modal_close.svg)no-repeat center; + background-size: cover; + } +} + +// alert +.modal-popup{ + &.alert{ + .modal-dialog{ + max-width: 237px; + align-items: center; + .modal-content{ + padding: 20px; + .alert-tit{ + padding-bottom: 15px; + border-bottom: 1px solid #ECECEC; + text-align: center; + @include defaultFont($font-s-13, $font-w-400, $font-c); + } + .alert-btn-wrap{ + @include flex(5px); + margin-top: 20px; + .alert-btn-bx{ + flex: 1; + } + } + } + } + } +} \ 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..091e269 --- /dev/null +++ b/src/styles/style.scss @@ -0,0 +1,5 @@ +@use 'abstracts'; +@use 'base'; +@use 'layout'; +@use 'components'; + diff --git a/src/types/Header.ts b/src/types/Header.ts new file mode 100644 index 0000000..a70a8c8 --- /dev/null +++ b/src/types/Header.ts @@ -0,0 +1,4 @@ +export type HeaderProps = { + name: string //header 이름 + backBtn: boolean // 뒤로가기 버튼 유무 +}