From 4fb70035d2110a658628f0af269998f0e2c8eef4 Mon Sep 17 00:00:00 2001 From: Seongeun Kim Date: Thu, 27 Jul 2023 18:25:18 +0900 Subject: [PATCH 1/2] =?UTF-8?q?STYLE=20:=20=EC=A0=84=EC=97=AD=20=EC=8A=A4?= =?UTF-8?q?=ED=83=80=EC=9D=BC=20=EC=84=9C=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/API/dummyAPI/mypage.json | 105 ++++++++++++++ src/API/dummyAPI/restdayAll.json | 84 +++++++++++ src/API/dummyAPI/signup.json | 62 ++++++++ src/App.css | 0 src/App.scss | 3 + src/App.tsx | 16 +- src/_variables.scss | 20 +++ src/index.css | 0 src/index.scss | 137 ++++++++++++++++++ src/main.tsx | 2 +- src/pages/Adminpage/adminpage.module.scss | 7 + .../Adminpage/adminpage.module.scss.d.ts | 4 + src/pages/Adminpage/adminpage.tsx | 11 ++ src/pages/Main/main.css | 3 - src/pages/Main/main.tsx | 7 +- src/pages/Mypage/mypage.tsx | 6 +- vite.config.ts | 3 +- 17 files changed, 450 insertions(+), 20 deletions(-) create mode 100644 src/API/dummyAPI/mypage.json create mode 100644 src/API/dummyAPI/restdayAll.json create mode 100644 src/API/dummyAPI/signup.json delete mode 100644 src/App.css create mode 100644 src/App.scss create mode 100644 src/_variables.scss delete mode 100644 src/index.css create mode 100644 src/index.scss create mode 100644 src/pages/Adminpage/adminpage.module.scss create mode 100644 src/pages/Adminpage/adminpage.module.scss.d.ts create mode 100644 src/pages/Adminpage/adminpage.tsx delete mode 100644 src/pages/Main/main.css diff --git a/src/API/dummyAPI/mypage.json b/src/API/dummyAPI/mypage.json new file mode 100644 index 00000000..79920d57 --- /dev/null +++ b/src/API/dummyAPI/mypage.json @@ -0,0 +1,105 @@ +[ + { + "name": "고길동", + "annualBalance": 20, + "annualHistory": [ + { + "id": 1, + "reason": "경조사 휴가", + "startDate": "2023-01-09", + "endDate": "2023-01-15", + "status": "결제 완료" + }, + { + "id": 2, + "reason": "기타 휴가", + "startDate": "2023-03-10", + "endDate": "2023-03-20", + "status": "결제 완료" + }, + { + "id": 3, + "reason": "병가 휴가", + "startDate": "2023-03-24", + "endDate": "2023-03-28", + "status": "결제 완료" + }, + { + "id": 4, + "reason": "병가 휴가", + "startDate": "2023-02-23", + "endDate": "2022-02-27", + "status": "결제 완료" + }, + { + "id": 5, + "reason": "연차유급 휴가", + "startDate": "2023-08-05", + "endDate": "2022-08-15", + "status": "결제 대기" + } + ], + "dutyHistory": [ + { + "id": 1, + "startDate": "2023-03-10", + "endDate": "2023-03-10", + "status": "결제 대기" + }, + { + "id": 2, + "startDate": "2023-01-19", + "endDate": "2023-01-19", + "status": "결제 대기" + } + ] + }, + { + "name": "둘리", + "annualBalance": 15, + "annualHistory": [ + { + "id": 1, + "reason": "출산 전후 휴가", + "startDate": "2023-03-12", + "endDate": "2023-06-03", + "status": "결제 완료" + }, + { + "id": 2, + "reason": "연차유급 휴가", + "startDate": "2023-01-31", + "endDate": "2023-06-23", + "status": "결제 완료" + }, + { + "id": 3, + "reason": "경조사 휴가", + "startDate": "2023-04-23", + "endDate": "2023-04-29", + "status": "결제 대기" + }, + { + "id": 4, + "reason": "기타 휴가", + "startDate": "2023-03-17", + "endDate": "2023-07-15", + "status": "결제 대기" + } + ], + "dutyHistory": [ + { + "id": 1, + "startDate": "2023-07-15", + "endDate": "2023-07-15", + "status": "결제 대기" + }, + { + "id": 2, + "startDate": "2023-03-20", + "endDate": "2023-02-20", + "status": "결제 완료" + } + ] + } +] diff --git a/src/API/dummyAPI/restdayAll.json b/src/API/dummyAPI/restdayAll.json new file mode 100644 index 00000000..e6664b0b --- /dev/null +++ b/src/API/dummyAPI/restdayAll.json @@ -0,0 +1,84 @@ +{ + "response": [ + { + "id": 1, + "name": "김아무", + "category": "연차", + "startDate": "2023-06-09", + "endDate": "2023-06-10", + "reason": "경조사 휴가" + }, + { + "id": 2, + "name": "이아무", + "category": "연차", + "startDate": "2023-06-02", + "endDate": "2023-06-05", + "reason": "기타 휴가" + }, + { + "id": 3, + "name": "박아무", + "category": "연차", + "startDate": "2023-10-27", + "endDate": "2023-10-31", + "reason": "병가 휴가" + }, + { + "id": 4, + "name": "손아무", + "category": "연차", + "startDate": "2023-01-05", + "endDate": "2023-01-07", + "reason": "연차유급 휴가" + }, + { + "id": 5, + "name": "최아무", + "category": "연차", + "startDate": "2023-03-13", + "endDate": "2023-03-14", + "reason": "병가 휴가" + }, + { + "id": 6, + "name": "김이나", + "category": "당직", + "startDate": "2023-06-05", + "endDate": "2023-06-06", + "reason": "당직" + }, + { + "id": 7, + "name": "이이나", + "category": "당직", + "startDate": "2023-06-15", + "endDate": "2023-06-16", + "reason": "당직" + }, + { + "id": 8, + "name": "박이나", + "category": "당직", + "startDate": "2023-07-03", + "endDate": "2023-07-04", + "reason": "당직" + }, + { + "id": 9, + "name": "손이나", + "category": "당직", + "startDate": "2023-06-07", + "endDate": "2023-06-07", + "reason": "당직" + }, + { + "id": 10, + "name": "최이나", + "category": "당직", + "startDate": "2023-07-12", + "endDate": "2023-07-12", + "reason": "당직" + } + ] +} diff --git a/src/API/dummyAPI/signup.json b/src/API/dummyAPI/signup.json new file mode 100644 index 00000000..963a2786 --- /dev/null +++ b/src/API/dummyAPI/signup.json @@ -0,0 +1,62 @@ +[ + { + "email": "cjzak0@naver.com", + "password": "$2a$04$c9FhdT09lvcCb250DjLdKeX1PIQjv2TkbE.OkvfD73CwOzyoJbS9m", + "name": "김땡땡", + "join": "2023-03-27" + }, + { + "email": "nduester1@gmail.com", + "password": "$2a$04$tpse8d1m7ocpBLn1prCJBOsu9So/yTi4A2TpRnt8mj/yyZyDeShG6", + "name": "박땡땡", + "join": "2022-09-15" + }, + { + "email": "tbruineman2@naver.com", + "password": "$2a$04$wylfBvz8hQ6ZNcTMtW39h.uLBHo.iKRuWNfWAQyaUlp5lSkqdeGGe", + "name": "이땡땡", + "join": "2022-03-31" + }, + { + "email": "rantoniutti3@gmail.com", + "password": "$2a$04$f/zPQ48GVImW7RAk8vHNX.67wKNzzjY2bVXDH3ap8GCUpjB/pSI/u", + "name": "송땡땡", + "join": "2022-09-27" + }, + { + "email": "bscurrell4@hanmail.net", + "password": "$2a$04$8siG.pXXi8jHIZ7z8VIKs.06Xmtj98XNj1y7z.lOIJFMGef6obQUC", + "name": "아무개", + "join": "2020-08-10" + }, + { + "email": "efarquar5@gmail.com", + "password": "$2a$04$8/2nCi3EVer5bExUbYP9N.O6PeceSVN4IebosR7Czu7cI4KJrb38O", + "name": "김김김", + "join": "2022-05-01" + }, + { + "email": "astud6@gmail.com", + "password": "$2a$04$ES3t8zrizq5kC.hKWbASJOTVA12fozc9OpAbpOxdXJ5zTHO35BY9C", + "name": "박박박", + "join": "2021-01-07" + }, + { + "email": "gbryceson7@naver.com", + "password": "$2a$04$DY/70RcPDcs.f4h88aWvDuR5UiQDUjltf8ZeL5Oam.xhGQEZ1/H8e", + "name": "송송송", + "join": "2020-10-22" + }, + { + "email": "aplank8@naver.com", + "password": "$2a$04$kWFZOtRWjLu7F6TVXdFDSOYvBxsIcgSIXbU3WwAGlF5dURrUHvTpy", + "name": "이이이", + "join": "2022-06-28" + }, + { + "email": "nilyunin9@gmail.com", + "password": "$2a$04$lgHZrfIsK0k6nAINt5UA7.x1C0j2/fOt2y0TgsEnLx.UBAWUCj9pS", + "name": "김박이", + "join": "2022-09-16" + } +] diff --git a/src/App.css b/src/App.css deleted file mode 100644 index e69de29b..00000000 diff --git a/src/App.scss b/src/App.scss new file mode 100644 index 00000000..c735afc4 --- /dev/null +++ b/src/App.scss @@ -0,0 +1,3 @@ +.App { + text-align: center; +} diff --git a/src/App.tsx b/src/App.tsx index 5939c852..42061fb3 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,17 +1,17 @@ import Main from "./pages/Main/main.tsx"; +import Admin from "./pages/Adminpage/adminpage.tsx"; import { Route, Routes } from "react-router-dom"; // import ProtectedRoute from "./Components/ProtectedRoute.tsx"; // import Admin from "./pages/Admin/admin.tsx"; - function App() { return ( - - } /> - {/*}*/} - - ) + + } /> + } /> + {/* element={}*/} + + ); } -export default App +export default App; diff --git a/src/_variables.scss b/src/_variables.scss new file mode 100644 index 00000000..2667d295 --- /dev/null +++ b/src/_variables.scss @@ -0,0 +1,20 @@ +// * 키 컬러 +$main-color: #497174; +$main-color-50: #49717475; +$sub-color: #839ea0; +$green-BG-color: #d6e4e5; +$light-Green-BG-color: #eff5f5; + +// * 블랙 & 화이트 +$white-color: #ffffff; +$black-color: #1f1f1f; +$light-Grey-color: #f9fafa; + +// * 포인트 컬러 +$point-color: #ea613c; +$date-rcolor: #3acab9; +$white-orange: #feefec; +$white-green: #eef6f1; + +// * 사이즈 설정 +$container-width: 1080px; diff --git a/src/index.css b/src/index.css deleted file mode 100644 index e69de29b..00000000 diff --git a/src/index.scss b/src/index.scss new file mode 100644 index 00000000..4902b4c3 --- /dev/null +++ b/src/index.scss @@ -0,0 +1,137 @@ +@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap"); +@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap'); + +* { + margin: 0; + font-family: 'Montserrat','Noto Sans KR', sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + box-sizing: border-box; +} + +// reset.css +// https://meyerweb.com/eric/tools/css/reset/ +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} +body { + line-height: 1; +} +ol, +ul { + list-style: none; +} +blockquote, +q { + quotes: none; +} +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ""; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} diff --git a/src/main.tsx b/src/main.tsx index 6af864e5..7837c542 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,7 +1,7 @@ import React from "react"; import ReactDOM from "react-dom/client"; import App from "./App.tsx"; -import "./index.css"; +import "./index.scss"; import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import { BrowserRouter } from "react-router-dom"; diff --git a/src/pages/Adminpage/adminpage.module.scss b/src/pages/Adminpage/adminpage.module.scss new file mode 100644 index 00000000..358cc38e --- /dev/null +++ b/src/pages/Adminpage/adminpage.module.scss @@ -0,0 +1,7 @@ +@import "src/_variables.scss"; + +.section { + width: 100%; + height: 100%; + background-color: $light-Green-BG-color; +} diff --git a/src/pages/Adminpage/adminpage.module.scss.d.ts b/src/pages/Adminpage/adminpage.module.scss.d.ts new file mode 100644 index 00000000..3f2da25b --- /dev/null +++ b/src/pages/Adminpage/adminpage.module.scss.d.ts @@ -0,0 +1,4 @@ +declare const classNames: { + readonly section: "section"; +}; +export = classNames; diff --git a/src/pages/Adminpage/adminpage.tsx b/src/pages/Adminpage/adminpage.tsx new file mode 100644 index 00000000..43945b58 --- /dev/null +++ b/src/pages/Adminpage/adminpage.tsx @@ -0,0 +1,11 @@ +import styles from "./adminpage.module.scss"; + +export default function Adminpage() { + return ( + <> +
+

