[✍️ Dev Log] 송다영 / 2022-01-18


### 오늘은 어떻게 프로젝트에 기여했나요?

- Searching.js 의 검색창 구현하기
- 헤더의 검색을 누르면 검색창과 기본 물고기 정보 카드 6개가 보여지고 검색에 따라 상태가 변경된다.
- 처음의 구현은 하나의 물고기 정보를 받아와서 검색할 수 있게 하였는데 사용자 입장에서 사용하기에는
물고기의 이름이 다소 어렵고 어떤 걸 검색해야할지 모를 것 같아 자동완성을 추가하고자 하였다.

### 오늘의 프로젝트에서 힘든 점은 무엇인가요?

- JS로 자동완성을 구현하고자 하였는데 filter된 자동완성의 이름을 전부 다 검색되어져서 한 마리의 물고기 정보를 가져오는 Api를
Back-end에게 요청하고 수정하였으나 가독성이 떨어졌다.
- 그 이후에 datalist 태그를 알게 되었고 검색한 물고기 정보를 map으로 돌려 사용자가 사용하기 쉬운 자동완성 기능과 검색창을 구현하였다.
(따로 자동완성의 dropdown 컨테이너를 안만들어도 된다.)

```js
---> 처음의 코드 Search.js

const [search, setSearch] = useState(); //인풋 창에 들어갈 검색 text
const [fish, setFish] = useState([]); // 검색 전 기본적으로 보여주는 6개의 추천 물고기
const [options, setOptions] = useState([]); // 60개의 물고기 이름리스트
const [filteredOptions, setFilteredOptions] = useState([]); //매칭된 물고기 이름
const [fish2, setFish2] = useState([]); // 60개의 물고기 정보리스트
const [filteredOptions2, setFilteredOptions2] = useState([]); //매칭된 물고기 정보
//==================================================================
const [currentFish, setCurrentFIsh] = useState(false); //추천, 현재 상태
const [selected, setSelected] = useState(-1);
const [hasText, setHasText] = useState(false); //인풋값 유무를 확인

......(중간 생략)

// 인풋 드랍다운 ===========================================================

const handleInputChange = (event) => {
const { value } = event.target;
if (value.includes("\\")) return;

// input에 텍스트가 있는지 없는지 확인하는 코드
value ? setHasText(true) : setHasText(false);
setSearch(value);

// dropdown을 위한 기능
const filterRegex = new RegExp(value, "i");

const resultOptions = options.filter((option) => option.match(filterRegex));
const testOptions = fish2.filter((fish) =>
fish.fish_name.match(filterRegex)
);

setFilteredOptions2(testOptions); //인풋창 안에서 작성된 물고기 이름과 매치하는 정보를 보여준다.
setFilteredOptions(resultOptions); // 인풋창 안에서 작성된 문자가 포함되어 있는 물고기의 이름만 보여준다.
};

const handleDropDownClick = (clickedOption) => {
setSearch(clickedOption);

const resultOptions = options.filter((option) => option === clickedOption);
// console.log(resultOptions, "=========");
setOptions(resultOptions);
};

const handleDeleteButtonClick = () => {
setSearch("");
};

const handleKeyUp = (event) => {
// eslint-disable-next-line

if (
event.getModifierState("Fn") ||
event.getModifierState("Hyper") ||
event.getModifierState("OS") ||
event.getModifierState("Super") ||
event.getModifierState("Win")
)
return;
if (
event.getModifierState("Control") +
event.getModifierState("Alt") +
event.getModifierState("Meta") >
1
)
return;
if (hasText) {
if (event.code === "ArrowDown" && options.length - 1 > selected) {
setSelected(selected + 1);
}
if (event.code === "ArrowUp" && selected >= 0) {
setSelected(selected - 1);
}
if (event.code === "Enter" && selected >= 0) {
handleDropDownClick(options[selected]);
setSelected(-1);
}
}
};

return (

Search

{hasText ? (

) : null}
)

//변경된 코드
// 복잡한 코드는 datalist 태그를 통해 간편하게 변경되었다.

const [fish, setFish] = useState([]); //첫 랜딩될 화면 페이지
const [allFish, setAllFish] = useState([]); // 60개의 물고기 정보값
const [filteredFish, setFilteredFish] = useState([]); //매치된 이름을 통해 정보가 필터링 되어서 들어온다. [{}{}]
//==================================================================
const [currentFish, setCurrentFIsh] = useState(false); //추천, 현재 상태
const [hasText, setHasText] = useState(false); //인풋값 유무를 확인
//==================================================================
const [input, setInput] = useState();
const [fishList, setFishList] = useState([]); //물고기 이름 리스트

...(중간 생략)

// 인풋창
const handleInputChange = (event) => {
const { value } = event.target;
if (value.includes("\\")) return;

// input에 텍스트가 있는지 없는지 확인하는 코드
value ? setHasText(true) : setHasText(false);
setInput(value); //

const matchFish = allFish.filter((fish) => fish.fish_name.match(value));
setFilteredFish(matchFish);
};

const handleDeleteButton = () => {
setInput("");
};

//리턴

{fishList.map((el) => (

))}



```

### 내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?

- [x] 추가적으로 애니메이션 greensock 알아보기