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 요소들

• 반응형 웹디자인의 이해
• styled-components 에서 webfont 사용하기

Outro

개인적으로 이전의 2개의 프로젝트를 하면서 짧은 시간동안 집약적으로 배웠던 내용들을 정리하고 좀 더 찬찬히 들여다 볼 수 있는 시간이었다. 이외에도 리덕스를 공부해보고 살짝 맛보기를 해본 점, 실제로 디자이너분과의 협업도 조금이나마 경험해 볼 수 있었다는 점이 흥미로웠고, 갚진 경험이었다.