[TIL] 20.06.18

요구사항 (해야 할 일)

• Table 위치고정 문제 & 반응형 문제 #1
• dropdown 검색 기능 #2
• graphQL mutation의 경우에는 아직 시간이 있다. #3

한 일

• Table 디자인과 css 기능 개선 (material-table 활용)
  • component 별로 css 조정
  • 요청에 따른 테이블 값 변경
  • card에서 table로 변하면서 생긴 css 문제 처리
  • user의 권한에 따라 table 형태 변경
• dropdown 검색 기능 추가 (아래 예시)
• mutation 사용을 통한 권한 부여 기능 추가
  • 기존의 rest api 방식에서 Apollo 수정 중
  • graphQL공부, playground 참고
• 개발자의 글쓰기

회고

• 생각보다 진행이 빨랐음
• 최대한 라이브러리의 도움없이 코드를 짤 수 있어서 즐거움
• query, mutation 정의가 서버에서 깔끔하게 되어 있지 않은 것 같음
• frontend에서 mutation을 적용하는데 지난 '헬스프렌드' 과제가 도움이 됨
• card 형태에서 table로 고치면서 미처 처리하지 못한 css가 있었는데 겨우 찾아내서 기쁨
• 주어진 할당량을 충분히 소화할 수 있었고, 내일 하려고 했던 css 잔처리? 를 끝내서 기쁨
• 동료와 점심시간에 호수를 거닐며 이야기를 나누었는데 즐거운 대화였음 (프로다움이 멋졌음)

additional

dropdown 검색 기능 추가 예

// 예시 코드 (축소된 형태, 스타일 생략)
import React, { useState, useEffect } from 'react';

const DropDownSearch = ({data}) => {
  const [searchUser, setSearchUser] = useState("");
  const [userList, setUserList] = useState([]);
  
  useEffect(() => {
    const result = data.users.filter(user => 
           user.username.includes(searchUser)
          );
          setUserList(result);
   },[searchUser]);
  
  const searchUserHandler = (e) => {
       setSearchUser(e.target.value)
  }
  
  return (
    <div className='dropdown'>
    	<div 'dropdown-content'>
    	  <input
              type="text"
              placeholder="검색.."
              value={searchUser}
              onChange={searchUserHandler}
            />
           {userList.length !== 0 ? (
              userList.map((e, i) => (
                <p key={i} onClick={() => assignUser(taskData, e.id)}>
                  {e.username}
                </p>
              ))
            ) : (
              <p>검색 결과 없음</p>
            )}
        </div>
    </div>
  );
};

export default DropDownSearch;