css 강의
컨텐츠에는 대부분 max width가 정해져 있다.
그렇다고 해서 아예 웹사이트 자체에 max-width를 정해놓지는 않는다.
그럼 어떡해야하는가???
각 컴포넌트는 100%를 차지하되, max-width를 정해놓아야만 한다.
max-width는 :root에다가 정의한 뒤, 컨테이너를 이용해서 사용한다.
width : 100%
max-width :1200px
magin : 0 auto
padding : 10px
아이콘을 받는 패미키 -> lucide-react
링크나 버튼에는 패딩을 적절하게 줘서, 사이즈를 키우는 것도 좋다.
개인 프로젝트 트러블 슈팅
이미지 파일의 첨부.
const textHandler = (e) => {
setNickname(e.target.value);
};
const fileHandler = (e) => {
setImgFile(e.target.files[0]);
};
const handleSubmit = async (e) => {
e.preventDefault();
const formData = new FormData();
formData.append("avatar", imgFile);
formData.append("nickname", nickname);
updateProfile(formData, token);
};
이미지 파일을 첨부하기 위해서는 input file을 써야한다는 점은 알고 있었는데, 이걸 폼데이터화하는 방법, 폼데이터 안에 있는 데이터를 조회하는 방법을 모르고 있었다.
for (let [key, value] of formData.entries()) { console.log(`${key}:`, value); }
파일을 다룰 때는 e.target.files의 0번째 배열을 불러와야 한다는 걸 알았으며, 콘솔로 폼데이터를 확인하려면 저런 서식을 따라야한다는 것을 알았다.
그리고 이런 로직을 사용할 때, formData 안에는 e.target이 들어가면 안 된다. 여기서 폼 데이터의 생성은 일종의 폼데이터라는 박스를 만들어서, request할 때 포장해 보내주는 용도로 쓰기 때문이다.
visibility를 갱신해주는 로직에서의 실수.
export const updateTestResultVisibility = async (id, visibility) => {
const toggle = !visibility;
const response = await jsonApi.patch(`/testResults/${id}`, {
visibility: toggle,
});
return response.data;
};
patch를 할 때에는 , 뒤에 단순 toggle만 넣는다고 끝나는 게 아니라, 저렇게 객체 형식으로 무엇을 어떻게 바꿀 지를 정확하게 명시해줘야 한다. toggle만 넣었다가 계속 실패했었는데, 그 이유를 늦게서야 알아냈다.
다른 사람에겐 비공개된 카드가 보이지 않게끔. 비공개여도 내 카드는 내게 보이게끔.
if (visibility === true || userProfile.id === cardId) {
return (
<li className="flex flex-col items-center shadow-lg m-10 bg-white rounded min-h-[300px] w-[500px]">
<span>{nickname}</span>
<img
src={avatar || defaultImg}
className="h-[50px]"
alt="유저 프로파일 이미지입니다."
/>
{userProfile.id === cardId && (
<div className="flex flex-row gap-5 p-3">
{visibility ? (
<StBlueButton onClick={visibilityBtnHandler}>
비공개로 전환
</StBlueButton>
) : (
<StBlueButton onClick={visibilityBtnHandler}>
공개로 전환
</StBlueButton>
)}
<StRedButton onClick={deleteBtnHandler}>Delete</StRedButton>
</div>
)}
<span>{mbtiResult}</span>
<p className="text-sm">{description}</p>
</li>
);
2시간 정도 머리를 싸맸는데, 생각보다 단순한 문제였다. 조건문에 or 연산자로 저렇게 작업을 걸어주니 비공개된 게시물은 자신에게만 보이게끔 잘 수정되었다.