내배캠 TIL 2023.03.09

폭을 수정해서 시윤님껄로 맞추기 (완료)

 

검색박스 수정 (나는 선만 없앴고, 희현님이 나머지 맡아서 해주신다고 했다.

 

검색 게시물 제목 높이 통일 (완료)

 

메인 페이지 반응형 제목 줄이기 (완료)

 

NOW REVEIWS 추가 (완료)

 

해시태그 부분 -  더보기 닫기 (완료)

 

토글 버튼 따로 빼기 (완료)

 

검색 카테고리 리셋버튼 (완료)

input search (완료...? cancel 버튼 css 수정필요)

 

추가 구현하면 좋을 것

 

다크 모드/라이트 모드 구현

여행관련 페이지 링크 또는 공공기관 정보 링크 추가하기

지도로 연결되는 링크 추가

게시물 페이지에서 해시태그 클릭하면 해당 단어로 자동검색되는 기능

게시물별 더보기 버튼이 있었으면 좋겠다. => 각 해당 게시물 검색하면서 검색페이지로 이동, 그런데 그럴라면 검색페이지에서 좋아요 순, 최신순 왔다갔다하는 버튼이 필요하다.

 

 

 

react select에서 아무 옵션도 선택하지 않은 것처럼 value를 없애주는 법

내가 시도했던 것은 setState(undefined)를 해줬는데, 밸류가 사라지지 않았다.

 

https://anerim.tistory.com/240

[리액트 React] react-select 초기화 / How to initialize react-select / How to reset re

useRef에 type 넣는 법

https://driip.me/7126d5d5-1937-44a8-98ed-f9065a7c35b5

TypeScript React에서 useRef의 3가지 정의와 각각의 적절한 사용법

 

사진을 꾸겨지지 않게 넣는 법

object-cover을 해주면 된다! 시윤님이 수정해야한다고 말씀해주셨고, 양임매니저님이 방법을 써주셔서 해결!

 

 

발표 영상에 대한 피드백 

 

~1:03 - 이 주제를 선택한 이유는 국내 여행 코스를 공유하는 서비스가 부족하다는 생각에서 출발하였습니다.

코스를 직접 만들고 리뷰를 작성할 수 있으며, 좋아요, 댓글 기능을 통해 다른 사용자들과 상호작용도 가능합니다.

지역별 해시태그 등 여러 카테고리로 검색 필터링이 가능하여, 각자의 요구에 맞는 여행 코스를 찾기 쉽습니다.

이 서비스를 통해 각자의 경험을 공유하고 보다 나은 여행 경험을 만들기 위해 노력하고 있습니다.

- 지금도 잘 하셨지만, 화면 하나만 보여주고 설명을 하고 있는 상황이니까 좀 더 간결하게 스크립트를 짜봤어요.

1:14 - 중앙 스테이트 관리는 -> 전역 상태 관리는으로 표현하고, 서버 상태 관리 및 통신은 RTK Query를 사용했다고 포현하면 더 좋을 것 같아요.

1:24 - UI를 구현하는 것은 리액트니까, CSS 라이브러리로는 스타일 컴포넌트와 tailwind를 사용하셨다고 말씀하시는 것이 좋을 것 같아요.

2:16 - 여기서 react redux가 아니라 redux toolkit 아닌가요?

~6:23 - MVP 너무 잘 하셨는데, 오디오가 빈다고 표현하던가요? 행동을 하고 시연하는 것보다는 어떤걸 하겠다고 말씀해주시고 시연의 결과를 보여주는 방식으로 하면 더 좋을 것 같아요! 지금도 좋습니다.

8:17 이 부분에서, 페이지가 다르다는 말이 직관적이지 않으니까, 서로 다른 창에 띄워져 있다는 식으로 부연 설명을 붙이면 어떨까요?

8:44 firebase에서 쿼리에 대한 기능이 부족해서, SQL을 사용할 수 있는 supabase를 사용했다는 식으로 말하는 건 어떨까 합니다!

 

 w-[85%] md:w-[70%] h-auto mx-auto md:mt-[100px] 

 

lg:max-w-6xl w-[90%]

 

 

해시태그 자동 검색 로직 때문에 너무 화나서 쓰러지기 직전에 동훈 튜터님의 도움을 받아해결 할 수 있었다. 정말 속 시원하다.

 

 

input type = search할 때 자동으로 나오는 버튼 커스텀 하기

https://stackoverflow.com/questions/60517263/inputtype-search-webkit-search-decorationhover-cursor-pointer-in-styl