1월 3일 (월) Final Project [4주 프로젝트] (설문조사, 랜딩페이지, contents page API 의논)

남이섬·2022년 1월 3일

4주프로젝트 TIL allforyou

랜딩페이지

스크롤 한번만해도 화면에 맞게 이동된다
스크롤시 번호 색이 바뀐다

참고 사이트

https://www.4por4.pt/
http://autumn.dothome.co.kr/#
http://zezihi.com/

category 중복 (배열)

첫 번째는 해당 데이터에 대한 별도의 테이블을 구성하고 쿼리문의 조인을 통해 DTO를 구성하는 방법이다.
두 번째는 그냥 배열 형태의 데이터를 통째로 String으로 변환 후 DB에 저장하고 꺼내올 때는 String을 파싱하여 List에 담아서 보내는 것이다.

contents page

아시오스 get으로 서버에 모든 콘텐츠를 요청한다
받아온 콘텐츠를 상태에 저장한다
저장된 상태를 지금 더미를 대체 한다
front에서 필터해서 필터된 조건문으로 ui 가 변경 된다
즉 요청은 한번에 받아오고 상태에 저장한다음에 그걸 조건문으로 ui를 바꾼다

데이터 가져오기

프론트에서 필터하기

const [select_1, setSelect_1] = useState("ALL");
  const [select_2, setSelect_2] = useState("ALL");

  console.log("select_1", select_1);

  const select_1_category = dummy2.filter((el) => {
    let category = el.category;
    for (let i = 0; i < category.length; i++) {
      if (category[i] === select_1) {
        console.log("카테고리", category[i]);
        return category[i];
      } else if (select_1 === "ALL") {
        return category[i];
      }
    }
  });

  console.log("select_1_contents", select_1_category);

  const select_2_contents = select_1_category.filter((el) => {
    if (select_2 === "ALL") {
      return el;
    } else if (el.type === select_2) {
      return el.type === select_2;
    }
  });

  console.log("select_2_contents", select_2_contents);

  const handleSelect_1 = (select) => {
    console.log("category", select.target.value);
    setSelect_1(select.target.value);
  };

  const handleSelect_2 = (select) => {
    setSelect_2(select.target.value);
  };

서버에서 필터해서 가져오기

export async function getStandardGallery(tagClicked, sortValue) {
  try {
    let res = await axios.get(
      `${process.env.REACT_APP_DEPOLOY_SERVER_URI}/exhibition/1` //파라미터 요청(standard) & 승인이 된 것만(status=1)
    );

    let result = res.data.data.map((el) => {
      return { ...el, genre_hashtags: JSON.parse(el.genre_hashtags) };
    }); // 배열 파싱하고
    if (tagClicked === "전체") {
      if (sortValue === "최신순") {
        return result.sort(
          (a, b) => new Date(b.createdAt) - new Date(a.createdAt)
        );
      } else {
        //전시마감일순
        return result.sort(
          (a, b) => new Date(a.end_date) - new Date(b.end_date)
        );
      }
    } else {
      //태그 필터링

      result = result.filter((el) => el.genre_hashtags.includes(tagClicked));
      if (sortValue === "최신순") {
        return result.sort(
          (a, b) => new Date(b.createdAt) - new Date(a.createdAt)
        );
      } else {
        //전시마감일순
        return result.sort(
          (a, b) => new Date(a.end_date) - new Date(b.end_date)
        );
      }
    }
  } catch (err) {
    return console.log(err);
  }
}

export async function getPremiumGallery(tagClicked, sortValue) {
  try {
    let res = await axios.get(
      `${process.env.REACT_APP_DEPOLOY_SERVER_URI}/exhibition/2` //파라미터 요청(standard) & 승인이 된 것만(status=1)
    );

    let result = res.data.data.map((el) => {
      return { ...el, genre_hashtags: JSON.parse(el.genre_hashtags) };
    }); // 배열 파싱하고
    if (tagClicked === "전체") {
      if (sortValue === "최신순") {
        return result.sort(
          (a, b) => new Date(b.createdAt) - new Date(a.createdAt)
        );
      } else {
        //전시마감일순
        return result.sort(
          (a, b) => new Date(a.end_date) - new Date(b.end_date)
        );
      }
    } else {
      //태그 필터링
      result = result.filter((el) => el.genre_hashtags.includes(tagClicked));
      if (sortValue === "최신순") {
        return result.sort(
          (a, b) => new Date(b.createdAt) - new Date(a.createdAt)
        );
      } else {
        //전시마감일순
        return result.sort(
          (a, b) => new Date(a.end_date) - new Date(b.end_date)
        );
      }
    }
  } catch (err) {
    return console.log(err);
  }
}

axios

  const contentstList = () => {
    axios
      .get(`${process.env.REACT_APP_SERVER_URL}/content/${select_1}/${select_2}`, {
        headers: {
          Authorization: `Bearer ${accessToken}`,
        },
        withCredentials: true,
      })
      .then((data) => {
        const foodInfo = data.data.data.foodInfo;
        setProduct(foodInfo);
      });
  };