Intro
얼리슬로스 라는 포켓서베이 사업을 중점적으로 하는 회사에서 프론트엔드로 약 4주간 인턴을 진행하였다. 가까운 미래에 상용화가 될 예정이라고 전달받은 포켓서베이몰 인앱브라우저 구현을 맡아 프론트엔드 2명(자신포함) 백엔드 2명이 프로젝트를 진행하였고, 진행과정에서 기술적으로 배웠던 내용들 중심으로 남겨보려 한다.
💻 포켓서베이몰 웹 구현
- 자사 포인트로 쿠폰을 구입할 수 있는 인앱브라우저 웹사이트를 구현
🎥 결과물
👨👩👧👦 팀원
- Front-end: 2명
- Back-end: 2명
📅 개발 기간
- 기간: 2020.01.11 ~ 2020.02.15 (약 4주)
🧑💻 적용 기술
React.js(Functional), React-router, Hooks, redux-saga, styled components
💁♀️ 내가 구현한 기능
메인 페이지
- 고정된 네비게이션바를 포함한 메인페이지 레이아웃을 담당
- 모든 데이터는 리덕스사가를 통해 적용
- 모든 레이아웃은 반응형 웹 디자인을 적용
사이드메뉴
- 애니메이션 효과를 통해 사이드메뉴 컴포넌트가 좌측에서 자연스럽게 열리고 닫히도록 구현
/* SideMenu.jsx */
const SideMenuWrapper = styled.div`
...
transform: translateX(-100%);
${(props) =>
props.sideMenuStatus !== null &&
css`
animation: 0.2s ${(props) => (props.sideMenuStatus ? "showMenu" : "hideMenu")} forwards;
`}
@keyframes showMenu {
0% {
transform: translate(-100%, 0);
}
100% {
transform: translate(0, 0);
}
}
@keyframes hideMenu {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(-100%, 0);
}
}카테고리 페이지
- 메인페이지에서 선택한 카테고리가 서브네비게이션에 반영되고, 그에 맞는 하위 데이터를 불러오도록 구현
/* SubNav.jsx */
...
const [focusedCategory, setFocusedCategory] = useState(location.state.id);
const subNavToCategories = (id, name) => {
history.push({
pathname: `/categories/${id}`,
state: { id: id, name: name },
});
setFocusedCategory(id);
};
...
return (
<>
{subNavValueMapping?.map((title, idx) => {
return (
<Categories onClick={() => subNavToCategories(title.id, title.name)}>
<SubMenu key={idx} underLine={focusedCategory === title.id}>
{title.name}
</SubMenu>
</Categories>
);
})}
</>
);
const SubMenu = styled.button`
...
border-bottom: 0.15em solid ${(props) => (props.underLine ? ({ theme }) => theme.color.esYellow : "none")};
color: ${(props) => (props.underLine ? ({ theme }) => theme.color.esYellow : "black")};
background-color: white;
`고객센터 페이지
- 사이드메뉴 안의 고객센터 페이지
- 구매와 판매 카테고리에 맞는 데이터를 불러오고 선택적으로 답변을 열어서 확인할 수 있는 기능을 구현
/* QuestionBox.jsx */
...
const [focusedIndex, setFocusedIndex] = useState(null);
const [toggle, setToggle] = useState(true);
const selectDropdown = (id) => {
if (focusedIndex === id) {
setToggle(!toggle);
} else {
setFocusedIndex(id);
setToggle(true);
}
};
return (
<>
{mapList?.map((quest, idx) => {
return (
<Question key={idx}>
<QuestionTitleBox onClick={() => selectDropdown(idx)}>
<QuestionTitle>
<div>Q.</div>
<div>{quest.q}</div>
</QuestionTitle>
<RewardArrow className={focusedIndex === idx && toggle ? "arrow up" : "arrow"} />
</QuestionTitleBox>
{focusedIndex === idx && toggle && <QuestionContents>{quest.a}</QuestionContents>}
</Question>
);
})}
</>
);이 외의 CSS 요소들
Outro
개인적으로 이전의 2개의 프로젝트를 하면서 짧은 시간동안 집약적으로 배웠던 내용들을 정리하고 좀 더 찬찬히 들여다 볼 수 있는 시간이었다. 이외에도 리덕스를 공부해보고 살짝 맛보기를 해본 점, 실제로 디자이너분과의 협업도 조금이나마 경험해 볼 수 있었다는 점이 흥미로웠고, 갚진 경험이었다.
