+
setSearchQuery(e.target.value)}
+ onKeyDown={handleKeyPress}
+ className="search-input"
+ />
+
-
- {filteredData.map(item => (
- - {item.name}
- ))}
-
+ {error &&
{error}
}
);
}
diff --git a/client/src/pages/CheongtakjuPage.js b/client/src/pages/CheongtakjuPage.js
index 4f52eff..0eb2118 100644
--- a/client/src/pages/CheongtakjuPage.js
+++ b/client/src/pages/CheongtakjuPage.js
@@ -3,12 +3,13 @@ import AlcoholList from "../components/alcoholList/AlcoholList";
import SearchBar from "../components/navSearchBar/SearchBar";
import Footer from "../components/common/Footer";
import cheongTakjuListApi from "../api/cheongTakjuListApi";
+import SearchPage from "../components/search/search";
const CheongtakjuPage = () => {
return (
diff --git a/client/src/pages/FruitWinePage.js b/client/src/pages/FruitWinePage.js
index 4289129..33643e2 100644
--- a/client/src/pages/FruitWinePage.js
+++ b/client/src/pages/FruitWinePage.js
@@ -3,12 +3,13 @@ import SearchBar from "../components/navSearchBar/SearchBar";
import AlcoholList from "../components/alcoholList/AlcoholList";
import fruitWineListApi from "../api/fruitWineListApi";
import Footer from "../components/common/Footer";
+import SearchPage from "../components/search/search";
const FruitWinePage = () => {
return (
diff --git a/client/src/pages/mypage.css b/client/src/pages/mypage.css
index 7ae2648..958ffa7 100644
--- a/client/src/pages/mypage.css
+++ b/client/src/pages/mypage.css
@@ -101,6 +101,11 @@
outline: none; /* 포커스 시 테두리도 제거 */
background-color: #f6f6f6;
text-align: right;
+ font-size: 16px; /* 텍스트 입력 크기 */
+}
+
+.percentage {
+ font-size: 16px !important; /* 입력 텍스트와 동일한 크기 */
}
.preference-score span:first-child {
@@ -114,7 +119,13 @@
/* 담은 술 섹션 */
.favorite-alcohol h4 {
+ margin-bottom: 10px;
+}
+
+.add-btn{
+ border: none;
margin-bottom: 30px;
+ cursor: pointer;
}
.alcohol-grid {
@@ -137,11 +148,12 @@
color: #888;
}
-.alcohol-item.add-more {
+/* .alcohol-item.add-more {
background-color: #d0d0d0;
font-weight: bold;
cursor: pointer;
}
+*/
.alcohol-item.empty {
background-color: #f0f0f0;
@@ -165,3 +177,9 @@
.profile-info h2 {
margin: 0; /* 기본 마진 제거 */
}
+
+.nickname-error {
+ color: red;
+ font-size: 12px;
+ margin-top: 5px;
+}
\ No newline at end of file
diff --git a/client/src/pages/mypage.js b/client/src/pages/mypage.js
index 28f3417..05e17b1 100644
--- a/client/src/pages/mypage.js
+++ b/client/src/pages/mypage.js
@@ -1,29 +1,76 @@
-import React, { useState, useRef } from "react";
+import React, { useState, useRef, useEffect } from "react";
import "./mypage.css"; // CSS 파일을 불러옵니다
import Header from "../components/common/Header";
+import { useNavigate } from "react-router-dom";
+import { getUserInfo, getUserBookmarks, updateUserInfo, updateUserPreference, updateUserProfileImage } from "../api/mypageapi"; // API 함수 import
function Mypage() {
const [isEditing, setIsEditing] = useState(false); // 편집 모드 상태
const [nickname, setNickname] = useState("Nickname"); // 닉네임 상태
+ const [nicknameError, setNicknameError] = useState(""); // 닉네임 오류 메시지 상태
const [preferenceScore, setPreferenceScore] = useState(""); // 선호도수 상태
const [profileImage, setProfileImage] = useState("default-avatar.png"); // 프로필 이미지 상태
-
const fileInputRef = useRef(null); // 파일 입력을 위한 ref 생성
+ const navigate = useNavigate();
+
+ // 페이지 로딩 시 사용자 정보 가져오기
+ useEffect(() => {
+ const fetchUserInfo = async () => {
+ try {
+ const userInfo = await getUserInfo();
+ setNickname(userInfo.nickname);
+ setPreferenceScore(userInfo.preference || "");
+ setProfileImage(userInfo.profileImage || "default-avatar.png");
+ } catch (error) {
+ console.error("사용자 정보 조회 중 오류 발생:", error.message);
+ }
+ };
+
+ fetchUserInfo();
+ }, []);
const handleEditClick = () => {
setIsEditing(true); // 편집 모드로 변경
+ setNicknameError(""); // 편집 모드 들어갈 때 오류 메시지 초기화
};
- const handleSaveClick = () => {
+ const handleSaveClick = async () => {
setIsEditing(false); // 편집 모드 해제
- };
- const handlePreferenceChange = (e) => {
- setPreferenceScore(e.target.value); // 선호도수 상태 업데이트
+ try {
+ // 닉네임 수정
+ if (nickname !== "") {
+ await updateUserInfo(nickname);
+ }
+ // 선호 도수 설정
+ if (preferenceScore !== "") {
+ await updateUserPreference(preferenceScore);
+ }
+ // 프로필 사진 수정
+ if (profileImage !== "default-avatar.png") {
+ await updateUserProfileImage(profileImage);
+ }
+ } catch (error) {
+ console.error("수정 중 오류 발생:", error.message);
+ }
};
const handleNicknameChange = (e) => {
- setNickname(e.target.value); // 닉네임 상태 업데이트
+ const newNickname = e.target.value;
+ if (newNickname.length <= 10) {
+ setNickname(newNickname); // 닉네임 상태 업데이트
+ setNicknameError(""); // 오류 메시지 초기화
+ } else {
+ setNicknameError("글자수가 초과되었습니다"); // 글자수가 초과된 경우 오류 메시지 설정
+ }
+ };
+
+ const handlePreferenceChange = (e) => {
+ const value = e.target.value;
+
+ if (/^\d*$/.test(value)) {
+ setPreferenceScore(value); // 숫자만 입력된 경우 상태 업데이트
+ }
};
const handleImageChange = (e) => {
@@ -45,6 +92,14 @@ function Mypage() {
fileInputRef.current.click(); // 파일 입력 클릭
};
+ const handleNicknameFocus = () => {
+ setNickname(""); // 입력란 클릭 시 빈 칸으로 설정
+ };
+
+ const handleAddAlcoholClick = () => {
+ navigate("/cheongtakju");
+ };
+
return (
@@ -58,8 +113,10 @@ function Mypage() {
+ {nicknameError &&
{nicknameError}
}
+
담은 술
-
-
-
-
-
- {/* 두 번째 줄 */}
-
-
-
-
+
-
+
+
+
+
+
+
+
+ {/* 두 번째 줄 */}
+
+
+
+