Week 2-2. 광고현황 대시보드 및 광고관리 서비스

1. 팀 소개 👫
2. 프로젝트 소개 🚀
3. 기술 스택 🛠
4. 구현 기능 📍
5. 프로젝트 구조 🗂
6. Best Practice 선정과정👩‍👦‍👦
7. 프로젝트 설치 및 실행 ✨

• 🌍 배포 링크
• 📄 팀 노션

1. 팀 소개 👫

• 이빛나 (팀장)
• 모상빈
• 김진석
• 박우빈
• 이의연
• 조성호
• 전대원

2. 프로젝트 소개 🚀

• 개요 : 원티드 프론트엔드 프리온보딩 7기 2팀 과제 2-2 중 Best Practice
• 주제 : 광고현황 대시보드 및 광고관리 서비스
• 기간 : 2022.11.05 ~ 2022.11.06

3. 기술 스택 🛠

• React
• redux-toolkit
• Recharts
• Styled-Components

4. 구현 기능 📍

• 구현사항
  • 대시보드
    • datePicker, 기간 필터
    • 통합광고 현황
    • 차트, 차트필터(지표별)
  • 광고관리
    • 광고조회, 필터
  • 페이지 이동시 상태유지

5. 프로젝트 구조 🗂

src
├── components  // 공용 컴포넌트
├── constants
├── hooks
├── pages // 페이지 및 페이지별 컴포넌트
├── store // 리덕스 툴킷 전역상태관리
└── utils // format 함수

6. Best Practice 선정과정👩‍👦‍👦

DatePicker

// src/pages/Dashboard/DatePicker

const DatePicker = () => {
  const dispatch = useDispatch();
  const { startDate, endDate } = useSelector((state) => state.period); //전역상태
  const [startDateValue, handleStartValueChange] = useInput(startDate); //컴포넌트state
  const [endDateValue, handleEndValueChange] = useInput(endDate); //컴포넌트state
  const [isOpen, setIsOpen] = useState(false);
  const [isValidPeriod, setIsValidPeriod] = useState(false);

  useEffect(() => {
    setIsValidPeriod(
      startDateValue && endDateValue && startDateValue <= endDateValue
    );
  }, [startDateValue, endDateValue]);

  const handleToggle = () => {
    setIsOpen(!isOpen);
  };

  const handleClickDateSet = () => {
    const payload = { startDate: startDateValue, endDate: endDateValue };
    dispatch(changePeriod(payload));
    setIsOpen(false);
  };
  return (
    <Div>
      <div className="period-and-button">
        <div>{`${startDate} ~ ${endDate}`}</div>
        <button onClick={handleToggle}>{isOpen ? "닫기" : "열기"}</button>
      </div>
      {isOpen && (
        <div className="picker">
          <input
            type="date"
            value={startDateValue}
            onChange={handleStartValueChange}
          />
          <span>~</span>
          <input
            type="date"
            value={endDateValue}
            onChange={handleEndValueChange}
          />
          <button onClick={handleClickDateSet} disabled={!isValidPeriod}>
            go
          </button>
        </div>
      )}
    </Div>
  );
};

• 캘린더에서 날짜를 고르면 컴포넌트의 state가 변경됩니다.
• 날짜 설정 후 go 버튼을 누르면 periodSlice(리덕스)로 기간이 전달됩니다.
• 전역상태에 설정된 날짜데이터가 화면에 표시됩니다.

통합 데이터 표시

// src/pages/Dashboard/MetaList

const MetaList = () => {
  const dispatch = useDispatch();
  const { filteredData } = useSelector((state) => state.trendData);

  const [metaData, setMetaData] = useState({});

  useEffect(() => {
    dispatch(getTrendData());
  }, []);

  useEffect(() => {
    const metaObj = {
      클릭수: 0,
      광고비: 0,
      전환수: 0,
      노출수: 0,
      매출: 0,
      ROAS: 0,
    };
    filteredData.forEach((data) => {
      metaObj.클릭수 += data.click;
      metaObj.광고비 += data.cost;
      metaObj.전환수 += data.conv;
      metaObj.노출수 += (data.click / data.ctr) * 100;
      metaObj.매출 += (data.roas * data.cost) / 100;
    });
    metaObj.ROAS = (metaObj.매출 / metaObj.광고비) * 100;
    setMetaData({ ...metaObj });
  }, [filteredData]);

  return (
    <Ul>
      {Object.entries(metaData).map(([key, value]) => (
        <MetaListItem key={key} objectKey={key} value={value} />
      ))}
    </Ul>
  );
};

• getTrendData로 데이터를 받아와 trendDataSlice로 디스패치합니다.
• periodSlice에 설정된 기간에따라 trendDataSlice에 필터링된 데이터가 저장되고 출력됩니다.

7. 프로젝트 설치 및 실행 ✨

1. Git Clone

$ git clone git@github.com:pre-onboading-2team/pre-onboarding-7th-2-2-2.git

2. 프로젝트 패키지 설치

$ npm install

3. 프로젝트 실행

$ npm start