[실전프로젝트] 태그 기반 검색

• 개요

  2주차까지 목표인 메인페이지 뷰 제작 & 기능 구현을 끝냈다
  이번 주는 팀원들과 회의 후 태그 기반 검색 기능 구현을 목표로 잡았다
  
  

• 사용할 기술 스택

  • JavaScript
  • Styled-Component
  • Redux-Toolkit
    
    

• 와이어 프레임

  
  

• 구현하기 전에 생각해야 할 것

  • 태그는 중복 선택이 아닌 단일 선택(radio button 사용)
  • 태그 선택하기 화면은 라이브러리가 아니라 자바 스크립트로 직접 구현할 것(라이브러리 없이 구현해보고 싶었음)
    
    

• API

// 1. 단일 태그 관련 음식 목록 호출 API
data: 
[{
     'name': '짜장면',
     'imgUrl': 'www.image.png',  
     'tags': ["매운","단백"]
  },
  {
     'name': '김치볶음밥',
     'imgUrl': 'www.image.png',
     'tags': ["매운","단백"]
  }
.... 
]

// 2. 태그 목록 정보 조회 API
[{
    'tagId': 3,
    'name': '한식'
 },
 {
     'tagId': 4,
     'name': '일식'
  },
  
 {
     'tagId': 5,
     'name': '중식'
  }
  ......
]

→ 뷰 제작에 참고한 사이트 '원티드'