grid

📌 오늘 진행 사항

1. 여행 앱 개발
개발 TODO 정리
검색바
• 포커스 아웃 시 배경색, 텍스트 색, 돋보기 색
• 입력 시, 포커스 아웃 시 회색
• 포커스 인 시 흰색(현재 만든 걸로)
• 검색 페이지 진입 시 입력 바로 시작
 
최근 검색어 저장 옵션 팝오버
• 눌렀을 때 => 팝오버 & 아이콘 배경색 달라짐
• 팝오버 컴포넌트 만들기
• 토글 포함해 UI 만들기
• 기본 값 on
 
최근검색어
• 검색 옵션 on & 입력 시에만 나오도록 => 최근 검색 내역 없으면 안나옴
• 컴포넌트 만들기
• 아이콘
• 검색어 버튼
• 텍스트 오버플로우 시 말줄임표
• 누르면 검색 결과 페이지로 이동
• 포커스 인 시 UI 달라지나?
• 최대 5개까지. 최신순으로
 
Recommend => 5개
• 버튼 컴포넌트 만들기
• 포커스 시 배경, 글자 색 바뀌기
• 검색 버튼 크기는 일정(오버플로우x) 텍스트 오브플로우 시 말줄임표
 
Now => 최대 15개
• 컴포넌트 만들기
• 사진
• 사진 위 이모티콘 => 종류 리스트
• 제목, 설명
• 포커스 시 이미지만 크기 커짐, 테두리,
• 테두리 확인 필요
 
Weekly => 최대 15개
• 컴포넌트 만들기
• 사진
• 글자 => 하단 블러
• 포커스 시 크기 커짐
• 이미지가 어떻게 나오는지 지켜봐야 할듯 => 블러 포함?
• 스크롤바 없애기
• 오른쪽 오버플로우 현상 고치기
——————————————————————————————
남은 작업
• 검색완료
• 음성검색 시 입력필드에 검색어
• 자동 완성(라이브러리)
• 키보드 위에 자동 완성된 텍스트 버튼 클릭 시 검색 결과로
• 버튼 누르면 화면 이동
• db에서 데이터 받아오기
전체!!!!!
• 리모컨 컨트롤
• 방향키로 메뉴 포커스 인 & 아웃
• 방향키로 캐러셀 넘기기
• 확인 버튼 누르면 화면 이동
 
1. grid 지식 정

📌 New 지식

1. grid-template-columns(rows)
1. 값
1. auto : 콘텐츠 크기 만큼의 공간
2. 1fr : 나머지 열의 크기를 빼고 남은 공간
2. 각 값은 열/행을 차례대로 말하는 것이다.
• ex. : grid-template-columns: 'auto 1fr’은 두개의 열(콘텐츠크기, 남은 공간)이 만들어지는 것
• grid 노드의 자식 노드들이 차례로 각 열을 차지하게 되는 것이다.
• 열의 개수와 자식노드 개수에 따른 차이
• 열의 개수 > 자식노드 개수 : 첫번째 열부터 차례로 들어가고 나머지 열은 남게된다.
• 열의 개수 < 자식노드 개수 : 분배해서 들어감. (ex. 열2 자식4 ⇒ 자식1,2가 열1에, 자식3,4가 열2에)
3. 만약 자식의 position이 absolute라면 ? ⇒ 실제 공간은 0. 따라서 열에 자리차지 하지 않는다.
• ex) grid-template-columns: 'auto 1fr’ 이고 첫번째 자식 노드가 absoute라면?
⇒ 첫번째 노드는 셀을 차지 하지 x. 따라서 두번째 자식이 auto를 차지하게 됨.
4. 자식 노드의 크기가 100%같이 퍼센테이지 ⇒ 각 노드에 할당된 셀의 크기 기준으로 퍼센테이지
1. 셀의 크기가 auto & 자식노드 크기가 100%라면? ⇒ 그냥 자식 노드의 크기만큼 자리 차지!

2. 컴포넌트 props로 이미지 소스 넣기
1. div의 background-image, img 태그 모두 동일
2. ❌ 이미지경로를 src 값으로 바로 주는 것
🅾️ 이미지 경로를 Import해서

📌 문제 및 해결 사항

📝 내일 희망 TODO

1. luna 디버깅 모드 성공하기 (왜때문에 또 네트워크 에러ㅠ)

2. luna 정리하기(여기 문서에)

3. enact tailwind 성공하기

4. 해상도 높은 사진 marzipano 성공하기

1. 여행앱 서치 파트 계속~