diff --git a/customfront/package-lock.json b/customfront/package-lock.json index 41f39b66..8df5144a 100644 --- a/customfront/package-lock.json +++ b/customfront/package-lock.json @@ -11,6 +11,7 @@ "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", + "axios": "^1.7.2", "react": "^18.3.1", "react-dom": "^18.3.1", "react-router-dom": "^6.25.1", @@ -5436,6 +5437,29 @@ "node": ">=4" } }, + "node_modules/axios": { + "version": "1.7.2", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.2.tgz", + "integrity": "sha512-2A8QhOMrbomlDuiLeK9XibIBzuHeRcqqNOHp0Cyp5EoJ1IFDh+XZH3A6BkXtv0K4gFGCI0Y4BM7B1wOEi0Rmgw==", + "dependencies": { + "follow-redirects": "^1.15.6", + "form-data": "^4.0.0", + "proxy-from-env": "^1.1.0" + } + }, + "node_modules/axios/node_modules/form-data": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", + "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", + "dependencies": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "mime-types": "^2.1.12" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/axobject-query": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.1.1.tgz", @@ -14683,6 +14707,11 @@ "node": ">= 0.10" } }, + "node_modules/proxy-from-env": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", + "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==" + }, "node_modules/psl": { "version": "1.9.0", "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz", diff --git a/customfront/package.json b/customfront/package.json index 0c9ac432..03cbdc27 100644 --- a/customfront/package.json +++ b/customfront/package.json @@ -6,6 +6,7 @@ "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", + "axios": "^1.7.2", "react": "^18.3.1", "react-dom": "^18.3.1", "react-router-dom": "^6.25.1", diff --git a/customfront/public/logo/alarm2.svg b/customfront/public/logo/alarm2.svg new file mode 100644 index 00000000..e8800da7 --- /dev/null +++ b/customfront/public/logo/alarm2.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/customfront/public/logo/alarm3.svg b/customfront/public/logo/alarm3.svg new file mode 100644 index 00000000..d0cdc1ea --- /dev/null +++ b/customfront/public/logo/alarm3.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/customfront/public/logo/bad10.svg b/customfront/public/logo/bad10.svg new file mode 100644 index 00000000..b1b5fa0c --- /dev/null +++ b/customfront/public/logo/bad10.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/customfront/public/logo/card1.svg b/customfront/public/logo/card1.svg new file mode 100644 index 00000000..f35994d8 --- /dev/null +++ b/customfront/public/logo/card1.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/customfront/public/logo/card2.svg b/customfront/public/logo/card2.svg new file mode 100644 index 00000000..4e1d488a --- /dev/null +++ b/customfront/public/logo/card2.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/customfront/public/logo/card3.svg b/customfront/public/logo/card3.svg new file mode 100644 index 00000000..7465c561 --- /dev/null +++ b/customfront/public/logo/card3.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/customfront/public/logo/card4.svg b/customfront/public/logo/card4.svg new file mode 100644 index 00000000..554f45ed --- /dev/null +++ b/customfront/public/logo/card4.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/customfront/public/logo/good10.svg b/customfront/public/logo/good10.svg new file mode 100644 index 00000000..3e547e55 --- /dev/null +++ b/customfront/public/logo/good10.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/customfront/public/logo/keychange.svg b/customfront/public/logo/keychange.svg new file mode 100644 index 00000000..2f64ea14 --- /dev/null +++ b/customfront/public/logo/keychange.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/customfront/public/logo/lc.svg b/customfront/public/logo/lc.svg new file mode 100644 index 00000000..ffe4fc7b --- /dev/null +++ b/customfront/public/logo/lc.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/customfront/public/logo/logout.svg b/customfront/public/logo/logout.svg new file mode 100644 index 00000000..61957112 --- /dev/null +++ b/customfront/public/logo/logout.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/customfront/public/logo/mypagebtn.svg b/customfront/public/logo/mypagebtn.svg new file mode 100644 index 00000000..df666318 --- /dev/null +++ b/customfront/public/logo/mypagebtn.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/customfront/public/logo/myreviewbtn.svg b/customfront/public/logo/myreviewbtn.svg new file mode 100644 index 00000000..03178a76 --- /dev/null +++ b/customfront/public/logo/myreviewbtn.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/customfront/public/logo/plus.svg b/customfront/public/logo/plus.svg new file mode 100644 index 00000000..b0de3ac3 --- /dev/null +++ b/customfront/public/logo/plus.svg @@ -0,0 +1,4 @@ + + + + diff --git a/customfront/public/logo/profile.svg b/customfront/public/logo/profile.svg new file mode 100644 index 00000000..05149ed3 --- /dev/null +++ b/customfront/public/logo/profile.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/customfront/public/logo/pwchange.svg b/customfront/public/logo/pwchange.svg new file mode 100644 index 00000000..22562e65 --- /dev/null +++ b/customfront/public/logo/pwchange.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/customfront/public/logo/search3.svg b/customfront/public/logo/search3.svg new file mode 100644 index 00000000..62c93e70 --- /dev/null +++ b/customfront/public/logo/search3.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/customfront/public/logo/success.svg b/customfront/public/logo/success.svg new file mode 100644 index 00000000..9b65dc66 --- /dev/null +++ b/customfront/public/logo/success.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/customfront/src/App.js b/customfront/src/App.js index 662d7d84..18305a88 100644 --- a/customfront/src/App.js +++ b/customfront/src/App.js @@ -1,24 +1,33 @@ import React from 'react'; import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; -import Main from './page/main'; +import Main0 from './page/main0'; import Main2 from './page/main2'; import Main3 from './page/main3'; import First from './page/first'; import Login from './page/login'; +import Login2 from './page/login2'; +import Logincomplete from './page/logincomplete'; +import Membership from './page/membership'; import Review from './page/review'; import Reviewcheck1 from './page/reviewcheck1'; import Reviewcheck2 from './page/reviewcheck2'; import Reviewcheck3 from './page/reviewcheck3'; import Info1 from './page/info1'; +import Info2 from './page/info2'; import Info3 from './page/info3'; import Info4 from './page/info4'; import Info5 from './page/info5'; import Changeinfo from './page/changeinfo'; import Changeinfo1 from './page/changeinfo1'; +import Changeinfo3 from './page/changeinfo3'; import Changeinfo4 from './page/changeinfo4'; import Changeinfo5 from './page/changeinfo5'; +import Mypage from './page/mypage'; +import Pwchange from './page/pwchange'; +import Pwchange1 from './page/pwchange1'; import Alarm1 from './page/alarm1'; import Alarm2 from './page/alarm2'; +import Alarm3 from './page/alarm3'; import './App.css'; import './index.css'; @@ -27,25 +36,35 @@ function App() {
- } /> {/* 기본 경로 처리 */} - } /> + } /> {/* 기본 경로 처리 */} + } /> + } /> } /> - } /> + } /> } /> + } /> + } /> } /> } /> } /> } /> } /> + } /> } /> } /> } /> } /> } /> + } /> } /> } /> + } /> + } /> + } /> } /> } /> + } /> +
diff --git a/customfront/src/page/alarm1.jsx b/customfront/src/page/alarm1.jsx index 1d9e9337..4d5c4c1e 100644 --- a/customfront/src/page/alarm1.jsx +++ b/customfront/src/page/alarm1.jsx @@ -2,16 +2,40 @@ import React, { useState } from "react"; import { useNavigate } from "react-router-dom"; import * as q from "../style/styledalarm1"; -//1 -//2 -//3 -//4 const Alarm1 = () => { const navigate = useNavigate(); const [isMenuOpen, setIsMenuOpen] = useState(false); - const goMain = () => { - navigate(`/`); + const goMain0 = () => { + navigate(`/Main0`); + }; + + const goMain2 = () => { + navigate(`/Main2`); + }; + + const goAlarm1 = () => { + navigate(`/Alarm1`); + }; + + const goMypage = () => { + navigate(`/Mypage`); + }; + + const goReview = () => { + navigate(`/Review`); + }; + + const goLogin = () => { + navigate(`/Login`); + }; + + const goAlarm2 = () => { + navigate(`/Alarm2`); + }; + + const goAlarm3 = () => { + navigate(`/Alarm3`); }; const toggleMenu = () => { @@ -26,16 +50,17 @@ const Alarm1 = () => { const box2Items = [ { id: 1, text: "공지 제목입니다."}, { id: 2, text: "공지 제목입니다."}, - { id: 3, text: "공지 제목입니다." }, - { id: 4, text: "공지 제목입니다." }, - { id: 5, text: "공지 제목입니다." }, - { id: 6, text: "공지 제목입니다." }, - { id: 7, text: "공지 제목입니다." }, - { id: 8, text: "공지 제목입니다." }, - { id: 9, text: "공지 제목입니다." }, - { id: 10, text: "공지 제목입니다." }, ]; + // 아이템 클릭 시 이동할 페이지를 결정하는 함수 + const handleItemClick = (id) => { + if (id === 1) { + goAlarm2(); + } else if (id === 2) { + goAlarm3(); + } + }; + return ( @@ -56,7 +81,7 @@ const Alarm1 = () => { src={`${process.env.PUBLIC_URL}/logo/ylogo.svg`} alt="logo" width="40px" - onClick={goMain} + onClick={goMain2} /> { left: "8px", cursor: "pointer", }} - onClick={() => navigate(-1)} + onClick={goAlarm1} /> { <> - navigate("/mypage")}> + { onClick={toggleMenu} /> - navigate("/myreview")}> + { onClick={toggleMenu} /> - + { onClick={toggleMenu} /> + + logout + )} @@ -145,15 +183,14 @@ const Alarm1 = () => { {box2Items.map((item) => ( - + handleItemClick(item.id)}> - {item.text} + {item.text} ))} - ); diff --git a/customfront/src/page/alarm2.jsx b/customfront/src/page/alarm2.jsx index 6c736d82..6ce72c0f 100644 --- a/customfront/src/page/alarm2.jsx +++ b/customfront/src/page/alarm2.jsx @@ -6,8 +6,16 @@ const Alarm2 = () => { const navigate = useNavigate(); const [isMenuOpen, setIsMenuOpen] = useState(false); - const goMain = () => { - navigate(`/`); + const goMain0 = () => { + navigate(`/Main0`); + }; + + const goMain2 = () => { + navigate(`/Main2`); + }; + + const goChangeinfo = () => { + navigate(`/changeinfo`); }; const toggleMenu = () => { @@ -38,7 +46,7 @@ const Alarm2 = () => { src={`${process.env.PUBLIC_URL}/logo/ylogo.svg`} alt="logo" width="40px" - onClick={goMain} + onClick={goMain2} /> { + + + alarm2 + + + + + + 키워드 변경하러 가기 + + + {isMenuOpen && ( <> @@ -101,7 +129,7 @@ const Alarm2 = () => { onClick={toggleMenu} /> - + { )} - - - - - - - - 키워드 변경하러 가기 - - ); }; diff --git a/customfront/src/page/alarm3.jsx b/customfront/src/page/alarm3.jsx new file mode 100644 index 00000000..810e466d --- /dev/null +++ b/customfront/src/page/alarm3.jsx @@ -0,0 +1,143 @@ +import React, { useState } from "react"; +import { useNavigate } from "react-router-dom"; +import * as a3 from "../style/styledalarm3"; + +const Alarm3 = () => { + const navigate = useNavigate(); + const [isMenuOpen, setIsMenuOpen] = useState(false); + + const goMain0 = () => { + navigate(`/Main0`); + }; + + const goMain2 = () => { + navigate(`/Main2`); + }; + + const toggleMenu = () => { + setIsMenuOpen(!isMenuOpen); + }; + + const closeMenu = () => { + setIsMenuOpen(false); + }; + + return ( + + + back button navigate(-1)} + /> + + alarm button navigate(-1)} + /> + menu button + +
+ + + + + + alarm3 + + + + {isMenuOpen && ( + <> + + + navigate("/mypage")}> + mypage + + navigate("/myreview")}> + myreview + + + mainpage + + + + )} + + ); +}; + +export default Alarm3; diff --git a/customfront/src/page/changeinfo.jsx b/customfront/src/page/changeinfo.jsx index eac72960..f8c6e1d5 100644 --- a/customfront/src/page/changeinfo.jsx +++ b/customfront/src/page/changeinfo.jsx @@ -4,10 +4,35 @@ import * as i0 from "../style/styledchangeinfo"; const Changeinfo = () => { const navigate = useNavigate(); + const [isMenuOpen, setIsMenuOpen] = useState(false); const [selectedBox, setSelectedBox] = useState(null); // 클릭된 박스의 인덱스를 관리 - const goMain = () => { - navigate(`/`); + const goMain0 = () => { + navigate(`/Main0`); + }; + + const goMain2 = () => { + navigate(`/Main2`); + }; + + const goMypage = () => { + navigate(`/Mypage`); + }; + + const goReview = () => { + navigate(`/Review`); + }; + + const goLogin = () => { + navigate(`/Login`); + }; + + const toggleMenu = () => { + setIsMenuOpen(!isMenuOpen); + }; + + const closeMenu = () => { + setIsMenuOpen(false); }; // 클릭된 박스의 상태를 업데이트하는 함수 @@ -20,7 +45,7 @@ const Changeinfo = () => { navigate('/changeinfo1'); break; case 1: - navigate('/changeinfo1'); + navigate('/changeinfo3'); break; case 2: navigate('/changeinfo4'); @@ -53,7 +78,7 @@ const Changeinfo = () => { src={`${process.env.PUBLIC_URL}/logo/ylogo.svg`} alt="logo" width="40px" - onClick={goMain} + onClick={goMain2} /> { left: "8px", cursor: "pointer", }} - onClick={() => navigate(-1)} + onClick={toggleMenu} />
+ {isMenuOpen && ( + <> + + + + mypage + + + myreview + + + mainpage + + + logout + + + + )} + @@ -119,4 +207,4 @@ const Changeinfo = () => { ); }; -export default Changeinfo; +export default Changeinfo; \ No newline at end of file diff --git a/customfront/src/page/changeinfo1.jsx b/customfront/src/page/changeinfo1.jsx index 5c83e6c9..5df835a8 100644 --- a/customfront/src/page/changeinfo1.jsx +++ b/customfront/src/page/changeinfo1.jsx @@ -1,20 +1,108 @@ -import React, { useState } from "react"; +import React, { useState, useEffect } from "react"; import { useNavigate } from "react-router-dom"; +import axios from "axios"; import * as i1 from "../style/styledchangeinfo1"; const Changeinfo1 = () => { const navigate = useNavigate(); const [selectedBox, setSelectedBox] = useState(null); // 클릭된 박스의 인덱스를 관리 + const [userInfo, setUserInfo] = useState(null); // 사용자 정보를 관리 + const [userError, setUserError] = useState(null); // 사용자 정보 에러를 관리 + const [loading, setLoading] = useState(false); // 로딩 상태를 관리 + const [apiError, setApiError] = useState(null); // API 에러를 관리 + + useEffect(() => { + fetchUserInfo(); // 컴포넌트가 마운트될 때 사용자 정보를 가져오는 함수 호출 + }, []); - const goMain = () => { - navigate(`/`); + // 사용자 정보를 가져오는 함수 + const fetchUserInfo = async () => { + setLoading(true); // 로딩 시작 + try { + const token = localStorage.getItem('token'); // 로그인 후 저장된 토큰을 가져옵니다. + if (!token) { + throw new Error('로그인 토큰이 없습니다.'); + } + + const response = await axios.get('http://127.0.0.1:8000/myPage/profile', { + headers: { + 'Authorization': `Token ${token}` // Authorization 헤더에 토큰을 포함합니다. + } + }); + + console.log('사용자 정보:', response.data); // 디버그 로그 추가 + setUserInfo(response.data); // 사용자 정보 저장 + } catch (error) { + console.error('사용자 정보 가져오기 오류:', error.message); + setUserError(error.message); // 에러 메시지 설정 + } finally { + setLoading(false); // 로딩 종료 + } + }; + + const goChangeInfo = () => { + navigate(`/changeinfo`); + }; + + // 연령대를 업데이트하는 함수 + const updateAge = async (ageRange) => { + setLoading(true); // 로딩 시작 + try { + const token = localStorage.getItem('token'); // 로그인 후 저장된 토큰을 가져옵니다. + if (!token) { + throw new Error('로그인 토큰이 없습니다.'); + } + + const response = await axios.put('http://127.0.0.1:8000/myPage/update/age/', + { age: ageRange }, + { + headers: { + 'Authorization': `Token ${token}`, // Authorization 헤더에 토큰을 포함합니다. + 'Content-Type': 'application/json' + } + }); + + console.log('나이 업데이트 성공:', response.data); // 디버그 로그 추가 + // 여기서 추가적인 상태 업데이트나 화면 전환을 수행할 수 있습니다. + } catch (error) { + console.error('나이 업데이트 오류:', error.message); + setApiError(error.message); // 에러 메시지 설정 + } finally { + setLoading(false); // 로딩 종료 + } }; // 클릭된 박스의 상태를 업데이트하는 함수 const handleBoxClick = (index) => { setSelectedBox(index); // 클릭된 박스의 인덱스를 상태로 저장 + const ageRanges = [ + 'under_19', + '20-29', + '30-39', + '40-49', + '50-59', + '60-69', + 'over_70', + ]; + updateAge(ageRanges[index]); // 선택된 연령대로 업데이트 }; + if (loading) { + return
Loading...
; + } + + if (userError) { // 사용자 정보 에러가 있는 경우 + return
Error: {userError}
; + } + + if (!userInfo) { + return
Loading...
; + } + + if (apiError) { // API 에러가 있는 경우 + return
Error: {apiError}
; + } + return ( @@ -30,40 +118,6 @@ const Changeinfo1 = () => { }} onClick={() => navigate(-1)} /> - - alarm button navigate(-1)} - /> - menu button navigate(-1)} - /> - -
- @@ -91,12 +145,12 @@ const Changeinfo1 = () => { {[ - "19세 이하", - "20~29세", - "30~39세", - "40~49세", - "50~59세", - "60~69세", + "19세 이하", + "20-29세", + "30-39세", + "40-49세", + "50-59세", + "60-69세", "70세 이상", ].map((ageRange, index) => ( @@ -118,7 +172,7 @@ const Changeinfo1 = () => { id="restore" src={`${process.env.PUBLIC_URL}/logo/restore.svg`} alt="restore" - onClick={goMain} + onClick={goChangeInfo} /> @@ -126,4 +180,4 @@ const Changeinfo1 = () => { ); }; -export default Changeinfo1; +export default Changeinfo1; \ No newline at end of file diff --git a/customfront/src/page/changeinfo2.jsx b/customfront/src/page/changeinfo2.jsx index 9b45b6c2..b9e964ad 100644 --- a/customfront/src/page/changeinfo2.jsx +++ b/customfront/src/page/changeinfo2.jsx @@ -1,24 +1,135 @@ -import React, { useState } from "react"; +import React, { useState, useEffect } from "react"; import { useNavigate } from "react-router-dom"; +import axios from "axios"; import * as c from "../style/styledchangeinfo2"; const Changeinfo2 = () => { const navigate = useNavigate(); + const [isMenuOpen, setIsMenuOpen] = useState(false); const [selectedBox, setSelectedBox] = useState(null); // 클릭된 박스의 인덱스를 관리 + const [userInfo, setUserInfo] = useState(null); // 사용자 정보를 관리 + const [userError, setUserError] = useState(null); // 사용자 정보 에러를 관리 + const [loading, setLoading] = useState(false); // 로딩 상태를 관리 + const [apiError, setApiError] = useState(null); // API 에러를 관리 - const goInfo3 = () => { - navigate(`/info3`); + useEffect(() => { + fetchUserInfo(); // 컴포넌트가 마운트될 때 사용자 정보를 가져오는 함수 호출 + }, []); + + // 사용자 정보를 가져오는 함수 + const fetchUserInfo = async () => { + setLoading(true); // 로딩 시작 + try { + const token = localStorage.getItem('token'); // 로그인 후 저장된 토큰을 가져옵니다. + if (!token) { + throw new Error('로그인 토큰이 없습니다.'); + } + + const response = await axios.get('http://127.0.0.1:8000/myPage/profile', { + headers: { + 'Authorization': `Token ${token}` // Authorization 헤더에 토큰을 포함합니다. + } + }); + + console.log('사용자 정보:', response.data); // 디버그 로그 추가 + setUserInfo(response.data); // 사용자 정보 저장 + } catch (error) { + console.error('사용자 정보 가져오기 오류:', error.message); + setUserError(error.message); // 에러 메시지 설정 + } finally { + setLoading(false); // 로딩 종료 + } + }; + + const goMain = () => { + navigate(`/`); + }; + + const goMypage = () => { + navigate(`/Mypage`); + }; + + const goReview = () => { + navigate(`/Review`); + }; + + const goLogin = () => { + navigate(`/Login`); + }; + + const toggleMenu = () => { + setIsMenuOpen(!isMenuOpen); + }; + + const closeMenu = () => { + setIsMenuOpen(false); + }; + + const goChangeInfo3 = () => { + navigate(`/changeinfo3`); + }; + + // 성별을 업데이트하는 함수 + const updateGender = async (gender) => { + setLoading(true); // 로딩 시작 + try { + const token = localStorage.getItem('token'); // 로그인 후 저장된 토큰을 가져옵니다. + if (!token) { + throw new Error('로그인 토큰이 없습니다.'); + } + + const response = await axios.put( + 'http://127.0.0.1:8000/myPage/update/gender/', // API 엔드포인트 + { gender: gender }, // 요청 데이터: { gender: "여성" } (문자열) + { + headers: { + 'Authorization': `Token ${token}`, + 'Content-Type': 'application/json' + } + } + ); + + console.log('성별 변경 응답:', response.data); // 디버그 로그 추가 + setUserInfo({ ...userInfo, gender }); // 사용자 정보 업데이트 + } catch (error) { + console.error('성별 변경 오류:', error.message); + console.error('응답 데이터:', error.response?.data); // 서버에서 반환하는 에러 메시지 + setApiError(error.message); // 에러 메시지 설정 + } finally { + setLoading(false); // 로딩 종료 + } }; // 클릭된 박스의 상태를 업데이트하는 함수 const handleBoxClick = (index) => { setSelectedBox(index); // 클릭된 박스의 인덱스를 상태로 저장 + const genderRanges = [ + "Female", // <- 서버가 인식하는 형식에 맞추어야 함 + "Male", + ]; + updateGender(genderRanges[index]); // 선택된 성별로 업데이트 }; + if (loading) { + return
Loading...
; + } + + if (userError) { // 사용자 정보 에러가 있는 경우 + return
Error: {userError}
; + } + + if (!userInfo) { + return
Loading...
; + } + + if (apiError) { // API 에러가 있는 경우 + return
Error: {apiError}
; + } + return ( - back button { left: "8px", cursor: "pointer", }} - onClick={() => navigate(-1)} + onClick={toggleMenu} /> + {isMenuOpen && ( + <> + + + + mypage + + + myreview + + + mainpage + + + logout + + + + )} + 나에게{" "} @@ -86,17 +260,14 @@ const Changeinfo2 = () => { - {[ - "여성", - "남성", - ].map((ageRange, index) => ( + {["여성", "남성"].map((gender, index) => ( handleBoxClick(index)} // 클릭 시 상태 업데이트 > - {ageRange} + {gender} @@ -109,7 +280,7 @@ const Changeinfo2 = () => { id="next" src={`${process.env.PUBLIC_URL}/logo/next.svg`} alt="next" - onClick={goInfo3} + onClick={goChangeInfo3} /> diff --git a/customfront/src/page/changeinfo3.jsx b/customfront/src/page/changeinfo3.jsx index 1bff61b9..e8cd978a 100644 --- a/customfront/src/page/changeinfo3.jsx +++ b/customfront/src/page/changeinfo3.jsx @@ -1,24 +1,104 @@ -import React, { useState } from "react"; +import React, { useState, useEffect } from "react"; import { useNavigate } from "react-router-dom"; +import axios from "axios"; import * as d from "../style/styledchangeinfo3"; const Changeinfo3 = () => { const navigate = useNavigate(); const [selectedBox, setSelectedBox] = useState(null); // 클릭된 박스의 인덱스를 관리 + const [userInfo, setUserInfo] = useState(null); // 사용자 정보를 관리 + const [userError, setUserError] = useState(null); // 사용자 정보 에러를 관리 + const [loading, setLoading] = useState(false); // 로딩 상태를 관리 + const [apiError, setApiError] = useState(null); // API 에러를 관리 - const goMain = () => { - navigate(`/`); + useEffect(() => { + fetchUserInfo(); // 컴포넌트가 마운트될 때 사용자 정보를 가져오는 함수 호출 + }, []); + + // 사용자 정보를 가져오는 함수 + const fetchUserInfo = async () => { + setLoading(true); // 로딩 시작 + try { + const token = localStorage.getItem('token'); // 로그인 후 저장된 토큰을 가져옵니다. + if (!token) { + throw new Error('로그인 토큰이 없습니다.'); + } + + const response = await axios.get('http://127.0.0.1:8000/myPage/profile', { + headers: { + 'Authorization': `Token ${token}` // Authorization 헤더에 토큰을 포함합니다. + } + }); + + console.log('사용자 정보:', response.data); // 디버그 로그 추가 + setUserInfo(response.data); // 사용자 정보 저장 + } catch (error) { + console.error('사용자 정보 가져오기 오류:', error.message); + setUserError(error.message); // 에러 메시지 설정 + } finally { + setLoading(false); // 로딩 종료 + } + }; + + // 질병 정보를 업데이트하는 함수 + const updateDisease = async (disease) => { + setLoading(true); // 로딩 시작 + try { + const token = localStorage.getItem('token'); // 로그인 후 저장된 토큰을 가져옵니다. + if (!token) { + throw new Error('로그인 토큰이 없습니다.'); + } + + const response = await axios.put('http://127.0.0.1:8000/myPage/update/disease/', + { disease: disease }, + { + headers: { + 'Authorization': `Token ${token}`, // Authorization 헤더에 토큰을 포함합니다. + 'Content-Type': 'application/json' + } + }); + + console.log('질병 업데이트 성공:', response.data); // 디버그 로그 추가 + // 여기서 추가적인 상태 업데이트나 화면 전환을 수행할 수 있습니다. + } catch (error) { + console.error('질병 업데이트 오류:', error.message); + setApiError(error.message); // 에러 메시지 설정 + } finally { + setLoading(false); // 로딩 종료 + } }; // 클릭된 박스의 상태를 업데이트하는 함수 const handleBoxClick = (index) => { setSelectedBox(index); // 클릭된 박스의 인덱스를 상태로 저장 + const diseases = ["diabetes", "muscle_loss", "obesity", "hypertension"]; + updateDisease(diseases[index]); // 선택된 질병으로 업데이트 + }; + + if (loading) { + return
Loading...
; + } + + if (userError) { // 사용자 정보 에러가 있는 경우 + return
Error: {userError}
; + } + + if (!userInfo) { + return
Loading...
; + } + + if (apiError) { // API 에러가 있는 경우 + return
Error: {apiError}
; + } + + const goChangeInfo = () => { + navigate(`/changeinfo`); }; return ( - back button { }} onClick={() => navigate(-1)} /> - - alarm button navigate(-1)} - /> - menu button navigate(-1)} - /> @@ -116,7 +166,7 @@ const Changeinfo3 = () => { id="next" src={`${process.env.PUBLIC_URL}/logo/next.svg`} alt="next" - onClick={goMain} + onClick={goChangeInfo} /> diff --git a/customfront/src/page/changeinfo4.jsx b/customfront/src/page/changeinfo4.jsx index 43031c6f..9087d84e 100644 --- a/customfront/src/page/changeinfo4.jsx +++ b/customfront/src/page/changeinfo4.jsx @@ -1,20 +1,113 @@ -import React, { useState } from "react"; +import React, { useState, useEffect } from "react"; import { useNavigate } from "react-router-dom"; +import axios from "axios"; import * as i4 from "../style/styledchangeinfo4"; const Changeinfo4 = () => { const navigate = useNavigate(); const [selectedBox, setSelectedBox] = useState(null); // 클릭된 박스의 인덱스를 관리 + const [userInfo, setUserInfo] = useState(null); // 사용자 정보를 관리 + const [userError, setUserError] = useState(null); // 사용자 정보 에러를 관리 + const [loading, setLoading] = useState(false); // 로딩 상태를 관리 + const [apiError, setApiError] = useState(null); // API 에러를 관리 - const goMain = () => { - navigate(`/`); + useEffect(() => { + fetchUserInfo(); // 컴포넌트가 마운트될 때 사용자 정보를 가져오는 함수 호출 + }, []); + + // 사용자 정보를 가져오는 함수 + const fetchUserInfo = async () => { + setLoading(true); // 로딩 시작 + try { + const token = localStorage.getItem('token'); // 로그인 후 저장된 토큰을 가져옵니다. + if (!token) { + throw new Error('로그인 토큰이 없습니다.'); + } + + const response = await axios.get('http://127.0.0.1:8000/myPage/profile', { + headers: { + 'Authorization': `Token ${token}` // Authorization 헤더에 토큰을 포함합니다. + } + }); + + console.log('사용자 정보:', response.data); // 디버그 로그 추가 + setUserInfo(response.data); // 사용자 정보 저장 + } catch (error) { + console.error('사용자 정보 가져오기 오류:', error.message); + setUserError(error.message); // 에러 메시지 설정 + } finally { + setLoading(false); // 로딩 종료 + } + }; + + + const goChangeInfo = () => { + navigate(`/changeinfo`); + }; + + // 키를 업데이트하는 함수 + const updateHeight = async (heightRange) => { + setLoading(true); // 로딩 시작 + try { + const token = localStorage.getItem('token'); // 로그인 후 저장된 토큰을 가져옵니다. + if (!token) { + throw new Error('로그인 토큰이 없습니다.'); + } + + console.log('업데이트할 키 범위:', heightRange); // 디버그 로그 추가 + + const response = await axios.put('http://127.0.0.1:8000/myPage/update/height/', + { height: heightRange }, // height를 문자열로 전달 + { + headers: { + 'Authorization': `Token ${token}`, // Authorization 헤더에 토큰을 포함합니다. + 'Content-Type': 'application/json' + } + }); + + console.log('키 업데이트 성공:', response.data); // 디버그 로그 추가 + // 성공적인 업데이트 후 추가적인 상태 업데이트나 화면 전환을 수행할 수 있습니다. + } catch (error) { + console.error('키 업데이트 오류:', error.message); + console.error('응답 데이터:', error.response?.data); // 응답 데이터 로깅 + setApiError(error.message); // 에러 메시지 설정 + } finally { + setLoading(false); // 로딩 종료 + } }; - // 클릭된 박스의 상태를 업데이트하는 함수 + // 클릭된 박스의 상태를 업데이트하고 키를 업데이트하는 함수 const handleBoxClick = (index) => { setSelectedBox(index); // 클릭된 박스의 인덱스를 상태로 저장 + const heightRanges = [ + 'under_149', + '150-154', + '155-159', + '160-164', + '165-169', + '170-174', + '175-179', + 'over_180', + ]; + updateHeight(heightRanges[index]); }; + if (loading) { + return
Loading...
; + } + + if (userError) { // 사용자 정보 에러가 있는 경우 + return
Error: {userError}
; + } + + if (!userInfo) { + return
Loading...
; + } + + if (apiError) { // API 에러가 있는 경우 + return
Error: {apiError}
; + } + return ( @@ -30,40 +123,6 @@ const Changeinfo4 = () => { }} onClick={() => navigate(-1)} /> - - alarm button navigate(-1)} - /> - menu button navigate(-1)} - /> - -
- @@ -119,7 +178,7 @@ const Changeinfo4 = () => { id="restore" src={`${process.env.PUBLIC_URL}/logo/restore.svg`} alt="restore" - onClick={goMain} + onClick={goChangeInfo} /> @@ -127,4 +186,4 @@ const Changeinfo4 = () => { ); }; -export default Changeinfo4; +export default Changeinfo4; \ No newline at end of file diff --git a/customfront/src/page/changeinfo5.jsx b/customfront/src/page/changeinfo5.jsx index 6b376faa..ea1a91a0 100644 --- a/customfront/src/page/changeinfo5.jsx +++ b/customfront/src/page/changeinfo5.jsx @@ -1,20 +1,118 @@ -import React, { useState } from "react"; +import React, { useState, useEffect } from "react"; import { useNavigate } from "react-router-dom"; +import axios from "axios"; import * as i5 from "../style/styledchangeinfo5"; const Changeinfo5 = () => { const navigate = useNavigate(); const [selectedBox, setSelectedBox] = useState(null); // 클릭된 박스의 인덱스를 관리 + const [userInfo, setUserInfo] = useState(null); // 사용자 정보를 관리 + const [userError, setUserError] = useState(null); // 사용자 정보 에러를 관리 + const [loading, setLoading] = useState(false); // 로딩 상태를 관리 + const [apiError, setApiError] = useState(null); // API 에러를 관리 - const goMain = () => { - navigate(`/`); + useEffect(() => { + fetchUserInfo(); // 컴포넌트가 마운트될 때 사용자 정보를 가져오는 함수 호출 + }, []); + + // 사용자 정보를 가져오는 함수 + const fetchUserInfo = async () => { + setLoading(true); // 로딩 시작 + try { + const token = localStorage.getItem('token'); // 로그인 후 저장된 토큰을 가져옵니다. + if (!token) { + throw new Error('로그인 토큰이 없습니다.'); + } + + const response = await axios.get('http://127.0.0.1:8000/myPage/profile', { + headers: { + 'Authorization': `Token ${token}` // Authorization 헤더에 토큰을 포함합니다. + } + }); + + console.log('사용자 정보:', response.data); // 디버그 로그 추가 + setUserInfo(response.data); // 사용자 정보 저장 + } catch (error) { + console.error('사용자 정보 가져오기 오류:', error.message); + setUserError(error.message); // 에러 메시지 설정 + } finally { + setLoading(false); // 로딩 종료 + } + }; + + const goChangeinfo = () => { + navigate(`/Changeinfo`); }; - // 클릭된 박스의 상태를 업데이트하는 함수 + // 몸무게를 업데이트하는 함수 + const updateWeight = async (weightRange) => { + setLoading(true); // 로딩 시작 + try { + const token = localStorage.getItem('token'); // 로그인 후 저장된 토큰을 가져옵니다. + if (!token) { + throw new Error('로그인 토큰이 없습니다.'); + } + + const response = await axios.put( + 'http://127.0.0.1:8000/myPage/update/weight/', // API 엔드포인트 + { weight: weightRange }, // 요청 데이터 + { + headers: { + 'Authorization': `Token ${token}`, + 'Content-Type': 'application/json' + } + } + ); + + console.log('몸무게 업데이트 성공:', response.data); // 디버그 로그 추가 + } catch (error) { + console.error('몸무게 업데이트 오류:', error.message); + if (error.response) { + console.error('응답 데이터:', error.response.data); + } + setApiError(error.message); // 에러 메시지 설정 + } finally { + setLoading(false); // 로딩 종료 + } + }; + const handleBoxClick = (index) => { setSelectedBox(index); // 클릭된 박스의 인덱스를 상태로 저장 + const weightRanges = [ + 'under_39', + '40-44', + '45-49', + '50-54', + '55-59', + '60-64', + '65-69', + '70-74', + '75-79', + '80-84', + '85-89', + '90-94', + '95-99', + 'over_100', + ]; + updateWeight(weightRanges[index]); // 선택된 몸무게 범위로 업데이트 }; + if (loading) { + return
Loading...
; + } + + if (userError) { // 사용자 정보 에러가 있는 경우 + return
Error: {userError}
; + } + + if (!userInfo) { + return
Loading...
; + } + + if (apiError) { // API 에러가 있는 경우 + return
Error: {apiError}
; + } + return ( @@ -30,40 +128,6 @@ const Changeinfo5 = () => { }} onClick={() => navigate(-1)} /> - - alarm button navigate(-1)} - /> - menu button navigate(-1)} - /> - -
- @@ -103,7 +167,7 @@ const Changeinfo5 = () => { "80~84kg", "85~89kg", "90~94kg", - "100kg 이상" + "100kg 이상", ].map((weightRange, index) => ( { id="restore" src={`${process.env.PUBLIC_URL}/logo/restore.svg`} alt="restore" - onClick={goMain} + onClick={goChangeinfo} /> @@ -132,4 +196,4 @@ const Changeinfo5 = () => { ); }; -export default Changeinfo5; +export default Changeinfo5; \ No newline at end of file diff --git a/customfront/src/page/first.jsx b/customfront/src/page/first.jsx index 1e32977f..51ff6529 100644 --- a/customfront/src/page/first.jsx +++ b/customfront/src/page/first.jsx @@ -5,8 +5,8 @@ import * as f1 from "../style/styledfirst"; const First = () => { const navigate = useNavigate(); - const goMain = () => { - navigate(`/Main`); + const goLogin = () => { + navigate(`/Login`); }; const LottiePlayer = () => { @@ -45,7 +45,7 @@ const First = () => { src="https://lottie.host/8a90597c-f6df-4de5-a72b-a7e8cfb6d37e/lN0eGr8bK9.json" background="transparent" speed="1" - style={{ width: "300px", height: "300px" }} + style={{ width: "300px", height: "300px",}} loop autoplay > @@ -86,7 +86,7 @@ const First = () => { - + 서비스 이용하기 { id="text2" src={`${process.env.PUBLIC_URL}/logo/text2.svg`} alt="text2" + height="260px" /> @@ -143,22 +144,27 @@ const First = () => { card card card + card - + 🔥로그인 / 회원가입하고 모든 서비스 이용하기 diff --git a/customfront/src/page/info1.jsx b/customfront/src/page/info1.jsx index ba77589a..6a9ae2a0 100644 --- a/customfront/src/page/info1.jsx +++ b/customfront/src/page/info1.jsx @@ -1,25 +1,113 @@ -import React, { useState } from "react"; +import React, { useState, useEffect } from "react"; import { useNavigate } from "react-router-dom"; -import * as b from "../style/styledinfo1"; +import axios from "axios"; +import * as ii from "../style/styledinfo1"; const Info1 = () => { const navigate = useNavigate(); const [selectedBox, setSelectedBox] = useState(null); // 클릭된 박스의 인덱스를 관리 + const [userInfo, setUserInfo] = useState(null); // 사용자 정보를 관리 + const [userError, setUserError] = useState(null); // 사용자 정보 에러를 관리 + const [loading, setLoading] = useState(false); // 로딩 상태를 관리 + const [apiError, setApiError] = useState(null); // API 에러를 관리 + + useEffect(() => { + fetchUserInfo(); // 컴포넌트가 마운트될 때 사용자 정보를 가져오는 함수 호출 + }, []); - const goMain = () => { - navigate(`/`); + const goInfo2 = () => { + navigate(`/Info2`); + }; + + // 사용자 정보를 가져오는 함수 + const fetchUserInfo = async () => { + setLoading(true); // 로딩 시작 + try { + const token = localStorage.getItem('token'); // 로그인 후 저장된 토큰을 가져옵니다. + if (!token) { + throw new Error('로그인 토큰이 없습니다.'); + } + + const response = await axios.get('http://127.0.0.1:8000/myPage/profile', { + headers: { + 'Authorization': `Token ${token}` // Authorization 헤더에 토큰을 포함합니다. + } + }); + + console.log('사용자 정보:', response.data); // 디버그 로그 추가 + setUserInfo(response.data); // 사용자 정보 저장 + } catch (error) { + console.error('사용자 정보 가져오기 오류:', error.message); + setUserError(error.message); // 에러 메시지 설정 + } finally { + setLoading(false); // 로딩 종료 + } + }; + + // 연령대를 업데이트하는 함수 + const updateAge = async (ageRange) => { + setLoading(true); // 로딩 시작 + try { + const token = localStorage.getItem('token'); // 로그인 후 저장된 토큰을 가져옵니다. + if (!token) { + throw new Error('로그인 토큰이 없습니다.'); + } + + const response = await axios.put('http://127.0.0.1:8000/myPage/update/age/', + { age: ageRange }, + { + headers: { + 'Authorization': `Token ${token}`, // Authorization 헤더에 토큰을 포함합니다. + 'Content-Type': 'application/json' + } + }); + + console.log('나이 업데이트 성공:', response.data); // 디버그 로그 추가 + // 여기서 추가적인 상태 업데이트나 화면 전환을 수행할 수 있습니다. + } catch (error) { + console.error('나이 업데이트 오류:', error.message); + setApiError(error.message); // 에러 메시지 설정 + } finally { + setLoading(false); // 로딩 종료 + } }; // 클릭된 박스의 상태를 업데이트하는 함수 const handleBoxClick = (index) => { setSelectedBox(index); // 클릭된 박스의 인덱스를 상태로 저장 + const ageRanges = [ + 'under_19', + '20-29', + '30-39', + '40-49', + '50-59', + '60-69', + 'over_70', + ]; + updateAge(ageRanges[index]); // 선택된 연령대로 업데이트 }; + if (loading) { + return
Loading...
; + } + + if (userError) { // 사용자 정보 에러가 있는 경우 + return
Error: {userError}
; + } + + if (!userInfo) { + return
Loading...
; + } + + if (apiError) { // API 에러가 있는 경우 + return
Error: {apiError}
; + } + return ( - - + + back button { }} onClick={() => navigate(-1)} /> - + - - + + 나에게{" "} 딱 맞는 맞춤 비교 @@ -43,54 +131,53 @@ const Info1 = () => { 키워드 선택 - 을 진행해 주세요!
- 키워드 선택이 완료되어야 다음 단계로 이동이 가능합니다. - + 을 진행해 주세요! + - +

🔴 연령대를 선택해 주세요. - - + + - - - + + + {[ - "19세 이하", - "20~29세", - "30~39세", - "40~49세", - "50~59세", - "60~69세", + "19세 이하", + "20-29세", + "30-39세", + "40-49세", + "50-59세", + "60-69세", "70세 이상", ].map((ageRange, index) => ( - - + handleBoxClick(index)} // 클릭 시 상태 업데이트 > {ageRange} - - + + ))} - - + + - + next - - - + + + ); }; -export default Info1; +export default Info1; \ No newline at end of file diff --git a/customfront/src/page/info2.jsx b/customfront/src/page/info2.jsx index 6f3a2091..a29aaffd 100644 --- a/customfront/src/page/info2.jsx +++ b/customfront/src/page/info2.jsx @@ -1,25 +1,111 @@ -import React, { useState } from "react"; +import React, { useState, useEffect } from "react"; import { useNavigate } from "react-router-dom"; -import * as b from "../style/styledinfo2"; +import axios from "axios"; +import * as cc from "../style/styledchangeinfo2"; const Info2 = () => { const navigate = useNavigate(); const [selectedBox, setSelectedBox] = useState(null); // 클릭된 박스의 인덱스를 관리 + const [userInfo, setUserInfo] = useState(null); // 사용자 정보를 관리 + const [userError, setUserError] = useState(null); // 사용자 정보 에러를 관리 + const [loading, setLoading] = useState(false); // 로딩 상태를 관리 + const [apiError, setApiError] = useState(null); // API 에러를 관리 + + useEffect(() => { + fetchUserInfo(); // 컴포넌트가 마운트될 때 사용자 정보를 가져오는 함수 호출 + }, []); + + // 사용자 정보를 가져오는 함수 + const fetchUserInfo = async () => { + setLoading(true); // 로딩 시작 + try { + const token = localStorage.getItem('token'); // 로그인 후 저장된 토큰을 가져옵니다. + if (!token) { + throw new Error('로그인 토큰이 없습니다.'); + } + + const response = await axios.get('http://127.0.0.1:8000/myPage/profile', { + headers: { + 'Authorization': `Token ${token}` // Authorization 헤더에 토큰을 포함합니다. + } + }); + + console.log('사용자 정보:', response.data); // 디버그 로그 추가 + setUserInfo(response.data); // 사용자 정보 저장 + } catch (error) { + console.error('사용자 정보 가져오기 오류:', error.message); + setUserError(error.message); // 에러 메시지 설정 + } finally { + setLoading(false); // 로딩 종료 + } + }; const goInfo3 = () => { navigate(`/info3`); }; + // 성별을 업데이트하는 함수 + const updateGender = async (gender) => { + setLoading(true); // 로딩 시작 + try { + const token = localStorage.getItem('token'); // 로그인 후 저장된 토큰을 가져옵니다. + if (!token) { + throw new Error('로그인 토큰이 없습니다.'); + } + + const response = await axios.put( + 'http://127.0.0.1:8000/myPage/update/gender/', // API 엔드포인트 + { gender: gender }, // 요청 데이터: { gender: "여성" } (문자열) + { + headers: { + 'Authorization': `Token ${token}`, + 'Content-Type': 'application/json' + } + } + ); + + console.log('성별 변경 응답:', response.data); // 디버그 로그 추가 + setUserInfo({ ...userInfo, gender }); // 사용자 정보 업데이트 + } catch (error) { + console.error('성별 변경 오류:', error.message); + console.error('응답 데이터:', error.response?.data); // 서버에서 반환하는 에러 메시지 + setApiError(error.message); // 에러 메시지 설정 + } finally { + setLoading(false); // 로딩 종료 + } + }; + // 클릭된 박스의 상태를 업데이트하는 함수 const handleBoxClick = (index) => { setSelectedBox(index); // 클릭된 박스의 인덱스를 상태로 저장 + const genderRanges = [ + "Female", // <- 서버가 인식하는 형식에 맞추어야 함 + "Male", + ]; + updateGender(genderRanges[index]); // 선택된 성별로 업데이트 }; + if (loading) { + return
Loading...
; + } + + if (userError) { // 사용자 정보 에러가 있는 경우 + return
Error: {userError}
; + } + + if (!userInfo) { + return
Loading...
; + } + + if (apiError) { // API 에러가 있는 경우 + return
Error: {apiError}
; + } + return ( - - + + back button { }} onClick={() => navigate(-1)} /> - + - - + + 나에게{" "} 딱 맞는 맞춤 비교 @@ -43,48 +129,44 @@ const Info2 = () => { 키워드 선택 - 을 진행해 주세요!
- 키워드 선택이 완료되어야 다음 단계로 이동이 가능합니다. - + 을 진행해 주세요! + - +

🟠 성별을 선택해 주세요. - - - - - - - {[ - "여성", - "남성", - ].map((ageRange, index) => ( - - + + + + + + {["여성", "남성"].map((gender, index) => ( + + handleBoxClick(index)} // 클릭 시 상태 업데이트 > - {ageRange} + {gender} - - + + ))} - - + + - + next - - - + + + ); }; diff --git a/customfront/src/page/info3.jsx b/customfront/src/page/info3.jsx index e168023b..e40390b4 100644 --- a/customfront/src/page/info3.jsx +++ b/customfront/src/page/info3.jsx @@ -1,24 +1,105 @@ -import React, { useState } from "react"; +import React, { useState, useEffect } from "react"; import { useNavigate } from "react-router-dom"; -import * as b from "../style/styledinfo3"; +import axios from "axios"; +import * as dd from "../style/styledinfo3"; const Info3 = () => { const navigate = useNavigate(); - const [selectedBox, setSelectedBox] = useState(null); + const [selectedBox, setSelectedBox] = useState(null); // 클릭된 박스의 인덱스를 관리 + const [userInfo, setUserInfo] = useState(null); // 사용자 정보를 관리 + const [userError, setUserError] = useState(null); // 사용자 정보 에러를 관리 + const [loading, setLoading] = useState(false); // 로딩 상태를 관리 + const [apiError, setApiError] = useState(null); // API 에러를 관리 - const goMain = () => { - navigate(`/`); + useEffect(() => { + fetchUserInfo(); // 컴포넌트가 마운트될 때 사용자 정보를 가져오는 함수 호출 + }, []); + + // 사용자 정보를 가져오는 함수 + const fetchUserInfo = async () => { + setLoading(true); // 로딩 시작 + try { + const token = localStorage.getItem('token'); // 로그인 후 저장된 토큰을 가져옵니다. + if (!token) { + throw new Error('로그인 토큰이 없습니다.'); + } + + const response = await axios.get('http://127.0.0.1:8000/myPage/profile', { + headers: { + 'Authorization': `Token ${token}` // Authorization 헤더에 토큰을 포함합니다. + } + }); + + console.log('사용자 정보:', response.data); // 디버그 로그 추가 + setUserInfo(response.data); // 사용자 정보 저장 + } catch (error) { + console.error('사용자 정보 가져오기 오류:', error.message); + setUserError(error.message); // 에러 메시지 설정 + } finally { + setLoading(false); // 로딩 종료 + } + }; + + // 질병 정보를 업데이트하는 함수 + const updateDisease = async (disease) => { + setLoading(true); // 로딩 시작 + try { + const token = localStorage.getItem('token'); // 로그인 후 저장된 토큰을 가져옵니다. + if (!token) { + throw new Error('로그인 토큰이 없습니다.'); + } + + const response = await axios.put('http://127.0.0.1:8000/myPage/update/disease/', + { disease: disease }, + { + headers: { + 'Authorization': `Token ${token}`, // Authorization 헤더에 토큰을 포함합니다. + 'Content-Type': 'application/json' + } + }); + + console.log('질병 업데이트 성공:', response.data); // 디버그 로그 추가 + // 여기서 추가적인 상태 업데이트나 화면 전환을 수행할 수 있습니다. + } catch (error) { + console.error('질병 업데이트 오류:', error.message); + setApiError(error.message); // 에러 메시지 설정 + } finally { + setLoading(false); // 로딩 종료 + } }; + // 클릭된 박스의 상태를 업데이트하는 함수 const handleBoxClick = (index) => { - setSelectedBox(index); + setSelectedBox(index); // 클릭된 박스의 인덱스를 상태로 저장 + const diseases = ["diabetes", "muscle_loss", "obesity", "hypertension"]; + updateDisease(diseases[index]); // 선택된 질병으로 업데이트 + }; + + if (loading) { + return
Loading...
; + } + + if (userError) { // 사용자 정보 에러가 있는 경우 + return
Error: {userError}
; + } + + if (!userInfo) { + return
Loading...
; + } + + if (apiError) { // API 에러가 있는 경우 + return
Error: {apiError}
; + } + + const goInfo4 = () => { + navigate(`/info4`); }; return ( - - + + back button { }} onClick={() => navigate(-1)} /> - + - - + + + 나에게{" "} 딱 맞는 맞춤 비교 @@ -42,53 +124,55 @@ const Info3 = () => { 키워드 선택 - 을 진행해 주세요!
- - 키워드 선택이 완료되어야 다음 단계로 이동이 가능합니다. - - + 을 진행해 주세요! + - +

🟡 관리가 필요한 부분을 선택해 주세요. - - + + - - - + + + {[ - "당뇨", - "근손실", - "비만", - "고혈압", - ].map((health1Range, index) => ( - - ( + + handleBoxClick(index)} + style={{ + position: "absolute", + top: item.position.top, + left: item.position.left, + }} > - {health1Range} + {item.name} - - + + ))} - - + + - + next - - - + + + ); }; -export default Info3; +export default Info3; \ No newline at end of file diff --git a/customfront/src/page/info4.jsx b/customfront/src/page/info4.jsx index be0deaf4..f5674606 100644 --- a/customfront/src/page/info4.jsx +++ b/customfront/src/page/info4.jsx @@ -1,25 +1,117 @@ -import React, { useState } from "react"; +import React, { useState, useEffect } from "react"; import { useNavigate } from "react-router-dom"; -import * as f from "../style/styledinfo4"; +import axios from "axios"; +import * as i9 from "../style/styledinfo4"; const Info4 = () => { const navigate = useNavigate(); const [selectedBox, setSelectedBox] = useState(null); // 클릭된 박스의 인덱스를 관리 + const [userInfo, setUserInfo] = useState(null); // 사용자 정보를 관리 + const [userError, setUserError] = useState(null); // 사용자 정보 에러를 관리 + const [loading, setLoading] = useState(false); // 로딩 상태를 관리 + const [apiError, setApiError] = useState(null); // API 에러를 관리 + + useEffect(() => { + fetchUserInfo(); // 컴포넌트가 마운트될 때 사용자 정보를 가져오는 함수 호출 + }, []); + + // 사용자 정보를 가져오는 함수 + const fetchUserInfo = async () => { + setLoading(true); // 로딩 시작 + try { + const token = localStorage.getItem('token'); // 로그인 후 저장된 토큰을 가져옵니다. + if (!token) { + throw new Error('로그인 토큰이 없습니다.'); + } + + const response = await axios.get('http://127.0.0.1:8000/myPage/profile', { + headers: { + 'Authorization': `Token ${token}` // Authorization 헤더에 토큰을 포함합니다. + } + }); + + console.log('사용자 정보:', response.data); // 디버그 로그 추가 + setUserInfo(response.data); // 사용자 정보 저장 + } catch (error) { + console.error('사용자 정보 가져오기 오류:', error.message); + setUserError(error.message); // 에러 메시지 설정 + } finally { + setLoading(false); // 로딩 종료 + } + }; const goInfo5 = () => { - navigate(`/info5`); + navigate(`/Info5`); }; - // 클릭된 박스의 상태를 업데이트하는 함수 + // 키를 업데이트하는 함수 + const updateHeight = async (heightRange) => { + setLoading(true); // 로딩 시작 + try { + const token = localStorage.getItem('token'); // 로그인 후 저장된 토큰을 가져옵니다. + if (!token) { + throw new Error('로그인 토큰이 없습니다.'); + } + + console.log('업데이트할 키 범위:', heightRange); // 디버그 로그 추가 + + const response = await axios.put('http://127.0.0.1:8000/myPage/update/height/', + { height: heightRange }, // height를 문자열로 전달 + { + headers: { + 'Authorization': `Token ${token}`, // Authorization 헤더에 토큰을 포함합니다. + 'Content-Type': 'application/json' + } + }); + + console.log('키 업데이트 성공:', response.data); // 디버그 로그 추가 + // 성공적인 업데이트 후 추가적인 상태 업데이트나 화면 전환을 수행할 수 있습니다. + } catch (error) { + console.error('키 업데이트 오류:', error.message); + console.error('응답 데이터:', error.response?.data); // 응답 데이터 로깅 + setApiError(error.message); // 에러 메시지 설정 + } finally { + setLoading(false); // 로딩 종료 + } + }; + + // 클릭된 박스의 상태를 업데이트하고 키를 업데이트하는 함수 const handleBoxClick = (index) => { setSelectedBox(index); // 클릭된 박스의 인덱스를 상태로 저장 + const heightRanges = [ + 'under_149', + '150-154', + '155-159', + '160-164', + '165-169', + '170-174', + '175-179', + 'over_180', + ]; + updateHeight(heightRanges[index]); }; + if (loading) { + return
Loading...
; + } + + if (userError) { // 사용자 정보 에러가 있는 경우 + return
Error: {userError}
; + } + + if (!userInfo) { + return
Loading...
; + } + + if (apiError) { // API 에러가 있는 경우 + return
Error: {apiError}
; + } + return ( - - + + back button { }} onClick={() => navigate(-1)} /> - - - - + + + 나에게{" "} 딱 맞는 맞춤 비교 @@ -43,20 +134,19 @@ const Info4 = () => { 키워드 선택 - 을 진행해 주세요!
- 키워드 선택이 완료되어야 다음 단계로 이동이 가능합니다. - + 을 진행해 주세요! + - +

🟢 키를 선택해 주세요. - - + + - - - + + + {[ "149cm 이하", "150~154cm", @@ -67,31 +157,31 @@ const Info4 = () => { "175~179cm", "180cm 이상" ].map((heightRange, index) => ( - - + handleBoxClick(index)} // 클릭 시 상태 업데이트 > {heightRange} - - + + ))} - - + + - + next - - - + + + ); }; -export default Info4; +export default Info4; \ No newline at end of file diff --git a/customfront/src/page/info5.jsx b/customfront/src/page/info5.jsx index bedc60c9..af3afc49 100644 --- a/customfront/src/page/info5.jsx +++ b/customfront/src/page/info5.jsx @@ -1,25 +1,123 @@ -import React, { useState } from "react"; +import React, { useState, useEffect } from "react"; import { useNavigate } from "react-router-dom"; -import * as g from "../style/styledinfo5"; +import axios from "axios"; +import * as zz from "../style/styledinfo5"; const Info5 = () => { const navigate = useNavigate(); const [selectedBox, setSelectedBox] = useState(null); // 클릭된 박스의 인덱스를 관리 + const [userInfo, setUserInfo] = useState(null); // 사용자 정보를 관리 + const [userError, setUserError] = useState(null); // 사용자 정보 에러를 관리 + const [loading, setLoading] = useState(false); // 로딩 상태를 관리 + const [apiError, setApiError] = useState(null); // API 에러를 관리 - const goMain = () => { - navigate(`/`); + useEffect(() => { + fetchUserInfo(); // 컴포넌트가 마운트될 때 사용자 정보를 가져오는 함수 호출 + }, []); + + // 사용자 정보를 가져오는 함수 + const fetchUserInfo = async () => { + setLoading(true); // 로딩 시작 + try { + const token = localStorage.getItem('token'); // 로그인 후 저장된 토큰을 가져옵니다. + if (!token) { + throw new Error('로그인 토큰이 없습니다.'); + } + + const response = await axios.get('http://127.0.0.1:8000/myPage/profile', { + headers: { + 'Authorization': `Token ${token}` // Authorization 헤더에 토큰을 포함합니다. + } + }); + + console.log('사용자 정보:', response.data); // 디버그 로그 추가 + setUserInfo(response.data); // 사용자 정보 저장 + } catch (error) { + console.error('사용자 정보 가져오기 오류:', error.message); + setUserError(error.message); // 에러 메시지 설정 + } finally { + setLoading(false); // 로딩 종료 + } }; - // 클릭된 박스의 상태를 업데이트하는 함수 + const goMain0 = () => { + navigate(`/Main0`); + }; + + // 몸무게를 업데이트하는 함수 + const updateWeight = async (weightRange) => { + setLoading(true); // 로딩 시작 + try { + const token = localStorage.getItem('token'); // 로그인 후 저장된 토큰을 가져옵니다. + if (!token) { + throw new Error('로그인 토큰이 없습니다.'); + } + + const response = await axios.put( + 'http://127.0.0.1:8000/myPage/update/weight/', // API 엔드포인트 + { weight: weightRange }, // 요청 데이터 + { + headers: { + 'Authorization': `Token ${token}`, + 'Content-Type': 'application/json' + } + } + ); + + console.log('몸무게 업데이트 성공:', response.data); // 디버그 로그 추가 + } catch (error) { + console.error('몸무게 업데이트 오류:', error.message); + if (error.response) { + console.error('응답 데이터:', error.response.data); + } + setApiError(error.message); // 에러 메시지 설정 + } finally { + setLoading(false); // 로딩 종료 + } + }; + const handleBoxClick = (index) => { setSelectedBox(index); // 클릭된 박스의 인덱스를 상태로 저장 + const weightRanges = [ + 'under_39', + '40-44', + '45-49', + '50-54', + '55-59', + '60-64', + '65-69', + '70-74', + '75-79', + '80-84', + '85-89', + '90-94', + '95-99', + 'over_100', + ]; + updateWeight(weightRanges[index]); // 선택된 몸무게 범위로 업데이트 }; + if (loading) { + return
Loading...
; + } + + if (userError) { // 사용자 정보 에러가 있는 경우 + return
Error: {userError}
; + } + + if (!userInfo) { + return
Loading...
; + } + + if (apiError) { // API 에러가 있는 경우 + return
Error: {apiError}
; + } + return ( - - + + back button { }} onClick={() => navigate(-1)} /> - + - - + + 나에게{" "} 딱 맞는 맞춤 비교 @@ -43,20 +141,19 @@ const Info5 = () => { 키워드 선택 - 을 진행해 주세요!
- 키워드 선택이 완료되어야 다음 단계로 이동이 가능합니다. - + 을 진행해 주세요! + - +

🔵 몸무게를 선택해 주세요. - - + + - - - + + + {[ "39kg 이하", "40~44kg", @@ -70,28 +167,28 @@ const Info5 = () => { "80~84kg", "85~89kg", "90~94kg", - "100kg 이상" + "100kg 이상", ].map((weightRange, index) => ( - - + handleBoxClick(index)} // 클릭 시 상태 업데이트 > {weightRange} - - + + ))} - - - - - 🔥 키워드 선택 완료하고 계정 생성하기 - - - + + + + + 🔥 키워드 선택 완료하고 계정 생성하기 + + + ); }; -export default Info5; +export default Info5; \ No newline at end of file diff --git a/customfront/src/page/login.jsx b/customfront/src/page/login.jsx index e69de29b..3954dd1b 100644 --- a/customfront/src/page/login.jsx +++ b/customfront/src/page/login.jsx @@ -0,0 +1,134 @@ +import React, { useEffect, useState } from "react"; +import { useNavigate } from "react-router-dom"; +import * as h from "../style/styledlogin"; + +const Login = () => { + const [username, setUsername] = useState(""); + const [password, setPassword] = useState(""); + const [csrfToken, setCsrfToken] = useState(""); + const navigate = useNavigate(); + + useEffect(() => { + const fetchCsrfToken = async () => { + const token = localStorage.getItem('csrftoken'); + setCsrfToken(token); + }; + + fetchCsrfToken(); + }, []); + + const handleLogin = async () => { + try { + const response = await fetch("http://127.0.0.1:8000/rest-auth/login/", { + method: "POST", + headers: { + "Content-Type": "application/json", + "X-CSRFToken": csrfToken, + }, + body: JSON.stringify({ username, password }), + }); + + if (!response.ok) { + throw new Error("로그인 실패"); + } + + const data = await response.json(); + console.log("로그인 성공:", data); + + // 서버에서 응답한 토큰이 'key' 필드에 있는 경우 + const token = data.key; + localStorage.setItem('token', token); + + // 로그인 성공 후 네비게이션 처리 + navigate(`/main0`); + } catch (error) { + console.error(error); + alert("로그인 실패: 사용자 이름이나 비밀번호를 확인하세요."); + } + }; + + const LottiePlayer = () => { + useEffect(() => { + const script = document.createElement("script"); + script.src = + "https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.mjs"; + script.type = "module"; + document.body.appendChild(script); + + return () => { + document.body.removeChild(script); + }; + }, []); + + return ( + + ); + }; + + const goMembership = () => { + navigate(`/membership`); + }; + + return ( + + + + + logintitle navigate(-1)} + /> + + + + setUsername(e.target.value)} + style={{ outline: "none" }} + /> + + + setPassword(e.target.value)} + style={{ outline: "none" }} + /> + + + +
+ 로그인 +
+ + + +
+ 회원가입 +
+ + + ); +}; + +export default Login; \ No newline at end of file diff --git a/customfront/src/page/login2.jsx b/customfront/src/page/login2.jsx new file mode 100644 index 00000000..4e96d1a7 --- /dev/null +++ b/customfront/src/page/login2.jsx @@ -0,0 +1,125 @@ +import React, { useEffect, useState } from "react"; +import { useNavigate } from "react-router-dom"; +import * as l2 from "../style/styledlogin2"; + +const Login2 = () => { + const [username, setUsername] = useState(""); + const [password, setPassword] = useState(""); + const [csrfToken, setCsrfToken] = useState(""); + const navigate = useNavigate(); + + useEffect(() => { + const fetchCsrfToken = async () => { + const token = localStorage.getItem('csrftoken'); + setCsrfToken(token); + }; + + fetchCsrfToken(); + }, []); + + const handleLogin = async () => { + try { + const response = await fetch("http://127.0.0.1:8000/rest-auth/login/", { + method: "POST", + headers: { + "Content-Type": "application/json", + "X-CSRFToken": csrfToken, + }, + body: JSON.stringify({ username, password }), + }); + + if (!response.ok) { + throw new Error("로그인 실패"); + } + + const data = await response.json(); + console.log("로그인 성공:", data); + + // 서버에서 응답한 토큰이 'key' 필드에 있는 경우 + const token = data.key; + localStorage.setItem('token', token); + + // 로그인 성공 후 네비게이션 처리 + navigate(`/info1`); + } catch (error) { + console.error(error); + alert("로그인 실패: 사용자 이름이나 비밀번호를 확인하세요."); + } + }; + + const LottiePlayer = () => { + useEffect(() => { + const script = document.createElement("script"); + script.src = + "https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.mjs"; + script.type = "module"; + document.body.appendChild(script); + + return () => { + document.body.removeChild(script); + }; + }, []); + + return ( + + ); + }; + + + return ( + + + + + logintitle navigate(-1)} + /> + + + + setUsername(e.target.value)} + style={{ outline: "none" }} + /> + + + setPassword(e.target.value)} + style={{ outline: "none" }} + /> + + + +
+ 로그인 +
+ + + ); +}; + +export default Login2; \ No newline at end of file diff --git a/customfront/src/page/logincomplete.jsx b/customfront/src/page/logincomplete.jsx new file mode 100644 index 00000000..2ba3696b --- /dev/null +++ b/customfront/src/page/logincomplete.jsx @@ -0,0 +1,35 @@ +import React from "react"; +import { useNavigate } from "react-router-dom"; +import * as l3 from "../style/styledlogincomplete"; + +const Logincomplete = () => { + const navigate = useNavigate(); + + const goLogin2 = () => { + navigate(`/login2`); + }; + + return ( + + + + lc + + 🔥 키워드 선택하기 + + + + + ); +}; + +export default Logincomplete; \ No newline at end of file diff --git a/customfront/src/page/main.jsx b/customfront/src/page/main.jsx deleted file mode 100644 index 1cac6215..00000000 --- a/customfront/src/page/main.jsx +++ /dev/null @@ -1,97 +0,0 @@ -import React from "react"; -import { useNavigate } from "react-router-dom"; -import * as a from "../style/styledmain"; - -const Main = () => { - const navigate = useNavigate(); - - const goMain = () => { - navigate(`/main`); - }; - - const goHome = () => { - navigate(`/home`); - }; - - return ( - - - back button navigate(-1)} - /> - - alarm button navigate(-1)} - /> - menu button navigate(-1)} - /> - -
- - - - - 000님에게 맞는
- 식품을 찾아볼까요? - - - - #당뇨 - #체중감소 - #단백질이 좋아 - - - - - - search button - - - ); -}; - -export default Main; diff --git a/customfront/src/page/main0.jsx b/customfront/src/page/main0.jsx index 69258981..b6f568ce 100644 --- a/customfront/src/page/main0.jsx +++ b/customfront/src/page/main0.jsx @@ -1,14 +1,99 @@ -import React from "react"; -import { useNavigate } from "react-router-dom"; +import React, { useState, useEffect } from "react"; +import { useNavigate, useLocation } from "react-router-dom"; +import axios from "axios"; import * as k from "../style/styledmain0"; const Main0 = () => { const navigate = useNavigate(); + const [isMenuOpen, setIsMenuOpen] = useState(false); - const goMain = () => { + const goAlarm1 = () => { + navigate(`/Alarm1`); + }; + + const goMain2 = () => { navigate(`/`); }; + const goReview = () => { + navigate(`/Review`); + }; + + const goMypage = () => { + navigate(`/Mypage`); + }; + + const goLogin = () => { + navigate(`/Login`); + }; + + const toggleMenu = () => { + setIsMenuOpen(!isMenuOpen); + }; + + const closeMenu = () => { + setIsMenuOpen(false); + }; + + const [firstName, setFirstName] = useState(""); // 사용자 이름 상태 추가 + const [userInfo, setUserInfo] = useState(null); // 사용자 정보 상태 추가 + const [userError, setUserError] = useState(null); // 사용자 정보 에러 상태 추가 + + useEffect(() => { + // 로컬 스토리지에서 first_name 가져오기 + const storedFirstName = localStorage.getItem("first_name"); + console.log("로컬 스토리지에서 가져온 first_name:", storedFirstName); // 콘솔 로그 추가 + if (storedFirstName) { + setFirstName(storedFirstName); + } + }, []); + + // 사용자 정보를 가져오는 함수 + const fetchUserInfo = async () => { + try { + const token = localStorage.getItem("token"); // 로그인 후 저장된 토큰을 가져옵니다. + if (!token) { + throw new Error("로그인 토큰이 없습니다."); + } + + const response = await axios.get("http://127.0.0.1:8000/myPage/profile", { + headers: { + Authorization: `Token ${token}`, // Authorization 헤더에 토큰을 포함합니다. + }, + }); + + console.log("사용자 정보:", response.data); // 디버그 로그 추가 + setUserInfo(response.data); + } catch (error) { + console.error("사용자 정보 가져오기 오류:", error.message); + setUserError(error.message); // 에러 메시지 설정 + } + }; + + useEffect(() => { + fetchUserInfo(); // 컴포넌트가 마운트될 때 사용자 정보를 가져옵니다. + }, []); + + const diseaseMapping = { + diabetes: "당뇨", + obesity: "비만", + muscle_loss: "근손실", + hypertension: "고혈압", + }; + + // 사용자 정보에서 질병 이름을 변환 + const getDiseaseName = (diseaseKey) => { + return diseaseMapping[diseaseKey] || diseaseKey; + }; + + if (userError) { // 사용자 정보 에러가 있는 경우 + return
Error: {userError}
; + } + + if (!userInfo) { + return
Loading...
; + } + return ( @@ -29,7 +114,7 @@ const Main0 = () => { src={`${process.env.PUBLIC_URL}/logo/ylogo.svg`} alt="logo" width="40px" - onClick={goMain} + onClick={goMain2} /> { left: "8px", cursor: "pointer", }} - onClick={() => navigate(-1)} + onClick={goAlarm1} /> { left: "8px", cursor: "pointer", }} - onClick={() => navigate(-1)} + onClick={toggleMenu} />
+ {isMenuOpen && ( + <> + + + + mypage + + + myreview + + + mainpage + + + logout + + + + )} + + - 000님에게 맞는
+ {userInfo.first_name}님에게 맞는
식품을 찾아볼까요? - #당뇨 - #체중감소 - #단백질이 좋아 + #{getDiseaseName(userInfo.disease)} - - - - search button - + + next + - - - - + + + card + card + card + card + + - + myreview - + mypage diff --git a/customfront/src/page/main2.jsx b/customfront/src/page/main2.jsx index c78fbef1..b07f7c17 100644 --- a/customfront/src/page/main2.jsx +++ b/customfront/src/page/main2.jsx @@ -1,55 +1,354 @@ -import React, { useState } from "react"; +import React, { useState, useEffect } from "react"; import { useNavigate } from "react-router-dom"; +import axios from "axios"; import * as l from "../style/styledmain2"; const Main2 = () => { const navigate = useNavigate(); + const [isMenuOpen, setIsMenuOpen] = useState(false); + const [userInfo, setUserInfo] = useState(null); + const [userError, setUserError] = useState(null); + + const goMypage = () => { + navigate(`/Mypage`); + }; + + const goMyreview = () => { + navigate(`/Review`); + }; + + const goLogin = () => { + navigate(`/Login`); + }; + + const goMain2 = () => { + navigate(`/Main2`); + }; + + const toggleMenu = () => { + setIsMenuOpen(!isMenuOpen); + }; + + const closeMenu = () => { + setIsMenuOpen(false); + }; + + // 사용자 정보를 가져오는 함수 + const fetchUserInfo = async () => { + try { + const token = localStorage.getItem("token"); // 로그인 후 저장된 토큰을 가져옵니다. + if (!token) { + throw new Error("로그인 토큰이 없습니다."); + } + + const response = await axios.get("http://127.0.0.1:8000/myPage/profile", { + headers: { + Authorization: `Token ${token}`, // Authorization 헤더에 토큰을 포함합니다. + }, + }); + + console.log("사용자 정보:", response.data); // 디버그 로그 추가 + setUserInfo(response.data); + } catch (error) { + console.error("사용자 정보 가져오기 오류:", error.message); + setUserError(error.message); // 에러 메시지 설정 + } + }; + + const diseaseMapping = { + diabetes: "당뇨", + obesity: "비만", + muscle_loss: "근손실", + hypertension: "고혈압", + }; + + // 사용자 정보에서 질병 이름을 변환 + const getDiseaseName = (diseaseKey) => { + return diseaseMapping[diseaseKey] || diseaseKey; + }; + + // 컴포넌트가 마운트될 때 사용자 정보를 가져옵니다. + useEffect(() => { + fetchUserInfo(); + }, []); + + // 나머지 상태 및 함수 정의 + const [box2Items, setBox2Items] = useState([]); + const [selectedItems, setSelectedItems] = useState([]); + const [list2Items, setList2Items] = useState([]); + const [searchQuery, setSearchQuery] = useState(""); + const [loading, setLoading] = useState(false); + const [error, setError] = useState(null); + const [cartError, setCartError] = useState(null); + + const axiosInstance = axios.create({ + baseURL: "http://127.0.0.1:8000/", + headers: { + Authorization: `Token ${localStorage.getItem("token")}`, + "Content-Type": "application/json", + "X-CSRFToken": localStorage.getItem("csrftoken") || "", + }, + }); + + useEffect(() => { + const checkCartStatus = async () => { + setLoading(true); + try { + const response = await axiosInstance.get("customFit/cart/"); + console.log("현재 카트 상태:", response.data); + if (response.data.length === 0) { + console.log("카트가 비어 있습니다."); + } else { + console.log("카트에 상품이 있습니다."); + } + } catch (error) { + console.error("빈 상태 확인 중 오류 발생:", error.message); + setError(error); + } finally { + setLoading(false); + } + }; + + checkCartStatus(); + }, []); + + const toggleCheckbox = async (item) => { + const isSelected = selectedItems.some( + (selectedItem) => selectedItem.product_id === item.product_id + ); + + if (isSelected) { + setSelectedItems((prevSelectedItems) => + prevSelectedItems.filter((i) => i.product_id !== item.product_id) + ); + + try { + await removeFromCart(item.product_id); + console.log( + `상품 ID ${item.product_id}이(가) 카트에서 삭제되었습니다.` + ); + } catch (error) { + console.error("카트에서 삭제 중 오류 발생:", error.message); + setError(error); + } + } else { + setSelectedItems((prevSelectedItems) => [...prevSelectedItems, item]); + + try { + await addToCart(item.product_id); + console.log(`상품 ID ${item.product_id}이(가) 카트에 추가되었습니다.`); + } catch (error) { + console.error("카트 추가 중 오류 발생:", error.message); + setError(error); + } + } + }; + + const handleSearch = async () => { + setLoading(true); + try { + const response = await axiosInstance.get("customFit/search/", { + params: { product_name: searchQuery }, + }); + setList2Items(response.data); + } catch (error) { + console.error("검색 중 오류 발생:", error.message); + setError(error); + } finally { + setLoading(false); + } + }; + + const handleSearchInputChange = (event) => { + setSearchQuery(event.target.value); + }; + + const addToCart = async (product_id) => { + try { + const response = await axiosInstance.post( + `customFit/add_cart/${product_id}/`, + {}, + { + headers: { + "X-CSRFToken": localStorage.getItem("csrftoken") || "", + }, + } + ); + console.log("API 응답:", response.data); + console.log(`상품 ID ${product_id}이(가) 카트에 추가되었습니다.`); + } catch (error) { + console.error("카트 추가 중 오류 발생:", error.message); + setError(error); + } + }; + + const removeFromCart = async (product_id) => { + try { + const response = await axiosInstance.delete( + `customFit/cart/delete_item/${product_id}/`, + { + headers: { + "X-CSRFToken": localStorage.getItem("csrftoken") || "", + }, + } + ); + console.log("API 응답:", response.data); + console.log(`상품 ID ${product_id}이(가) 카트에서 제거되었습니다.`); + } catch (error) { + console.error("카트에서 제거 중 오류 발생:", error.message); + setError(error); + } + }; + + const addToBox2Items = async () => { + if (selectedItems.length === 0) { + console.log("선택된 상품이 없습니다."); + return; + } + + const newItems = selectedItems.map((item) => ({ + product_id: item.product_id, + product_name: item.product_name, + })); + + const uniqueItems = newItems.filter( + (newItem) => + !box2Items.some((boxItem) => boxItem.product_id === newItem.product_id) + ); + + try { + for (const item of uniqueItems) { + await addToCart(item.product_id); + } + setBox2Items((prevItems) => [...prevItems, ...uniqueItems]); + console.log("Box2에 추가된 상품:", uniqueItems); + } catch (error) { + console.error("상품 추가 중 오류 발생:", error.message); + setError(error); + } finally { + setSelectedItems([]); + } + }; - const goMain = () => { - navigate(`/`); - }; - - const [isChecked, setIsChecked] = useState(false); - - const toggleCheckbox = () => { - setIsChecked(!isChecked); - }; - - // List2의 아이템 상태 관리 - const [list2Items] = useState([ - { id: 1, name: "상품명1", manufacturer: "제조사A", size: "Ng" }, - { id: 2, name: "상품명2", manufacturer: "제조사A", size: "Ng" }, - { id: 3, name: "상품명3", manufacturer: "제조사A", size: "Ng" }, - { id: 4, name: "상품명4", manufacturer: "제조사A", size: "Ng" }, - { id: 5, name: "상품명5", manufacturer: "제조사A", size: "Ng" }, - { id: 6, name: "상품명6", manufacturer: "제조사A", size: "Ng" }, - { id: 7, name: "상품명7", manufacturer: "제조사A", size: "Ng" }, - { id: 8, name: "상품명8", manufacturer: "제조사A", size: "Ng" }, - { id: 9, name: "상품명9", manufacturer: "제조사A", size: "Ng" }, - { id: 10, name: "상품명10", manufacturer: "제조사A", size: "Ng" }, - { id: 11, name: "상품명11", manufacturer: "제조사A", size: "Ng" } - ]); - - // Box2의 아이템 상태 관리 - const [box2Items, setBox2Items] = useState([ - { id: 1, name: "과자 1" }, - { id: 2, name: "과자 2" }, - { id: 3, name: "과자 3" }, - { id: 4, name: "과자 4" }, - { id: 5, name: "과자 5" } - //{ id: 6, name: "과자 6" }// - ]); - - // Box2의 개별 아이템 삭제 함수 const deleteItemFromBox2 = (id) => { - setBox2Items(box2Items.filter(item => item.id !== id)); + setBox2Items((prevItems) => + prevItems.filter((item) => item.product_id !== id) + ); }; - // Box2의 모든 아이템 삭제 함수 - const clearBox2Items = () => { - setBox2Items([]); + const clearBox2Items = async () => { + try { + const itemIds = box2Items.map((item) => item.product_id); + if (itemIds.length > 0) { + await axiosInstance.post( + "customFit/cart/clear/", + { + item_ids: itemIds, + }, + { + headers: { + "X-CSRFToken": localStorage.getItem("csrftoken") || "", + }, + } + ); + } + setBox2Items([]); + console.log("Box2의 모든 상품이 카트에서 제거되었습니다."); + } catch (error) { + console.error("Box2 항목 삭제 중 오류 발생:", error.message); + setError(error); + } }; + const deleteSelectedItem = async (id) => { + setSelectedItems((prevItems) => + prevItems.filter((item) => item.product_id !== id) + ); + + try { + await removeFromCart(id); + console.log(`상품 ID ${id}이(가) 카트에서 삭제되었습니다.`); + } catch (error) { + console.error("선택된 항목 삭제 중 오류 발생:", error.message); + setError(error); + } + }; + + const clearSelectedItems = async () => { + try { + for (const item of selectedItems) { + await removeFromCart(item.product_id); + } + setSelectedItems([]); + console.log("선택된 모든 상품이 카트에서 제거되었습니다."); + } catch (error) { + console.error("선택된 항목 모두 삭제 중 오류 발생:", error.message); + setError(error); + } + }; + + const handleCompare = async () => { + setLoading(true); + setCartError(null); + try { + const cartResponse = await axiosInstance.get("customFit/cart/"); + if (cartResponse.data.length === 0) { + setCartError("상품을 추가한 후 비교해 주세요."); + return; + } + + const response = await axiosInstance.get("customFit/compare/"); + const recommendedProduct = response.data.recommended_product; + + navigate("/main3", { state: { recommendedProduct } }); + + await clearBox2Items(); + console.log("비교 후 카트가 비워졌습니다."); + } catch (error) { + console.error("비교하기 중 오류 발생:", error.message); + setError(error); + } finally { + setLoading(false); + } + }; + + const handleLogout = () => { + // 로컬 저장소에서 사용자 정보를 제거합니다. + localStorage.removeItem("user"); + + // 세션 저장소에서 사용자 정보를 제거합니다. + sessionStorage.removeItem("user"); + + // 쿠키 제거 (필요한 경우) + document.cookie.split(";").forEach((c) => { + document.cookie = c + .trim() + .replace(/=.*/, `=;expires=${new Date().toUTCString()};path=/`); + }); + + console.log("로그아웃 성공"); + + // 로그인 페이지로 리디렉션합니다. + navigate("/Login"); + }; + + if (loading) { + return
Loading...
; + } + + if (error) { + return
Error: {error.message}
; + } + + if (userError) { + // 사용자 정보 에러가 있는 경우 + return
Error: {userError}
; + } + + if (!userInfo) { + return
Loading...
; + } + return ( @@ -70,7 +369,7 @@ const Main2 = () => { src={`${process.env.PUBLIC_URL}/logo/ylogo.svg`} alt="logo" width="40px" - onClick={goMain} + onClick={() => navigate("/")} /> { left: "8px", cursor: "pointer", }} - onClick={() => navigate(-1)} + onClick={toggleMenu} />
+ {isMenuOpen && ( + <> + + + + mypage + + + myreview + + + mainpage + + { + handleLogout(); + toggleMenu(); + }} + > + logout + + + + )} + - 000님에게 맞는
+ {userInfo.first_name}님에게 맞는
식품을 찾아볼까요? - #당뇨 - #체중감소 - #단백질이 좋아 + #{getDiseaseName(userInfo.disease)} - + search button - 상품명 + 상품명 제조사 - 용량 - 선택하기 + 용량 + 선택하기 {list2Items.map((item) => ( - - {item.name} + + {item.product_name} {item.manufacturer} - {item.size} + {item.Capacity}g - - {isChecked && "\u2714"} + + selectedItem.product_id === item.product_id + )} + onClick={() => toggleCheckbox(item)} + > + {selectedItems.some( + (selectedItem) => + selectedItem.product_id === item.product_id + ) && "\u2714"} @@ -157,40 +535,41 @@ const Main2 = () => { 맞춤 건강 키트 - - - {box2Items.map((item) => ( - - - {item.name} - - delbutton deleteItemFromBox2(item.id)} // 개별 아이템 삭제 - /> - - - + + + {selectedItems.map((item) => ( + + {item.product_name} + + 삭제 버튼 deleteSelectedItem(item.product_id)} + /> + + ))} - + trash - - + + 비교하기 + {cartError && ( +
{cartError}
+ )} ); diff --git a/customfront/src/page/main3.jsx b/customfront/src/page/main3.jsx index 2713c1bf..b9ea66ab 100644 --- a/customfront/src/page/main3.jsx +++ b/customfront/src/page/main3.jsx @@ -1,24 +1,124 @@ -import React, { useState } from "react"; -import { useNavigate } from "react-router-dom"; +import React, { useState, useEffect } from "react"; +import { useNavigate, useLocation } from "react-router-dom"; +import axios from "axios"; import * as z from "../style/styledmain3"; const Main3 = () => { const navigate = useNavigate(); + const location = useLocation(); + const { recommendedProduct } = location.state || {}; // 추천 상품 정보 가져오기 - const goMain = () => { - navigate(`/`); + const [rating, setRating] = useState(0); + const [firstName, setFirstName] = useState(""); // 사용자 이름 상태 추가 + const [userInfo, setUserInfo] = useState(null); // 사용자 정보 상태 추가 + const [userError, setUserError] = useState(null); // 사용자 정보 에러 상태 추가 + const [isMenuOpen, setIsMenuOpen] = useState(false); + + useEffect(() => { + // 로컬 스토리지에서 first_name 가져오기 + const storedFirstName = localStorage.getItem("first_name"); + console.log("로컬 스토리지에서 가져온 first_name:", storedFirstName); // 콘솔 로그 추가 + if (storedFirstName) { + setFirstName(storedFirstName); + } + }, []); + + // 사용자 정보를 가져오는 함수 + const fetchUserInfo = async () => { + try { + const token = localStorage.getItem("token"); // 로그인 후 저장된 토큰을 가져옵니다. + if (!token) { + throw new Error("로그인 토큰이 없습니다."); + } + + const response = await axios.get("http://127.0.0.1:8000/myPage/profile", { + headers: { + Authorization: `Token ${token}`, // Authorization 헤더에 토큰을 포함합니다. + }, + }); + + console.log("사용자 정보:", response.data); // 디버그 로그 추가 + setUserInfo(response.data); + } catch (error) { + console.error("사용자 정보 가져오기 오류:", error.message); + setUserError(error.message); // 에러 메시지 설정 + } }; - const goReviewcheck3 = () => { - navigate(`/Reviewcheck3`); + useEffect(() => { + fetchUserInfo(); // 컴포넌트가 마운트될 때 사용자 정보를 가져옵니다. + }, []); + + const goMain0 = () => { + navigate(`/Main0`); }; - const [rating, setRating] = useState(0); + const goAlarm1 = () => { + navigate(`/Alarm1`); + }; + + const goMypage = () => { + navigate(`/Mypage`); + }; + + const goReview = () => { + navigate(`/Review`); + }; + + const goLogin = () => { + navigate(`/Login`); + }; + + const toggleMenu = () => { + setIsMenuOpen(!isMenuOpen); + }; + + const closeMenu = () => { + setIsMenuOpen(false); + }; + + const goMain2 = () => { + navigate(`/`); + }; const handleStarClick = (value) => { setRating(value); }; + // 질병 이름 매핑 + const diseaseMapping = { + diabetes: "당뇨", + obesity: "비만", + muscle_loss: "근손실", + hypertension: "고혈압", + }; + + // 질병에 따른 텍스트 매핑 + const diseaseStextMapping = { + diabetes: "당류함량", + obesity: "칼로리", + muscle_loss: "단백질 함량", + hypertension: "나트륨 함량", + }; + + // 사용자 정보에서 질병 이름을 변환 + const getDiseaseName = (diseaseKey) => { + return diseaseMapping[diseaseKey] || diseaseKey; + }; + + // 사용자 정보에서 의 텍스트를 결정 + const getStextLabel = (diseaseKey) => { + return diseaseStextMapping[diseaseKey] || "정보"; + }; + + if (userError) { // 사용자 정보 에러가 있는 경우 + return
Error: {userError}
; + } + + if (!userInfo) { + return
Loading...
; + } + return ( @@ -39,7 +139,7 @@ const Main3 = () => { src={`${process.env.PUBLIC_URL}/logo/ylogo.svg`} alt="logo" width="40px" - onClick={goMain} + onClick={goMain2} /> { left: "8px", cursor: "pointer", }} - onClick={() => navigate(-1)} + onClick={goAlarm1} /> { left: "8px", cursor: "pointer", }} - onClick={() => navigate(-1)} + onClick={toggleMenu} />
+ {isMenuOpen && ( + <> + + + + mypage + + + myreview + + + mainpage + + + logout + + + + )} + - 000님의 건강 기준에 + {userInfo.first_name}님의 건강 기준에
가장 적합한 제품이에요! - #당뇨 - #당류 싫어 + #{getDiseaseName(userInfo.disease)} - 제품명입니다 - 당류함량 - Ng - 선택하신 제품들 중 당류 함량이 가장 낮아요. + {recommendedProduct?.product_name || "제품명입니다"} + {getStextLabel(userInfo.disease)} + {recommendedProduct?.protein || "N"}g - [당뇨]를 선택한 다른 회원들의 의견이에요! + [{getDiseaseName(userInfo.disease)}] 선택한 다른 회원들의 의견이에요! 맞춤의 추천 서비스에 만족하시나요? - 만족도를 체크해 주시면, 추천 알고리즘을 정비하는 데 도움이 돼요! + 만족도를 체크해 주시면, 추천 알고리즘을 정비하는 데 도움이 돼요!
- ㅇㅇㅇ님의 만족도에 기반하여 더 좋은 서비스를 제공할게요! + {firstName}님의 만족도에 기반하여 + 더 좋은 서비스를 제공할게요! - {[1, 2, 3, 4, 5].map((value) => ( - = value - ? `${process.env.PUBLIC_URL}/logo/fullstar.svg` - : `${process.env.PUBLIC_URL}/logo/star.svg` - } - onClick={() => handleStarClick(value)} - alt={`별 ${value}개`} - style={{ cursor: "pointer", width: "44px", height: "43px", margin: "2px" }} - /> - ))} + {[1, 2, 3, 4, 5].map((value) => ( + = value + ? `${process.env.PUBLIC_URL}/logo/fullstar.svg` + : `${process.env.PUBLIC_URL}/logo/star.svg` + } + onClick={() => handleStarClick(value)} + alt={`별 ${value}개`} + style={{ + cursor: "pointer", + width: "44px", + height: "43px", + margin: "2px", + }} + /> + ))} - - 만족도 결과 보내기 + + 만족도 결과 보내기 ); }; -export default Main3; +export default Main3; \ No newline at end of file diff --git a/customfront/src/page/main4.jsx b/customfront/src/page/main4.jsx index 326e1c91..d48c3c34 100644 --- a/customfront/src/page/main4.jsx +++ b/customfront/src/page/main4.jsx @@ -9,8 +9,6 @@ const Main4 = () => { navigate(`/`); }; - - return ( diff --git a/customfront/src/page/membership.jsx b/customfront/src/page/membership.jsx index e0912fb1..15a0452b 100644 --- a/customfront/src/page/membership.jsx +++ b/customfront/src/page/membership.jsx @@ -1,12 +1,120 @@ -import React from "react"; +import axios from "axios"; +import React, { useState, useEffect } from "react"; import { useNavigate } from "react-router-dom"; import * as s from "../style/styledmembership"; +axios.defaults.withCredentials = true; + const Membership = () => { const navigate = useNavigate(); + const [formData, setFormData] = useState({ + username: "", + password: "", + password_confirm: "", + first_name: "", + email: "", + terms_accepted: false, + terms_accepted_1: false, + terms_accepted_2: false, + terms_accepted_optional: false, + }); + const [errors, setErrors] = useState({}); // 에러메시지 관리 + + const { + username, + password, + password_confirm, + first_name, + email, + terms_accepted, + terms_accepted_1, + terms_accepted_2, + terms_accepted_optional, + } = formData; + + const handleCheckAll = () => { + const newValue = !formData.terms_accepted; + setFormData({ + ...formData, + terms_accepted: newValue, + terms_accepted_1: newValue, + terms_accepted_2: newValue, + terms_accepted_optional: newValue, + }); + }; + + const toggleOptionalCheckbox = () => { + const newValue = !formData.terms_accepted_optional; + setFormData({ + ...formData, + terms_accepted_optional: newValue, + }); + }; + + const onChange = (e) => { + setFormData({ ...formData, [e.target.name]: e.target.value }); + }; + + const getCsrfToken = () => { + const csrfToken = document.cookie + .split("; ") + .find((row) => row.startsWith("csrftoken=")) + ?.split("=")[1]; + if (csrfToken) { + return csrfToken; + } else { + console.error("CSRF token not found"); + return null; + } + }; + + const onSubmit = async (e) => { + e.preventDefault(); + try { + const csrfToken = getCsrfToken(); + console.log("CSRF Token:", csrfToken); + const config = { + headers: { + "Content-Type": "application/json", + "X-CSRFToken": csrfToken, + }, + withCredentials: true, + }; + const body = JSON.stringify(formData); + + const res = await axios.post( + "http://127.0.0.1:8000/register/step1/", + body, + config + ); + console.log("회원가입 성공:", res.data); + console.log("Session cookie:", document.cookie); + + + const sessionId = document.cookie + .split("; ") + .find((row) => row.startsWith("sessionid=")) + ?.split("=")[1]; + const sessionData = { ...formData, sessionId }; + localStorage.setItem("sessionData", JSON.stringify(sessionData)); - const goHome = () => { - navigate(-1); + navigate("/logincomplete"); + } catch (err) { + if (err.response && err.response.data) { + const serverErrors = err.response.data; + if ( + serverErrors.username && + serverErrors.username.includes( + "이미 사용중인 아이디 입니다." + ) + ) { + serverErrors.username = ["중복된 아이디가 있습니다."]; + } + setErrors(serverErrors); + } else { + console.error("Error during axios request:", err); + } + } }; return ( @@ -15,7 +123,7 @@ const Membership = () => { back button { }} onClick={() => navigate(-1)} /> - @@ -37,95 +139,154 @@ const Membership = () => { - - - 중복확인 - - - 아이디 - - - - - 비밀번호 - - - - - 비밀번호 확인하기 - - - - - 이름 - - - - - 이메일 - - - - - 약관 - - - - checkbox + * 아이디 + + -
전체 동의하기
- - - checkbox{errors.username}

+ )} + + + * 비밀번호 + + -
(필수) 개인회원 약관에 동의
- - - checkbox{errors.password}

+ )} + + + * 비밀번호 확인하기 + + -
(필수) 개인정보 수집 및 이용에 동의
- - - checkbox -
(선택) 이메일 등 마케팅 정보 수신 동의
- - - - - 🔥 회원 정보 저장하고 키워드 선택하기 - + {errors.password_confirm && ( +

{errors.password_confirm}

+ )} + + + * 이름 + + + {errors.first_name && ( +

{errors.first_name}

+ )} + + + * Email + + + {errors.email &&

{errors.email}

} + + + 약관 + + + + 전체 동의하기 + + + + {errors.terms_accepted_1 && ( +

{errors.terms_accepted_1}

+ )} + + + + + {errors.terms_accepted_2 && ( +

{errors.terms_accepted_2}

+ )} + + + + + {errors.terms_accepted_optional && ( +

{errors.terms_accepted_optional}

+ )} + + + + + 🔥 회원 정보 저장하고 키워드 선택하기 + + ); }; - export default Membership; \ No newline at end of file diff --git a/customfront/src/page/mypage.jsx b/customfront/src/page/mypage.jsx index 789e15fb..f30d5b8e 100644 --- a/customfront/src/page/mypage.jsx +++ b/customfront/src/page/mypage.jsx @@ -1,18 +1,146 @@ -import React from "react"; +import React, { useEffect, useState } from "react"; import { useNavigate } from "react-router-dom"; +import axios from 'axios'; import * as m from "../style/styledmypage"; const Mypage = () => { const navigate = useNavigate(); + const [userInfo, setUserInfo] = useState(null); + const [isMenuOpen, setIsMenuOpen] = useState(false); + + const goMain0 = () => { + navigate(`/Main0`); + }; + + const goReviewcheck1 = () => { + navigate(`/Reviewcheck1`); + }; + + const goAlarm1 = () => { + navigate(`/Alarm1`); + }; + + const goAlarm2 = () => { + navigate(`/Alarm2`); + }; + + const goAlarm3 = () => { + navigate(`/Alarm3`); + }; + + const goMain2 = () => { + navigate(`/Main2`); + }; + + const goMypage = () => { + navigate(`/Mypage`); + }; + + const goReview = () => { + navigate(`/Review`); + }; + + const goLogin = () => { + navigate(`/Login`); + }; + + const toggleMenu = () => { + setIsMenuOpen(!isMenuOpen); + }; + + const closeMenu = () => { + setIsMenuOpen(false); + }; + + // 사용자 정보를 가져오는 함수 + const fetchUserInfo = async () => { + try { + const token = localStorage.getItem('token'); // 로그인 후 저장된 토큰을 가져옵니다. + const response = await axios.get('http://127.0.0.1:8000/myPage/profile', { + headers: { + 'Authorization': `Token ${token}` // Authorization 헤더에 토큰을 포함합니다. + } + }); + setUserInfo(response.data); + } catch (error) { + console.error('Error fetching user info:', error); + } + }; + + // 컴포넌트가 마운트될 때 사용자 정보를 가져옵니다. + useEffect(() => { + fetchUserInfo(); + }, []); const goPwchange = () => { navigate(`/pwchange`); }; - const goInfo1 = () => { - navigate(`/Info1`); + const goChangeInfo = () => { + navigate(`/ChangeInfo`); + }; + + const diseaseMapping = { + diabetes: "당뇨", + obesity: "비만", + muscle_loss: "근손실", + hypertension: "고혈압", + }; + + const getDiseaseName = (diseaseKey) => { + return diseaseMapping[diseaseKey] || diseaseKey; + }; + + const ageMapping = { + under_19: "19세 이하", + "20-29": "20~29세", + "30-39": "30~39세", + "40-49": "40~49세", + "50-59": "50~59세", + "60-69": "60~69세", + over_70: "70 이상", }; + const genderMapping = { + Male: "남성", + Female: "여성", + }; + + const heightMapping = { + under_149: "149cm 이하", + "150-154": "150~154cm", + "155-159": "155~159cm", + "160-164": "160~164cm", + "165-169": "165~169cm", + "170-174": "170~174cm", + "175-179": "175~179cm", + over_180: "180cm 이상", + }; + + const weightMapping = { + under_39: "39kg 이하", + "40-44": "40~44kg", + "45-49": "45~49kg", + "50-54": "50~54kg", + "55-59": "55~59kg", + "60-64": "60~64kg", + "65-69": "65~69kg", + "70-74": "70~74kg", + "75-79": "75~79kg", + "80-84": "80~84kg", + "85-89": "85~89kg", + "90-94": "90~94kg", + "95-99": "95~99kg", + over_100: "100kg 이상", + }; + + const getDisplayValue = (mapping, key) => { + return mapping[key] || key; + }; + + if (!userInfo) { + return
Loading...
; + } return ( @@ -34,6 +162,7 @@ const Mypage = () => { src={`${process.env.PUBLIC_URL}/logo/ylogo.svg`} alt="logo" width="40px" + onClick={goMain2} /> { left: "8px", cursor: "pointer", }} - onClick={() => navigate(-1)} + onClick={goAlarm1} /> { left: "8px", cursor: "pointer", }} - onClick={() => navigate(-1)} + onClick={toggleMenu} />
- profile + {isMenuOpen && ( + <> + + + + mypage + + + myreview + + + mainpage + + + logout + + + + )} + profile - - + - 김세모 님 + {userInfo.first_name} 님 - + - #20대 - #여성 + #{getDisplayValue(ageMapping, userInfo.age)} + #{getDisplayValue(genderMapping, userInfo.gender)} - #당뇨 - #160~165cm - #60~65kg + #{getDiseaseName(userInfo.disease)} + #{getDisplayValue(heightMapping, userInfo.height)} + #{getDisplayValue(weightMapping, userInfo.weight)} alarm button + id="pwchange" + src={`${process.env.PUBLIC_URL}/logo/pwchange.svg`} + alt="pwchange button" + style={{ + position: "absolute", + top: "308px", + left: "18px", + cursor: "pointer", + }} + onClick={goPwchange} + /> alarm button + id="keychange" + src={`${process.env.PUBLIC_URL}/logo/keychange.svg`} + alt="keychange button" + style={{ + position: "absolute", + top: "308px", + left: "210px", + cursor: "pointer", + }} + onClick={goChangeInfo} + /> - 🔥 후기를 작성하고, 키워드를 강화해요! + 🔥 후기를 작성하고, 키워드를 강화해요! -cd - 나의 리뷰 확인하기 - 리뷰 작성하기 + + 나의 리뷰 확인하기 + 리뷰 작성하기 🔔 최근 알림을 확인해 주세요! - 공지 제목입니다. - 공지 제목입니다. + 키워드를 업데이트 해주세요! + 회원 가입을 환영합니다! - - + + icon - - 더 많은 알림 확인하기 + + 더 많은 알림 확인하기 - ); }; -export default Mypage; \ No newline at end of file +export default Mypage; diff --git a/customfront/src/page/pwchange.jsx b/customfront/src/page/pwchange.jsx index ba5cbbd0..c4cce9a4 100644 --- a/customfront/src/page/pwchange.jsx +++ b/customfront/src/page/pwchange.jsx @@ -5,7 +5,9 @@ import * as p from "../style/styledpwchange"; const Pwchange = () => { const navigate = useNavigate(); - + const goPwchange1 = () => { + navigate(`/Pwchange1`); + }; return ( @@ -22,63 +24,23 @@ const Pwchange = () => { }} onClick={() => navigate(-1)} /> - - alarm button navigate(-1)} - /> - menu button navigate(-1)} - /> - -
- - - - - - - - 비밀번호 변경하기 - - + + 비밀번호 변경하기 계정 생성시 사용한 E Mail을 입력해주세요. - - - - - - icon - - 더 많은 알림 확인하기 + + + + + E Mail로 비밀번호 변경 링크 보내기 - ); }; -export default Pwchange; \ No newline at end of file +export default Pwchange; diff --git a/customfront/src/page/pwchange1.jsx b/customfront/src/page/pwchange1.jsx index e431c960..4e10eaa6 100644 --- a/customfront/src/page/pwchange1.jsx +++ b/customfront/src/page/pwchange1.jsx @@ -1,10 +1,14 @@ import React from "react"; import { useNavigate } from "react-router-dom"; -import * as p1 from "../style/styledpwchange"; +import * as p1 from "../style/styledpwchange1"; const Pwchange1 = () => { const navigate = useNavigate(); + const goMain2 = () => { + navigate(`/Main2`); + }; + return ( @@ -20,57 +24,23 @@ const Pwchange1 = () => { }} onClick={() => navigate(-1)} /> - - alarm button navigate(-1)} - /> - menu button navigate(-1)} - /> - -
- - 링크가 전송되었습니다. + 링크가 전송되었습니다.
+ 메일로 이동해 비밀번호 변경을 진행해 주세요! - 메일로 이동해 비밀번호 변경을 진행해 주세요! - success diff --git a/customfront/src/page/review.jsx b/customfront/src/page/review.jsx index 85fba361..19faffb6 100644 --- a/customfront/src/page/review.jsx +++ b/customfront/src/page/review.jsx @@ -1,26 +1,132 @@ -import React from "react"; +import React, { useEffect, useState } from "react"; import { useNavigate } from "react-router-dom"; +import axios from 'axios'; import * as r from "../style/styledreview"; const Review = () => { const navigate = useNavigate(); + const [isMenuOpen, setIsMenuOpen] = useState(false); + const [box2Items, setBox2Items] = useState([]); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(null); + const [selectedProduct, setSelectedProduct] = useState(null); + const [reviewText, setReviewText] = useState(""); + const [selectedImage, setSelectedImage] = useState(null); + const [userInfo, setUserInfo] = useState(null); - const goMain = () => { - navigate(`/`); + const goMain2 = () => { + navigate(`/Main2`); }; + const goMain0 = () => { + navigate(`/Main0`); + }; + + const goMypage = () => { + navigate(`/Mypage`); + }; + + const goReview = () => { + navigate(`/Review`); + }; + + const goLogin = () => { + navigate(`/Login`); + }; + + const toggleMenu = () => { + setIsMenuOpen(!isMenuOpen); + }; + + const closeMenu = () => { + setIsMenuOpen(false); + }; + + // 사용자 정보를 가져오는 함수 + const fetchUserInfo = async () => { + try { + const token = localStorage.getItem("token"); // 로그인 후 저장된 토큰을 가져옵니다. + const response = await axios.get("http://127.0.0.1:8000/myPage/profile", { + headers: { + Authorization: `Token ${token}`, // Authorization 헤더에 토큰을 포함합니다. + }, + }); + setUserInfo(response.data); + } catch (error) { + console.error("Error fetching user info:", error); + } + }; + + // 사용자 정보를 가져오는 useEffect + useEffect(() => { + fetchUserInfo(); + }, []); + + // 추천 제품을 가져오는 useEffect + useEffect(() => { + const fetchRecommendedProducts = async () => { + try { + const token = localStorage.getItem("token"); + if (!token) { + throw new Error("No token found"); + } + + const config = { + headers: { + Authorization: `Token ${token}`, + }, + }; + + const response = await axios.get( + "http://127.0.0.1:8000/myPage/recommended-products/", + config + ); + const products = response.data.map((product) => ({ + id: product.recommendedProduct_id, + name: product.product_name, + })); + setBox2Items(products); + setLoading(false); + } catch (err) { + if (err.message === "No token found") { + alert("토큰이 없습니다. 로그인이 필요합니다."); + navigate("/login"); + } else if (err.response && err.response.status === 401) { + console.error("Authentication error: Unauthorized"); + setError(new Error("인증 오류: 로그인이 필요합니다.")); + } else { + console.error("An error occurred:", err.message); + setError(err); + } + setLoading(false); + } + }; + + fetchRecommendedProducts(); + }, [navigate]); + + if (loading) { + return
Loading...
; + } + + if (error) { + return
Error: {error.message}
; + } + + const goReviewcheck1 = () => { - navigate(`/Reviewcheck1`); + if (selectedProduct && reviewText && selectedImage) { + navigate(`/Reviewcheck1`, { + state: { product: selectedProduct, review: reviewText, selectedImage }, + }); + } else { + alert("제품을 선택 후 버튼을 누르고 리뷰를 작성해주세요."); + } }; - // Box2의 아이템 상태 관리 (setBox2Items 제거) - const box2Items = [ - { id: 1, name: "과자 1" }, - { id: 2, name: "과자 2" }, - { id: 3, name: "과자 3" }, - { id: 4, name: "과자 4" }, - { id: 5, name: "과자 5" }, - ]; + const handleImageClick = (imageType) => { + setSelectedImage(imageType); + }; return ( @@ -42,7 +148,7 @@ const Review = () => { src={`${process.env.PUBLIC_URL}/logo/ylogo.svg`} alt="logo" width="40px" - onClick={goMain} + onClick={goMain2} /> { left: "8px", cursor: "pointer", }} - onClick={() => navigate(-1)} + onClick={toggleMenu} />
+ {isMenuOpen && ( + <> + + + + mypage + + + myreview + + + mainpage + + + logout + + + + )} + 리뷰 작성하기 @@ -80,7 +249,10 @@ const Review = () => { 후기를 작성할 제품을 선택해 주세요. {box2Items.map((item) => ( - + setSelectedProduct(item)} + > {item.name} @@ -90,27 +262,42 @@ const Review = () => { - 김세모님!
- [제품명]은 어떠셨어요? + {userInfo.first_name}님!
+ {selectedProduct + ? `[${selectedProduct.name}]은 어떠셨어요?` + : "[제품명]은 어떠셨어요?"} handleImageClick("good")} /> handleImageClick("bad")} /> - + setReviewText(e.target.value)} + /> @@ -121,4 +308,4 @@ const Review = () => { ); }; -export default Review; +export default Review; \ No newline at end of file diff --git a/customfront/src/page/reviewcheck1.jsx b/customfront/src/page/reviewcheck1.jsx index c2fadb7f..65203692 100644 --- a/customfront/src/page/reviewcheck1.jsx +++ b/customfront/src/page/reviewcheck1.jsx @@ -1,26 +1,68 @@ -import React from "react"; -import { useNavigate } from "react-router-dom"; +import React, { useEffect, useState } from "react"; +import { useLocation, useNavigate } from "react-router-dom"; import * as e from "../style/styledreviewcheck1"; const Reviewcheck1 = () => { const navigate = useNavigate(); + const [isMenuOpen, setIsMenuOpen] = useState(false); + const location = useLocation(); + const { product, review, selectedImage } = location.state || {}; + const [reviews, setReviews] = useState([]); - const goMain = () => { - navigate(`/`); + useEffect(() => { + // 로컬 스토리지에서 리뷰를 가져오기 + const storedReviews = JSON.parse(localStorage.getItem("reviews")) || []; + setReviews(storedReviews); + }, []); + + useEffect(() => { + if (product && review && selectedImage) { + // 기존 리뷰를 업데이트 + setReviews((prevReviews) => { + const updatedReviews = prevReviews.map((r) => + r.product.id === product.id ? { product, review, selectedImage } : r + ); + localStorage.setItem("reviews", JSON.stringify(updatedReviews)); + return updatedReviews; + }); + } + }, [product, review, selectedImage]); + + const goMain0 = () => { + navigate(`/Main0`); + }; + + const goMain2 = () => { + navigate(`/Main2`); + }; + + const goReview = () => { + navigate(`/Review`); }; - const goReviewcheck2 = () => { - navigate(`/Reviewcheck2`); + const goReviewcheck2 = (review) => { + navigate(`/Reviewcheck2`, { state: review }); }; - // Box2의 아이템 상태 관리 - const box2Items = [ - { id: 1, name: "[과자 1]" , text: "텍스트 리뷰입니다."}, - { id: 2, name: "[과자 2]", text: "텍스트 리뷰입니다."}, - { id: 3, name: "[과자 3]", text: "텍스트 리뷰입니다." }, - { id: 4, name: "[과자 4]", text: "텍스트 리뷰입니다." }, - { id: 5, name: "[과자 5]", text: "텍스트 리뷰입니다." } - ]; + const goMypage = () => { + navigate(`/Mypage`); + }; + + const goLogin = () => { + navigate(`/Login`); + }; + + const toggleMenu = () => { + setIsMenuOpen(!isMenuOpen); + }; + + const closeMenu = () => { + setIsMenuOpen(false); + }; + + + + return ( @@ -42,7 +84,7 @@ const Reviewcheck1 = () => { src={`${process.env.PUBLIC_URL}/logo/ylogo.svg`} alt="logo" width="40px" - onClick={goMain} + onClick={goMain2} /> { left: "8px", cursor: "pointer", }} - onClick={() => navigate(-1)} + onClick={toggleMenu} />
+ {isMenuOpen && ( + <> + + + + mypage + + + myreview + + + mainpage + + + logout + + + + )} + 나의 리뷰 확인하기 - - - {box2Items.map((item) => ( - + {reviews.map((review, index) => ( + + + goReviewcheck2(review)} + style={{ cursor: "pointer" }} + > - {item.name} - {item.text} - + + [{review.product.name}] + + {review.review} + good - ))} - - + + + ))} - + 새로운 리뷰 작성하기 @@ -107,4 +222,4 @@ const Reviewcheck1 = () => { ); }; -export default Reviewcheck1; +export default Reviewcheck1; \ No newline at end of file diff --git a/customfront/src/page/reviewcheck2.jsx b/customfront/src/page/reviewcheck2.jsx index 7ae7a9c0..21b639c3 100644 --- a/customfront/src/page/reviewcheck2.jsx +++ b/customfront/src/page/reviewcheck2.jsx @@ -1,20 +1,87 @@ -import React from "react"; -import { useNavigate } from "react-router-dom"; +import React, { useEffect, useState } from "react"; +import { useLocation, useNavigate } from "react-router-dom"; +import axios from "axios"; import * as v from "../style/styledreviewcheck2"; const Reviewcheck2 = () => { const navigate = useNavigate(); + const [isMenuOpen, setIsMenuOpen] = useState(false); + const location = useLocation(); + const { product, review, selectedImage } = location.state || {}; // selectedImage 추가 + const [productData, setProductData] = useState(null); - const goMain = () => { - navigate(`/`); + const goMain2 = () => { + navigate(`/Main2`); }; + const goMain0 = () => { + navigate(`/Main0`); + }; + + const goMypage = () => { + navigate(`/Mypage`); + }; + + const goReview = () => { + navigate(`/Review`); + }; + + const goLogin = () => { + navigate(`/Login`); + }; + + const toggleMenu = () => { + setIsMenuOpen(!isMenuOpen); + }; + + const closeMenu = () => { + setIsMenuOpen(false); + }; + + + + useEffect(() => { + const fetchProductData = async () => { + if (product) { + try { + const token = localStorage.getItem('token'); + if (!token) { + throw new Error("No token found"); + } + + const config = { + headers: { + 'Authorization': `Token ${token}` + } + }; + + const response = await axios.get(`http://127.0.0.1:8000/myPage/recommended-products/${product.id}/`, config); + setProductData(response.data); + } catch (err) { + if (err.message === "No token found") { + alert("토큰이 없습니다. 로그인이 필요합니다."); + navigate("/login"); + } else { + console.error("An error occurred:", err.message); + } + } + } + }; + + fetchProductData(); + }, [product, navigate]); + const goReviewcheck3 = () => { - navigate(`/Reviewcheck3`); + if (product && review) { + navigate(`/Reviewcheck3`, { state: { product, review, selectedImage } }); // selectedImage 추가 + } else { + alert("제품 정보나 리뷰가 없습니다."); + } }; - // Box2의 아이템 상태 관리 - const box2Items = [{ id: 1, text: "텍스트 리뷰입니다.텍스트 리뷰입니다. 이렇고 이런 점이 좋았습니다! 그렇지만 이렇고 이런 특성의 이용자에게는 비추합니다!" }]; + if (!product || !review) { + return
Error: 제품 정보나 리뷰가 없습니다.
; + } return ( @@ -36,7 +103,7 @@ const Reviewcheck2 = () => { src={`${process.env.PUBLIC_URL}/logo/ylogo.svg`} alt="logo" width="40px" - onClick={goMain} + onClick={goMain2} /> { left: "8px", cursor: "pointer", }} - onClick={() => navigate(-1)} + onClick={toggleMenu} />
+ {isMenuOpen && ( + <> + + + + mypage + + + myreview + + + mainpage + + + logout + + + + )} + - [제품명] + [{product.name}] good @@ -82,13 +216,11 @@ const Reviewcheck2 = () => { - {box2Items.map((item) => ( - - - {item.text} - - - ))} + + + {review} + + @@ -100,4 +232,4 @@ const Reviewcheck2 = () => { ); }; -export default Reviewcheck2; +export default Reviewcheck2; \ No newline at end of file diff --git a/customfront/src/page/reviewcheck3.jsx b/customfront/src/page/reviewcheck3.jsx index 8a17056f..ed3bbeef 100644 --- a/customfront/src/page/reviewcheck3.jsx +++ b/customfront/src/page/reviewcheck3.jsx @@ -1,26 +1,97 @@ -import React from "react"; -import { useNavigate } from "react-router-dom"; +import React, { useState } from "react"; +import { useLocation, useNavigate } from "react-router-dom"; +import axios from "axios"; import * as i from "../style/styledreviewcheck3"; const Reviewcheck3 = () => { const navigate = useNavigate(); + const [isMenuOpen, setIsMenuOpen] = useState(false); + const location = useLocation(); + const { product, review } = location.state || {}; + const [newReview, setNewReview] = useState(review); + const [selectedImage, setSelectedImage] = useState(null); // 선택된 이미지 상태 추가 - const goMain = () => { - navigate(`/`); + const goMain2 = () => { + navigate(`/Main2`); }; - const goReviewcheck1 = () => { - navigate(`/Reviewcheck1`); + const goMain0 = () => { + navigate(`/Main0`); }; - // Box2의 아이템 상태 관리 (setBox2Items 제거) - const box2Items = [ - { id: 1, name: "과자 1" }, - { id: 2, name: "과자 2" }, - { id: 3, name: "과자 3" }, - { id: 4, name: "과자 4" }, - { id: 5, name: "과자 5" }, - ]; + const goMypage = () => { + navigate(`/Mypage`); + }; + + const goReview = () => { + navigate(`/Review`); + }; + + const goLogin = () => { + navigate(`/Login`); + }; + + const toggleMenu = () => { + setIsMenuOpen(!isMenuOpen); + }; + + const closeMenu = () => { + setIsMenuOpen(false); + }; + + const goReviewcheck2 = () => { + // reviewcheck2로 이동하며 현재 제품 정보와 수정된 리뷰를 전달 + if (product && newReview) { + navigate(`/Reviewcheck2`, { state: { product, review: newReview, selectedImage } }); + } else { + alert("제품 정보나 리뷰가 없습니다."); + } + }; + + const handleReviewChange = (e) => { + setNewReview(e.target.value); + }; + + const handleImageSelect = (image) => { + setSelectedImage(image); // 이미지 선택 핸들러 + }; + + const saveReview = async () => { + try { + const token = localStorage.getItem('token'); + if (!token) { + throw new Error("No token found"); + } + + const csrfTokenMatch = document.cookie.match(/csrftoken=([^;]*)/); + const csrfToken = csrfTokenMatch ? csrfTokenMatch[1] : ''; + + const config = { + headers: { + 'Authorization': `Token ${token}`, + 'X-CSRFToken': csrfToken, + } + }; + + const body = { + "GNB": "G", + "review": newReview, + "selectedImage": selectedImage // 선택된 이미지 저장 + }; + + await axios.patch(`http://127.0.0.1:8000/myPage/recommended-products/${product.id}/edit/`, body, config); + + // 리뷰 저장 후 Reviewcheck1으로 이동하며 수정된 리뷰를 전달 + navigate(`/Reviewcheck1`, { state: { product, review: newReview, selectedImage } }); + } catch (err) { + if (err.message === "No token found") { + alert("토큰이 없습니다. 로그인이 필요합니다."); + navigate("/login"); + } else { + console.error("An error occurred:", err.message); + } + } + }; return ( @@ -42,7 +113,7 @@ const Reviewcheck3 = () => { src={`${process.env.PUBLIC_URL}/logo/ylogo.svg`} alt="logo" width="40px" - onClick={goMain} + onClick={goMain2} /> { left: "8px", cursor: "pointer", }} - onClick={() => navigate(-1)} + onClick={toggleMenu} />
- 리뷰 작성하기 + {isMenuOpen && ( + <> + + + + mypage + + + myreview + + + mainpage + + + logout + + + + )} - - - 후기를 작성할 제품을 선택해 주세요. - - {box2Items.map((item) => ( - - - {item.name} - - - ))} - - + 리뷰 수정하기 + 김세모님!
- [제품명]은 어떠셨어요? + [{product.name}]은 어떠셨어요? - handleImageSelect('good')} + style={{ cursor: 'pointer', border: selectedImage === 'good' ? '2px solid blue' : 'none' }} /> - handleImageSelect('bad')} + style={{ cursor: 'pointer', border: selectedImage === 'bad' ? '2px solid blue' : 'none' }} /> - + - + 저장하기 + + + 수정 취소하기 + ); }; -export default Reviewcheck3; +export default Reviewcheck3; \ No newline at end of file diff --git a/customfront/src/style/styledalarm1.jsx b/customfront/src/style/styledalarm1.jsx index 58ed1309..bdb31364 100644 --- a/customfront/src/style/styledalarm1.jsx +++ b/customfront/src/style/styledalarm1.jsx @@ -12,26 +12,31 @@ export const Container = styled.div` export const Header = styled.div` position: fixed; + top: 0; + left: 50%; + transform: translateX(-50%); background: #fff; width: 393px; height: 50px; - z-index: 2; + z-index: 10; + #back { cursor: pointer; } #logo { - display: absolute; + position: absolute; margin-top: 8px; + margin-left: -20px; cursor: pointer; } #alarm { - display: absolute; + position: absolute; margin-top: 3px; margin-left: 305px; cursor: pointer; } #menu { - display: absolute; + position: absolute; margin-top: 5px; margin-left: 343px; cursor: pointer; @@ -43,6 +48,7 @@ export const Border = styled.div` border-bottom: 1.5px solid black; width: 393px; padding-bottom: 2px; + margin-top: 48px; `; export const Top = styled.div` @@ -68,7 +74,7 @@ export const Keywordd = styled.div` export const Body = styled.div` display: flex; flex-direction: column; - margin-top: -10px; + margin-top: 50px; width: 393px; height: 110px; `; @@ -80,7 +86,7 @@ export const Ybox = styled.div` align-items: center; text-align: flex-start; width: 393px; - height: 240px; + height: 190px; flex-shrink: 0; `; @@ -126,8 +132,8 @@ export const SmallBox5 = styled.div` justify-content: flex-start; align-items: center; text-align: flex-start; - span{ - margin-left: 10px; + span { + margin-left: 10px; } `; @@ -142,50 +148,50 @@ export const Button2 = styled.div` gap: 15px; `; -// 드롭다운 메뉴 스타일 - -export const DropdownContainer = styled.div` - position: relative; /* Container를 기준으로 위치 */ -`; - export const Backdrop = styled.div` position: absolute; - top: 0; - left: 0; + top: 50%; + left: 50%; width: 393px; height: 852px; background-color: rgba(0, 0, 0, 0.5); z-index: 1; + transform: translate(-50%, -50%); `; export const DropdownMenu = styled.div` position: absolute; top: 80px; - right: 20px; + left: 80%; + transform: translateX(-50%); width: 50px; height: 314px; - flex-shrink: 0; border-radius: 50px; background: #fff; box-shadow: 0px 0px 8px 8px #544c4c; padding: 20px; - z-index: 2; + z-index: 11; display: flex; flex-direction: column; justify-content: space-around; align-items: center; + #mypage { - margin-top: 30px; + margin-top: 15px; margin-right: 7px; } #myreview { - margin-top: 130px; + margin-top: 107px; margin-right: 7px; } #mainpage { - margin-top: 230px; + margin-top: 200px; margin-right: 7px; } + #logout { + margin-top: 2px; + margin-right: 2px; + } `; export const DropdownItem = styled.button` @@ -199,10 +205,4 @@ export const DropdownItem = styled.button` text-align: center; border-radius: 50%; transition: background-color 0.3s ease; - - &:hover { - background-color: #f0f0f0; - } -`; - - +`; \ No newline at end of file diff --git a/customfront/src/style/styledalarm2.jsx b/customfront/src/style/styledalarm2.jsx index 7b94c47b..7175d549 100644 --- a/customfront/src/style/styledalarm2.jsx +++ b/customfront/src/style/styledalarm2.jsx @@ -45,7 +45,7 @@ export const Border = styled.div` `; export const Top = styled.div` - position: absolute; + position: relative; top: 106px; left: 20px; text-align: left; @@ -55,6 +55,12 @@ export const Top = styled.div` font-style: normal; font-weight: 700; line-height: normal; + #alarm2{ + margin-top: 470px; + margin-left: 0px; + + + } `; export const Body = styled.div` @@ -77,8 +83,9 @@ export const Ybox = styled.div` `; export const Button = styled.div` - margin-top: 50px; - margin-left: 30px; + z-index: 4; + margin-top: 515px; + margin-left: 28px; width: 334px; height: 45px; flex-shrink: 0; diff --git a/customfront/src/style/styledalarm3.jsx b/customfront/src/style/styledalarm3.jsx new file mode 100644 index 00000000..c64b05c0 --- /dev/null +++ b/customfront/src/style/styledalarm3.jsx @@ -0,0 +1,141 @@ +import styled from "styled-components"; + +export const Container = styled.div` + position: relative; + margin: 0 auto; + width: 393px; + height: 852px; + margin-top: 0px; + background: #fffde7; +`; + +export const Header = styled.div` + position: fixed; + background: #fff; + width: 393px; + height: 50px; + z-index: 2; + #back { + cursor: pointer; + } + #logo { + display: absolute; + margin-top: 8px; + cursor: pointer; + } + #alarm { + display: absolute; + margin-top: 3px; + margin-left: 305px; + cursor: pointer; + } + #menu { + display: absolute; + margin-top: 5px; + margin-left: 343px; + cursor: pointer; + } +`; + +export const Border = styled.div` + position: fixed; + border-bottom: 1.5px solid black; + width: 393px; + padding-bottom: 2px; +`; + +export const Top = styled.div` + position: relative; + top: 106px; + left: 20px; + text-align: left; + color: #000; + font-family: "Gothic A1"; + font-size: 20px; + font-style: normal; + font-weight: 700; + line-height: normal; + #alarm3{ + margin-top: 470px; + margin-left: 0px; + + } +`; + +export const Body = styled.div` + display: flex; + flex-direction: column; + margin-top: -10px; + width: 393px; + height: 110px; +`; + +export const Ybox = styled.div` + position: relative; + display: flex; + justify-content: flex-start; + align-items: center; + text-align: flex-start; + width: 393px; + height: 240px; + flex-shrink: 0; +`; + +// 드롭다운 메뉴 스타일 + +export const Backdrop = styled.div` + position: absolute; + top: 0; + left: 0; + width: 393px; + height: 852px; + background-color: rgba(0, 0, 0, 0.5); + z-index: 1; +`; + +export const DropdownMenu = styled.div` + position: absolute; + top: 80px; + right: 20px; + width: 50px; + height: 314px; + flex-shrink: 0; + border-radius: 50px; + background: #fff; + box-shadow: 0px 0px 8px 8px #544c4c; + padding: 20px; + z-index: 2; + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: center; + #mypage { + margin-top: 30px; + margin-right: 7px; + } + #myreview { + margin-top: 130px; + margin-right: 7px; + } + #mainpage { + margin-top: 230px; + margin-right: 7px; + } +`; + +export const DropdownItem = styled.button` + background: none; + border: none; + padding: 10px; + font-size: 16px; + cursor: pointer; + color: #333; + width: 100%; + text-align: center; + border-radius: 50%; + transition: background-color 0.3s ease; + + &:hover { + background-color: #f0f0f0; + } +`; diff --git a/customfront/src/style/styledchangeinfo.jsx b/customfront/src/style/styledchangeinfo.jsx index c9b581e6..f2e64a04 100644 --- a/customfront/src/style/styledchangeinfo.jsx +++ b/customfront/src/style/styledchangeinfo.jsx @@ -130,3 +130,64 @@ export const SmallBox5 = styled.div` margin-left: 10px; } `; + + +//메뉴바 스타일 +export const Backdrop = styled.div` + position: absolute; + top: 50%; + left: 50%; + width: 393px; + height: 852px; + background-color: rgba(0, 0, 0, 0.5); + z-index: 1; + transform: translate(-50%, -50%); +`; + +export const DropdownMenu = styled.div` + position: absolute; + top: 80px; + left: 80%; + transform: translateX(-50%); + width: 50px; + height: 314px; + border-radius: 50px; + background: #fff; + box-shadow: 0px 0px 8px 8px #544c4c; + padding: 20px; + z-index: 11; + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: center; + + #mypage { + margin-top: 15px; + margin-right: 7px; + } + #myreview { + margin-top: 107px; + margin-right: 7px; + } + #mainpage { + margin-top: 200px; + margin-right: 7px; + } + #logout { + margin-top: 2px; + margin-right: 2px; + } +`; + +export const DropdownItem = styled.button` + background: none; + border: none; + padding: 10px; + font-size: 16px; + cursor: pointer; + color: #333; + width: 100%; + text-align: center; + border-radius: 50%; + transition: background-color 0.3s ease; +`; \ No newline at end of file diff --git a/customfront/src/style/styledchangeinfo1.jsx b/customfront/src/style/styledchangeinfo1.jsx index ae530e9d..188d1fbb 100644 --- a/customfront/src/style/styledchangeinfo1.jsx +++ b/customfront/src/style/styledchangeinfo1.jsx @@ -150,3 +150,63 @@ export const Button = styled.div` margin-top: 15px; cursor: pointer; `; + +//메뉴바 스타일 +export const Backdrop = styled.div` + position: absolute; + top: 50%; + left: 50%; + width: 393px; + height: 852px; + background-color: rgba(0, 0, 0, 0.5); + z-index: 1; + transform: translate(-50%, -50%); +`; + +export const DropdownMenu = styled.div` + position: absolute; + top: 80px; + left: 80%; + transform: translateX(-50%); + width: 50px; + height: 314px; + border-radius: 50px; + background: #fff; + box-shadow: 0px 0px 8px 8px #544c4c; + padding: 20px; + z-index: 11; + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: center; + + #mypage { + margin-top: 15px; + margin-right: 7px; + } + #myreview { + margin-top: 107px; + margin-right: 7px; + } + #mainpage { + margin-top: 200px; + margin-right: 7px; + } + #logout { + margin-top: 2px; + margin-right: 2px; + } +`; + +export const DropdownItem = styled.button` + background: none; + border: none; + padding: 10px; + font-size: 16px; + cursor: pointer; + color: #333; + width: 100%; + text-align: center; + border-radius: 50%; + transition: background-color 0.3s ease; +`; diff --git a/customfront/src/style/styledchangeinfo2.jsx b/customfront/src/style/styledchangeinfo2.jsx index 910ba0f7..e56ab361 100644 --- a/customfront/src/style/styledchangeinfo2.jsx +++ b/customfront/src/style/styledchangeinfo2.jsx @@ -149,4 +149,65 @@ export const ButtonText = styled.div` font-style: normal; font-weight: 500; line-height: normal; +`; + + +//메뉴바 스타일 +export const Backdrop = styled.div` + position: absolute; + top: 50%; + left: 50%; + width: 393px; + height: 852px; + background-color: rgba(0, 0, 0, 0.5); + z-index: 1; + transform: translate(-50%, -50%); +`; + +export const DropdownMenu = styled.div` + position: absolute; + top: 80px; + left: 80%; + transform: translateX(-50%); + width: 50px; + height: 314px; + border-radius: 50px; + background: #fff; + box-shadow: 0px 0px 8px 8px #544c4c; + padding: 20px; + z-index: 11; + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: center; + + #mypage { + margin-top: 15px; + margin-right: 7px; + } + #myreview { + margin-top: 107px; + margin-right: 7px; + } + #mainpage { + margin-top: 200px; + margin-right: 7px; + } + #logout { + margin-top: 2px; + margin-right: 2px; + } +`; + +export const DropdownItem = styled.button` + background: none; + border: none; + padding: 10px; + font-size: 16px; + cursor: pointer; + color: #333; + width: 100%; + text-align: center; + border-radius: 50%; + transition: background-color 0.3s ease; `; \ No newline at end of file diff --git a/customfront/src/style/styledchangeinfo3.jsx b/customfront/src/style/styledchangeinfo3.jsx index af5c0bf1..024107e6 100644 --- a/customfront/src/style/styledchangeinfo3.jsx +++ b/customfront/src/style/styledchangeinfo3.jsx @@ -153,3 +153,64 @@ export const ButtonText = styled.div` font-weight: 500; line-height: normal; `; + + +//메뉴바 스타일 +export const Backdrop = styled.div` + position: absolute; + top: 50%; + left: 50%; + width: 393px; + height: 852px; + background-color: rgba(0, 0, 0, 0.5); + z-index: 1; + transform: translate(-50%, -50%); +`; + +export const DropdownMenu = styled.div` + position: absolute; + top: 80px; + left: 80%; + transform: translateX(-50%); + width: 50px; + height: 314px; + border-radius: 50px; + background: #fff; + box-shadow: 0px 0px 8px 8px #544c4c; + padding: 20px; + z-index: 11; + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: center; + + #mypage { + margin-top: 15px; + margin-right: 7px; + } + #myreview { + margin-top: 107px; + margin-right: 7px; + } + #mainpage { + margin-top: 200px; + margin-right: 7px; + } + #logout { + margin-top: 2px; + margin-right: 2px; + } +`; + +export const DropdownItem = styled.button` + background: none; + border: none; + padding: 10px; + font-size: 16px; + cursor: pointer; + color: #333; + width: 100%; + text-align: center; + border-radius: 50%; + transition: background-color 0.3s ease; +`; \ No newline at end of file diff --git a/customfront/src/style/styledchangeinfo4.jsx b/customfront/src/style/styledchangeinfo4.jsx index ae530e9d..b3e43b20 100644 --- a/customfront/src/style/styledchangeinfo4.jsx +++ b/customfront/src/style/styledchangeinfo4.jsx @@ -150,3 +150,64 @@ export const Button = styled.div` margin-top: 15px; cursor: pointer; `; + + +//메뉴바 스타일 +export const Backdrop = styled.div` + position: absolute; + top: 50%; + left: 50%; + width: 393px; + height: 852px; + background-color: rgba(0, 0, 0, 0.5); + z-index: 1; + transform: translate(-50%, -50%); +`; + +export const DropdownMenu = styled.div` + position: absolute; + top: 80px; + left: 80%; + transform: translateX(-50%); + width: 50px; + height: 314px; + border-radius: 50px; + background: #fff; + box-shadow: 0px 0px 8px 8px #544c4c; + padding: 20px; + z-index: 11; + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: center; + + #mypage { + margin-top: 15px; + margin-right: 7px; + } + #myreview { + margin-top: 107px; + margin-right: 7px; + } + #mainpage { + margin-top: 200px; + margin-right: 7px; + } + #logout { + margin-top: 2px; + margin-right: 2px; + } +`; + +export const DropdownItem = styled.button` + background: none; + border: none; + padding: 10px; + font-size: 16px; + cursor: pointer; + color: #333; + width: 100%; + text-align: center; + border-radius: 50%; + transition: background-color 0.3s ease; +`; \ No newline at end of file diff --git a/customfront/src/style/styledchangeinfo5.jsx b/customfront/src/style/styledchangeinfo5.jsx index ae530e9d..c8591346 100644 --- a/customfront/src/style/styledchangeinfo5.jsx +++ b/customfront/src/style/styledchangeinfo5.jsx @@ -150,3 +150,63 @@ export const Button = styled.div` margin-top: 15px; cursor: pointer; `; + +//메뉴바 스타일 +export const Backdrop = styled.div` + position: absolute; + top: 50%; + left: 50%; + width: 393px; + height: 852px; + background-color: rgba(0, 0, 0, 0.5); + z-index: 1; + transform: translate(-50%, -50%); +`; + +export const DropdownMenu = styled.div` + position: absolute; + top: 80px; + left: 80%; + transform: translateX(-50%); + width: 50px; + height: 314px; + border-radius: 50px; + background: #fff; + box-shadow: 0px 0px 8px 8px #544c4c; + padding: 20px; + z-index: 11; + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: center; + + #mypage { + margin-top: 15px; + margin-right: 7px; + } + #myreview { + margin-top: 107px; + margin-right: 7px; + } + #mainpage { + margin-top: 200px; + margin-right: 7px; + } + #logout { + margin-top: 2px; + margin-right: 2px; + } +`; + +export const DropdownItem = styled.button` + background: none; + border: none; + padding: 10px; + font-size: 16px; + cursor: pointer; + color: #333; + width: 100%; + text-align: center; + border-radius: 50%; + transition: background-color 0.3s ease; +`; \ No newline at end of file diff --git a/customfront/src/style/styledfirst.jsx b/customfront/src/style/styledfirst.jsx index c4b2274d..18933830 100644 --- a/customfront/src/style/styledfirst.jsx +++ b/customfront/src/style/styledfirst.jsx @@ -72,7 +72,7 @@ export const Body3 = styled.div` export const Sub = styled.div` justify-content: flex-start; - margin-top: -210px; + margin-top: -130px; margin-left: -100px; flex-shrink: 0; `; @@ -95,7 +95,7 @@ export const Box = styled.div` justify-content: center; align-items: center; text-align: center; - margin-top: -150px; + margin-top: -140px; width: 393px; height: 465px; flex-shrink: 0; @@ -119,7 +119,7 @@ export const Title = styled.div` `; export const Box2 = styled.div` - margin-top: 100px; + margin-top: 0px; display: flex; flex-direction: column; width: 393px; @@ -140,8 +140,8 @@ export const News = styled.div` display: flex; margin-top: 20px; flex-direction: row; - width: 340px; - height: 280px; + width: 385px; + height: 350px; gap: 7px; overflow-x: auto; overflow-y: hidden; @@ -156,15 +156,16 @@ export const News = styled.div` export const Card = styled.div` position: relative; - margin-left: 5px; + margin-left: 18px; + margin-top: 10px; flex-shrink: 0; width: 100%; - height: 280px; + height: 330px; display: flex; gap: 15px; img { width: 100%; - height: auto; + height: 100%; } `; @@ -212,7 +213,7 @@ export const Bottom = styled.div` position: absolute; justify-content: center; align-items: center; - margin-top: 320px; + margin-top: 350px; width: 340px; height: 45px; flex-shrink: 0; diff --git a/customfront/src/style/styledinfo1.jsx b/customfront/src/style/styledinfo1.jsx index f0004202..ae530e9d 100644 --- a/customfront/src/style/styledinfo1.jsx +++ b/customfront/src/style/styledinfo1.jsx @@ -15,12 +15,35 @@ export const Header = styled.div` width: 393px; height: 50px; z-index: 2; - #back2 { + #back { + cursor: pointer; + } + #logo { + display: absolute; + margin-top: 8px; + cursor: pointer; + } + #alarm { + display: absolute; + margin-top: 3px; + margin-left: 305px; + cursor: pointer; + } + #menu { + display: absolute; margin-top: 5px; + margin-left: 343px; cursor: pointer; } `; +export const Border = styled.div` + position: fixed; + border-bottom: 2px solid black; + width: 393px; + padding-bottom: 2px; +`; + export const Ybox = styled.div` position: relative; display: flex; @@ -127,14 +150,3 @@ export const Button = styled.div` margin-top: 15px; cursor: pointer; `; - -export const ButtonText = styled.div` - margin-top: 12px; - color: #fff; - text-align: center; - font-family: "Gothic A1"; - font-size: 15px; - font-style: normal; - font-weight: 500; - line-height: normal; -`; diff --git a/customfront/src/style/styledinfo3.jsx b/customfront/src/style/styledinfo3.jsx index 50b94e7c..93358de1 100644 --- a/customfront/src/style/styledinfo3.jsx +++ b/customfront/src/style/styledinfo3.jsx @@ -5,7 +5,7 @@ export const Container = styled.div` margin: 0 auto; width: 393px; height: 852px; - background: pink; + background: #fff; `; export const Header = styled.div` @@ -97,7 +97,8 @@ export const Box = styled.div` `; export const SmallBox5 = styled.div` - width: 48%; + width: 160px; + height: 162px; margin-bottom: 10px; position: relative; display: flex; @@ -122,7 +123,7 @@ export const SmallBox5 = styled.div` export const SmallBox6 = styled(SmallBox5)``; export const Button = styled.div` - margin-top: 15px; + margin-top: 480px; cursor: pointer; `; diff --git a/customfront/src/style/styledlogin.jsx b/customfront/src/style/styledlogin.jsx index e69de29b..fcbc9d3d 100644 --- a/customfront/src/style/styledlogin.jsx +++ b/customfront/src/style/styledlogin.jsx @@ -0,0 +1,136 @@ +import { styled } from "styled-components"; + +export const Container = styled.div` + display: flex; + position: relative; + margin: 0 auto; + width: 393px; + height: 852px; + background: #FFF9C2; + #logintitle{ + margin-top: 110px; + margin-left: 85px; + } +`; + + +export const Title = styled.div` + positon: relative; + width: 333px; + height: 347px; + flex-shrink: 0; + padding-top: 100px; + border-radius: 347px; + background: rgba(190, 255, 224, 0.56); + filter: blur(50px); + margin-left: 30px; + margin-top: 100px; +`; + +export const Box= styled.div`= + padding-top: 100px; + margin-top: 100px; + width: 333px; + height: 347px; + flex-shrink: 0; + background: trnasparent; +`; + + +export const InsertA = styled.div` + width: 333px; + height: 46px; + position: absolute; + left:30px; + top: 540px; + flex-shrink: 0; + border-radius: 10px; + border: 1.5px solid #000; + background: #fff; + #Id { + width: 300px; + height: 21.606px; + flex-shrink: 0; + text-align: left; + margin-top: 10px; + color: #000; + font-family: "Gothic A1"; + font-size: 20px; + font-style: normal; + font-weight: 500; + line-height: normal; + border: none; + background: none; + } +`; + +export const InsertB = styled.div` + width: 333px; + height: 46px; + position: absolute; + left:30px; + top: 605px; + flex-shrink: 0; + border-radius: 10px; + border: 1.5px solid #000; + background: #fff; + #Pw { + width: 300px; + height: 21.606px; + flex-shrink: 0; + text-align: left; + margin-top: 10px; + color: #000; + font-family: "Gothic A1"; + font-size: 20px; + font-style: normal; + font-weight: 500; + line-height: normal; + border: none; + background: none; + } +`; + +export const LoginBox = styled.div` + #LoginText { + color: #000; + margin-top: 5px; + text-align: center; + font-family: "Gothic A1"; + font-size: 20px; + font-style: normal; + font-weight: 500; + line-height: normal; + } + width: 150px; + height: 39px; + position: absolute; + left: 205px; + top: 700px; + flex-shrink: 0; + border-radius: 10px; + border: 1.5px solid #000; + background: #a7faf0; +`; + +export const MembershipBox = styled.div` + #MembershipText { + color: #000; + margin-top: 5px; + text-align: center; + font-family: "Gothic A1"; + font-size: 20px; + font-style: normal; + font-weight: 500; + line-height: normal; + } + width: 150px; + height: 39px; + position: absolute; + left: 30px; + top: 700px; + flex-shrink: 0; + border-radius: 10px; + border: 1.5px solid #000; + background: #fff; +`; \ No newline at end of file diff --git a/customfront/src/style/styledlogin2.jsx b/customfront/src/style/styledlogin2.jsx new file mode 100644 index 00000000..22b35f86 --- /dev/null +++ b/customfront/src/style/styledlogin2.jsx @@ -0,0 +1,114 @@ +import { styled } from "styled-components"; + +export const Container = styled.div` + display: flex; + position: relative; + margin: 0 auto; + width: 393px; + height: 852px; + background: #FFF9C2; + #logintitle{ + margin-top: 110px; + margin-left: 85px; + } +`; + + +export const Title = styled.div` + positon: relative; + width: 333px; + height: 347px; + flex-shrink: 0; + padding-top: 100px; + border-radius: 347px; + background: rgba(190, 255, 224, 0.56); + filter: blur(50px); + margin-left: 30px; + margin-top: 100px; +`; + +export const Box= styled.div`= + padding-top: 100px; + margin-top: 100px; + width: 333px; + height: 347px; + flex-shrink: 0; + background: trnasparent; +`; + + +export const InsertA = styled.div` + width: 333px; + height: 46px; + position: absolute; + left:30px; + top: 540px; + flex-shrink: 0; + border-radius: 10px; + border: 1.5px solid #000; + background: #fff; + #Id { + width: 300px; + height: 21.606px; + flex-shrink: 0; + text-align: left; + margin-top: 10px; + color: #000; + font-family: "Gothic A1"; + font-size: 20px; + font-style: normal; + font-weight: 500; + line-height: normal; + border: none; + background: none; + } +`; + +export const InsertB = styled.div` + width: 333px; + height: 46px; + position: absolute; + left:30px; + top: 605px; + flex-shrink: 0; + border-radius: 10px; + border: 1.5px solid #000; + background: #fff; + #Pw { + width: 300px; + height: 21.606px; + flex-shrink: 0; + text-align: left; + margin-top: 10px; + color: #000; + font-family: "Gothic A1"; + font-size: 20px; + font-style: normal; + font-weight: 500; + line-height: normal; + border: none; + background: none; + } +`; + +export const LoginBox = styled.div` + #LoginText { + color: #000; + margin-top: 5px; + text-align: center; + font-family: "Gothic A1"; + font-size: 20px; + font-style: normal; + font-weight: 500; + line-height: normal; + } + width: 335px; + height: 39px; + position: absolute; + left: 30px; + top: 700px; + flex-shrink: 0; + border-radius: 10px; + border: 1.5px solid #000; + background: #a7faf0; +`; \ No newline at end of file diff --git a/customfront/src/style/styledlogincomplete.jsx b/customfront/src/style/styledlogincomplete.jsx new file mode 100644 index 00000000..1f51cbd0 --- /dev/null +++ b/customfront/src/style/styledlogincomplete.jsx @@ -0,0 +1,69 @@ +import { styled } from "styled-components"; + +export const Container = styled.div` + display: flex; + position: relative; + margin: 0 auto; + width: 393px; + height: 852px; + background: none; +`; + + +export const Title = styled.div` + positon: relative; + width: 333px; + height: 347px; + flex-shrink: 0; + padding-top: 100px; + border-radius: 347px; + margin-left: 30px; + margin-top: 100px; +`; + +export const Box= styled.div`= + padding-top: 100px; + margin-top: 100px; + width: 333px; + height: 347px; + flex-shrink: 0; + z-index: 900; +`; + +export const Button = styled.button` + display: flex; + position: absolute; + z-index: 10; + margin-top: 450px; + width: 334px; + height: 45px; + flex-shrink: 0; + border-radius: 10px; + background: linear-gradient(90deg, #edd719 0%, #a7faf0 100%); + box-shadow: 0px 0px 4px 2px rgba(76, 75, 75, 0.25); + cursor: pointer; + border: none; +`; + +export const ButtonText = styled.div` + display: flex; + position: relative; + margin-left: 80px; + margin-top: 9px; + color: #000; + text-align: center; + align-items: center; + justify-content: center; + font-family: "Gothic A1"; + font-size: 18px; + font-style: normal; + font-weight: 550; + line-height: normal; +`; + +export const Image = styled.img` + position: absolute; + top: 0px; + left: 0px; + z-index: 1; +`; \ No newline at end of file diff --git a/customfront/src/style/styledmain0.jsx b/customfront/src/style/styledmain0.jsx index 9fb051a4..ed197d16 100644 --- a/customfront/src/style/styledmain0.jsx +++ b/customfront/src/style/styledmain0.jsx @@ -97,13 +97,8 @@ export const InputBlank = styled.div` font-weight: 300; line-height: normal; } - - #ylogo { - margin-left: 10px; - } `; - export const SmallBox2 = styled.div` display: inline-flex; margin-left: 5px; @@ -142,10 +137,10 @@ export const Body = styled.div` export const Box2 = styled.div` display: flex; flex-direction: row; - width: 370px; + width: 375px; height: 500px; gap: 7px; - margin-left: -205px; + margin-left: -195px; overflow-y: auto; scrollbar-width: none; background-color: none; @@ -185,16 +180,126 @@ export const Box = styled.div` export const Button = styled.div` position: absolute; - top: 724px; - left: 13px; + top: 200px; + left: 30px; flex-shrink: 0; cursor: pointer; `; export const Buttontwo = styled.div` position: absolute; - top: 724px; + top: 660px; left: 205px; flex-shrink: 0; cursor: pointer; +`; + +export const News = styled.div` + display: flex; + margin-top: 20px; + flex-direction: row; + width: 372px; + height: 350px; + gap: 7px; + overflow-x: auto; + overflow-y: hidden; + scrollbar-width: none; + background-color: transparent; + border: none; + + &::-webkit-scrollbar { + display: none; + } +`; + +export const Card = styled.div` + position: relative; + margin-left: 5px; + margin-top: 10px; + flex-shrink: 0; + width: 100%; + height: 330px; + display: flex; + gap: 15px; + img { + width: 100%; + height: 100%; + } +`; + +export const Button2 = styled.div` + position: relative; + margin-top: 10px; + margin-left: -190px; + cursor: pointer; +`; + +export const Button2Text = styled.div` + margin-top: 12px; + color: #fff; + text-align: center; + font-family: "Gothic A1"; + font-size: 15px; + font-style: normal; + font-weight: 500; + line-height: normal; +`; + +export const Backdrop = styled.div` + position: absolute; + top: 50%; + left: 50%; + width: 393px; + height: 852px; + background-color: rgba(0, 0, 0, 0.5); + z-index: 1; + transform: translate(-50%, -50%); +`; + +export const DropdownMenu = styled.div` + position: absolute; + top: 80px; + left: 80%; + transform: translateX(-50%); + width: 50px; + height: 314px; + border-radius: 50px; + background: #fff; + box-shadow: 0px 0px 8px 8px #544c4c; + padding: 20px; + z-index: 11; + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: center; + + #mypage { + margin-top: 15px; + margin-right: 7px; + } + #myreview { + margin-top: 107px; + margin-right: 7px; + } + #mainpage { + margin-top: 200px; + margin-right: 7px; + } + #logout { + margin-top: 2px; + margin-right: 2px; + } +`; + +export const DropdownItem = styled.button` + background: none; + border: none; + padding: 10px; + font-size: 16px; + cursor: pointer; + color: #333; + width: 100%; + text-align: center; + border-radius: 50%; + transition: background-color 0.3s ease; `; \ No newline at end of file diff --git a/customfront/src/style/styledmain2.jsx b/customfront/src/style/styledmain2.jsx index 4fd021dc..f7c75111 100644 --- a/customfront/src/style/styledmain2.jsx +++ b/customfront/src/style/styledmain2.jsx @@ -4,9 +4,11 @@ export const Container = styled.div` position: relative; margin: 0 auto; width: 393px; - height: 924px; + height: 1093px; margin-top: 0px; background: #fff; + text-align: center; + overflow: ${(props) => (props.isMenuOpen ? "hidden" : "auto")}; `; export const Header = styled.div` @@ -14,7 +16,7 @@ export const Header = styled.div` background: #fff; width: 393px; height: 50px; - z-index: 2; + z-index: 999; #back { cursor: pointer; } @@ -130,6 +132,40 @@ export const SmallBox2 = styled.div` text-align: center; `; +export const SmallBox0 = styled.div` + display: inline-flex; + margin-left: 5px; + margin-bottom: 20px; + height: 25px; + width: 58px; + flex-shrink: 0; + border-radius: 10px; + border: 0.5px solid #edd719; + background: #fffde8; + font-size: 10px; + font-weight: 600; + justify-content: center; + align-items: center; + text-align: center; +`; + +export const ProductName = styled.div` + display: inline-flex; + margin-left: 6px; + margin-bottom: 20px; + height: 25px; + width: 123px; + flex-shrink: 0; + border-radius: 10px; + border: 0.5px solid #edd719; + background: #fffde8; + font-size: 10px; + font-weight: 600; + justify-content: center; + align-items: center; + text-align: center; +`; + export const List2 = styled.div` display: flex; flex-direction: column; @@ -156,7 +192,7 @@ export const SmallBox3 = styled.div` display: inline-flex; margin-top: -25px; margin-left: 3px; - height: 30px; + height: 40px; width: 83px; flex-shrink: 0; background: #fff; @@ -166,12 +202,40 @@ export const SmallBox3 = styled.div` text-align: center; `; +export const SmallBox6 = styled.div` + display: inline-flex; + margin-top: -25px; + margin-left: 3px; + height: 40px; + width: 60px; + flex-shrink: 0; + background: #fff; + font-size: 10px; + justify-content: center; + align-items: center; + text-align: center; +`; + +export const ProductName2 = styled.div` + display: inline-flex; + margin-top: -25px; + margin-left: 5px; + height: 40px; + width: 128px; + flex-shrink: 0; + background: #fff; + font-size: 10px; + justify-content: center; + align-items: center; + text-align: center; +`; + export const SmallBox4 = styled.div` display: inline-flex; margin-top: -25px; margin-left: 3px; - height: 30px; - width: 83px; + height: 40px; + width: 60px; background: #fff; display: flex; justify-content: center; @@ -261,34 +325,33 @@ export const Box = styled.div` box-shadow: 0px 0px 4px 4px #f2f2f2; `; -export const Box2 = styled.div` - display: flex; - flex-direction: row; - width: 285px; - height: 37px; - gap: 7px; - margin-left: 10px; - overflow-y: auto; - scrollbar-width: none; - background-color: none; - border: none; -`; - export const SmallBox5 = styled.div` - position: relative; - display: flex; - margin-top: -23px; - margin-left: -18px; - width: 87.102px; - height: 21px; + position: relative; + display: flex; + width: 100%; /* 부모 컨테이너의 크기에 맞추기 */ + max-width: 100px; /* 필요에 따라 크기 조정 */ + height: 30px; /* 높이 조정 */ flex-shrink: 0; font-size: 13px; border-radius: 50px; background: #d9d9d9; - display: flex; justify-content: center; align-items: center; text-align: center; + margin: 5px; /* 간격 조정 */ +`; + +export const Box2 = styled.div` + display: flex; + flex-direction: row; + flex-wrap: nowrap; /* 아이템이 한 줄로 배치되도록 설정 */ + width: 100%; + max-height: 40px; /* 높이 조정 */ + gap: 7px; + margin-left: 10px; + overflow-x: auto; /* 수평 스크롤 추가 */ + background-color: none; + border: none; `; export const DelButton = styled.div` @@ -307,9 +370,9 @@ export const Icon = styled.div` export const Button = styled.div` margin-top: 25px; - margin-left: 30px; - width: 85%; - height: 30px; + margin-left: 10px; + width: 95%; + height: 50px; flex-shrink: 0; border-radius: 5px; border: 1px solid #edd719; @@ -318,7 +381,7 @@ export const Button = styled.div` `; export const ButtonText = styled.div` - margin-top: 5px; + margin-top: 15px; color: #000; text-align: center; font-family: "Gothic A1"; @@ -327,3 +390,113 @@ export const ButtonText = styled.div` font-weight: 300; line-height: normal; `; + +export const SelectedItemsSection = styled.div` + position: relative; + display: flex; + flex-direction: column; /* 세로 방향으로 배치 */ + align-items: flex-start; + margin-left: 10px; + width: 370px; /* 설정된 너비 */ + height: 37px; + border-radius: 10px; + background: #fff; + box-shadow: 0px 0px 4px 4px #f2f2f2; + overflow: hidden; /* 전체 영역의 스크롤 숨기기 */ +`; + +export const SelectedItemsTitle = styled.h2` + font-size: 18px; + margin-bottom: 10px; +`; + +export const SelectedItemsList = styled.ul` + display: flex; /* 가로로 배치 */ + list-style-type: none; + padding: 0; + margin: 0; /* 기본 margin 제거 */ + width: 325px; /* 부모 컨테이너의 너비에 맞춤 */ + overflow-x: auto; /* 가로 스크롤 가능 */ + overflow-y: hidden; /* 세로 스크롤 숨기기 */ + scrollbar-width: none; /* Firefox에서 스크롤바 숨기기 */ + + &::-webkit-scrollbar { + display: none; /* Webkit 기반 브라우저에서 스크롤바 숨기기 */ + } +`; + +export const SelectedItem = styled.li` + position: relative; + display: flex; + width: 100px; /* 아이템의 너비 설정 */ + height: 30px; /* 아이템의 높이 설정 */ + flex-shrink: 0; /* 아이템이 줄어들지 않도록 */ + font-size: 13px; + border-radius: 50px; + background: #d9d9d9; + justify-content: center; + align-items: center; + text-align: center; + margin: 5px; /* 아이템 간 간격 조정 */ +`; + +// 드롭다운 메뉴 스타일 +export const Backdrop = styled.div` + position: absolute; + top: 40%; + left: 50%; + width: 393px; + height: 1000px; + background-color: rgba(0, 0, 0, 0.5); + z-index: 1; + transform: translate(-50%, -50%); +`; + +export const DropdownMenu = styled.div` + position: absolute; + top: 80px; + left: 80%; + transform: translateX(-50%); + width: 50px; + height: 314px; + border-radius: 50px; + background: #fff; + box-shadow: 0px 0px 8px 8px #544c4c; + padding: 20px; + z-index: 11; + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: center; + + #mypage { + margin-top: 15px; + margin-right: 7px; + } + #myreview { + margin-top: 107px; + margin-right: 7px; + } + #mainpage { + margin-top: 200px; + margin-right: 7px; + } + #logout { + margin-top: 2px; + margin-right: 2px; + } +`; + +export const DropdownItem = styled.button` + background: none; + border: none; + padding: 10px; + font-size: 16px; + cursor: pointer; + color: #333; + width: 100%; + text-align: center; + border-radius: 50%; + transition: background-color 0.3s ease; +`; + diff --git a/customfront/src/style/styledmain3.jsx b/customfront/src/style/styledmain3.jsx index 15681424..7c855276 100644 --- a/customfront/src/style/styledmain3.jsx +++ b/customfront/src/style/styledmain3.jsx @@ -15,7 +15,7 @@ export const Header = styled.div` background: #fff; width: 393px; height: 50px; - z-index: 2; + z-index: 20; #back { cursor: pointer; } @@ -87,7 +87,7 @@ export const Ybox = styled.div` align-items: flex-start; text-align: flex-start; width: 393px; - height: 700px; + height: 630px; flex-shrink: 0; background: #fffde8; `; @@ -110,6 +110,7 @@ export const Wbox = styled.div` export const Text = styled.div` display: flex; + margin-top: -35px; flex-direction: column; align-items: center; justify-content: flex-start; @@ -187,9 +188,9 @@ export const Sbox = styled.div` align-items: center; text-align: center; width: 393px; - height: 700px; + height: 450px; flex-shrink: 0; - background: pink; + background: #fff; /*background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #FFF 37%, #FFF 69%, #FFF 100%);*/ `; @@ -209,7 +210,7 @@ export const Otext = styled.div` width: 350px; height: 40px; flex-shrink: 0; - margin-top: 50px; + margin-top: 0px; margin-left: 20px; `; @@ -307,7 +308,7 @@ export const Star = styled.div` export const Button = styled.div` margin-top: 50px; - margin-left: 30px; + margin-left: 10px; width: 298px; height: 39px; flex-shrink: 0; @@ -327,3 +328,62 @@ export const ButtonText = styled.div` font-weight: 500; line-height: normal; `; + +export const Backdrop = styled.div` + position: absolute; + top: 20%; + left: 50%; + width: 393px; + height: 1800px; + background-color: rgba(0, 0, 0, 0.5); + z-index: 1; + transform: translate(-50%, -50%); +`; + +export const DropdownMenu = styled.div` + position: absolute; + top: 80px; + left: 80%; + transform: translateX(-50%); + width: 50px; + height: 314px; + border-radius: 50px; + background: #fff; + box-shadow: 0px 0px 8px 8px #544c4c; + padding: 20px; + z-index: 11; + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: center; + + #mypage { + margin-top: 15px; + margin-right: 7px; + } + #myreview { + margin-top: 107px; + margin-right: 7px; + } + #mainpage { + margin-top: 200px; + margin-right: 7px; + } + #logout { + margin-top: 2px; + margin-right: 2px; + } +`; + +export const DropdownItem = styled.button` + background: none; + border: none; + padding: 10px; + font-size: 16px; + cursor: pointer; + color: #333; + width: 100%; + text-align: center; + border-radius: 50%; + transition: background-color 0.3s ease; +`; diff --git a/customfront/src/style/styledmembership.jsx b/customfront/src/style/styledmembership.jsx index ede71eca..38d80b0c 100644 --- a/customfront/src/style/styledmembership.jsx +++ b/customfront/src/style/styledmembership.jsx @@ -5,12 +5,12 @@ export const Container = styled.div` margin: 0 auto; width: 393px; height: 1100px; - background: pink; + background: #fff; `; export const Header = styled.div` #logo { - position: absolute; /* 수정된 부분 */ + position: absolute; margin-right: -330px; margin-top: 3px; } @@ -64,9 +64,9 @@ export const Label2 = styled.div` `; export const InputBlank = styled.div` - margin-top: 7px; + margin-top: 13px; margin-left: 30px; - margin-bottom: 20px; + margin-bottom: 25px; width: 328px; height: 50px; flex-shrink: 0; @@ -77,35 +77,8 @@ export const InputBlank = styled.div` border: none; outline: none; width: 273px; - margin-top: 17px; - margin-left: -50px; - color: #000; - font-family: "Gothic A1"; - font-size: 13px; - font-style: normal; - font-weight: 250; - line-height: 150%; /* 19.5px */ - letter-spacing: -0.143px; - background: none; - } -`; - -export const InputBlank2 = styled.div` - margin-top: 7px; - margin-left: 30px; - margin-bottom: 20px; - width: 255px; - height: 50px; - flex-shrink: 0; - border-radius: 10px; - background: #fff; - box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.25); - input { - border: none; - outline: none; - width: 273px; - margin-top: 17px; - margin-left: 0px; /* 수정된 부분 */ + margin-top: 15px; + margin-left: -30px; color: #000; font-family: "Gothic A1"; font-size: 13px; @@ -117,7 +90,6 @@ export const InputBlank2 = styled.div` } `; - export const Idbutton = styled.div` position: absolute; display: flex; @@ -140,10 +112,10 @@ export const Bottom = styled.div` display: flex; flex-direction: column; align-items: left; - margin-top: 10px; + margin-top: 15px; margin-left: 30px; width: 330px; - height: 138px; + height: 180px; flex-shrink: 0; border-radius: 10px; border: 0.3px solid #000; @@ -151,28 +123,22 @@ export const Bottom = styled.div` export const BottomText = styled.div` display: flex; - flex-direction: column; + flex-direction: row; + align-items: center; text-align: left; - background: #a7faf0; - margin-bottom: 30px; - #check { - display: flex; - position: absolute; - margin-top: 22px; - margin-left: 50px; - } - #checkbox { - display: flex; - position: absolute; - margin-top: 20px; - margin-left: 20px; - cursor: pointer; + background: none; + margin-bottom: 20px; + margin-top: 5px; + margin-left: 20px; + + input { + position: relative; + margin: 0 10px 0 0; } `; -export const Button = styled.div` - margin-top: 50px; - margin-left: 28px; +export const Button = styled.button` + margin-top: 100px; width: 334px; height: 45px; flex-shrink: 0; @@ -180,18 +146,27 @@ export const Button = styled.div` background: linear-gradient(90deg, #edd719 0%, #a7faf0 100%); box-shadow: 0px 0px 4px 2px rgba(76, 75, 75, 0.25); cursor: pointer; - &:hover { - background-color: #dadada; - } + border: none; `; -export const ButtonText = styled.div` - margin-top: 15px; +export const Text = styled.div` + display: flex; + position: relative; color: #000; text-align: center; + align-items: center; + justify-content: center; font-family: "Gothic A1"; font-size: 15px; font-style: normal; font-weight: 550; line-height: normal; -`; \ No newline at end of file +`; + +export const Error = styled.div` + color: red; + font-size: 2px; + margin-top: 0.5rem; +`; + + diff --git a/customfront/src/style/styledmypage.jsx b/customfront/src/style/styledmypage.jsx index 5a70a2d7..98feda34 100644 --- a/customfront/src/style/styledmypage.jsx +++ b/customfront/src/style/styledmypage.jsx @@ -4,33 +4,34 @@ export const Container = styled.div` position: relative; margin: 0 auto; width: 393px; - height: 924px; + height: 885px; + margin-top: 0px; background: #fff; + overflow: ${(props) => (props.isMenuOpen ? "hidden" : "auto")}; `; -//1 export const Header = styled.div` position: fixed; background: #fff; width: 393px; height: 50px; - z-index: 2; + z-index: 999; #back { cursor: pointer; } #logo { - position: absolute; + display: absolute; margin-top: 8px; cursor: pointer; } #alarm { - position: absolute; + display: absolute; margin-top: 3px; margin-left: 305px; cursor: pointer; } #menu { - position: absolute; + display: absolute; margin-top: 5px; margin-left: 343px; cursor: pointer; @@ -77,7 +78,7 @@ export const Keyword = styled.div` width: 343px; height: 105px; top: 156px; - left: 24px; + left: 15px; flex-shrink: 0; border-radius: 10px; background: #FFF9C2; @@ -85,20 +86,48 @@ export const Keyword = styled.div` padding: 10px; `; +// 공통 스타일 export const Small = styled.div` padding: 5px 13px; flex-shrink: 0; border-radius: 30px; - background: linear-gradient(180deg, #E1E1E1 0%, #FFFBA6 100%); + border: 1px solid #EDD719; + background: #FFF; font-size: 13px; z-index: 2; `; -export const SmallOne = styled(Small)``; -export const SmallTwo = styled(Small)``; -export const SmallThree = styled(Small)``; -export const SmallFour = styled(Small)``; -export const SmallFive = styled(Small)``; +// 개별 위치 스타일 +export const SmallOne = styled(Small)` + position: absolute; + top: 1px; + left: 156px; +`; + +export const SmallTwo = styled(Small)` + position: absolute; + width: 45px; + top: 1px; + left: 260px; +`; + +export const SmallThree = styled(Small)` + position: absolute; + top: 50px; + left: 20px; +`; + +export const SmallFour = styled(Small)` + position: absolute; + top: 50px; + left: 120px; +`; + +export const SmallFive = styled(Small)` + position: absolute; + top: 50px; + left: 250px; +`; export const Wrap = styled.div` display: flex; @@ -106,8 +135,8 @@ export const Wrap = styled.div` align-items: flex-start; width: 300px; height: 40px; - top: 174px; - left: 175px; + top: 20px; + left: 5px; flex-shrink: 0; border-radius: 10px; position: absolute; @@ -119,8 +148,8 @@ export const Wrap2 = styled.div` align-items: flex-start; width: 343px; height: 40px; - top: 174px; - left: 175px; + top: 20px; + left: 5px; flex-shrink: 0; border-radius: 10px; position: absolute; @@ -147,8 +176,8 @@ export const Check = styled.div` background: #F2F2F2; padding: 20px 0px 20px 0px; text-align: center; - margin-top: 13px; - margin-left: 24px; + margin-top: 25px; + margin-left: 20px; font-family: "Gothic A1"; font-size: 15px; font-style: normal; @@ -164,8 +193,8 @@ export const Write = styled.div` background: linear-gradient(90deg, rgba(190, 255, 224, 0.45) 0%, #FFF9C2 100%); padding: 20px 0px 20px 0px; text-align: center; - top: 503px; - left: 204px; + top: 515px; + left: 210px; position: absolute; font-family: "Gothic A1"; font-size: 15px; @@ -187,6 +216,7 @@ export const Body = styled.div` export const Text = styled.div` margin-top: 15px; margin-bottom: 15px; + margin-left: -18px; width: 308px; height: 20px; flex-shrink: 0; @@ -195,7 +225,7 @@ export const Text = styled.div` font-size: 15px; font-style: normal; font-weight: 600; - line-height: 150%; /* 22.5px */ + line-height: 150%; letter-spacing: -0.165px; `; @@ -209,8 +239,8 @@ export const Box = styled.div` background: #FFF; box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.25); text-align: left; - display: flex; /* 자식 요소를 수평으로 정렬하기 위해 flex 사용 */ - align-items: center; /* 수직 가운데 정렬 */ + display: flex; + align-items: center; padding-left: 15px; cursor: pointer; `; @@ -236,4 +266,65 @@ export const ButtonText = styled.div` line-height: 150%; /* 22.5px */ letter-spacing: -0.165px; cursor: pointer; +`; + +export const Backdrop = styled.div` + position: absolute; + top: 50%; + left: 50%; + width: 393px; + height: 910px; + background-color: rgba(0, 0, 0, 0.5); + z-index: 10; + transform: translate(-50%, -50%); + scrollbar-width: none; + background-color: none; +`; + +export const DropdownMenu = styled.div` + position: absolute; + top: 80px; + left: 80%; + transform: translateX(-50%); + width: 50px; + height: 314px; + border-radius: 50px; + background: #fff; + box-shadow: 0px 0px 8px 8px #544c4c; + padding: 20px; + z-index: 11; + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: center; + + #mypage { + margin-top: 15px; + margin-right: 7px; + } + #myreview { + margin-top: 107px; + margin-right: 7px; + } + #mainpage { + margin-top: 200px; + margin-right: 7px; + } + #logout { + margin-top: 2px; + margin-right: 2px; + } +`; + +export const DropdownItem = styled.button` + background: none; + border: none; + padding: 10px; + font-size: 16px; + cursor: pointer; + color: #333; + width: 100%; + text-align: center; + border-radius: 50%; + transition: background-color 0.3s ease; `; \ No newline at end of file diff --git a/customfront/src/style/styledpwchange.jsx b/customfront/src/style/styledpwchange.jsx index 4511dac6..b04976d5 100644 --- a/customfront/src/style/styledpwchange.jsx +++ b/customfront/src/style/styledpwchange.jsx @@ -4,7 +4,7 @@ export const Container = styled.div` position: relative; margin: 0 auto; width: 393px; - height: 924px; + height: 852px; margin-top: 0px; background: #fff; `; @@ -44,18 +44,6 @@ export const Border = styled.div` padding-bottom: 2px; `; -export const Top = styled.div` - text-align: left; - padding-left: 25px; - padding-top: 80px; - color: #000; - font-family: "Gothic A1"; - font-size: 25px; - font-style: normal; - font-weight: 700; - line-height: normal; -`; - export const Name = styled.div` text-align: left; position: absolute; @@ -69,7 +57,6 @@ export const Name = styled.div` line-height: normal; `; - export const Kit = styled.div` top: 255px; left: 38px; @@ -84,74 +71,103 @@ export const Kit = styled.div` `; export const Check = styled.div` - top: 292px; + top: 250px; left: 38px; position: absolute; color: #000; font-family: "Gothic A1"; font-size: 13px; font-style: normal; - font-weight: 300; - line-height: 150%; /* 19.5px */ + font-weight: 400; + line-height: 150%; letter-spacing: -0.143px; `; - export const Body = styled.div` display: flex; flex-direction: column; - margin-top: 30px; width: 393px; height: 275px; flex-shrink: 0; - background: #FFF9C2; -`; - -export const Text = styled.div` - margin-top: 15px; - margin-bottom: 15px; - width: 308px; - height: 20px; - flex-shrink: 0; - color: #000; - font-family: "Gothic A1"; - font-size: 15px; - font-style: normal; - font-weight: 600; - line-height: 150%; /* 22.5px */ - letter-spacing: -0.165px; + background: #fff; `; export const Box = styled.div` margin-top: 10px; margin-left: 30px; width: 345px; - height: 50px; + height: 50px; flex-shrink: 0; border-radius: 10px; - background: #FFF; + background: #fff; box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.25); cursor: pointer; `; export const Button = styled.div` -`; - -export const ButtonImage = styled.div` - top:28px; - left:113px; - postion: absolute; + margin-top: 15px; + margin-left: 43px; + width: 328px; + height: 45px; + box-shadow: 0px 0px 4px 2px rgba(76, 75, 75, 0.25); + cursor: pointer; + border: none; + border-radius: 10px; + background: #fff9c2; + width: 315px; + height: 59.009px; + flex-shrink: 0; `; export const ButtonText = styled.div` - margin-top: 31px; + display: flex; + position: relative; color: #000; text-align: center; + align-items: center; + justify-content: center; + margin-top: 18px; font-family: "Gothic A1"; font-size: 15px; font-style: normal; - font-weight: 400; - line-height: 150%; /* 22.5px */ - letter-spacing: -0.165px; - cursor: pointer; -`; \ No newline at end of file + font-weight: 550; + line-height: normal; +`; + +export const InputBlank = styled.div` + margin-top: 50px; + margin-left: 42px; + margin-bottom: 20px; + width: 315px; + height: 60px; + flex-shrink: 0; + border-radius: 10px; + background: #fff; + box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.25); + input { + border: none; + outline: none; + width: 273px; + margin-top: 18px; + margin-left: -15px; + color: #000; + font-family: "Gothic A1"; + font-size: 15px; + font-style: normal; + font-weight: 250; + line-height: 150%; /* 19.5px */ + letter-spacing: -0.143px; + background: none; + } +`; + +export const Label = styled.div` + display: flex; + position: relative; + margin-top: 220px; + margin-left: 20px; + color: #000; + font-size: 18px; + font-weight: 600; + padding-left: 20px; +`; diff --git a/customfront/src/style/styledpwchange1.jsx b/customfront/src/style/styledpwchange1.jsx index abc2aaab..abed6c77 100644 --- a/customfront/src/style/styledpwchange1.jsx +++ b/customfront/src/style/styledpwchange1.jsx @@ -73,27 +73,30 @@ export const Name = styled.div` export const Kit = styled.div` position: absolute; top: 200px; - left: 50px; + left: 90px; color: #000; font-family: "Gothic A1"; font-size: 20px; font-style: normal; - font-weight: 500; + font-weight: 700; line-height: 150%; /* 30px */ letter-spacing: -0.22px; `; export const Check = styled.div` position: absolute; - top: - left: + width: 300px; + margin-top: 5px; + justify-content: center; + text-align: center; + item-align: center; + margin-left: -40px; color: #000; font-family: "Gothic A1"; font-size: 13px; font-style: normal; - font-weight: 300; - line-height: 150%; /* 19.5px */ - letter-spacing: -0.143px; + font-weight: 500; + letter-spacing: -0.0005px; `; diff --git a/customfront/src/style/styledreview.jsx b/customfront/src/style/styledreview.jsx index 5e1cb3c7..fd226b5d 100644 --- a/customfront/src/style/styledreview.jsx +++ b/customfront/src/style/styledreview.jsx @@ -203,3 +203,63 @@ export const ButtonText = styled.div` font-weight: 500; line-height: normal; `; + +//메뉴바 스타일 +export const Backdrop = styled.div` + position: absolute; + top: 50%; + left: 50%; + width: 393px; + height: 852px; + background-color: rgba(0, 0, 0, 0.5); + z-index: 1; + transform: translate(-50%, -50%); +`; + +export const DropdownMenu = styled.div` + position: absolute; + top: 80px; + left: 80%; + transform: translateX(-50%); + width: 50px; + height: 314px; + border-radius: 50px; + background: #fff; + box-shadow: 0px 0px 8px 8px #544c4c; + padding: 20px; + z-index: 11; + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: center; + + #mypage { + margin-top: 15px; + margin-right: 7px; + } + #myreview { + margin-top: 107px; + margin-right: 7px; + } + #mainpage { + margin-top: 200px; + margin-right: 7px; + } + #logout { + margin-top: 2px; + margin-right: 2px; + } +`; + +export const DropdownItem = styled.button` + background: none; + border: none; + padding: 10px; + font-size: 16px; + cursor: pointer; + color: #333; + width: 100%; + text-align: center; + border-radius: 50%; + transition: background-color 0.3s ease; +`; diff --git a/customfront/src/style/styledreviewcheck1.jsx b/customfront/src/style/styledreviewcheck1.jsx index c53e0e59..a35154f3 100644 --- a/customfront/src/style/styledreviewcheck1.jsx +++ b/customfront/src/style/styledreviewcheck1.jsx @@ -57,7 +57,7 @@ export const Top = styled.div` export const Keywordd = styled.div` margin-left: 20px; - margin-top: 30px; + margin-top: 20px; display: flex; justify-content: center; `; @@ -89,6 +89,7 @@ export const Box = styled.div` align-items: center; text-align: center; margin-top: 5px; + margin-bottom: -113px; width: 393px; height: 182px; flex-shrink: 0; @@ -122,16 +123,29 @@ export const SmallBox5 = styled.div` justify-content: flex-start; align-items: center; text-align: flex-start; - span{ - margin-left: 10px; + span { + margin-left: 10px; } `; export const Click = styled.div` - position: absolute; - right: 2px; + position: absolute; + right: 2px; top: 3px; - cursor: pointer; + cursor: pointer; + + #review-image { + width: 45px; + margin-top: ${({ type }) => + type === "bad" ? "-8px" : "0px"}; /* 'bad'일 때 위로 이동 */ + margin-right: ${({ type }) => + type === "bad" ? "-9px" : "0px"}; /* 'bad'일 때 오른쪽으로 이동 */ + ${({ type }) => + type === "bad" && + ` + width: 65px; /* 'bad'일 때 크기 조절 */ + `} + } `; export const Button2 = styled.div` @@ -147,9 +161,10 @@ export const Button2 = styled.div` export const Button = styled.div` margin-top: 100px; - margin-left: 30px; - width: 85%; - height: 30px; + margin-left: 50px; + width: 298px; + height: 39px; + flex-shrink: 0; flex-shrink: 0; border-radius: 10px; border: 0.5px solid #fff9c2; @@ -159,7 +174,7 @@ export const Button = styled.div` `; export const ButtonText = styled.div` - margin-top: 5px; + margin-top: 9px; color: #000; text-align: center; font-family: "Gothic A1"; @@ -168,3 +183,68 @@ export const ButtonText = styled.div` font-weight: 500; line-height: normal; `; + +export const ReviewImage = styled.img` + width: ${({ type }) => + type === "bad" ? "65px" : "60px"}; /* bad 이미지 크기 키움 */ +`; + +//메뉴바 스타일 +export const Backdrop = styled.div` + position: absolute; + top: 50%; + left: 50%; + width: 393px; + height: 100%;; + background-color: rgba(0, 0, 0, 0.5); + z-index: 1; + transform: translate(-50%, -50%); +`; + +export const DropdownMenu = styled.div` + position: absolute; + top: 80px; + left: 80%; + transform: translateX(-50%); + width: 50px; + height: 314px; + border-radius: 50px; + background: #fff; + box-shadow: 0px 0px 8px 8px #544c4c; + padding: 20px; + z-index: 11; + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: center; + + #mypage { + margin-top: 15px; + margin-right: 7px; + } + #myreview { + margin-top: 107px; + margin-right: 7px; + } + #mainpage { + margin-top: 200px; + margin-right: 7px; + } + #logout { + margin-top: 2px; + margin-right: 2px; + } +`; + +export const DropdownItem = styled.button` + background: none; + border: none; + padding: 10px; + font-size: 16px; + cursor: pointer; + color: #333; + width: 100%; + text-align: center; + border-radius: 50%; + transition: background-color 0.3s ease; +`; \ No newline at end of file diff --git a/customfront/src/style/styledreviewcheck2.jsx b/customfront/src/style/styledreviewcheck2.jsx index 36a1c94e..b766977e 100644 --- a/customfront/src/style/styledreviewcheck2.jsx +++ b/customfront/src/style/styledreviewcheck2.jsx @@ -14,7 +14,7 @@ export const Header = styled.div` background: #fff; width: 393px; height: 50px; - z-index: 2; + z-index: 10; #back { cursor: pointer; } @@ -146,9 +146,10 @@ export const Button2 = styled.div` export const Button = styled.div` margin-top: 100px; - margin-left: 30px; - width: 85%; - height: 30px; + margin-left: 50px; + width: 298px; + height: 39px; + flex-shrink: 0; flex-shrink: 0; border-radius: 10px; border: 0.5px solid #fff9c2; @@ -158,7 +159,7 @@ export const Button = styled.div` `; export const ButtonText = styled.div` - margin-top: 5px; + margin-top: 9px; color: #000; text-align: center; font-family: "Gothic A1"; @@ -167,3 +168,63 @@ export const ButtonText = styled.div` font-weight: 500; line-height: normal; `; + +//메뉴바 스타일 +export const Backdrop = styled.div` + position: absolute; + top: 50%; + left: 50%; + width: 393px; + height: 852px; + background-color: rgba(0, 0, 0, 0.5); + z-index: 5; + transform: translate(-50%, -50%); +`; + +export const DropdownMenu = styled.div` + position: absolute; + top: 80px; + left: 80%; + transform: translateX(-50%); + width: 50px; + height: 314px; + border-radius: 50px; + background: #fff; + box-shadow: 0px 0px 8px 8px #544c4c; + padding: 20px; + z-index: 11; + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: center; + + #mypage { + margin-top: 15px; + margin-right: 7px; + } + #myreview { + margin-top: 107px; + margin-right: 7px; + } + #mainpage { + margin-top: 200px; + margin-right: 7px; + } + #logout { + margin-top: 2px; + margin-right: 2px; + } +`; + +export const DropdownItem = styled.button` + background: none; + border: none; + padding: 10px; + font-size: 16px; + cursor: pointer; + color: #333; + width: 100%; + text-align: center; + border-radius: 50%; + transition: background-color 0.3s ease; +`; \ No newline at end of file diff --git a/customfront/src/style/styledreviewcheck3.jsx b/customfront/src/style/styledreviewcheck3.jsx index 5e1cb3c7..b540ff69 100644 --- a/customfront/src/style/styledreviewcheck3.jsx +++ b/customfront/src/style/styledreviewcheck3.jsx @@ -93,22 +93,6 @@ export const Keywordd = styled.div` justify-content: center; `; -export const Kit = styled.div` - display: inlin-block - positon: absolute; - width: 200px; - height: 10px; - flex-shrink: 0; - text-align: left; - margin-top: -120px; - margin-left: 15px; - margin-bottom: -5px; - font-family: "Gothic A1"; - font-size: 12px; - font-style: normal; - font-weight: 400; - line-height: normal; -`; export const Body = styled.div` display: flex; @@ -118,45 +102,6 @@ export const Body = styled.div` height: 150px; `; -export const Box = styled.div` - position: relative; - display: flex; - justify-content: flex-start; - align-items: center; - width: 393px; - height: 153px; - flex-shrink: 0; - background: #fff9c2; -`; - -export const Box2 = styled.div` - display: flex; - flex-direction: row; - width: 370px; - height: 130px; - gap: 7px; - margin-left: -205px; - overflow-y: auto; - scrollbar-width: none; - background-color: none; - border: none; -`; - -export const SmallBox5 = styled.div` - position: relative; - display: flex; - margin-left: -18px; - width: 179px; - height: 99px; - flex-shrink: 0; - font-size: 13px; - border-radius: 10px; - background: #fff; - display: flex; - justify-content: center; - align-items: center; - text-align: center; -`; export const Under = styled.div` text-align: center; @@ -181,10 +126,11 @@ export const Button2 = styled.div` `; export const Button = styled.div` - margin-top: 50px; - margin-left: 30px; - width: 85%; - height: 30px; + margin-top: 100px; + margin-left: 50px; + width: 298px; + height: 39px; + flex-shrink: 0; flex-shrink: 0; border-radius: 10px; border: 0.5px solid #fff9c2; @@ -194,7 +140,7 @@ export const Button = styled.div` `; export const ButtonText = styled.div` - margin-top: 5px; + margin-top: 9px; color: #000; text-align: center; font-family: "Gothic A1"; @@ -203,3 +149,82 @@ export const ButtonText = styled.div` font-weight: 500; line-height: normal; `; + +export const ButtonTwo = styled.div` + margin-top: 20px; + margin-left: 50px; + width: 298px; + height: 39px; + flex-shrink: 0; + border-radius: 10px; + border: 0.5px solid #fff9c2; + background: #F2F2F2; + box-shadow: 0px 0px 2px 2px rgba(173, 170, 170, 0.25); + cursor: pointer; +`; + +export const ReviewImage = styled.img` + width: ${({ type }) => (type === 'bad' ? '58px' : '60px')}; /* 'bad' 이미지 크기 조절 */ + cursor: pointer; + border: ${({ selected }) => (selected ? '2px solid blue' : 'none')}; /* 선택된 이미지에 테두리 추가 */ +`; + +//메뉴바 스타일 +export const Backdrop = styled.div` + position: absolute; + top: 50%; + left: 50%; + width: 393px; + height: 852px; + background-color: rgba(0, 0, 0, 0.5); + z-index: 1; + transform: translate(-50%, -50%); +`; + +export const DropdownMenu = styled.div` + position: absolute; + top: 80px; + left: 80%; + transform: translateX(-50%); + width: 50px; + height: 314px; + border-radius: 50px; + background: #fff; + box-shadow: 0px 0px 8px 8px #544c4c; + padding: 20px; + z-index: 11; + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: center; + + #mypage { + margin-top: 15px; + margin-right: 7px; + } + #myreview { + margin-top: 107px; + margin-right: 7px; + } + #mainpage { + margin-top: 200px; + margin-right: 7px; + } + #logout { + margin-top: 2px; + margin-right: 2px; + } +`; + +export const DropdownItem = styled.button` + background: none; + border: none; + padding: 10px; + font-size: 16px; + cursor: pointer; + color: #333; + width: 100%; + text-align: center; + border-radius: 50%; + transition: background-color 0.3s ease; +`; \ No newline at end of file