Merge pull request #83 from LikeLionHGU/#82_sungyu_모바일스타일적용

#82 sungyu 모바일스타일적용
LikeLionHGU · Aug 5, 2024 · 29805ed · 29805ed
2 parents 92f458f + f1f5403
commit 29805ed
Show file tree

Hide file tree

Showing 19 changed files with 780 additions and 84 deletions.
diff --git a/src/components/CreatePage/ConsumptionIndexComponent.js b/src/components/CreatePage/ConsumptionIndexComponent.js
@@ -91,7 +91,11 @@ const Vertical = styled.div`
 
 function ConsumptionIndexComponent(props) {
   const [categoryInput, setCategoryInput] = useState(props.category); // 카테고리 inputValue useState
-  const [priceInput, setPriceInput] = useState(convertStringNum(props.amount)); // 가격 inputValue useState
+  const [priceInput, setPriceInput] = useState(
+    Number.isInteger(props.amount)
+      ? convertStringNum(props.amount)
+      : props.amount
+  ); // 가격 inputValue useState
   const [isFocus, setIsFocus] = useState(false); // 카테고리 focus 관리
   const [isPriceEnter, setIsPriceEnter] = useState(false); // 가격 입력 유무 관리 recoil
   const categoryRef = useRef("");

diff --git a/src/components/MobComponent/MobCalenderPage/MonthComponent.js b/src/components/MobComponent/MobCalenderPage/MonthComponent.js
@@ -85,10 +85,47 @@ const circledatas = [
   },
 ];
 
+const HappinessInput = styled.input`
+  -webkit-appearance: none; /* Remove default styling */
+  appearance: none;
+  width: 90%; /* Full width */
+  height: 7px; /* Height of the slider */
+  background: linear-gradient(
+    to right,
+    rgba(184, 255, 217, 1),
+    rgba(42, 166, 99, 1)
+  ); /* Background color of the slider */
+  border-radius: 5px; /* Rounded corners */
+  outline: none; /* Remove outline */
+  /* opacity: 0.7; Transparency */
+  transition: opacity 0.2s; /* Transition for hover effect */
+  cursor: pointer;
+  border: none;
+
+  &::-webkit-slider-thumb {
+    -webkit-appearance: none; /* Remove default styling */
+    appearance: none;
+    width: 10px; /* Thumb width */
+    height: 10px; /* Thumb height */
+    border-radius: 50%; /* Circular thumb */
+    border: 1px solid rgba(63, 200, 126, 1);
+    background: rgba(240, 255, 247, 1); /* Thumb color */
+    cursor: pointer; /* Pointer cursor on hover */
+    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.5); /* Thumb shadow */
+  }
+`;
+
 function MonthComponent({ monthlyData, month, onDetailCPChange }) {
   return (
     <>
-      <HappyBox>{month}월의 행복지수</HappyBox>
+      <HappyBox>
+        <HappinessInput
+          value={monthlyData?.happinessRate}
+          type="range"
+          min="0"
+          max="100"
+        />
+      </HappyBox>
       <Horizontal>
         <Box>
           {month}월의 과소비 금액

diff --git a/src/components/MobComponent/MobCreatePage/ConsumptionComponent.js b/src/components/MobComponent/MobCreatePage/ConsumptionComponent.js
@@ -1,11 +1,7 @@
 import React, { useEffect, useState } from "react";
-import { useRecoilState, useRecoilValue } from "recoil";
+import { useRecoilValue } from "recoil";
 import styled from "styled-components";
-import {
-  consumptionIndexState,
-  tokenState,
-  userData,
-} from "../../../store/atom";
+import { tokenState, userData } from "../../../store/atom";
 import ConsumptionInputComponent from "./ConsumptionInputComponent";
 import axios from "axios";
 
@@ -16,13 +12,13 @@ const Title = styled.p`
 
 function ConsumptionComponent(props) {
   const userInfo = useRecoilValue(userData);
-  const [consumptions, setConsumptions] = useRecoilState(consumptionIndexState);
+  // const [consumptions, setConsumptions] = useRecoilState(consumptionIndexState);
   const userToken = useRecoilValue(tokenState);
   const [options, setOptions] = useState(null);
   const [keyCounter, setKeyCounter] = useState(1); // id 1씩 증가시키기 위한 useState
 
   function handleAddBtnClick() {
-    setConsumptions((prev) => [
+    props.setConsumptions((prev) => [
       ...prev.map((itm) => ({ ...itm, focus: false, isLast: false })),
       {
         key: keyCounter + 1,
@@ -55,13 +51,12 @@ function ConsumptionComponent(props) {
       .catch((error) => {
         console.log(error);
       });
-  }, [userToken, props]);
+  }, [userToken]);
   return (
     <div>
       <Title>{userInfo.name}님의 소비를 입력해주세요</Title>
-      {consumptions.map((itm) => (
+      {props.consumptions.map((itm) => (
         <>
-          <p>{itm.amount}</p>
           <ConsumptionInputComponent
             key={itm.id}
             id={itm.id}

diff --git a/src/components/MobComponent/MobCreatePage/ConsumptionInputComponent.js b/src/components/MobComponent/MobCreatePage/ConsumptionInputComponent.js
@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import styled from "styled-components";
-import { Horizontal, Vertical } from "../../../styles/CommunalStyle";
+import { Horizontal } from "../../../styles/CommunalStyle";
 import { useSetRecoilState } from "recoil";
 import { consumptionIndexState } from "../../../store/atom";
 import AddBtnImg from "../../../imgs/AddBtnImg.svg";
@@ -9,7 +9,7 @@ import RmvBtnImg from "../../../imgs/RemoveBtnImg.svg";
 const ManageBtn = styled.button`
   width: 44px;
   height: 42px;
-  border-radius: 20px;
+  border-radius: 16px;
   border: 1px solid
     ${(props) => (props.id === "addBtn" ? "#2AA663" : "#939393")};
   background: #fff;
@@ -84,10 +84,22 @@ const AmountInput = styled.input`
   margin-left: 6px;
 `;
 
+const Vertical = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+`;
+
 function ConsumptionInputComponent(props) {
   const setConsumptions = useSetRecoilState(consumptionIndexState);
   const [categoryInput, setCategoryInput] = useState(props.category);
-  const [amountInput, setAmountInput] = useState(props.amount);
+  const [amountInput, setAmountInput] = useState(
+    Number.isInteger(props.amount)
+      ? convertStringNum(props.amount)
+      : props.amount
+  );
   const [isFocus, setIsFocus] = useState(false);
   const categoryRef = useRef("");
   const priceRef = useRef("");
@@ -135,16 +147,14 @@ function ConsumptionInputComponent(props) {
   }
 
   function handleRmvBtnClick() {
-    setConsumptions((prev) =>
-      prev.filter((item) => item.category !== props.category)
-    );
+    setConsumptions((prev) => prev.filter((item) => item.id !== props.id));
   }
 
   useEffect(() => {
     handleInputsChange();
   }, [categoryInput, amountInput, handleInputsChange]);
   return (
-    <Horizontal style={{ marginBottom: "12px" }}>
+    <Horizontal style={{ marginBottom: "12px", justifyContent: "flex-start" }}>
       <Vertical style={{ position: "relative" }}>
         <CategoryInput
           placeholder="카테고리"
@@ -216,3 +226,8 @@ function ConsumptionInputComponent(props) {
 }
 
 export default ConsumptionInputComponent;
+
+function convertStringNum(onlyNumber) {
+  const formattedNumber = new Intl.NumberFormat().format(onlyNumber);
+  return formattedNumber;
+}
diff --git a/src/components/MobComponent/MobCreatePage/HappinessRateComponent.js b/src/components/MobComponent/MobCreatePage/HappinessRateComponent.js
@@ -76,7 +76,7 @@ function HappinessRateComponent() {
   return (
     <div>
       <Title>{userInfo.name}님의 행복지수를 알려주세요</Title>
-      <Horizontal>
+      <Horizontal style={{ justifyContent: "flex-start" }}>
         <HappyInputWrapper>
           <HappinessInput
             type="range"

diff --git a/src/components/MobComponent/MobMainPage/DayStatisticsComponent.js b/src/components/MobComponent/MobMainPage/DayStatisticsComponent.js
@@ -2,6 +2,7 @@ import styled from "styled-components";
 import { Horizontal } from "../../../styles/CommunalStyle";
 import { useRecoilValue } from "recoil";
 import { userData } from "../../../store/atom";
+import { useEffect } from "react";
 
 const Title = styled.p`
   color: ${(props) => props.theme.colors.COLORBlack};
@@ -52,16 +53,58 @@ const TagBox = styled.div`
   margin: 2px;
 `;
 
+const HappinessInput = styled.input`
+  -webkit-appearance: none; /* Remove default styling */
+  appearance: none;
+  width: 90%; /* Full width */
+  height: 7px; /* Height of the slider */
+  background: linear-gradient(
+    to right,
+    rgba(184, 255, 217, 1),
+    rgba(42, 166, 99, 1)
+  ); /* Background color of the slider */
+  border-radius: 5px; /* Rounded corners */
+  outline: none; /* Remove outline */
+  /* opacity: 0.7; Transparency */
+  transition: opacity 0.2s; /* Transition for hover effect */
+  cursor: pointer;
+  border: none;
+
+  &::-webkit-slider-thumb {
+    -webkit-appearance: none; /* Remove default styling */
+    appearance: none;
+    width: 10px; /* Thumb width */
+    height: 10px; /* Thumb height */
+    border-radius: 50%; /* Circular thumb */
+    border: 1px solid rgba(63, 200, 126, 1);
+    background: rgba(240, 255, 247, 1); /* Thumb color */
+    cursor: pointer; /* Pointer cursor on hover */
+    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.5); /* Thumb shadow */
+  }
+`;
+
 const colors = ["#BEFEDB", "#C4FAF7", "#BDEFFF", "#C1FFAC"];
 function DayStatisticsComponent({ dayData }) {
   const userInfo = useRecoilValue(userData);
+  const dailyHappyRate = dayData.happinessRate;
   return (
     <>
       <Title>
         {userInfo.name}님의{" "}
         <span style={{ fontFamily: "SUITMedium" }}>오늘 소비 기록 </span>
       </Title>
-      <HappyBox>오늘의 행복지수</HappyBox>
+      <HappyBox>
+        {dailyHappyRate === null ? (
+          "오늘의 행복지수를 입력해주세요"
+        ) : (
+          <HappinessInput
+            value={dailyHappyRate}
+            type="range"
+            min="0"
+            max="100"
+          />
+        )}
+      </HappyBox>
       <Horizontal>
         <Box>
           오늘 과소비 건수

diff --git a/src/components/MobComponent/MobMainPage/WeekMonthStstisticsComponent.js b/src/components/MobComponent/MobMainPage/WeekMonthStstisticsComponent.js
@@ -60,9 +60,41 @@ const CircleBox = styled.div`
   background-color: ${({ color }) => color};
   margin-top: ${({ margin }) => margin};
 `;
+
+const HappinessInput = styled.input`
+  -webkit-appearance: none; /* Remove default styling */
+  appearance: none;
+  width: 90%; /* Full width */
+  height: 7px; /* Height of the slider */
+  background: linear-gradient(
+    to right,
+    rgba(184, 255, 217, 1),
+    rgba(42, 166, 99, 1)
+  ); /* Background color of the slider */
+  border-radius: 5px; /* Rounded corners */
+  outline: none; /* Remove outline */
+  /* opacity: 0.7; Transparency */
+  transition: opacity 0.2s; /* Transition for hover effect */
+  cursor: pointer;
+  border: none;
+
+  &::-webkit-slider-thumb {
+    -webkit-appearance: none; /* Remove default styling */
+    appearance: none;
+    width: 10px; /* Thumb width */
+    height: 10px; /* Thumb height */
+    border-radius: 50%; /* Circular thumb */
+    border: 1px solid rgba(63, 200, 126, 1);
+    background: rgba(240, 255, 247, 1); /* Thumb color */
+    cursor: pointer; /* Pointer cursor on hover */
+    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.5); /* Thumb shadow */
+  }
+`;
 //ToDo: api 추가 개발 시 데이터 받아와서 연결 새롭게 하기
 function WeekMonthStstisticsComponent({ weekData, monthData }) {
   const [isMonthly, setIsMonthly] = useState(false);
+  const weekHappyRate = weekData.happinessRate;
+  const monthHappyRate = monthData.happinessRate;
   const circledatas = [
     {
       size: "37px",
@@ -150,7 +182,23 @@ function WeekMonthStstisticsComponent({ weekData, monthData }) {
           />
         </ToggleContainer>
       </Horizontal>
-      <HappyBox>{isMonthly ? "이번달 행복지수" : "이번주 행복지수"}</HappyBox>
+      <HappyBox>
+        {isMonthly ? (
+          <HappinessInput
+            value={monthHappyRate}
+            type="range"
+            min="0"
+            max="100"
+          />
+        ) : (
+          <HappinessInput
+            value={weekHappyRate}
+            type="range"
+            min="0"
+            max="100"
+          />
+        )}
+      </HappyBox>
       <Horizontal>
         <Box>
           {isMonthly ? (

diff --git a/src/components/MobComponent/MobMyPage/CategoryAmountComponent.js b/src/components/MobComponent/MobMyPage/CategoryAmountComponent.js
@@ -48,9 +48,9 @@ const Unit = styled.span`
 `;
 
 const ManageBtn = styled.button`
-  width: 60px;
-  height: 60px;
-  border-radius: 20px;
+  width: 44px;
+  height: 44px;
+  border-radius: 14px;
   border: 1px solid
     ${(props) => (props.id === "addBtn" ? "#2AA663" : "#939393")};
   background: #fff;