[#123] bugfix: darkmode modal button color

super-waffle · Feb 18, 2022 · 35b274c · 35b274c
1 parent 4e5c588
commit 35b274c
Show file tree

Hide file tree

Showing 13 changed files with 233 additions and 73 deletions.
diff --git 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}
           />
         </Col>
-        <Col className="diary-box__img" sm={4} md={4} lg={4}>
+        <Col className="diary-box__img" sm={8} md={8} lg={8}>
           <DiaryText
             wantEdit={wantEdit}
             setWantEdit={setWantEdit}

diff --git a/src/components/Schedule/diaryImage.js b/src/components/Schedule/diaryImage.js
@@ -1,28 +1,40 @@
-import axios from 'axios';
-import React, { useState, useEffect } from 'react';
-import { useSelector } from 'react-redux';
+import axios from "axios";
+import React, { useState, useEffect } from "react";
+import { useSelector } from "react-redux";
 
 function DiaryImage({ wantEdit, imgURL, setImgFile, preview, setPreview }) {
   const selectPicture = (e) => {
     setPreview(() => window.URL.createObjectURL(e.target.files[0]));
     setImgFile(() => e.target.files[0]);
   };
   return (
-    <>
-      {wantEdit ? <input type="file" id="file" accept="image/*" onChange={selectPicture} /> : null}
+    <div className="diary-image">
+      {wantEdit ? (
+        <input
+          type="file"
+          id="file"
+          accept="image/*"
+          onChange={selectPicture}
+        />
+      ) : null}
       <div className="diary-box__img-file-wrapper">
         {!preview && !imgURL ? (
           <div>
-            <img src={'images/photoCat.png'} alt="defaultImg" />
-            <p>사진을 남겨주세요</p>
+            <img src={"images/photoCat.png"} alt="defaultImg" />
+            <div className="diary-image__text">
+              오늘 하루를 기록할 수 있는 사진을 남겨주세요
+            </div>
           </div>
         ) : null}
         {!preview && imgURL ? (
-          <img src={process.env.REACT_APP_SERVER_URL + `/images/${imgURL}`} alt="diaryImg" />
+          <img
+            src={process.env.REACT_APP_SERVER_URL + `/images/${imgURL}`}
+            alt="diaryImg"
+          />
         ) : null}
         {preview ? <img src={preview} alt="preview" /> : null}
       </div>
-    </>
+    </div>
   );
 }
 export default React.memo(DiaryImage);
diff --git 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)}
                 <div className="schedule-today-study-contents">
                   <div className="schedule-today-study-contents-header">
-                    <span className="schedule-today-study-contents__category">{study.categoryName}</span>
-                    <span className="schedule-today-study-contents__title">{study.title}</span>
+                    <span className="schedule-today-study-contents__category">
+                      {study.categoryName}
+                    </span>
+                    <span className="schedule-today-study-contents__title">
+                      {study.title}
+                    </span>
+                  </div>
+                  <div className="schedule-today-study-contents__desc">
+                    {study.shortDescription}
                   </div>
-                  <div className="schedule-today-study-contents__desc">{study.shortDescription}</div>
                   <div className="schedule-today-study-contents-foot">
                     <div className="schedule-today-study-contents__members">