Adminpage

+
+ + ); +} diff --git a/src/pages/Main/main.css b/src/pages/Main/main.css deleted file mode 100644 index 76bc4ecf..00000000 --- a/src/pages/Main/main.css +++ /dev/null @@ -1,3 +0,0 @@ - - -/*# sourceMappingURL=main.css.map */ diff --git a/src/pages/Main/main.tsx b/src/pages/Main/main.tsx index 46c9e526..d4fe0919 100644 --- a/src/pages/Main/main.tsx +++ b/src/pages/Main/main.tsx @@ -6,13 +6,12 @@ export default function Main() { const [visibility, setVisibility] = useState(false); return ( <> -

Main

- - +

Main

+ {/*모달 사용시 모달로 묶어 주시면 됩니다. state로 toggle 됩니다.*/} - ) + ); } diff --git a/src/pages/Mypage/mypage.tsx b/src/pages/Mypage/mypage.tsx index da289144..8ab28242 100644 --- a/src/pages/Mypage/mypage.tsx +++ b/src/pages/Mypage/mypage.tsx @@ -1,3 +1,4 @@ +import styles from "./mypage.module.scss"; export default function Mypage() { @@ -9,8 +10,9 @@ export default function Mypage() { */ return ( <> -

MyPage

+
+

MyPage

+
); } - diff --git a/vite.config.ts b/vite.config.ts index 131df9c5..0df04b7b 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,13 +1,12 @@ import { defineConfig } from "vite"; import react from "@vitejs/plugin-react-swc"; import sassDts from "vite-plugin-sass-dts"; -import mkcert from "vite-plugin-mkcert"; import path from "path"; const __dirname = path.resolve(); // https://vitejs.dev/config/ export default defineConfig({ - plugins: [react(), sassDts(), mkcert()], + plugins: [react(), sassDts()], resolve: { alias: [{ find: "@", replacement: `${__dirname}/src` }], }, From 05202c753f8f3101798096ee4c3d74b83b0d39ef Mon Sep 17 00:00:00 2001 From: Seongeun Kim Date: Thu, 27 Jul 2023 18:41:12 +0900 Subject: [PATCH 2/2] =?UTF-8?q?STYLE=20:=20=EC=A0=84=EC=97=AD=20=EC=8A=A4?= =?UTF-8?q?=ED=83=80=EC=9D=BC=20=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 5 ++--- .../adminpage.module.scss => Admin/admin.module.scss} | 0 src/pages/Admin/admin.tsx | 8 ++++++-- src/pages/Adminpage/adminpage.module.scss.d.ts | 4 ---- src/pages/Adminpage/adminpage.tsx | 11 ----------- 5 files changed, 8 insertions(+), 20 deletions(-) rename src/pages/{Adminpage/adminpage.module.scss => Admin/admin.module.scss} (100%) delete mode 100644 src/pages/Adminpage/adminpage.module.scss.d.ts delete mode 100644 src/pages/Adminpage/adminpage.tsx diff --git a/src/App.tsx b/src/App.tsx index 6c40cb31..b690ff33 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,9 +1,8 @@ import Main from "./pages/Main/main.tsx"; -import Admin from "./pages/Adminpage/adminpage.tsx"; -import { Route, Routes } from "react-router-dom"; import Mypage from "./pages/Mypage/mypage.tsx"; +import Admin from "./pages/Admin/admin.tsx"; +import { Route, Routes } from "react-router-dom"; // import ProtectedRoute from "./Components/ProtectedRoute.tsx"; -// import Admin from "./pages/Admin/admin.tsx"; function App() { return ( diff --git a/src/pages/Adminpage/adminpage.module.scss b/src/pages/Admin/admin.module.scss similarity index 100% rename from src/pages/Adminpage/adminpage.module.scss rename to src/pages/Admin/admin.module.scss diff --git a/src/pages/Admin/admin.tsx b/src/pages/Admin/admin.tsx index 9d502c16..07cfd8e9 100644 --- a/src/pages/Admin/admin.tsx +++ b/src/pages/Admin/admin.tsx @@ -1,7 +1,11 @@ +import styles from "./adminpage.module.scss"; + export default function Admin() { return ( <> -

Admin

+
+

Adminpage

+
- ) + ); } diff --git a/src/pages/Adminpage/adminpage.module.scss.d.ts b/src/pages/Adminpage/adminpage.module.scss.d.ts deleted file mode 100644 index 3f2da25b..00000000 --- a/src/pages/Adminpage/adminpage.module.scss.d.ts +++ /dev/null @@ -1,4 +0,0 @@ -declare const classNames: { - readonly section: "section"; -}; -export = classNames; diff --git a/src/pages/Adminpage/adminpage.tsx b/src/pages/Adminpage/adminpage.tsx deleted file mode 100644 index 43945b58..00000000 --- a/src/pages/Adminpage/adminpage.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import styles from "./adminpage.module.scss"; - -export default function Adminpage() { - return ( - <> -
-

Adminpage

-
- - ); -}