From 35b274c79fe4710d322e0272f2c27dbf9e2db3f6 Mon Sep 17 00:00:00 2001 From: rosieyeon Date: Fri, 18 Feb 2022 10:49:26 +0900 Subject: [PATCH] [#123] bugfix: darkmode modal button color --- src/components/Schedule/diary-refac.js | 91 +++++++++++-------- src/components/Schedule/diaryImage.js | 30 ++++-- src/components/Schedule/todaystudy.js | 55 +++++++---- src/components/home/todays/homeStudiesList.js | 6 +- src/statics/css/diary.css | 22 ++++- src/statics/css/diary.css.map | 2 +- src/statics/css/home/homeStudiesList.css | 19 ++++ src/statics/css/home/homeStudiesList.css.map | 2 +- src/statics/css/todayStudy.css | 19 ++++ src/statics/css/todayStudy.css.map | 2 +- src/statics/scss/diary.scss | 22 ++++- src/statics/scss/home/homeStudiesList.scss | 17 ++++ src/statics/scss/todayStudy.scss | 19 +++- 13 files changed, 233 insertions(+), 73 deletions(-) diff --git a/src/components/Schedule/diary-refac.js b/src/components/Schedule/diary-refac.js index 39a9bec..04ecd98 100644 --- a/src/components/Schedule/diary-refac.js +++ b/src/components/Schedule/diary-refac.js @@ -1,28 +1,33 @@ -import { Row, Col } from 'react-bootstrap'; -import React, { useEffect, useState } from 'react'; -import axios from 'axios'; -import '../../statics/css/diary.css'; -import { useSelector } from 'react-redux'; -import DiaryImage from './diaryImage'; -import DiaryText from './diaryText'; +import { Row, Col } from "react-bootstrap"; +import React, { useEffect, useState } from "react"; +import axios from "axios"; +import "../../statics/css/diary.css"; +import { useSelector } from "react-redux"; +import DiaryImage from "./diaryImage"; +import DiaryText from "./diaryText"; function DiaryRefac() { - const token = localStorage.getItem('accessToken'); + const token = localStorage.getItem("accessToken"); const selectedDay = useSelector((state) => state.schedule.selectedDay); const [wantEdit, setWantEdit] = useState(false); // 수정여부 const [data, setData] = useState(new FormData()); // 전송할 데이터 - const [imgFile, setImgFile] = useState(''); // 이미지 파일 - const [content, setContent] = useState(''); // 글 내용 - const [imgURL, setImgURL] = useState(''); // 서버에서 불러올 img url - const [preview, setPreview] = useState(''); - const [diarySeq, setDiarySeq] = useState(''); + const [imgFile, setImgFile] = useState(""); // 이미지 파일 + const [content, setContent] = useState(""); // 글 내용 + const [imgURL, setImgURL] = useState(""); // 서버에서 불러올 img url + const [preview, setPreview] = useState(""); + const [diarySeq, setDiarySeq] = useState(""); const getData = async () => { await axios - .get(process.env.REACT_APP_SERVER_URL + '/diaries?date=' + JSON.parse(selectedDay), { - headers: { - Authorization: `Bearer ${token}`, - }, - }) + .get( + process.env.REACT_APP_SERVER_URL + + "/diaries?date=" + + JSON.parse(selectedDay), + { + headers: { + Authorization: `Bearer ${token}`, + }, + } + ) .then((response) => { setData(() => response.data.diary); }); @@ -37,39 +42,49 @@ function DiaryRefac() { const createDiary = async () => { let createData = new FormData(); if (imgFile) { - createData.append('image', imgFile); + createData.append("image", imgFile); } - createData.append('dateInfo.date', JSON.parse(selectedDay)); - createData.append('contentInfo.content', content); + createData.append("dateInfo.date", JSON.parse(selectedDay)); + createData.append("contentInfo.content", content); axios - .post(process.env.REACT_APP_SERVER_URL + '/diaries?date=' + JSON.parse(selectedDay), createData, { - headers: { - Authorization: `Bearer ${token}`, - }, - }) + .post( + process.env.REACT_APP_SERVER_URL + + "/diaries?date=" + + JSON.parse(selectedDay), + createData, + { + headers: { + Authorization: `Bearer ${token}`, + }, + } + ) .then((response) => getData()) .catch((err) => console.log(err)); }; const updateDiary = async () => { let updateData = new FormData(); if (imgFile) { - updateData.append('image', imgFile); + updateData.append("image", imgFile); } - updateData.append('contentInfo.content', content); + updateData.append("contentInfo.content", content); axios - .patch(process.env.REACT_APP_SERVER_URL + `/diaries/${diarySeq}`, updateData, { - headers: { - Authorization: `Bearer ${token}`, - }, - }) + .patch( + process.env.REACT_APP_SERVER_URL + `/diaries/${diarySeq}`, + updateData, + { + headers: { + Authorization: `Bearer ${token}`, + }, + } + ) .then((response) => getData()) .catch((err) => console.log(err)); }; const changeDay = () => { - setPreview(() => ''); - setImgURL(() => ''); - setContent(() => ''); - setDiarySeq(() => ''); + setPreview(() => ""); + setImgURL(() => ""); + setContent(() => ""); + setDiarySeq(() => ""); setWantEdit(() => false); setImgFile(() => null); }; @@ -90,7 +105,7 @@ function DiaryRefac() { setPreview={setPreview} /> - + { @@ -8,21 +8,33 @@ function DiaryImage({ wantEdit, imgURL, setImgFile, preview, setPreview }) { setImgFile(() => e.target.files[0]); }; return ( - <> - {wantEdit ? : null} +
+ {wantEdit ? ( + + ) : null}
{!preview && !imgURL ? (
- defaultImg -

사진을 남겨주세요

+ defaultImg +
+ 오늘 하루를 기록할 수 있는 사진을 남겨주세요 +
) : null} {!preview && imgURL ? ( - diaryImg + diaryImg ) : null} {preview ? preview : null}
- +
); } export default React.memo(DiaryImage); diff --git a/src/components/Schedule/todaystudy.js b/src/components/Schedule/todaystudy.js index 265f049..1269ea3 100644 --- a/src/components/Schedule/todaystudy.js +++ b/src/components/Schedule/todaystudy.js @@ -1,9 +1,9 @@ -import { useState, useEffect } from 'react'; -import { Row, Col, Container } from 'react-bootstrap'; -import { useSelector } from 'react-redux'; -import { Link } from 'react-router-dom'; -import '../../statics/css/todayStudy.css'; -import Modal from '../modal'; +import { useState, useEffect } from "react"; +import { Row, Col, Container } from "react-bootstrap"; +import { useSelector } from "react-redux"; +import { Link } from "react-router-dom"; +import "../../statics/css/todayStudy.css"; +import Modal from "../modal"; export default function Todaystudy({ weekly }) { const selectedDay = useSelector((state) => state.schedule.selectedDay); @@ -17,7 +17,10 @@ export default function Todaystudy({ weekly }) { }; useEffect(() => { try { - setDailyStudies(weekly.filter((daily) => daily.date === JSON.parse(selectedDay))[0].studySchedules); + setDailyStudies( + weekly.filter((daily) => daily.date === JSON.parse(selectedDay))[0] + .studySchedules + ); } catch { setDailyStudies([]); } @@ -35,19 +38,31 @@ export default function Todaystudy({ weekly }) { sm={6} md={6} lg={6} - style={{ cursor: 'pointer' }} + style={{ cursor: "pointer" }} onClick={openModal} > - {localStorage.setItem('studySeq', study.studySeq)} + {localStorage.setItem("studySeq", study.studySeq)}
- {study.categoryName} - {study.title} + + {study.categoryName} + + + {study.title} + +
+
+ {study.shortDescription}
-
{study.shortDescription}
- +
- + - + - + )) diff --git a/src/components/home/todays/homeStudiesList.js b/src/components/home/todays/homeStudiesList.js index 157ba6a..fe3ba7d 100644 --- a/src/components/home/todays/homeStudiesList.js +++ b/src/components/home/todays/homeStudiesList.js @@ -116,9 +116,11 @@ export default function HomeStudies() { pathname: `/studyroom`, }} > - + - +
))} diff --git a/src/statics/css/diary.css b/src/statics/css/diary.css index a35399b..3dab5fd 100644 --- a/src/statics/css/diary.css +++ b/src/statics/css/diary.css @@ -40,15 +40,24 @@ margin: auto; border-radius: 7px; } -.diary .diary-box__contents textarea { +.diary .diary-box__contents-text { + display: flex; + flex-direction: column; + align-items: flex-end; +} +.diary .diary-box__contents-text textarea { width: 100%; - height: 90%; + height: 100%; background-color: var(--htmlbgColor); border: 1px solid var(--borderColor); border-radius: 7px; font-size: 12px; padding: 0.5rem; color: var(--textColor-todo); + margin-bottom: 16px; +} +.diary .diary-box__contents-text :focus { + outline: 1px solid #6667ab; } .diary .diary-box__contents-btn { border: none; @@ -60,4 +69,13 @@ border-radius: 5px; } +.diary-image { + color: var(--textColor-todo); + font-size: 14px; +} + +.diary-image__text { + padding-top: 8px; +} + /*# sourceMappingURL=diary.css.map */ diff --git a/src/statics/css/diary.css.map b/src/statics/css/diary.css.map index 4fc9cf1..786095b 100644 --- a/src/statics/css/diary.css.map +++ b/src/statics/css/diary.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/diary.scss"],"names":[],"mappings":"AAAQ;AAcR;EACE;;;ACbF;EACE;EACA;;AAEA;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAKJ;EACE;EAGA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACE;EACA,kBDpDQ;ECqDR;EACA;EACA;EACA;EACA","file":"diary.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/diary.scss"],"names":[],"mappings":"AAAQ;AAcR;EACE;;;ACbF;EACE;EACA;;AAEA;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAKJ;EACE;EAGA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAMJ;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAGJ;EACE;EACA,kBD9DQ;EC+DR;EACA;EACA;EACA;EACA;;;AA2BJ;EACE;EACA;;;AAGF;EACE","file":"diary.css"} \ No newline at end of file diff --git a/src/statics/css/home/homeStudiesList.css b/src/statics/css/home/homeStudiesList.css index 1bc95d3..5bb84fe 100644 --- a/src/statics/css/home/homeStudiesList.css +++ b/src/statics/css/home/homeStudiesList.css @@ -102,4 +102,23 @@ color: var(--textColor); } +.studyroom-in__btn { + border: none; + background-color: #6667ab; + color: #eeeeee; + border-radius: 5px; + font-size: 14px; + padding: 0.3rem 1.6rem; + margin-right: 6px; +} + +.studyroom-in__no-btn { + border: 1px solid #6667ab; + background-color: var(--bgColor); + color: var(--textColor); + border-radius: 5px; + font-size: 14px; + padding: 0.3rem 1.3rem; +} + /*# sourceMappingURL=homeStudiesList.css.map */ diff --git a/src/statics/css/home/homeStudiesList.css.map b/src/statics/css/home/homeStudiesList.css.map index 388adcb..638e43c 100644 --- a/src/statics/css/home/homeStudiesList.css.map +++ b/src/statics/css/home/homeStudiesList.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../../scss/main.scss","../../scss/home/homeStudiesList.scss"],"names":[],"mappings":"AAAQ;AAcR;EACE;;;ACbF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;AACA;EACE;EACA,ODzBQ;EC0BR;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACE;EACA;EACA;EACA;EACA;;;AAEF;EAME;;AALA;EACE;EACA;EACA","file":"homeStudiesList.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../../scss/main.scss","../../scss/home/homeStudiesList.scss"],"names":[],"mappings":"AAAQ;AAcR;EACE;;;ACbF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;AACA;EACE;EACA,ODzBQ;EC0BR;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACE;EACA;EACA;EACA;EACA;;;AAEF;EAME;;AALA;EACE;EACA;EACA;;;AAIJ;EACE;EACA,kBDzFU;EC0FV;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA","file":"homeStudiesList.css"} \ No newline at end of file diff --git a/src/statics/css/todayStudy.css b/src/statics/css/todayStudy.css index 1fe8af7..1b29a64 100644 --- a/src/statics/css/todayStudy.css +++ b/src/statics/css/todayStudy.css @@ -66,4 +66,23 @@ color: var(--textColor-dark); } +.studyroom-in__btn { + border: none; + background-color: #6667ab; + color: #eeeeee; + border-radius: 5px; + font-size: 14px; + padding: 0.3rem 1.6rem; + margin-right: 6px; +} + +.studyroom-in__no-btn { + border: 1px solid #6667ab; + background-color: var(--bgColor); + color: var(--textColor); + border-radius: 5px; + font-size: 14px; + padding: 0.3rem 1.3rem; +} + /*# sourceMappingURL=todayStudy.css.map */ diff --git a/src/statics/css/todayStudy.css.map b/src/statics/css/todayStudy.css.map index 317bf5a..04841b2 100644 --- a/src/statics/css/todayStudy.css.map +++ b/src/statics/css/todayStudy.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/todayStudy.scss"],"names":[],"mappings":"AAAQ;AAcR;EACE;;;ACbF;EACE;;;AAGF;EACE;EACA;EACA;;;AAEF;EAGE;EACA;;;AAQF;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;;AAGF;EACE;EACA,ODhCQ;;ACkCV;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;EACA;;AACA;EACE;EACA;;AAGJ;EACE;EACA;EACA;;AACA;EACE;EACA;;AAGJ;EACE;EACA","file":"todayStudy.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../scss/main.scss","../scss/todayStudy.scss"],"names":[],"mappings":"AAAQ;AAcR;EACE;;;ACbF;EACE;;;AAGF;EACE;EACA;EACA;;;AAEF;EAGE;EACA;;;AAQF;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;;AAGF;EACE;EACA,ODhCQ;;ACkCV;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;EACA;;AACA;EACE;EACA;;AAGJ;EACE;EACA;EACA;;AACA;EACE;EACA;;AAGJ;EACE;EACA;;;AAGJ;EACE;EACA,kBDpEU;ECqEV;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA","file":"todayStudy.css"} \ No newline at end of file diff --git a/src/statics/scss/diary.scss b/src/statics/scss/diary.scss index 107f220..4c9a2f7 100644 --- a/src/statics/scss/diary.scss +++ b/src/statics/scss/diary.scss @@ -42,16 +42,26 @@ border-radius: 7px; } } - .diary-box__contents { + // .diary-box__contents-text { + + // } + .diary-box__contents-text { + display: flex; + flex-direction: column; + align-items: flex-end; & textarea { width: 100%; - height: 90%; + height: 100%; background-color: var(--htmlbgColor); border: 1px solid var(--borderColor); border-radius: 7px; font-size: 12px; padding: 0.5rem; color: var(--textColor-todo); + margin-bottom: 16px; + } + :focus { + outline: 1px solid $mainColor; } } .diary-box__contents-btn { @@ -88,3 +98,11 @@ // // } // } } +.diary-image { + color: var(--textColor-todo); + font-size: 14px; + // padding-top: 8px; +} +.diary-image__text { + padding-top: 8px; +} diff --git a/src/statics/scss/home/homeStudiesList.scss b/src/statics/scss/home/homeStudiesList.scss index 8bff0f8..80dcf08 100644 --- a/src/statics/scss/home/homeStudiesList.scss +++ b/src/statics/scss/home/homeStudiesList.scss @@ -91,3 +91,20 @@ } margin-right: 8px; } +.studyroom-in__btn { + border: none; + background-color: $mainColor; + color: #eeeeee; + border-radius: 5px; + font-size: 14px; + padding: 0.3rem 1.6rem; + margin-right: 6px; +} +.studyroom-in__no-btn { + border: 1px solid $mainColor; + background-color: var(--bgColor); + color: var(--textColor); + border-radius: 5px; + font-size: 14px; + padding: 0.3rem 1.3rem; +} diff --git a/src/statics/scss/todayStudy.scss b/src/statics/scss/todayStudy.scss index cc4d2a3..3c237d9 100644 --- a/src/statics/scss/todayStudy.scss +++ b/src/statics/scss/todayStudy.scss @@ -1,4 +1,4 @@ -@import 'main.scss'; +@import "main.scss"; .schedule-today-study { font-family: $font-family; @@ -70,3 +70,20 @@ color: var(--textColor-dark); } } +.studyroom-in__btn { + border: none; + background-color: $mainColor; + color: #eeeeee; + border-radius: 5px; + font-size: 14px; + padding: 0.3rem 1.6rem; + margin-right: 6px; +} +.studyroom-in__no-btn { + border: 1px solid $mainColor; + background-color: var(--bgColor); + color: var(--textColor); + border-radius: 5px; + font-size: 14px; + padding: 0.3rem 1.3rem; +}