Merge pull request #72 from SeeATheater/dev

fix: 배포된 환경에서 카카오톡 로그인 가능하도록 수정

Author: kwaktato

src/components/Login/KakaoLoginButton.jsx

@@ -3,9 +3,7 @@ import KaKaoLogo from '@/assets/icons/KakaoRound.svg?react';
 
 function KakaoLoginButton() {
 	const client_id = import.meta.env.VITE_KAKAO_CLIENT_ID;
-	// const redirect_uri = import.meta.env.VITE_KAKAO_REDIRECT_URI;
-	const redirect_uri = 'http://localhost:5173/auth/kakao/callback';
-	// const redirect_uri = 'https://seeatheater.site/auth/kakao/callback';
+	const redirect_uri = import.meta.env.VITE_KAKAO_REDIRECT_URI;
 	const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${client_id}&redirect_uri=${redirect_uri}&response_type=code`;
 
 	const handleKakaoLogin = () => {

src/pages/production/UploadPic.jsx

@@ -6,7 +6,8 @@ import Select from 'react-select';
 import useAxios from '@/utils/hooks/useAxios';
 import { getPresignedUrl } from '@/utils/apis/getPresignedUrl';
 import { uploadImageToS3 } from '@/utils/apis/uploadImageToS3';
-import useCustomFetch from '@/utils/hooks/useAxios';
+//import useCustomFetch from '@/utils/hooks/useAxios';
+import useCustomFetch from '@/utils/hooks/useCustomFetch';
 
 import ImageUploadBox from '@/components/ImageUploadBox2';
 import TopBar from '@/components/TopBar';
@@ -22,6 +23,7 @@ function UploadPic() {
 		{ title: '킬링시저', date: '25.06.10~25.06.13' },
 	];
 
+	const [file, setFile] = useState(null);
 	const [selected, setSelected] = useState(null);
 	const [menuOpen, setMenuOpen] = useState(false);
 	const [showModal, setShowModal] = useState(false);
@@ -31,32 +33,47 @@ function UploadPic() {
 	const [textContent, setTextContent] = useState('');
 	const isFormValid = Boolean(selected?.title && selected?.date && file);
 
-	const baseOptions = data.map((item) => ({
-		value: `${item.title}-${item.date}`,
+	const searchInput = encodeURIComponent(inputValue);
+	const {
+		data: searchData,
+		error: searchError,
+		loading: searchLoading,
+	} = useCustomFetch(`/search?keyword=${searchInput}&page=0&size=10`);
+	//console.log('입력값:', inputValue);
+	//console.log(searchInput);
+	//console.log('결과:', searchData);
+	//console.log(searchLoading);
+	//console.log('선택된 항목:', selected)
+
+	const searchOptions = (searchData?.result?.content || []).map((item) => ({
+		value: item.showId,
 		title: item.title,
-		date: item.date,
+		date: item.schedule,
 		label: (
 			<LabelWrapper>
-				<Title>{item.title}</Title>
-				<Date>{item.date}</Date>
+				{item.posterImageUrl && (
+					<img
+						src={item.posterImageUrl}
+						alt={item.title}
+						style={{ width: 30, height: 40, marginRight: 8, borderRadius: 4 }}
+					/>
+				)}
+				<div>
+					<Title>{item.title}</Title>
+					<Date>{item.schedule}</Date>
+				</div>
 			</LabelWrapper>
 		),
 	}));
 
 	const options = [
-		...baseOptions,
-		...customOptions,
+		...searchOptions,
 		{
 			value: 'custom',
 			label: <Title>직접 입력</Title>,
 		},
 	];
 
-	const filteredOptions = baseOptions.filter(
-		(option) =>
-			option.title.includes(inputValue) || option.date.includes(inputValue),
-	);
-
 	const handleSelectChange = (option) => {
 		if (option.value === 'custom') {
 			setShowModal(true);
@@ -124,26 +141,31 @@ function UploadPic() {
 			const extension = file.name.split('.').pop().toLowerCase();
 
 			const { uploadUrl, publicUrl, keyName } = await getPresignedUrl(
+				axiosClient,
 				extension,
 				'photoAlbum',
 			);
 
-			console.log('✅ S3 응답:', uploadUrl); // 디버깅용
-			console.log('✅ keyName:', keyName); // 디버깅용
-			console.log('✅ publicUrl:', publicUrl); // 디버깅용
+			console.log('S3 응답:', uploadUrl); // 디버깅용
+			console.log('keyName:', keyName); // 디버깅용
+			console.log('publicUrl:', publicUrl); // 디버깅용
 
-			const url = `https://ccbucket-0528.s3.ap-northeast-2.amazonaws.com/${uploadUrl}`;
-			await uploadImageToS3(axiosClient, extension, url);
+			//const url = `https://ccbucket-0528.s3.ap-northeast-2.amazonaws.com/${uploadUrl}`;
+			await uploadImageToS3(axiosClient, extension, uploadUrl);
 
 			const postBody = {
-				//추후 ID 수정
-				amateurShowId: 4,
+				amateurShowId: selected.value,
 				content: textContent,
-				imageRequestDTOs: [{ keyName, imageUrl: publicUrl }],
+				imageRequestDTOs: [{ keyName: keyName, imageUrl: publicUrl }],
 			};
+			console.log(postBody);
 
 			const res = await fetchData('/photoAlbums', 'POST', postBody);
-			if (!res.ok) throw new Error(`서버 응답 오류: ${res.status}`);
+			//console.log(postBody)
+			if (res.status !== 200 && res.status !== 201) {
+				throw new Error(`서버 응답 오류: ${res.status}`);
+			}
+			console.log('응답 데이터:', res.data);
 			alert('등록 완료!');
 		} catch (err) {
 			console.error(err);
@@ -216,7 +238,7 @@ function UploadPic() {
 									/>
 									{menuOpen && (
 										<Dropdown>
-											{filteredOptions.map((option, idx) => (
+											{options.map((option, idx) => (
 												<OptionItem
 													key={idx}
 													onClick={() => {

src/utils/hooks/useCustomFetch.js

@@ -24,7 +24,7 @@ const useCustomFetch = (url, method = 'GET', body = null) => {
 				data: customBody,
 			});
 			setData(response.data);
-			return response.data;
+			return response;
 		} catch (err) {
 			setError(true);
 			return { isSuccess: false, message: 'API 요청 실패', error: err };

vercel.json

@@ -0,0 +1,8 @@
+{
+	"rewrites": [
+		{
+			"source": "/(.*)",
+			"destination": "/index.html"
+		}
+	]
+}