Skip to content

Conversation

@junjeeong
Copy link
Collaborator

@junjeeong junjeeong commented Nov 14, 2024

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로 전달합니다.)

폴더 추가

default.mov
  1. 폴더추가 버튼을 누르면 AddFolderModal이 열리게 하는 것이 다입니다.
  2. 이후 useRerenderFolderList를 한번 호출하는데, 기능은 isOpen이 한번 true가 되고 다시 false가 되었을때 (모달이 한번 열리고 닫혔을 때), getFolders를 다시 하여 최신의 데이터를 가져오는 것입니다.

남은 작업

  1. FCP(first contentful paint), TTI(time to interactive) 속도가 너무 느립니다 원인을 찾고 해결해야 할 것 같습니다.
  2. LinkCard UI 개선해야 합니다.
  3. 폴더 이름 변경, 폴더 삭제하면 화면 리렌더링 해야 합니다.
  4. folderTag 부분 늘어지면 폴더추가+ 줄바꿈이 되는데, UI를 전반적으로 개선할 필요가 있습니다.

@junjeeong junjeeong self-assigned this Nov 14, 2024
{ src: "/icons/share.svg", alt: "공유", text: "공유" },
{ src: "/icons/pen.svg", alt: "이름 변경", text: "이름 변경" },
{ src: "/icons/delete.svg", alt: "삭제", text: "삭제" },
].map(({ src, alt, text }) => (
Copy link
Collaborator

Choose a reason for hiding this comment

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

버튼 구현 이렇게 하니까 깔끔하네요

@@ -0,0 +1,10 @@
import { proxy } from "./axiosInstanceApi";

// SSR에서 proxy로 요청 보낼 때 사용하는 로직 ㅜㅊ상화
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 Author

Choose a reason for hiding this comment

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

수정하겟습니다~

Comment on lines 16 to 26
useEffect(() => {
const fetchLinks = async () => {
const res = await proxy.get("/api/links", { params: { search } });
const res = await proxy.get("/api/links", {
params: {
page: query.page,
pageSize: isTablet ? 6 : 10,
search: query.search,
},
});
setLinkCardList(res.data.list);
};
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

Choose a reason for hiding this comment

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

잘 사용하겠습니다 😭

Copy link
Collaborator

@hongggyelim hongggyelim left a comment

Choose a reason for hiding this comment

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

확인했습니다! 수고하셨습니다

@junjeeong junjeeong merged commit 9d36502 into develop Nov 14, 2024
1 check passed
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