Mini프로젝트_키보드 어플_하단 메뉴바 만들기

이고운·2022년 10월 20일
0

기업협업

목록 보기
1/4


기업협업 첫번째 과제로 키보드 어플 제작하는 과제를 전달받았다.
기업협업 과제들은 3일 내로 제출해야하는 과제들이라 부담이 있기도 했지만 그만큼 기능 구현해야하는 부분이 가벼운 편이라 이번 기업협업과제를 통해서
그 동안 경험하지 못했던 기능 구현을 해보고 싶었다.

이번 과제 내용은 키보드어플 페이지를 구현하는 것이었다.
페이지는 2페이지인데 사람은 6명이라 파트 분담하는데에 좀 어려움이 있어서
사다리타기로 파트 분배를 했다! 아쉬운 점도 있는데 결과적으로는 좋은 경험이 됐던 것 같다.

1. 프로젝트 개요

1) 프로젝트 기간

2022.10.04 - 2022.10.06

2) 역할 및 기능 구현

  • 이고운 : 헤더 및 푸터 구현 (하단 네브바)
  • 양미옥 : 카테고리바 구현
  • 정예원 : 테마 카드 리스트 구현
  • 안승섭 : 프로젝트 초기 세팅, 이모티콘 상세 정보, 키보드 구현
  • 천찬영 : 이모티콘 리스트 구현
  • 임지영 : 리뷰 및 버튼 구현

3) 협업 툴

4) 코드 컨벤션

  • 버전: Node.js 16.16.0
  • Styled-Components, SCSS 혼합해서 사용
  • 클래스명은 언더바 형식으로 통일
  • fetch를 이용한 API 통신
  • 파일 확장자는 모두 js로 통일
  • 에셋은 src/Assets 하위에 배치
  • Git-flow
    💡 반응형의 경우 Screen Sizes 사이트를 참고하여 최소 태블릿 가로 사이즈인 600을 기준으로 잡았음. 가로 사이즈가 600 미만인 경우 모두 모바일이라 판단하였고, 600 이상인 경우 태블릿이라 판단하여 전체적인 크기를 키울 수 있도록 작업함.

2. 내가 구현한 기능 상세 설명 및 문제발생

나는 상단에 헤더 및 하단 네브바를 구현했다.
사실 처음에는 단순한 기능 구현인 것 같아서 시간이 남지 않을까 했는데
반응형으로 화면을 구현하는데 시간을 많이 소비했다.
2차 프로젝트에서 반응형으로 구현한 경험이 있는데도 한 페이지 내를 3명이 구현하다보니 merge해보면 내가 작업했던 레이아웃에서 벗어나거나 깨졌다.

일단 상단에 헤더는 별 게 없다. 그냥 css로 Figma 페이지에 보여져 있는데로 구현했다.
내가 의외로 고전한 부분이 하단 네브바인데 처음에는 단순하게 click에 따라 className을 변경해서 색상을 지정해주면 될 줄 알았다.
그런데 자세히 보니 단순하게 색상만 변경되는 것이 아닌 이미지 자체가 변경되는 것이었다. 클릭할 때 이미지 변경하는 것은 처음 구현해봐서 어떤 식으로 풀어갈 지에 대해 고민이 있었다.

1) 이미지 토글화

하단에 이미지 클릭 시에 토글처럼 회색이미지를 넣었다가 핑크색 이미지를 넣어야겠다고 생각했다. 두가지이니까 true, false로 관리하여 다른 이미지를 넣으면 되겠다고 생각했다.

function Footer() {
  const [store, setStore] = useState(false);
  const [dia, setDia] = useState(false);
  const [heart, setHeart] = useState(false);
  const [admin, setAdmin] = useState(false);

2) 클릭 이벤트에 상태값 저장

onClick에 넣어줄 함수를 각각 상태값으로 저장해줬다.
이미지클릭하면 해당 값이 true가 됨. 그리고 true/false에 따라서 다른
이미지를 넣어줄 것임.

