-
+
= ({ isVisible, setIsImageLoaded, spicy }) => (
diff --git a/src/components/landing/FoodSection.tsx b/src/components/landing/FoodSection.tsx
index f7038a1..38855a4 100644
--- a/src/components/landing/FoodSection.tsx
+++ b/src/components/landing/FoodSection.tsx
@@ -1,14 +1,12 @@
import { Link } from 'react-router-dom';
import { IoIosArrowForward } from 'react-icons/io';
import FoodsCarousel from './FoodsCarousel';
-import { Dispatch, SetStateAction } from 'react';
interface FoodSectionProps {
spicy: number | null;
- setConfirmFlavor: Dispatch>;
}
-const FoodSection: React.FC = ({ spicy, setConfirmFlavor }) => {
+const FoodSection: React.FC = ({ spicy }) => {
return (
{title1}
{title2}
{children}
diff --git a/src/components/landing/FirstSection.tsx b/src/components/landing/FirstSection.tsx
index c4256ac..7b4704c 100644
--- a/src/components/landing/FirstSection.tsx
+++ b/src/components/landing/FirstSection.tsx
@@ -3,7 +3,7 @@ import { Link } from 'react-router-dom';
interface FirstSectionProps {
isVisible: boolean;
setIsImageLoaded: (loaded: boolean) => void;
- spicy: number | null;
+ spicy: number | null | undefined;
}
const FirstSection: React.FC
@@ -17,7 +15,7 @@ const FoodSection: React.FC = ({ spicy, setConfirmFlavor }) =>
더보기
-
diff --git a/src/components/landing/FoodsCarousel.tsx b/src/components/landing/FoodsCarousel.tsx
index c402e12..dc30282 100644
--- a/src/components/landing/FoodsCarousel.tsx
+++ b/src/components/landing/FoodsCarousel.tsx
@@ -2,7 +2,7 @@ import 'swiper/css';
import 'swiper/css/pagination';
import ImageWithPlaceholder from './ImageWithPlaceHolder';
import { Link } from 'react-router-dom';
-import { Dispatch, SetStateAction, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
import { FoodsCarouselList } from '../../data/FoodsCarouselList';
import { Swiper, SwiperSlide } from 'swiper/react';
import { FoodsList } from '../../types/types';
@@ -11,10 +11,9 @@ import { authInstance } from '../../api/util/instance';
interface FoodsCarouselProps {
spicy: number | null;
- setConfirmFlavor: Dispatch>;
}
-const FoodsCarousel: React.FC = ({ spicy, setConfirmFlavor }) => {
+const FoodsCarousel: React.FC = ({ spicy }) => {
const [userFoods, setUserFoods] = useState(FoodsCarouselList);
const { setFoodsList } = useFoodsListStore();
@@ -38,7 +37,6 @@ const FoodsCarousel: React.FC = ({ spicy, setConfirmFlavor }
})
.catch((err) => {
console.error('Error fetching foods:', err);
- setConfirmFlavor(false);
});
}
}, [spicy]);
diff --git a/src/components/myprofile/FTILink.tsx b/src/components/myprofile/FTILink.tsx
new file mode 100644
index 0000000..fc4a676
--- /dev/null
+++ b/src/components/myprofile/FTILink.tsx
@@ -0,0 +1,17 @@
+import { Link } from 'react-router-dom';
+
+interface FTILinkProps {
+ ftiType: string | null;
+}
+
+export const FTILink: React.FC = ({ ftiType }) => {
+ return ftiType ? (
+
+
+
+);
diff --git a/src/components/myprofile/ProfileForm.tsx b/src/components/myprofile/ProfileForm.tsx
new file mode 100644
index 0000000..8b4b8cb
--- /dev/null
+++ b/src/components/myprofile/ProfileForm.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import Button from '../../components/common/Button';
+import { UseFormRegister } from 'react-hook-form';
+
+interface ProfileFormProps {
+ register: UseFormRegister;
+ duplicateNickname: string;
+ handleNicknameBlur: (e: React.FocusEvent) => void;
+ isLoading: boolean;
+}
+
+export const ProfileForm: React.FC = ({
+ register,
+ duplicateNickname,
+ handleNicknameBlur,
+ isLoading,
+}) => {
+ return (
+ ) => void;
+}
+
+export const ProfileImageInput: React.FC = ({ handleImageChange }) => (
+ <>
+
+
+
+);
diff --git a/src/components/myprofile/ProfileImageSection.tsx b/src/components/myprofile/ProfileImageSection.tsx
new file mode 100644
index 0000000..1b10578
--- /dev/null
+++ b/src/components/myprofile/ProfileImageSection.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import { FTILink } from './FTILink';
+import { LoadingSpinner } from './LoadingSpinner';
+import { ProfileImageInput } from './ProfileImageInput';
+
+interface ProfileImageSectionProps {
+ profileImg: string;
+ isLoading: boolean;
+ handleImageChange: (e: React.ChangeEvent) => void;
+ ftiType: string | null;
+}
+
+export const ProfileImageSection: React.FC = ({
+ profileImg,
+ isLoading,
+ handleImageChange,
+ ftiType,
+}) => {
+ return (
+ = ({ text, src, isUserLoggedIn }) => {
+ className="flex w-full cursor-pointer items-center justify-between p-[12px] text-[20px] hover:rounded-lg hover:font-bold hover:text-primary xs:py-[0.7rem] xs:text-[14px]">
{text}
(false);
const [isImageLoaded, setIsImageLoaded] = useState(false);
- const [confirmFlavor, setConfirmFlavor] = useState(false);
- const [spicy, setSpicy] = useState(null);
+ const [spicy, setSpicy] = useState(undefined);
useEffect(() => {
const checkLoginStatus = async () => {
@@ -20,15 +19,11 @@ const Landing: React.FC = () => {
token = await refreshAccessToken('noErrorCode');
}
if (token) {
- setConfirmFlavor(true);
const res = await authInstance.get('/api/profile/');
setSpicy(res.data.spicy_preference);
- } else {
- setConfirmFlavor(false);
}
} catch (error) {
console.error('Failed to fetch profile or refresh token:', error);
- setConfirmFlavor(false);
}
};
checkLoginStatus();
@@ -44,7 +39,7 @@ const Landing: React.FC = () => {
return (
{
const [selectedBoard, setSelectedBoard] = useState('전체'); // 초기값을 '전체'로 설정
@@ -20,6 +22,8 @@ const Board = () => {
}[]
>([]); // 게시판 목록 상태 추가
const [isLoading, setIsLoading] = useState(true); // 로딩 상태 추가
+ const [isLoginModalOpen, setIsLoginModalOpen] = useState(false); // 로그인 모달 상태 추가
+ const navigate = useNavigate(); // useNavigate 훅 사용
useEffect(() => {
setSelectedBoard('전체'); // 컴포넌트가 처음 렌더링될 때 '전체'로 설정
@@ -28,7 +32,7 @@ const Board = () => {
const fetchBoardList = async () => {
try {
- const response = await authInstance.get('/api/reviews/');
+ const response = await baseInstance.get('/api/reviews/');
setBoardList(response.data.reviews);
setIsLoading(false);
} catch (error) {
@@ -37,6 +41,15 @@ const Board = () => {
}
};
+ const checkLogin = () => {
+ const token = getCookie('refresh');
+ if (!token) {
+ setIsLoginModalOpen(true); // 로그인 모달 열기
+ } else {
+ navigate('/board/boardpost'); // 로그인 되어 있으면 게시물 작성 페이지로 이동
+ }
+ };
+
const filteredBoardList =
selectedBoard === '전체'
? boardList
@@ -50,11 +63,6 @@ const Board = () => {
return setIsLoginModalOpen(false)}>
+
);
};
diff --git a/src/pages/board/BoardPost.tsx b/src/pages/board/BoardPost.tsx
index d14ae86..ea1d1cd 100644
--- a/src/pages/board/BoardPost.tsx
+++ b/src/pages/board/BoardPost.tsx
@@ -1,5 +1,5 @@
import { IoCloseOutline } from 'react-icons/io5';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
import ModalCenter from '../../components/common/ModalCenter';
import 'react-day-picker/dist/style.css';
import { motion } from 'framer-motion';
@@ -7,6 +7,7 @@ import imageCompression from 'browser-image-compression';
import { useForm, SubmitHandler } from 'react-hook-form';
import { useNavigate } from 'react-router-dom'; // useNavigate import 추가
import { authInstance } from '../../api/util/instance'; // authInstance 가져오기
+import { getCookie } from '../../utils/cookie';
interface FormData {
title: string;
@@ -27,6 +28,12 @@ const BoardPost = () => {
const [representativeImage, setRepresentativeImage] = useState(null); // 대표 이미지
const [modalMessage, setModalMessage] = useState({ title1: '', title2: '' }); // 모달 메시지
+ useEffect(() => {
+ if (!getCookie('refresh')) {
+ navigate('/');
+ }
+ }, [navigate]);
+
// 중앙 모달의 열림/닫힘 상태 modal
const toggleCenterModal = () => {
setIsCenterModalOpen((prev) => !prev);
diff --git a/src/pages/myprofile/MyProfile.tsx b/src/pages/myprofile/MyProfile.tsx
index 90aeb0f..b4bdc07 100644
--- a/src/pages/myprofile/MyProfile.tsx
+++ b/src/pages/myprofile/MyProfile.tsx
@@ -1,27 +1,35 @@
import { Link } from 'react-router-dom';
+import { motion } from 'framer-motion';
+import { useEffect, useState } from 'react';
+import { IoIosArrowForward } from 'react-icons/io';
+import Loading from '../../components/common/Loading';
import UserInfo from '../../components/myprofile/UserInfo';
import UserLink from '../../components/myprofile/UserLink';
-import { useEffect, useState } from 'react';
+import ModalBottom from '../../components/common/ModalBottom';
import ModalCenter from '../../components/common/ModalCenter';
-import { authInstance } from '../../api/util/instance';
-import Loading from '../../components/common/Loading';
+import { authInstance, logout } from '../../api/util/instance';
const MyProfile = () => {
- const [isModalCenterOpen, setIsModalCenterOpen] = useState(false);
- const openModalCenter = () => setIsModalCenterOpen(true);
- const closeModalCenter = () => setIsModalCenterOpen(false);
- const [user, setuser] = useState();
+ const [user, setUser] = useState(undefined);
const [isLoading, setIsLoading] = useState(true);
+ const [isModalCenterOpen, setIsModalCenterOpen] = useState(false);
+ const [isLogoutConfirmOpen, setIsLogoutConfirmOpen] = useState(false);
useEffect(() => {
- authInstance.get('/api/profile').then((res) => {
- setuser(res.data);
- setIsLoading(false);
- });
+ const fetchUserProfile = async () => {
+ try {
+ const res = await authInstance.get('/api/profile');
+ setUser(res.data);
+ } catch (error) {
+ console.error('Failed to fetch user profile', error);
+ } finally {
+ setIsLoading(false);
+ }
+ };
+ fetchUserProfile();
}, []);
const openPopup = (url: string) => {
- // 모바일에서는 새 창으로 열리는지 확인 필요
const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
if (isMobile) {
window.open(url, '_blank');
@@ -33,7 +41,18 @@ const MyProfile = () => {
const handlePreventNavigate = (e: React.MouseEvent) => {
if (!user) {
e.preventDefault();
- openModalCenter();
+ setIsModalCenterOpen(true);
+ }
+ };
+
+ const handleLogout = () => {
+ try {
+ logout('noRedirect');
+ setUser(undefined);
+ } catch (error) {
+ console.error('Failed to log out', error);
+ } finally {
+ setIsLogoutConfirmOpen(false);
}
};
@@ -43,48 +62,64 @@ const MyProfile = () => {
return (
<>
- <>
- {user ?
+
+
+ {user !== undefined && (
+ setIsLogoutConfirmOpen(true)}
+ whileHover={{ scale: 1.03 }}
+ transition={{ type: 'spring', stiffness: 200 }}>
+
+ )}
+
+ onClose={() => setIsModalCenterOpen(false)}>
+ setIsLogoutConfirmOpen(false)}>
+
+
);
};
diff --git a/src/pages/myprofile/MyProfileBoard.tsx b/src/pages/myprofile/MyProfileBoard.tsx
index ec84301..f45f8a6 100644
--- a/src/pages/myprofile/MyProfileBoard.tsx
+++ b/src/pages/myprofile/MyProfileBoard.tsx
@@ -1,9 +1,10 @@
import { useEffect, useState } from 'react';
import PostNav from '../../components/myprofile/PostNav';
import BoardCard from '../../components/board/BoardCard.tsx';
-import { Link } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
import { authInstance } from '../../api/util/instance.ts';
import Loading from '../../components/common/Loading.tsx';
+import { getCookie } from '../../utils/cookie.ts';
interface BoardItem {
uuid: string;
@@ -20,6 +21,13 @@ const MyProfileBoard = () => {
const [selectedItem, setSelectedItem] = useState('작성한 글');
const [boardList, setBoardList] = useState([]);
const [isLoading, setIsLoading] = useState(true);
+ const navigate = useNavigate();
+
+ useEffect(() => {
+ if (!getCookie('refresh')) {
+ navigate('/');
+ }
+ }, [navigate]);
useEffect(() => {
setIsLoading(true);
diff --git a/src/pages/myprofile/MyProfileEdit.tsx b/src/pages/myprofile/MyProfileEdit.tsx
index 4244f17..80e3ef0 100644
--- a/src/pages/myprofile/MyProfileEdit.tsx
+++ b/src/pages/myprofile/MyProfileEdit.tsx
@@ -1,35 +1,38 @@
-import { useEffect, useState } from 'react';
-import { Link, useLocation, useNavigate } from 'react-router-dom';
-import { useForm } from 'react-hook-form';
-import imageCompression from 'browser-image-compression';
+import React, { useState, useEffect } from 'react';
import Button from '../../components/common/Button';
+import ModalCenter from '../../components/common/ModalCenter';
import ProfileModal from '../../components/myprofile/ProfileModal';
-import { motion } from 'framer-motion';
+import imageCompression from 'browser-image-compression';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { useForm } from 'react-hook-form';
import { authInstance, baseInstance } from '../../api/util/instance';
import { getCookie } from '../../utils/cookie';
+import { ProfileImageSection } from '../../components/myprofile/ProfileImageSection';
+import { ProfileForm } from '../../components/myprofile/ProfileForm';
-type FormData = {
+interface FormData {
nickname: string;
introduce: string;
-};
+}
const MyProfileEdit = () => {
const location = useLocation();
const user = location.state?.user;
- const [profileImg, setProfileImg] = useState(user?.profileImageUrl || '/images/anonymous_avatars.svg');
- const [compressedFile, setCompressedFile] = useState(null);
- console.log(compressedFile);
+ const navigate = useNavigate();
+
+ const [profileImg, setProfileImg] = useState(user?.profile_image_url || '/images/anonymous_avatars.svg');
const [duplicateNickname, setDuplicateNickname] = useState('');
const [isModalOpen, setIsModalOpen] = useState(false);
const [preview, setPreview] = useState(null);
const [originalFileName, setOriginalFileName] = useState('profileImage');
const [isLoading, setIsLoading] = useState(false);
- const navigate = useNavigate();
+ const [modalSuccess, setModalSuccess] = useState(null);
+ const [imageFile, setImageFile] = useState(null); // 이미지 파일을 저장하는 state
- const { register, handleSubmit } = useForm({
+ const { register, handleSubmit, setValue } = useForm({
defaultValues: {
nickname: user?.nickname || '',
- introduce: user?.introduce || '',
+ introduce: user?.introduction || '',
},
});
@@ -37,18 +40,15 @@ const MyProfileEdit = () => {
if (!getCookie('refresh')) {
navigate('/');
}
- }, []);
+ }, [navigate]);
- const handleInputImageChanged = async (e: React.ChangeEvent) => {
+ const handleImageChange = async (e: React.ChangeEvent) => {
if (e.target.files) {
const file = e.target.files[0];
if (file) {
setOriginalFileName(file.name);
- //이미지 파일을 fileReader가 읽음
const reader = new FileReader();
- // 읽기에 성공하면 내부코드를 실행함. result에 데이터 URL이 저장됨. readAsDataURL보다 먼저 정의 되어야 하는 이유는 이벤트는 실행되기 전에 먼저 정의되어 있어야 하기 때문. 41줄이 실행완료되면 reader.onload가 실행될 것
reader.onload = () => {
- // 모달에서 이미지를 미리보기로 보기 위해서 preview로 전달함
setPreview(reader.result as string);
setIsModalOpen(true);
};
@@ -57,39 +57,23 @@ const MyProfileEdit = () => {
}
};
- const handleCroppedImageToWebp = async (croppedFile: File) => {
+ const handleImageCompression = async (croppedFile: File) => {
+ setIsLoading(true);
try {
- setIsLoading(true);
- const options = {
- maxSizeMB: 1,
- };
- const compressedFile = await imageCompression(croppedFile, options);
- setCompressedFile(compressedFile);
- // 압축된 이미지의 미리보기를 위한 URL
+ const compressedFile = await compressImage(croppedFile);
+ setImageFile(compressedFile); // 압축된 이미지를 state에 저장
const compressedImageUrl = URL.createObjectURL(compressedFile);
setProfileImg(compressedImageUrl);
} catch (error) {
- console.error('이미지를 변환하는 중에 ' + error + '가 발생 했습니다.');
+ console.error('이미지 처리 중 오류가 발생했습니다:', error);
} finally {
setIsLoading(false);
}
};
- const onSubmit = async (data: FormData) => {
- if (duplicateNickname !== '') {
- return;
- }
- const payload = {
- profile: {
- nickname: data.nickname,
- profile_image_url:
- 'https://images.unsplash.com/photo-1725203574074-a33eae85ba71?q=80&w=1412&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
- introduction: data.introduce,
- },
- };
- console.log(payload);
- const response = await authInstance.post('/api/profile', payload);
- console.log(response);
+ const compressImage = async (image: File) => {
+ const options = { maxSizeMB: 1 };
+ return await imageCompression(image, options);
};
const handleNicknameBlur = async (e: React.FocusEvent) => {
@@ -99,97 +83,97 @@ const MyProfileEdit = () => {
return;
}
try {
- const response = await baseInstance.post(`/api/users/checkNickname/`, { nickname: nickname });
- if (response.status === 200) {
- setDuplicateNickname('');
- }
+ await checkDuplicateNickname(nickname);
+ setDuplicateNickname('');
} catch (error: any) {
- if (error.response && error.response.status === 400) {
- setDuplicateNickname(error.response.data.error);
- } else {
- console.error('닉네임 확인 중 오류가 발생했습니다.', error);
+ setDuplicateNickname(error.response?.data.error || '닉네임 확인 중 오류가 발생했습니다.');
+ }
+ };
+
+ const checkDuplicateNickname = async (nickname: string) => {
+ const response = await baseInstance.post(`/api/users/checkNickname/`, { nickname });
+ if (response.status !== 200) {
+ throw new Error('닉네임 중복 확인 실패');
+ }
+ };
+
+ const uploadImage = async (file: File) => {
+ const newFile = new File([file], file.name);
+ const formData = new FormData();
+ formData.append('input_source', 'profile');
+ formData.append('images', newFile);
+ const response = await authInstance.post('/api/common/image/', formData, {
+ headers: { 'Content-Type': 'multipart/form-data' },
+ });
+ return response.data.images_urls[0];
+ };
+
+ const onSubmit = async (data: FormData) => {
+ if (duplicateNickname) return;
+
+ try {
+ let profileImageUrl = profileImg;
+
+ if (imageFile) {
+ // 이미지 파일이 있을 경우에만 업로드
+ profileImageUrl = await uploadImage(imageFile);
}
+
+ const response = await authInstance.post('/api/profile/update/', {
+ nickname: data.nickname,
+ profile_image_url: profileImageUrl,
+ introduction: data.introduce,
+ });
+
+ setValue('nickname', response.data.nickname);
+ setProfileImg(response.data.profile_image_url);
+ setValue('introduce', response.data.introduction);
+ setModalSuccess(true);
+ } catch (error) {
+ console.error('프로필 업데이트 중 오류가 발생했습니다:', error);
+ setModalSuccess(false);
}
};
+ const closeModal = () => setModalSuccess(null);
+
return (
);
};
diff --git a/src/pages/myprofile/MyProfileThunder.tsx b/src/pages/myprofile/MyProfileThunder.tsx
index 7cea571..2b2a39d 100644
--- a/src/pages/myprofile/MyProfileThunder.tsx
+++ b/src/pages/myprofile/MyProfileThunder.tsx
@@ -1,9 +1,10 @@
import { useEffect, useState } from 'react';
import PostNav from '../../components/myprofile/PostNav';
import ThunderCard from '../../components/thunder/ThunderCard';
-import { Link } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
import { authInstance } from '../../api/util/instance';
import Loading from '../../components/common/Loading';
+import { getCookie } from '../../utils/cookie';
interface ThunderItem {
uuid: string;
@@ -21,6 +22,13 @@ const MyProfileThunder = () => {
const [selectedItem, setSelectedItem] = useState('작성한 글');
const [userSocialList, setSocialList] = useState([]);
const [isLoading, setIsLoading] = useState(true);
+ const navigate = useNavigate();
+
+ useEffect(() => {
+ if (!getCookie('refresh')) {
+ navigate('/');
+ }
+ }, [navigate]);
useEffect(() => {
setIsLoading(true);
diff --git a/src/pages/profile/ProfileId.tsx b/src/pages/profile/ProfileId.tsx
index 77bfb3f..266ba1a 100644
--- a/src/pages/profile/ProfileId.tsx
+++ b/src/pages/profile/ProfileId.tsx
@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
import Image from '../../components/common/Image';
import { baseInstance } from '../../api/util/instance';
import { useParams } from 'react-router-dom';
+import Loading from '../../components/common/Loading';
interface User {
profile_image_url?: string;
@@ -12,14 +13,25 @@ interface User {
const ProfileId = () => {
const param = useParams();
- const [user, setUser] = useState(undefined);
+ const [user, setUser] = useState();
+ const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
- baseInstance.get(`/api/profile/${param.Id}/`).then((res) => {
- setUser(res.data);
- });
+ baseInstance
+ .get(`/api/profile/${param.Id}/`)
+ .then((res) => {
+ setUser(res.data);
+ setIsLoading(false);
+ })
+ .catch(() => {
+ setIsLoading(false);
+ });
}, [param.Id]);
+ if (isLoading) {
+ return
+ setIsLoginModalOpen(false)}>
+
);
};
diff --git a/src/pages/thunder/ThunderPost.tsx b/src/pages/thunder/ThunderPost.tsx
index 65de60d..1306d70 100644
--- a/src/pages/thunder/ThunderPost.tsx
+++ b/src/pages/thunder/ThunderPost.tsx
@@ -1,7 +1,7 @@
import { MdKeyboardArrowRight } from 'react-icons/md';
import { IoMdCheckmark } from 'react-icons/io';
import { IoCloseOutline } from 'react-icons/io5';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
import ModalBottom from '../../components/common/ModalBottom';
import ModalCenter from '../../components/common/ModalCenter';
import ThunderClockModal from '../../components/thunder/ThunderClockModal';
@@ -11,6 +11,8 @@ import { motion } from 'framer-motion';
import imageCompression from 'browser-image-compression';
import { useForm, SubmitHandler } from 'react-hook-form';
import { authInstance } from '../../api/util/instance';
+import { getCookie } from '../../utils/cookie';
+import { useNavigate } from 'react-router-dom';
interface FormData {
title: string;
@@ -38,6 +40,13 @@ const ThunderPost = () => {
const [representativeImage, setRepresentativeImage] = useState(null); // 대표 이미지
const [modalMessage, setModalMessage] = useState({ title1: '', title2: '' }); // 모달 메시지
+ const navigate = useNavigate();
+ useEffect(() => {
+ if (!getCookie('refresh')) {
+ navigate('/');
+ }
+ }, [navigate]);
+
const toggleModal = () => {
setIsModalOpen((prev) => !prev);
};
{ftiType}
+ ) : ( + + FTI 설정하기 + + ); +}; diff --git a/src/components/myprofile/LoadingSpinner.tsx b/src/components/myprofile/LoadingSpinner.tsx new file mode 100644 index 0000000..fb836d4 --- /dev/null +++ b/src/components/myprofile/LoadingSpinner.tsx @@ -0,0 +1,10 @@ +import { motion } from 'framer-motion'; + +export const LoadingSpinner = () => ( +
+
+
+ {duplicateNickname &&
+ );
+};
diff --git a/src/components/myprofile/ProfileImageInput.tsx b/src/components/myprofile/ProfileImageInput.tsx
new file mode 100644
index 0000000..e9b9b42
--- /dev/null
+++ b/src/components/myprofile/ProfileImageInput.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+
+interface ProfileImageInputProps {
+ handleImageChange: (e: React.ChangeEvent{duplicateNickname}
} + + + +
+
+ );
+};
diff --git a/src/components/myprofile/UserLink.tsx b/src/components/myprofile/UserLink.tsx
index 53d7cab..953176d 100644
--- a/src/components/myprofile/UserLink.tsx
+++ b/src/components/myprofile/UserLink.tsx
@@ -28,7 +28,7 @@ const UserLink: React.FC
+ {isLoading ? (
+ 
+ )}
+
+
@@ -113,11 +121,26 @@ const Board = () => {
})}
)}
-
+
-
+
+ {/* 로그인 모달 추가 */}
+
+
+ 로그인이 필요한 서비스 입니다.
+게시글을 만들려면 먼저 로그인해주세요.
+ +
-
- 내 입맛 설정
-
-
- 내 프로필
-
-
-
-
-
-
-
-
-
+
+
+ 내 입맛 설정
+
+
+ 내 프로필
+
+
+
+ 이용약관
+
+
+ 로그아웃
+
+
+
+
+
+
+
@@ -95,6 +130,22 @@ const MyProfile = () => {
로그아웃 하시겠습니까?
+
+
+
+
+
diff --git a/src/pages/terms/Terms.tsx b/src/pages/terms/Terms.tsx
deleted file mode 100644
index dc15c8b..0000000
--- a/src/pages/terms/Terms.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-const Terms = () => {
- return ();
const [meetings, setMeetings] = useState(null);
const [isLoading, setIsLoading] = useState(true);
+ const [isLoginModalOpen, setIsLoginModalOpen] = useState(false);
+ const navigate = useNavigate();
useEffect(() => {
document.getElementById('root')?.scrollTo(0, 0);
@@ -82,6 +85,15 @@ const Thunder: React.FC = () => {
setIsSelectedList(isAll);
};
+ const checkLogin = () => {
+ const token = getCookie('refresh');
+ if (!token) {
+ setIsLoginModalOpen(true);
+ } else {
+ navigate('/thunder/thunderpost');
+ }
+ };
+
if (isLoading) {
return
)}
-
+ Terms
;
-};
-
-export default Terms;
diff --git a/src/pages/thunder/Thunder.tsx b/src/pages/thunder/Thunder.tsx
index f596111..7397d6b 100644
--- a/src/pages/thunder/Thunder.tsx
+++ b/src/pages/thunder/Thunder.tsx
@@ -1,4 +1,3 @@
-import { Link } from 'react-router-dom';
import { useState, useEffect } from 'react';
import ModalBottom from '../../components/common/ModalBottom';
import ThunderCard from '../../components/thunder/ThunderCard';
@@ -6,6 +5,8 @@ import RoundedButton from '../../components/thunder/RoundedButton';
import SelectionItem from '../../components/thunder/SelectionItem';
import { baseInstance } from '../../api/util/instance';
import Loading from '../../components/common/Loading';
+import { getCookie } from '../../utils/cookie';
+import { useNavigate } from 'react-router-dom';
interface Meeting {
uuid: string;
@@ -33,6 +34,8 @@ const Thunder: React.FC = () => {
const [selectedTime, setSelectedTime] = useState
-
+
@@ -151,6 +163,20 @@ const Thunder: React.FC = () => {
))}
+
+ 로그인이 필요한 서비스 입니다.
+일정을 만들려면 먼저 로그인해주세요.
+ +