Project - 일탈

작업기간
2021.07.19 - 2021.07.30

Front-end 3
Back-end 3

기술스택

• HTML
• CSS
• JavaScript
• React
• Styled-components
• Git

Project Tool

• Trello

내가 맡은 구현

• 메인페이지 카드컴포넌트 제작
• 카테고리 지역 필터링 기능
• 카테고리 가격 필터링 기능
• 카테고리 그룹 필터링 기능
• access token에 따른 public/private 구분

탈잉을 모티브로 프로젝트가 진행되었지만, 팀끼리 회의한 결과 주제를 바꿔서 탈잉이 가지고 있는 가장 중요한 기능인 튜터기능을 호스트로 바꾸어 여행/액티비티가 주제인 프로젝트로 진행하게 되었다.
중간에 모든게 바뀌고나서 기존에 메인페이지가 사라지고 카테고리와 카드리스트 페이지를 메인으로 삼고 프로젝트를 진행하게 되었다.

function Cards(props) {
  const { bgimg, title, price, name, nick, userImg } = props.card;
  const history = useHistory();
  
  const redirect = () => {
    history.push(`/products/public/${props.card.id}`);
  };

  return (
    <div>
      <Card>
        <BoxImg src={bgimg} alt="background" onClick={redirect} />
        <CardContainer>
          <Title>
            {title}
            <Price>₩{parseInt(price).toLocaleString()}원</Price>
          </Title>
          <ProfileBox>
            <SubBox>
              <Profile src={userImg} alt="profile" />
              <Name>{name}</Name>
              <Nick>{nick}</Nick>
            </SubBox>
          </ProfileBox>
        </CardContainer>
      </Card>
    </div>
  );
}

카드는 useHistory를 이용해 각 카드마다 데이터로 받아온 id로 넘어가게 만들어주었고 소수점 데이터로 받아온 가격이 정상적으로 노출될 수 있게 parseInt를 사용해주었다.

만들어준 Card 컴포넌트를 메인으로 쓰이는 카테고리 페이지에서 불러주고

 const getCards = () => {
    fetch(
      `${GET_MAIN_API}?${
        access_token ? 'private' : 'public'
      }${categoryId}&region=${state}&ordering=${
        price === '' ? 'price' : price
      }&group=${group}`,
    )
      .then(res => res.json())
      .then(data => setCards(data.message));
  };

fetch 함수를 통해 Id와 지역 그리고 가격의 오름차순 내림차순, 그룹 유무를 구별해주었다.

지역 필터링

const Regions = [
  { id: 1, value: '서울' },
  { id: 2, value: '경기도' },
  { id: 3, value: '강원도' },
  { id: 4, value: '경상도' },
  { id: 5, value: '충청도' },
  { id: 6, value: '전라도' },
  { id: 7, value: '제주도' },
];

const DropDownFilter = props => {
  const [region, setRegion] = useState([]);

  const regionDropdown = e => {
    setRegion(e.target.value);
    props.setState(e.target.value);
  };

  return (
    <div>
      <AreaInbox>
        <Area>지역</Area>
        <Select onChange={regionDropdown} value={region}>
          {Regions.map(item => (
            <Option key={item.id} value={item.key}>
              {item.value}
            </Option>
          ))}
        </Select>
      </AreaInbox>
    </div>
  );
};

가격 필터링

const RadioBtnFilter = ({ priceRadioBtn, radioValue }) => {
  return (
    <div>
      <PriceInbox>
        <Price>가격</Price>
        <RadioBtn>
          <Radio.Group onChange={priceRadioBtn} radioValue={radioValue}>
            <Radio value={'-price'}>높은 가격순</Radio>
            <Radio value={'price'}>낮은 가격순</Radio>
          </Radio.Group>
        </RadioBtn>
      </PriceInbox>
    </div>
  );
};

그룹 필터링

const SortBtnFilter = ({ sortBtn }) => {
  return (
    <div>
      <TypeInbox>
        <Type>종류</Type>
        <SortInbox>
          <Button onClick={sortBtn} value={0}>
            1인
          </Button>
          <Button onClick={sortBtn} value={1}>
            그룹
          </Button>
        </SortInbox>
      </TypeInbox>
    </div>
  );
};

필터링 기능을 구현해보고 싶어서 2차 때는 필터링을 구현하였다! 1차 프로젝트가 끝나고 바로 2차 프로젝트를 진행하며 팀원 뿐 아니라 모두가 체력적으로 많이 지쳐있는 상태였지만, 적극적으로 소통해주고 서로서로 챙겨주며 좋은 분위기에서 프로젝트를 마무리할 수 있었다.