Feat: AddLinkInput, FolderTag 하위 작업 merge함, 검색, 폴더선택, 링크추가 기능 작업중 #65
Conversation
junjeeong
requested review from
99minji,
hongggyelim,
mungyun and
venise5224
| const { folder: currentFolderId } = router.query; | ||
|
|
||
| const folderStyle = | ||
| "py-[8px] px-[12px] border border-purple100 rounded-md hover:bg-purple100 hover:text-white"; |
There was a problem hiding this comment.
클릭 가능한 요소임을 안내하기 위해 cursor-pointer 도 추가하면 좋을것같아요 !
components/Link/AddLinkInput.tsx
Outdated
|
|
||
| return ( | ||
| <form | ||
| onSubmit={handleSubmit} |
There was a problem hiding this comment.
폴더 추가 모달(AddFolderModal)에서 선택한 폴더의 id를 받고, prop으로 링크를 전달받아서 링크 POST 요청이 이루어지도록 작업했습니다.
그래서 버튼 요소에 onClick으로 모달 호출하면서 link, 폴더 list 만 전달 해주시면 기능 구현이 가능할 듯 합니다!
이 경우에는 form에서 onSubmit 은 생략 가능합니다
There was a problem hiding this comment.
이해했습니다! 그렇게 고쳐볼게요~
| const status = error.response.status; | ||
| const message = error.response.data?.message || "알 수 없는 오류 발생"; | ||
| return res.status(status).json({ message }); | ||
| switch (req.method) { |
There was a problem hiding this comment.
switch문을 사용하는게 코드가 더 정리된 느낌이네요 ! 👍
| console.log("Token:", token); | ||
| const cookies = parse(req.headers.cookie || ""); | ||
| const accessToken = cookies.accessToken; | ||
|
|
There was a problem hiding this comment.
제거된 코드와 작성하신 코드에서 쿠키를 가져오는 방법의 차이가 뭔지 궁금합니다!
There was a problem hiding this comment.
차이 없습니다! 병합하다가 삭제된 것 같아요
| const fetchData = async (endpoint: string) => { | ||
| const response = await proxy.get(endpoint, { | ||
| headers: { | ||
| Cookie: req.headers.cookie, |
There was a problem hiding this comment.
아 여기서 헤더가 다르기때문에 쿠키를 불러오는 방식이 달라진거군요!
그렇다면 Authorization 헤더를 쓰는것과 어떻게 다른지 궁금합니다!
There was a problem hiding this comment.
클라이언트 -> 서버로 요청을 보낼 때는 헤더에 쿠키가 자동으로 실어져 갑니다!
여기는 getServerSideProps 함수이니 서버 -> 서버로 요청을 보내는 것이라 헤더에 쿠키가 없습니다.
대책으로 context.req 객체에 접근해 cookie를 받아와 헤더에 직접적으로 실어주는 것이고요 (�get 요청 함수는 인자가 순서대로 url,body,header 입니다)
이렇게 하면 서버-> 서버라 할지라도 요청받는 서버에서 헤더에 쿠키가 실어져있으니 쿠키를 읽어 그 안에 token을 꺼내 요청을 보낼 수 있는 원리입니다.
pages/link/index.tsx
Outdated
| import AddLinkInput from "@/components/link/AddLinkInput"; | ||
| import ActionButtons from "@/components/link/ActionButtons"; |
There was a problem hiding this comment.
폴더명이 대문자인데 경로에는 소문자로 되어있는 것 같아요!
There was a problem hiding this comment.
이것 때문이었군요 ㅎㅎ 감사합니다!
| <ul className="flex flex-wrap gap-[8px]"> | ||
| <button className={folderStyle} onClick={() => handleSubmit("")}> | ||
| 전체 | ||
| </button> | ||
| {folderList.map((folder) => ( | ||
| <button | ||
| key={folder.id} | ||
| className={`${folderStyle} ${folder.id === Number(currentFolderId) && "bg-purple100 text-white"}`} | ||
| type="submit" | ||
| onClick={() => handleSubmit(folder.id)} | ||
| > | ||
| {folder.name} | ||
| </div> | ||
| </button> | ||
| ))} | ||
| </div> | ||
| </ul> |
There was a problem hiding this comment.
<ul>요소를 사용하셨는데, 그 안에 <li> 요소로 각 항목을 감싸는 것이 HTML구조에 더 적합해 보입니당! 이렇게 하면 접근성과 SEO 측면에서도 더 좋다고 하네요. 참고해 주시면 좋을 것 같습니다!
<ul>
<li><button>버튼</button></li>
</ul>
d617080 to
b1a0e41
Compare
Preview
2024-11-10.3.39.38.mov
작업중인 것