const handleStore = () => {
    setStore(true);
  
const handleDia = () => {
    setDia(true);
  
const handleHeart = () => {
    setHeart(true);
  
const handleAdmin = () => {
    setAdmin(true);  
  

3) 이미지와 이미지 이름에 상태값에 따른 변경값 설정

위에서 저장해준 상태값을 onClick이벤트에 넣어주고, true인지 false인지에 따라 이미지랑 밑에 이미지 이름 색상을 변경해준다. (삼항 연산자 사용)

<div className="icons " onClick={handleStore}>
  <img src={store ? Store_p : Store} alt="icon" />
     <p style={store ? { color: '#FF417D' } : { color: '#919299' }}>
                스토어
     </p>
</div>
<div className="icons " onClick={handleDia}>
  <img src={dia ? Dia_p : Dia} alt="icon" />
     <p style={dia ? { color: '#FF417D' } : { color: '#919299' }}>
                충전소
     </p>
</div>
<div className="icons " onClick={handleHeart}>
  <img src={heart ? Heart_p : Heart} alt="icon" />
     <p style={heart ? { color: '#FF417D' } : { color: '#919299' }}>
                MY테마
     </p>
</div>
<div className="icons" onClick={handleAdmin}>
   <img src={admin ? Admin_p : Admin} alt="icon" />
     <p style={admin ? { color: '#FF417D' } : { color: '#919299' }}>
                설정
     </p>
</div>

4) ❌ 문제 발생 ❌

그런데 여기까지 잘했다고 생각했는데 하단에 버튼이 여러개가 눌린다.
4개를 다 누르면 4개가 다 핑크색 아이콘으로 변경되는 것이다...
나는 하나씩만 눌리는 것처럼 보여야하는데! 차라리 그냥 글자로 된 메뉴바였다면 map으로 돌려서 active로 className을 지정해줬으면 될 것 같은데, 나는 이미지 자체를 교체해야하는 것이라 이 방법밖에 생각나지 않았다. 이것 저것 코드를 바꿔보다가 해결이 안되어 결국 다른 팀원분한테 여쭤봤는데,
하나 버튼 클릭 시에 다른 것들을 죽이면 되지 않냐고 말씀해주셨다.
아니 이렇게 단순한 방법이 있는데 왜 생각을 못했을까? 나는 구현을 다 해놓은 상태였다. 좀 더 생각해보니까 하나의 버튼이 true값일 때 다른 버튼을을 false로 지정해주면 되는 것이었다!! 대체 왜 여기까지 생각을 못한 것인지, 한편으로는 아까웠다.
위의 click이벤트 함수에 아래와 같이 하나가 true면 다른 상태값들은 false로 지정해줬다.

 const handleStore = () => {
    setStore(true);
    setDia(false);
    setHeart(false);
    setAdmin(false);
  };

  const handleDia = () => {
    setDia(true);
    setStore(false);
    setHeart(false);
    setAdmin(false);
  };
  const handleHeart = () => {
    setHeart(true);
    setStore(false);
    setDia(false);
    setAdmin(false);
  };
  const handleAdmin = () => {
    setAdmin(true);
    setStore(false);
    setDia(false);
    setHeart(false);
  };

5) 결과화면


이렇게 하단 네브바가 완성되었다. 해당 기능은 다른 페이지를 구현할 때도 유용하게 쓰일 것 같았다.

3. 느낀 점 (어려웠던 점)

이번에 한 단순한 기능 한가지에도 배운 점이 많았다.
일단 이미지 src랑 글씨 style을 boolean값에 따라 바꿔준 적이 처음이었다. 단순한 부분이긴 하지만 한 번에 깔끔하게 들어갔을 때 기분이 좋았다.
물론 그냥 토글같이 만들어져서 나머지도 다 클릭에 따라 한꺼번에 눌리는 것처럼 보여서 이걸 혼자서 해결 못했다는 것이 아쉬웠다. 역시 이번에도 느낀 점은
같은 팀원의 중요성! 특히 이번에는 짧은 프로젝트임에도 계속 서로 진행사항 화면을 공유하며 피드백을 주었는데, 반응형 구현하는데 도움이 많이 되었다.
내가 미처 발견하지 못한 여백 부분도 다른 팀원분이 발견하셔서 그 부분도 수정할 수 있었다.
그 다음은 구현해야하는 화면의 고정성의 어려움을 느꼈다. 기존에는 내 생각에 따라 구현하는 어느정도의 자율성이 있었는데, 이번에는 피그마 화면을 보고 동일하게 구현해야하다보니 여백이나 기타 사이즈 부분도 세세하게 살펴야했다. 중앙정렬이 안되면 부모와 자식 관계랑 기타 설정된 값이 있는지 여러번 확인해야했다.
생각보다 한 화면을 동일한 레이아웃을 표현하는 것이 어렵다는 생각이 들었다.
그리고 미디어쿼리 사용의 유용성을 느꼈다. 이번에 반응형 구현으로 미디어쿼리를 사용했는데, 우리팀은 가로 길이600px을 기준으로 모바일 사이즈라 판단했다.

@media screen and (min-width: 600px) {
    .div.footer-wrap {
      font-size: 1.25em; //20px;
    }

위의 코드 처럼 최소 화면 너비가 600px 이상일 때 단락의 글꼴 크기가 1.25em (20px)로 변경되도록 지정했다. 이렇게 반응형에 맞춰 화면 사이즈에 따라 글씨 크기를 변경한 부분이 새로웠다.

반응형 구현이라는 것이 다채로운 핸드폰 화면 규격에 맞는 사이즈를 찾는 과정인데 이 작업 자체가 소비자 및 이용자의 편의성을 위한 부분이라는 것이 체감되었다. 워낙 요즘 모바일웹 사용이 많아짐에 따라 반응형 구현은 이젠 필수적이라는 생각이 들었다.❗️❗️❗️

profile
자 이제 시작이야~ 내 꿈을~ 내 꿈을 위한 여행~~🌈

0개의 댓글