Skip to content

Commit

Permalink
FIX: 채팅/티켓 구매 페이지 버그 수정
Browse files Browse the repository at this point in the history
  • Loading branch information
Matilda0730 authored Apr 18, 2024
2 parents 67d2c36 + 695239c commit 03d033d
Show file tree
Hide file tree
Showing 12 changed files with 269 additions and 133 deletions.
8 changes: 5 additions & 3 deletions src/app/components/chattingComponent/SendButton.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -27,17 +27,18 @@ const SendButton = ({ stompClient, recipientNicknameDecoding }: SendButtonProps)
selectedUserName,
} = useChattingStore();

//메시지를 상태에 추가하는 부분을 stompClient.send 메서드 호출 이후로 이동하여 메시지가 성공적으로 전송된 후에만 상태에 추가함
const sendMessage = (event: React.FormEvent<HTMLFormElement>) => {
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",
{},
Expand All @@ -50,7 +51,8 @@ const SendButton = ({ stompClient, recipientNicknameDecoding }: SendButtonProps)
);
}

setCurrentMessage("");
setMessages((prevMessages: Message[]) => [...prevMessages, chatMessage]);
setCurrentMessage(""); // 메시지 보낸 후 현재 메시지를 초기화합니다.
}
};

Expand Down
152 changes: 118 additions & 34 deletions src/app/components/commonComponents/Projectmenu.tsx
Original file line number Diff line number Diff line change
@@ -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<boolean>();
const [isItBasic, setIsItBasic] = useState<boolean>(false);
const [isItPro, setIsItPro] = useState<boolean>(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 (
<div css={titleAndMenuStyle}>
<div css={titleAndMenuStylePalette}>
<Link href={"/"}>
<p css={homeTitleStyle}>Palette*</p>
<nav css={navStyles.containerStyle}>
<div css={[navStyles.leftStyle]}>
<Link href={"/"} css={[paletteStyle]}>
{isItPro ? "PalettePro*" : "Palette*"}
</Link>
{isItBasic ? (
<>
<Link href={"/pages/workspacePage"} css={navStyles.LinkTextStyle}>
워크스페이스
</Link>
<Link href={"/pages/reviewRequestPage"} css={navStyles.LinkTextStyle}>
평판
</Link>
</>
) : (
<Link
href={"/pages/ticketPage"}
css={navStyles.LinkTextStyle}
onClick={(e) => {
if (!cookies.accessToken) {
e.preventDefault();
if (confirm("로그인 후 이용하실 수 있습니다.")) {
router.push("/pages/loginPage");
}
}
}}
>
{isItPro ? "구독중✓" : "구독"}
</Link>
)}
<Link
href={"/pages/chattingPage"}
css={navStyles.LinkTextStyle}
onClick={(e) => {
if (!cookies.accessToken) {
e.preventDefault();
if (confirm("로그인 후 이용하실 수 있습니다.")) {
router.push("/pages/loginPage");
}
}
}}
>
채팅
</Link>
</div>
<nav css={homeMenuStyle}>
<span>
{cookies.role === "COMPANY" ? (
<Link href="/pages/ticketPage">티켓 구독</Link>
) : isCookieThere ? (
<Link href="/pages/workspacePage">워크스페이스</Link>
) : (
<Link href="/pages/loginPage">워크스페이스</Link>
<div css={[navStyles.rightStyle]}>
<p css={[`margin-right: 30px; @media (max-width: 975px) {display: none;}`]}>
{isCookiesThere && (
<>
좋은 하루 되세요, <strong>{cookieNickname}</strong>
</>
)}
</span>

<Link href={"/pages/chattingPage"}>
<span>채팅</span>
</Link>
</nav>
</div>
</p>
{isCookiesThere ? (
<>
<button
css={[HomePageBtnStyles.style1, `width: 100px; &:hover{width: 105px;}`]}
onClick={() => router.push("/pages/myPage")}
>
마이페이지
</button>
<button css={HomePageBtnStyles.style2} onClick={() => removeCookies()}>
로그아웃
</button>
</>
) : (
<>
<button css={HomePageBtnStyles.style1} onClick={() => router.push("/pages/loginPage")}>
로그인
</button>
<button css={HomePageBtnStyles.style2} onClick={() => router.push("/pages/signUpPage")}>
회원가입
</button>
</>
)}
</div>
</nav>
);
};

export default ProjectMenu;
export default NavBar;
Original file line number Diff line number Diff line change
Expand Up @@ -14,21 +14,21 @@ import { useQuery } from "@tanstack/react-query";
import { useEffect, useState } from "react";

const RightSection = () => {
const [data, setData] = useState();
const [data, setData] = useState<PainterData[] | undefined>();
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,
});
type PainterData = {
name: string;
email: string;
role: string;
};
function shuffle(array: PainterData[]) {
for (let i = array.length - 1; i > 0; i--) {
Expand All @@ -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(() => {
Expand All @@ -62,9 +64,7 @@ const RightSection = () => {
return (
<div key={index} css={[PainterIntroStyles.eachStyle(index)]}>
<p css={[PainterIntroStyles.name]}>{painter.name}</p>
<p css={[PainterIntroStyles.email]}>
{painter.email.slice(0, 4)}***@*****.com
</p>
<p css={[PainterIntroStyles.email]}>{painter.email.slice(0, 4)}***@*****.com</p>
</div>
);
})
Expand All @@ -79,9 +79,7 @@ const RightSection = () => {
return (
<div key={index} css={[PainterIntroStyles.eachStyle(index)]}>
<p css={[PainterIntroStyles.name]}>{painter.name}</p>
<p css={[PainterIntroStyles.email]}>
{painter.email.slice(0, 4)}***@*****.com
</p>
<p css={[PainterIntroStyles.email]}>{painter.email.slice(0, 4)}***@*****.com</p>
</div>
);
})
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down
27 changes: 5 additions & 22 deletions src/app/components/resumeReadComponents/RRRefCheckSpace.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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 (
Expand Down Expand Up @@ -76,18 +73,10 @@ const RRRefCheckSpace = () => {
}
}
}}
css={[
resumeStyles.chatButton,
`width: 80px; height: 30px;`,
]}
css={[resumeStyles.chatButton, `width: 80px; height: 30px;`]}
>
<div css={[`display: flex; gap: 5px;`]}>
<Image
src={coffee}
alt="chatting-icon"
width={22}
height={22}
/>
<Image src={coffee} alt="chatting-icon" width={22} height={22} />
<p css={[`transform: translateY(2.5px);`]}>커피챗</p>
</div>
</button>
Expand Down Expand Up @@ -121,13 +110,7 @@ const RRRefCheckSpace = () => {
);
})
) : (
<div
css={[
pageStyle,
flexCenterX2,
`width: 100%; height: 100px; row-gap: 10px;`,
]}
>
<div css={[pageStyle, flexCenterX2, `width: 100%; height: 100px; row-gap: 10px;`]}>
<p css={[flexCenterX2]}>팔레트에 구독을 하시고 평판을 보세요!</p>
<Link href={"/pages/ticketPage"} css={[signInUpButtonStyle]}>
구독하러 가기
Expand Down
7 changes: 2 additions & 5 deletions src/app/components/searchComponents/SearchMainBody.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand Down Expand Up @@ -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;`]}
>
더 불러오기
</button>
Expand Down
Loading

0 comments on commit 03d033d

Please sign in to comment.