Project-日常

勤務期間
2021.07.19 - 2021.07.30
Front-end 3
Back-end 3
テクノロジースタック

HTML

CSS

JavaScript

React

Styled-components

Git

Project Tool

Trello

私が担当する実施

ホームカードコンポーネントリリース

カテゴリ領域フィルタ機能

カテゴリ価格フィルタ機能

カテゴリグループフィルタ機能

アクセストークンで区切られたパブリック/プライベート

オフショアをテーマにプロジェクトを行ったが、チーム間の会議の結果テーマが変わり、オフショアが持つ最も重要な機能であるレギュレータ機能をホストに変更し、旅行/アクティビティをテーマにプロジェクトを行った.
途中ですべてが変わり、既存のホームページが消え、カテゴリやカードリストページを中心にプロジェクトが行われます.

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つ目のプロジェクトを行い、チームメンバーだけでなく、全員の体力が疲れていましたが、積極的にコミュニケーションをとり、お互いに配慮し合い、良い雰囲気でプロジェクトを完成させました.