이제 진짜 끝을 향해 달려가고 있다!
제출을 끝내고 홈페이지에 몇몇 남아있는 오류들을 조원들과 함께 마무리하면서
끝을 맞이하고 있다!
목표 진척도 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씩 올라가는거 불편했는데 수정 완료!
