프로젝트 구현(11) - 정산 리스트 컴포넌트

패스트캠퍼스 환급챌린지

29일차 화이띵

---

오늘은 정산 리스트 컴포넌트의 실제 구현과 Style 적용을 해보려 한다.

 

형태만 주석처리 해놓은 ExpenseMain의 LeftPane과 RightPane부분에,
목업을 짜놓은 대로 LeftPane에는 AddExpenseForm 컴포넌트를,
RightPane에는 ExpenseTable이라는 새로운 컴포넌트를 만들어서 구현해 주었다.

 

먼저 RightPane에 들어갈, 화면에 지출내역을 출력해주는 컴포넌트인 ExpenseTable을 보겠다.

import { Table } from "react-bootstrap"
import { useRecoilValue } from "recoil"
import styled from "styled-components"
import { expensesState } from "../state/expenses"
import { OverlayWrapper } from "./shared/OverlayWrapper"

export const ExpenseTable = () => {
  const expenses = useRecoilValue(expensesState)
  return (
    <OverlayWrapper minHeight={"73vh"}>
      <Table data-testid="expenseList" borderless hover responsive>
        <StyledThead>
          <tr>
            <th>날짜</th>
            <th>내용</th>
            <th>결제자</th>
            <th>금액</th>
          </tr>
        </StyledThead>
        <StyledBody>
        {expenses.map(({date, desc, amount, payer}, idx) => (
          <tr key={`expense-${idx}`}>
            <td>{date}</td>
            <td>{desc}</td>
            <td>{payer}</td>
            <td>{parseInt(amount)} 원</td>
          </tr>
        ))}
        </StyledBody>
      </Table>
    </OverlayWrapper>
  )
}

const StyledThead = styled.thead`
  color: #6B3DA6;
  text-align: center;
  font-weight: 700;
  font-size: 24px;
  line-height: 29px;
  th {
    padding: 20px 8px;
  }
`

const StyledBody = styled.tbody`
  td {
    font-weight: 400;
    font-size: 24px;
    line-height: 59px;
  }
`

OverlayWrapper 컴포넌트를 활용해 주었고, Styled-component를 활용하였다.

---

다음은 정산 리스트 메인화면인 ExpenseMain.jsx 이다.

import { Col, Container, Row } from "react-bootstrap"
import { useRecoilValue } from "recoil"
import styled from "styled-components"
import { AddExpenseForm } from "./AddExpenseForm"
import { ExpenseTable } from "./ExpenseTable"
import { groupNameState } from "../state/groupName"

export const ExpenseMain = () => {
  return (
    <Container fluid>
      <Row>
        <Col xs={12} sm={5} md={4}>
          <LeftPane />
        </Col>
        <Col>
          <RightPane />
        </Col>
      </Row>
    </Container>
  )
}

const LeftPane = () => (
  <Container>
    <AddExpenseForm />
      {/* TODO: 정산 결과 컴포넌트 렌더링 */}
  </Container>
)

const RightPane = () => {
  const groupName = useRecoilValue(groupNameState)
  return (
    <StyledContainer>
      <Row>
        <StyledGroupName>{groupName || '그룹 이름'}</StyledGroupName>
      </Row>
      <Row>
        <ExpenseTable />
      </Row>
    </StyledContainer>
  )
}

const StyledGroupName = styled.h2`
  margin-bottom: 80px;
  font-weight: 700;
  font-size: 48px;
  line-height: 48px;
  text-align: center;
`

const StyledContainer = styled(Container)`
  padding: 100px 31px 100px 31px;
`

LeftPane에는 비용 입력 컴포넌트와, 다음에 구현할 정산 결과 컴포넌트가 들어가게 되고,
RightPane에는 아까 구현한 ExpenseTable 컴포넌트가 들어가게 된다.

 

완성예시 이미지

---

29일차 인증

---

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

 

http://bit.ly/3Y34pE0

패스트캠퍼스 [직장인 실무교육]