Conversation
jeongseongwon94
requested review from
ckswnskfk,
rladngus133,
Chyyni and
d0ngbb00
|
|
||
| return ( | ||
| <div className="flex flex-col gap-[3rem] rounded-[1.2rem] border border-black-border bg-black-bg p-[2rem] md:flex-row lg:p-[3rem]"> | ||
| <div className="flex min-w-[33.5rem] flex-col justify-between gap-[3rem] rounded-[1.2rem] border border-black-border bg-black-bg p-[2rem] md:flex-row lg:p-[3rem]"> |
There was a problem hiding this comment.
justify-between을 사용하니 content의 길이가 짧을 때 UI가 어색해지네요
content 길이와 상관 없이 좌측 정렬되면 좋을 것 같습니다!
There was a problem hiding this comment.
넵! 수정했습니다. 👍
| <button> | ||
| <ReviewerProfile reviewerData={reviewerData} /> | ||
| </button> | ||
| {/**TODO: 버튼 클릭 시 유저 프로필화면 이동 /user/{userId} */} | ||
| <div className="flex items-end md:justify-center"> |
There was a problem hiding this comment.
이번 PR에서 수정된건 아닌것 같지만... 별점 ui의 좌측 정렬 시작 지점이 디자인과 약간 다른 것 같습니다!
피그마 시안:
| @@ -21,19 +21,19 @@ type FavoriteProps = { | |||
| className: string; | |||
| }; | |||
|
|
|||
| const imageCn = "object-contain"; | |||
| const imageCn = "object-cover"; | |||
There was a problem hiding this comment.
클래스네임들은 왜 따로 변수화 하셨나요? 👀
분기에 의해 달라지는것 같지는 않아 여쭤봅니다!
There was a problem hiding this comment.
그렇네요..! 여러 곳에서 사용되니깐 변수로 해볼까 하고 작성해봤는데, 말씀하신대로
분기점도 없는데 굳이 변수화 시킬 이유는없는거같아요 ㅋㅋㅋ;
className에 직접 넣는걸로 수정했습니다! 👍
| const [cookieid, setCookieId] = useState<number>(0); | ||
|
|
||
| useEffect(() => { | ||
| const cookies = Object.fromEntries( | ||
| document.cookie.split(";").map((cookie) => cookie.trim().split("=")), | ||
| ); | ||
| setCookieId(Number(cookies["id"])); | ||
| }, []); | ||
| //TODO: 쿠키는 아마도 기능구현때 store에서 관리 |
There was a problem hiding this comment.
아직 저도 구현에 들어가지 않아서 잘 모르겠지만, cookie에 담기는건 accessToken 뿐이고 유저의 정보(users/me)는 리액트쿼리를 사용해서 캐싱된 데이터를 불러올 것 같아요.
결국 isMyProduct 는 users/me를 불러온 useQuery의 결과의 id 와 productDetailData.writerId 를 비교해야 할 것 같습니다!
There was a problem hiding this comment.
아! 저는 로그인 api요청 때 쿠키를 담고, 각 컴포넌트에서 불러오는 방식만 생각했는데, 말씀하신대로 캐시에 담긴 id를 사용하면되니깐 쿠키를 불러올 필요는 없네요.
그러면 스토리북에서도 쿠키애드온을 사용할게아니라 리액트쿼리의 캐시데이터를 불러오는 형식으로 하는게 맞을거같아요! 👍
그러면 쿠키 애드온설치는 일단 pr을 닫아놓고, 우선 기능 구현부터 끝내고나서 스토리북을 만들어봐야겠네요 ㅎㅎ
storybookjs/storybook#12489 (comment) << 확실하진 않지만 스토리북에서 리액트쿼리 캐시 데이터 불러오는 방법도 있는거 같네요!
There was a problem hiding this comment.
지금은 mock 데이터를 쓰고 있지만 추후엔 상위에서 내려주는 productDetail 정도의 객체를 받을 것 같네요!
| const [cookieid, setCookieId] = useState<number>(0); | ||
|
|
||
| useEffect(() => { | ||
| const cookies = Object.fromEntries( | ||
| document.cookie.split(";").map((cookie) => cookie.trim().split("=")), | ||
| ); | ||
| setCookieId(Number(cookies["id"])); | ||
| }, []); | ||
| //TODO: 쿠키는 아마도 기능구현때 store에서 관리 |
There was a problem hiding this comment.
여기도 리액트 쿼리로 캐싱된 유저 정보를 불러와서 비교할 것 같습니다!
상품 리뷰 항목에 리뷰카운트, 팔로워카운트, 랭크는 사용하지 않는것으로 변경되어 디자인을 해당사항에 맞게 수정하였습니다.
Close #58
📌 작업 사항
[구현] 상품상세화면 페이지UI 구현
📌 이슈 (에러, 막혔던 부분, 그외 궁금한것 등등)
유저id 쿠키에따라서 UI가 다르게 표현되는데, 스토리북에서 쿠키를 적용하려면 addon을 설치해야할거같아서요. 설치해봐도 괜찮을까요?? (https://storybook.js.org/addons/storybook-addon-cookie)브랜치 새로 파서 설치사용하지 않고 보류📌 스크린샷 / 테스트결과 (선택)