From e401dba2c9c027283f245714afcfb8c5cc867cc3 Mon Sep 17 00:00:00 2001 From: minyeong3201 <164001002+minyeong3201@users.noreply.github.com> Date: Sat, 3 Aug 2024 02:49:15 +0900 Subject: [PATCH 1/7] [2:48]a.m. --- customfront/package-lock.json | 29 ++ customfront/package.json | 1 + customfront/public/logo/logout.svg | 5 + customfront/src/App.js | 5 + customfront/src/page/alarm1.jsx | 29 +- customfront/src/page/info3.jsx | 30 +- customfront/src/page/login.jsx | 134 ++++++++ customfront/src/page/main2.jsx | 350 ++++++++++++++++----- customfront/src/page/main3.jsx | 60 ++-- customfront/src/page/membership.jsx | 312 ++++++++++++------ customfront/src/style/styledalarm1.jsx | 46 +-- customfront/src/style/styledinfo3.jsx | 7 +- customfront/src/style/styledlogin.jsx | 137 ++++++++ customfront/src/style/styledmain2.jsx | 160 ++++++++-- customfront/src/style/styledmembership.jsx | 72 ++--- customfront/src/style/styledmypage.jsx | 1 - 16 files changed, 1069 insertions(+), 309 deletions(-) create mode 100644 customfront/public/logo/logout.svg diff --git a/customfront/package-lock.json b/customfront/package-lock.json index 41f39b663..8df5144a7 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 0c9ac432d..03cbdc27b 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/logout.svg b/customfront/public/logo/logout.svg new file mode 100644 index 000000000..61957112a --- /dev/null +++ b/customfront/public/logo/logout.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/customfront/src/App.js b/customfront/src/App.js index 662d7d84d..1c13acd28 100644 --- a/customfront/src/App.js +++ b/customfront/src/App.js @@ -5,6 +5,7 @@ import Main2 from './page/main2'; import Main3 from './page/main3'; import First from './page/first'; import Login from './page/login'; +import Membership from './page/membership'; import Review from './page/review'; import Reviewcheck1 from './page/reviewcheck1'; import Reviewcheck2 from './page/reviewcheck2'; @@ -17,6 +18,7 @@ import Changeinfo from './page/changeinfo'; import Changeinfo1 from './page/changeinfo1'; import Changeinfo4 from './page/changeinfo4'; import Changeinfo5 from './page/changeinfo5'; +import Mypage from './page/mypage'; import Alarm1 from './page/alarm1'; import Alarm2 from './page/alarm2'; import './App.css'; @@ -31,6 +33,7 @@ function App() { } /> } /> } /> + } /> } /> } /> } /> @@ -44,8 +47,10 @@ function App() { } /> } /> } /> + } /> } /> } /> + diff --git a/customfront/src/page/alarm1.jsx b/customfront/src/page/alarm1.jsx index 1d9e93379..28dad1fc8 100644 --- a/customfront/src/page/alarm1.jsx +++ b/customfront/src/page/alarm1.jsx @@ -14,6 +14,18 @@ const Alarm1 = () => { navigate(`/`); }; + const goMypage = () => { + navigate(`/Mypage`); + }; + + const goMyreview = () => { + navigate(`/Review`); + }; + + const goLogin = () => { + navigate(`/Login`); + }; + const toggleMenu = () => { setIsMenuOpen(!isMenuOpen); }; @@ -91,7 +103,7 @@ const Alarm1 = () => { <> - navigate("/mypage")}> + { onClick={toggleMenu} /> - navigate("/myreview")}> + { onClick={toggleMenu} /> + + logout + )} diff --git a/customfront/src/page/info3.jsx b/customfront/src/page/info3.jsx index e168023b3..58a3a5fda 100644 --- a/customfront/src/page/info3.jsx +++ b/customfront/src/page/info3.jsx @@ -6,8 +6,8 @@ const Info3 = () => { const navigate = useNavigate(); const [selectedBox, setSelectedBox] = useState(null); - const goMain = () => { - navigate(`/`); + const goInfo4 = () => { + navigate(`/info4`); }; const handleBoxClick = (index) => { @@ -42,8 +42,11 @@ const Info3 = () => { 키워드 선택 - 을 진행해 주세요!
- + 을 진행해 주세요! +
+ 키워드 선택이 완료되어야 다음 단계로 이동이 가능합니다. @@ -59,18 +62,23 @@ const Info3 = () => { {[ - "당뇨", - "근손실", - "비만", - "고혈압", - ].map((health1Range, index) => ( + { name: "당뇨", position: { top: "50px", left: "9px" } }, + { name: "근손실", position: { top: "50px", left: "190px" } }, + { name: "비만", position: { top: "250px", left: "9px" } }, + { name: "고혈압", position: { top: "250px", left: "190px" } }, + ].map((item, index) => ( handleBoxClick(index)} + style={{ + position: "absolute", + top: item.position.top, + left: item.position.left, + }} > - {health1Range} + {item.name} @@ -83,7 +91,7 @@ const Info3 = () => { id="next" src={`${process.env.PUBLIC_URL}/logo/next.svg`} alt="next" - onClick={goMain} + onClick={goInfo4} /> diff --git a/customfront/src/page/login.jsx b/customfront/src/page/login.jsx index e69de29bb..89a787fcb 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(`/main2`); + } 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/main2.jsx b/customfront/src/page/main2.jsx index c78fbef12..21ef9a2e1 100644 --- a/customfront/src/page/main2.jsx +++ b/customfront/src/page/main2.jsx @@ -1,55 +1,249 @@ -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 goMain = () => { - navigate(`/`); + 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 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 [isChecked, setIsChecked] = useState(false); + 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 toggleCheckbox = () => { - setIsChecked(!isChecked); + 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([]); + } }; - // 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)); + }; + + 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); + } }; - // Box2의 모든 아이템 삭제 함수 - const clearBox2Items = () => { - setBox2Items([]); + 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); + try { + const cartResponse = await axiosInstance.get("customFit/cart/"); + if (cartResponse.data.length === 0) { + setError( + new Error("카트에 상품이 없습니다. 상품을 추가한 후 비교해 주세요.") + ); + 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); + } + }; + + if (loading) { + return
Loading...
; + } + + if (error) { + return
Error: {error.message}
; + } + return ( @@ -70,7 +264,7 @@ const Main2 = () => { src={`${process.env.PUBLIC_URL}/logo/ylogo.svg`} alt="logo" width="40px" - onClick={goMain} + onClick={() => navigate("/")} /> { - + 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,38 +365,36 @@ const Main2 = () => { 맞춤 건강 키트 - - - {box2Items.map((item) => ( - - - {item.name} - - delbutton deleteItemFromBox2(item.id)} // 개별 아이템 삭제 - /> - - - + + + {selectedItems.map((item) => ( + + {item.product_name} + + 삭제 버튼 deleteSelectedItem(item.product_id)} + /> + + ))} - + trash - - + + 비교하기 diff --git a/customfront/src/page/main3.jsx b/customfront/src/page/main3.jsx index 2713c1bfd..55f1c30b9 100644 --- a/customfront/src/page/main3.jsx +++ b/customfront/src/page/main3.jsx @@ -1,9 +1,23 @@ -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 * as z from "../style/styledmain3"; const Main3 = () => { const navigate = useNavigate(); + const location = useLocation(); + const { recommendedProduct } = location.state || {}; // 추천 상품 정보 가져오기 + + const [rating, setRating] = useState(0); + const [firstName, setFirstName] = useState(""); // 사용자 이름 상태 추가 + + useEffect(() => { + // 로컬 스토리지에서 first_name 가져오기 + const storedFirstName = localStorage.getItem('first_name'); + console.log("로컬 스토리지에서 가져온 first_name:", storedFirstName); // 콘솔 로그 추가 + if (storedFirstName) { + setFirstName(storedFirstName); + } + }, []); const goMain = () => { navigate(`/`); @@ -13,8 +27,6 @@ const Main3 = () => { navigate(`/Reviewcheck3`); }; - const [rating, setRating] = useState(0); - const handleStarClick = (value) => { setRating(value); }; @@ -72,7 +84,7 @@ const Main3 = () => { - 000님의 건강 기준에 + {firstName ? `${firstName}님의 건강 기준에` : "회원님의 건강 기준에"}
가장 적합한 제품이에요! @@ -81,9 +93,9 @@ const Main3 = () => { - 제품명입니다 + {recommendedProduct?.product_name || "제품명입니다"} 당류함량 - Ng + {recommendedProduct?.protein || "제품명입니다"}g 선택하신 제품들 중 당류 함량이 가장 낮아요. [당뇨]를 선택한 다른 회원들의 의견이에요! @@ -106,28 +118,28 @@ const Main3 = () => { 맞춤의 추천 서비스에 만족하시나요? - 만족도를 체크해 주시면, 추천 알고리즘을 정비하는 데 도움이 돼요! + 만족도를 체크해 주시면, 추천 알고리즘을 정비하는 데 도움이 돼요!
- ㅇㅇㅇ님의 만족도에 기반하여 더 좋은 서비스를 제공할게요! + {firstName ? `${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" }} + /> + ))} - 만족도 결과 보내기 + 만족도 결과 보내기 diff --git a/customfront/src/page/membership.jsx b/customfront/src/page/membership.jsx index e0912fb14..f71aeba32 100644 --- a/customfront/src/page/membership.jsx +++ b/customfront/src/page/membership.jsx @@ -1,21 +1,110 @@ -import React from "react"; +import React, { useState } from "react"; import { useNavigate } from "react-router-dom"; +import axios from "axios"; import * as s from "../style/styledmembership"; 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 goHome = () => { - navigate(-1); + 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 => { + console.log(`Field ${e.target.name} changed to:`, e.target.value); + setFormData({ ...formData, [e.target.name]: e.target.value }); }; + + const onSubmit = async e => { + e.preventDefault(); + console.log("폼 제출됨"); + console.log("Current formData:", formData); + + if (password !== password_confirm) { + alert("비밀번호가 일치하지 않습니다"); + return; + } + + try { + const config = { + headers: { + 'Content-Type': 'application/json' + } + }; + const body = JSON.stringify(formData); + console.log("Sending request with body:", body); + + const res = await axios.post('http://127.0.0.1:8000/register/step1/', body, config); + const { first_name } = res.data; // 회원가입 응답에서 first_name 추출 + localStorage.setItem('first_name', first_name); // 로컬 스토리지에 저장 + navigate('/dashboard'); + console.log('회원가입 성공:', res.data); + //navigate(-1); + } catch (err) { + console.error("Error during axios request:", err); + if (err.response && err.response.data) { + if (err.response.data.username) { + alert("이미 사용 중인 사용자 이름입니다."); + console.error("Username 오류:", err.response.data.username); + } else { + alert("회원가입 실패: " + JSON.stringify(err.response.data)); + console.error("회원가입 실패:", err.response.data); + } + } else { + alert("서버와의 통신 오류: " + err.message); + console.error("서버와의 통신 오류:", err.message); + } + } + }; + return ( back button { }} onClick={() => navigate(-1)} /> - @@ -37,95 +120,132 @@ const Membership = () => { - - - 중복확인 - - - 아이디 - - - - - 비밀번호 - - - - - 비밀번호 확인하기 - - - - - 이름 - - - - - 이메일 - - - - - 약관 - - - - checkbox + * 아이디 + + -
전체 동의하기
- - - checkbox + + * 비밀번호 + + -
(필수) 개인회원 약관에 동의
- - - checkbox + + * 비밀번호 확인하기 + + -
(필수) 개인정보 수집 및 이용에 동의
- - - checkbox -
(선택) 이메일 등 마케팅 정보 수신 동의
- - - - - 🔥 회원 정보 저장하고 키워드 선택하기 - + + + * 이름 + + + + + * Email + + + + + 약관 + + + + 전체 동의하기 + + + + + + + + + + + + + + + + 🔥 회원 정보 저장하고 키워드 선택하기 + + ); }; - -export default Membership; \ No newline at end of file +export default Membership; diff --git a/customfront/src/style/styledalarm1.jsx b/customfront/src/style/styledalarm1.jsx index 58ed13096..e021629a5 100644 --- a/customfront/src/style/styledalarm1.jsx +++ b/customfront/src/style/styledalarm1.jsx @@ -12,10 +12,14 @@ 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; } @@ -68,7 +72,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; `; @@ -143,49 +147,49 @@ export const Button2 = styled.div` `; // 드롭다운 메뉴 스타일 - -export const DropdownContainer = styled.div` - position: relative; /* Container를 기준으로 위치 */ -`; - export const Backdrop = styled.div` - position: absolute; + position: fixed; top: 0; left: 0; - width: 393px; - height: 852px; + width: 100%; + height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 1; `; export const DropdownMenu = styled.div` - position: absolute; - top: 80px; - right: 20px; + position: fixed; /* 헤더 기준으로 고정 */ + top: 80px; /* 헤더 바로 아래에 위치 */ + left: 70%; + 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` @@ -200,9 +204,5 @@ export const DropdownItem = styled.button` border-radius: 50%; transition: background-color 0.3s ease; - &:hover { - background-color: #f0f0f0; - } -`; - +`; diff --git a/customfront/src/style/styledinfo3.jsx b/customfront/src/style/styledinfo3.jsx index 50b94e7cb..93358de1c 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 e69de29bb..eb05315fb 100644 --- a/customfront/src/style/styledlogin.jsx +++ b/customfront/src/style/styledlogin.jsx @@ -0,0 +1,137 @@ +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/styledmain2.jsx b/customfront/src/style/styledmain2.jsx index 4fd021dc5..51c737d05 100644 --- a/customfront/src/style/styledmain2.jsx +++ b/customfront/src/style/styledmain2.jsx @@ -4,9 +4,10 @@ export const Container = styled.div` position: relative; margin: 0 auto; width: 393px; - height: 924px; + height: 1093px; margin-top: 0px; background: #fff; + text-align: center; `; export const Header = styled.div` @@ -130,6 +131,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 +191,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 +201,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 +324,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` @@ -327,3 +389,53 @@ 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; /* 아이템 간 간격 조정 */ +`; + diff --git a/customfront/src/style/styledmembership.jsx b/customfront/src/style/styledmembership.jsx index ede71ecaa..613f97af9 100644 --- a/customfront/src/style/styledmembership.jsx +++ b/customfront/src/style/styledmembership.jsx @@ -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; @@ -143,7 +115,7 @@ export const Bottom = styled.div` margin-top: 10px; margin-left: 30px; width: 330px; - height: 138px; + height: 190px; flex-shrink: 0; border-radius: 10px; border: 0.3px solid #000; @@ -151,28 +123,21 @@ 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; + background: none; 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; + margin-left: 25px; + + 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,17 +145,18 @@ 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; + display: flex; + position: relative; color: #000; text-align: center; + align-items: center; + justify-content: center; font-family: "Gothic A1"; - font-size: 15px; + font-size: 18px; font-style: normal; font-weight: 550; line-height: normal; diff --git a/customfront/src/style/styledmypage.jsx b/customfront/src/style/styledmypage.jsx index 5a70a2d72..98f1aad5d 100644 --- a/customfront/src/style/styledmypage.jsx +++ b/customfront/src/style/styledmypage.jsx @@ -7,7 +7,6 @@ export const Container = styled.div` height: 924px; background: #fff; `; -//1 export const Header = styled.div` position: fixed; From a840a348734a5c7c3d935f6f01a6923da78e12a5 Mon Sep 17 00:00:00 2001 From: minyeong3201 <164001002+minyeong3201@users.noreply.github.com> Date: Sat, 3 Aug 2024 11:50:45 +0900 Subject: [PATCH 2/7] [11:50]a.m. --- customfront/src/page/review.jsx | 111 +++++++++++++++---- customfront/src/page/reviewcheck1.jsx | 90 ++++++++++----- customfront/src/page/reviewcheck2.jsx | 76 ++++++++++--- customfront/src/page/reviewcheck3.jsx | 93 +++++++++++----- customfront/src/style/styledreview.jsx | 2 +- customfront/src/style/styledreviewcheck1.jsx | 2 +- customfront/src/style/styledreviewcheck3.jsx | 70 +++--------- 7 files changed, 295 insertions(+), 149 deletions(-) diff --git a/customfront/src/page/review.jsx b/customfront/src/page/review.jsx index 85fba3617..c2cff1d51 100644 --- a/customfront/src/page/review.jsx +++ b/customfront/src/page/review.jsx @@ -1,26 +1,86 @@ -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 [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 [userName, setUserName] = useState(""); // 사용자 이름 상태 const goMain = () => { navigate(`/`); }; 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); + }; + + 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); + + // 사용자 데이터 가져오기 + const userResponse = await axios.get('http://127.0.0.1:8000/myPage/user/', config); // 사용자 정보 API 엔드포인트 + setUserName(userResponse.data.first_name); // 사용자 이름 저장 + + 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}
; + } return ( @@ -80,7 +140,7 @@ const Review = () => { 후기를 작성할 제품을 선택해 주세요. {box2Items.map((item) => ( - + setSelectedProduct(item)}> {item.name} @@ -90,27 +150,40 @@ const Review = () => { - 김세모님!
- [제품명]은 어떠셨어요? + {userName}님!
+ {selectedProduct ? `[${selectedProduct.name}]은 어떠셨어요?` : '[제품명]은 어떠셨어요?'} handleImageClick('good')} /> handleImageClick('bad')} /> - + setReviewText(e.target.value)} + /> @@ -121,4 +194,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 c2fadb7fc..c498e45f7 100644 --- a/customfront/src/page/reviewcheck1.jsx +++ b/customfront/src/page/reviewcheck1.jsx @@ -1,26 +1,60 @@ -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 e from "../style/styledreviewcheck1"; const Reviewcheck1 = () => { const navigate = useNavigate(); + const location = useLocation(); + const { product, review, selectedImage } = location.state || {}; // selectedImage 추가 + const [productData, setProductData] = useState(null); + + 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 goMain = () => { navigate(`/`); }; const goReviewcheck2 = () => { - navigate(`/Reviewcheck2`); + if (product && review && selectedImage) { + navigate(`/Reviewcheck2`, { state: { product, review, selectedImage } }); + } else { + alert("제품 정보나 리뷰가 없습니다."); + } }; - // 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: "텍스트 리뷰입니다." } - ]; + if (!product || !review) { + return
Error: 제품 정보나 리뷰가 없습니다.
; + } return ( @@ -80,22 +114,24 @@ const Reviewcheck1 = () => { - {box2Items.map((item) => ( - - - {item.name} - {item.text} - - good - - - - ))} + + + [{product.name}] + {review} + + {selectedImage + + + diff --git a/customfront/src/page/reviewcheck2.jsx b/customfront/src/page/reviewcheck2.jsx index 7ae7a9c02..29e46ed46 100644 --- a/customfront/src/page/reviewcheck2.jsx +++ b/customfront/src/page/reviewcheck2.jsx @@ -1,20 +1,60 @@ -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 location = useLocation(); + const { product, review, selectedImage } = location.state || {}; // selectedImage 추가 + const [productData, setProductData] = useState(null); + + 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 goMain = () => { 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 ( @@ -68,12 +108,16 @@ const Reviewcheck2 = () => { - [제품명] + [{product.name}] good @@ -82,13 +126,11 @@ const Reviewcheck2 = () => { - {box2Items.map((item) => ( - - - {item.text} - - - ))} + + + {review} + + @@ -100,4 +142,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 8a17056f3..ef49a9113 100644 --- a/customfront/src/page/reviewcheck3.jsx +++ b/customfront/src/page/reviewcheck3.jsx @@ -1,26 +1,66 @@ -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 location = useLocation(); + const { product, review } = location.state || {}; + const [newReview, setNewReview] = useState(review); const goMain = () => { navigate(`/`); }; - const goReviewcheck1 = () => { - navigate(`/Reviewcheck1`); + const goReviewcheck2 = () => { + // reviewcheck2로 이동하며 현재 제품 정보와 수정된 리뷰를 전달 + if (product && newReview) { + navigate(`/Reviewcheck2`, { state: { product, review: newReview } }); + } 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 handleReviewChange = (e) => { + setNewReview(e.target.value); + }; + + 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 + }; + + await axios.patch(`http://127.0.0.1:8000/myPage/recommended-products/${product.id}/edit/`, body, config); + + // 리뷰 저장 후 Reviewcheck1으로 이동하며 수정된 리뷰를 전달 + navigate(`/Reviewcheck1`, { state: { product, review: newReview } }); + } catch (err) { + if (err.message === "No token found") { + alert("토큰이 없습니다. 로그인이 필요합니다."); + navigate("/login"); + } else { + console.error("An error occurred:", err.message); + } + } + }; return ( @@ -76,22 +116,10 @@ const Reviewcheck3 = () => { 리뷰 작성하기 - - 후기를 작성할 제품을 선택해 주세요. - - {box2Items.map((item) => ( - - - {item.name} - - - ))} - - 김세모님!
- [제품명]은 어떠셨어요? + [{product.name}]은 어떠셨어요? @@ -110,15 +138,24 @@ const Reviewcheck3 = () => { - + - + 저장하기 + + + 수정 취소하기 + ); }; -export default Reviewcheck3; +export default Reviewcheck3; \ No newline at end of file diff --git a/customfront/src/style/styledreview.jsx b/customfront/src/style/styledreview.jsx index 5e1cb3c75..cdb03ea0d 100644 --- a/customfront/src/style/styledreview.jsx +++ b/customfront/src/style/styledreview.jsx @@ -202,4 +202,4 @@ export const ButtonText = styled.div` font-style: normal; font-weight: 500; line-height: normal; -`; +`; \ No newline at end of file diff --git a/customfront/src/style/styledreviewcheck1.jsx b/customfront/src/style/styledreviewcheck1.jsx index c53e0e599..7c70d21d7 100644 --- a/customfront/src/style/styledreviewcheck1.jsx +++ b/customfront/src/style/styledreviewcheck1.jsx @@ -167,4 +167,4 @@ export const ButtonText = styled.div` font-style: normal; font-weight: 500; line-height: normal; -`; +`; \ No newline at end of file diff --git a/customfront/src/style/styledreviewcheck3.jsx b/customfront/src/style/styledreviewcheck3.jsx index 5e1cb3c75..9603d86ae 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; @@ -193,6 +138,19 @@ export const Button = styled.div` cursor: pointer; `; +export const ButtonTwo = styled.div` + margin-top: 20px; + margin-left: 30px; + width: 85%; + height: 30px; + 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 ButtonText = styled.div` margin-top: 5px; color: #000; @@ -202,4 +160,4 @@ export const ButtonText = styled.div` font-style: normal; font-weight: 500; line-height: normal; -`; +`; \ No newline at end of file From 7e3c334054ab08bb99c2cf8a4efa984824923437 Mon Sep 17 00:00:00 2001 From: minyeong3201 <164001002+minyeong3201@users.noreply.github.com> Date: Sat, 3 Aug 2024 12:01:35 +0900 Subject: [PATCH 3/7] [12:01]p.m. --- customfront/src/style/styledreviewcheck3.jsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/customfront/src/style/styledreviewcheck3.jsx b/customfront/src/style/styledreviewcheck3.jsx index 9603d86ae..16023c1db 100644 --- a/customfront/src/style/styledreviewcheck3.jsx +++ b/customfront/src/style/styledreviewcheck3.jsx @@ -160,4 +160,5 @@ export const ButtonText = styled.div` font-style: normal; font-weight: 500; line-height: normal; -`; \ No newline at end of file +`; +//1 \ No newline at end of file From 3b28a9a2f015d219f24b1d53ba32bcc46194c999 Mon Sep 17 00:00:00 2001 From: minyeong3201 <164001002+minyeong3201@users.noreply.github.com> Date: Sat, 3 Aug 2024 14:38:18 +0900 Subject: [PATCH 4/7] [2:38]p.m. --- customfront/src/page/main2.jsx | 35 ++++++++++++++++++----------- customfront/src/page/membership.jsx | 6 ++--- 2 files changed, 25 insertions(+), 16 deletions(-) diff --git a/customfront/src/page/main2.jsx b/customfront/src/page/main2.jsx index 21ef9a2e1..a0061ef95 100644 --- a/customfront/src/page/main2.jsx +++ b/customfront/src/page/main2.jsx @@ -12,6 +12,7 @@ const Main2 = () => { const [searchQuery, setSearchQuery] = useState(""); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); + const [cartError, setCartError] = useState(null); // New state for cart validation error const axiosInstance = axios.create({ baseURL: "http://127.0.0.1:8000/", @@ -142,7 +143,8 @@ const Main2 = () => { })); const uniqueItems = newItems.filter( - (newItem) => !box2Items.some((boxItem) => boxItem.product_id === newItem.product_id) + (newItem) => + !box2Items.some((boxItem) => boxItem.product_id === newItem.product_id) ); try { @@ -160,20 +162,26 @@ const Main2 = () => { }; const deleteItemFromBox2 = (id) => { - setBox2Items((prevItems) => prevItems.filter((item) => item.product_id !== id)); + setBox2Items((prevItems) => + prevItems.filter((item) => item.product_id !== id) + ); }; 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") || "", + await axiosInstance.post( + "customFit/cart/clear/", + { + item_ids: itemIds, }, - }); + { + headers: { + "X-CSRFToken": localStorage.getItem("csrftoken") || "", + }, + } + ); } setBox2Items([]); console.log("Box2의 모든 상품이 카트에서 제거되었습니다."); @@ -212,13 +220,12 @@ const Main2 = () => { const handleCompare = async () => { setLoading(true); + setCartError(null); // Clear previous cart errors try { const cartResponse = await axiosInstance.get("customFit/cart/"); if (cartResponse.data.length === 0) { - setError( - new Error("카트에 상품이 없습니다. 상품을 추가한 후 비교해 주세요.") - ); - return; + setCartError("상품을 추가한 후 비교해 주세요."); + return; } const response = await axiosInstance.get("customFit/compare/"); @@ -397,9 +404,11 @@ const Main2 = () => { 비교하기 + {/* Display cart error message */} + {cartError &&
{cartError}
} ); }; -export default Main2; \ No newline at end of file +export default Main2; diff --git a/customfront/src/page/membership.jsx b/customfront/src/page/membership.jsx index f71aeba32..216559ea5 100644 --- a/customfront/src/page/membership.jsx +++ b/customfront/src/page/membership.jsx @@ -128,7 +128,7 @@ const Membership = () => { name="username" value={username} onChange={onChange} - placeholder="아이디를 입력해주세요." + placeholder="4~16자리 / 영문, 숫자, 특수문자 사용 가능" required /> @@ -140,7 +140,7 @@ const Membership = () => { name="password" value={password} onChange={onChange} - placeholder="비밀번호를 입력해주세요." + placeholder="8~16자리 / 영문, 숫자, 특수문자 조합" required /> @@ -152,7 +152,7 @@ const Membership = () => { name="password_confirm" value={password_confirm} onChange={onChange} - placeholder="비밀번호를 확인해주세요." + placeholder="8~16자리 / 영문, 숫자, 특수문자 조합" required /> From 9fad992494b629e2b735f93700b1292189c0d5d3 Mon Sep 17 00:00:00 2001 From: minyeong3201 <164001002+minyeong3201@users.noreply.github.com> Date: Sat, 3 Aug 2024 20:55:26 +0900 Subject: [PATCH 5/7] [8:55] --- customfront/public/logo/alarm2.svg | 9 ++ customfront/public/logo/alarm3.svg | 9 ++ customfront/public/logo/card1.svg | 9 ++ customfront/public/logo/card2.svg | 9 ++ customfront/public/logo/card3.svg | 9 ++ customfront/public/logo/card4.svg | 9 ++ customfront/src/App.js | 6 + customfront/src/page/alarm1.jsx | 34 +++--- customfront/src/page/alarm2.jsx | 34 ++++-- customfront/src/page/alarm3.jsx | 139 ++++++++++++++++++++++ customfront/src/page/first.jsx | 14 ++- customfront/src/page/info1.jsx | 115 ++++++++++++++---- customfront/src/page/main2.jsx | 145 ++++++++++++++++++++++- customfront/src/page/main3.jsx | 87 ++++++++++++-- customfront/src/page/membership.jsx | 111 ++++++++++------- customfront/src/page/pwchange.jsx | 17 +-- customfront/src/style/styledalarm1.jsx | 2 +- customfront/src/style/styledalarm2.jsx | 13 +- customfront/src/style/styledalarm3.jsx | 141 ++++++++++++++++++++++ customfront/src/style/styledfirst.jsx | 15 +-- customfront/src/style/styledinfo1.jsx | 6 +- customfront/src/style/styledmain2.jsx | 62 ++++++++++ customfront/src/style/styledmain3.jsx | 1 + customfront/src/style/styledpwchange.jsx | 37 ++++++ 24 files changed, 898 insertions(+), 135 deletions(-) create mode 100644 customfront/public/logo/alarm2.svg create mode 100644 customfront/public/logo/alarm3.svg create mode 100644 customfront/public/logo/card1.svg create mode 100644 customfront/public/logo/card2.svg create mode 100644 customfront/public/logo/card3.svg create mode 100644 customfront/public/logo/card4.svg create mode 100644 customfront/src/page/alarm3.jsx create mode 100644 customfront/src/style/styledalarm3.jsx diff --git a/customfront/public/logo/alarm2.svg b/customfront/public/logo/alarm2.svg new file mode 100644 index 000000000..e8800da7e --- /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 000000000..d0cdc1ea3 --- /dev/null +++ b/customfront/public/logo/alarm3.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/customfront/public/logo/card1.svg b/customfront/public/logo/card1.svg new file mode 100644 index 000000000..f35994d8c --- /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 000000000..4e1d488a4 --- /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 000000000..7465c5613 --- /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 000000000..554f45ed1 --- /dev/null +++ b/customfront/public/logo/card4.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/customfront/src/App.js b/customfront/src/App.js index 1c13acd28..f8d361171 100644 --- a/customfront/src/App.js +++ b/customfront/src/App.js @@ -11,6 +11,7 @@ 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'; @@ -19,8 +20,10 @@ import Changeinfo1 from './page/changeinfo1'; import Changeinfo4 from './page/changeinfo4'; import Changeinfo5 from './page/changeinfo5'; import Mypage from './page/mypage'; +import Pwchange from './page/pwchange'; import Alarm1 from './page/alarm1'; import Alarm2 from './page/alarm2'; +import Alarm3 from './page/alarm3'; import './App.css'; import './index.css'; @@ -40,6 +43,7 @@ function App() { } /> } /> } /> + } /> } /> } /> } /> @@ -48,8 +52,10 @@ function App() { } /> } /> } /> + } /> } /> } /> + } /> diff --git a/customfront/src/page/alarm1.jsx b/customfront/src/page/alarm1.jsx index 28dad1fc8..2a916c3b0 100644 --- a/customfront/src/page/alarm1.jsx +++ b/customfront/src/page/alarm1.jsx @@ -2,10 +2,6 @@ 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); @@ -26,6 +22,14 @@ const Alarm1 = () => { navigate(`/Login`); }; + const goAlarm2 = () => { + navigate(`/Alarm2`); + }; + + const goAlarm3 = () => { + navigate(`/Alarm3`); + }; + const toggleMenu = () => { setIsMenuOpen(!isMenuOpen); }; @@ -38,16 +42,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 ( @@ -170,15 +175,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 6c736d82b..4490f5174 100644 --- a/customfront/src/page/alarm2.jsx +++ b/customfront/src/page/alarm2.jsx @@ -10,6 +10,10 @@ const Alarm2 = () => { navigate(`/`); }; + const goChangeinfo = () => { + navigate(`/changeinfo`); + }; + const toggleMenu = () => { setIsMenuOpen(!isMenuOpen); }; @@ -69,6 +73,26 @@ const Alarm2 = () => { + + + alarm2 + + + + + + 키워드 변경하러 가기 + + + {isMenuOpen && ( <> @@ -118,16 +142,6 @@ const Alarm2 = () => { )} - - - - - - - - 키워드 변경하러 가기 - - ); }; diff --git a/customfront/src/page/alarm3.jsx b/customfront/src/page/alarm3.jsx new file mode 100644 index 000000000..2d7dd8f5f --- /dev/null +++ b/customfront/src/page/alarm3.jsx @@ -0,0 +1,139 @@ +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 goMain = () => { + navigate(`/`); + }; + + 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/first.jsx b/customfront/src/page/first.jsx index 1e32977f9..9f386a5d7 100644 --- a/customfront/src/page/first.jsx +++ b/customfront/src/page/first.jsx @@ -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 > @@ -105,6 +105,7 @@ const First = () => { id="text2" src={`${process.env.PUBLIC_URL}/logo/text2.svg`} alt="text2" + height="260px" /> @@ -143,17 +144,22 @@ const First = () => { card card card + card diff --git a/customfront/src/page/info1.jsx b/customfront/src/page/info1.jsx index ba77589ac..49bb13e51 100644 --- a/customfront/src/page/info1.jsx +++ b/customfront/src/page/info1.jsx @@ -1,18 +1,90 @@ -import React, { useState } from "react"; +import React, { useState, useEffect } from "react"; import { useNavigate } from "react-router-dom"; +import axios from "axios"; import * as b from "../style/styledinfo1"; +axios.defaults.withCredentials = true; + const Info1 = () => { const navigate = useNavigate(); - const [selectedBox, setSelectedBox] = useState(null); // 클릭된 박스의 인덱스를 관리 + const [selectedBox, setSelectedBox] = useState(null); + const [errors, setErrors] = useState(null); - const goMain = () => { - navigate(`/`); - }; + const ageRanges = [ + { label: "19세 이하", value: "under_19" }, + { label: "20~29세", value: "20-29" }, + { label: "30~39세", value: "30-39" }, + { label: "40~49세", value: "40-49" }, + { label: "50~59세", value: "50-59" }, + { label: "60~69세", value: "60-69" }, + { label: "70세 이상", value: "over_70" }, + ]; - // 클릭된 박스의 상태를 업데이트하는 함수 const handleBoxClick = (index) => { - setSelectedBox(index); // 클릭된 박스의 인덱스를 상태로 저장 + setSelectedBox(index); + }; + + useEffect(() => { + const getSessionData = async () => { + try { + const response = await axios.get( + "http://127.0.0.1:8000/register/session/" + ); + const { session_data } = response.data; + console.log("Current session data:", session_data); + const { age } = session_data; + if (age) { + const index = ageRanges.map((a) => a.value).indexOf(age); + setSelectedBox(index); + } + } catch (error) { + console.error("Error fetching session data:", error); + } + }; + + getSessionData(); + }, []); + + const onSubmit = async () => { + if (selectedBox === null) { + setErrors("연령대를 선택해 주세요."); + return; + } + + const age = ageRanges[selectedBox].value; + + try { + const csrfToken = document.cookie + .split("; ") + .find((row) => row.startsWith("csrftoken=")) + ?.split("=")[1]; + + const config = { + headers: { + "Content-Type": "application/json", + "X-CSRFToken": csrfToken, + }, + }; + + const body = JSON.stringify({ age }); + + const res = await axios.put( + "http://127.0.0.1:8000/register/step2/", + body, + config, + { withCredentials: true } + ); + console.log("회원가입 2단계 성공:", res.data); + console.log("Updated session data:", res.data.session_data); + navigate("/info2"); + } catch (err) { + if (err.response && err.response.data) { + const serverErrors = err.response.data; + setErrors(serverErrors.detail ? serverErrors.detail : serverErrors); + } else { + console.error("Error during axios request:", err); + } + } }; return ( @@ -43,8 +115,13 @@ const Info1 = () => { 키워드 선택 - 을 진행해 주세요!
- 키워드 선택이 완료되어야 다음 단계로 이동이 가능합니다. + 을 진행해 주세요! +
+ + 키워드 선택이 완료되어야 다음 단계로 이동이 가능합니다. + @@ -57,22 +134,14 @@ const Info1 = () => { - {[ - "19세 이하", - "20~29세", - "30~39세", - "40~49세", - "50~59세", - "60~69세", - "70세 이상", - ].map((ageRange, index) => ( + {ageRanges.map((ageRange, index) => ( handleBoxClick(index)} // 클릭 시 상태 업데이트 + $isclicked={selectedBox === index} + onClick={() => handleBoxClick(index)} > - {ageRange} + {ageRange.label} @@ -80,12 +149,14 @@ const Info1 = () => { + {errors &&
{errors}
} + next diff --git a/customfront/src/page/main2.jsx b/customfront/src/page/main2.jsx index a0061ef95..e349ae497 100644 --- a/customfront/src/page/main2.jsx +++ b/customfront/src/page/main2.jsx @@ -5,14 +5,69 @@ 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); // 에러 메시지 설정 + } + }; + + // 컴포넌트가 마운트될 때 사용자 정보를 가져옵니다. + 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); // New state for cart validation error + const [cartError, setCartError] = useState(null); const axiosInstance = axios.create({ baseURL: "http://127.0.0.1:8000/", @@ -220,7 +275,7 @@ const Main2 = () => { const handleCompare = async () => { setLoading(true); - setCartError(null); // Clear previous cart errors + setCartError(null); try { const cartResponse = await axiosInstance.get("customFit/cart/"); if (cartResponse.data.length === 0) { @@ -243,6 +298,15 @@ const Main2 = () => { } }; + const handleLogout = () => { + // 여기서 로그아웃 관련 상태 관리 또는 API 호출 + // 예를 들어, `localStorage`에서 사용자 정보를 제거합니다. + localStorage.removeItem('user'); // 사용자의 로그인 상태 정보 제거 + + console.log("로그아웃 성공"); + navigate('/Login'); // 로그인 페이지로 이동 + }; + if (loading) { return
Loading...
; } @@ -251,6 +315,14 @@ const Main2 = () => { return
Error: {error.message}
; } + if (userError) { // 사용자 정보 에러가 있는 경우 + return
Error: {userError}
; + } + + if (!userInfo) { + return
Loading...
; + } + return ( @@ -295,15 +367,77 @@ const Main2 = () => { left: "8px", cursor: "pointer", }} - onClick={() => navigate(-1)} + onClick={toggleMenu} />
+ {isMenuOpen && ( + <> + + + + mypage + + + myreview + + + mainpage + + { handleLogout(); toggleMenu(); }}> + logout + + + + )} + - 000님에게 맞는
+ {userInfo.first_name}님에게 맞는
식품을 찾아볼까요? @@ -404,11 +538,10 @@ const Main2 = () => { 비교하기 - {/* Display cart error message */} {cartError &&
{cartError}
} ); }; -export default Main2; +export default Main2; \ No newline at end of file diff --git a/customfront/src/page/main3.jsx b/customfront/src/page/main3.jsx index 55f1c30b9..9d6489a6d 100644 --- a/customfront/src/page/main3.jsx +++ b/customfront/src/page/main3.jsx @@ -1,5 +1,6 @@ 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 = () => { @@ -9,16 +10,44 @@ const Main3 = () => { const [rating, setRating] = useState(0); const [firstName, setFirstName] = useState(""); // 사용자 이름 상태 추가 + const [userInfo, setUserInfo] = useState(null); // 사용자 정보 상태 추가 + const [userError, setUserError] = useState(null); // 사용자 정보 에러 상태 추가 useEffect(() => { // 로컬 스토리지에서 first_name 가져오기 - const storedFirstName = localStorage.getItem('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 goMain = () => { navigate(`/`); }; @@ -31,6 +60,40 @@ const Main3 = () => { 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 ( @@ -84,21 +147,19 @@ const Main3 = () => { - {firstName ? `${firstName}님의 건강 기준에` : "회원님의 건강 기준에"} + {userInfo.first_name}님의 건강 기준에
가장 적합한 제품이에요! - #당뇨 - #당류 싫어 + #{getDiseaseName(userInfo.disease)} {recommendedProduct?.product_name || "제품명입니다"} - 당류함량 + {getStextLabel(userInfo.disease)} {recommendedProduct?.protein || "제품명입니다"}g - 선택하신 제품들 중 당류 함량이 가장 낮아요. - [당뇨]를 선택한 다른 회원들의 의견이에요! + [{getDiseaseName(userInfo.disease)}] 선택한 다른 회원들의 의견이에요! @@ -120,7 +181,8 @@ const Main3 = () => { 만족도를 체크해 주시면, 추천 알고리즘을 정비하는 데 도움이 돼요!
- {firstName ? `${firstName}님의 만족도에 기반하여` : "회원님의 만족도에 기반하여"} 더 좋은 서비스를 제공할게요! + {firstName}님의 만족도에 기반하여 + 더 좋은 서비스를 제공할게요! {[1, 2, 3, 4, 5].map((value) => ( @@ -134,7 +196,12 @@ const Main3 = () => { } onClick={() => handleStarClick(value)} alt={`별 ${value}개`} - style={{ cursor: "pointer", width: "44px", height: "43px", margin: "2px" }} + style={{ + cursor: "pointer", + width: "44px", + height: "43px", + margin: "2px", + }} /> ))} @@ -146,4 +213,4 @@ const Main3 = () => { ); }; -export default Main3; +export default Main3; \ No newline at end of file diff --git a/customfront/src/page/membership.jsx b/customfront/src/page/membership.jsx index 216559ea5..82028c1d0 100644 --- a/customfront/src/page/membership.jsx +++ b/customfront/src/page/membership.jsx @@ -1,8 +1,10 @@ +import axios from "axios"; import React, { useState } from "react"; import { useNavigate } from "react-router-dom"; -import axios from "axios"; import * as s from "../style/styledmembership"; +axios.defaults.withCredentials = true; + const Membership = () => { const navigate = useNavigate(); const [formData, setFormData] = useState({ @@ -16,6 +18,7 @@ const Membership = () => { terms_accepted_2: false, terms_accepted_optional: false, }); + const [errors, setErrors] = useState({}); // 에러메시지 관리 const { username, @@ -29,7 +32,6 @@ const Membership = () => { terms_accepted_optional, } = formData; - // 전체 동의하기 클릭 시 호출되는 함수 const handleCheckAll = () => { const newValue = !formData.terms_accepted; setFormData({ @@ -41,7 +43,6 @@ const Membership = () => { }); }; - // 약관 체크박스 클릭 시 호출되는 함수 const toggleOptionalCheckbox = () => { const newValue = !formData.terms_accepted_optional; setFormData({ @@ -50,60 +51,68 @@ const Membership = () => { }); }; - const onChange = e => { - console.log(`Field ${e.target.name} changed to:`, e.target.value); + const onChange = (e) => { setFormData({ ...formData, [e.target.name]: e.target.value }); }; - - const onSubmit = async e => { - e.preventDefault(); - console.log("폼 제출됨"); - console.log("Current formData:", formData); - - if (password !== password_confirm) { - alert("비밀번호가 일치하지 않습니다"); - return; + + 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(); const config = { headers: { - 'Content-Type': 'application/json' - } + "Content-Type": "application/json", + "X-CSRFToken": csrfToken, + }, + withCredentials: true, }; const body = JSON.stringify(formData); - console.log("Sending request with body:", body); - - const res = await axios.post('http://127.0.0.1:8000/register/step1/', body, config); - const { first_name } = res.data; // 회원가입 응답에서 first_name 추출 - localStorage.setItem('first_name', first_name); // 로컬 스토리지에 저장 - navigate('/dashboard'); - console.log('회원가입 성공:', res.data); - //navigate(-1); + + 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); // 세션 쿠키 확인 + navigate("/info1"); } catch (err) { - console.error("Error during axios request:", err); if (err.response && err.response.data) { - if (err.response.data.username) { - alert("이미 사용 중인 사용자 이름입니다."); - console.error("Username 오류:", err.response.data.username); - } else { - alert("회원가입 실패: " + JSON.stringify(err.response.data)); - console.error("회원가입 실패:", err.response.data); + const serverErrors = err.response.data; + if ( + serverErrors.username && + serverErrors.username.includes( + "A user with that username already exists." + ) + ) { + serverErrors.username = ["중복된 아이디가 있습니다."]; } + setErrors(serverErrors); } else { - alert("서버와의 통신 오류: " + err.message); - console.error("서버와의 통신 오류:", err.message); + console.error("Error during axios request:", err); } } }; - return ( 뒤로 버튼 { name="username" value={username} onChange={onChange} - placeholder="4~16자리 / 영문, 숫자, 특수문자 사용 가능" + placeholder="아이디를 입력해주세요." required /> + {errors.username && ( +

{errors.username}

+ )} * 비밀번호 @@ -140,9 +152,12 @@ const Membership = () => { name="password" value={password} onChange={onChange} - placeholder="8~16자리 / 영문, 숫자, 특수문자 조합" + placeholder="비밀번호를 입력해주세요." required /> + {errors.password && ( +

{errors.password}

+ )} * 비밀번호 확인하기 @@ -152,9 +167,12 @@ const Membership = () => { name="password_confirm" value={password_confirm} onChange={onChange} - placeholder="8~16자리 / 영문, 숫자, 특수문자 조합" + placeholder="비밀번호를 확인해주세요." required /> + {errors.password_confirm && ( +

{errors.password_confirm}

+ )} * 이름 @@ -167,6 +185,9 @@ const Membership = () => { placeholder="이름을 입력해주세요." required /> + {errors.first_name && ( +

{errors.first_name}

+ )} * Email @@ -179,6 +200,7 @@ const Membership = () => { placeholder="Email을 입력해주세요." required /> + {errors.email &&

{errors.email}

} 약관 @@ -207,6 +229,9 @@ const Membership = () => { /> (필수) 개인회원 약관에 동의 + {errors.terms_accepted_1 && ( +

{errors.terms_accepted_1}

+ )} @@ -225,6 +250,9 @@ const Membership = () => { /> (필수) 개인정보 수집 및 이용에 동의 + {errors.terms_accepted_2 && ( +

{errors.terms_accepted_2}

+ )} @@ -237,6 +265,9 @@ const Membership = () => { /> (선택) 이메일 등 마케팅 정보 수신 동의 + {errors.terms_accepted_optional && ( +

{errors.terms_accepted_optional}

+ )} @@ -248,4 +279,4 @@ const Membership = () => { ); }; -export default Membership; +export default Membership; \ No newline at end of file diff --git a/customfront/src/page/pwchange.jsx b/customfront/src/page/pwchange.jsx index ba5cbbd0d..63790e897 100644 --- a/customfront/src/page/pwchange.jsx +++ b/customfront/src/page/pwchange.jsx @@ -5,8 +5,6 @@ import * as p from "../style/styledpwchange"; const Pwchange = () => { const navigate = useNavigate(); - - return ( @@ -57,28 +55,19 @@ const Pwchange = () => { - - - - - - 비밀번호 변경하기 - - + 계정 생성시 사용한 E Mail을 입력해주세요. - icon - + 더 많은 알림 확인하기 - ); }; -export default Pwchange; \ No newline at end of file +export default Pwchange; diff --git a/customfront/src/style/styledalarm1.jsx b/customfront/src/style/styledalarm1.jsx index e021629a5..7e20a43b8 100644 --- a/customfront/src/style/styledalarm1.jsx +++ b/customfront/src/style/styledalarm1.jsx @@ -84,7 +84,7 @@ export const Ybox = styled.div` align-items: center; text-align: flex-start; width: 393px; - height: 240px; + height: 190px; flex-shrink: 0; `; diff --git a/customfront/src/style/styledalarm2.jsx b/customfront/src/style/styledalarm2.jsx index 7b94c47b4..7175d549c 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 000000000..c64b05c03 --- /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/styledfirst.jsx b/customfront/src/style/styledfirst.jsx index c4b2274d8..9f53c0f34 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; @@ -141,7 +141,7 @@ export const News = styled.div` margin-top: 20px; flex-direction: row; width: 340px; - height: 280px; + height: 350px; gap: 7px; overflow-x: auto; overflow-y: hidden; @@ -157,14 +157,15 @@ export const News = styled.div` export const Card = styled.div` position: relative; margin-left: 5px; + 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 f00042020..5aa83ece3 100644 --- a/customfront/src/style/styledinfo1.jsx +++ b/customfront/src/style/styledinfo1.jsx @@ -110,13 +110,13 @@ export const SmallBox5 = styled.div` flex-shrink: 0; border-radius: 15px; border: 0.3px solid #000; - background: ${(props) => (props.isClicked ? "#fffba6" : "#fff")}; + background: ${(props) => (props.$isclicked ? "#fffba6" : "#fff")}; justify-content: center; align-items: center; text-align: center; cursor: pointer; filter: ${(props) => - props.isClicked ? "drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.25))" : "none"}; + props.$isclicked ? "drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.25))" : "none"}; transition: all 0.1s ease; span { margin-left: 10px; @@ -137,4 +137,4 @@ export const ButtonText = styled.div` font-style: normal; font-weight: 500; line-height: normal; -`; +`; \ No newline at end of file diff --git a/customfront/src/style/styledmain2.jsx b/customfront/src/style/styledmain2.jsx index 51c737d05..3fc4d2d5d 100644 --- a/customfront/src/style/styledmain2.jsx +++ b/customfront/src/style/styledmain2.jsx @@ -8,6 +8,7 @@ export const Container = styled.div` margin-top: 0px; background: #fff; text-align: center; + overflow: ${(props) => (props.isMenuOpen ? "hidden" : "auto")}; `; export const Header = styled.div` @@ -439,3 +440,64 @@ export const SelectedItem = styled.li` margin: 5px; /* 아이템 간 간격 조정 */ `; +// 드롭다운 메뉴 스타일 +export const Backdrop = styled.div` + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + z-index: 1; +`; + +export const DropdownMenu = styled.div` + position: fixed; /* 헤더 기준으로 고정 */ + top: 80px; /* 헤더 바로 아래에 위치 */ + left: 70%; + 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 156814243..d3de9732d 100644 --- a/customfront/src/style/styledmain3.jsx +++ b/customfront/src/style/styledmain3.jsx @@ -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; diff --git a/customfront/src/style/styledpwchange.jsx b/customfront/src/style/styledpwchange.jsx index 4511dac6a..8e26362eb 100644 --- a/customfront/src/style/styledpwchange.jsx +++ b/customfront/src/style/styledpwchange.jsx @@ -154,4 +154,41 @@ export const ButtonText = styled.div` line-height: 150%; /* 22.5px */ letter-spacing: -0.165px; cursor: pointer; +`; + +export const InputBlank = styled.div` + margin-top: 7px; + margin-left: 30px; + margin-bottom: 20px; + width: 328px; + 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: 15px; + margin-left: -30px; + 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 Label = styled.div` + display: flex; + margin-top: 15px; + margin-left: 15px; + color: #000; + font-size: 18px; + font-weight: 500; + padding-left: 20px; `; \ No newline at end of file From de4901c5dd95b692722663d8c9831fd6bce61f4a Mon Sep 17 00:00:00 2001 From: minyeong3201 <164001002+minyeong3201@users.noreply.github.com> Date: Sun, 4 Aug 2024 14:53:03 +0900 Subject: [PATCH 6/7] final --- customfront/public/logo/bad10.svg | 12 + customfront/public/logo/good10.svg | 12 + customfront/public/logo/keychange.svg | 8 + customfront/public/logo/lc.svg | 9 + customfront/public/logo/mypagebtn.svg | 24 ++ customfront/public/logo/myreviewbtn.svg | 24 ++ customfront/public/logo/plus.svg | 4 + customfront/public/logo/profile.svg | 14 + customfront/public/logo/pwchange.svg | 11 + customfront/public/logo/search3.svg | 21 ++ customfront/public/logo/success.svg | 9 + customfront/src/App.js | 13 +- customfront/src/page/alarm1.jsx | 20 +- customfront/src/page/changeinfo.jsx | 98 +++++- customfront/src/page/changeinfo1.jsx | 144 +++++--- customfront/src/page/changeinfo2.jsx | 193 ++++++++++- customfront/src/page/changeinfo3.jsx | 120 +++++-- customfront/src/page/changeinfo4.jsx | 139 +++++--- customfront/src/page/changeinfo5.jsx | 146 ++++++--- customfront/src/page/first.jsx | 8 +- customfront/src/page/info1.jsx | 236 ++++++------- customfront/src/page/info2.jsx | 148 +++++++-- customfront/src/page/info3.jsx | 148 +++++++-- customfront/src/page/info4.jsx | 158 +++++++-- customfront/src/page/info5.jsx | 165 ++++++++-- customfront/src/page/login.jsx | 2 +- customfront/src/page/login2.jsx | 125 +++++++ customfront/src/page/logincomplete.jsx | 35 ++ customfront/src/page/main0.jsx | 229 +++++++++++-- customfront/src/page/main2.jsx | 75 +++-- customfront/src/page/main3.jsx | 112 ++++++- customfront/src/page/main4.jsx | 2 - customfront/src/page/membership.jsx | 36 +- customfront/src/page/mypage.jsx | 310 ++++++++++++++---- customfront/src/page/pwchange.jsx | 57 +--- customfront/src/page/pwchange1.jsx | 50 +-- customfront/src/page/review.jsx | 176 ++++++++-- customfront/src/page/reviewcheck1.jsx | 219 +++++++++---- customfront/src/page/reviewcheck2.jsx | 102 +++++- customfront/src/page/reviewcheck3.jsx | 127 ++++++- customfront/src/style/styledalarm1.jsx | 44 +-- customfront/src/style/styledchangeinfo.jsx | 61 ++++ customfront/src/style/styledchangeinfo1.jsx | 60 ++++ customfront/src/style/styledchangeinfo2.jsx | 61 ++++ customfront/src/style/styledchangeinfo3.jsx | 61 ++++ customfront/src/style/styledchangeinfo4.jsx | 61 ++++ customfront/src/style/styledchangeinfo5.jsx | 60 ++++ customfront/src/style/styledfirst.jsx | 4 +- customfront/src/style/styledinfo1.jsx | 40 ++- customfront/src/style/styledlogin.jsx | 1 - customfront/src/style/styledlogin2.jsx | 114 +++++++ customfront/src/style/styledlogincomplete.jsx | 69 ++++ customfront/src/style/styledmain0.jsx | 125 ++++++- customfront/src/style/styledmain2.jsx | 31 +- customfront/src/style/styledmain3.jsx | 71 +++- customfront/src/style/styledmembership.jsx | 31 +- customfront/src/style/styledmypage.jsx | 138 ++++++-- customfront/src/style/styledpwchange.jsx | 97 +++--- customfront/src/style/styledpwchange1.jsx | 17 +- customfront/src/style/styledreview.jsx | 62 +++- customfront/src/style/styledreviewcheck1.jsx | 100 +++++- customfront/src/style/styledreviewcheck2.jsx | 71 +++- customfront/src/style/styledreviewcheck3.jsx | 100 +++++- 63 files changed, 4030 insertions(+), 990 deletions(-) create mode 100644 customfront/public/logo/bad10.svg create mode 100644 customfront/public/logo/good10.svg create mode 100644 customfront/public/logo/keychange.svg create mode 100644 customfront/public/logo/lc.svg create mode 100644 customfront/public/logo/mypagebtn.svg create mode 100644 customfront/public/logo/myreviewbtn.svg create mode 100644 customfront/public/logo/plus.svg create mode 100644 customfront/public/logo/profile.svg create mode 100644 customfront/public/logo/pwchange.svg create mode 100644 customfront/public/logo/search3.svg create mode 100644 customfront/public/logo/success.svg create mode 100644 customfront/src/page/login2.jsx create mode 100644 customfront/src/page/logincomplete.jsx create mode 100644 customfront/src/style/styledlogin2.jsx create mode 100644 customfront/src/style/styledlogincomplete.jsx diff --git a/customfront/public/logo/bad10.svg b/customfront/public/logo/bad10.svg new file mode 100644 index 000000000..b1b5fa0ce --- /dev/null +++ b/customfront/public/logo/bad10.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/customfront/public/logo/good10.svg b/customfront/public/logo/good10.svg new file mode 100644 index 000000000..3e547e558 --- /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 000000000..2f64ea147 --- /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 000000000..ffe4fc7b9 --- /dev/null +++ b/customfront/public/logo/lc.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/customfront/public/logo/mypagebtn.svg b/customfront/public/logo/mypagebtn.svg new file mode 100644 index 000000000..df6663182 --- /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 000000000..03178a76e --- /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 000000000..b0de3ac38 --- /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 000000000..05149ed36 --- /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 000000000..22562e659 --- /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 000000000..62c93e70f --- /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 000000000..9b65dc660 --- /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 f8d361171..748bea05e 100644 --- a/customfront/src/App.js +++ b/customfront/src/App.js @@ -1,10 +1,13 @@ 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'; @@ -17,10 +20,12 @@ 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'; @@ -32,12 +37,14 @@ function App() {
- } /> {/* 기본 경로 처리 */} - } /> + } /> {/* 기본 경로 처리 */} + } /> } /> } /> } /> } /> + } /> + } /> } /> } /> } /> @@ -49,10 +56,12 @@ function App() { } /> } /> } /> + } /> } /> } /> } /> } /> + } /> } /> } /> } /> diff --git a/customfront/src/page/alarm1.jsx b/customfront/src/page/alarm1.jsx index 2a916c3b0..ad5f24050 100644 --- a/customfront/src/page/alarm1.jsx +++ b/customfront/src/page/alarm1.jsx @@ -6,15 +6,23 @@ const Alarm1 = () => { const navigate = useNavigate(); const [isMenuOpen, setIsMenuOpen] = useState(false); - const goMain = () => { + const goMain0 = () => { + navigate(`/Main0`); + }; + + const goMain2 = () => { navigate(`/`); }; + const goAlarm1 = () => { + navigate(`/Alarm1`); + }; + const goMypage = () => { navigate(`/Mypage`); }; - const goMyreview = () => { + const goReview = () => { navigate(`/Review`); }; @@ -73,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} /> { onClick={toggleMenu} /> - + { onClick={toggleMenu} /> - + { const navigate = useNavigate(); + const [isMenuOpen, setIsMenuOpen] = useState(false); const [selectedBox, setSelectedBox] = useState(null); // 클릭된 박스의 인덱스를 관리 - const goMain = () => { + const goMain0 = () => { + navigate(`/Main0`); + }; + + const goMain2 = () => { navigate(`/`); }; + const goMypage = () => { + navigate(`/Mypage`); + }; + + const goReview = () => { + navigate(`/Review`); + }; + + const goLogin = () => { + navigate(`/Login`); + }; + + const toggleMenu = () => { + setIsMenuOpen(!isMenuOpen); + }; + + const closeMenu = () => { + setIsMenuOpen(false); + }; + // 클릭된 박스의 상태를 업데이트하는 함수 const handleBoxClick = (index) => { setSelectedBox(index); // 클릭된 박스의 인덱스를 상태로 저장 @@ -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 5c83e6c97..5df835a8d 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 9b45b6c25..b9e964adb 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 1bff61b91..e8cd978ae 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 43031c6ff..9087d84e7 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 6b376faa2..ea1a91a0f 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 9f386a5d7..51ff65295 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 = () => { @@ -86,7 +86,7 @@ const First = () => { - + 서비스 이용하기 { /> - + 🔥로그인 / 회원가입하고 모든 서비스 이용하기 diff --git a/customfront/src/page/info1.jsx b/customfront/src/page/info1.jsx index 49bb13e51..6a9ae2a09 100644 --- a/customfront/src/page/info1.jsx +++ b/customfront/src/page/info1.jsx @@ -1,97 +1,113 @@ import React, { useState, useEffect } from "react"; import { useNavigate } from "react-router-dom"; import axios from "axios"; -import * as b from "../style/styledinfo1"; - -axios.defaults.withCredentials = true; +import * as ii from "../style/styledinfo1"; const Info1 = () => { const navigate = useNavigate(); - const [selectedBox, setSelectedBox] = useState(null); - const [errors, setErrors] = useState(null); - - const ageRanges = [ - { label: "19세 이하", value: "under_19" }, - { label: "20~29세", value: "20-29" }, - { label: "30~39세", value: "30-39" }, - { label: "40~49세", value: "40-49" }, - { label: "50~59세", value: "50-59" }, - { label: "60~69세", value: "60-69" }, - { label: "70세 이상", value: "over_70" }, - ]; + 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 handleBoxClick = (index) => { - setSelectedBox(index); + const goInfo2 = () => { + navigate(`/Info2`); }; - useEffect(() => { - const getSessionData = async () => { - try { - const response = await axios.get( - "http://127.0.0.1:8000/register/session/" - ); - const { session_data } = response.data; - console.log("Current session data:", session_data); - const { age } = session_data; - if (age) { - const index = ageRanges.map((a) => a.value).indexOf(age); - setSelectedBox(index); - } - } catch (error) { - console.error("Error fetching session data:", error); + // 사용자 정보를 가져오는 함수 + const fetchUserInfo = async () => { + setLoading(true); // 로딩 시작 + try { + const token = localStorage.getItem('token'); // 로그인 후 저장된 토큰을 가져옵니다. + if (!token) { + throw new Error('로그인 토큰이 없습니다.'); } - }; - getSessionData(); - }, []); - - const onSubmit = async () => { - if (selectedBox === null) { - setErrors("연령대를 선택해 주세요."); - return; + 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 age = ageRanges[selectedBox].value; - + // 연령대를 업데이트하는 함수 + const updateAge = async (ageRange) => { + setLoading(true); // 로딩 시작 try { - const csrfToken = document.cookie - .split("; ") - .find((row) => row.startsWith("csrftoken=")) - ?.split("=")[1]; + const token = localStorage.getItem('token'); // 로그인 후 저장된 토큰을 가져옵니다. + if (!token) { + throw new Error('로그인 토큰이 없습니다.'); + } - const config = { + const response = await axios.put('http://127.0.0.1:8000/myPage/update/age/', + { age: ageRange }, + { headers: { - "Content-Type": "application/json", - "X-CSRFToken": csrfToken, - }, - }; - - const body = JSON.stringify({ age }); - - const res = await axios.put( - "http://127.0.0.1:8000/register/step2/", - body, - config, - { withCredentials: true } - ); - console.log("회원가입 2단계 성공:", res.data); - console.log("Updated session data:", res.data.session_data); - navigate("/info2"); - } catch (err) { - if (err.response && err.response.data) { - const serverErrors = err.response.data; - setErrors(serverErrors.detail ? serverErrors.detail : serverErrors); - } else { - console.error("Error during axios request:", err); - } + '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)} /> - + - - + + 나에게{" "} 딱 맞는 맞춤 비교 @@ -116,52 +132,52 @@ const Info1 = () => { 키워드 선택 을 진행해 주세요! -
- - 키워드 선택이 완료되어야 다음 단계로 이동이 가능합니다. - - + - +

🔴 연령대를 선택해 주세요. - - - - - - - {ageRanges.map((ageRange, index) => ( - - handleBoxClick(index)} + + + + + + + {[ + "19세 이하", + "20-29세", + "30-39세", + "40-49세", + "50-59세", + "60-69세", + "70세 이상", + ].map((ageRange, index) => ( + + handleBoxClick(index)} // 클릭 시 상태 업데이트 > - {ageRange.label} + {ageRange} - - + + ))} - - - - {errors &&
{errors}
} + + - + 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 6f3a20914..a29aaffda 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 58a3a5fda..e40390b4d 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 goInfo4 = () => { - navigate(`/info4`); + 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)} /> - + - - + + + 나에게{" "} 딱 맞는 맞춤 비교 @@ -43,32 +125,26 @@ const Info3 = () => { 키워드 선택 을 진행해 주세요! -
- - 키워드 선택이 완료되어야 다음 단계로 이동이 가능합니다. - - + - +

🟡 관리가 필요한 부분을 선택해 주세요. - - + + - - - + + + {[ { name: "당뇨", position: { top: "50px", left: "9px" } }, { name: "근손실", position: { top: "50px", left: "190px" } }, { name: "비만", position: { top: "250px", left: "9px" } }, { name: "고혈압", position: { top: "250px", left: "190px" } }, ].map((item, index) => ( - - + handleBoxClick(index)} style={{ @@ -80,23 +156,23 @@ const Info3 = () => { {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 be0deaf4d..f5674606a 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 bedc60c9e..af3afc491 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 89a787fcb..3954dd1bc 100644 --- a/customfront/src/page/login.jsx +++ b/customfront/src/page/login.jsx @@ -40,7 +40,7 @@ const Login = () => { localStorage.setItem('token', token); // 로그인 성공 후 네비게이션 처리 - navigate(`/main2`); + navigate(`/main0`); } catch (error) { console.error(error); alert("로그인 실패: 사용자 이름이나 비밀번호를 확인하세요."); diff --git a/customfront/src/page/login2.jsx b/customfront/src/page/login2.jsx new file mode 100644 index 000000000..4e96d1a75 --- /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 000000000..2ba3696bf --- /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/main0.jsx b/customfront/src/page/main0.jsx index 69258981a..b6f568ce5 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 e349ae497..b07f7c17d 100644 --- a/customfront/src/page/main2.jsx +++ b/customfront/src/page/main2.jsx @@ -7,7 +7,7 @@ const Main2 = () => { const navigate = useNavigate(); const [isMenuOpen, setIsMenuOpen] = useState(false); const [userInfo, setUserInfo] = useState(null); - const [userError, setUserError] = useState(null); // 사용자 정보 에러 상태 추가 + const [userError, setUserError] = useState(null); const goMypage = () => { navigate(`/Mypage`); @@ -36,25 +36,37 @@ const Main2 = () => { // 사용자 정보를 가져오는 함수 const fetchUserInfo = async () => { try { - const token = localStorage.getItem('token'); // 로그인 후 저장된 토큰을 가져옵니다. + const token = localStorage.getItem("token"); // 로그인 후 저장된 토큰을 가져옵니다. if (!token) { - throw new Error('로그인 토큰이 없습니다.'); + throw new Error("로그인 토큰이 없습니다."); } - const response = await axios.get('http://127.0.0.1:8000/myPage/profile', { + const response = await axios.get("http://127.0.0.1:8000/myPage/profile", { headers: { - 'Authorization': `Token ${token}` // Authorization 헤더에 토큰을 포함합니다. - } + Authorization: `Token ${token}`, // Authorization 헤더에 토큰을 포함합니다. + }, }); - console.log('사용자 정보:', response.data); // 디버그 로그 추가 + console.log("사용자 정보:", response.data); // 디버그 로그 추가 setUserInfo(response.data); } catch (error) { - console.error('사용자 정보 가져오기 오류:', error.message); + console.error("사용자 정보 가져오기 오류:", error.message); setUserError(error.message); // 에러 메시지 설정 } }; + const diseaseMapping = { + diabetes: "당뇨", + obesity: "비만", + muscle_loss: "근손실", + hypertension: "고혈압", + }; + + // 사용자 정보에서 질병 이름을 변환 + const getDiseaseName = (diseaseKey) => { + return diseaseMapping[diseaseKey] || diseaseKey; + }; + // 컴포넌트가 마운트될 때 사용자 정보를 가져옵니다. useEffect(() => { fetchUserInfo(); @@ -67,7 +79,7 @@ const Main2 = () => { const [searchQuery, setSearchQuery] = useState(""); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); - const [cartError, setCartError] = useState(null); + const [cartError, setCartError] = useState(null); const axiosInstance = axios.create({ baseURL: "http://127.0.0.1:8000/", @@ -112,7 +124,9 @@ const Main2 = () => { try { await removeFromCart(item.product_id); - console.log(`상품 ID ${item.product_id}이(가) 카트에서 삭제되었습니다.`); + console.log( + `상품 ID ${item.product_id}이(가) 카트에서 삭제되었습니다.` + ); } catch (error) { console.error("카트에서 삭제 중 오류 발생:", error.message); setError(error); @@ -280,7 +294,7 @@ const Main2 = () => { const cartResponse = await axiosInstance.get("customFit/cart/"); if (cartResponse.data.length === 0) { setCartError("상품을 추가한 후 비교해 주세요."); - return; + return; } const response = await axiosInstance.get("customFit/compare/"); @@ -299,12 +313,23 @@ const Main2 = () => { }; const handleLogout = () => { - // 여기서 로그아웃 관련 상태 관리 또는 API 호출 - // 예를 들어, `localStorage`에서 사용자 정보를 제거합니다. - localStorage.removeItem('user'); // 사용자의 로그인 상태 정보 제거 + // 로컬 저장소에서 사용자 정보를 제거합니다. + 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'); // 로그인 페이지로 이동 + + // 로그인 페이지로 리디렉션합니다. + navigate("/Login"); }; if (loading) { @@ -315,7 +340,8 @@ const Main2 = () => { return
Error: {error.message}
; } - if (userError) { // 사용자 정보 에러가 있는 경우 + if (userError) { + // 사용자 정보 에러가 있는 경우 return
Error: {userError}
; } @@ -420,7 +446,12 @@ const Main2 = () => { onClick={toggleMenu} /> - { handleLogout(); toggleMenu(); }}> + { + handleLogout(); + toggleMenu(); + }} + > { )} - {userInfo.first_name}님에게 맞는
+ {userInfo.first_name}님에게 맞는
식품을 찾아볼까요? - #당뇨 - #체중감소 - #단백질이 좋아 + #{getDiseaseName(userInfo.disease)} @@ -538,7 +567,9 @@ const Main2 = () => { 비교하기 - {cartError &&
{cartError}
} + {cartError && ( +
{cartError}
+ )} ); diff --git a/customfront/src/page/main3.jsx b/customfront/src/page/main3.jsx index 9d6489a6d..b9ea66abb 100644 --- a/customfront/src/page/main3.jsx +++ b/customfront/src/page/main3.jsx @@ -12,6 +12,7 @@ const Main3 = () => { const [firstName, setFirstName] = useState(""); // 사용자 이름 상태 추가 const [userInfo, setUserInfo] = useState(null); // 사용자 정보 상태 추가 const [userError, setUserError] = useState(null); // 사용자 정보 에러 상태 추가 + const [isMenuOpen, setIsMenuOpen] = useState(false); useEffect(() => { // 로컬 스토리지에서 first_name 가져오기 @@ -48,12 +49,36 @@ const Main3 = () => { fetchUserInfo(); // 컴포넌트가 마운트될 때 사용자 정보를 가져옵니다. }, []); - const goMain = () => { - navigate(`/`); + const goMain0 = () => { + navigate(`/Main0`); + }; + + const goAlarm1 = () => { + navigate(`/Alarm1`); + }; + + const goMypage = () => { + navigate(`/Mypage`); + }; + + const goReview = () => { + navigate(`/Review`); + }; + + const goLogin = () => { + navigate(`/Login`); }; - const goReviewcheck3 = () => { - navigate(`/Reviewcheck3`); + const toggleMenu = () => { + setIsMenuOpen(!isMenuOpen); + }; + + const closeMenu = () => { + setIsMenuOpen(false); + }; + + const goMain2 = () => { + navigate(`/`); }; const handleStarClick = (value) => { @@ -114,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 + + + + )} + {userInfo.first_name}님의 건강 기준에 @@ -157,7 +245,7 @@ const Main3 = () => { {recommendedProduct?.product_name || "제품명입니다"} {getStextLabel(userInfo.disease)} - {recommendedProduct?.protein || "제품명입니다"}g + {recommendedProduct?.protein || "N"}g [{getDiseaseName(userInfo.disease)}] 선택한 다른 회원들의 의견이에요! @@ -166,15 +254,15 @@ const Main3 = () => { 맞춤의 추천 서비스에 만족하시나요? @@ -205,7 +293,7 @@ const Main3 = () => { /> ))} - + 만족도 결과 보내기 diff --git a/customfront/src/page/main4.jsx b/customfront/src/page/main4.jsx index 326e1c912..d48c3c349 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 82028c1d0..15a0452b4 100644 --- a/customfront/src/page/membership.jsx +++ b/customfront/src/page/membership.jsx @@ -1,5 +1,5 @@ import axios from "axios"; -import React, { useState } from "react"; +import React, { useState, useEffect } from "react"; import { useNavigate } from "react-router-dom"; import * as s from "../style/styledmembership"; @@ -72,6 +72,7 @@ const Membership = () => { e.preventDefault(); try { const csrfToken = getCsrfToken(); + console.log("CSRF Token:", csrfToken); const config = { headers: { "Content-Type": "application/json", @@ -87,15 +88,24 @@ const Membership = () => { config ); console.log("회원가입 성공:", res.data); - console.log("Session cookie:", document.cookie); // 세션 쿠키 확인 - navigate("/info1"); + 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)); + + navigate("/logincomplete"); } catch (err) { if (err.response && err.response.data) { const serverErrors = err.response.data; if ( serverErrors.username && serverErrors.username.includes( - "A user with that username already exists." + "이미 사용중인 아이디 입니다." ) ) { serverErrors.username = ["중복된 아이디가 있습니다."]; @@ -141,7 +151,7 @@ const Membership = () => { required /> {errors.username && ( -

{errors.username}

+

{errors.username}

)} @@ -156,7 +166,7 @@ const Membership = () => { required /> {errors.password && ( -

{errors.password}

+

{errors.password}

)} @@ -171,7 +181,7 @@ const Membership = () => { required /> {errors.password_confirm && ( -

{errors.password_confirm}

+

{errors.password_confirm}

)} @@ -186,7 +196,7 @@ const Membership = () => { required /> {errors.first_name && ( -

{errors.first_name}

+

{errors.first_name}

)} @@ -200,7 +210,7 @@ const Membership = () => { placeholder="Email을 입력해주세요." required /> - {errors.email &&

{errors.email}

} + {errors.email &&

{errors.email}

} 약관 @@ -230,7 +240,7 @@ const Membership = () => { (필수) 개인회원 약관에 동의 {errors.terms_accepted_1 && ( -

{errors.terms_accepted_1}

+

{errors.terms_accepted_1}

)} @@ -251,7 +261,7 @@ const Membership = () => { (필수) 개인정보 수집 및 이용에 동의 {errors.terms_accepted_2 && ( -

{errors.terms_accepted_2}

+

{errors.terms_accepted_2}

)} @@ -266,13 +276,13 @@ const Membership = () => { (선택) 이메일 등 마케팅 정보 수신 동의 {errors.terms_accepted_optional && ( -

{errors.terms_accepted_optional}

+

{errors.terms_accepted_optional}

)} - 🔥 회원 정보 저장하고 키워드 선택하기 + 🔥 회원 정보 저장하고 키워드 선택하기 diff --git a/customfront/src/page/mypage.jsx b/customfront/src/page/mypage.jsx index 789e15fb0..42fdf5232 100644 --- a/customfront/src/page/mypage.jsx +++ b/customfront/src/page/mypage.jsx @@ -1,18 +1,147 @@ -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(`/`); + }; + + 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; + }; + + // userInfo가 로드되지 않았거나 에러가 발생한 경우 로딩 상태 표시 + if (!userInfo) { + return
Loading...
; + } return ( @@ -34,6 +163,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 63790e897..c4cce9a41 100644 --- a/customfront/src/page/pwchange.jsx +++ b/customfront/src/page/pwchange.jsx @@ -5,6 +5,10 @@ import * as p from "../style/styledpwchange"; const Pwchange = () => { const navigate = useNavigate(); + const goPwchange1 = () => { + navigate(`/Pwchange1`); + }; + return ( @@ -20,50 +24,19 @@ const Pwchange = () => { }} onClick={() => navigate(-1)} /> - - alarm button navigate(-1)} - /> - menu button navigate(-1)} - /> - -
- - - + + 비밀번호 변경하기 계정 생성시 사용한 E Mail을 입력해주세요. - - - - - icon - - 더 많은 알림 확인하기 + + + + + E Mail로 비밀번호 변경 링크 보내기 diff --git a/customfront/src/page/pwchange1.jsx b/customfront/src/page/pwchange1.jsx index e431c9609..d37ab4266 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 goMain = () => { + navigate(`/`); + }; + 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 c2cff1d51..b1df08585 100644 --- a/customfront/src/page/review.jsx +++ b/customfront/src/page/review.jsx @@ -1,60 +1,91 @@ import React, { useEffect, useState } from "react"; import { useNavigate } from "react-router-dom"; -import axios from "axios"; +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 [userName, setUserName] = useState(""); // 사용자 이름 상태 + const [userInfo, setUserInfo] = useState(null); - const goMain = () => { + const goMain2 = () => { navigate(`/`); }; - const goReviewcheck1 = () => { - if (selectedProduct && reviewText && selectedImage) { - navigate(`/Reviewcheck1`, { state: { product: selectedProduct, review: reviewText, selectedImage } }); - } else { - alert("제품을 선택하고 리뷰를 작성하고 이미지를 선택해주세요."); - } + const goMain0 = () => { + navigate(`/Main0`); }; - const handleImageClick = (imageType) => { - setSelectedImage(imageType); + 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'); + const token = localStorage.getItem("token"); if (!token) { throw new Error("No token found"); } const config = { headers: { - 'Authorization': `Token ${token}` - } + Authorization: `Token ${token}`, + }, }; - // 추천 제품 데이터 가져오기 - const response = await axios.get('http://127.0.0.1:8000/myPage/recommended-products/', config); - const products = response.data.map(product => ({ + 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); - - // 사용자 데이터 가져오기 - const userResponse = await axios.get('http://127.0.0.1:8000/myPage/user/', config); // 사용자 정보 API 엔드포인트 - setUserName(userResponse.data.first_name); // 사용자 이름 저장 - setLoading(false); } catch (err) { if (err.message === "No token found") { @@ -81,6 +112,21 @@ const Review = () => { if (error) { return
Error: {error.message}
; } + + + const goReviewcheck1 = () => { + if (selectedProduct && reviewText && selectedImage) { + navigate(`/Reviewcheck1`, { + state: { product: selectedProduct, review: reviewText, selectedImage }, + }); + } else { + alert("제품을 선택 후 버튼을 누르고 리뷰를 작성해주세요."); + } + }; + + const handleImageClick = (imageType) => { + setSelectedImage(imageType); + }; return ( @@ -102,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 + + + + )} + 리뷰 작성하기 @@ -140,7 +249,10 @@ const Review = () => { 후기를 작성할 제품을 선택해 주세요. {box2Items.map((item) => ( - setSelectedProduct(item)}> + setSelectedProduct(item)} + > {item.name} @@ -150,8 +262,10 @@ const Review = () => { - {userName}님!
- {selectedProduct ? `[${selectedProduct.name}]은 어떠셨어요?` : '[제품명]은 어떠셨어요?'} + {userInfo.first_name}님!
+ {selectedProduct + ? `[${selectedProduct.name}]은 어떠셨어요?` + : "[제품명]은 어떠셨어요?"} @@ -161,9 +275,9 @@ const Review = () => { alt="good" width="65px" style={{ - border: selectedImage === 'good' ? '2px solid blue' : 'none', + border: selectedImage === "good" ? "2px solid blue" : "none", }} - onClick={() => handleImageClick('good')} + onClick={() => handleImageClick("good")} /> { alt="bad" width="65px" style={{ - border: selectedImage === 'bad' ? '2px solid blue' : 'none', + border: selectedImage === "bad" ? "2px solid blue" : "none", }} - onClick={() => handleImageClick('bad')} + onClick={() => handleImageClick("bad")} /> diff --git a/customfront/src/page/reviewcheck1.jsx b/customfront/src/page/reviewcheck1.jsx index c498e45f7..e669e36c3 100644 --- a/customfront/src/page/reviewcheck1.jsx +++ b/customfront/src/page/reviewcheck1.jsx @@ -1,60 +1,68 @@ import React, { useEffect, useState } from "react"; import { useLocation, useNavigate } from "react-router-dom"; -import axios from "axios"; 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 || {}; // selectedImage 추가 - const [productData, setProductData] = useState(null); + const { product, review, selectedImage } = location.state || {}; + const [reviews, setReviews] = useState([]); 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 goMain = () => { - navigate(`/`); - }; + // 로컬 스토리지에서 리뷰를 가져오기 + const storedReviews = JSON.parse(localStorage.getItem("reviews")) || []; + setReviews(storedReviews); + }, []); - const goReviewcheck2 = () => { + useEffect(() => { if (product && review && selectedImage) { - navigate(`/Reviewcheck2`, { state: { product, review, selectedImage } }); - } else { - alert("제품 정보나 리뷰가 없습니다."); + // 기존 리뷰를 업데이트 + 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`); }; - if (!product || !review) { - return
Error: 제품 정보나 리뷰가 없습니다.
; - } + const goMain2 = () => { + navigate(`/`); + }; + + const goReview = () => { + navigate(`/Review`); + }; + + const goReviewcheck2 = (review) => { + navigate(`/Reviewcheck2`, { state: review }); + }; + + const goMypage = () => { + navigate(`/Mypage`); + }; + + const goLogin = () => { + navigate(`/Login`); + }; + + const toggleMenu = () => { + setIsMenuOpen(!isMenuOpen); + }; + + const closeMenu = () => { + setIsMenuOpen(false); + }; + + + + return ( @@ -76,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 + + + + )} + 나의 리뷰 확인하기 - - - - - [{product.name}] - {review} - - {selectedImage - - - - - - - + {reviews.map((review, index) => ( + + + goReviewcheck2(review)} + style={{ cursor: "pointer" }} + > + + + [{review.product.name}] + + {review.review} + + {review.selectedImage + + + + + + ))} + + 새로운 리뷰 작성하기 @@ -143,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 29e46ed46..11fd26000 100644 --- a/customfront/src/page/reviewcheck2.jsx +++ b/customfront/src/page/reviewcheck2.jsx @@ -5,10 +5,41 @@ 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 goMain2 = () => { + navigate(`/`); + }; + + 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) { @@ -40,10 +71,6 @@ const Reviewcheck2 = () => { fetchProductData(); }, [product, navigate]); - const goMain = () => { - navigate(`/`); - }; - const goReviewcheck3 = () => { if (product && review) { navigate(`/Reviewcheck3`, { state: { product, review, selectedImage } }); // selectedImage 추가 @@ -76,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}] diff --git a/customfront/src/page/reviewcheck3.jsx b/customfront/src/page/reviewcheck3.jsx index ef49a9113..803ebeef1 100644 --- a/customfront/src/page/reviewcheck3.jsx +++ b/customfront/src/page/reviewcheck3.jsx @@ -5,18 +5,44 @@ 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 = () => { + const goMain2 = () => { navigate(`/`); }; + 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 goReviewcheck2 = () => { // reviewcheck2로 이동하며 현재 제품 정보와 수정된 리뷰를 전달 if (product && newReview) { - navigate(`/Reviewcheck2`, { state: { product, review: newReview } }); + navigate(`/Reviewcheck2`, { state: { product, review: newReview, selectedImage } }); } else { alert("제품 정보나 리뷰가 없습니다."); } @@ -26,6 +52,10 @@ const Reviewcheck3 = () => { setNewReview(e.target.value); }; + const handleImageSelect = (image) => { + setSelectedImage(image); // 이미지 선택 핸들러 + }; + const saveReview = async () => { try { const token = localStorage.getItem('token'); @@ -45,13 +75,14 @@ const Reviewcheck3 = () => { const body = { "GNB": "G", - "review": newReview + "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 } }); + navigate(`/Reviewcheck1`, { state: { product, review: newReview, selectedImage } }); } catch (err) { if (err.message === "No token found") { alert("토큰이 없습니다. 로그인이 필요합니다."); @@ -82,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 + + + + )} - + 리뷰 수정하기 + 김세모님!
[{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' }} /> diff --git a/customfront/src/style/styledalarm1.jsx b/customfront/src/style/styledalarm1.jsx index 7e20a43b8..bdb31364f 100644 --- a/customfront/src/style/styledalarm1.jsx +++ b/customfront/src/style/styledalarm1.jsx @@ -12,30 +12,31 @@ export const Container = styled.div` export const Header = styled.div` position: fixed; - top: 0; /* 페이지의 최상단에 고정 */ + top: 0; left: 50%; - transform: translateX(-50%); /* 화면 가운데로 고정 */ + transform: translateX(-50%); background: #fff; width: 393px; height: 50px; - z-index: 10; /* 백드롭과 메뉴보다 위에 표시되도록 */ + 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; @@ -47,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` @@ -72,7 +74,7 @@ export const Keywordd = styled.div` export const Body = styled.div` display: flex; flex-direction: column; - margin-top: 50px; /* 헤더의 높이만큼 여백을 줌 */ + margin-top: 50px; width: 393px; height: 110px; `; @@ -130,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; } `; @@ -146,21 +148,21 @@ export const Button2 = styled.div` gap: 15px; `; -// 드롭다운 메뉴 스타일 export const Backdrop = styled.div` - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; + 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: fixed; /* 헤더 기준으로 고정 */ - top: 80px; /* 헤더 바로 아래에 위치 */ - left: 70%; + position: absolute; + top: 80px; + left: 80%; transform: translateX(-50%); width: 50px; height: 314px; @@ -168,7 +170,7 @@ export const DropdownMenu = styled.div` background: #fff; box-shadow: 0px 0px 8px 8px #544c4c; padding: 20px; - z-index: 11; /* 백드롭보다 위에 표시 */ + z-index: 11; display: flex; flex-direction: column; justify-content: space-around; @@ -203,6 +205,4 @@ export const DropdownItem = styled.button` text-align: center; border-radius: 50%; transition: background-color 0.3s ease; - - -`; +`; \ No newline at end of file diff --git a/customfront/src/style/styledchangeinfo.jsx b/customfront/src/style/styledchangeinfo.jsx index c9b581e63..f2e64a040 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 ae530e9d2..188d1fbb1 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 910ba0f76..e56ab361f 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 af5c0bf14..024107e67 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 ae530e9d2..b3e43b20f 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 ae530e9d2..c85913469 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 9f53c0f34..189338308 100644 --- a/customfront/src/style/styledfirst.jsx +++ b/customfront/src/style/styledfirst.jsx @@ -140,7 +140,7 @@ export const News = styled.div` display: flex; margin-top: 20px; flex-direction: row; - width: 340px; + width: 385px; height: 350px; gap: 7px; overflow-x: auto; @@ -156,7 +156,7 @@ 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%; diff --git a/customfront/src/style/styledinfo1.jsx b/customfront/src/style/styledinfo1.jsx index 5aa83ece3..ae530e9d2 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; @@ -110,13 +133,13 @@ export const SmallBox5 = styled.div` flex-shrink: 0; border-radius: 15px; border: 0.3px solid #000; - background: ${(props) => (props.$isclicked ? "#fffba6" : "#fff")}; + background: ${(props) => (props.isClicked ? "#fffba6" : "#fff")}; justify-content: center; align-items: center; text-align: center; cursor: pointer; filter: ${(props) => - props.$isclicked ? "drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.25))" : "none"}; + props.isClicked ? "drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.25))" : "none"}; transition: all 0.1s ease; span { margin-left: 10px; @@ -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; -`; \ No newline at end of file diff --git a/customfront/src/style/styledlogin.jsx b/customfront/src/style/styledlogin.jsx index eb05315fb..fcbc9d3d8 100644 --- a/customfront/src/style/styledlogin.jsx +++ b/customfront/src/style/styledlogin.jsx @@ -74,7 +74,6 @@ export const InsertB = styled.div` border-radius: 10px; border: 1.5px solid #000; background: #fff; - } #Pw { width: 300px; height: 21.606px; diff --git a/customfront/src/style/styledlogin2.jsx b/customfront/src/style/styledlogin2.jsx new file mode 100644 index 000000000..22b35f866 --- /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 000000000..1f51cbd01 --- /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 9fb051a4d..ed197d16c 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 3fc4d2d5d..f7c751114 100644 --- a/customfront/src/style/styledmain2.jsx +++ b/customfront/src/style/styledmain2.jsx @@ -16,7 +16,7 @@ export const Header = styled.div` background: #fff; width: 393px; height: 50px; - z-index: 2; + z-index: 999; #back { cursor: pointer; } @@ -370,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; @@ -381,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"; @@ -442,19 +442,20 @@ export const SelectedItem = styled.li` // 드롭다운 메뉴 스타일 export const Backdrop = styled.div` - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; + 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: fixed; /* 헤더 기준으로 고정 */ - top: 80px; /* 헤더 바로 아래에 위치 */ - left: 70%; + position: absolute; + top: 80px; + left: 80%; transform: translateX(-50%); width: 50px; height: 314px; @@ -462,7 +463,7 @@ export const DropdownMenu = styled.div` background: #fff; box-shadow: 0px 0px 8px 8px #544c4c; padding: 20px; - z-index: 11; /* 백드롭보다 위에 표시 */ + z-index: 11; display: flex; flex-direction: column; justify-content: space-around; @@ -497,7 +498,5 @@ export const DropdownItem = styled.button` 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 d3de9732d..7c8552768 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; `; @@ -188,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%);*/ `; @@ -210,7 +210,7 @@ export const Otext = styled.div` width: 350px; height: 40px; flex-shrink: 0; - margin-top: 50px; + margin-top: 0px; margin-left: 20px; `; @@ -308,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; @@ -328,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 613f97af9..38d80b0ce 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; @@ -112,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: 190px; + height: 180px; flex-shrink: 0; border-radius: 10px; border: 0.3px solid #000; @@ -127,8 +127,9 @@ export const BottomText = styled.div` align-items: center; text-align: left; background: none; - margin-bottom: 30px; - margin-left: 25px; + margin-bottom: 20px; + margin-top: 5px; + margin-left: 20px; input { position: relative; @@ -148,7 +149,7 @@ export const Button = styled.button` border: none; `; -export const ButtonText = styled.div` +export const Text = styled.div` display: flex; position: relative; color: #000; @@ -156,8 +157,16 @@ export const ButtonText = styled.div` align-items: center; justify-content: center; font-family: "Gothic A1"; - font-size: 18px; + 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 98f1aad5d..98feda34f 100644 --- a/customfront/src/style/styledmypage.jsx +++ b/customfront/src/style/styledmypage.jsx @@ -4,8 +4,10 @@ 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")}; `; export const Header = styled.div` @@ -13,23 +15,23 @@ export const Header = styled.div` 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; @@ -76,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; @@ -84,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; @@ -105,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; @@ -118,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; @@ -146,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; @@ -163,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; @@ -186,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; @@ -194,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; `; @@ -208,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; `; @@ -235,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 8e26362eb..b04976d54 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,84 +71,75 @@ 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; + font-weight: 550; + line-height: normal; `; export const InputBlank = styled.div` - margin-top: 7px; - margin-left: 30px; + margin-top: 50px; + margin-left: 42px; margin-bottom: 20px; - width: 328px; - height: 50px; + width: 315px; + height: 60px; flex-shrink: 0; border-radius: 10px; background: #fff; @@ -170,11 +148,11 @@ export const InputBlank = styled.div` border: none; outline: none; width: 273px; - margin-top: 15px; - margin-left: -30px; + margin-top: 18px; + margin-left: -15px; color: #000; font-family: "Gothic A1"; - font-size: 13px; + font-size: 15px; font-style: normal; font-weight: 250; line-height: 150%; /* 19.5px */ @@ -185,10 +163,11 @@ export const InputBlank = styled.div` export const Label = styled.div` display: flex; - margin-top: 15px; - margin-left: 15px; + position: relative; + margin-top: 220px; + margin-left: 20px; color: #000; font-size: 18px; - font-weight: 500; + font-weight: 600; padding-left: 20px; -`; \ No newline at end of file +`; diff --git a/customfront/src/style/styledpwchange1.jsx b/customfront/src/style/styledpwchange1.jsx index abc2aaab9..abed6c775 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 cdb03ea0d..fd226b5d6 100644 --- a/customfront/src/style/styledreview.jsx +++ b/customfront/src/style/styledreview.jsx @@ -202,4 +202,64 @@ export const ButtonText = styled.div` font-style: normal; font-weight: 500; line-height: normal; -`; \ No newline at end of file +`; + +//메뉴바 스타일 +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 7c70d21d7..a35154f30 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"; @@ -167,4 +182,69 @@ export const ButtonText = styled.div` font-style: normal; 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 36a1c94e6..b766977e9 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 16023c1db..b540ff690 100644 --- a/customfront/src/style/styledreviewcheck3.jsx +++ b/customfront/src/style/styledreviewcheck3.jsx @@ -126,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; @@ -138,11 +139,22 @@ export const Button = styled.div` cursor: pointer; `; +export const ButtonText = styled.div` + margin-top: 9px; + color: #000; + text-align: center; + font-family: "Gothic A1"; + font-size: 15px; + font-style: normal; + font-weight: 500; + line-height: normal; +`; + export const ButtonTwo = styled.div` margin-top: 20px; - margin-left: 30px; - width: 85%; - height: 30px; + margin-left: 50px; + width: 298px; + height: 39px; flex-shrink: 0; border-radius: 10px; border: 0.5px solid #fff9c2; @@ -151,14 +163,68 @@ export const ButtonTwo = styled.div` cursor: pointer; `; -export const ButtonText = styled.div` - margin-top: 5px; - color: #000; - text-align: center; - font-family: "Gothic A1"; - font-size: 15px; - font-style: normal; - font-weight: 500; - line-height: normal; +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%); `; -//1 \ No newline at end of file + +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 From 07f49750a0d20ee8e3b0291f14121a63c1bcbdbb Mon Sep 17 00:00:00 2001 From: minyeong3201 <164001002+minyeong3201@users.noreply.github.com> Date: Sun, 4 Aug 2024 15:31:08 +0900 Subject: [PATCH 7/7] finalmin --- customfront/src/App.js | 5 +- customfront/src/page/alarm1.jsx | 2 +- customfront/src/page/alarm2.jsx | 12 ++-- customfront/src/page/alarm3.jsx | 12 ++-- customfront/src/page/changeinfo.jsx | 2 +- customfront/src/page/main.jsx | 97 --------------------------- customfront/src/page/mypage.jsx | 3 +- customfront/src/page/pwchange1.jsx | 4 +- customfront/src/page/review.jsx | 2 +- customfront/src/page/reviewcheck1.jsx | 2 +- customfront/src/page/reviewcheck2.jsx | 2 +- customfront/src/page/reviewcheck3.jsx | 2 +- 12 files changed, 27 insertions(+), 118 deletions(-) delete mode 100644 customfront/src/page/main.jsx diff --git a/customfront/src/App.js b/customfront/src/App.js index 748bea05e..18305a880 100644 --- a/customfront/src/App.js +++ b/customfront/src/App.js @@ -1,6 +1,5 @@ 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'; @@ -37,10 +36,10 @@ function App() {
- } /> {/* 기본 경로 처리 */} + } /> {/* 기본 경로 처리 */} + } /> } /> } /> - } /> } /> } /> } /> diff --git a/customfront/src/page/alarm1.jsx b/customfront/src/page/alarm1.jsx index ad5f24050..4d5c4c1ee 100644 --- a/customfront/src/page/alarm1.jsx +++ b/customfront/src/page/alarm1.jsx @@ -11,7 +11,7 @@ const Alarm1 = () => { }; const goMain2 = () => { - navigate(`/`); + navigate(`/Main2`); }; const goAlarm1 = () => { diff --git a/customfront/src/page/alarm2.jsx b/customfront/src/page/alarm2.jsx index 4490f5174..6ce72c0f6 100644 --- a/customfront/src/page/alarm2.jsx +++ b/customfront/src/page/alarm2.jsx @@ -6,8 +6,12 @@ const Alarm2 = () => { const navigate = useNavigate(); const [isMenuOpen, setIsMenuOpen] = useState(false); - const goMain = () => { - navigate(`/`); + const goMain0 = () => { + navigate(`/Main0`); + }; + + const goMain2 = () => { + navigate(`/Main2`); }; const goChangeinfo = () => { @@ -42,7 +46,7 @@ const Alarm2 = () => { src={`${process.env.PUBLIC_URL}/logo/ylogo.svg`} alt="logo" width="40px" - onClick={goMain} + onClick={goMain2} /> { onClick={toggleMenu} /> - + { const navigate = useNavigate(); const [isMenuOpen, setIsMenuOpen] = useState(false); - const goMain = () => { - navigate(`/`); + const goMain0 = () => { + navigate(`/Main0`); + }; + + const goMain2 = () => { + navigate(`/Main2`); }; const toggleMenu = () => { @@ -38,7 +42,7 @@ const Alarm3 = () => { src={`${process.env.PUBLIC_URL}/logo/ylogo.svg`} alt="logo" width="40px" - onClick={goMain} + onClick={goMain2} /> { onClick={toggleMenu} /> - + { }; const goMain2 = () => { - navigate(`/`); + navigate(`/Main2`); }; const goMypage = () => { diff --git a/customfront/src/page/main.jsx b/customfront/src/page/main.jsx deleted file mode 100644 index 1cac62158..000000000 --- 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/mypage.jsx b/customfront/src/page/mypage.jsx index 42fdf5232..f30d5b8ed 100644 --- a/customfront/src/page/mypage.jsx +++ b/customfront/src/page/mypage.jsx @@ -29,7 +29,7 @@ const Mypage = () => { }; const goMain2 = () => { - navigate(`/`); + navigate(`/Main2`); }; const goMypage = () => { @@ -138,7 +138,6 @@ const Mypage = () => { return mapping[key] || key; }; - // userInfo가 로드되지 않았거나 에러가 발생한 경우 로딩 상태 표시 if (!userInfo) { return
Loading...
; } diff --git a/customfront/src/page/pwchange1.jsx b/customfront/src/page/pwchange1.jsx index d37ab4266..4e10eaa61 100644 --- a/customfront/src/page/pwchange1.jsx +++ b/customfront/src/page/pwchange1.jsx @@ -5,8 +5,8 @@ import * as p1 from "../style/styledpwchange1"; const Pwchange1 = () => { const navigate = useNavigate(); - const goMain = () => { - navigate(`/`); + const goMain2 = () => { + navigate(`/Main2`); }; return ( diff --git a/customfront/src/page/review.jsx b/customfront/src/page/review.jsx index b1df08585..19faffb60 100644 --- a/customfront/src/page/review.jsx +++ b/customfront/src/page/review.jsx @@ -15,7 +15,7 @@ const Review = () => { const [userInfo, setUserInfo] = useState(null); const goMain2 = () => { - navigate(`/`); + navigate(`/Main2`); }; const goMain0 = () => { diff --git a/customfront/src/page/reviewcheck1.jsx b/customfront/src/page/reviewcheck1.jsx index e669e36c3..65203692b 100644 --- a/customfront/src/page/reviewcheck1.jsx +++ b/customfront/src/page/reviewcheck1.jsx @@ -33,7 +33,7 @@ const Reviewcheck1 = () => { }; const goMain2 = () => { - navigate(`/`); + navigate(`/Main2`); }; const goReview = () => { diff --git a/customfront/src/page/reviewcheck2.jsx b/customfront/src/page/reviewcheck2.jsx index 11fd26000..21b639c30 100644 --- a/customfront/src/page/reviewcheck2.jsx +++ b/customfront/src/page/reviewcheck2.jsx @@ -11,7 +11,7 @@ const Reviewcheck2 = () => { const [productData, setProductData] = useState(null); const goMain2 = () => { - navigate(`/`); + navigate(`/Main2`); }; const goMain0 = () => { diff --git a/customfront/src/page/reviewcheck3.jsx b/customfront/src/page/reviewcheck3.jsx index 803ebeef1..ed3bbeef0 100644 --- a/customfront/src/page/reviewcheck3.jsx +++ b/customfront/src/page/reviewcheck3.jsx @@ -12,7 +12,7 @@ const Reviewcheck3 = () => { const [selectedImage, setSelectedImage] = useState(null); // 선택된 이미지 상태 추가 const goMain2 = () => { - navigate(`/`); + navigate(`/Main2`); }; const goMain0 = () => {