백과사전 모달 레이아웃 및 디자인 변경, 최근 검색어 기능 추가 #28
Merged
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
개요
그 외
백과사전 모달 레이아웃 변경
기존의 백과사전 모달의 레이아웃과 디자인은 전체적으로 색감이 강렬하고 조회된 목록 간에 구분이 잘 가지 않는 문제 등이 있었음
불필요한 backdrop-filter 를 제거하고, 레이아웃이 뷰포트 전체를 꽉 차도록 변경하였고, 컨테이너 내부를 구성하는 컴포넌트의 max-width를 1240px 로 제한하여 사용자가 콘텐츠에 집중할 수 있도록 개선함
최근 검색어 기능
원래 백과사전 검색 기능에는 검색 기능 하나만 있었으나, 최근에 검색한 키워드를 캐싱하여 사용자가 언제든지 과거 검색어를 기반으로 재검색이 가능하도록 기능을 추가(브라우저 세션스토로지 활용)
기능 및 레이아웃/디자인 변경 전
![image](https://private-user-images.githubusercontent.com/107159871/336392201-121eb811-057b-4ff3-b148-5eff4f8d915e.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ2Mzk3OTQsIm5iZiI6MTcyNDYzOTQ5NCwicGF0aCI6Ii8xMDcxNTk4NzEvMzM2MzkyMjAxLTEyMWViODExLTA1N2ItNGZmMy1iMTQ4LTVlZmY0ZjhkOTE1ZS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODI2JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgyNlQwMjMxMzRaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1lYjIzMmI2ZWE4OWQxZDUwYWUzZDI0ODQ1ZTY5N2M1OGMyMGY1YmVmYmQ2OGRhOTM3NWQ0Mzk1Mjk1ZmY3MThjJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.Sk3fAgam3hLL_ZvD8fTsk8js96qMwuHMnu5SN4XVk0E)
기능 추가 후
![최근검색어-min (2) (1)](https://private-user-images.githubusercontent.com/107159871/336398771-05236d5b-78a4-4a96-aa1d-47954adee8b4.gif?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ2Mzk3OTQsIm5iZiI6MTcyNDYzOTQ5NCwicGF0aCI6Ii8xMDcxNTk4NzEvMzM2Mzk4NzcxLTA1MjM2ZDViLTc4YTQtNGE5Ni1hYTFkLTQ3OTU0YWRlZThiNC5naWY_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODI2JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgyNlQwMjMxMzRaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1hOTI1MDg4YWEzMTAwZjA0YzQ5MmM5ZjMyZjQwZTU5N2E4OWUwZmEyMzllYTcyZThlNTQxMTkyYjE4NjhiZjc4JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.ywyruNvNteLxsJjQo1kaGGgD-JRR4YXDMau3WkRmOCY)