feature: 아이템 페이지 퍼블리싱

[bsy1141]

👀 What is this PR?

• 아이템 뷰/수정/추가 페이지 퍼블리싱

📝 Changes

• 아이템 뷰/ 수정/ 추가 페이지 퍼블리싱 완료, 현재 Mock Data 연결해둔 상황
• 아이템 뷰 /user/[id]/item
• 아이템 수정 뷰 /user/[id]/item/edit
• 아이템 추가 뷰 /user/[id]/item/add
• feature: 아이템 페이지 퍼블리싱 #13

📌 Related issue(s)

• react-bootstrap 캐러셀 컴포넌트 사용으로 인해 tailwindCss, react-bootstrap conflict 이슈가 있어 tailwind에 prefix(tw-)붙이는 것으로 수정해두었음
• 캐러셀에 시안과 다른 react-bootstrap 기본 컨트롤 버튼으로 구현해 두었는데, 개인적으로 이게 깔끔해보여서 기존 시안 버튼을 주석 처리해둔 상황. 디자인팀과 공유 후 결정할 것
• 여기에 feature: Card 컴포넌트 구현 #15 에서 윤규가 구현해준 ImageFrame 코드 복붙해서 사용해둔 상태이기 때문에, Card 컴포넌트 PR은 별다른 사항 없으면 close 처리해두어도 괜찮을 것 같음.

📷 Attachment(optional)

[asdf99245]

Card 컴포넌트 PR은 별다른 사항 없으면 close 처리해두어도 괜찮을 것 같음.

오케이~

깔꼼한데? DDb👍 any만 일단 고쳐주면 바로 merge 하면 될거같아

[asdf99245]

요런거 React. -> 나중에 React안붙이는 방식으로 Ex) Dispatch<SetStateAction<number>>로 바꾸면 좋을듯!

[asdf99245]

any 안쓰고 요렇게 타입가드써서 하는게 타입 안전성에 더 좋을듯! 로컬에서 되는거 확인했어 :)

Suggested change

	const [image, setImage] = useState<any>(null);
	const handleClick = () => {
	if (inputRef.current) {
	inputRef.current.click();
	}
	};
	const handleFileUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
	if (e.target.files !== null) {
	const file = e.target.files[0];
	const convertedImage = await convertImageToBase64(file);
	setImage(convertedImage);
	// Upload API 연결
	}
	};
	const [image, setImage] = useState<string | null>(null);
	const handleClick = () => {
	if (inputRef.current) {
	inputRef.current.click();
	}
	};
	const handleFileUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
	if (e.target.files !== null) {
	const file = e.target.files[0];
	const convertedImage = await convertImageToBase64(file);
	if (typeof convertedImage === 'string') {
	setImage(convertedImage);
	}
	// Upload API 연결
	}
	};

[asdf99245]

요기도 any 안쓰고 요렇게 하면 될듯!

Suggested change

	const [image, setImage] = useState<any>(item.image);
	const handleClick = () => {
	if (inputRef.current) {
	inputRef.current.click();
	}
	};
	const handleFileUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
	if (e.target.files !== null) {
	const file = e.target.files[0];
	const convertedImage = await convertImageToBase64(file);
	setImage(convertedImage);
	// Upload API 연결
	}
	};
	const [image, setImage] = useState<string>(item.image);
	const handleClick = () => {
	if (inputRef.current) {
	inputRef.current.click();
	}
	};
	const handleFileUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
	if (e.target.files !== null) {
	const file = e.target.files[0];
	const convertedImage = await convertImageToBase64(file);
	if (typeof convertedImage === 'string') {
	setImage(convertedImage);
	}
	// Upload API 연결
	}
	};

[asdf99245]

요렇게도 될려나??

Suggested change

	{isEdit ? (
	<Link href={`${router.pathname}/edit`}>
	<Icon iconType='Edit' color='white' />
	</Link>
	) : (
	<></>
	)}
	{isEdit && (
	<Link href={`${router.pathname}/edit`}>
	<Icon iconType='Edit' color='white' />
	</Link>
	)}

[bsy1141]

@asdf99245 이거 반영하구 디자인 시안 반영한 뒤에 바로 합치겠슴다! 근데 아마 내일 작업 예정 :(

[asdf99245]

이거 반영하구 디자인 시안 반영한 뒤에 바로 합치겠슴다! 근데 아마 내일 작업 예정 :(

Good 천천히 해 :)

[bsy1141]

@asdf99245 말해준 부분 수정 완료! 합칠게요우