Merge pull request #29 from Yeungnam-Nyang/feature/MyProfile

Feature/my profile

src/App.jsx

@@ -75,4 +75,4 @@ function App() {
   );
 }
 
-export default App;
+export default App

src/api/api.jsx

@@ -13,7 +13,7 @@ const api = axios.create({
 api.interceptors.request.use(
   (config) => {
     const accessToken = localStorage.getItem("token");
-    
+
     if (accessToken) {
       config.headers["Authorization"] = `Bearer ${accessToken}`;
     }

src/components/common/ButtonNopic.jsx

@@ -0,0 +1,29 @@
+export default function Button({ text, type, isValid, onClick }) {
+    // text : 버튼 이름
+    // type : 버튼 제출 타입
+    // isValid : 입력값 유효 할 시 버튼 색 변경 및 클릭 가능
+    // onClick : 클릭 시 실행 함수
+
+    return isValid ? (
+      // 버튼 활성화
+      <button
+        type={type}
+        onClick={onClick}
+        className="font-['BagelFatOne'] text-white w-10/12 m-auto h-16 gap-4 flex bg-black text-xl justify-center 
+        items-center shadow-2xl hover:scale-110 duration-500 rounded-[40px]"
+      >
+        {text}
+      </button>
+    ) : (
+      // 버튼 비활성화
+      <button
+        type={type}
+        disabled
+        className="font-['BagelFatOne'] text-black w-10/12 m-auto h-16 gap-4 flex bg-white text-xl justify-center 
+        items-center shadow-2xl rounded-[40px]"
+      >
+        {text}
+      </button>
+    );
+  }
+

src/components/common/title.jsx

@@ -0,0 +1,17 @@
+
+export default function Title({ text, select = "paw" }) {
+  return (
+    <div className="flex items-center p-3 gap-4 ">
+      <img
+        alt="foot"
+        src={
+          select === "fire"
+            ? `${import.meta.env.VITE_PUBLIC_URL}/assets/images/icon_fire.png`
+            : `${import.meta.env.VITE_PUBLIC_URL}/assets/images/icon_pow.png`
+        }
+        className="w-12 h-auto"
+      />
+      <h1 className="font-['Bungee'] text-4xl">{text}</h1>
+    </div>
+  );
+}

src/components/nyangmap/CatMarker.jsx

@@ -1,15 +1,15 @@
 import { CustomOverlayMap } from "react-kakao-maps-sdk";
 
 export default function CatMarker({ post, onClick }) {
-  console.log(post);
+
   return (
     <CustomOverlayMap position={{ lat: post.latitude, lng: post.longitude }}>
       <div className="group cursor-pointer animate-bounce" onClick={onClick}>
         <div className="relative flex flex-col items-center">
           {/* 이미지 컨테이너 */}
           <div className="z-10 w-16 h-16 rounded-full border-4 border-orange  overflow-hidden transition-transform duration-300 group-hover:scale-110">
             <img
-              src={post.postPictureUrl}
+              src={post.postPictureUrl[0]}
               alt="Cat"
               className="w-full h-full object-cover"
             />

src/index.css

@@ -20,7 +20,7 @@ html {
 
 @media (max-width: 768px) {
   html {
-    font-size: 14px; 
+    font-size: 14px;
   }
 }
 

src/pages/FriendList.jsx

@@ -0,0 +1,3 @@
+export default function FriendList() {
+  return <></>;
+}

src/pages/Login/FindId.css

@@ -1,29 +1,20 @@
-.Findid-Container{
+.Find-Container{
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    padding: 20px;
+    padding: 1.25rem;
     min-height: 100vh;
 
 }
 
 
-.input-field {
-    width: 85%;
-    padding: 25px;
-    border: 1px solid #ddd; /* 경계선 색상 설정 */
-    border-radius: 30px; /* 경계선 둥글게 */
-    font-size: 16px; /* 폰트 크기 설정 */
-
-
-}
-  .Findid-tittle {
+  .Find-tittle {
     font-family: 'Bungee'; /* 저장된 폰트로 설정 */
-    font-size: 40px; /* 폰트 크기 설정 */
+    font-size: 2.5rem; /* 폰트 크기 설정 */
     color: #000000; /* 글자 색상 설정 */
-    margin-bottom: 50px;
-  
+    margin-bottom: 3rem;
+
 }
 
   .popup-overlay {
@@ -38,26 +29,25 @@
     justify-content: center;
   }
 
-  .popup {
+  .popupid {
     background: white;
-    padding: 20px;
-    border-radius: 8px;
+    padding: 1.25rem;
+    border-radius: 0.5rem;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
     display: flex;
     flex-direction: column; /* 세로로 쌓이도록 설정 */
-    border-radius: 8px;
-    width: 500px;
-    height: 300px;
+    width: 31.25rem;
+    height: 18.75rem;
   }
 
   .popup-title {
     margin: 0; /* 기본 마진 제거 */
-    margin-bottom: 50px; /* 제목과 아이디 간 간격 */
+    margin-bottom: 3.125rem; /* 제목과 아이디 간 간격 */
   }
 
   .popup-id {
     text-align: center; /* 텍스트 중앙 정렬 */
-    font-size: 30px; /* 아이디 글자 크기 설정 (원하는 크기로 조정 가능) */
+    font-size: 2rem; /* 아이디 글자 크기 설정 (원하는 크기로 조정 가능) */
     font-weight: bold; /* 아이디 볼드 설정 */
   }
 
@@ -66,5 +56,5 @@
   }
 
   .popup-button {
-    margin-top: 20px; /* 버튼과 다른 요소 간 간격 */
+    margin-top: 1.25rem; /* 버튼과 다른 요소 간 간격 */
   }

src/pages/Login/FindId.jsx

@@ -6,7 +6,7 @@ import './FindId.css';
 function Popup({ name, id, onClose }) {
   return (
     <div className="popup-overlay">
-      <div className="popup">
+      <div className="popupid">
         <h3 className="popup-title">{name} 님의 아이디</h3>
         <p className="popup-id"><span className="popup-user-id">{id}</span></p>
         <Button text='확인' isValid={true} onClick={onClose} className='popup-button' />
@@ -22,11 +22,11 @@ export default function FindId() {
   const [name, setName] = useState(""); // 사용자 이름
   const [schoolName, setSchoolName] = useState(""); // 학교 이름
   const [studentNumber, setStudentNumber] = useState(""); // 학번
-
+  const API_URL=import.meta.env.VITE_SERVER_URL;
   const handleButtonClick = async () => {
     // 서버에 요청을 보내고 응답을 확인
     try {
-      const response = await fetch('http://localhost:8080/api/find/id', {
+      const response = await fetch(`${API_URL}/api/find/id`, {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
@@ -60,9 +60,9 @@ export default function FindId() {
 
   return (
     <>
-      <div className='Findid-Container'>
+      <div className='Find-Container'>
         <Logo />
-        <h2 className='Findid-tittle'>FIND ID</h2>
+        <h2 className='Find-tittle'>FIND ID</h2>
         <input
           type="text"
           value={schoolName}
@@ -91,3 +91,4 @@ export default function FindId() {
     </>
   );
 }
+

src/pages/Login/FindPassword.css

@@ -0,0 +1,23 @@
+
+.popup{  position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.5); /* 반투명 배경 */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.popup-inner{
+    background: white;
+    padding: 1.25rem;
+    border-radius: 0.5rem;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    display: flex;
+    flex-direction: column; /* 세로로 쌓이도록 설정 */
+    border-radius: 0.5rem;
+    width: 31.25rem;
+    height: 18.75rem;
+}

src/pages/Login/FindPassword.jsx

@@ -1,13 +1,89 @@
-import React from 'react';
+import React, { useState } from 'react';
 import Logo from '../../components/common/Logo';
 import Button from "../../components/common/Button";
+import './FindPassword.css';
+import axios from 'axios';
 
 export default function FindPassword() {
-  return <>
-  <div className='Findpw-Container'>
-    <Logo />
-    <Button text={""} isValid={true}  />
-  </div>
-
-  </>;
+  const [userId, setUserId] = useState("");
+  const [userQuestion, setQuestion] = useState('');
+  const [userAnswer, setAnswer] = useState('');
+  const [tempPassword, setTempPassword] = useState('');
+  const [showPopup, setShowPopup] = useState(false);
+  const API_URL=import.meta.env.VITE_SERVER_URL;
+  const questions = [
+    "당신이 태어난 도시의 이름은 무엇입니까?",
+    "당신의 첫 번째 학교 이름은 무엇입니까?",
+    "당신이 가장 좋아하는 음식은 무엇입니까?",
+    "당신의 첫 번째 애완동물 이름은 무엇입니까?",
+    "당신의 어머니의 이름은 무엇입니까?",
+  ];
+
+  const handleButtonClick = async () => {
+    try {
+      // 서버로 요청 보낼 데이터s
+      const requestData = {
+        userId,
+        userQuestion,
+        userAnswer
+      };
+
+      // 서버로 POST 요청 보내기
+      const response = await axios.post(`${API_URL}/api/send/new-password`, requestData);
+
+      // 서버로부터 임시 비밀번호 받기
+      setTempPassword(response.data.tempPassword);
+      setShowPopup(true); // 팝업 띄우기
+    } catch (error) {
+      alert('정보를 확인해주세요. 오류가 발생했습니다.');
+      console.error(error);
+    }
+  };
+
+  return (
+    <>
+      <div className='Find-Container'>
+        <Logo />
+        <h2 className='Find-tittle'>FIND PW</h2>
+        <input
+          type="text"
+          value={userId}
+          onChange={(e) => setUserId(e.target.value)}
+          placeholder="아이디를 입력하세요."
+          className="input-field"
+        />
+        <select
+          id="questionDropdown"
+          value={userQuestion}
+          onChange={(e) => setQuestion(e.target.value)}
+          className="Select"
+        >
+          <option value="">질문을 선택하세요.</option>
+          {questions.map((question, index) => (
+            <option key={index} value={question}>{question}</option>
+          ))}
+        </select>
+        <input
+          type="text"
+          value={userAnswer}
+          onChange={(e) => setAnswer(e.target.value)}
+          placeholder="답변을 입력하세요."
+          className="input-field"
+        />
+        <Button type="button" text={"임시 PW 받기"} isValid={true} onClick={handleButtonClick} />
+      </div>
+
+      {/* 팝업 모달 */}
+      {showPopup && (
+        <div className="popup">
+          <div className="popup-inner">
+
+            <p>{tempPassword}</p> {/* 서버에서 받은 임시 비밀번호 표시 */}
+
+            <Button text={"닫기"} isValid={true} onClick={() => setShowPopup(false)}/>
+          </div>
+        </div>
+      )}
+    </>
+  );
 }