diff --git a/src/app/components/chattingComponent/SendButton.tsx b/src/app/components/chattingComponent/SendButton.tsx index 9c107bc..75079df 100644 --- a/src/app/components/chattingComponent/SendButton.tsx +++ b/src/app/components/chattingComponent/SendButton.tsx @@ -27,17 +27,18 @@ const SendButton = ({ stompClient, recipientNicknameDecoding }: SendButtonProps) selectedUserName, } = useChattingStore(); - //메시지를 상태에 추가하는 부분을 stompClient.send 메서드 호출 이후로 이동하여 메시지가 성공적으로 전송된 후에만 상태에 추가함 const sendMessage = (event: React.FormEvent) => { event.preventDefault(); - if (currentMessage.trim() && recipientNicknameDecoding.trim() !== "") { + if (currentMessage.trim()) { const chatMessage: Message = { sender: userName, content: currentMessage, recipient: recipientNicknameDecoding, }; if (stompClient) { + // 현재 사용자가 채팅방에 참여하게 만드는 서버의 특정 endpoint로 메시지를 전송 + //sender :+ type: + recipient: resume id를 추적해보자 recipient: stompClient.send( "/app/send.message", {}, @@ -50,7 +51,8 @@ const SendButton = ({ stompClient, recipientNicknameDecoding }: SendButtonProps) ); } - setCurrentMessage(""); + setMessages((prevMessages: Message[]) => [...prevMessages, chatMessage]); + setCurrentMessage(""); // 메시지 보낸 후 현재 메시지를 초기화합니다. } }; diff --git a/src/app/components/commonComponents/Projectmenu.tsx b/src/app/components/commonComponents/Projectmenu.tsx index 2aab0d2..2aa4844 100644 --- a/src/app/components/commonComponents/Projectmenu.tsx +++ b/src/app/components/commonComponents/Projectmenu.tsx @@ -1,53 +1,137 @@ -/* eslint-disable react-hooks/exhaustive-deps */ "use client"; -import userStore from "@/app/store/homePageStore/useUserRoleSetting"; /** @jsxImportSource @emotion/react */ import { - titleAndMenuStyle, - titleAndMenuStylePalette, - homeTitleStyle, - homeMenuStyle, -} from "@/app/styleComponents/homePageStyles/HomePageStyles"; + HomePageBtnStyles, + navStyles, + paletteStyle, +} from "@/app/styleComponents/newHomePageStyles/navStyles"; import Link from "next/link"; -import React, { useEffect, useState } from "react"; +import { useRouter } from "next/navigation"; +import { useEffect, useState } from "react"; import { useCookies } from "react-cookie"; -const ProjectMenu = () => { - const [cookies] = useCookies(["accessToken", "role"]); - const [isCookieThere, setIsCookieThere] = useState(false); - const { userRole } = userStore(); +const NavBar = () => { + const router = useRouter(); + + const [cookies, , removeCookie] = useCookies([ + "email", + "nickname", + "accessToken", + "refreshToken", + "role", + ]); + + const [isCookiesThere, setIsCookiesThere] = useState(); + const [isItBasic, setIsItBasic] = useState(false); + const [isItPro, setIsItPro] = useState(false); + const [cookieNickname, setCookieNickname] = useState(""); useEffect(() => { + setCookieNickname(cookies.nickname); if (cookies.accessToken) { - setIsCookieThere(true); + setIsCookiesThere(true); + } + if (cookies.role === "BASIC") { + setIsItBasic(true); + } else { + setIsItBasic(false); } - }, []); + if (cookies.role === "COMPANY_PRO") { + setIsItPro(true); + } else { + setIsItPro(false); + } + }, [cookies]); + + const removeCookies = async () => { + removeCookie("email", { path: "/" }); + removeCookie("nickname", { path: "/" }); + removeCookie("accessToken", { path: "/" }); + removeCookie("refreshToken", { path: "/" }); + removeCookie("role", { path: "/" }); + window.location.reload(); + }; return ( -
-
- -

Palette*

+
+

