Intro 😊

기능이 꽤 많이 들어갔던 페이지입니다.
거의 모든 기능은 백엔드에서 처리해줘서 걱정했던 페이지였지만 생각보다 수월하게 작업할 수 있었습니다.
하지만 한페이지에 4개씩 2줄로 총 8개의 페이지가 나오게 구현하는 게 많이 어려웠습니다ㅠㅠ

게시판 📔

게시글 목록을 볼 수 있는 페이지입니다.

• 날짜 선택

  시작날짜와 종료날짜를 통해 해당하는 게시글을 필터링할 수 있습니다.
  시작날짜는 2001/03/02 (제 생일😊), 종료날짜는 현재 날짜로 디폴트 값을 설정해주었습니다.

  const today = dayjs();
  const [selectedStartDate, setSelectedStartDate] = useState(dayjs("2001-03-02"));
  const [selectedEndDate, setSelectedEndDate] = useState(dayjs());

                <LocalizationProvider dateAdapter={AdapterDayjs}>
                  <DatePicker
                    format="YYYY/MM/DD"
                    label="시작 날짜"
                    value={selectedStartDate}
                    onChange={(newValue) => setSelectedStartDate(newValue)}
                  />
                  <Stack>~</Stack>
                  <DatePicker
                    format="YYYY/MM/DD"
                    label="종료 날짜"
                    value={selectedEndDate}
                    onChange={(newValue) => setSelectedEndDate(newValue)}
                  />
                </LocalizationProvider>

• 최신순 & 좋아요순 스위치

  스위치 off 상태일때는 최신순으로 정렬되며, on일때는 게시글의 좋아요순으로 정렬됩니다.

  const [sortByDate, setSortByDate] = useState(false);
    const handleSwitchChange = () => {
    setSortByDate((prevSortByDate) => !prevSortByDate);
  };

              <Stack
                direction="row"
                alignItems="center"
                justifyContent="center"
              >
                <Stack fontSize="12px">최신순</Stack>
                <Switch
                  checked={sortByDate}
                  onChange={handleSwitchChange}
                ></Switch>
                <Stack fontSize="12px">좋아요 순</Stack>
              </Stack>

• 검색 기능

  Autocomplete을 활용하여 글 제목, 글 내용, 작성자, 태그를 선택하여 검색을 할 수 있습니다.
  디폴트 값을 글 제목으로 두었으며 글쓰기 버튼을 누를 경우 글 작성 페이지로 하게끔 navigate를 설정해주었습니다.

  const [selectedTitle, setSelectedTitle] = useState("글 제목");

    if (selectedTitle === "글 제목") {
      setType("title");
    } else if (selectedTitle === "글 내용") {
      setType("content");
    } else if (selectedTitle === "작성자") {
      setType("writer");
    } else if (selectedTitle === "태그") {
      setType("tag");
    }

            <Stack direction="row" spacing={1}>
              <Stack>
                <Autocomplete
                  id="title-autocomplete"
                  options={titleOptions}
                  value={selectedTitle}
                  onChange={(event, newValue) => setSelectedTitle(newValue)}
                  renderInput={(params) => <TextField {...params} />}
                />
              </Stack>
              <Stack>
                <TextField
                  label="검색"
                  value={searchQuery}
                  onChange={handleSearchChange}
                  InputProps={{
                    endAdornment: (
                      <InputAdornment position="end">
                        <img
                          src={SearchIcon}
                          alt="search"
                          style={{ cursor: "pointer" }}
                        />
                      </InputAdornment>
                    ),
                  }}
                />
              </Stack>
              <Stack
                bgcolor="#FF8181"
                sx={{
                  cursor: "pointer",
                  color: "white",
                  borderRadius: "10px",
                  alignItems: "center",
                  justifyContent: "center",
                  width: "35%",
                }}
                onClick={() => {
                  navigate("/Write");
                }}
              >
                <Stack fontSize="20px">글쓰기</Stack>
              </Stack>
            </Stack>

• 고정글 표시

  고정된 게시글과 일반 게시글에 차별을 두기 위해서 고정핀이 렌더링되도록 구현했습니다.
  isPinned값이 1일 경우 고정이라는 것을 의미하는데, 이 기능은 관리자 권한을 가진 사용자만 가능하게 백엔드에서 처리해 주셨습니다!

                      {content.isPinned === 1 && (
                        <img
                          src={PushPin}
                          alt="PushPin"
                          style={{
                            position: "absolute",
                            top: "-10%", 
                            left: "10px", 
                            zIndex: 2, 
                          }}
                        />
                      )}

• 태그

  태그같은 경우엔 게시글 작성할 당시 개수에 제한 없이 무한으로 사용 가능합니다.
  그렇기 때문에 게시판에서는 3개 이상의 태그가 존재할 경우 3개부턴 ( . . . )으로 나오도록 구현했습니다.

                      {content.postTag.length > 2 && (
                        <Stack
                          sx={{
                            margin: "5px",
                            color: "#FF8181",
                            border: "1px solid #FF8181",
                            borderRadius: "15px",
                            width: "fit-content",
                            height: "25px",
                            justifyContent: "center",
                          }}
                        >
                          <Stack
                            alignItems="center"
                            fontSize="13px"
                            margin="10px"
                          >
                            ...
                          </Stack>
                        </Stack>
                      )}