From 6136d3109db370bbf28ced703cd35c96099487d7 Mon Sep 17 00:00:00 2001 From: rosieyeon Date: Fri, 4 Feb 2022 16:28:15 +0900 Subject: [PATCH 01/62] [#53] feat: Study recruit page wireframe --- package.json | 1 + public/icons/_person.svg | 3 + src/components/categorySelect.js | 3 + src/components/navbar.js | 2 +- src/index.js | 6 +- src/pages/StudyRecruit.js | 53 ++++++++++ src/pages/Studyrooms.js | 7 -- src/statics/css/heatmap.css | 2 + src/statics/css/heatmap.css.map | 2 +- src/statics/css/home.css | 2 + src/statics/css/home.css.map | 2 +- src/statics/css/homeAchievement.css | 2 + src/statics/css/homeAchievement.css.map | 2 +- src/statics/css/homeStatistics.css | 2 + src/statics/css/homeStatistics.css.map | 2 +- src/statics/css/homeTodays.css | 2 + src/statics/css/homeTodays.css.map | 2 +- src/statics/css/login.css | 2 + src/statics/css/login.css.map | 2 +- src/statics/css/main.css | 2 + src/statics/css/main.css.map | 2 +- src/statics/css/modal.css | 2 + src/statics/css/modal.css.map | 2 +- src/statics/css/navbar.css | 2 + src/statics/css/navbar.css.map | 2 +- src/statics/css/navbarHome.css | 2 + src/statics/css/navbarHome.css.map | 2 +- src/statics/css/navbarLanding.css | 2 + src/statics/css/navbarLanding.css.map | 2 +- src/statics/css/signup.css | 2 + src/statics/css/signup.css.map | 2 +- src/statics/css/studyRecruit.css | 133 ++++++++++++++++++++++++ src/statics/css/studyRecruit.css.map | 1 + src/statics/scss/main.scss | 4 + src/statics/scss/studyRecruit.scss | 96 +++++++++++++++++ yarn.lock | 83 ++++++++++++++- 36 files changed, 412 insertions(+), 28 deletions(-) create mode 100644 public/icons/_person.svg create mode 100644 src/components/categorySelect.js create mode 100644 src/pages/StudyRecruit.js delete mode 100644 src/pages/Studyrooms.js create mode 100644 src/statics/css/studyRecruit.css create mode 100644 src/statics/css/studyRecruit.css.map create mode 100644 src/statics/scss/studyRecruit.scss diff --git a/package.json b/package.json index a69ede3..eff0ffc 100644 --- a/package.json +++ b/package.json @@ -28,6 +28,7 @@ "react-icons": "^4.3.1", "react-router-dom": "^6.2.1", "react-scripts": "5.0.0", + "react-select": "^5.2.2", "react-tooltip": "^4.2.21", "styled-components": "^5.3.3", "web-vitals": "^2.1.4", diff --git a/public/icons/_person.svg b/public/icons/_person.svg new file mode 100644 index 0000000..956fe56 --- /dev/null +++ b/public/icons/_person.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/categorySelect.js b/src/components/categorySelect.js new file mode 100644 index 0000000..4a2030f --- /dev/null +++ b/src/components/categorySelect.js @@ -0,0 +1,3 @@ +export default function categorySelect() { + return
category
; +} diff --git a/src/components/navbar.js b/src/components/navbar.js index 52f29c3..ee39229 100644 --- a/src/components/navbar.js +++ b/src/components/navbar.js @@ -95,7 +95,7 @@ function Navbar() { 자유열람실 - 스터디룸 + 스터디 모집 일정관리 diff --git a/src/index.js b/src/index.js index 81ba089..f1b8fe8 100644 --- a/src/index.js +++ b/src/index.js @@ -3,7 +3,7 @@ import ReactDOM from "react-dom"; import { BrowserRouter, Routes, Route } from "react-router-dom"; import App from "./App"; import Home from "./pages/Home"; -import Studyrooms from "./pages/Studyrooms"; +import StudyRecruit from "./pages/StudyRecruit"; import Meetingrooms from "./pages/Meetingrooms"; import Profile from "./pages/Profile"; import Settings from "./pages/Settings"; @@ -27,8 +27,8 @@ ReactDOM.render( : } + path="studyrecruit" + element={isLogin() ? : } /> +
+ 스터디 모집 + + 모집 게시판에서 원하는 스터디를 찾아보세요 + +
+
+
+ + +
+ +
+
+ + + + + + + + + + + + + {/* + */} + + +
#제목글쓴이모집기한 + + + +
1Faucibus viverra diam feugiat pellentesque condimentum.
+
+ + ); +} diff --git a/src/pages/Studyrooms.js b/src/pages/Studyrooms.js deleted file mode 100644 index 7430bfd..0000000 --- a/src/pages/Studyrooms.js +++ /dev/null @@ -1,7 +0,0 @@ -export default function Studyrooms() { - return ( -
-

Studyrooms

-
- ); -} diff --git a/src/statics/css/heatmap.css b/src/statics/css/heatmap.css index 176ae4b..fd9f83e 100644 --- a/src/statics/css/heatmap.css +++ b/src/statics/css/heatmap.css @@ -14,6 +14,7 @@ --github-01: #e8eaee; --github-02: #d5d6f5; --github-03: #9fa2e3; + --board-textColor: #646464; } .ui-dark { @@ -33,6 +34,7 @@ --github-01: rgba(102, 103, 171, 0.2); --github-02: rgba(102, 103, 171, 0.4); --github-03: rgba(102, 103, 171, 0.7); + --board-textColor: #ededed; } .hidden { diff --git a/src/statics/css/heatmap.css.map b/src/statics/css/heatmap.css.map index ea3a476..53d16ac 100644 --- a/src/statics/css/heatmap.css.map +++ b/src/statics/css/heatmap.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/heatmap.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;;;AAQF;EACE;;;ACtDA;EACE,aDDU;ECEV;;AAEF;EACE;;AAGA;EACE;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;;AAIJ;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE,MDxCM;;AC2CR;EACE","file":"heatmap.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/heatmap.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;;;AAQF;EACE;;;AC1DA;EACE,aDDU;ECEV;;AAEF;EACE;;AAGA;EACE;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;;AAIJ;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE,MDxCM;;AC2CR;EACE","file":"heatmap.css"} \ No newline at end of file diff --git a/src/statics/css/home.css b/src/statics/css/home.css index fca03ab..7881bec 100644 --- a/src/statics/css/home.css +++ b/src/statics/css/home.css @@ -14,6 +14,7 @@ --github-01: #e8eaee; --github-02: #d5d6f5; --github-03: #9fa2e3; + --board-textColor: #646464; } .ui-dark { @@ -33,6 +34,7 @@ --github-01: rgba(102, 103, 171, 0.2); --github-02: rgba(102, 103, 171, 0.4); --github-03: rgba(102, 103, 171, 0.7); + --board-textColor: #ededed; } .hidden { diff --git a/src/statics/css/home.css.map b/src/statics/css/home.css.map index addc0f5..2be0a0f 100644 --- a/src/statics/css/home.css.map +++ b/src/statics/css/home.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/home.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;;;AAQF;EACE;;;ACxDF;EACE;;AACA;EACE;EACA;EACA;;AAGA;EACE;EACA;EACA,aDTQ;ECUR;EACA;;AAOI;EACE;;AAIN;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAIJ;EACE;EACA","file":"home.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/home.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;;;AAQF;EACE;;;AC5DF;EACE;;AACA;EACE;EACA;EACA;;AAGA;EACE;EACA;EACA,aDTQ;ECUR;EACA;;AAOI;EACE;;AAIN;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAIJ;EACE;EACA","file":"home.css"} \ No newline at end of file diff --git a/src/statics/css/homeAchievement.css b/src/statics/css/homeAchievement.css index e8fedf0..ed1be5b 100644 --- a/src/statics/css/homeAchievement.css +++ b/src/statics/css/homeAchievement.css @@ -14,6 +14,7 @@ --github-01: #e8eaee; --github-02: #d5d6f5; --github-03: #9fa2e3; + --board-textColor: #646464; } .ui-dark { @@ -33,6 +34,7 @@ --github-01: rgba(102, 103, 171, 0.2); --github-02: rgba(102, 103, 171, 0.4); --github-03: rgba(102, 103, 171, 0.7); + --board-textColor: #ededed; } .hidden { diff --git a/src/statics/css/homeAchievement.css.map b/src/statics/css/homeAchievement.css.map index d5f58fb..01807ff 100644 --- a/src/statics/css/homeAchievement.css.map +++ b/src/statics/css/homeAchievement.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/homeAchievement.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;;;AAQF;EACE;;;ACvDF;EACE;;AACA;EACE;EACA;EACA;EACA;;AAEF;EACE;;AACA;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAMJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA","file":"homeAchievement.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/homeAchievement.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;;;AAQF;EACE;;;AC3DF;EACE;;AACA;EACE;EACA;EACA;EACA;;AAEF;EACE;;AACA;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAMJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA","file":"homeAchievement.css"} \ No newline at end of file diff --git a/src/statics/css/homeStatistics.css b/src/statics/css/homeStatistics.css index 301324c..2bac04b 100644 --- a/src/statics/css/homeStatistics.css +++ b/src/statics/css/homeStatistics.css @@ -14,6 +14,7 @@ --github-01: #e8eaee; --github-02: #d5d6f5; --github-03: #9fa2e3; + --board-textColor: #646464; } .ui-dark { @@ -33,6 +34,7 @@ --github-01: rgba(102, 103, 171, 0.2); --github-02: rgba(102, 103, 171, 0.4); --github-03: rgba(102, 103, 171, 0.7); + --board-textColor: #ededed; } .hidden { diff --git a/src/statics/css/homeStatistics.css.map b/src/statics/css/homeStatistics.css.map index 9c4e58f..f7f90f0 100644 --- a/src/statics/css/homeStatistics.css.map +++ b/src/statics/css/homeStatistics.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/homeStatistics.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;;;AAQF;EACE;;;ACvDF;EACE;;AACA;EACE;EACA;EACA;EACA;;AAEF;EACE;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA","file":"homeStatistics.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/homeStatistics.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;;;AAQF;EACE;;;AC3DF;EACE;;AACA;EACE;EACA;EACA;EACA;;AAEF;EACE;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA","file":"homeStatistics.css"} \ No newline at end of file diff --git a/src/statics/css/homeTodays.css b/src/statics/css/homeTodays.css index 4e6b0e7..f242f0d 100644 --- a/src/statics/css/homeTodays.css +++ b/src/statics/css/homeTodays.css @@ -14,6 +14,7 @@ --github-01: #e8eaee; --github-02: #d5d6f5; --github-03: #9fa2e3; + --board-textColor: #646464; } .ui-dark { @@ -33,6 +34,7 @@ --github-01: rgba(102, 103, 171, 0.2); --github-02: rgba(102, 103, 171, 0.4); --github-03: rgba(102, 103, 171, 0.7); + --board-textColor: #ededed; } .hidden { diff --git a/src/statics/css/homeTodays.css.map b/src/statics/css/homeTodays.css.map index 91d7dc0..3ad3c45 100644 --- a/src/statics/css/homeTodays.css.map +++ b/src/statics/css/homeTodays.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/homeTodays.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;;;AAQF;EACE;;;ACxDF;EACE,aDCY;;ACAZ;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AACA;EACE;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACE;;AACA;EACE;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKJ;EACE;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"homeTodays.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/homeTodays.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;;;AAQF;EACE;;;AC5DF;EACE,aDCY;;ACAZ;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AACA;EACE;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACE;;AACA;EACE;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKJ;EACE;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"homeTodays.css"} \ No newline at end of file diff --git a/src/statics/css/login.css b/src/statics/css/login.css index d562d02..2c5f936 100644 --- a/src/statics/css/login.css +++ b/src/statics/css/login.css @@ -14,6 +14,7 @@ --github-01: #e8eaee; --github-02: #d5d6f5; --github-03: #9fa2e3; + --board-textColor: #646464; } .ui-dark { @@ -33,6 +34,7 @@ --github-01: rgba(102, 103, 171, 0.2); --github-02: rgba(102, 103, 171, 0.4); --github-03: rgba(102, 103, 171, 0.7); + --board-textColor: #ededed; } .hidden { diff --git a/src/statics/css/login.css.map b/src/statics/css/login.css.map index b57fdd8..6648dda 100644 --- a/src/statics/css/login.css.map +++ b/src/statics/css/login.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/login.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;;;AAQF;EACE;;;ACvDF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AACA;EACE;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;AACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;;AAEA;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA,kBDxJA;ECyJA;EACA;EACA;EACA;EACA;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEF;EACE;EACA,ODpLE","file":"login.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/login.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;;;AAQF;EACE;;;AC3DF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AACA;EACE;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;AACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;;AAEA;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA,kBDxJA;ECyJA;EACA;EACA;EACA;EACA;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEF;EACE;EACA,ODpLE","file":"login.css"} \ No newline at end of file diff --git a/src/statics/css/main.css b/src/statics/css/main.css index 8556d94..31626c4 100644 --- a/src/statics/css/main.css +++ b/src/statics/css/main.css @@ -14,6 +14,7 @@ --github-01: #e8eaee; --github-02: #d5d6f5; --github-03: #9fa2e3; + --board-textColor: #646464; } .ui-dark { @@ -33,6 +34,7 @@ --github-01: rgba(102, 103, 171, 0.2); --github-02: rgba(102, 103, 171, 0.4); --github-03: rgba(102, 103, 171, 0.7); + --board-textColor: #ededed; } .hidden { diff --git a/src/statics/css/main.css.map b/src/statics/css/main.css.map index 4830de8..98c239c 100644 --- a/src/statics/css/main.css.map +++ b/src/statics/css/main.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../scss/main.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;;;AAQF;EACE","file":"main.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../scss/main.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;;;AAQF;EACE","file":"main.css"} \ No newline at end of file diff --git a/src/statics/css/modal.css b/src/statics/css/modal.css index 3ef0c46..20108eb 100644 --- a/src/statics/css/modal.css +++ b/src/statics/css/modal.css @@ -14,6 +14,7 @@ --github-01: #e8eaee; --github-02: #d5d6f5; --github-03: #9fa2e3; + --board-textColor: #646464; } .ui-dark { @@ -33,6 +34,7 @@ --github-01: rgba(102, 103, 171, 0.2); --github-02: rgba(102, 103, 171, 0.4); --github-03: rgba(102, 103, 171, 0.7); + --board-textColor: #ededed; } .hidden { diff --git a/src/statics/css/modal.css.map b/src/statics/css/modal.css.map index f701157..230d4ce 100644 --- a/src/statics/css/modal.css.map +++ b/src/statics/css/modal.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/modal.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;;;AAQF;EACE;;;ACvDF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EAEE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAGF;EACE;EACA;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA,kBD5EI;EC6EJ;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;;;AAKR;EACE;EACA;EACA","file":"modal.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/modal.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;;;AAQF;EACE;;;AC3DF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EAEE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAGF;EACE;EACA;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA,kBD5EI;EC6EJ;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;;;AAKR;EACE;EACA;EACA","file":"modal.css"} \ No newline at end of file diff --git a/src/statics/css/navbar.css b/src/statics/css/navbar.css index a5912b2..ba463bd 100644 --- a/src/statics/css/navbar.css +++ b/src/statics/css/navbar.css @@ -14,6 +14,7 @@ --github-01: #e8eaee; --github-02: #d5d6f5; --github-03: #9fa2e3; + --board-textColor: #646464; } .ui-dark { @@ -33,6 +34,7 @@ --github-01: rgba(102, 103, 171, 0.2); --github-02: rgba(102, 103, 171, 0.4); --github-03: rgba(102, 103, 171, 0.7); + --board-textColor: #ededed; } .hidden { diff --git a/src/statics/css/navbar.css.map b/src/statics/css/navbar.css.map index 5c814c5..efe561a 100644 --- a/src/statics/css/navbar.css.map +++ b/src/statics/css/navbar.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/navbar.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;;;AAQF;EACE;;;ACvDF;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA,aDRY;ECSZ;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AACA;EACE;EACA;EACA;;AAGJ;EACE;EACA;;AACA;EACE;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;;;AAIN;EACE,aD1CY;EC2CZ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA","file":"navbar.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/navbar.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;;;AAQF;EACE;;;AC3DF;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA,aDRY;ECSZ;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AACA;EACE;EACA;EACA;;AAGJ;EACE;EACA;;AACA;EACE;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;;;AAIN;EACE,aD1CY;EC2CZ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA","file":"navbar.css"} \ No newline at end of file diff --git a/src/statics/css/navbarHome.css b/src/statics/css/navbarHome.css index c57d29e..c946580 100644 --- a/src/statics/css/navbarHome.css +++ b/src/statics/css/navbarHome.css @@ -14,6 +14,7 @@ --github-01: #e8eaee; --github-02: #d5d6f5; --github-03: #9fa2e3; + --board-textColor: #646464; } .ui-dark { @@ -33,6 +34,7 @@ --github-01: rgba(102, 103, 171, 0.2); --github-02: rgba(102, 103, 171, 0.4); --github-03: rgba(102, 103, 171, 0.7); + --board-textColor: #ededed; } .hidden { diff --git a/src/statics/css/navbarHome.css.map b/src/statics/css/navbarHome.css.map index 7db85c0..d2a1563 100644 --- a/src/statics/css/navbarHome.css.map +++ b/src/statics/css/navbarHome.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/navbarHome.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;;;AAQF;EACE;;;ACvDF;EACE;EACA;EACA;EACA,aDHY;ECIZ;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGE;EACE;;AAIJ;EACE;EACA;;AAEE;EACE;;AAKN;EACE;EACA","file":"navbarHome.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/navbarHome.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;;;AAQF;EACE;;;AC3DF;EACE;EACA;EACA;EACA,aDHY;ECIZ;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGE;EACE;;AAIJ;EACE;EACA;;AAEE;EACE;;AAKN;EACE;EACA","file":"navbarHome.css"} \ No newline at end of file diff --git a/src/statics/css/navbarLanding.css b/src/statics/css/navbarLanding.css index fab3210..c4988d2 100644 --- a/src/statics/css/navbarLanding.css +++ b/src/statics/css/navbarLanding.css @@ -14,6 +14,7 @@ --github-01: #e8eaee; --github-02: #d5d6f5; --github-03: #9fa2e3; + --board-textColor: #646464; } .ui-dark { @@ -33,6 +34,7 @@ --github-01: rgba(102, 103, 171, 0.2); --github-02: rgba(102, 103, 171, 0.4); --github-03: rgba(102, 103, 171, 0.7); + --board-textColor: #ededed; } .hidden { diff --git a/src/statics/css/navbarLanding.css.map b/src/statics/css/navbarLanding.css.map index 9c58549..142061c 100644 --- a/src/statics/css/navbarLanding.css.map +++ b/src/statics/css/navbarLanding.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/navbarLanding.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;;;AAQF;EACE;;;ACvDF;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE,ODPM;ECQN","file":"navbarLanding.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/navbarLanding.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;;;AAQF;EACE;;;AC3DF;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE,ODPM;ECQN","file":"navbarLanding.css"} \ No newline at end of file diff --git a/src/statics/css/signup.css b/src/statics/css/signup.css index 6ba18e5..681e786 100644 --- a/src/statics/css/signup.css +++ b/src/statics/css/signup.css @@ -14,6 +14,7 @@ --github-01: #e8eaee; --github-02: #d5d6f5; --github-03: #9fa2e3; + --board-textColor: #646464; } .ui-dark { @@ -33,6 +34,7 @@ --github-01: rgba(102, 103, 171, 0.2); --github-02: rgba(102, 103, 171, 0.4); --github-03: rgba(102, 103, 171, 0.7); + --board-textColor: #ededed; } .hidden { diff --git a/src/statics/css/signup.css.map b/src/statics/css/signup.css.map index 90c29f4..d70c7bf 100644 --- a/src/statics/css/signup.css.map +++ b/src/statics/css/signup.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/signup.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;;;AAQF;EACE;;;ACvDF;EAsDE,aDrDY;ECsDZ;EACA;EACA;EACA;EACA;;AAzDA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAIF;EACE;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;;AAYF;EACE;EACA;;AACA;EACE;;AAKJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;;AACA;EACE;EACA,ODlFE;ECmFF;;AAGJ;EACE;EACA;EACA;EACA;EACA,kBD3FI;EC4FJ;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;;AAGA;EACE;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAKJ;EA0BE;EACA;EACA;EACA;EACA;;AA7BA;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;;AAEA;EACE,ODhJF;ECiJE;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAYN;EACE;EACA;;AACA;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;;AACA;EACE;EAEA;EACA;;AAMR;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;;AAGE;EACE;EACA;EACA;EACA;;AACA;EACE,OD1MN;;AC4MI;EAGE;EACA;;AAOV;EACE;EACA;EACA;;AAGF;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA,kBDrOA;ECsOA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEF;EACE;EACA,OD1QE","file":"signup.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/signup.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;;;AAQF;EACE;;;AC3DF;EAsDE,aDrDY;ECsDZ;EACA;EACA;EACA;EACA;;AAzDA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAIF;EACE;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;;AAYF;EACE;EACA;;AACA;EACE;;AAKJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;;AACA;EACE;EACA,ODlFE;ECmFF;;AAGJ;EACE;EACA;EACA;EACA;EACA,kBD3FI;EC4FJ;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;;AAGA;EACE;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAKJ;EA0BE;EACA;EACA;EACA;EACA;;AA7BA;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;;AAEA;EACE,ODhJF;ECiJE;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAYN;EACE;EACA;;AACA;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;;AACA;EACE;EAEA;EACA;;AAMR;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;;AAGE;EACE;EACA;EACA;EACA;;AACA;EACE,OD1MN;;AC4MI;EAGE;EACA;;AAOV;EACE;EACA;EACA;;AAGF;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA,kBDrOA;ECsOA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEF;EACE;EACA,OD1QE","file":"signup.css"} \ No newline at end of file diff --git a/src/statics/css/studyRecruit.css b/src/statics/css/studyRecruit.css new file mode 100644 index 0000000..94293aa --- /dev/null +++ b/src/statics/css/studyRecruit.css @@ -0,0 +1,133 @@ +@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css"); +:root { + --htmlbgColor: #ffffff; + --bgColor: #fcfcfc; + --bgColor-light: #eaeaea; + --borderColor: #ededed; + --borderColor2: #d6d6d6; + --borderColor3: #e1e1e1; + --textWhite: #eeeeee; + --textColor: #252525; + --textColor-dark: #8a8a8a; + --textColor-darker: #a1a1a1; + --textColor-darkest: #c2c2c2; + --github-01: #e8eaee; + --github-02: #d5d6f5; + --github-03: #9fa2e3; + --board-textColor: #646464; +} + +.ui-dark { + background-color: var(--htmlbgColor); + --htmlbgColor: #292929; + --bgColor: #373737; + --bgColor-light: #4a4a4a; + --bgColor-lighter: #565656; + --bgColor-dark: #1b1b1b; + --borderColor: #444444; + --borderColor2: #444444; + --borderColor3: #444444; + --textColor: #ededed; + --textColor-dark: #8a8a8a; + --textColor-darker: #8a8a8a; + --textColor-darkest: #838383; + --github-01: rgba(102, 103, 171, 0.2); + --github-02: rgba(102, 103, 171, 0.4); + --github-03: rgba(102, 103, 171, 0.7); + --board-textColor: #ededed; +} + +.hidden { + display: none; +} + +.studyrecruit { + font-family: "Pretendard"; + padding-top: 80px; + padding-left: 20%; + background-color: var(--htmlbgColor); + padding-right: 20%; +} +.studyrecruit .studyrecruit-heading { + display: flex; + flex-direction: column; +} +.studyrecruit .studyrecruit-heading .studyrecruit-h1 { + font-size: 20px; + line-height: 24px; + color: var(--textColor); + padding-bottom: 6px; +} +.studyrecruit .studyrecruit-heading .studyrecruit-h2 { + font-size: 12px; + line-height: 14px; + color: var(--textColor-dark); +} +.studyrecruit .studyrecuit-middle { + padding-top: 21px; + display: flex; + justify-content: space-between; +} +.studyrecruit .studyrecuit-middle .studyrecruit-search input { + background-color: var(--bgColor); + border: 1px solid var(--borderColor); + width: 32vw; + margin-left: 8px; + border-radius: 5px; + padding-left: 7px; +} +.studyrecruit .studyrecuit-middle .studyrecruit-search ::placeholder { + color: var(--textColor-darkest); + font-size: 10px; +} +.studyrecruit .studyrecuit-middle .studyrecruit-create { + cursor: pointer; + border: 1px solid #6667ab; + border-radius: 5px; + background-color: #6667ab; + color: #eeeeee; + font-size: 14px; + line-height: 17px; + width: 126px; + height: 30px; +} +.studyrecruit .studyrecruit-board { + margin-top: 21px; +} +.studyrecruit .studyrecruit-board table { + background-color: var(--bgColor); + border-radius: 8px; + box-sizing: border-box; + width: 100%; +} +.studyrecruit .studyrecruit-board table .studyrecruit-board-head { + font-weight: 600; + font-size: 14px; + line-height: 24px; + color: var(--board-textColor); + background-color: var(--bgColor-light); + padding: 0.4rem; + text-align: center; +} +.studyrecruit .studyrecruit-board table .studyrecruit-board-head.num { + width: 3rem; + border-radius: 8px 0 0 0; +} +.studyrecruit .studyrecruit-board table .studyrecruit-board-head.title { + width: 26rem; +} +.studyrecruit .studyrecruit-board table .studyrecruit-board-head.host { + width: 6rem; +} +.studyrecruit .studyrecruit-board table .studyrecruit-board-head.date { + width: 6rem; +} +.studyrecruit .studyrecruit-board table .studyrecruit-board-head.ppl { + width: 4rem; + border-radius: 0 8px 0 0; +} +.studyrecruit .studyrecruit-board table .studyrecruit-board-head.ppl svg { + margin-bottom: 3px; +} + +/*# sourceMappingURL=studyRecruit.css.map */ diff --git a/src/statics/css/studyRecruit.css.map b/src/statics/css/studyRecruit.css.map new file mode 100644 index 0000000..2a3e769 --- /dev/null +++ b/src/statics/css/studyRecruit.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/studyRecruit.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;;;AAQF;EACE;;;AC3DF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAIJ;EACE;EACA;EACA;;AAEE;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;;AAGJ;EACE;EACA;EACA;EACA,kBDzCM;EC0CN;EACA;EACA;EACA;EACA;;AAGJ;EACE;;AACA;EACE;EACA;EAEA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;EACA;;AACA;EACE","file":"studyRecruit.css"} \ No newline at end of file diff --git a/src/statics/scss/main.scss b/src/statics/scss/main.scss index 29f0647..7352e47 100644 --- a/src/statics/scss/main.scss +++ b/src/statics/scss/main.scss @@ -25,6 +25,8 @@ $textColor: #6c757d; --github-01: #e8eaee; --github-02: #d5d6f5; --github-03: #9fa2e3; + + --board-textColor: #646464; } // dark mode @@ -47,6 +49,8 @@ $textColor: #6c757d; --github-01: rgba(102, 103, 171, 0.2); --github-02: rgba(102, 103, 171, 0.4); --github-03: rgba(102, 103, 171, 0.7); + + --board-textColor: #ededed; } // Size Section diff --git a/src/statics/scss/studyRecruit.scss b/src/statics/scss/studyRecruit.scss new file mode 100644 index 0000000..3e168fb --- /dev/null +++ b/src/statics/scss/studyRecruit.scss @@ -0,0 +1,96 @@ +@import "main.scss"; + +.studyrecruit { + font-family: $font-family; + padding-top: 80px; + padding-left: 20%; + background-color: var(--htmlbgColor); + padding-right: 20%; + + .studyrecruit-heading { + display: flex; + flex-direction: column; + .studyrecruit-h1 { + font-size: 20px; + line-height: 24px; + color: var(--textColor); + padding-bottom: 6px; + } + .studyrecruit-h2 { + font-size: 12px; + line-height: 14px; + color: var(--textColor-dark); + } + } + + .studyrecuit-middle { + padding-top: 21px; + display: flex; + justify-content: space-between; + .studyrecruit-search { + & input { + background-color: var(--bgColor); + border: 1px solid var(--borderColor); + width: 32vw; + margin-left: 8px; + border-radius: 5px; + padding-left: 7px; + } + ::placeholder { + color: var(--textColor-darkest); + font-size: 10px; + } + } + .studyrecruit-create { + cursor: pointer; + border: 1px solid $mainColor; + border-radius: 5px; + background-color: $mainColor; + color: #eeeeee; + font-size: 14px; + line-height: 17px; + width: 126px; + height: 30px; + } + } + .studyrecruit-board { + margin-top: 21px; + & table { + background-color: var(--bgColor); + border-radius: 8px; + // border: 1px solid #d7d7d7; + box-sizing: border-box; + width: 100%; + .studyrecruit-board-head { + font-weight: 600; + font-size: 14px; + line-height: 24px; + color: var(--board-textColor); + background-color: var(--bgColor-light); + padding: 0.4rem; + text-align: center; + + &.num { + width: 3rem; + border-radius: 8px 0 0 0; + } + &.title { + width: 26rem; + } + &.host { + width: 6rem; + } + &.date { + width: 6rem; + } + &.ppl { + width: 4rem; + border-radius: 0 8px 0 0; + & svg { + margin-bottom: 3px; + } + } + } + } + } +} diff --git a/yarn.lock b/yarn.lock index ffc1a7b..bafe31e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1025,7 +1025,7 @@ core-js-pure "^3.20.2" regenerator-runtime "^0.13.4" -"@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.16", "@babel/runtime@^7.14.0", "@babel/runtime@^7.16.3", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2": +"@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.13.16", "@babel/runtime@^7.14.0", "@babel/runtime@^7.16.3", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2": version "7.17.0" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.0.tgz#b8d142fc0f7664fb3d9b5833fd40dcbab89276c0" integrity sha512-etcO/ohMNaNA2UBdaXBBSX/3aEzFMRrVfaPv8Ptc0k+cWpWW0QFiGZ2XnVqQZI1Cf734LbPGmqBKWESfW4x/dQ== @@ -1103,6 +1103,17 @@ dependencies: postcss-value-parser "^4.2.0" +"@emotion/cache@^11.4.0", "@emotion/cache@^11.7.1": + version "11.7.1" + resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.7.1.tgz#08d080e396a42e0037848214e8aa7bf879065539" + integrity sha512-r65Zy4Iljb8oyjtLeCuBH8Qjiy107dOYC6SJq7g7GV5UCQWMObY4SJDPGFjiiVpPrOJ2hmJOoBiYTC7hwx9E2A== + dependencies: + "@emotion/memoize" "^0.7.4" + "@emotion/sheet" "^1.1.0" + "@emotion/utils" "^1.0.0" + "@emotion/weak-memoize" "^0.2.5" + stylis "4.0.13" + "@emotion/hash@^0.8.0": version "0.8.0" resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413" @@ -1120,16 +1131,60 @@ resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb" integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw== +"@emotion/memoize@^0.7.4": + version "0.7.5" + resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.5.tgz#2c40f81449a4e554e9fc6396910ed4843ec2be50" + integrity sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ== + +"@emotion/react@^11.1.1": + version "11.7.1" + resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.7.1.tgz#3f800ce9b20317c13e77b8489ac4a0b922b2fe07" + integrity sha512-DV2Xe3yhkF1yT4uAUoJcYL1AmrnO5SVsdfvu+fBuS7IbByDeTVx9+wFmvx9Idzv7/78+9Mgx2Hcmr7Fex3tIyw== + dependencies: + "@babel/runtime" "^7.13.10" + "@emotion/cache" "^11.7.1" + "@emotion/serialize" "^1.0.2" + "@emotion/sheet" "^1.1.0" + "@emotion/utils" "^1.0.0" + "@emotion/weak-memoize" "^0.2.5" + hoist-non-react-statics "^3.3.1" + +"@emotion/serialize@^1.0.2": + version "1.0.2" + resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.0.2.tgz#77cb21a0571c9f68eb66087754a65fa97bfcd965" + integrity sha512-95MgNJ9+/ajxU7QIAruiOAdYNjxZX7G2mhgrtDWswA21VviYIRP1R5QilZ/bDY42xiKsaktP4egJb3QdYQZi1A== + dependencies: + "@emotion/hash" "^0.8.0" + "@emotion/memoize" "^0.7.4" + "@emotion/unitless" "^0.7.5" + "@emotion/utils" "^1.0.0" + csstype "^3.0.2" + +"@emotion/sheet@^1.1.0": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.1.0.tgz#56d99c41f0a1cda2726a05aa6a20afd4c63e58d2" + integrity sha512-u0AX4aSo25sMAygCuQTzS+HsImZFuS8llY8O7b9MDRzbJM0kVJlAz6KNDqcG7pOuQZJmj/8X/rAW+66kMnMW+g== + "@emotion/stylis@^0.8.4": version "0.8.5" resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04" integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ== -"@emotion/unitless@^0.7.4": +"@emotion/unitless@^0.7.4", "@emotion/unitless@^0.7.5": version "0.7.5" resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed" integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg== +"@emotion/utils@^1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.0.0.tgz#abe06a83160b10570816c913990245813a2fd6af" + integrity sha512-mQC2b3XLDs6QCW+pDQDiyO/EdGZYOygE8s5N5rrzjSI4M3IejPE/JPndCBwRT9z982aqQNi6beWs1UeayrQxxA== + +"@emotion/weak-memoize@^0.2.5": + version "0.2.5" + resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46" + integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA== + "@eslint/eslintrc@^1.0.5": version "1.0.5" resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-1.0.5.tgz#33f1b838dbf1f923bfa517e008362b78ddbbf318" @@ -2032,7 +2087,7 @@ resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.4.tgz#cd667bcfdd025213aafb7ca5915a932590acdcdc" integrity sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw== -"@types/react-transition-group@^4.2.0", "@types/react-transition-group@^4.4.1": +"@types/react-transition-group@^4.2.0", "@types/react-transition-group@^4.4.0", "@types/react-transition-group@^4.4.1": version "4.4.4" resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.4.tgz#acd4cceaa2be6b757db61ed7b432e103242d163e" integrity sha512-7gAPz7anVK5xzbeQW9wFBDg7G++aPLAFY0QaSMOou9rJZpbuI58WAuJrgu+qR92l61grlnCUe7AFX8KGahAgug== @@ -5094,7 +5149,7 @@ history@^5.2.0: dependencies: "@babel/runtime" "^7.7.6" -hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.2: +hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2: version "3.3.2" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw== @@ -7940,7 +7995,7 @@ prop-types-extra@^1.1.0: react-is "^16.3.2" warning "^4.0.0" -prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1: +prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1: version "15.8.1" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5" integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg== @@ -8207,6 +8262,19 @@ react-scripts@5.0.0: optionalDependencies: fsevents "^2.3.2" +react-select@^5.2.2: + version "5.2.2" + resolved "https://registry.yarnpkg.com/react-select/-/react-select-5.2.2.tgz#3d5edf0a60f1276fd5f29f9f90a305f0a25a5189" + integrity sha512-miGS2rT1XbFNjduMZT+V73xbJEeMzVkJOz727F6MeAr2hKE0uUSA8Ff7vD44H32x2PD3SRB6OXTY/L+fTV3z9w== + dependencies: + "@babel/runtime" "^7.12.0" + "@emotion/cache" "^11.4.0" + "@emotion/react" "^11.1.1" + "@types/react-transition-group" "^4.4.0" + memoize-one "^5.0.0" + prop-types "^15.6.0" + react-transition-group "^4.3.0" + react-tooltip@^4.2.21: version "4.2.21" resolved "https://registry.yarnpkg.com/react-tooltip/-/react-tooltip-4.2.21.tgz#840123ed86cf33d50ddde8ec8813b2960bfded7f" @@ -9135,6 +9203,11 @@ stylehacks@^5.0.2: browserslist "^4.16.6" postcss-selector-parser "^6.0.4" +stylis@4.0.13: + version "4.0.13" + resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.0.13.tgz#f5db332e376d13cc84ecfe5dace9a2a51d954c91" + integrity sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag== + supports-color@^5.3.0, supports-color@^5.5.0: version "5.5.0" resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f" From 7880842402e4139249ab19c6f94f6f1b2818c053 Mon Sep 17 00:00:00 2001 From: rosieyeon Date: Fri, 4 Feb 2022 16:38:51 +0900 Subject: [PATCH 02/62] [#53] feat: Change Url name (studyrooms to studyrecruit) --- src/components/navbar.js | 2 +- src/statics/css/navbar.css | 1 + src/statics/css/navbar.css.map | 2 +- src/statics/scss/navbar.scss | 1 + 4 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/navbar.js b/src/components/navbar.js index ee39229..49db4f2 100644 --- a/src/components/navbar.js +++ b/src/components/navbar.js @@ -94,7 +94,7 @@ function Navbar() { 자유열람실 - + 스터디 모집 diff --git a/src/statics/css/navbar.css b/src/statics/css/navbar.css index ba463bd..14426b7 100644 --- a/src/statics/css/navbar.css +++ b/src/statics/css/navbar.css @@ -105,6 +105,7 @@ text-align: start; padding-left: 12px; color: var(--textColor); + font-size: 14px; } .navbar-dropdown button:hover { background-color: var(--borderColor); diff --git a/src/statics/css/navbar.css.map b/src/statics/css/navbar.css.map index efe561a..10fd584 100644 --- a/src/statics/css/navbar.css.map +++ b/src/statics/css/navbar.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/navbar.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;;;AAQF;EACE;;;AC3DF;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA,aDRY;ECSZ;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AACA;EACE;EACA;EACA;;AAGJ;EACE;EACA;;AACA;EACE;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;;;AAIN;EACE,aD1CY;EC2CZ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA","file":"navbar.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/navbar.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;;;AAQF;EACE;;;AC3DF;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA,aDRY;ECSZ;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AACA;EACE;EACA;EACA;;AAGJ;EACE;EACA;;AACA;EACE;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;;;AAIN;EACE,aD1CY;EC2CZ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA","file":"navbar.css"} \ No newline at end of file diff --git a/src/statics/scss/navbar.scss b/src/statics/scss/navbar.scss index bec3502..29ace5e 100644 --- a/src/statics/scss/navbar.scss +++ b/src/statics/scss/navbar.scss @@ -64,6 +64,7 @@ text-align: start; padding-left: 12px; color: var(--textColor); + font-size: 14px; &:hover { background-color: var(--borderColor); } From aef95608bea0e2ed32dc193f9f66808752840fe6 Mon Sep 17 00:00:00 2001 From: rosieyeon Date: Fri, 4 Feb 2022 23:01:34 +0900 Subject: [PATCH 03/62] [#53] feat: studyrecruit/create design --- src/index.js | 5 + src/pages/StudyRecruit.js | 9 +- src/pages/studyRecruitCreate.js | 59 +++++++++++ src/statics/css/studyRecruitCreate.css | 118 +++++++++++++++++++++ src/statics/css/studyRecruitCreate.css.map | 1 + src/statics/scss/studyRecruitCreate.scss | 82 ++++++++++++++ 6 files changed, 273 insertions(+), 1 deletion(-) create mode 100644 src/pages/studyRecruitCreate.js create mode 100644 src/statics/css/studyRecruitCreate.css create mode 100644 src/statics/css/studyRecruitCreate.css.map create mode 100644 src/statics/scss/studyRecruitCreate.scss diff --git a/src/index.js b/src/index.js index f1b8fe8..9c2d347 100644 --- a/src/index.js +++ b/src/index.js @@ -14,6 +14,7 @@ import isLogin from "./utils/isLogin"; import HomeAchievement from "./pages/Home_achievement"; import HomeStatistics from "./pages/Home_statistics"; import HomeTodays from "./pages/Home_todays"; +import StudyRecruitCreate from "./pages/studyRecruitCreate"; ReactDOM.render( @@ -30,6 +31,10 @@ ReactDOM.render( path="studyrecruit" element={isLogin() ? : } /> + : } + /> : } diff --git a/src/pages/StudyRecruit.js b/src/pages/StudyRecruit.js index ed1392e..9361e65 100644 --- a/src/pages/StudyRecruit.js +++ b/src/pages/StudyRecruit.js @@ -1,6 +1,8 @@ +import { useNavigate } from "react-router-dom"; import "../statics/css/studyRecruit.css"; export default function StudyRecruit() { + const navigate = useNavigate(); return (
@@ -14,7 +16,12 @@ export default function StudyRecruit() {
- +
diff --git a/src/pages/studyRecruitCreate.js b/src/pages/studyRecruitCreate.js new file mode 100644 index 0000000..bab3d42 --- /dev/null +++ b/src/pages/studyRecruitCreate.js @@ -0,0 +1,59 @@ +import "../statics/css/studyRecruitCreate.css"; + +export default function StudyRecruitCreate() { + return ( +
+
+ 스터디 모집하기 +
+
+
+
+ + + + +
카테고리 + +
+
+
+ + + + + + + + + +
스터디 이름 + +
한줄 소개 + +
+
+
+ + + + + + + +
스터디 요일
모집 기간
+
+
+
+ 스터디 소개 + +
+
+ + + + ); +} diff --git a/src/statics/css/studyRecruitCreate.css b/src/statics/css/studyRecruitCreate.css new file mode 100644 index 0000000..5b7c53a --- /dev/null +++ b/src/statics/css/studyRecruitCreate.css @@ -0,0 +1,118 @@ +@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css"); +:root { + --htmlbgColor: #ffffff; + --bgColor: #fcfcfc; + --bgColor-light: #eaeaea; + --borderColor: #ededed; + --borderColor2: #d6d6d6; + --borderColor3: #e1e1e1; + --textWhite: #eeeeee; + --textColor: #252525; + --textColor-dark: #8a8a8a; + --textColor-darker: #a1a1a1; + --textColor-darkest: #c2c2c2; + --github-01: #e8eaee; + --github-02: #d5d6f5; + --github-03: #9fa2e3; + --board-textColor: #646464; +} + +.ui-dark { + background-color: var(--htmlbgColor); + --htmlbgColor: #292929; + --bgColor: #373737; + --bgColor-light: #4a4a4a; + --bgColor-lighter: #565656; + --bgColor-dark: #1b1b1b; + --borderColor: #444444; + --borderColor2: #444444; + --borderColor3: #444444; + --textColor: #ededed; + --textColor-dark: #8a8a8a; + --textColor-darker: #8a8a8a; + --textColor-darkest: #838383; + --github-01: rgba(102, 103, 171, 0.2); + --github-02: rgba(102, 103, 171, 0.4); + --github-03: rgba(102, 103, 171, 0.7); + --board-textColor: #ededed; +} + +.hidden { + display: none; +} + +.recruit-create { + font-family: "Pretendard"; + padding-top: 80px; + padding-left: 25%; + background-color: var(--htmlbgColor); + padding-right: 25%; +} +.recruit-create .recruit-create-heading { + font-size: 20px; + line-height: 24px; + color: var(--textColor); + border-bottom: 1px solid var(--textColor); + padding-bottom: 12px; +} +.recruit-create .recruit-create-heading span { + padding-left: 5px; +} +.recruit-create .recruit-create-contents .recruit-create-content { + border-bottom: 1px solid var(--textColor-darkest); +} +.recruit-create .recruit-create-contents .recruit-create-content table { + margin: 33px 5px 33px 5px; +} +.recruit-create .recruit-create-contents .recruit-create-content .recruit-create-content-row { + margin-bottom: 15px; +} +.recruit-create .recruit-create-contents .recruit-create-content .recruit-create-content-row.a1 { + font-size: 14px; + line-height: 17px; + color: var(--textColor); + width: 8rem; +} +.recruit-create .recruit-create-contents .recruit-create-content .recruit-create-content-row.a2 { + width: 32rem; +} +.recruit-create .recruit-create-contents .recruit-create-content input { + background: var(--bgColor); + border: 1px solid var(--borderColor); + box-sizing: border-box; + border-radius: 7px; + height: 30px; + width: 95%; + margin-bottom: 5px; + margin-top: 5px; + padding-left: 8px; +} +.recruit-create .recruit-create-contents .recruit-create-content ::placeholder { + font-size: 12px; + line-height: 14px; + color: var(--textColor-darkest); +} +.recruit-create .recruit-create-contents .recruit-create-content :focus { + outline: 0.8px solid #6667ab; +} +.recruit-create .recruit-create-contents .recruit-create-content .recruit-create-content-description { + display: flex; + flex-direction: column; + font-size: 14px; + line-height: 17px; + color: var(--textColor); + margin: 40px 0px 33px 5px; +} +.recruit-create .recruit-create-contents .recruit-create-content .recruit-create-content-description span { + margin-bottom: 20px; +} +.recruit-create .recruit-create-contents .recruit-create-content .recruit-create-content-description textarea { + width: 100%; + height: 240px; + border-radius: 10px; + border: 1px solid var(--borderColor); + background-color: var(--bgColor); + padding: 12px; +} + +/*# sourceMappingURL=studyRecruitCreate.css.map */ diff --git a/src/statics/css/studyRecruitCreate.css.map b/src/statics/css/studyRecruitCreate.css.map new file mode 100644 index 0000000..3f2b3b0 --- /dev/null +++ b/src/statics/css/studyRecruitCreate.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/studyRecruitCreate.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;;;AAQF;EACE;;;AC3DF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;;AAKF;EACE;;AAEA;EACE;;AAEF;EACE;;AACA;EACE;EACA;EACA;EACA;;AAEF;EACE;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA","file":"studyRecruitCreate.css"} \ No newline at end of file diff --git a/src/statics/scss/studyRecruitCreate.scss b/src/statics/scss/studyRecruitCreate.scss new file mode 100644 index 0000000..24b9809 --- /dev/null +++ b/src/statics/scss/studyRecruitCreate.scss @@ -0,0 +1,82 @@ +@import "main.scss"; + +.recruit-create { + font-family: $font-family; + padding-top: 80px; + padding-left: 25%; + background-color: var(--htmlbgColor); + padding-right: 25%; + + .recruit-create-heading { + font-size: 20px; + line-height: 24px; + color: var(--textColor); + border-bottom: 1px solid var(--textColor); + padding-bottom: 12px; + & span { + padding-left: 5px; + } + } + + .recruit-create-contents { + .recruit-create-content { + border-bottom: 1px solid var(--textColor-darkest); + + & table { + margin: 33px 5px 33px 5px; + } + .recruit-create-content-row { + margin-bottom: 15px; + &.a1 { + font-size: 14px; + line-height: 17px; + color: var(--textColor); + width: 8rem; + } + &.a2 { + width: 32rem; + } + } + & input { + background: var(--bgColor); + border: 1px solid var(--borderColor); + box-sizing: border-box; + border-radius: 7px; + height: 30px; + width: 95%; + margin-bottom: 5px; + margin-top: 5px; + padding-left: 8px; + } + ::placeholder { + font-size: 12px; + line-height: 14px; + color: var(--textColor-darkest); + } + :focus { + outline: 0.8px solid $mainColor; + } + + .recruit-create-content-description { + display: flex; + flex-direction: column; + font-size: 14px; + line-height: 17px; + color: var(--textColor); + margin: 40px 0px 33px 5px; + + & span { + margin-bottom: 20px; + } + & textarea { + width: 100%; + height: 240px; + border-radius: 10px; + border: 1px solid var(--borderColor); + background-color: var(--bgColor); + padding: 12px; + } + } + } + } +} From afe2a76721f24b7632ab8fe3a388ef9d3f5a4c56 Mon Sep 17 00:00:00 2001 From: rosieyeon Date: Fri, 4 Feb 2022 23:20:39 +0900 Subject: [PATCH 04/62] [#53] feat: button design --- src/pages/studyRecruitCreate.js | 4 +++- src/statics/css/studyRecruitCreate.css | 14 ++++++++++++++ src/statics/css/studyRecruitCreate.css.map | 2 +- src/statics/scss/studyRecruitCreate.scss | 15 +++++++++++++++ 4 files changed, 33 insertions(+), 2 deletions(-) diff --git a/src/pages/studyRecruitCreate.js b/src/pages/studyRecruitCreate.js index bab3d42..ccf055c 100644 --- a/src/pages/studyRecruitCreate.js +++ b/src/pages/studyRecruitCreate.js @@ -53,7 +53,9 @@ export default function StudyRecruitCreate() { - +
+ +
); } diff --git a/src/statics/css/studyRecruitCreate.css b/src/statics/css/studyRecruitCreate.css index 5b7c53a..3687a34 100644 --- a/src/statics/css/studyRecruitCreate.css +++ b/src/statics/css/studyRecruitCreate.css @@ -114,5 +114,19 @@ background-color: var(--bgColor); padding: 12px; } +.recruit-create button { + cursor: pointer; + border: none; + border-radius: 7px; + color: #eeeeee; + background-color: #6667ab; + font-size: 16px; + line-height: 19px; + text-align: center; + width: 8rem; + height: 36px; + margin-top: 40px; + margin-bottom: 60px; +} /*# sourceMappingURL=studyRecruitCreate.css.map */ diff --git a/src/statics/css/studyRecruitCreate.css.map b/src/statics/css/studyRecruitCreate.css.map index 3f2b3b0..f456c54 100644 --- a/src/statics/css/studyRecruitCreate.css.map +++ b/src/statics/css/studyRecruitCreate.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/studyRecruitCreate.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;;;AAQF;EACE;;;AC3DF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;;AAKF;EACE;;AAEA;EACE;;AAEF;EACE;;AACA;EACE;EACA;EACA;EACA;;AAEF;EACE;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA","file":"studyRecruitCreate.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/studyRecruitCreate.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;;;AAQF;EACE;;;AC3DF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;;AAKF;EACE;;AAEA;EACE;;AAEF;EACE;;AACA;EACE;EACA;EACA;EACA;;AAEF;EACE;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAMR;EACE;EACA;EACA;EACA;EACA,kBDjFQ;ECkFR;EACA;EACA;EACA;EACA;EACA;EACA","file":"studyRecruitCreate.css"} \ No newline at end of file diff --git a/src/statics/scss/studyRecruitCreate.scss b/src/statics/scss/studyRecruitCreate.scss index 24b9809..47323b2 100644 --- a/src/statics/scss/studyRecruitCreate.scss +++ b/src/statics/scss/studyRecruitCreate.scss @@ -79,4 +79,19 @@ } } } + + & button { + cursor: pointer; + border: none; + border-radius: 7px; + color: #eeeeee; + background-color: $mainColor; + font-size: 16px; + line-height: 19px; + text-align: center; + width: 8rem; + height: 36px; + margin-top: 40px; + margin-bottom: 60px; + } } From 54ab10ca383ed86172602d7e62097393d71fa536 Mon Sep 17 00:00:00 2001 From: rosieyeon Date: Sat, 5 Feb 2022 03:20:40 +0900 Subject: [PATCH 05/62] [#55] feat: study recruit datepicker in calendar --- package.json | 3 + public/icons/_arrow-left.svg | 3 + public/icons/_arrow-right.svg | 3 + src/components/datepicker.js | 82 ++++++++++++++++++++++ src/components/datepickerStart.js | 10 +++ src/pages/studyRecruitCreate.js | 69 +++++++++++------- src/statics/css/datepicker.css | 82 ++++++++++++++++++++++ src/statics/css/datepicker.css.map | 1 + src/statics/css/datepickerStart.css | 58 +++++++++++++++ src/statics/css/datepickerStart.css.map | 1 + src/statics/css/studyRecruitCreate.css | 11 +-- src/statics/css/studyRecruitCreate.css.map | 2 +- src/statics/scss/datepicker.scss | 40 +++++++++++ src/statics/scss/datepickerStart.scss | 16 +++++ src/statics/scss/studyRecruitCreate.scss | 38 +++++----- yarn.lock | 65 +++++++++++++++-- 16 files changed, 434 insertions(+), 50 deletions(-) create mode 100644 public/icons/_arrow-left.svg create mode 100644 public/icons/_arrow-right.svg create mode 100644 src/components/datepicker.js create mode 100644 src/components/datepickerStart.js create mode 100644 src/statics/css/datepicker.css create mode 100644 src/statics/css/datepicker.css.map create mode 100644 src/statics/css/datepickerStart.css create mode 100644 src/statics/css/datepickerStart.css.map create mode 100644 src/statics/scss/datepicker.scss create mode 100644 src/statics/scss/datepickerStart.scss diff --git a/package.json b/package.json index eff0ffc..a3ac7ed 100644 --- a/package.json +++ b/package.json @@ -18,12 +18,15 @@ "axios": "^0.25.0", "bootstrap": "^5.1.3", "classnames": "^2.3.1", + "date-fns": "^2.28.0", "jquery": "3.5.0", "node-sass": "^7.0.1", "openvidu-browser": "2.20.0", "react": "^17.0.2", "react-bootstrap": "^2.1.1", "react-calendar-heatmap": "^1.8.1", + "react-date-range": "^1.4.0", + "react-datepicker": "^4.6.0", "react-dom": "^17.0.2", "react-icons": "^4.3.1", "react-router-dom": "^6.2.1", diff --git a/public/icons/_arrow-left.svg b/public/icons/_arrow-left.svg new file mode 100644 index 0000000..a1b8352 --- /dev/null +++ b/public/icons/_arrow-left.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/icons/_arrow-right.svg b/public/icons/_arrow-right.svg new file mode 100644 index 0000000..c52552e --- /dev/null +++ b/public/icons/_arrow-right.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/datepicker.js b/src/components/datepicker.js new file mode 100644 index 0000000..db38c20 --- /dev/null +++ b/src/components/datepicker.js @@ -0,0 +1,82 @@ +import React, { useState } from "react"; +import { addDays } from "date-fns"; + +import DatePicker, { registerLocale } from "react-datepicker"; +import "react-datepicker/dist/react-datepicker.css"; +import "../statics/css/datepicker.css"; + +import ko from "date-fns/locale/ko"; +registerLocale("ko", ko); + +// CSS Modules, react-datepicker-cssmodules.css +// import 'react-datepicker/dist/react-datepicker-cssmodules.css'; + +export default function StudyDatePicker() { + const [startDate, setStartDate] = useState(addDays(new Date(), 7)); + const months = [ + "January", + "February", + "March", + "April", + "May", + "June", + "July", + "August", + "September", + "October", + "November", + "December", + ]; + return ( + setStartDate(date)} + minDate={addDays(new Date(), 1)} + renderCustomHeader={({ + date, + decreaseMonth, + increaseMonth, + prevMonthButtonDisabled, + nextMonthButtonDisabled, + }) => ( +
+ + + +
+ {months[date.getMonth()]}, {date.getFullYear()} +
+ + + +
+ )} + /> + ); +} diff --git a/src/components/datepickerStart.js b/src/components/datepickerStart.js new file mode 100644 index 0000000..f4ff967 --- /dev/null +++ b/src/components/datepickerStart.js @@ -0,0 +1,10 @@ +import React, { useState } from "react"; +import * as dataFns from "date-fns"; +import "../statics/css/datepickerStart.css"; + +export default function StudyDatePickerStart() { + const [date, setDate] = useState(new Date()); + return ( +
{dataFns.format(date, "MM/dd/yyyy")}
+ ); +} diff --git a/src/pages/studyRecruitCreate.js b/src/pages/studyRecruitCreate.js index ccf055c..15ea593 100644 --- a/src/pages/studyRecruitCreate.js +++ b/src/pages/studyRecruitCreate.js @@ -1,3 +1,5 @@ +import StudyDatePicker from "../components/datepicker"; +import StudyDatePickerStart from "../components/datepickerStart"; import "../statics/css/studyRecruitCreate.css"; export default function StudyRecruitCreate() { @@ -9,38 +11,57 @@ export default function StudyRecruitCreate() {
- - - - + + + + + +
카테고리 - -
카테고리 + +
- - - - - - - - + + + + + + + + + +
스터디 이름 - -
한줄 소개 - -
스터디 이름 + +
한줄 소개 + +
- - - - - - + + + + + + + + + + +
스터디 요일
모집 기간
스터디 요일
모집 기간 + + - + +
diff --git a/src/statics/css/datepicker.css b/src/statics/css/datepicker.css new file mode 100644 index 0000000..75cb2a8 --- /dev/null +++ b/src/statics/css/datepicker.css @@ -0,0 +1,82 @@ +@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css"); +:root { + --htmlbgColor: #ffffff; + --bgColor: #fcfcfc; + --bgColor-light: #eaeaea; + --borderColor: #ededed; + --borderColor2: #d6d6d6; + --borderColor3: #e1e1e1; + --textWhite: #eeeeee; + --textColor: #252525; + --textColor-dark: #8a8a8a; + --textColor-darker: #a1a1a1; + --textColor-darkest: #c2c2c2; + --github-01: #e8eaee; + --github-02: #d5d6f5; + --github-03: #9fa2e3; + --board-textColor: #646464; +} + +.ui-dark { + background-color: var(--htmlbgColor); + --htmlbgColor: #292929; + --bgColor: #373737; + --bgColor-light: #4a4a4a; + --bgColor-lighter: #565656; + --bgColor-dark: #1b1b1b; + --borderColor: #444444; + --borderColor2: #444444; + --borderColor3: #444444; + --textColor: #ededed; + --textColor-dark: #8a8a8a; + --textColor-darker: #8a8a8a; + --textColor-darkest: #838383; + --github-01: rgba(102, 103, 171, 0.2); + --github-02: rgba(102, 103, 171, 0.4); + --github-03: rgba(102, 103, 171, 0.7); + --board-textColor: #ededed; +} + +.hidden { + display: none; +} + +.react-datepicker__wrapper { + font-family: "Pretendard"; +} + +.react-datepicker__input-container { + font-family: "Pretendard"; +} +.react-datepicker__input-container input { + color: var(--textColor); + font-size: 14px; + width: 6.5rem; + text-align: center; + border: 1px solid var(--borderColor); + border-radius: 5px; + height: 30px; + background-color: var(--bgColor); +} + +.react-datepicker { + font-family: "Pretendard"; +} +.react-datepicker .react-datepicker__header { + border: none; + background-color: var(--bgColor); +} +.react-datepicker .react-datepicker__header .arrow { + cursor: pointer; + border: none; + background-color: var(--bgColor); + margin: 0px 10px 2px 10px; +} +.react-datepicker .date-customerheader { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 16px; +} + +/*# sourceMappingURL=datepicker.css.map */ diff --git a/src/statics/css/datepicker.css.map b/src/statics/css/datepicker.css.map new file mode 100644 index 0000000..6c8f610 --- /dev/null +++ b/src/statics/css/datepicker.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/datepicker.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;;;AAQF;EACE;;;AC3DF;EACE;;;AAEF;EACE,aDHY;;ACIZ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE,aDjBY;;ACkBZ;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA","file":"datepicker.css"} \ No newline at end of file diff --git a/src/statics/css/datepickerStart.css b/src/statics/css/datepickerStart.css new file mode 100644 index 0000000..57aacd9 --- /dev/null +++ b/src/statics/css/datepickerStart.css @@ -0,0 +1,58 @@ +@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css"); +:root { + --htmlbgColor: #ffffff; + --bgColor: #fcfcfc; + --bgColor-light: #eaeaea; + --borderColor: #ededed; + --borderColor2: #d6d6d6; + --borderColor3: #e1e1e1; + --textWhite: #eeeeee; + --textColor: #252525; + --textColor-dark: #8a8a8a; + --textColor-darker: #a1a1a1; + --textColor-darkest: #c2c2c2; + --github-01: #e8eaee; + --github-02: #d5d6f5; + --github-03: #9fa2e3; + --board-textColor: #646464; +} + +.ui-dark { + background-color: var(--htmlbgColor); + --htmlbgColor: #292929; + --bgColor: #373737; + --bgColor-light: #4a4a4a; + --bgColor-lighter: #565656; + --bgColor-dark: #1b1b1b; + --borderColor: #444444; + --borderColor2: #444444; + --borderColor3: #444444; + --textColor: #ededed; + --textColor-dark: #8a8a8a; + --textColor-darker: #8a8a8a; + --textColor-darkest: #838383; + --github-01: rgba(102, 103, 171, 0.2); + --github-02: rgba(102, 103, 171, 0.4); + --github-03: rgba(102, 103, 171, 0.7); + --board-textColor: #ededed; +} + +.hidden { + display: none; +} + +.datepicker-start { + color: var(--textColor-dark); + font-size: 14px; + width: 6.5rem; + text-align: center; + border: 1px solid var(--borderColor); + border-radius: 5px; + height: 30px; + background-color: var(--bgColor-light); + display: flex; + align-items: center; + justify-content: center; +} + +/*# sourceMappingURL=datepickerStart.css.map */ diff --git a/src/statics/css/datepickerStart.css.map b/src/statics/css/datepickerStart.css.map new file mode 100644 index 0000000..beb1c4a --- /dev/null +++ b/src/statics/css/datepickerStart.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/datepickerStart.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;;;AAQF;EACE;;;AC3DF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA","file":"datepickerStart.css"} \ No newline at end of file diff --git a/src/statics/css/studyRecruitCreate.css b/src/statics/css/studyRecruitCreate.css index 3687a34..072f384 100644 --- a/src/statics/css/studyRecruitCreate.css +++ b/src/statics/css/studyRecruitCreate.css @@ -44,9 +44,9 @@ .recruit-create { font-family: "Pretendard"; padding-top: 80px; - padding-left: 25%; + padding-left: 28%; background-color: var(--htmlbgColor); - padding-right: 25%; + padding-right: 28%; } .recruit-create .recruit-create-heading { font-size: 20px; @@ -76,7 +76,10 @@ .recruit-create .recruit-create-contents .recruit-create-content .recruit-create-content-row.a2 { width: 32rem; } -.recruit-create .recruit-create-contents .recruit-create-content input { +.recruit-create .recruit-create-contents .recruit-create-content .recruit-create-content-row.a3 { + padding-right: 10px; +} +.recruit-create .recruit-create-contents .recruit-create-content .recruit-input { background: var(--bgColor); border: 1px solid var(--borderColor); box-sizing: border-box; @@ -114,7 +117,7 @@ background-color: var(--bgColor); padding: 12px; } -.recruit-create button { +.recruit-create center button { cursor: pointer; border: none; border-radius: 7px; diff --git a/src/statics/css/studyRecruitCreate.css.map b/src/statics/css/studyRecruitCreate.css.map index f456c54..b6214e3 100644 --- a/src/statics/css/studyRecruitCreate.css.map +++ b/src/statics/css/studyRecruitCreate.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/studyRecruitCreate.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;;;AAQF;EACE;;;AC3DF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;;AAKF;EACE;;AAEA;EACE;;AAEF;EACE;;AACA;EACE;EACA;EACA;EACA;;AAEF;EACE;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAMR;EACE;EACA;EACA;EACA;EACA,kBDjFQ;ECkFR;EACA;EACA;EACA;EACA;EACA;EACA","file":"studyRecruitCreate.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/studyRecruitCreate.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;;;AAQF;EACE;;;AC3DF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;;AAKF;EACE;;AAEA;EACE;;AAEF;EACE;;AACA;EACE;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAMN;EACE;EACA;EACA;EACA;EACA,kBDpFM;ECqFN;EACA;EACA;EACA;EACA;EACA;EACA","file":"studyRecruitCreate.css"} \ No newline at end of file diff --git a/src/statics/scss/datepicker.scss b/src/statics/scss/datepicker.scss new file mode 100644 index 0000000..93e8556 --- /dev/null +++ b/src/statics/scss/datepicker.scss @@ -0,0 +1,40 @@ +@import "main.scss"; + +.react-datepicker__wrapper { + font-family: $font-family; +} +.react-datepicker__input-container { + font-family: $font-family; + & input { + color: var(--textColor); + font-size: 14px; + width: 6.5rem; + text-align: center; + border: 1px solid var(--borderColor); + border-radius: 5px; + height: 30px; + background-color: var(--bgColor); + } +} + +.react-datepicker { + font-family: $font-family; + .react-datepicker__header { + border: none; + background-color: var(--bgColor); + + .arrow { + cursor: pointer; + border: none; + background-color: var(--bgColor); + margin: 0px 10px 2px 10px; + } + } + + .date-customerheader { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 16px; + } +} diff --git a/src/statics/scss/datepickerStart.scss b/src/statics/scss/datepickerStart.scss new file mode 100644 index 0000000..d993230 --- /dev/null +++ b/src/statics/scss/datepickerStart.scss @@ -0,0 +1,16 @@ +@import "main.scss"; + +.datepicker-start { + color: var(--textColor-dark); + font-size: 14px; + width: 6.5rem; + text-align: center; + border: 1px solid var(--borderColor); + border-radius: 5px; + height: 30px; + background-color: var(--bgColor-light); + + display: flex; + align-items: center; + justify-content: center; +} diff --git a/src/statics/scss/studyRecruitCreate.scss b/src/statics/scss/studyRecruitCreate.scss index 47323b2..6bc21c3 100644 --- a/src/statics/scss/studyRecruitCreate.scss +++ b/src/statics/scss/studyRecruitCreate.scss @@ -3,9 +3,9 @@ .recruit-create { font-family: $font-family; padding-top: 80px; - padding-left: 25%; + padding-left: 28%; background-color: var(--htmlbgColor); - padding-right: 25%; + padding-right: 28%; .recruit-create-heading { font-size: 20px; @@ -36,8 +36,11 @@ &.a2 { width: 32rem; } + &.a3 { + padding-right: 10px; + } } - & input { + .recruit-input { background: var(--bgColor); border: 1px solid var(--borderColor); box-sizing: border-box; @@ -79,19 +82,20 @@ } } } - - & button { - cursor: pointer; - border: none; - border-radius: 7px; - color: #eeeeee; - background-color: $mainColor; - font-size: 16px; - line-height: 19px; - text-align: center; - width: 8rem; - height: 36px; - margin-top: 40px; - margin-bottom: 60px; + center { + & button { + cursor: pointer; + border: none; + border-radius: 7px; + color: #eeeeee; + background-color: $mainColor; + font-size: 16px; + line-height: 19px; + text-align: center; + width: 8rem; + height: 36px; + margin-top: 40px; + margin-bottom: 60px; + } } } diff --git a/yarn.lock b/yarn.lock index bafe31e..d7bea1d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1597,7 +1597,7 @@ schema-utils "^3.0.0" source-map "^0.7.3" -"@popperjs/core@^2.10.1": +"@popperjs/core@^2.10.1", "@popperjs/core@^2.9.2": version "2.11.2" resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.2.tgz#830beaec4b4091a9e9398ac50f865ddea52186b9" integrity sha512-92FRmppjjqz29VMJ2dn+xdyXZBrMlE42AV6Kq6BwjWV7CNUW1hs2FtxSNLQE+gJhaZ6AAmYuO9y8dshhcBl7vA== @@ -3251,7 +3251,7 @@ cjs-module-lexer@^1.0.0: resolved "https://registry.yarnpkg.com/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz#9f84ba3244a512f3a54e5277e8eef4c489864e40" integrity sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA== -classnames@^2.3.1: +classnames@^2.2.6, classnames@^2.3.1: version "2.3.1" resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e" integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA== @@ -3764,6 +3764,11 @@ data-urls@^2.0.0: whatwg-mimetype "^2.3.0" whatwg-url "^8.0.0" +date-fns@^2.24.0, date-fns@^2.28.0: + version "2.28.0" + resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.28.0.tgz#9570d656f5fc13143e50c975a3b6bbeb46cd08b2" + integrity sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw== + debug@2.6.9, debug@^2.6.0, debug@^2.6.9: version "2.6.9" resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f" @@ -7995,7 +8000,7 @@ prop-types-extra@^1.1.0: react-is "^16.3.2" warning "^4.0.0" -prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1: +prop-types@15, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1: version "15.8.1" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5" integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg== @@ -8123,6 +8128,28 @@ react-calendar-heatmap@^1.8.1: memoize-one "^5.0.0" prop-types "^15.6.2" +react-date-range@^1.4.0: + version "1.4.0" + resolved "https://registry.yarnpkg.com/react-date-range/-/react-date-range-1.4.0.tgz#d2073b85bdb4185e4dde288ce29198dd90074045" + integrity sha512-+9t0HyClbCqw1IhYbpWecjsiaftCeRN5cdhsi9v06YdimwyMR2yYHWcgVn3URwtN/txhqKpEZB6UX1fHpvK76w== + dependencies: + classnames "^2.2.6" + prop-types "^15.7.2" + react-list "^0.8.13" + shallow-equal "^1.2.1" + +react-datepicker@^4.6.0: + version "4.6.0" + resolved "https://registry.yarnpkg.com/react-datepicker/-/react-datepicker-4.6.0.tgz#10fc7c5b9c72df5c3e29712d559cb3fe73fd9f62" + integrity sha512-JGSQnQSQYUkS7zvSaZuyHv5lxp3wMrN7GXV0VA0E9Ax9fL3Bb6E1pSXjL6C3WoeuV8dt/mItQfRkPpRGCrl/OA== + dependencies: + "@popperjs/core" "^2.9.2" + classnames "^2.2.6" + date-fns "^2.24.0" + prop-types "^15.7.2" + react-onclickoutside "^6.12.0" + react-popper "^2.2.5" + react-dev-utils@^12.0.0: version "12.0.0" resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-12.0.0.tgz#4eab12cdb95692a077616770b5988f0adf806526" @@ -8167,6 +8194,11 @@ react-error-overlay@^6.0.10: resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.10.tgz#0fe26db4fa85d9dbb8624729580e90e7159a59a6" integrity sha512-mKR90fX7Pm5seCOfz8q9F+66VCc1PGsWSBxKbITjfKVQHMNF2zudxHnMdJiB1fRCb+XsbQV9sO9DCkgsMQgBIA== +react-fast-compare@^3.0.1: + version "3.2.0" + resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb" + integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA== + react-icons@^4.3.1: version "4.3.1" resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.3.1.tgz#2fa92aebbbc71f43d2db2ed1aed07361124e91ca" @@ -8187,6 +8219,26 @@ react-lifecycles-compat@^3.0.4: resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362" integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA== +react-list@^0.8.13: + version "0.8.16" + resolved "https://registry.yarnpkg.com/react-list/-/react-list-0.8.16.tgz#3f19b249998de0086787da3789d35b59553ede3a" + integrity sha512-LSxfvdwB9Ip+E+8NBtLPW2pcIngzuV0rSoH9nMt9C2lFjZEbnoBY/ib/Zx121jPgFgg3xYkMlMXSzx5gaiP5ig== + dependencies: + prop-types "15" + +react-onclickoutside@^6.12.0: + version "6.12.1" + resolved "https://registry.yarnpkg.com/react-onclickoutside/-/react-onclickoutside-6.12.1.tgz#92dddd28f55e483a1838c5c2930e051168c1e96b" + integrity sha512-a5Q7CkWznBRUWPmocCvE8b6lEYw1s6+opp/60dCunhO+G6E4tDTO2Sd2jKE+leEnnrLAE2Wj5DlDHNqj5wPv1Q== + +react-popper@^2.2.5: + version "2.2.5" + resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-2.2.5.tgz#1214ef3cec86330a171671a4fbcbeeb65ee58e96" + integrity sha512-kxGkS80eQGtLl18+uig1UIf9MKixFSyPxglsgLBxlYnyDf65BiY9B3nZSc6C9XUNDgStROB0fMQlTEz1KxGddw== + dependencies: + react-fast-compare "^3.0.1" + warning "^4.0.2" + react-refresh@^0.11.0: version "0.11.0" resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046" @@ -8791,6 +8843,11 @@ setprototypeof@1.2.0: resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.2.0.tgz#66c9a24a73f9fc28cbe66b09fed3d33dcaf1b424" integrity sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw== +shallow-equal@^1.2.1: + version "1.2.1" + resolved "https://registry.yarnpkg.com/shallow-equal/-/shallow-equal-1.2.1.tgz#4c16abfa56043aa20d050324efa68940b0da79da" + integrity sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA== + shallowequal@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8" @@ -9775,7 +9832,7 @@ walker@^1.0.7: dependencies: makeerror "1.0.12" -warning@^4.0.0, warning@^4.0.3: +warning@^4.0.0, warning@^4.0.2, warning@^4.0.3: version "4.0.3" resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3" integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w== From e9f85f8b33dab2eb0e3753a354bf037a3efa4a7c Mon Sep 17 00:00:00 2001 From: rosieyeon Date: Sat, 5 Feb 2022 14:33:59 +0900 Subject: [PATCH 06/62] [#55] feat: design datepicker calendar --- src/components/datepicker.js | 1 + src/statics/css/datepicker.css | 31 +++++++++++++++++++++++++- src/statics/css/datepicker.css.map | 2 +- src/statics/css/datepickerStart.css | 2 +- src/statics/css/heatmap.css | 2 +- src/statics/css/home.css | 2 +- src/statics/css/homeAchievement.css | 2 +- src/statics/css/homeStatistics.css | 2 +- src/statics/css/homeTodays.css | 2 +- src/statics/css/login.css | 2 +- src/statics/css/main.css | 2 +- src/statics/css/modal.css | 2 +- src/statics/css/navbar.css | 2 +- src/statics/css/navbarHome.css | 2 +- src/statics/css/navbarLanding.css | 2 +- src/statics/css/signup.css | 2 +- src/statics/css/studyRecruit.css | 2 +- src/statics/css/studyRecruitCreate.css | 2 +- src/statics/scss/datepicker.scss | 31 ++++++++++++++++++++++++++ src/statics/scss/main.scss | 2 +- 20 files changed, 79 insertions(+), 18 deletions(-) diff --git a/src/components/datepicker.js b/src/components/datepicker.js index db38c20..bad4acd 100644 --- a/src/components/datepicker.js +++ b/src/components/datepicker.js @@ -27,6 +27,7 @@ export default function StudyDatePicker() { "November", "December", ]; + return ( Date: Sat, 5 Feb 2022 14:35:43 +0900 Subject: [PATCH 07/62] [#55] feat: change icon color in dark mode --- src/components/datepicker.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/datepicker.js b/src/components/datepicker.js index bad4acd..a7b3d71 100644 --- a/src/components/datepicker.js +++ b/src/components/datepicker.js @@ -55,7 +55,7 @@ export default function StudyDatePicker() { >
@@ -73,7 +73,7 @@ export default function StudyDatePicker() { >
From 7e87170f9d097835988db5ff26f45c4baa8fa0fb Mon Sep 17 00:00:00 2001 From: rosieyeon Date: Sat, 5 Feb 2022 16:01:00 +0900 Subject: [PATCH 08/62] [#55] feat: change date format --- src/components/datepicker.js | 24 +++++++++++++++++------- src/components/datepickerStart.js | 2 +- src/statics/css/datepicker.css | 2 +- src/statics/css/datepickerStart.css | 4 ++-- src/statics/scss/datepicker.scss | 2 +- src/statics/scss/datepickerStart.scss | 4 ++-- 6 files changed, 24 insertions(+), 14 deletions(-) diff --git a/src/components/datepicker.js b/src/components/datepicker.js index a7b3d71..06d8fac 100644 --- a/src/components/datepicker.js +++ b/src/components/datepicker.js @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React, { forwardRef, useState } from "react"; import { addDays } from "date-fns"; import DatePicker, { registerLocale } from "react-datepicker"; @@ -8,11 +8,11 @@ import "../statics/css/datepicker.css"; import ko from "date-fns/locale/ko"; registerLocale("ko", ko); -// CSS Modules, react-datepicker-cssmodules.css -// import 'react-datepicker/dist/react-datepicker-cssmodules.css'; - export default function StudyDatePicker() { + // 기본 설정 날짜는 오늘날짜 +7일로 설정해둠 + // startDate의 값을 server로 보내줄 예정 const [startDate, setStartDate] = useState(addDays(new Date(), 7)); + const months = [ "January", "February", @@ -28,13 +28,23 @@ export default function StudyDatePicker() { "December", ]; + // 버튼 커스텀 + const CustomInput = forwardRef(({ value, onClick }, ref) => ( + + )); + return ( setStartDate(date)} - minDate={addDays(new Date(), 1)} + minDate={addDays(new Date(), 1)} // 오늘 이전의 날짜는 선택 불가능하도록 설정 + customInput={} + dateFormat="yyyy/MM/dd" + // 달력 윗부분 디자인 바꾸기 (버튼, 월 이름, 배경 색상 등) renderCustomHeader={({ date, decreaseMonth, diff --git a/src/components/datepickerStart.js b/src/components/datepickerStart.js index f4ff967..2534c5e 100644 --- a/src/components/datepickerStart.js +++ b/src/components/datepickerStart.js @@ -5,6 +5,6 @@ import "../statics/css/datepickerStart.css"; export default function StudyDatePickerStart() { const [date, setDate] = useState(new Date()); return ( -
{dataFns.format(date, "MM/dd/yyyy")}
+
{dataFns.format(date, "yyyy/MM/dd")}
); } diff --git a/src/statics/css/datepicker.css b/src/statics/css/datepicker.css index 1a2ddc4..cda7efc 100644 --- a/src/statics/css/datepicker.css +++ b/src/statics/css/datepicker.css @@ -48,7 +48,7 @@ .react-datepicker__input-container { font-family: "Pretendard"; } -.react-datepicker__input-container input { +.react-datepicker__input-container .custom-input { color: var(--textColor); font-size: 14px; width: 6.5rem; diff --git a/src/statics/css/datepickerStart.css b/src/statics/css/datepickerStart.css index 0e4b7bb..7803089 100644 --- a/src/statics/css/datepickerStart.css +++ b/src/statics/css/datepickerStart.css @@ -42,14 +42,14 @@ } .datepicker-start { - color: var(--textColor-dark); + color: var(--textColor-darker); font-size: 14px; width: 6.5rem; text-align: center; border: 1px solid var(--borderColor); border-radius: 5px; height: 30px; - background-color: var(--bgColor-light); + background-color: var(--bgColor); display: flex; align-items: center; justify-content: center; diff --git a/src/statics/scss/datepicker.scss b/src/statics/scss/datepicker.scss index b0a587b..6a9dbea 100644 --- a/src/statics/scss/datepicker.scss +++ b/src/statics/scss/datepicker.scss @@ -5,7 +5,7 @@ } .react-datepicker__input-container { font-family: $font-family; - & input { + .custom-input { color: var(--textColor); font-size: 14px; width: 6.5rem; diff --git a/src/statics/scss/datepickerStart.scss b/src/statics/scss/datepickerStart.scss index d993230..03a9ef0 100644 --- a/src/statics/scss/datepickerStart.scss +++ b/src/statics/scss/datepickerStart.scss @@ -1,14 +1,14 @@ @import "main.scss"; .datepicker-start { - color: var(--textColor-dark); + color: var(--textColor-darker); font-size: 14px; width: 6.5rem; text-align: center; border: 1px solid var(--borderColor); border-radius: 5px; height: 30px; - background-color: var(--bgColor-light); + background-color: var(--bgColor); display: flex; align-items: center; From 9514b55900ac5689844b97d93e1d5f9488b2c9b9 Mon Sep 17 00:00:00 2001 From: rosieyeon Date: Sat, 5 Feb 2022 16:13:27 +0900 Subject: [PATCH 09/62] [#55] feat: design datepicker table --- src/pages/studyRecruitCreate.js | 3 ++- src/statics/css/datepickerStart.css | 1 + src/statics/css/datepickerStart.css.map | 2 +- src/statics/css/studyRecruitCreate.css | 7 ++++++- src/statics/css/studyRecruitCreate.css.map | 2 +- src/statics/scss/datepickerStart.scss | 1 + src/statics/scss/studyRecruitCreate.scss | 7 ++++++- 7 files changed, 18 insertions(+), 5 deletions(-) diff --git a/src/pages/studyRecruitCreate.js b/src/pages/studyRecruitCreate.js index 15ea593..26f8e1f 100644 --- a/src/pages/studyRecruitCreate.js +++ b/src/pages/studyRecruitCreate.js @@ -53,10 +53,11 @@ export default function StudyRecruitCreate() { 모집 기간 + 시작일 - - + 종료일 diff --git a/src/statics/css/datepickerStart.css b/src/statics/css/datepickerStart.css index 7803089..4a31e7c 100644 --- a/src/statics/css/datepickerStart.css +++ b/src/statics/css/datepickerStart.css @@ -42,6 +42,7 @@ } .datepicker-start { + cursor: default; color: var(--textColor-darker); font-size: 14px; width: 6.5rem; diff --git a/src/statics/css/datepickerStart.css.map b/src/statics/css/datepickerStart.css.map index beb1c4a..6a153f5 100644 --- a/src/statics/css/datepickerStart.css.map +++ b/src/statics/css/datepickerStart.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/datepickerStart.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;;;AAQF;EACE;;;AC3DF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA","file":"datepickerStart.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/datepickerStart.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;;;AAQF;EACE;;;AC3DF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA","file":"datepickerStart.css"} \ No newline at end of file diff --git a/src/statics/css/studyRecruitCreate.css b/src/statics/css/studyRecruitCreate.css index 205a554..6db5208 100644 --- a/src/statics/css/studyRecruitCreate.css +++ b/src/statics/css/studyRecruitCreate.css @@ -77,7 +77,12 @@ width: 32rem; } .recruit-create .recruit-create-contents .recruit-create-content .recruit-create-content-row.a3 { - padding-right: 10px; + padding-right: 3rem; +} +.recruit-create .recruit-create-contents .recruit-create-content .recruit-create-content-row.date { + font-size: 12px; + padding-right: 0.4rem; + color: var(--textColor-dark); } .recruit-create .recruit-create-contents .recruit-create-content .recruit-input { background: var(--bgColor); diff --git a/src/statics/css/studyRecruitCreate.css.map b/src/statics/css/studyRecruitCreate.css.map index b6214e3..a8cd168 100644 --- a/src/statics/css/studyRecruitCreate.css.map +++ b/src/statics/css/studyRecruitCreate.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/studyRecruitCreate.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;;;AAQF;EACE;;;AC3DF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;;AAKF;EACE;;AAEA;EACE;;AAEF;EACE;;AACA;EACE;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAMN;EACE;EACA;EACA;EACA;EACA,kBDpFM;ECqFN;EACA;EACA;EACA;EACA;EACA;EACA","file":"studyRecruitCreate.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/studyRecruitCreate.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;;;AAQF;EACE;;;AC3DF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;;AAKF;EACE;;AAEA;EACE;;AAEF;EACE;;AACA;EACE;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;EACA;EACA;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAMN;EACE;EACA;EACA;EACA;EACA,kBDzFM;EC0FN;EACA;EACA;EACA;EACA;EACA;EACA","file":"studyRecruitCreate.css"} \ No newline at end of file diff --git a/src/statics/scss/datepickerStart.scss b/src/statics/scss/datepickerStart.scss index 03a9ef0..6c1a6c1 100644 --- a/src/statics/scss/datepickerStart.scss +++ b/src/statics/scss/datepickerStart.scss @@ -1,6 +1,7 @@ @import "main.scss"; .datepicker-start { + cursor: default; color: var(--textColor-darker); font-size: 14px; width: 6.5rem; diff --git a/src/statics/scss/studyRecruitCreate.scss b/src/statics/scss/studyRecruitCreate.scss index 6bc21c3..d423e9d 100644 --- a/src/statics/scss/studyRecruitCreate.scss +++ b/src/statics/scss/studyRecruitCreate.scss @@ -37,7 +37,12 @@ width: 32rem; } &.a3 { - padding-right: 10px; + padding-right: 3rem; + } + &.date { + font-size: 12px; + padding-right: 0.4rem; + color: var(--textColor-dark); } } .recruit-input { From d39cdba407fd4c0bbc9a44f9504dc984e0842f24 Mon Sep 17 00:00:00 2001 From: rosieyeon Date: Sat, 5 Feb 2022 19:28:02 +0900 Subject: [PATCH 10/62] [#55] feat: daypicker btn --- src/components/daypickerbtn.js | 7 ++ src/pages/studyRecruitCreate.js | 113 ++++++++++++++++++++- src/statics/css/studyRecruitCreate.css | 26 ++++- src/statics/css/studyRecruitCreate.css.map | 2 +- src/statics/scss/studyRecruitCreate.scss | 31 +++++- 5 files changed, 174 insertions(+), 5 deletions(-) create mode 100644 src/components/daypickerbtn.js diff --git a/src/components/daypickerbtn.js b/src/components/daypickerbtn.js new file mode 100644 index 0000000..d0969d6 --- /dev/null +++ b/src/components/daypickerbtn.js @@ -0,0 +1,7 @@ +export default function DayPickerButton() { + return ( +
+
+
+ ); +} diff --git a/src/pages/studyRecruitCreate.js b/src/pages/studyRecruitCreate.js index 26f8e1f..cdd2055 100644 --- a/src/pages/studyRecruitCreate.js +++ b/src/pages/studyRecruitCreate.js @@ -1,8 +1,38 @@ +import { useState } from "react"; import StudyDatePicker from "../components/datepicker"; import StudyDatePickerStart from "../components/datepickerStart"; import "../statics/css/studyRecruitCreate.css"; export default function StudyRecruitCreate() { + const [isMonday, setIsMonday] = useState(false); + const onClickIsMonday = () => { + setIsMonday(!isMonday); + }; + const [isTuesday, setIsTuesday] = useState(false); + const onClickIsTuesday = () => { + setIsTuesday(!isTuesday); + }; + const [isWednesday, setIsWednesday] = useState(false); + const onClickIsWednesday = () => { + setIsWednesday(!isWednesday); + }; + const [isThursday, setIsThursday] = useState(false); + const onClickIsThursday = () => { + setIsThursday(!isThursday); + }; + const [isFriday, setIsFriday] = useState(false); + const onClickIsFriday = () => { + setIsFriday(!isFriday); + }; + const [isSaturday, setIsSaturday] = useState(false); + const onClickIsSaturday = () => { + setIsSaturday(!isSaturday); + }; + const [isSunday, setIsSunday] = useState(false); + const onClickIsSunday = () => { + setIsSunday(!isSunday); + }; + return (
@@ -46,11 +76,92 @@ export default function StudyRecruitCreate() {
- +
+ + + + + + + + +
스터디 요일 + + + + + + + + + + + + + +
+ + diff --git a/src/statics/css/studyRecruitCreate.css b/src/statics/css/studyRecruitCreate.css index 6db5208..a44802c 100644 --- a/src/statics/css/studyRecruitCreate.css +++ b/src/statics/css/studyRecruitCreate.css @@ -64,8 +64,8 @@ .recruit-create .recruit-create-contents .recruit-create-content table { margin: 33px 5px 33px 5px; } -.recruit-create .recruit-create-contents .recruit-create-content .recruit-create-content-row { - margin-bottom: 15px; +.recruit-create .recruit-create-contents .recruit-create-content .recruit-create-content-row .test { + display: flex; } .recruit-create .recruit-create-contents .recruit-create-content .recruit-create-content-row.a1 { font-size: 14px; @@ -83,6 +83,28 @@ font-size: 12px; padding-right: 0.4rem; color: var(--textColor-dark); + width: 3rem; +} +.recruit-create .recruit-create-contents .recruit-create-content .recruit-create-content-row.day { + padding-right: 0.5rem; +} +.recruit-create .recruit-create-contents .recruit-create-content .recruit-create-content-row.day-name { + border: none; + font-size: 12px; + color: var(--textColor); + background-color: var(--bgColor-light); + border-radius: 100%; + width: 2.5rem; + height: 2.5rem; +} +.recruit-create .recruit-create-contents .recruit-create-content .recruit-create-content-row.selected { + border: none; + font-size: 12px; + color: #eeeeee; + background-color: #6667ab; + border-radius: 100%; + width: 2.5rem; + height: 2.5rem; } .recruit-create .recruit-create-contents .recruit-create-content .recruit-input { background: var(--bgColor); diff --git a/src/statics/css/studyRecruitCreate.css.map b/src/statics/css/studyRecruitCreate.css.map index a8cd168..2c709ed 100644 --- a/src/statics/css/studyRecruitCreate.css.map +++ b/src/statics/css/studyRecruitCreate.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/studyRecruitCreate.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;;;AAQF;EACE;;;AC3DF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;;AAKF;EACE;;AAEA;EACE;;AAEF;EACE;;AACA;EACE;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;EACA;EACA;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAMN;EACE;EACA;EACA;EACA;EACA,kBDzFM;EC0FN;EACA;EACA;EACA;EACA;EACA;EACA","file":"studyRecruitCreate.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/studyRecruitCreate.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;;;AAQF;EACE;;;AC3DF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;;AAKF;EACE;;AAEA;EACE;;AAOA;EACE;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA,kBDhEE;ECiEF;EACA;EACA;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAMN;EACE;EACA;EACA;EACA;EACA,kBDtHM;ECuHN;EACA;EACA;EACA;EACA;EACA;EACA","file":"studyRecruitCreate.css"} \ No newline at end of file diff --git a/src/statics/scss/studyRecruitCreate.scss b/src/statics/scss/studyRecruitCreate.scss index d423e9d..740abe6 100644 --- a/src/statics/scss/studyRecruitCreate.scss +++ b/src/statics/scss/studyRecruitCreate.scss @@ -24,9 +24,15 @@ & table { margin: 33px 5px 33px 5px; + // &.recruit-create-content__day { + // // margin: 33px 5px 10px 5px; + // } } .recruit-create-content-row { - margin-bottom: 15px; + // margin-bottom: 15px; + .test { + display: flex; + } &.a1 { font-size: 14px; line-height: 17px; @@ -43,6 +49,29 @@ font-size: 12px; padding-right: 0.4rem; color: var(--textColor-dark); + width: 3rem; + } + &.day { + padding-right: 0.5rem; + // width: 20rem; + } + &.day-name { + border: none; + font-size: 12px; + color: var(--textColor); + background-color: var(--bgColor-light); + border-radius: 100%; + width: 2.5rem; + height: 2.5rem; + } + &.selected { + border: none; + font-size: 12px; + color: #eeeeee; + background-color: $mainColor; + border-radius: 100%; + width: 2.5rem; + height: 2.5rem; } } .recruit-input { From 89dd3c425e6fc2557fede96fe6d1be22801f7f28 Mon Sep 17 00:00:00 2001 From: rosieyeon Date: Sat, 5 Feb 2022 22:05:09 +0900 Subject: [PATCH 11/62] [#58] wip: change day data to integer --- src/components/daypickerbtn.js | 36 ++++++++++++++++++++---- src/pages/studyRecruitCreate.js | 13 ++++++++- src/statics/css/studyRecruitCreate.css | 4 +-- src/statics/scss/studyRecruitCreate.scss | 4 +-- 4 files changed, 47 insertions(+), 10 deletions(-) diff --git a/src/components/daypickerbtn.js b/src/components/daypickerbtn.js index d0969d6..832300b 100644 --- a/src/components/daypickerbtn.js +++ b/src/components/daypickerbtn.js @@ -1,7 +1,33 @@ +// import { useState } from "react"; + +// studyRecruitCreate.js 코드 정리할 때 이용할 예정 export default function DayPickerButton() { - return ( -
-
-
- ); + // const [isMonday, setIsMonday] = useState(false); + // const onClickIsMonday = () => { + // setIsMonday(!isMonday); + // }; + // const [isTuesday, setIsTuesday] = useState(false); + // const onClickIsTuesday = () => { + // setIsTuesday(!isTuesday); + // }; + // const [isWednesday, setIsWednesday] = useState(false); + // const onClickIsWednesday = () => { + // setIsWednesday(!isWednesday); + // }; + // const [isThursday, setIsThursday] = useState(false); + // const onClickIsThursday = () => { + // setIsThursday(!isThursday); + // }; + // const [isFriday, setIsFriday] = useState(false); + // const onClickIsFriday = () => { + // setIsFriday(!isFriday); + // }; + // const [isSaturday, setIsSaturday] = useState(false); + // const onClickIsSaturday = () => { + // setIsSaturday(!isSaturday); + // }; + // const [isSunday, setIsSunday] = useState(false); + // const onClickIsSunday = () => { + // setIsSunday(!isSunday); + // }; } diff --git a/src/pages/studyRecruitCreate.js b/src/pages/studyRecruitCreate.js index cdd2055..6a039f4 100644 --- a/src/pages/studyRecruitCreate.js +++ b/src/pages/studyRecruitCreate.js @@ -4,9 +4,20 @@ import StudyDatePickerStart from "../components/datepickerStart"; import "../statics/css/studyRecruitCreate.css"; export default function StudyRecruitCreate() { + // [TODO]: studies api 완성되면 어떤 데이터를 post 해야하는지 보고 아래의 함수 완성하기 + // const [studyRecruit, setStudyRecruit] = useState({ + + // }) + const [days, setDays] = useState([]); const [isMonday, setIsMonday] = useState(false); - const onClickIsMonday = () => { + const onClickIsMonday = (event) => { + event.preventDefault(); setIsMonday(!isMonday); + console.log(isMonday); + if (!isMonday) { + setDays((days) => [...days, 0]); + console.log(days); + } }; const [isTuesday, setIsTuesday] = useState(false); const onClickIsTuesday = () => { diff --git a/src/statics/css/studyRecruitCreate.css b/src/statics/css/studyRecruitCreate.css index a44802c..0f83950 100644 --- a/src/statics/css/studyRecruitCreate.css +++ b/src/statics/css/studyRecruitCreate.css @@ -81,9 +81,9 @@ } .recruit-create .recruit-create-contents .recruit-create-content .recruit-create-content-row.date { font-size: 12px; - padding-right: 0.4rem; + padding-right: 0.2rem; color: var(--textColor-dark); - width: 3rem; + width: 2.5rem; } .recruit-create .recruit-create-contents .recruit-create-content .recruit-create-content-row.day { padding-right: 0.5rem; diff --git a/src/statics/scss/studyRecruitCreate.scss b/src/statics/scss/studyRecruitCreate.scss index 740abe6..14d21d2 100644 --- a/src/statics/scss/studyRecruitCreate.scss +++ b/src/statics/scss/studyRecruitCreate.scss @@ -47,9 +47,9 @@ } &.date { font-size: 12px; - padding-right: 0.4rem; + padding-right: 0.2rem; color: var(--textColor-dark); - width: 3rem; + width: 2.5rem; } &.day { padding-right: 0.5rem; From 235ebdeed9fbbd0f3789c9b72fc29fe76f78cd67 Mon Sep 17 00:00:00 2001 From: rosieyeon Date: Sun, 6 Feb 2022 20:33:43 +0900 Subject: [PATCH 12/62] [#55] wip: Create time picker --- src/components/emailConfirm.js | 25 ---------------- src/components/modal.js | 51 +++++++++++++++++++++++++++++++++ src/components/signup.js | 2 +- src/components/timepicker.js | 17 +++++++++++ src/pages/studyRecruitCreate.js | 13 +++++++++ src/statics/css/modal.css | 2 +- src/statics/scss/modal.scss | 2 +- 7 files changed, 84 insertions(+), 28 deletions(-) delete mode 100644 src/components/emailConfirm.js create mode 100644 src/components/modal.js create mode 100644 src/components/timepicker.js diff --git a/src/components/emailConfirm.js b/src/components/emailConfirm.js deleted file mode 100644 index fe438a2..0000000 --- a/src/components/emailConfirm.js +++ /dev/null @@ -1,25 +0,0 @@ -import React from "react"; -import "../statics/css/modal.css"; - -const Modal = (props) => { - const { open, close, header } = props; - return ( -
- {open ? ( -
-
- {header} - -
-
{props.children}
-
- ) : null} -
- ); -}; -export default Modal; diff --git a/src/components/modal.js b/src/components/modal.js new file mode 100644 index 0000000..8fcf7d2 --- /dev/null +++ b/src/components/modal.js @@ -0,0 +1,51 @@ +import React from "react"; +import "../statics/css/modal.css"; + +const Modal = (props) => { + const { open, close, header } = props; + return ( +
+ {open ? ( +
+
+ {header} + + + + + {/* */} +
+
{props.children}
+
+ ) : null} +
+ ); +}; +export default Modal; diff --git a/src/components/signup.js b/src/components/signup.js index 09605b8..447d9fc 100644 --- a/src/components/signup.js +++ b/src/components/signup.js @@ -1,7 +1,7 @@ import axios from "axios"; import React, { useState, useCallback } from "react"; import { Link } from "react-router-dom"; -import Modal from "./emailConfirm"; +import Modal from "./modal"; import "../statics/css/signup.css"; function SignUp() { diff --git a/src/components/timepicker.js b/src/components/timepicker.js new file mode 100644 index 0000000..4bdebd3 --- /dev/null +++ b/src/components/timepicker.js @@ -0,0 +1,17 @@ +import { useState } from "react"; +import Modal from "./modal"; + +export default function TimePicker() { + const [modalOpen, setModalOpen] = useState(false); + const openModal = () => { + setModalOpen(true); + }; + const closeModal = () => { + setModalOpen(false); + }; + return ( + +
시간 설정
+
+ ); +} diff --git a/src/pages/studyRecruitCreate.js b/src/pages/studyRecruitCreate.js index 6a039f4..acbed64 100644 --- a/src/pages/studyRecruitCreate.js +++ b/src/pages/studyRecruitCreate.js @@ -1,6 +1,8 @@ import { useState } from "react"; import StudyDatePicker from "../components/datepicker"; import StudyDatePickerStart from "../components/datepickerStart"; +import Modal from "../components/modal"; +import TimePicker from "../components/timepicker"; import "../statics/css/studyRecruitCreate.css"; export default function StudyRecruitCreate() { @@ -16,6 +18,7 @@ export default function StudyRecruitCreate() { console.log(isMonday); if (!isMonday) { setDays((days) => [...days, 0]); + openModal(); console.log(days); } }; @@ -44,6 +47,15 @@ export default function StudyRecruitCreate() { setIsSunday(!isSunday); }; + // 시간 설정 모달창 + const [modalOpen, setModalOpen] = useState(false); + const openModal = () => { + setModalOpen(true); + }; + const closeModal = () => { + setModalOpen(false); + }; + return (
@@ -101,6 +113,7 @@ export default function StudyRecruitCreate() { > Mon +
diff --git a/src/statics/css/timepicker.css b/src/statics/css/timepicker.css index 96419f9..14ac34b 100644 --- a/src/statics/css/timepicker.css +++ b/src/statics/css/timepicker.css @@ -95,9 +95,20 @@ padding-left: 3px; padding-right: 8px; } -.modal > section > main .main-footer { +.modal > section > main .main-footer-cancel { + border: 1.5px solid #6667ab; + border-radius: 5px; + width: 75px; + height: 24px; + font-size: 10px; + line-height: 12px; + color: var(--textColor); + background-color: var(--bgColor); + margin-right: 6px; +} +.modal > section > main .main-footer-submit { border: none; - width: 90px; + width: 75px; height: 24px; font-size: 10px; line-height: 12px; diff --git a/src/statics/css/timepicker.css.map b/src/statics/css/timepicker.css.map index 2520700..b8c1569 100644 --- a/src/statics/css/timepicker.css.map +++ b/src/statics/css/timepicker.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/timepicker.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;;;AAQF;EACE;;;AC3DF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AACA;EACE;;AAEF;EACE;EACA;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBDvDI;ECwDJ;;AAGJ;EACE;EACA;;;AAIN;EACE;EACA;EACA","file":"timepicker.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/timepicker.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;;;AAQF;EACE;;;AC3DF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AACA;EACE;;AAEF;EACE;EACA;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBDlEI;ECmEJ;;AAGJ;EACE;EACA;;;AAIN;EACE;EACA;EACA","file":"timepicker.css"} \ No newline at end of file diff --git a/src/statics/scss/timepicker.scss b/src/statics/scss/timepicker.scss index 80b02ac..a095d02 100644 --- a/src/statics/scss/timepicker.scss +++ b/src/statics/scss/timepicker.scss @@ -51,9 +51,20 @@ padding-right: 8px; } } - & .main-footer { + & .main-footer-cancel { + border: 1.5px solid $mainColor; + border-radius: 5px; + width: 75px; + height: 24px; + font-size: 10px; + line-height: 12px; + color: var(--textColor); + background-color: var(--bgColor); + margin-right: 6px; + } + & .main-footer-submit { border: none; - width: 90px; + width: 75px; height: 24px; font-size: 10px; line-height: 12px; From 60ff08a3306df5fca98d4c524f6dbbebb2703ae8 Mon Sep 17 00:00:00 2001 From: rosieyeon Date: Mon, 7 Feb 2022 20:37:03 +0900 Subject: [PATCH 17/62] [#59] feat: Add tooltip to check timepicker --- src/pages/studyRecruitCreate.js | 146 ++++++++++++++------- src/statics/css/studyRecruitCreate.css | 3 + src/statics/css/studyRecruitCreate.css.map | 2 +- src/statics/scss/studyRecruitCreate.scss | 4 + 4 files changed, 103 insertions(+), 52 deletions(-) diff --git a/src/pages/studyRecruitCreate.js b/src/pages/studyRecruitCreate.js index 32f355a..4959cd8 100644 --- a/src/pages/studyRecruitCreate.js +++ b/src/pages/studyRecruitCreate.js @@ -1,4 +1,5 @@ import { useState } from "react"; +import ReactTooltip from "react-tooltip"; import StudyDatePicker from "../components/datepicker"; import StudyDatePickerStart from "../components/datepickerStart"; import TimePicker from "../components/timepicker"; @@ -17,84 +18,36 @@ export default function StudyRecruitCreate() { if (isMonday) { console.log("hi"); } - // if (mondayEndTime && mondayStartTime) { - // setIsMonday(!isMonday); - // } - // const onClickIsMonday = (event) => { - // event.preventDefault(); - // setIsMonday(!isMonday); - // if (!isMonday) { - // setDays((days) => [...days, 0]); - // openModal(); - // if (mondayStartTime && mondayEndTime) { - // console.log("hi"); - // } - // } - // }; + const [tuesdayStartTime, setTuesdayStartTime] = useState(""); const [tuesdayEndTime, setTuesdayEndTime] = useState(""); const [isTuesday, setIsTuesday] = useState(false); console.log("tue", tuesdayStartTime, tuesdayEndTime, isTuesday); - // const onClickIsTuesday = () => { - // setIsTuesday(!isTuesday); - // if (!isTuesday) { - // setDays((days) => [...days, 0]); - // openModal(); - // } - // }; + const [wednesdayStartTime, setWednesdayStartTime] = useState(""); const [wednesdayEndTime, setWednesdayEndTime] = useState(""); const [isWednesday, setIsWednesday] = useState(false); console.log("wed", wednesdayStartTime, wednesdayEndTime, isWednesday); - // const [isWednesday, setIsWednesday] = useState(false); - // const onClickIsWednesday = () => { - // setIsWednesday(!isWednesday); - // }; const [thursdayStartTime, setThursdayStartTime] = useState(""); const [thursdayEndTime, setThursdayEndTime] = useState(""); const [isThursday, setIsThursday] = useState(false); console.log("thu", thursdayStartTime, thursdayEndTime, isThursday); - // const [isThursday, setIsThursday] = useState(false); - // const onClickIsThursday = () => { - // setIsThursday(!isThursday); - // }; const [fridayStartTime, setFridayStartTime] = useState(""); const [fridayEndTime, setFridayEndTime] = useState(""); const [isFriday, setIsFriday] = useState(false); console.log("fri", fridayStartTime, fridayEndTime, isFriday); - // const [isFriday, setIsFriday] = useState(false); - // const onClickIsFriday = () => { - // setIsFriday(!isFriday); - // }; const [saturdayStartTime, setSaturdayStartTime] = useState(""); const [saturdayEndTime, setSaturdayEndTime] = useState(""); const [isSaturday, setIsSaturday] = useState(false); console.log("sat", saturdayStartTime, saturdayEndTime, isSaturday); - // const [isSaturday, setIsSaturday] = useState(false); - // const onClickIsSaturday = () => { - // setIsSaturday(!isSaturday); - // }; const [sundayStartTime, setSundayStartTime] = useState(""); const [sundayEndTime, setSundayEndTime] = useState(""); const [isSunday, setIsSunday] = useState(false); console.log("sun", sundayStartTime, sundayEndTime, isSunday); - // const [isSunday, setIsSunday] = useState(false); - // const onClickIsSunday = () => { - // setIsSunday(!isSunday); - // }; - - // 시간 설정 모달창 - // const [modalOpen, setModalOpen] = useState(false); - // const openModal = () => { - // setModalOpen(true); - // }; - // const closeModal = () => { - // setModalOpen(false); - // }; const [modalOpenMon, setModalOpenMon] = useState(false); const [modalOpenTue, setModalOpenTue] = useState(false); @@ -197,13 +150,26 @@ export default function StudyRecruitCreate() { @@ -136,6 +200,9 @@ export default function StudyRecruitCreate() { { + setStudyShotrDesc(event.target.value); + })} /> @@ -391,7 +458,7 @@ export default function StudyRecruitCreate() { @@ -403,6 +470,7 @@ export default function StudyRecruitCreate() { From 193faba3b5104428a418fa9d1fea90129fc1cd14 Mon Sep 17 00:00:00 2001 From: rosieyeon Date: Tue, 8 Feb 2022 02:25:24 +0900 Subject: [PATCH 19/62] [#58] feat: Change date format to yyyy-mm-dd --- src/components/dateformat.js | 8 +++++--- src/components/datepicker.js | 20 +++++++++++++++++--- 2 files changed, 22 insertions(+), 6 deletions(-) diff --git a/src/components/dateformat.js b/src/components/dateformat.js index 6ae4a74..c7ba4b2 100644 --- a/src/components/dateformat.js +++ b/src/components/dateformat.js @@ -1,10 +1,12 @@ export default function ChangeDateFormat(props) { const endDate = props.endDate; - const monoth = "" + (endDate.getMonth() + 1); + console.log(props); + const month = "" + (endDate.getMonth() + 1); const date = "" + endDate.getDate(); const year = "" + endDate.getFullYear(); if (month.length < 2) month = "0" + month; - if (day.length < 2) day = "0" + day; - return [year, month, day].join("-"); + if (date.length < 2) date = "0" + date; + const result = [year, month, date].join("-"); + props.dateformat(result); } diff --git a/src/components/datepicker.js b/src/components/datepicker.js index f7827e4..2d137e1 100644 --- a/src/components/datepicker.js +++ b/src/components/datepicker.js @@ -1,4 +1,4 @@ -import React, { forwardRef, useState } from "react"; +import React, { forwardRef, useEffect, useState } from "react"; import { addDays } from "date-fns"; import DatePicker, { registerLocale } from "react-datepicker"; @@ -7,13 +7,27 @@ import "../statics/css/datepicker.css"; import ko from "date-fns/locale/ko"; import { propTypes } from "react-bootstrap/esm/Image"; +import ChangeDateFormat from "./dateformat"; registerLocale("ko", ko); export default function StudyDatePicker(props) { // 기본 설정 날짜는 오늘날짜 +7일로 설정해둠 - // startDate의 값을 server로 보내줄 예정 const [startDate, setStartDate] = useState(addDays(new Date(), 7)); - props.endDate(startDate); + + //yyyy-mm-dd 포맷 날짜 생성 + function changeDateFormat() { + const d = startDate; + return ( + d.getFullYear() + + "-" + + (d.getMonth() + 1 > 9 + ? (d.getMonth() + 1).toString() + : "0" + (d.getMonth() + 1)) + + "-" + + (d.getDate() > 9 ? d.getDate().toString() : "0" + d.getDate().toString()) + ); + } + props.endDate(changeDateFormat()); const months = [ "January", From f76ef1a98cdfe2a177868840e5e7773a2b8a5d63 Mon Sep 17 00:00:00 2001 From: rosieyeon Date: Tue, 8 Feb 2022 02:39:28 +0900 Subject: [PATCH 20/62] [#58] wip: axios post to /studies -> 403error --- src/pages/studyRecruitCreate.js | 46 +++++++++++++++++++++------------ 1 file changed, 30 insertions(+), 16 deletions(-) diff --git a/src/pages/studyRecruitCreate.js b/src/pages/studyRecruitCreate.js index f868151..e416885 100644 --- a/src/pages/studyRecruitCreate.js +++ b/src/pages/studyRecruitCreate.js @@ -105,11 +105,12 @@ export default function StudyRecruitCreate() { // [TODO]: studies api 완성되면 어떤 데이터를 post 해야하는지 보고 아래의 함수 완성하기 + const [userSeq, setUserSeq] = useState(""); const [studyTitle, setStudyTitle] = useState(""); const [studyShortDesc, setStudyShotrDesc] = useState(""); const [studyDesc, setStudyDesc] = useState(""); const [studyRecruitEnd, setStudyRecruitEnd] = useState(""); - console.log(studyTitle, studyShortDesc, studyDesc, studyRecruitEnd); + console.log(userSeq, studyTitle, studyShortDesc, studyDesc, studyRecruitEnd); // [TODO]: 스터디 상세정보 글자수 실시간으로 보여주기 (1000자 제한) const onChangeStudyDesc = useCallback((event) => { @@ -126,7 +127,6 @@ export default function StudyRecruitCreate() { } }, [mondayEndTime, mondayStartTime]); - const [userSeq, setUserSeq] = useState(""); const [studyRecruit, setStudyRecruit] = useState({ hostSea: 0, categorySeq: 0, @@ -145,22 +145,36 @@ export default function StudyRecruitCreate() { }, }) .then((res) => { - setUserSeq(res.data.user.userNickname); + setUserSeq(res.data.user.userSeq); }); - // axios.post("/studies", { - // hostSea: userSeq, - // categorySeq: 0, - // studyTitle: studyTitle, - // studyShortDesc: studyShortDesc, - // sturyDesc: studyDesc, - // studyRecruitEnd: "", - // day: [{ dayNumber: 0, timeStart: "", timeEnd: "" }], - // headers: { - // Authorization: `Bearer ${TOKEN}`, - // }, - // }); } + const onSubmitStudy = useCallback(() => { + const TOKEN = localStorage.getItem("accessToken"); + axios + .post("/studies", { + hostSea: userSeq, + categorySeq: 0, + studyTitle: studyTitle, + studyShortDesc: studyShortDesc, + sturyDesc: studyDesc, + studyRecruitEnd: studyRecruitEnd, + day: [ + { + dayNumber: 1, + timeStart: mondayStartTime, + timeEnd: mondayStartTime, + }, + ], + headers: { + Authorization: `Bearer ${TOKEN}`, + }, + }) + .then((res) => { + console.log(res); + }); + }); + return (
@@ -476,7 +490,7 @@ export default function StudyRecruitCreate() {
- +
); From d608298856ab616aa9e5d812e5997352698645f1 Mon Sep 17 00:00:00 2001 From: rosieyeon Date: Tue, 8 Feb 2022 12:21:38 +0900 Subject: [PATCH 21/62] [#58] feat: axios post to /studies --- src/pages/studyRecruitCreate.js | 206 ++++++++++++++++++++++++-------- 1 file changed, 157 insertions(+), 49 deletions(-) diff --git a/src/pages/studyRecruitCreate.js b/src/pages/studyRecruitCreate.js index e416885..90eb60e 100644 --- a/src/pages/studyRecruitCreate.js +++ b/src/pages/studyRecruitCreate.js @@ -6,51 +6,156 @@ import TimePicker from "../components/timepicker"; import isLogin from "../utils/isLogin"; import "../statics/css/studyRecruitCreate.css"; import axios from "axios"; -import { useIsRTL } from "react-bootstrap/esm/ThemeProvider"; export default function StudyRecruitCreate() { - const [days, setDays] = useState({ + const [mondayStartTime, setMondayStartTime] = useState(""); + const [mondayEndTime, setMondayEndTime] = useState(""); + const [isMonday, setIsMonday] = useState(false); + const [monday, setMonday] = useState({ dayNumber: 0, timeStart: "", timeEnd: "", }); - const [mondayStartTime, setMondayStartTime] = useState(""); - const [mondayEndTime, setMondayEndTime] = useState(""); - const [isMonday, setIsMonday] = useState(false); + useMemo(() => { + if (isMonday) { + setMonday((prevState) => ({ + ...prevState, + dayNumber: 1, + timeStart: mondayStartTime, + timeEnd: mondayEndTime, + })); + } + }, [mondayEndTime, mondayStartTime]); // console.log(days); - console.log("mon", mondayStartTime, mondayEndTime, isMonday); + console.log("mon", mondayStartTime, mondayEndTime, isMonday, monday); const [tuesdayStartTime, setTuesdayStartTime] = useState(""); const [tuesdayEndTime, setTuesdayEndTime] = useState(""); const [isTuesday, setIsTuesday] = useState(false); - console.log("tue", tuesdayStartTime, tuesdayEndTime, isTuesday); + const [tuesday, setTuesday] = useState({ + dayNumber: 0, + timeStart: "", + timeEnd: "", + }); + useMemo(() => { + if (isTuesday) { + setTuesday((prevState) => ({ + ...prevState, + dayNumber: 2, + timeStart: tuesdayStartTime, + timeEnd: tuesdayEndTime, + })); + } + }, [tuesdayEndTime, tuesdayStartTime]); + console.log("tue", tuesdayStartTime, tuesdayEndTime, isTuesday, tuesday); const [wednesdayStartTime, setWednesdayStartTime] = useState(""); const [wednesdayEndTime, setWednesdayEndTime] = useState(""); const [isWednesday, setIsWednesday] = useState(false); - console.log("wed", wednesdayStartTime, wednesdayEndTime, isWednesday); + const [wednesday, setWednesday] = useState({ + dayNumber: 0, + timeStart: "", + timeEnd: "", + }); + useMemo(() => { + if (isWednesday) { + setWednesday((prevState) => ({ + ...prevState, + dayNumber: 3, + timeStart: wednesdayStartTime, + timeEnd: wednesdayEndTime, + })); + } + }, [wednesdayEndTime, wednesdayStartTime]); + console.log( + "wed", + wednesdayStartTime, + wednesdayEndTime, + isWednesday, + wednesday + ); const [thursdayStartTime, setThursdayStartTime] = useState(""); const [thursdayEndTime, setThursdayEndTime] = useState(""); const [isThursday, setIsThursday] = useState(false); - console.log("thu", thursdayStartTime, thursdayEndTime, isThursday); + const [thursday, setThursday] = useState({ + dayNumber: 0, + timeStart: "", + timeEnd: "", + }); + useMemo(() => { + if (isThursday) { + setThursday((prevState) => ({ + ...prevState, + dayNumber: 4, + timeStart: thursdayStartTime, + timeEnd: thursdayEndTime, + })); + } + }, [thursdayEndTime, thursdayStartTime]); + console.log("thu", thursdayStartTime, thursdayEndTime, isThursday, thursday); const [fridayStartTime, setFridayStartTime] = useState(""); const [fridayEndTime, setFridayEndTime] = useState(""); const [isFriday, setIsFriday] = useState(false); - console.log("fri", fridayStartTime, fridayEndTime, isFriday); + const [friday, setFriday] = useState({ + dayNumber: 0, + timeStart: "", + timeEnd: "", + }); + useMemo(() => { + if (isFriday) { + setFriday((prevState) => ({ + ...prevState, + dayNumber: 5, + timeStart: fridayStartTime, + timeEnd: fridayEndTime, + })); + } + }, [fridayEndTime, fridayStartTime]); + console.log("fri", fridayStartTime, fridayEndTime, isFriday, friday); const [saturdayStartTime, setSaturdayStartTime] = useState(""); const [saturdayEndTime, setSaturdayEndTime] = useState(""); const [isSaturday, setIsSaturday] = useState(false); - console.log("sat", saturdayStartTime, saturdayEndTime, isSaturday); + const [saturday, setSaturday] = useState({ + dayNumber: 0, + timeStart: "", + timeEnd: "", + }); + useMemo(() => { + if (isSaturday) { + setSaturday((prevState) => ({ + ...prevState, + dayNumber: 6, + timeStart: saturdayStartTime, + timeEnd: saturdayEndTime, + })); + } + }, [saturdayEndTime, saturdayStartTime]); + console.log("sat", saturdayStartTime, saturdayEndTime, isSaturday, saturday); const [sundayStartTime, setSundayStartTime] = useState(""); const [sundayEndTime, setSundayEndTime] = useState(""); const [isSunday, setIsSunday] = useState(false); - console.log("sun", sundayStartTime, sundayEndTime, isSunday); + const [sunday, setSunday] = useState({ + dayNumber: 7, + timeStart: "", + timeEnd: "", + }); + useMemo(() => { + if (isSunday) { + setSunday((prevState) => ({ + ...prevState, + dayNumber: 7, + timeStart: sundayStartTime, + timeEnd: sundayEndTime, + })); + } + }, [sundayEndTime, sundayStartTime]); + console.log("sun", sundayStartTime, sundayEndTime, isSunday, sunday); const [modalOpenMon, setModalOpenMon] = useState(false); const [modalOpenTue, setModalOpenTue] = useState(false); @@ -116,26 +221,9 @@ export default function StudyRecruitCreate() { const onChangeStudyDesc = useCallback((event) => { setStudyDesc(event.target.value); }); - useMemo(() => { - if (isMonday) { - setDays((prevState) => ({ - ...prevState, - dayNumber: 1, - timeStart: mondayStartTime, - timeEnd: mondayEndTime, - })); - } - }, [mondayEndTime, mondayStartTime]); - const [studyRecruit, setStudyRecruit] = useState({ - hostSea: 0, - categorySeq: 0, - studyTitle: "", - studyShortDesc: "", - sturyDesc: "", - studyRecruitEnd: "", - day: [{ dayNumber: 0, timeStart: "", timeEnd: "" }], - }); + const [days, setDays] = useState([]); + if (isLogin()) { const TOKEN = localStorage.getItem("accessToken"); axios @@ -151,30 +239,50 @@ export default function StudyRecruitCreate() { const onSubmitStudy = useCallback(() => { const TOKEN = localStorage.getItem("accessToken"); + if (isMonday) { + setDays((days) => [...days, monday]); + } + if (isTuesday) { + setDays((days) => [...days, tuesday]); + } + if (isWednesday) { + setDays((days) => [...days, wednesday]); + } + if (isThursday) { + setDays((days) => [...days, thursday]); + } + if (isFriday) { + setDays((days) => [...days, friday]); + } + if (isSaturday) { + setDays((days) => [...days, saturday]); + } + if (isSunday) { + setDays((days) => [...days, sunday]); + } axios - .post("/studies", { - hostSea: userSeq, - categorySeq: 0, - studyTitle: studyTitle, - studyShortDesc: studyShortDesc, - sturyDesc: studyDesc, - studyRecruitEnd: studyRecruitEnd, - day: [ - { - dayNumber: 1, - timeStart: mondayStartTime, - timeEnd: mondayStartTime, - }, - ], - headers: { - Authorization: `Bearer ${TOKEN}`, + .post( + "/studies", + { + hostSea: userSeq, + categorySeq: 1, + studyTitle: studyTitle, + studyShortDesc: studyShortDesc, + sturyDesc: studyDesc, + studyRecruitEnd: studyRecruitEnd, + day: days, }, - }) + { + headers: { + Authorization: `Bearer ${TOKEN}`, + }, + } + ) .then((res) => { console.log(res); }); }); - + console.log(days); return (
From 7cecca720b1709935c8b977b100d8d795f55bbdc Mon Sep 17 00:00:00 2001 From: rosieyeon Date: Tue, 8 Feb 2022 14:06:35 +0900 Subject: [PATCH 22/62] [#58] feat: Create category select box --- src/components/categorySelect.js | 45 ++++++++++++++++++++- src/pages/studyRecruitCreate.js | 11 +++-- src/statics/css/categorySelect.css | 56 ++++++++++++++++++++++++++ src/statics/css/categorySelect.css.map | 1 + src/statics/scss/categorySelect.scss | 13 ++++++ 5 files changed, 118 insertions(+), 8 deletions(-) create mode 100644 src/statics/css/categorySelect.css create mode 100644 src/statics/css/categorySelect.css.map create mode 100644 src/statics/scss/categorySelect.scss diff --git a/src/components/categorySelect.js b/src/components/categorySelect.js index 4a2030f..f0b7f22 100644 --- a/src/components/categorySelect.js +++ b/src/components/categorySelect.js @@ -1,3 +1,44 @@ -export default function categorySelect() { - return
category
; +import axios from "axios"; +import { useMemo, useState } from "react"; +import isLogin from "../utils/isLogin"; +import "../statics/css/categorySelect.css"; + +export default function CategorySelect() { + const TOKEN = localStorage.getItem("accessToken"); + const [options, setOptions] = useState([]); + + useMemo(() => { + if (isLogin()) { + axios + .get("/categories/favorite", { + headers: { + Authorization: `Bearer ${TOKEN}`, + }, + }) + .then((res) => { + console.log(res.data.list); + const categories = res.data.list; + setOptions((prevState) => ({ + ...prevState, + categories, + })); + }); + } + }, []); + console.log(options); + const SelectBox = (props) => { + console.log(props); + return ( + + ); + }; + + return ; } diff --git a/src/pages/studyRecruitCreate.js b/src/pages/studyRecruitCreate.js index 90eb60e..e692e5c 100644 --- a/src/pages/studyRecruitCreate.js +++ b/src/pages/studyRecruitCreate.js @@ -6,6 +6,8 @@ import TimePicker from "../components/timepicker"; import isLogin from "../utils/isLogin"; import "../statics/css/studyRecruitCreate.css"; import axios from "axios"; +import { useNavigate } from "react-router-dom"; +import CategorySelect from "../components/categorySelect"; export default function StudyRecruitCreate() { const [mondayStartTime, setMondayStartTime] = useState(""); @@ -26,9 +28,6 @@ export default function StudyRecruitCreate() { })); } }, [mondayEndTime, mondayStartTime]); - - // console.log(days); - console.log("mon", mondayStartTime, mondayEndTime, isMonday, monday); const [tuesdayStartTime, setTuesdayStartTime] = useState(""); @@ -208,8 +207,6 @@ export default function StudyRecruitCreate() { setModalOpenSun(false); }; - // [TODO]: studies api 완성되면 어떤 데이터를 post 해야하는지 보고 아래의 함수 완성하기 - const [userSeq, setUserSeq] = useState(""); const [studyTitle, setStudyTitle] = useState(""); const [studyShortDesc, setStudyShotrDesc] = useState(""); @@ -223,6 +220,7 @@ export default function StudyRecruitCreate() { }); const [days, setDays] = useState([]); + const navigate = useNavigate(); if (isLogin()) { const TOKEN = localStorage.getItem("accessToken"); @@ -280,6 +278,7 @@ export default function StudyRecruitCreate() { ) .then((res) => { console.log(res); + navigate("/studyrecruit"); }); }); console.log(days); @@ -295,7 +294,7 @@ export default function StudyRecruitCreate() {
diff --git a/src/statics/css/categorySelect.css b/src/statics/css/categorySelect.css new file mode 100644 index 0000000..9137034 --- /dev/null +++ b/src/statics/css/categorySelect.css @@ -0,0 +1,56 @@ +@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css"); +:root { + --htmlbgColor: #ffffff; + --bgColor: #fcfcfc; + --bgColor-light: #eaeaea; + --borderColor: #ededed; + --borderColor2: #d6d6d6; + --borderColor3: #e1e1e1; + --textWhite: #eeeeee; + --textColor: #252525; + --textColor-dark: #8a8a8a; + --textColor-darker: #a1a1a1; + --textColor-darkest: #c2c2c2; + --github-01: #e8eaee; + --github-02: #d5d6f5; + --github-03: #9fa2e3; + --board-textColor: #646464; +} + +.ui-dark { + background-color: var(--htmlbgColor); + --htmlbgColor: #292929; + --bgColor: #373737; + --bgColor-light: #4a4a4a; + --bgColor-lighter: #565656; + --bgColor-dark: #1b1b1b; + --borderColor: #444444; + --borderColor2: #444444; + --borderColor3: #444444; + --textColor: #ededed; + --textColor-dark: #8a8a8a; + --textColor-darker: #6f6f6f; + --textColor-darkest: #838383; + --github-01: rgba(102, 103, 171, 0.2); + --github-02: rgba(102, 103, 171, 0.4); + --github-03: rgba(102, 103, 171, 0.7); + --board-textColor: #ededed; +} + +.hidden { + display: none; +} + +.category-select { + font-family: "Pretendard"; + font-size: 13px; + border: 1px solid var(--borderColor); + background-color: var(--bgColor); + width: 12rem; + height: 30px; + border-radius: 5px; + padding-left: 5px; + color: var(--textColor-dark); +} + +/*# sourceMappingURL=categorySelect.css.map */ diff --git a/src/statics/css/categorySelect.css.map b/src/statics/css/categorySelect.css.map new file mode 100644 index 0000000..57085b0 --- /dev/null +++ b/src/statics/css/categorySelect.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/categorySelect.scss"],"names":[],"mappings":"AAAQ;AAUR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;;;AAQF;EACE;;;AC3DF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"categorySelect.css"} \ No newline at end of file diff --git a/src/statics/scss/categorySelect.scss b/src/statics/scss/categorySelect.scss new file mode 100644 index 0000000..c867b29 --- /dev/null +++ b/src/statics/scss/categorySelect.scss @@ -0,0 +1,13 @@ +@import "main.scss"; + +.category-select { + font-family: $font-family; + font-size: 13px; + border: 1px solid var(--borderColor); + background-color: var(--bgColor); + width: 12rem; + height: 30px; + border-radius: 5px; + padding-left: 5px; + color: var(--textColor-dark); +} From ba4b58e8d67d35979b4905eccaeed5b447aa3b2b Mon Sep 17 00:00:00 2001 From: rosieyeon Date: Tue, 8 Feb 2022 15:28:43 +0900 Subject: [PATCH 23/62] [#58] feat: Add textarea type --- src/pages/studyRecruitCreate.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/studyRecruitCreate.js b/src/pages/studyRecruitCreate.js index e692e5c..5466843 100644 --- a/src/pages/studyRecruitCreate.js +++ b/src/pages/studyRecruitCreate.js @@ -589,6 +589,7 @@ export default function StudyRecruitCreate() {
스터디 소개
모집 기간 시작일 + + + ) : null} + ); -} +}; +export default TimePicker; diff --git a/src/pages/studyRecruitCreate.js b/src/pages/studyRecruitCreate.js index acbed64..d30e08f 100644 --- a/src/pages/studyRecruitCreate.js +++ b/src/pages/studyRecruitCreate.js @@ -113,7 +113,14 @@ export default function StudyRecruitCreate() { > Mon - + {/* +
시간 설정
+
*/} +
- {/* -
시간 설정
-
*/}
From 51834e410d53d3d3eeb8ea0d16b6a2bb4dbb245e Mon Sep 17 00:00:00 2001 From: rosieyeon Date: Mon, 7 Feb 2022 15:34:09 +0900 Subject: [PATCH 15/62] [#59] wip: check time data in parent component --- src/components/timepicker.js | 69 +++++++++++++++++++++------------ src/pages/studyRecruitCreate.js | 8 ++-- 2 files changed, 50 insertions(+), 27 deletions(-) diff --git a/src/components/timepicker.js b/src/components/timepicker.js index 7bee905..2645490 100644 --- a/src/components/timepicker.js +++ b/src/components/timepicker.js @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React, { useCallback, useState } from "react"; import "../statics/css/timepicker.css"; const TimePicker = (props) => { @@ -55,13 +55,11 @@ const TimePicker = (props) => { setFinMinute(e.target.value); }; console.log(startTime, startMinute, finTime, finMinute); + const startTimeData = startTime + ":" + startMinute + ":00"; + const finishTimeData = finTime + ":" + finMinute + ":00"; // 시간, 분 선택 옵션 const SelectBox = (props) => { - console.log(typeof Number(startTime)); - console.log(Number(startTime)); - const tmpStartTime = Number(startTime); - // console.log(props); return ( ); }; - const SelectBoxFinTime = (props) => { - // console.log(typeof Number(startTime)); - // console.log(Number(startTime)); - const tmpStartTime = Number(startTime); - console.log(tmpStartTime); - // console.log(props); - return ( - - ); - }; + + // [TODO]: 시작시간 선택하면 그 이전 시간은 종료시간으로 선택하지 못하는 기능 구현중... + // const [isAble, setIsAble] = useState(false); + // const SelectBoxFinTime = (props) => { + // // console.log(typeof Number(startTime)); + // // console.log(Number(startTime)); + // const tmpStartTime = Number(startTime); + // const compare = (val) => { + // if (tmpStartTime < val) { + // setIsAble(true); + // } else { + // setIsAble(false); + // } + // }; + // console.log(tmpStartTime); + // // console.log(props); + // return ( + // + // ); + // }; + + const onSubmit = useCallback((event) => { + props.setStartTimeData(startTimeData); + props.setEndTimeData(finishTimeData); + close(); + }); const { open, close, header } = props; return ( @@ -157,7 +178,7 @@ const TimePicker = (props) => { > - diff --git a/src/pages/studyRecruitCreate.js b/src/pages/studyRecruitCreate.js index f4b8d0c..9d4823c 100644 --- a/src/pages/studyRecruitCreate.js +++ b/src/pages/studyRecruitCreate.js @@ -10,12 +10,13 @@ export default function StudyRecruitCreate() { // }) const [days, setDays] = useState([]); - const [mondayTimeData, setMondayTimeData] = useState(0); + const [mondayStartTime, setMondayStartTime] = useState(""); + const [mondayEndTime, setMondayEndTime] = useState(""); + console.log(mondayEndTime, mondayStartTime); const [isMonday, setIsMonday] = useState(false); const onClickIsMonday = (event) => { event.preventDefault(); setIsMonday(!isMonday); - if (!isMonday) { setDays((days) => [...days, 0]); openModal(); @@ -119,7 +120,8 @@ export default function StudyRecruitCreate() { From 81e87d35d42fabdb0fca6e93f43150b13a400f08 Mon Sep 17 00:00:00 2001 From: rosieyeon Date: Mon, 7 Feb 2022 18:05:56 +0900 Subject: [PATCH 16/62] [#59] feat: timepicker apply to 7days --- src/components/timepicker.js | 33 +++- src/pages/studyRecruitCreate.js | 236 +++++++++++++++++++++++------ src/statics/css/timepicker.css | 15 +- src/statics/css/timepicker.css.map | 2 +- src/statics/scss/timepicker.scss | 15 +- 5 files changed, 242 insertions(+), 59 deletions(-) diff --git a/src/components/timepicker.js b/src/components/timepicker.js index 2645490..9ba0deb 100644 --- a/src/components/timepicker.js +++ b/src/components/timepicker.js @@ -1,7 +1,8 @@ -import React, { useCallback, useState } from "react"; +import React, { useState } from "react"; import "../statics/css/timepicker.css"; const TimePicker = (props) => { + // console.log("mondaytimepicker", props.setIsDay); const HOURS = [ { value: "00", name: "00" }, { value: "01", name: "01" }, @@ -37,8 +38,8 @@ const TimePicker = (props) => { { value: "40", name: "40" }, { value: "50", name: "50" }, ]; - const [startTime, setStartTime] = useState("12"); + // console.log(startTime); const [startMinute, setStartMinute] = useState("00"); const [finTime, setFinTime] = useState("12"); const [finMinute, setFinMinute] = useState("00"); @@ -54,7 +55,7 @@ const TimePicker = (props) => { const onChangeFinMin = (e) => { setFinMinute(e.target.value); }; - console.log(startTime, startMinute, finTime, finMinute); + // console.log(startTime, startMinute, finTime, finMinute); const startTimeData = startTime + ":" + startMinute + ":00"; const finishTimeData = finTime + ":" + finMinute + ":00"; @@ -106,11 +107,22 @@ const TimePicker = (props) => { // ); // }; - const onSubmit = useCallback((event) => { + const onSubmit = () => { props.setStartTimeData(startTimeData); props.setEndTimeData(finishTimeData); + props.setIsDay(true); + close(); + }; + const onCancel = () => { + props.setStartTimeData(""); + props.setEndTimeData(""); + setStartTime("12"); + setStartMinute("00"); + setFinTime("12"); + setFinMinute("00"); + props.setIsDay(false); close(); - }); + }; const { open, close, header } = props; return ( @@ -178,9 +190,14 @@ const TimePicker = (props) => { > - +
+ + +
) : null} diff --git a/src/pages/studyRecruitCreate.js b/src/pages/studyRecruitCreate.js index 9d4823c..32f355a 100644 --- a/src/pages/studyRecruitCreate.js +++ b/src/pages/studyRecruitCreate.js @@ -9,55 +9,142 @@ export default function StudyRecruitCreate() { // const [studyRecruit, setStudyRecruit] = useState({ // }) - const [days, setDays] = useState([]); + // const [days, setDays] = useState([]); const [mondayStartTime, setMondayStartTime] = useState(""); const [mondayEndTime, setMondayEndTime] = useState(""); - console.log(mondayEndTime, mondayStartTime); const [isMonday, setIsMonday] = useState(false); - const onClickIsMonday = (event) => { - event.preventDefault(); - setIsMonday(!isMonday); - if (!isMonday) { - setDays((days) => [...days, 0]); - openModal(); - } - }; + console.log("mon", mondayStartTime, mondayEndTime, isMonday); + if (isMonday) { + console.log("hi"); + } + // if (mondayEndTime && mondayStartTime) { + // setIsMonday(!isMonday); + // } + // const onClickIsMonday = (event) => { + // event.preventDefault(); + // setIsMonday(!isMonday); + // if (!isMonday) { + // setDays((days) => [...days, 0]); + // openModal(); + // if (mondayStartTime && mondayEndTime) { + // console.log("hi"); + // } + // } + // }; + const [tuesdayStartTime, setTuesdayStartTime] = useState(""); + const [tuesdayEndTime, setTuesdayEndTime] = useState(""); const [isTuesday, setIsTuesday] = useState(false); - const onClickIsTuesday = () => { - setIsTuesday(!isTuesday); - if (!isTuesday) { - setDays((days) => [...days, 0]); - openModal(); - } - }; + console.log("tue", tuesdayStartTime, tuesdayEndTime, isTuesday); + // const onClickIsTuesday = () => { + // setIsTuesday(!isTuesday); + // if (!isTuesday) { + // setDays((days) => [...days, 0]); + // openModal(); + // } + // }; + const [wednesdayStartTime, setWednesdayStartTime] = useState(""); + const [wednesdayEndTime, setWednesdayEndTime] = useState(""); const [isWednesday, setIsWednesday] = useState(false); - const onClickIsWednesday = () => { - setIsWednesday(!isWednesday); - }; + console.log("wed", wednesdayStartTime, wednesdayEndTime, isWednesday); + // const [isWednesday, setIsWednesday] = useState(false); + // const onClickIsWednesday = () => { + // setIsWednesday(!isWednesday); + // }; + + const [thursdayStartTime, setThursdayStartTime] = useState(""); + const [thursdayEndTime, setThursdayEndTime] = useState(""); const [isThursday, setIsThursday] = useState(false); - const onClickIsThursday = () => { - setIsThursday(!isThursday); - }; + console.log("thu", thursdayStartTime, thursdayEndTime, isThursday); + // const [isThursday, setIsThursday] = useState(false); + // const onClickIsThursday = () => { + // setIsThursday(!isThursday); + // }; + + const [fridayStartTime, setFridayStartTime] = useState(""); + const [fridayEndTime, setFridayEndTime] = useState(""); const [isFriday, setIsFriday] = useState(false); - const onClickIsFriday = () => { - setIsFriday(!isFriday); - }; + console.log("fri", fridayStartTime, fridayEndTime, isFriday); + // const [isFriday, setIsFriday] = useState(false); + // const onClickIsFriday = () => { + // setIsFriday(!isFriday); + // }; + + const [saturdayStartTime, setSaturdayStartTime] = useState(""); + const [saturdayEndTime, setSaturdayEndTime] = useState(""); const [isSaturday, setIsSaturday] = useState(false); - const onClickIsSaturday = () => { - setIsSaturday(!isSaturday); - }; + console.log("sat", saturdayStartTime, saturdayEndTime, isSaturday); + // const [isSaturday, setIsSaturday] = useState(false); + // const onClickIsSaturday = () => { + // setIsSaturday(!isSaturday); + // }; + + const [sundayStartTime, setSundayStartTime] = useState(""); + const [sundayEndTime, setSundayEndTime] = useState(""); const [isSunday, setIsSunday] = useState(false); - const onClickIsSunday = () => { - setIsSunday(!isSunday); - }; + console.log("sun", sundayStartTime, sundayEndTime, isSunday); + // const [isSunday, setIsSunday] = useState(false); + // const onClickIsSunday = () => { + // setIsSunday(!isSunday); + // }; // 시간 설정 모달창 - const [modalOpen, setModalOpen] = useState(false); - const openModal = () => { - setModalOpen(true); + // const [modalOpen, setModalOpen] = useState(false); + // const openModal = () => { + // setModalOpen(true); + // }; + // const closeModal = () => { + // setModalOpen(false); + // }; + + const [modalOpenMon, setModalOpenMon] = useState(false); + const [modalOpenTue, setModalOpenTue] = useState(false); + const [modalOpenWed, setModalOpenWed] = useState(false); + const [modalOpenThu, setModalOpenThu] = useState(false); + const [modalOpenFri, setModalOpenFri] = useState(false); + const [modalOpenSat, setModalOpenSat] = useState(false); + const [modalOpenSun, setModalOpenSun] = useState(false); + + const openModalMon = () => { + setModalOpenMon(true); + }; + const closeModalMon = () => { + setModalOpenMon(false); + }; + const openModalTue = () => { + setModalOpenTue(true); + }; + const closeModalTue = () => { + setModalOpenTue(false); + }; + const openModalWed = () => { + setModalOpenWed(true); + }; + const closeModalWed = () => { + setModalOpenWed(false); + }; + const openModalThu = () => { + setModalOpenThu(true); }; - const closeModal = () => { - setModalOpen(false); + const closeModalThu = () => { + setModalOpenThu(false); + }; + const openModalFri = () => { + setModalOpenFri(true); + }; + const closeModalFri = () => { + setModalOpenFri(false); + }; + const openModalSat = () => { + setModalOpenSat(true); + }; + const closeModalSat = () => { + setModalOpenSat(false); + }; + const openModalSun = () => { + setModalOpenSun(true); + }; + const closeModalSun = () => { + setModalOpenSun(false); }; return ( @@ -113,15 +200,18 @@ export default function StudyRecruitCreate() { className={`recruit-create-content-row day-name ${ isMonday ? "selected" : "" }`} - onClick={onClickIsMonday} + onClick={openModalMon} > Mon
@@ -130,10 +220,19 @@ export default function StudyRecruitCreate() { className={`recruit-create-content-row day-name ${ isTuesday ? "selected" : "" }`} - onClick={onClickIsTuesday} + onClick={openModalTue} > Tue + + + + + +
+ {isMonday && ( + + {mondayStartTime.substring(0, 5)} ~{" "} + {mondayEndTime.substring(0, 5)} + + )} + {isTuesday && ( + + {tuesdayStartTime.substring(0, 5)} ~{" "} + {tuesdayEndTime.substring(0, 5)} + + )} + {isWednesday && ( + + {wednesdayStartTime.substring(0, 5)} ~{" "} + {wednesdayEndTime.substring(0, 5)} + + )} + {isThursday && ( + + {thursdayStartTime.substring(0, 5)} ~{" "} + {thursdayEndTime.substring(0, 5)} + + )} + {isFriday && ( + + {fridayStartTime.substring(0, 5)} ~{" "} + {fridayEndTime.substring(0, 5)} + + )} + {isSaturday && ( + + {saturdayStartTime.substring(0, 5)} ~{" "} + {saturdayEndTime.substring(0, 5)} + + )} + {isSunday && ( + + {sundayStartTime.substring(0, 5)} ~{" "} + {sundayEndTime.substring(0, 5)} + + )} Date: Tue, 8 Feb 2022 02:02:02 +0900 Subject: [PATCH 18/62] [#58] feat: Get userSeq --- src/components/dateformat.js | 10 ++++ src/components/datepicker.js | 4 +- src/pages/studyRecruitCreate.js | 88 +++++++++++++++++++++++++++++---- 3 files changed, 91 insertions(+), 11 deletions(-) create mode 100644 src/components/dateformat.js diff --git a/src/components/dateformat.js b/src/components/dateformat.js new file mode 100644 index 0000000..6ae4a74 --- /dev/null +++ b/src/components/dateformat.js @@ -0,0 +1,10 @@ +export default function ChangeDateFormat(props) { + const endDate = props.endDate; + const monoth = "" + (endDate.getMonth() + 1); + const date = "" + endDate.getDate(); + const year = "" + endDate.getFullYear(); + + if (month.length < 2) month = "0" + month; + if (day.length < 2) day = "0" + day; + return [year, month, day].join("-"); +} diff --git a/src/components/datepicker.js b/src/components/datepicker.js index 06d8fac..f7827e4 100644 --- a/src/components/datepicker.js +++ b/src/components/datepicker.js @@ -6,12 +6,14 @@ import "react-datepicker/dist/react-datepicker.css"; import "../statics/css/datepicker.css"; import ko from "date-fns/locale/ko"; +import { propTypes } from "react-bootstrap/esm/Image"; registerLocale("ko", ko); -export default function StudyDatePicker() { +export default function StudyDatePicker(props) { // 기본 설정 날짜는 오늘날짜 +7일로 설정해둠 // startDate의 값을 server로 보내줄 예정 const [startDate, setStartDate] = useState(addDays(new Date(), 7)); + props.endDate(startDate); const months = [ "January", diff --git a/src/pages/studyRecruitCreate.js b/src/pages/studyRecruitCreate.js index 4959cd8..f868151 100644 --- a/src/pages/studyRecruitCreate.js +++ b/src/pages/studyRecruitCreate.js @@ -1,23 +1,26 @@ -import { useState } from "react"; +import { useCallback, useMemo, useState } from "react"; import ReactTooltip from "react-tooltip"; import StudyDatePicker from "../components/datepicker"; import StudyDatePickerStart from "../components/datepickerStart"; import TimePicker from "../components/timepicker"; +import isLogin from "../utils/isLogin"; import "../statics/css/studyRecruitCreate.css"; +import axios from "axios"; +import { useIsRTL } from "react-bootstrap/esm/ThemeProvider"; export default function StudyRecruitCreate() { - // [TODO]: studies api 완성되면 어떤 데이터를 post 해야하는지 보고 아래의 함수 완성하기 - // const [studyRecruit, setStudyRecruit] = useState({ - - // }) - // const [days, setDays] = useState([]); + const [days, setDays] = useState({ + dayNumber: 0, + timeStart: "", + timeEnd: "", + }); const [mondayStartTime, setMondayStartTime] = useState(""); const [mondayEndTime, setMondayEndTime] = useState(""); const [isMonday, setIsMonday] = useState(false); + + // console.log(days); + console.log("mon", mondayStartTime, mondayEndTime, isMonday); - if (isMonday) { - console.log("hi"); - } const [tuesdayStartTime, setTuesdayStartTime] = useState(""); const [tuesdayEndTime, setTuesdayEndTime] = useState(""); @@ -100,6 +103,64 @@ export default function StudyRecruitCreate() { setModalOpenSun(false); }; + // [TODO]: studies api 완성되면 어떤 데이터를 post 해야하는지 보고 아래의 함수 완성하기 + + const [studyTitle, setStudyTitle] = useState(""); + const [studyShortDesc, setStudyShotrDesc] = useState(""); + const [studyDesc, setStudyDesc] = useState(""); + const [studyRecruitEnd, setStudyRecruitEnd] = useState(""); + console.log(studyTitle, studyShortDesc, studyDesc, studyRecruitEnd); + + // [TODO]: 스터디 상세정보 글자수 실시간으로 보여주기 (1000자 제한) + const onChangeStudyDesc = useCallback((event) => { + setStudyDesc(event.target.value); + }); + useMemo(() => { + if (isMonday) { + setDays((prevState) => ({ + ...prevState, + dayNumber: 1, + timeStart: mondayStartTime, + timeEnd: mondayEndTime, + })); + } + }, [mondayEndTime, mondayStartTime]); + + const [userSeq, setUserSeq] = useState(""); + const [studyRecruit, setStudyRecruit] = useState({ + hostSea: 0, + categorySeq: 0, + studyTitle: "", + studyShortDesc: "", + sturyDesc: "", + studyRecruitEnd: "", + day: [{ dayNumber: 0, timeStart: "", timeEnd: "" }], + }); + if (isLogin()) { + const TOKEN = localStorage.getItem("accessToken"); + axios + .get("/users", { + headers: { + Authorization: `Bearer ${TOKEN}`, + }, + }) + .then((res) => { + setUserSeq(res.data.user.userNickname); + }); + // axios.post("/studies", { + // hostSea: userSeq, + // categorySeq: 0, + // studyTitle: studyTitle, + // studyShortDesc: studyShortDesc, + // sturyDesc: studyDesc, + // studyRecruitEnd: "", + // day: [{ dayNumber: 0, timeStart: "", timeEnd: "" }], + // headers: { + // Authorization: `Bearer ${TOKEN}`, + // }, + // }); + } + return (
@@ -127,6 +188,9 @@ export default function StudyRecruitCreate() { { + setStudyTitle(event.target.value); + })} />
종료일 - +
카테고리 - +