// 사진에 대한 정보 Default object
export const defaultPhotolist = {
  id: "",
  photo: {
    creatorId: "",
    userNickname: "",
    createdAt: "",
    keyword1: "",
    keyword2: "",
    keyword3: "",
    dateTime: 0,
    isEdit: false,
    fileURL: "",
  },
};

const Photos = () => {
  const isLoggedIn = useAppSelector((state) => state.user.isLoggedIn);
  const user = useAppSelector((state) => state.user.uid);
  const data = useAppSelector((state) => state.photos.photoArray);

  const [openEditorModal, setOpenEditorModal] = useState(false);
  const [isNewPost, setIsNewPost] = useState(false);

  const [searchKeyword, setSearchKeyword] = useState("");
  const [photoFilter, setPhotoFilter] = useState("all");

  ...

  // 키워드 검색
  const filterSearchKeyword = (item: PhotoListItems) => {
   let getKeyword =
      item.photo.keyword1.includes(searchKeyword) ||
      item.photo.keyword2.includes(searchKeyword) ||
      item.photo.keyword3.includes(searchKeyword);
   return getKeyword;
  };

  // Filter (모든사진/내가 업로드한 사진)
  const getPhotoFilter = () => {
  const photoByButton =
    photoFilter === "all"
      ? data
      : data.filter((item) => item.photo.creatorId === user);

  const getPhotos =
    searchKeyword === ""
      ? photoByButton
      : photoByButton.filter((item) => filterSearchKeyword(item));

    return getPhotos;
  };

return (
    <Card>
      <PhotoHeader openEditorModal={openEditorModal}>
        <h3>나의 베스트컷을 기록하고, 공유해 보세요 📸</h3>
        <Input
          type="text"
          onChange={(e) => setSearchKeyword(e.target.value)}
          placeholder="키워드로 검색하세요 :)"
	  ...
        />
        <ButtonBox isModal={openEditorModal}>
          <Button
            type="button"
            value="all"
            onClick={(e: React.MouseEvent<HTMLButtonElement>) =>
              setPhotoFilter((e.target as HTMLButtonElement).value)
            }
           ...
          >
            All
          </Button>
          <Button
            type="button"
            value="best-shot"
            onClick={(e: React.MouseEvent<HTMLButtonElement>) =>
              setPhotoFilter((e.target as HTMLButtonElement).value)
            }
           ...
          >
            나의 베스트 컷📸
          </Button>
          <Button
            type="button"
            value="write"
            onClick={showModalHandler}
           ...
          >
            기록하고 공유하기🖍
          </Button>
        </ButtonBox>
        // 사진 업로드 Editor 모달창 열기 (새 글/수정)
        {openEditorModal && (
          <PhotoEditorModal
            targetPhoto={defaultPhotolist}
            setOpenEditorModal={setOpenEditorModal}
            setIsNewPost={setIsNewPost}
          />
        )}
      </PhotoHeader>
      {data.length !== 0 ? (
        <PhotoList data={getPhotoFilter()} isNewPost={isNewPost} />
      ) : (
	// 사진 데이터가 없을 때
        <NoPhotoMessage>
          <h4>아직 공유된 사진이 없습니다 :(</h4>
          <FcStackOfPhotos size="100" />
        </NoPhotoMessage>
      )}
    </Card>
  );
};