-                      <svg width="14" height="14" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+                      <svg
+                        width="14"
+                        height="14"
+                        viewBox="0 0 15 15"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
                         <path
                           d="M7.5 7.5C8.44483 7.5 9.35097 7.12467 10.0191 6.45657C10.6872 5.78847 11.0625 4.88233 11.0625 3.9375C11.0625 2.99267 10.6872 2.08653 10.0191 1.41843C9.35097 0.750334 8.44483 0.375 7.5 0.375C6.55517 0.375 5.64903 0.750334 4.98093 1.41843C4.31283 2.08653 3.9375 2.99267 3.9375 3.9375C3.9375 4.88233 4.31283 5.78847 4.98093 6.45657C5.64903 7.12467 6.55517 7.5 7.5 7.5V7.5ZM9.875 3.9375C9.875 4.56739 9.62478 5.17148 9.17938 5.61688C8.73398 6.06228 8.12989 6.3125 7.5 6.3125C6.87011 6.3125 6.26602 6.06228 5.82062 5.61688C5.37522 5.17148 5.125 4.56739 5.125 3.9375C5.125 3.30761 5.37522 2.70352 5.82062 2.25812C6.26602 1.81272 6.87011 1.5625 7.5 1.5625C8.12989 1.5625 8.73398 1.81272 9.17938 2.25812C9.62478 2.70352 9.875 3.30761 9.875 3.9375V3.9375ZM14.625 13.4375C14.625 14.625 13.4375 14.625 13.4375 14.625H1.5625C1.5625 14.625 0.375 14.625 0.375 13.4375C0.375 12.25 1.5625 8.6875 7.5 8.6875C13.4375 8.6875 14.625 12.25 14.625 13.4375ZM13.4375 13.4328C13.4363 13.1406 13.2546 12.2619 12.4495 11.4567C11.6753 10.6825 10.2182 9.875 7.5 9.875C4.78063 9.875 3.32475 10.6825 2.5505 11.4567C1.74538 12.2619 1.56488 13.1406 1.5625 13.4328H13.4375Z"
                           fill="var(--textColor)"
@@ -56,7 +71,13 @@ export default function Todaystudy({ weekly }) {
                       {study.isAttend}/6
                     </div>
                     <div className="schedule-today-study-contents__time">
-                      <svg width="14" height="14" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                      <svg
+                        width="14"
+                        height="14"
+                        viewBox="0 0 20 20"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
                         <path
                           d="M9.99 0C4.47 0 0 4.48 0 10C0 15.52 4.47 20 9.99 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 9.99 0ZM10 18C5.58 18 2 14.42 2 10C2 5.58 5.58 2 10 2C14.42 2 18 5.58 18 10C18 14.42 14.42 18 10 18ZM9.78 5H9.72C9.32 5 9 5.32 9 5.72V10.44C9 10.79 9.18 11.12 9.49 11.3L13.64 13.79C13.98 13.99 14.42 13.89 14.62 13.55C14.6702 13.469 14.7036 13.3788 14.7182 13.2846C14.7328 13.1905 14.7283 13.0943 14.705 13.002C14.6817 12.9096 14.64 12.8229 14.5824 12.7469C14.5249 12.671 14.4526 12.6074 14.37 12.56L10.5 10.26V5.72C10.5 5.32 10.18 5 9.78 5V5Z"
                           fill="var(--textColor)"
@@ -74,9 +95,11 @@ export default function Todaystudy({ weekly }) {
                     pathname: `/studyroom`,
                   }}
                 >
-                  <button>예</button>
+                  <button className="studyroom-in__btn">예</button>
                 </Link>
-                <button onClick={closeModal}>아니오</button>
+                <button className="studyroom-in__no-btn" onClick={closeModal}>
+                  아니오
+                </button>
               </Modal>
             </>
           ))

diff --git a/src/components/home/todays/homeStudiesList.js b/src/components/home/todays/homeStudiesList.js
@@ -116,9 +116,11 @@ export default function HomeStudies() {
                   pathname: `/studyroom`,
                 }}
               >
-                <button>예</button>
+                <button className="studyroom-in__btn">예</button>
               </Link>
-              <button onClick={closeModal}>아니오</button>
+              <button className="studyroom-in__no-btn" onClick={closeModal}>
+                아니오
+              </button>
             </Modal>
           </div>
         ))}

diff --git a/src/statics/css/diary.css b/src/statics/css/diary.css
diff --git a/src/statics/css/diary.css.map b/src/statics/css/diary.css.map
diff --git a/src/statics/css/home/homeStudiesList.css b/src/statics/css/home/homeStudiesList.css
diff --git a/src/statics/css/home/homeStudiesList.css.map b/src/statics/css/home/homeStudiesList.css.map
diff --git a/src/statics/css/todayStudy.css b/src/statics/css/todayStudy.css
diff --git a/src/statics/css/todayStudy.css.map b/src/statics/css/todayStudy.css.map