+ {isCookiesThere ? ( + <> + + + + ) : ( + <> + + + + )} +
+ ); }; -export default ProjectMenu; +export default NavBar; diff --git a/src/app/components/newHomePageComponents/mainBodySections/RightSection.tsx b/src/app/components/newHomePageComponents/mainBodySections/RightSection.tsx index 9576c37..7915867 100644 --- a/src/app/components/newHomePageComponents/mainBodySections/RightSection.tsx +++ b/src/app/components/newHomePageComponents/mainBodySections/RightSection.tsx @@ -14,14 +14,13 @@ import { useQuery } from "@tanstack/react-query"; import { useEffect, useState } from "react"; const RightSection = () => { - const [data, setData] = useState(); + const [data, setData] = useState(); const getAllPainters = useQuery({ queryKey: ["getAllPainters"], queryFn: async () => { - const response = await userAxiosWithAuth.get( - `${process.env.NEXT_PUBLIC_BASE_URL}/users` - ); + const response = await userAxiosWithAuth.get(`${process.env.NEXT_PUBLIC_BASE_URL}/users`); setData(response.data.data); + console.log("페인터 데이터 확인용 ::: ", response.data.data.role); return response; }, staleTime: Infinity, @@ -29,6 +28,7 @@ const RightSection = () => { type PainterData = { name: string; email: string; + role: string; }; function shuffle(array: PainterData[]) { for (let i = array.length - 1; i > 0; i--) { @@ -38,10 +38,12 @@ const RightSection = () => { return array; } const randomPainters1: PainterData[] = data - ? shuffle([...data]).slice(0, 4) + ? shuffle([...data.filter((painter: PainterData) => painter.role === "BASIC")]).slice(0, 4) : []; + + console.log(randomPainters1); const randomPainters2: PainterData[] = data - ? shuffle([...data]).slice(0, 4) + ? shuffle([...data.filter((painter: PainterData) => painter.role === "BASIC")]).slice(0, 4) : []; useEffect(() => { @@ -62,9 +64,7 @@ const RightSection = () => { return (

{painter.name}

-

- {painter.email.slice(0, 4)}***@*****.com -

+

{painter.email.slice(0, 4)}***@*****.com

); }) @@ -79,9 +79,7 @@ const RightSection = () => { return (

{painter.name}

-

- {painter.email.slice(0, 4)}***@*****.com -

+

{painter.email.slice(0, 4)}***@*****.com

); }) diff --git a/src/app/components/newHomePageComponents/mainBodySections/middleSectionComponents/ResumePart.tsx b/src/app/components/newHomePageComponents/mainBodySections/middleSectionComponents/ResumePart.tsx index c1ddcec..8ba8dfe 100644 --- a/src/app/components/newHomePageComponents/mainBodySections/middleSectionComponents/ResumePart.tsx +++ b/src/app/components/newHomePageComponents/mainBodySections/middleSectionComponents/ResumePart.tsx @@ -28,7 +28,7 @@ const ResumePart = () => { e.stopPropagation(); e.preventDefault(); setSelectedUserName(nickname); // 클릭된 유저의 userName으로 상태 업데이트 - router.push(`/pages/chattingPage/${decodeURIComponent(nickname)}`); + router.push(`/pages/chattingPage/${encodeURIComponent(nickname)}`); }; const getResume = useQuery({ diff --git a/src/app/components/resumeReadComponents/RRRefCheckSpace.tsx b/src/app/components/resumeReadComponents/RRRefCheckSpace.tsx index 730e5c1..600c59c 100644 --- a/src/app/components/resumeReadComponents/RRRefCheckSpace.tsx +++ b/src/app/components/resumeReadComponents/RRRefCheckSpace.tsx @@ -5,10 +5,7 @@ import useChattingStore from "@/app/store/chattingStore/useChattingStore"; import useRefCheckOnResumeStore from "@/app/store/reviewRequestStore/useRefCheckOnResumeStore"; import { flexCenterX2 } from "@/app/styleComponents/commonStyles/commonStyles"; import { signInUpButtonStyle } from "@/app/styleComponents/commonStyles/inputAndButtonAndText"; -import { - labelStyles, - pageStyle, -} from "@/app/styleComponents/projectTemplateStyles/templateStyle"; +import { labelStyles, pageStyle } from "@/app/styleComponents/projectTemplateStyles/templateStyle"; import { eachSpaceStyle, styleAboutProblem, @@ -33,7 +30,7 @@ const RRRefCheckSpace = () => { e.stopPropagation(); e.preventDefault(); setSelectedUserName(nickname); // 클릭된 유저의 userName으로 상태 업데이트 - router.push(`/pages/chattingPage/${decodeURIComponent(nickname)}`); + router.push(`/pages/chattingPage/${encodeURIComponent(nickname)}`); }; return ( @@ -76,18 +73,10 @@ const RRRefCheckSpace = () => { } } }} - css={[ - resumeStyles.chatButton, - `width: 80px; height: 30px;`, - ]} + css={[resumeStyles.chatButton, `width: 80px; height: 30px;`]} >
- chatting-icon + chatting-icon

커피챗

@@ -121,13 +110,7 @@ const RRRefCheckSpace = () => { ); }) ) : ( -
+

팔레트에 구독을 하시고 평판을 보세요!

구독하러 가기 diff --git a/src/app/components/searchComponents/SearchMainBody.tsx b/src/app/components/searchComponents/SearchMainBody.tsx index 1c76ab1..1ce9e03 100644 --- a/src/app/components/searchComponents/SearchMainBody.tsx +++ b/src/app/components/searchComponents/SearchMainBody.tsx @@ -64,7 +64,7 @@ const SearchMainBody = () => { e.stopPropagation(); e.preventDefault(); setSelectedUserName(name); // 클릭된 유저의 userName으로 상태 업데이트 - router.push(`/pages/chattingPage/${decodeURIComponent(name)}`); + router.push(`/pages/chattingPage/${encodeURIComponent(name)}`); }; return ( @@ -167,10 +167,7 @@ const SearchMainBody = () => { setPageNum(1); sendSearch.mutate(); }} - css={[ - pageButtonStyles.button, - searchedData.length < 6 && `display: none;`, - ]} + css={[pageButtonStyles.button, searchedData.length < 6 && `display: none;`]} > 더 불러오기 diff --git a/src/app/pages/chattingPage/[recipientnickname]/page.tsx b/src/app/pages/chattingPage/[recipientnickname]/page.tsx index b79cb9c..1b9b9af 100644 --- a/src/app/pages/chattingPage/[recipientnickname]/page.tsx +++ b/src/app/pages/chattingPage/[recipientnickname]/page.tsx @@ -97,6 +97,7 @@ const ChattingPage = () => { const [subscription, setSubscription] = useState(null); const chatUser = cookies.nickname; const [isUserListUpdated, setIsUserListUpdated] = useState(false); + const [isWebSocketInitialized, setIsWebSocketInitialized] = useState(false); useEffect(() => { if (!cookies.accessToken) { @@ -113,9 +114,9 @@ const ChattingPage = () => { }, [isUserListUpdated]); //처음 마운트되면서 채팅 리스트를 가져오는 함수 - useEffect(() => { - fetchChatList(chatUser); - }, []); + // useEffect(() => { + // fetchChatList(chatUser); + // }, []); console.log("chatlist ::::: ", chatList); // console.log("recipient nickname:", recipientnickname); @@ -129,6 +130,7 @@ const ChattingPage = () => { // console.log(">>>>>>>>>>client", client); setStompClient(client); // 상태로 Stomp 클라이언트 설정 + setIsWebSocketInitialized(true); }; useEffect(() => { @@ -138,7 +140,13 @@ const ChattingPage = () => { }, [stompClient]); useEffect(() => { - initializeWebSocketConnection(); + if (!isWebSocketInitialized) { + initializeWebSocketConnection(); // 컴포넌트가 처음 마운트될 때만 웹소켓 초기화 + } + }, [isWebSocketInitialized, initializeWebSocketConnection]); + + // 컴포넌트가 언마운트될 때 웹소켓 연결 종료 + useEffect(() => { return () => { if (stompClient) { stompClient.disconnect(() => { @@ -146,26 +154,45 @@ const ChattingPage = () => { }); } }; - }, []); + }, [stompClient]); + + // useEffect(() => { + // initializeWebSocketConnection(); + + // }, []); const onMessageReceived = async (payload: Payload) => { if (stompClient) { console.log("Message received", payload); - const receivedmessage: Message = JSON.parse(payload.body); - setMessages((prevMessages: Message[]) => [...prevMessages, receivedmessage]); + const receivedMessage: Message = JSON.parse(payload.body); + + // 이미 받은 메시지인지 확인 후 상태 업데이트 + if (!messages.some((message) => message.id === receivedMessage.id)) { + setMessages((prevMessages: Message[]) => [...prevMessages, receivedMessage]); + } } else { console.error("stompClient is null, cannot process received messages."); } }; + // const onMessageReceived = async (payload: Payload) => { + // if (stompClient) { + // console.log("Message received", payload); + // const receivedmessage: Message = JSON.parse(payload.body); + // setMessages((prevMessages: Message[]) => [...prevMessages, receivedmessage]); + // } else { + // console.error("stompClient is null, cannot process received messages."); + // } + // }; + //채팅방 메시지 불러오는 useEffect - useEffect(() => { - console.log("Current messages state:", messages); - if (userName && selectedUserName) { - fetchMessages(userName, selectedUserName); - } - }, [userName, selectedUserName]); + // useEffect(() => { + // console.log("Current messages state:", messages); + // if (userName && selectedUserName) { + // fetchMessages(userName, selectedUserName); + // } + // }, [userName, selectedUserName]); const onConnected = () => { if (stompClient) { @@ -267,6 +294,7 @@ const ChattingPage = () => { removeChat(chatName); setSelectedUserName(""); setMessages([]); + setIsUserListUpdated(true); // 채팅 리스트에서 다음 사용자로 이동 const nextChat = chatList.find((name) => name !== chatName) || ""; if (chatList) { diff --git a/src/app/pages/chattingPage/page.tsx b/src/app/pages/chattingPage/page.tsx index 5a62c8f..bb2c0ca 100644 --- a/src/app/pages/chattingPage/page.tsx +++ b/src/app/pages/chattingPage/page.tsx @@ -23,31 +23,20 @@ import { mainContainer, mainMessageContainer, messageClose, - messageStyle, - messageTitle, messageTitleandCloseContainer, messagesAndInputcontainer, - messagesContainer, messagesContainerEmpty, messagesContainerLeftSide, messagesContainerRightSide, - myMessage, - myName, - otherMessage, - otherName, paletteIconCss, - profilePic, - profilePicContainer, searchContainer, searchIconAndbarContainer, searchInput, } from "@/app/styleComponents/chattingStyles/chatStyles"; import { justifyandFlexWrapper } from "@/app/styleComponents/homePageStyles/HomePageStyles"; -import HomeHeader from "@/app/components/homePageComponents/HomeHeader"; //image import cancel from "@/app/assets/svg/cancel.svg"; -import defaultProfile from "@/app/assets/svg/profilePicture.svg"; import searchIcon from "@/app/assets/svg/search.svg"; import paletteIcon from "@/app/assets/svg/paletteicon.svg"; import NavBar from "@/app/components/newHomePageComponents/NavBar"; @@ -98,6 +87,7 @@ const ChattingPage = () => { const [subscription, setSubscription] = useState(null); const chatUser = cookies.nickname; const [isUserListUpdated, setIsUserListUpdated] = useState(false); + const [isWebSocketInitialized, setIsWebSocketInitialized] = useState(false); useEffect(() => { if (!cookies.accessToken) { @@ -130,6 +120,7 @@ const ChattingPage = () => { // console.log(">>>>>>>>>>client", client); setStompClient(client); // 상태로 Stomp 클라이언트 설정 + setIsWebSocketInitialized(true); }; useEffect(() => { @@ -139,7 +130,13 @@ const ChattingPage = () => { }, [stompClient]); useEffect(() => { - initializeWebSocketConnection(); + if (!isWebSocketInitialized) { + initializeWebSocketConnection(); // 컴포넌트가 처음 마운트될 때만 웹소켓 초기화 + } + }, [isWebSocketInitialized, initializeWebSocketConnection]); + + // 컴포넌트가 언마운트될 때 웹소켓 연결 종료 + useEffect(() => { return () => { if (stompClient) { stompClient.disconnect(() => { @@ -147,13 +144,32 @@ const ChattingPage = () => { }); } }; - }, []); + }, [stompClient]); + + // useEffect(() => { + // initializeWebSocketConnection(); + + // }, []); + + // const onMessageReceived = async (payload: Payload) => { + // if (stompClient) { + // console.log("Message received", payload); + // const receivedMessage: Message = JSON.parse(payload.body); + + // // 이미 받은 메시지인지 확인 후 상태 업데이트 + // if (!messages.some((message) => message.id === receivedMessage.id)) { + // setMessages((prevMessages: Message[]) => [...prevMessages, receivedMessage]); + // } + // } else { + // console.error("stompClient is null, cannot process received messages."); + // } + // }; const onMessageReceived = async (payload: Payload) => { if (stompClient) { console.log("Message received", payload); - const message: Message = JSON.parse(payload.body); - setMessages((prevMessages: Message[]) => [...prevMessages, message]); + const receivedmessage: Message = JSON.parse(payload.body); + setMessages((prevMessages: Message[]) => [...prevMessages, receivedmessage]); } else { console.error("stompClient is null, cannot process received messages."); } diff --git a/src/app/pages/resumeRead/[id]/page.tsx b/src/app/pages/resumeRead/[id]/page.tsx index efb57e1..776ab62 100644 --- a/src/app/pages/resumeRead/[id]/page.tsx +++ b/src/app/pages/resumeRead/[id]/page.tsx @@ -14,10 +14,7 @@ import RRForeignLanguageSpace from "@/app/components/resumeReadComponents/sectio import RRProjectList from "@/app/components/resumeReadComponents/section/RRProjectList"; import RRTechStackSpace from "@/app/components/resumeReadComponents/section/RRTechStackSpace"; import RRTopLeftSpace from "@/app/components/resumeReadComponents/section/RRTopLeftSpace"; -import { - flexCenterX2, - widthHeightFull, -} from "@/app/styleComponents/commonStyles/commonStyles"; +import { flexCenterX2, widthHeightFull } from "@/app/styleComponents/commonStyles/commonStyles"; import { sectionStyle } from "@/app/styleComponents/projectTemplateStyles/templateStyle"; import { pageStyle, @@ -55,7 +52,7 @@ const ResumeRead = () => { e.stopPropagation(); e.preventDefault(); setSelectedUserName(nickname); // 클릭된 유저의 userName으로 상태 업데이트 - router.push(`/pages/chattingPage/${decodeURIComponent(nickname)}`); + router.push(`/pages/chattingPage/${encodeURIComponent(nickname)}`); }; const getResume = useQuery({ @@ -128,10 +125,7 @@ const ResumeRead = () => { {isProjClicked && ( - + )}
diff --git a/src/app/pages/ticketPage/page.tsx b/src/app/pages/ticketPage/page.tsx index cb39f85..9db6cff 100644 --- a/src/app/pages/ticketPage/page.tsx +++ b/src/app/pages/ticketPage/page.tsx @@ -36,6 +36,7 @@ import { orderProducts } from "@/app/constants/orderProducts"; import userAxiosWithAuth from "@/app/utils/useAxiosWithAuth"; import { useCookies } from "react-cookie"; import { useRouter } from "next/navigation"; +import { HomePageBtnStyles, navStyles } from "@/app/styleComponents/newHomePageStyles/navStyles"; interface User { address: string; @@ -56,7 +57,13 @@ interface SetOrder { const TicketPage = () => { const { isModalOpen, togglePayModal } = useModalstore(); - const [cookies] = useCookies(["accessToken", "nickname", "role"]); + const [cookies, , removeCookie] = useCookies([ + "email", + "nickname", + "accessToken", + "refreshToken", + "role", + ]); const [isSetOrder, setIsSetOrder] = useState({ orderUid: "", amount: 0, @@ -71,8 +78,39 @@ const TicketPage = () => { telephone: "", }, }); + const [orderUserNameDecode, setOrderUserNameDecode] = useState(""); + const [isCookiesThere, setIsCookiesThere] = useState(); + const [isItBasic, setIsItBasic] = useState(false); + const [isItPro, setIsItPro] = useState(false); + const [cookieNickname, setCookieNickname] = useState(""); - console.log(isSetOrder); + const removeCookies = async () => { + removeCookie("email", { path: "/" }); + removeCookie("nickname", { path: "/" }); + removeCookie("accessToken", { path: "/" }); + removeCookie("refreshToken", { path: "/" }); + removeCookie("role", { path: "/" }); + window.location.reload(); + }; + + useEffect(() => { + setCookieNickname(cookies.nickname); + if (cookies.accessToken) { + setIsCookiesThere(true); + } + if (cookies.role === "BASIC") { + setIsItBasic(true); + } else { + setIsItBasic(false); + } + if (cookies.role === "COMPANY_PRO") { + setIsItPro(true); + } else { + setIsItPro(false); + } + }, [cookies]); + + console.log("isSetOrder : ", isSetOrder); const router = useRouter(); useEffect(() => { @@ -82,6 +120,10 @@ const TicketPage = () => { }, []); const handleBuyTicket = async () => { + if (isItPro === true) { + alert("이미 구독 중이에요! 다른 페인터들의 작품을 둘러보세요."); + return; + } try { // axios.get의 인자는 요청을 보낼 URL입니다. const body = { @@ -95,7 +137,8 @@ const TicketPage = () => { setIsSetOrder(response.data.data); // 요청이 성공적으로 처리되면 실행될 코드 - + const OrderUserNameDecode = decodeURIComponent(response.data.data.user.name); + setOrderUserNameDecode(OrderUserNameDecode); console.log("res data", response.data); } catch (error) { // 에러 처리 코드 @@ -136,13 +179,13 @@ const TicketPage = () => { merchant_uid: isSetOrder.orderUid, amount: isSetOrder.amount, name: isSetOrder.itemName, - buyer_name: isSetOrder.buyerName, + buyer_name: orderUserNameDecode, buyer_tel: isSetOrder.user.telephone, buyer_email: isSetOrder.user.email, buyer_addr: isSetOrder.buyerAddress, buyer_postcode: "00000", }; - + console.log("orderUserNameDecode", orderUserNameDecode); //front -> kg : request //kg -> front : response @@ -212,20 +255,6 @@ const TicketPage = () => { <>
- {isClient && cookies.nickname ? ( -
- 안녕하세요, {cookies.nickname} 님! -
- ) : ( -
- - 로그인 - - - 회원가입 - -
- )}
void; recipientNicknameDecoding: string; setrecipientNicknameDecoding: (recipientNickname: string) => void; + newMessage: Message | null; + setNewMessage: (message: Message | null) => void; } const useChattingStore = create((set) => ({ @@ -93,6 +95,8 @@ const useChattingStore = create((set) => ({ ...state, recipientNicknameDecoding: recipientNickname, })), + newMessage: null, + setNewMessage: (message) => set({ newMessage: message }), })); export const useInitializeSelectedUserName = () => { diff --git a/src/app/styleComponents/chattingStyles/chatStyles.ts b/src/app/styleComponents/chattingStyles/chatStyles.ts index ad01909..beb5352 100644 --- a/src/app/styleComponents/chattingStyles/chatStyles.ts +++ b/src/app/styleComponents/chattingStyles/chatStyles.ts @@ -38,6 +38,7 @@ export const guestNameAndCancelContainer = css` height: 80%; justify-content: flex-start; gap: 60px; + overflow-y: scroll; `; export const guestNameAndCancel = css`