mainpage 버튼 사진 넣기 #1

potato-club · Jun 16, 2024 · 1a9919a · 1a9919a
1 parent dafe31a
commit 1a9919a
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 152 deletions.
diff --git a/frontend/src/Image/Beacon.png b/frontend/src/Image/Beacon.png
diff --git a/frontend/src/Image/NFC.png b/frontend/src/Image/NFC.png
diff --git a/frontend/src/components/Register.tsx b/frontend/src/components/Register.tsx
@@ -1,13 +1,27 @@
+import React, { useState, useEffect } from "react";
 import styled from "styled-components";
 
-function Register (){
-    return(
-        <div>
-            <RegisterBar>
-                <ResgisterBtn>등록</ResgisterBtn>
-            </RegisterBar>
-        </div>
-    )
+function Register() {
+  const [alertMessage, setAlertMessage] = useState("");
+
+  const handleRegisterClick = () => {
+    setAlertMessage("수정이 완료되었습니다");
+  };
+
+  useEffect(() => {
+    if (alertMessage) {
+      alert(alertMessage);
+      setAlertMessage(""); // 알람을 표시한 후 메시지 초기화
+    }
+  }, [alertMessage]);
+
+  return (
+    <div>
+      <RegisterBar>
+        <RegisterBtn onClick={handleRegisterClick}>수정</RegisterBtn>
+      </RegisterBar>
+    </div>
+  );
 }
 
 export default Register;
@@ -28,7 +42,8 @@ const RegisterBar = styled.div`
   left: 50%;
   transform: translateX(-50%);
 `;
-const ResgisterBtn = styled.button`
+
+const RegisterBtn = styled.button`
   border: none;
   outline: none;
   background-color: transparent;

diff --git a/frontend/src/containers/ChangeInformationPage/ChangeInformationPage.tsx b/frontend/src/containers/ChangeInformationPage/ChangeInformationPage.tsx
@@ -1,11 +1,18 @@
 import React, { useState } from "react";
 import styled from "styled-components";
 import RegisterBar from "../../components/Register";
+import {useNavigate} from "react-router-dom";
 
 function ChangeInformationPage() {
   const [thirdChecked, setThirdChecked] = useState(false);
   const [seventhChecked, setSeventhChecked] = useState(false);
 
+  const movebtn = useNavigate();
+
+  const ChangeBtn = () => {
+    movebtn("/main")
+  };
+
   const handleThirdCheckboxChange = () => {
     if (!thirdChecked) {
       setThirdChecked(true);
@@ -24,7 +31,7 @@ function ChangeInformationPage() {
     <div>
       <BigBox>
         <AttendanceTitle>
-          <MainTitle>CheQ</MainTitle>
+          <MainTitle onClick={ChangeBtn}>CheQ</MainTitle>
           <SubTitle>정보 수정</SubTitle>
         </AttendanceTitle>
         <Box1>
@@ -111,9 +118,6 @@ function ChangeInformationPage() {
             </Box4LineText>
           </Box4ChapelNumberBox>
         </Box4>
-        {/* <Box5>
-
-            </Box5> */}
       </BigBox>
       <RegisterBar />
     </div>
@@ -139,6 +143,7 @@ const AttendanceTitle = styled.div`
 const MainTitle = styled.h1`
   color: #375cde;
   margin-right: 28px;
+  cursor: pointer;
 `;
 const SubTitle = styled.h2`
   color: #375cde;

diff --git a/frontend/src/containers/Mainpage/Mainpage.tsx b/frontend/src/containers/Mainpage/Mainpage.tsx
@@ -1,22 +1,10 @@
-<<<<<<< HEAD
-//복사생성자 deep copy경우 2가지가 필요 (깊은 복사를 할수있게해야한다.)
-//{}연산자 ()연산자 꼭 알아야한다. 
-//상속하는거와 다형성 부모타입으로 하는것을 추상화 객체타입을 부모타입으로 자식객체를 부모타입으로 (참조 and 포인터)
-//virtual 메소드 
-//template 함수와 크래스 템플릿
-//vector 사용할수있게 제거하고 참조하고 조회
-//알고리즘 sort, find만 알면된다.
-//반복자 vector interator 사용
-import React, { useState, useEffect } from 'react';
-import styled from 'styled-components';
-import Nav from '../../components/NavBar';
-import axios from 'axios';
-=======
+
 import React, { useState, useEffect } from "react";
 import styled from "styled-components";
 import Nav from "../../components/NavBar";
+import NFCImage from "../../Image/NFC.png";
+import BeaconImage from "../../Image/Beacon.png";
 import axios from "axios";
->>>>>>> 33c2d9c62bebf15d054d7dbbdc6d483124b20b2e
 
 const images = [
   "https://pimg.hackers.com/land/main/land_default.jpg",
@@ -39,75 +27,8 @@ const Mainpage = () => {
     return () => clearInterval(interval); // Cleanup function
   }, []);
 
-<<<<<<< HEAD
-  // const onSubmit = async (data: any) => {
-  //   if (NFC) {
-  //     return;
-
-  //   }
-
-  //   try {
-  //     const response = await axios.post("http://isaacnas.duckdns.org:8083/attendance/nfc", {
-  //       mac_address: data.address,
-  //       nfc_position: data.position,
-  //       attendanceTime: new Date().toISOString() // or any appropriate time format
-  //     }, {
-  //       headers: {
-  //         'Authorization': 'Bearer your-auth-token' // Include your token here
-  //       }
-  //     });
-  //     console.log('Response:', response.data);//응답처리
-  //     //응답 실패
-  //   } catch (error) {
-  //     alert("오류가 뜹니다")
-  //   }
-  // };
-
-  // axios.post("http://isaacnas.duckdns.org:8083/attendance/nfc", {
-  //   uuid: " ",
-  //   nfc_position: " ",
-  //   attendanceTime: " "
-  // })
-  // .then(response => {
-  //    alert("성공했습니다")
-  // }).catch(error => {
-  //    alert("오류가발생")
-  // }).then(() => {
-  //    //항상실행
-  // })
-
-
 
   const attendanceStatuses = ['present', 'absent', 'late']; // Updated to 3 statuses
-=======
-  const onSubmit = async (data: any) => {
-    if (NFC) {
-      return;
-    }
-
-    try {
-      const response = await axios.post(
-        "http://isaacnas.duckdns.org:8083/attendance/nfc",
-        {
-          mac_address: data.address,
-          nfc_position: data.position,
-          attendanceTime: new Date().toISOString(), // or any appropriate time format
-        },
-        {
-          headers: {
-            Authorization: "Bearer your-auth-token", // Include your token here
-          },
-        }
-      );
-      console.log("Response:", response.data); //응답처리
-      //응답 실패
-    } catch (error) {
-      console.error(error);
-    }
-  };
-
-  const attendanceStatuses = ["present", "absent", "late"]; // Updated to 3 statuses
->>>>>>> 33c2d9c62bebf15d054d7dbbdc6d483124b20b2e
 
   const getColor = (status: string): string => {
     switch (status) {
@@ -124,19 +45,18 @@ const Mainpage = () => {
 
   // Example data for buttons from the backend
   const buttonsData = [
-<<<<<<< HEAD
-    { label: 'Menu 1' },
-    { label: 'Menu 2' },
+    { label: 'NFC', image: NFCImage },
+    { label: 'Beacon', image: BeaconImage },
     { label: 'Menu 3' },
     { label: 'Menu 4' },
-=======
-    { label: "Menu 1" },
-    { label: "Menu 2" },
-    { label: "Menu 3" },
-    { label: "Menu 4" },
->>>>>>> 33c2d9c62bebf15d054d7dbbdc6d483124b20b2e
   ];
 
+  // function Register(){
+  //   const handleMenu1Click = () => {
+  //     alert("Menu 1 clicked")
+  //   }
+  // }
+
   const handleMenu1Click = () => {
     axios.post("http://isaacnas.duckdns.org:8083/attendance/nfc", {
       uuid: "",
@@ -205,9 +125,9 @@ const Mainpage = () => {
           </Box2Advertisement>
         </Box2>
         <Box3A>
-          <Box3Atext>
-            <Box3AtextTitle>채플현황</Box3AtextTitle>
-          </Box3Atext>
+        <Box3Atext>
+          <Box3AtextTitle>채플현황</Box3AtextTitle>
+        </Box3Atext>
         </Box3A>
         <Box3B>
           <Box3BCircle>
@@ -217,42 +137,16 @@ const Mainpage = () => {
           </Box3BCircle>
         </Box3B>
         <Box4>
-<<<<<<< HEAD
   <Box4MainA>
     {buttonsData.map((button, index) => (
-      <Box4MainAButton 
-        key={index} 
-        onClick={
-          index === 0 ? handleMenu1Click :
-
-          undefined
-        }>
-        {button.label}
+      <Box4MainAButton key={index} onClick={index === 0 ? handleMenu1Click : undefined}>
+        {button.image ? (
+          <Box4MainAButtonImage src={button.image} alt={button.label} />
+        ): (button.label)}
       </Box4MainAButton>
     ))}
   </Box4MainA>
 </Box4>
-=======
-          <Box4MainA>
-            {buttonsData.map((button, index) => (
-              <Box4MainAButton
-                key={index}
-                onClick={
-                  index === 0
-                    ? () =>
-                        onSubmit({
-                          address: "exampleAddress",
-                          position: "examplePosition",
-                        })
-                    : undefined
-                }
-              >
-                {button.label}
-              </Box4MainAButton>
-            ))}
-          </Box4MainA>
-        </Box4>
->>>>>>> 33c2d9c62bebf15d054d7dbbdc6d483124b20b2e
       </BigBox>
       <Nav />
     </div>
@@ -383,7 +277,8 @@ const Box4MainAButton = styled.div`
   width: 100%;
   aspect-ratio: 1 / 1;
   background-color: white;
-  color: black;
+  overflow: hidden;
+  border-radius: 20px;
   box-shadow: 0 2px 4px rgba(76, 76, 76, 0), 0 -2px 4px rgba(76, 76, 76, 0.1),
     2px 0 4px rgba(76, 76, 76, 0.1), -2px 0 4px rgba(76, 76, 76, 0.1);
   text-align: center;
@@ -392,13 +287,16 @@ const Box4MainAButton = styled.div`
     background-color: #f0f0f0;
   }
 `;
-<<<<<<< HEAD
+
+const Box4MainAButtonImage = styled.img`
+  width:100%;
+  height:100%;
+
+`
 
 
 
 
 
 
 
-=======
->>>>>>> 33c2d9c62bebf15d054d7dbbdc6d483124b20b2e
diff --git a/frontend/src/containers/MyPage/Mypage.tsx b/frontend/src/containers/MyPage/Mypage.tsx
@@ -7,15 +7,16 @@ import { useNavigate } from "react-router-dom"; // useNavigate 훅 임포트
 function Mypage() {
   const [userData, setUserData] = useState({
     studentId: "202110034",
-    department: "컴퓨터공학과",
-    chapel: "3교시",
+    //department: "컴퓨터공학과",
+    // chapel: "3",
     seat: "H3",
+    email: "[email protected]"
   });
 
   // 텍스트 길이를 11자로 제한하는 함수
   const limitText = (text: string) => {
-    if (text.length > 11) {
-      return text.substring(0, 11) + "...";
+    if (text.length > 30) {
+      return text.substring(0, 30);
     }
     return text;
   };
@@ -33,9 +34,10 @@ function Mypage() {
   useEffect(() => {
     // 데이터를 limitText 함수를 통해 제한합니다.
     setUserData({
+      email: limitText(userData.email),
       studentId: limitText(userData.studentId),
-      department: limitText(userData.department),
-      chapel: limitText(userData.chapel),
+      //department: limitText(userData.department),
+      // chapel: limitText(userData.chapel),
       seat: limitText(userData.seat),
     });
   }, []);
@@ -58,14 +60,18 @@ function Mypage() {
                 <FixedText>학번 | </FixedText>
                 {userData.studentId}
               </BoxBMaininformation1>
-              <BoxBMaininformation2>
+              {/* <BoxBMaininformation2>
                 <FixedText>학과 | </FixedText>
                 {userData.department}
+              </BoxBMaininformation2> */}
+              <BoxBMaininformation2>
+                <FixedText>이메일 | </FixedText>
+                {userData.email}
               </BoxBMaininformation2>
-              <BoxBMaininformation3>
+              {/* <BoxBMaininformation3>
                 <FixedText>채플 | </FixedText>
                 {userData.chapel}
-              </BoxBMaininformation3>
+              </BoxBMaininformation3> */}
               <BoxBMaininformation4>
                 <FixedText>좌석 | </FixedText>
                 {userData.seat}
@@ -187,7 +193,7 @@ const BoxBMaininformation = styled.div`
 
 const BoxBMaininformation1 = styled.div`
   display: flex;
-  align-items: center;
+  align-items: baseline;
   flex-direction: row;
   width: 100%;
   font-weight: bold;
@@ -222,7 +228,9 @@ const BoxBMaininformation4 = styled.div`
 `;
 
 const FixedText = styled.span`
-  flex: 0 0 40px; /* 고정된 너비를 설정 */
+  //flex: 0 0 40px; /* 고정된 너비를 설정 */
+  display: inline;
+  margin-right: 5px;
 `;
 
 const BoXBProfilchangeBox = styled.div`