[ToyProject] 서포터즈 선정 어드민 사이트

신청자들의 정보를 보고 관리자가 신청자중 선정자를 골라 선정 및 취소하는 어드민 서비스입니다.

⭐️ 개요

프로젝트명 : im-celevrity (서포터즈 모집 어드민 서비스)
타겟유저(가상) : 서포터즈를 희망하는 신청자들을 선별할 관리자
분류 : 개인(Toy)프로젝트
작업 기간 : 1 weak
사용 툴 : React, SCSS, json-server

⭐️ 주요기능

1. 신청자 선정/취소

1-1. 구현 기능 🌈

• 최대 3명까지 선택 가능 -> 그이상은 선택 불가
• 선정 및 취소 완료후 해당 목록으로 이동
• 체크박스 선택시 하단 버튼에 선택명수 보여지도록 구현

1-2. 기능별 코드분석 ✏️

  const [isChecked, setIsChecked] = useState(false); // 체크여부
  const [checkedItems, setCheckedItems] = useState(new Set()); //체크된 체크박스의 id값을 저장할곳 
  const [checkedCnt, setCheckedCnt] = useState(0); // 현재 체크수
  const [btnActive, setBtnActive] = useState(false); //하단 버튼 활성/비활성화여부

// 체크박스 체크 시 onClick 되는 함수
const checkInputBox = ({target}) => {
    setIsChecked(!isChecked); // 하단 선정하기, 취소하기 버튼 활성화 여부 판별
    checkedItem(target.id, target.checked); // ⭐️고유id값과 체크여부 저장 함수
    if (checkedItems.size > 0) {
      setBtnActive(true);
      setCheckedCnt(checkedItems.size);
    } else {
      setBtnActive(!btnActive)
    }
    //3이상 체크 못하도록
    if (checkedCnt == 3 || checkedCnt >3) {
      target.checked = false;
    }
  };

  //⭐️고유id값과 체크여부 저장 함수
  const checkedItem = (id, isChecked) => {
    if (isChecked && checkedItems.size < 3) {
      //체크되어 있지 않고
      checkedItems.add(id);
      setCheckedCnt(checkedCnt + 1);
      setCheckedItems(checkedItems);
    } else if (!isChecked && checkedItems.has(id)) {
      //체크되어있고 해당 id값이 저장되있는경우
      setCheckedCnt(checkedCnt - 1);
      checkedItems.delete(id);
      setCheckedItems(checkedItems);
    }
  };

2. 모달팝업

2-1. 구현 기능 🌈

• 브랜드이력 모달
  
• 공통 모달(신청자 선정,취소 확인모달)
  

2-2. 기능별 코드분석 ✏️

  const [modalOpenC, setModalOpenC] = useState(false); //공통모달 
  const [modalOpenD, setModalOpenD] = useState(false); //브랜드이력 모달
  const [modalContent, setModalContent] = useState(""); // 신청인지 취소인지 구분(select/deleate)
  const [userId, setUserId] = useState(null);
  const [userName, setUserName] = useState(null);
  const [userNickName, setUserNickName] = useState(null);

//공통 모달
<CommonModal
    open={modalOpenC}
    close={(e) => {
      location.reload(); 
    }}
    userCnt={checkedItems.size}
    content={modalContent}
  />

//브랜드이력 모달
<DetailModal
    open={modalOpenD}
    close={(e) => {
      setModalOpenD(false);
    }}
    userId={userId}
    userName={userName}
    userNickName={userNickName}
    activedA={activedA}
  />

3. 데이터 처리

3-1.받아오는데이터

  {
      "id": 1,
      "isBookmark": false,
      "isChosen": "false",
      "grade": "d",
      "name": "현숙",
      "nickName": "대입구",
      "yearOfBirth": 1997,
      "gender": "Female",
      "region": "서울",
      "category": "숙소/핫플레이스",
      "message": "안녕하세요~ 인스타 팔로워 10만 보유하고있습니다. 사진 및 동영상 리뷰도 자신있어요!",
      "recommend": 13,
      "today": 10305,
      "cancelRate": 0,
      "snsUrl": "https://velog.io/@devcmkim",
      "brandRequestCounts": 1
    },

3-2. 뿌려주는 데이터

 // 리뷰어 등급
  const returnGrade = (prop) => {
    switch (prop) {
      case "a":
        return "브론즈";
      case "b":
        return "실버";
      case "c":
        return "골드";
      case "d":
        return "다이아";
      case "z":
        return "플레티넘";
      default:
    }
  };

  // 리뷰어 나이 계산
  const today = new Date();
  const returnAge = (prop) => {
    return today.getFullYear() - prop + 1;
  };

// 성별
<div>{val.gender === "Female" ? "여" : "남"}</div>

// 평균투데이 숫자형 변환
<div>{Number(val.today).toLocaleString()}</div>

4. 그외 화면 효과

• 신청/선정자 목록 내 전략 텍스트내용 드롭다운 및 더보기 효과
• 신청/선정자 목록 내 마우스호버 효과
• 신청/선정자 목록 내 스크롤시 스티키 헤더 구현

⭐️ 배포

전 게시물 내용인 heroku 를 사용하였습니다.
👉 heroku 사용기
👉 바로보기

⭐️ 개선할점(TODO)

• 상태관리기능 추가 (redux 적용)
• 모달 재사용화 (현재 컴포넌트 두개로 나눠져있어서 하나로 통일)