이 PA 는 엘리스 기능중 하나인 과목 검색의 간소화된 버전을 구현하는 것입니다. 실제 페이지는 https://academy.elice.io/courses/all 에서 확인할 수 있습니다.
-
프로젝트와 관련해 학습을 진행했습니다.
-
프로젝트 구상 계획을 세웠습니다.
-
repo 생성
-
issues 작성
-
issues에 맞춰 branch 생성
-
code 작업
-
git push 후 git pull request
-
git merge (코드 리뷰와 approve는 개인 프로젝트였기 때문에 생략)
-
프로젝트 배포
-
-
프로젝트 구현 과정을 기간 내 한 곳까지 README.MD를 작성했습니다.
- sessionStorage를 이용했습니다. 각 chip별로 unique한 값인 name을 부여한 뒤 toggle switch처럼 checked할 경우(click해서 checked가 true일 경우) 배열에 name을 넣었습니다.(chip.tsx 참고)
- 배열을 토대로 해당 query 값을 정의한 뒤 배열값인 name을 key로 사용해 query 값을 가져왔습니다.(filterQuery.ts 참고)
- 오름차순으로 정렬한 뒤 join 함수를 사용해 &로 string 화 시켜 Router.push 했습니다.
- 이때 next의 next dynamic route를 이용했으며, query 값이 없을 경우도 고려해 [[...query]]를 사용했습니다.(Optional Catch-all Segments)
-
pagination
- 시간 안에 구현을 못해 제가 한 이전 프로젝트 중 작업한 pagination 코드 부분을 첨부합니다.
- 마감일이 끝난 이후에도 작업을 계속해 완성할 수 있도록 하겠습니다.
- 졸업 프로젝트로 작년 1학기 때 진행했으며, 기본적으로 1~10 까지의 페이지가 있으며, 1일때 왼쪽 화살표를 클릭할 경우 페이지가 이동되지 않도록 설정했습니다.(오른쪽도 마찬가지)
- react와 js, styled-components를 사용했습니다.
- 프로젝트 pagination 코드 링크
- 졸업 프로젝트 피그마 링크
// pagination 로직 부분
const changePage = (count) => {
if (page % 10 == 0) {
pageClick[9] = false;
} else {
pageClick[(page % 10) - 1] = false;
}
if (count % 10 == 0) {
pageClick[9] = true;
} else {
pageClick[(count % 10) - 1] = true;
}
console.log("count = ", count);
page[0] = count;
setPage([...page]);
setPageClick([...pageClick]);
console.log("page = ", page);
searchTag();
};
const nextPage = (direction) => {
if (direction == "right") {
for (let i = 0; i < 10; i++) {
pageNumbers[i] += 10;
}
setPageNumbers([...pageNumbers]);
} else {
if (pageNumbers[0] - 10 <= 0) {
setPageNumbers([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
} else {
for (let i = 0; i < 10; i++) {
pageNumbers[i] -= 10;
}
setPageNumbers([...pageNumbers]);
}
}
page[0] = pageNumbers[0];
setPage([...page]);
searchTag();
};// pagination css 부분
const Style = {
PageList: styled.div`
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 3vh 0;
`,
PageNum: styled.div`
display: flex;
flex-direction: row;
`,
Num: styled.div`
padding: 0 1vw;
`,
NextBtn: styled.button`
border: none;
background-color: transparent;
&:hover{
color: #81E768;
}
${({isselected}) =>
isselected ?`
color: #81E768;
font-weight: bold;
`
:`
color: #000000;
`
}
`
};,
<Style.PageList>
<Style.NextBtn onClick={() => nextPage("left")}><FontAwesomeIcon icon={faChevronLeft} color="#94E0AC" size="2x" /></Style.NextBtn>
<Style.PageNum>
{pageNumbers.map(number => {
return (
<Style.NextBtn key={number} isselected={number == page? 1: 0} onClick={() => changePage(number)}><Style.Num>{number}</Style.Num></Style.NextBtn>
)})
}
</Style.PageNum>
<Style.NextBtn onClick={() => nextPage("right")}><FontAwesomeIcon icon={faChevronRight} color="#94E0AC" size="2x" /></Style.NextBtn>
</Style.PageList>-
api 연결
- 시간 안에 구현을 못해 제가 한 이전 프로젝트 중 작업한 api 연결 작업 코드 부분을 첨부합니다.
- 마감일이 끝난 이후에도 작업을 계속해 완성할 수 있도록 하겠습니다.
- 부트캠프 중 진행한 프로젝트로 작년 하반기 때 진행했습니다.
- next 환경에서 scss를 사용했습니다.
- 프로젝트 링크
- 프로젝트 api 연결 작업 코드 링크
// 검색어를 통해 filtering 된 게시물을 가져오는 작업 코드
import { apiClient } from "@/lib/axios";
export const getSearchData = async (keyword: string) => {
try {
const { data } = await apiClient.get(`/api/search/all/${keyword}`);
return data;
} catch (e) {
if (e instanceof Error) throw new Error(e.message);
}
};
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent