Skip to content

Conversation

@junjeeong
Copy link
Collaborator

preview

링크 검색

default.mov
  1. SearchInput에서 검색어를 입력하면 현재 url에 search params가 추가되도록 했습니다.
  2. link 페이지를 로드할때 search params가 바뀌면 fetchNewList를 호출하도록 했습니다.
  3. fetchNewList의 역할은 /api/links proxy 서버로 GET요청을 보내 새로운 linkList를 가져와 setLinkList 하는 것입니다.
    이 때 옵션에 params:{search}를 추가해줘야만 proxy서버에서 req.query 객체에 search값이 들어가 있습니다.
    (params 옵션에 search 를 붙혀주면 "/api/links?search=000" 이런식으로 가고 없으면 "/api/links"로 가는 원리입니다.)

링크 추가

default.mov
  1. AddLinkInput에서 onChange로 인풋에 값을 value 상태로 관리하고
  2. input에서 값을 입력하고 enter키를 누르거나 추가하기 버튼을 누를시 openModal 함수를 호출하게 했습니다.
    ( 이 때 부모에게 받은 folderList와 AddLinkInput가 갖고있는 link 상태값을 props로 전달합니다.)

남은 작업

  1. 폴더 눌렀을 때 해당 폴더의 링크만 뜨게 해야 합니다.
  2. 화면 전환에 속도가 너무 느립니다 원인을 찾고 해결해야 할 것 같습니다.

@junjeeong junjeeong self-assigned this Nov 13, 2024
const handleClick = () => {
// Addmodal 띄우면서 link 전달
openModal("AddModal", { list: folderList, link: link });
};
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

잘 적용해주셨군요👍
영상 올려주신거 보니까 모달 한번 클릭하면 isLoading & 버튼 disabled 처리해서 중복으로 추가 방지하도록 해야겠습니다

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

링크 추가 후에도 인풋에 입력값이 남아있어서 여기서 초기값 "" 으로 setLink 해주는게 좋을것같아요!

const res = await proxy.get("/api/links", {
params: { search },
});
console.log(res.data);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

테스트를 위해 콘솔 출력 해보신거라면 테스트 후에는 해당 코드를 삭제하는것이 좋겠습니다! :)

Copy link
Collaborator

@99minji 99minji left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

고생하셨습니다!

Comment on lines 9 to 12
<div className="grid place-items-center grid-cols-1 my-[24px] md:grid-cols-2 lg:grid-cols-3 gap-5 md:gap-6 lg:gap-[20px] w-full">
{children}
</div>
);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

CardsLayout 레이아웃에 margin 을 추가하면 즐겨찾기 페이지에서도 css 가 적용되어서 아래 영역에 추가하는 게 더 좋을 것 같습니다!
image

@junjeeong junjeeong closed this Nov 14, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants