[SEB 41] Main Project (5) chart 기능 추가, css 마무리, 반응형 구현

이제 진짜 끝을 향해 달려가고 있다!
제출을 끝내고 홈페이지에 몇몇 남아있는 오류들을 조원들과 함께 마무리하면서
끝을 맞이하고 있다!

목표 진척도 chart

도넛 모양의 차트로 구현한 목표 진척도.

https://www.npmjs.com/package/react-minimal-pie-chart

이렇게 생긴 도넛모양의 진척도!

 

그래서 내가 구현한 코드는

import { PieChart } from 'react-minimal-pie-chart';

		<PieChart
        	data={[
                     {
                        value: item.progress, // 값
                        color: '#aac4ff', // 채워지는 색
                        name: 'progress',
                      },
                   ]}
            style={{ margin: '20px 10px 0 0' }}
            reveal={item.progress} // 안에 들어가는 값
            lineWidth={18} // 도넛 두께
            background="#f3f3f3" // 색 채워지지 않은 부분 
            lengthAngle={360} // 원 모양
            rounded // 동글
            animate // 진입 시 채워지는 움직임
            // 가운데에 적히는 글씨 , 글씨 스타일
            label={({ dataEntry }) => dataEntry.value + '%'}	
            labelStyle={{
            fontSize: '20px',
            fill: '#aac4ff',
                        }} 
            labelPosition={0} 
         />

item.progress는 백엔드에서 넘어온 퍼센트 수치이며,
백엔드 분이 목표금액에서 월 입금액을 나누어서 보내주셨던 데이터이다.

        	data={[
                     {
                        value: item.progress,
                        color: '#aac4ff', 
                        name: 'progress',
                      },
                   ]}

여기서 value 값에, 변수니까 당연히 {} 를 넣어줘야 한다고 생각해서
{item.progress}라고 적어서 안되길래 'item.progress'라고 적었는데,
결국엔 {} 안에 있으므로 중괄호가 두 번 쓰여서 안되었던 걸로..
그래서 아무것도 안 쓴 결과가 출력에 성공했다

div flex 조절

이 카드의 div는 <타이틀+input> / <차트> 이렇게 나뉜다.
얘네들을 div안에 각각 나눠주니 딱 반반씩 차지하고 있는 모습.
기초 css이지만 너무 오래전에 배워서 다시 적어본다.

	<div style={{ display: 'flex' }}>
         <div style={{ flex: '4' }}>
             <div style={{ display: 'flex' }}>
                 <Header>나의 목표 </Header>{' '}
                 <input
                    className="SettingInput"
                    defaultValue={item.goalName}
                  />
             </div>
				...
          </div>
                  <div style={{ flex: '1' }}>
                    <PieChart ... />
     </div>

처음에는 첫 줄에,
<div style={{ display: 'flex', flex: "4 1" }}>
이렇게 주었었고 이건 안됐었다.
따로따로 4, 1 이렇게 주니까 정확히 4:1 칸을 차지하게 되었다!

참고 : https://heinafantasy.com/89

말풍선 모양 버튼

.LinkButton {
	width: 25%;
    height: 40px;
    background: #aac4ff;
    border-radius: 10px;
    }
.LinkButton::before {
    border-top: 5px solid transparent;
    border-right: 20px solid #aac4ff;
    border-bottom: 5px solid transparent;
    content: '';
    position: relative;
    top: -15px;
    left: -45px;
  }

근데 이게 사이즈가 줄어들면, relative 였던 위치가 변경됨

이렇게 되어버린다.
그래서 결국엔 빼기로...
미디어쿼리로 화면 width가 줄어 들면 이 부분을 빼는 식으로 했다.

react 조건문 이용하기

❗️❗️ 삼항연산자 사용 ❗️❗️

처음에 바보같이 당연하게 if부터 꺼내서 써버렸다.. ㅎ_ㅎ
코스에서 이부분은 분명히 배웠던 내용인데 ,
공부를 한 것과 이렇게 직접 써보는 것은 확실히 천지차이인듯.

자바스크립트에서 쓰던 if문은 컴포넌트의 return () 안, 즉 JSX 내에서는 사용할 수 없다!! 꼭 꼭 기억할 것 ㅠㅠ

❌ <div> if (조건) {statement} </div> ❌
⭕️ 조건 ? 조건이 참일때 실행할 코드 : 거짓일 때 실행할 코드 ⭕️

❌ 틀린 코드

   if({item.status} === PROGRESS) {
      <h2 className="Font">
         목표치에 도달하기까지{' '}
         <span className="Hilight">
            {Math.ceil(item.price / item.monthlyPayment)}개월
         </span>{' '}
         남았어요!
      </h2>
    } else {<h2 className="Font"> 목표치에 도달하였어요!</h2>}

⭕️ 고친 코드

	{item.status === 'PROGRESS' ? (
         <h2 className="Font">
             목표치에 도달하기까지{' '}
             <span className="Hilight">
                {Math.ceil(item.price / item.monthlyPayment)}개월
             </span>{' '}
             남았어요!
         </h2>
           ) : (
         <h2 className="Font"> 목표치에 도달하였어요!</h2>
           		)
     }

반응형 구현

나만 계속 반응형이 안돼서 애먹었다 ㅠㅠ
기본 반응형이 내장되어있는 mui로 리스트를 뽑을 걸 그랬나..
많이 고민했지만... 결국에는 부모의 부모를 찾아 width : 100% 를 주고나자
고정값의 600px이 줄어들기 시작 ㅠㅠ
다음부터는 조절 안된다고 무작정 padding, margin 주지말고
꼭 원인도 찾고 또 적용안되는 css 찾아 지워가면서
어디서 내려온 스타일인지 꼭 확인하면서 해야겠다.

여기에 줄어드는 당시 버튼 위치를 좀 아래로 내리기 위해
미디어 쿼리 사용

.LinkButton {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: center;
    margin: 54px 0 10px;
    width: 25%;
    height: 40px;
    background: #aac4ff;
    border-radius: 10px;
  }
  @media (max-width: 600px) {
    .LinkButton {
      margin: 70px 0 10px;
    }
  }

조금 더 깔끔해졌다 ㅎㅎ...

input number 타입 스크롤 단위조절

<input type="number" step="1000">

원래 스크롤 조절하면 1씩 올라갔었는데
이제 1000씩 올라간다..
돈인데 1씩 올라가는거 불편했는데 수정 완료!