Feat: 구글 로그인 외에 모든 기능 구현

Author: mimizae

src/pages/AccountSetting/index.tsx

@@ -15,6 +15,7 @@ import back from '../../assets/back.svg';
 import request, { BaseResponse } from '../../apis/core';
 import { UserProfileResponse } from '../ProfileEdit/dto';
 import imageBasic from '../../assets/imageBasic.svg';
+import Loading from '../../components/Loading';
 
 const AccountSetting: React.FC = () => {
 	const navigate = useNavigate();
@@ -68,7 +69,7 @@ const AccountSetting: React.FC = () => {
 	};
 
 	if (!userProfile) {
-		return <div>Loading...</div>; // 로딩 상태
+		return <Loading/>; // 로딩 상태
 	}
 
 	return (

src/pages/Login/components/Naver/NaverCallback.tsx

@@ -16,7 +16,7 @@ const NaverCallback: React.FC = () => {
 
         if (code) {
             // 인증 코드를 쿼리스트링으로 백엔드 서버에 전송
-            axios.get(`https://api-dev.oodd.today/auth/login/naver?code=${code}`)
+            axios.get(`https://api-dev.oodd.today/auth/login/naver?code=${code}&state=STATE_TOKEN`)
                 .then(response => {
                     const statusCode = response.status; // 200 OK
                     console.log(JSON.stringify(response.data))

src/pages/Mypage/index.tsx

@@ -156,7 +156,7 @@ const MyPage: React.FC = () => {
 						<Avatar src={user?.profilePictureUrl || imageBasic} alt="User Avatar" />
 					</AvatarWrapper>
 					<UserInfo>
-						<Username>{user?.name || '김아무개...'}</Username>
+						<Username>{user?.nickname || '김아무개...'}</Username>
 						<Bio>{user?.bio || '소개글이 없습니다.'}</Bio>
 					</UserInfo>
 				</Header>

src/pages/ProfileEdit/index.tsx

@@ -12,6 +12,7 @@ import { BaseResponse } from '../MyPost/dto';
 import BottomButton from '../../components/BottomButton';
 import { UserProfileResponse } from './dto';
 import imageBasic from '../../assets/imageBasic.svg';
+import Loading from '../../components/Loading';
 
 const ProfileEdit: React.FC = () => {
 	const fileInputRef = useRef<HTMLInputElement>(null);
@@ -82,7 +83,7 @@ const ProfileEdit: React.FC = () => {
 	};
 
 	if (!userProfile) {
-		return <div>Loading...</div>; // 또는 로딩 스피너 등을 사용할 수 있습니다.
+		return <Loading/>; // 또는 로딩 스피너 등을 사용할 수 있습니다.
 	}
 
 	return (

src/pages/ProfileViewer/components/ReportText/index.tsx

@@ -3,21 +3,41 @@ import { Textarea, ReportButton, ReportTextLayout } from "./style";
 import { StyledText } from "../../../../components/Text/StyledText";
 import theme from "../../../../styles/theme";
 import {ReportTextProps} from '../../dto';
+import request from "../../../../apis/core";
+import { useParams } from "react-router-dom";
 
-const ReportText: React.FC<ReportTextProps> = ({ onCloseBottomSheet, setIsInputVisible }) => {
+const ReportText: React.FC<ReportTextProps> = ({ onCloseBottomSheet, setIsInputVisible, handleOpenModal }) => {
     const [inputValue, setInputValue] = useState('');
+    const myid = localStorage.getItem('id');
+    const { userId } = useParams<{ userId: string }>(); 
 
+    const userDetail = JSON.parse(localStorage.getItem(`userDetails_${userId}`) || '{}');
     const handleInputChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
         setInputValue(event.target.value);
     };
 
     const handleReportSubmit = () => {
         console.log("Reported with input:", inputValue);
+        Report(inputValue);
         setInputValue("");
         onCloseBottomSheet(); // 바텀 시트 닫기
         setIsInputVisible(false); // 입력창 숨기기
     };
 
+    const Report = async (inputValue: string) => {
+        try {
+            await request.patch(`/user-report`, {
+                fromUserId: Number.parseInt(myid as string),
+                toUserId: Number.parseInt(userId as string),
+                reason: inputValue
+            });
+        handleOpenModal(`${userDetail.nickname}님을 \n'${inputValue}' 사유로 신고했어요.`);
+        } catch (error) {
+            console.error('Failed to fetch user details', error);
+        }
+    };
+
+
     return (
         <ReportTextLayout>
             <Textarea

src/pages/ProfileViewer/dto.ts

@@ -38,6 +38,7 @@ export interface RequestComponentProps {
 export interface ReportTextProps {
     onCloseBottomSheet: () => void;
     setIsInputVisible: (visible: boolean) => void;
+    handleOpenModal: (message: string) => void;
 }
 
 export const mainMenuItems = (
@@ -71,55 +72,48 @@ export const reportMenuItems = (
             console.log("Report 1");
             Report('불법정보');
         },
-        icon: ReportIcon
     },
     {
         text: "욕설/인신공격",
         action: () => {
             console.log("Report 2");
             Report('욕설/인신공격');
         },
-        icon: ReportIcon
     },
     {
         text: "음란성/선정성",
         action: () => {
             console.log("Report 3");
             Report('음란성/선정성');
         },
-        icon: ReportIcon
     },
     {
         text: "영리목적/홍보성",
         action: () => {
             console.log("Report 4");
             Report('영리목적/홍보성');
         },
-        icon: ReportIcon
     },
     {
         text: "개인정보노출",
         action: () => {
             console.log("Report 5");
             Report('개인정보노출');
         },
-        icon: ReportIcon
     },
     {
         text: "같은 내용의 반복 게시(도배)",
         action: () => {
             console.log("Report 6");
             Report('같은 내용의 반복 게시(도배)');
         },
-        icon: ReportIcon
     },
     {
         text: "직접입력",
         action: () => {
             handleDirectInput();
             // 직접 입력 처리 후 Report 호출이 필요할 수 있음
         },
-        icon: ReportIcon
     }
 ];
 

src/pages/ProfileViewer/index.tsx

@@ -100,6 +100,10 @@ const ProfileViewer: React.FC = () => {
         setIsBottomSheetOpen(false);
         setActiveBottomSheet(null);
     };
+    const handleOpenModal = (message: string) => {
+        setModalContent(message);
+        setIsModalOpen(true);
+    };
 
     const handleOpenConfirmationModal = () => {
         if (!isBlockingAllowed) {
@@ -227,6 +231,7 @@ const ProfileViewer: React.FC = () => {
                                 <ReportText 
                                     onCloseBottomSheet={handleCloseBottomSheet} 
                                     setIsInputVisible={setIsInputVisible}
+                                    handleOpenModal={handleOpenModal}
                                 />
                             )}
                         </>

src/pages/ProfileViewer/style.tsx

@@ -6,8 +6,6 @@ export const ProfileViewerContainer = styled.div`
     display: flex;
     flex-direction: column;
     align-items: center;
-    height: 100%;
-    box-shadow: 0 0 0.625rem rgba(0, 0, 0, 0.1); // 구분용 10px
     position: relative;
 `;