[PiaSpace] 기업협업 Project
- oneButton 정렬
const sortedUsersData = key => {
if (sortKey === key.sort) {
ascOrder = !ascOrder;
} else {
sortKey = key.sort;
ascOrder = true;
}
let sortStr = sortKey + (ascOrder ? '_ascending' : '_descending');
console.log(sortStr);
setSortString(sortStr);
};
sortedUsersData 함수가 호출 될 때 마다 백엔드로 nickname_ascending, nickname_descending 등으로 값이 바뀌면서 넘어감.
- 컴포넌트 재 사용
const [currentClass, setCurrentClass] = useState(null);
<div className="seriesManage" onClick={e => clickHandler(e)}>
시리즈 관리
</div>
const clickHandler = e => {
setCurrentClass(e.target.className);
};
<div className="userSeriesTableContent">
{currentClass ? USER_SERIES_TABLE[currentClass] : <UserSeriesTable />}
</div>
const MEMBER_DATA_TITLE = [{ title: '회원' }];
const MEMBER_FILTER_SEARCH_DATA = [
{ id: 1, filterData: '회원유형(전체)' },
{ id: 2, filterData: 'Google' },
{ id: 3, filterData: 'Pia' },
{ id: 4, filterData: 'Naver' },
{ id: 6, filterData: 'KaKao' },
{ id: 7, filterData: '구분(전체)' },
{ id: 8, filterData: '관리자' },
{ id: 9, filterData: '무료회원' },
{ id: 10, filterData: '유료회원' },
{ id: 11, filterData: '스트리밍 구독(전체)' },
{ id: 12, filterData: 'True' },
{ id: 13, filterData: 'False' },
{ id: 14, filterData: '아이디' },
{ id: 15, filterData: '닉네임' },
{ id: 16, filterData: '이메일' },
{ id: 17, filterData: '연락처' },
];
const MEMBER_DATA_TABLE_TITLE = [
{ id: 1, title: 'No.' },
{ id: 2, title: '회원유형' },
{ id: 3, title: '아이디' },
{ id: 4, title: '닉네임', sort: 'nickname' },
{ id: 5, title: '구분' },
{ id: 6, title: '스트리밍 구독' },
{ id: 7, title: '라이브클리닉 코스', sort: 'live_clinic_course' },
{ id: 8, title: '라이브클리닉 멘토링', sort: 'live_clinic_mentoring' },
{ id: 9, title: '결제', sort: 'total_payment' },
{ id: 10, title: '상태' },
{ id: 11, title: '최종 로그인', sort: 'last_login_date' },
{ id: 12, title: '가입일시', sort: 'sign_up_date' },
];
const USER_SERIES_TABLE = {
userManage: (
<UserSeriesTable
title={MEMBER_DATA_TITLE}
tableTitleData={MEMBER_DATA_TABLE_TITLE}
filterSearch={MEMBER_FILTER_SEARCH_DATA}
/>
),
seriesManage: (
<UserSeriesTable
title={SERIES_DATA_TITLE}
tableTitleData={SERIES_DATA_TABLE_TITLE}
/>
),
};
메뉴바와 컴포넌트 재사용을 복합적으로 적용
처음 currentClass값이 없을 때는 <UserSeriesTable />
이 호출
clickHandler함수가 실행됨에 따라 currentClass값이 생기면 해당하는 컴포넌트가 props와 함께 호출됨.
- 중복 Pagination
const updateOffset = buttonIndex => {
setPage(buttonIndex);
};
const listFilterLimit = e => {
setLimit(e.target.value);
};
<select className="courseSelector6" onChange={listFilterLimit}>
{arrNum.map((com, idx) => (
<option value={com} key={idx}>
{com}개
</option>
))}
</select>
<div className="userSeriesTableItems">
<UserSeriesContent users={users} />
<Buttons updateOffset={updateOffset} />
</div>
const [page, setPage] = useState(0);
const prevButton = () => {
if (page >= 5) {
setPage(page - 5);
}
};
const nextButton = () => {
setPage(page + 5);
};
<div className="pageBtn">
<button onClick={() => prevButton()}>{'<'}</button>
<button onClick={() => updateOffset(0 + page)}>{1 + page}</button>
<button onClick={() => updateOffset(1 + page)}>{2 + page}</button>
<button onClick={() => updateOffset(2 + page)}>{3 + page}</button>
<button onClick={() => updateOffset(3 + page)}>{4 + page}</button>
<button onClick={() => updateOffset(4 + page)}>{5 + page}</button>
<button onClick={() => nextButton()}>{'>'}</button>
</div>
listFilterLimit함수를 통해 10, 20의 limit값 선정
updateOffset함수 실행을 통해 page값 1, 2, 3, 4, 5를
백 엔드로 넘겨줌.
- 필터 기능
const typeFilter = e => {
setPlatform(e.target.value);
};
const userTypeFilter = e => {
setUserType(e.target.value);
};
const subscriptionFilter = e => {
setSubscriptionPlan(e.target.value);
};
<select
className="userSeriesTableFilterBoxOne"
onChange={typeFilter}
>
<select
className="userSeriesTableFilterBoxTwo"
onChange={userTypeFilter}
>
<select
className="userSeriesTableFilterBoxThree"
onChange={subscriptionFilter}
>
회원 유형, 구분(관리자, 유료 회원), 구독 여부에 따라 필터 기능 구현.
- 검색 기능
const searchBoxFilter = e => {
setSearchBoxLock(e.target.value);
};
const updateUserInput = e => {
let userInput = e.target.value;
setSearchUsersData(userInput);
};
<select
className="userSeriesTableSearchBoxOne" onChange={searchBoxFilter}
>
<SearchBox handleChange={updateUserInput} />
필터를 통해 닉네임, 아이디 등 검색할 수 있는 카테고리 제한을 줌.
updateUserInput함수를 통해 입력 창에 검색할 값 입력.
Author And Source
이 문제에 관하여([PiaSpace] 기업협업 Project), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@dudgus1670/기업협업저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)