Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feat/#326 vote credential #327

Merged
merged 2 commits into from
Aug 24, 2023
Merged

Feat/#326 vote credential #327

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
dbe759c
[ feat ] withCredentials 설정 - 투표하기 기능에만 적용
NYeonK Aug 22, 2023
f3e8277
[ feat ] 투표 기능에 로그인 모달 제거
NYeonK Aug 23, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion src/@components/MainPage/hooks/useBallotLists.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,11 @@ import { PiickleSWRResponse } from "../../../types/remote/swr";

export function useBallotLists(shoudOnSuspense = false) {
const swrSetting = shoudOnSuspense ? { suspense: true } : { suspense: false };
const { data } = useSWR<PiickleSWRResponse<BallotList[]>>(`${PATH.BALLOTS}`, realReq.GET_SWR, swrSetting);
const { data } = useSWR<PiickleSWRResponse<BallotList[]>>(
`${PATH.BALLOTS}`,
(url) => realReq.GET_SWR(url, { withCredentials: true }),
swrSetting,
);
Comment on lines +10 to +14
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

WithCredentials: true 옵션을 쓸 경우에는 쿠키로 통신하는건가요?! 비회원 로직을 서버랑 어떻게 짠건지 궁금해요!

Copy link
Contributor Author

@NYeonK NYeonK Aug 24, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

넵 맞습니다! withCredentials 설정을 통해서 투표 관련 get, post API에만 쿠키 통신을 허용했어요!

비회원은 따로 쿠키가 없기 때문에, 요청에 쿠키가 없으면 세션아이디를 따로 만들어요. 이 아이디를 사용해서 비즈니스 로직을 수행한다고 합니다! (서버)

💡 왜 투표 API에만 설정했는가!

기존에는 전역에 withCredentials: true를 설정했었는데요. 그렇게 되면 프론트에서 작업할 때, 모바일웹 확인이 어렵습니다. (로컬에서)

저희가 withCredentials 설정을 하는 것처럼, 서버 측에서도 Access-Control-Allow-Origin 설정을 해줘야 해요! 이 설정에 웹 주소가 들어가지 않으면, 저희 지금 DEV 서비스 투표 부분에 데이터가 없는 것처럼 통신을 하지 못하는데요👀

모바일주소가 알다시피.. http://IP주소:5173 라 서버에서 미리 설정을 해주지 못해요.
그래서 전역 설정하면 아예 모바일 확인이 어려우니 투표 부분만 보지 말자! 라는 차선책으로 부분 적용하게 되었습니다!!

@ilmerry 이해안가는 부분이 있다면 말해주세요😋

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

아하 그래서 로컬에서는 투표 부분이 에러가 난거군요! 쿠키가 없으면 세션아이디 만드는 방법 굉장히 신박하네요,,

그러면 원래는 쿠키를 써서 로그인을 구현했다가, 최근에 그 방식을 로컬스토리지로 바꾼거 맞나요??


return {
ballotLists: data?.data,
Expand Down
33 changes: 4 additions & 29 deletions src/@components/VotePage/VoteContent/BeforeVoteList/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,8 @@ import { useState } from "react";

import { IcCheckWithNoBg } from "../../../../asset/icon";
import { voteApi } from "../../../../core/api/vote";
import useAuth from "../../../../core/hooks/useAuth";
import { BallotTopicData } from "../../../../types/ballots";
import { GTM_CLASS_NAME } from "../../../../util/const/gtm";
import useModal from "../../../@common/hooks/useModal";
import LoginModal from "../../../@common/LoginModal";
import St from "./style";

interface BeforeVoteListProps {
Expand All @@ -15,11 +12,8 @@ interface BeforeVoteListProps {
}

export default function BeforeVoteList(props: BeforeVoteListProps) {
const { isLogin } = useAuth();
const { ballotTopic, mutateBallotState } = props;

const { isModalOpen: isLoginModalOpen, toggleModal: toggleLoginModal } = useModal();

const [currentIdx, setCurrentIdx] = useState("");

const handleClickItem = (key: string) => {
Expand All @@ -29,20 +23,10 @@ export default function BeforeVoteList(props: BeforeVoteListProps) {
});
};

const handleClickVote = () => {
if (!isLogin) {
toggleLoginModal();
return;
}

if (currentIdx !== "") {
handlePost();
mutateBallotState();
}
};

const handlePost = () => {
const handlePostVote = () => {
if (currentIdx === "") return;
voteApi.postVote({ ballotTopicId: ballotTopic.ballotTopic._id, ballotItemId: currentIdx });
mutateBallotState();
};

return (
Expand All @@ -59,18 +43,9 @@ export default function BeforeVoteList(props: BeforeVoteListProps) {
))}
</St.VoteOptionContainer>

<St.VoteBtn role="dialog" className={GTM_CLASS_NAME.piickleMeVote} onClick={handleClickVote}>
<St.VoteBtn role="dialog" className={GTM_CLASS_NAME.piickleMeVote} onClick={handlePostVote}>
투표하기
</St.VoteBtn>

{isLoginModalOpen && (
<LoginModal
closeHandler={toggleLoginModal}
contents={"투표 기능인 피클미를"}
voteLoginClassName={GTM_CLASS_NAME.piickleMeLogin}
voteJoinClassName={GTM_CLASS_NAME.piickleMeJoin}
/>
)}
</>
);
}
10 changes: 7 additions & 3 deletions src/@components/VotePage/hooks/useBallotTopic.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,13 @@ import { BallotTopicData } from "../../../types/ballots";
import { PiickleSWRResponse } from "../../../types/remote/swr";

export default function useBallotTopic(ballotId: string) {
const { data } = useSWR<PiickleSWRResponse<BallotTopicData>>(`${PATH.BALLOTS}/${ballotId}`, realReq.GET_SWR, {
suspense: true,
});
const { data } = useSWR<PiickleSWRResponse<BallotTopicData>>(
`${PATH.BALLOTS}/${ballotId}`,
(url) => realReq.GET_SWR(url, { withCredentials: true }),
{
suspense: true,
},
);
const { mutate } = useSWRConfig();

const [isBeforeVotingState, setIsBeforeVotingState] = useState(true);
Expand Down
11 changes: 5 additions & 6 deletions src/core/api/common/axios.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,24 @@
import axios from "axios";
import axios, { AxiosRequestConfig } from "axios";

export const axiosInstance = axios.create({
baseURL: import.meta.env.VITE_BASE_URL,
headers: {
"Content-Type": "application/json",
},
// withCredentials: true,
});

export const realReq = {
GET_SWR(path: string) {
return axiosInstance.get(path);
GET_SWR(path: string, option?: AxiosRequestConfig) {
return axiosInstance.get(path, option);
},

async GET<T>(path: string, option?: { params: string }) {
const data = await axiosInstance.get<T>(path, option);
return data.data;
},

async POST<T>(path: string, body: T) {
const data = await axiosInstance.post(path, body);
async POST<T>(path: string, body: T, option?: AxiosRequestConfig) {
const data = await axiosInstance.post(path, body, option);
return data.data;
},

Expand Down
2 changes: 1 addition & 1 deletion src/core/api/vote.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { realReq } from "./common/axios";
import { PATH } from "./common/constants";

function postVote(postingVote: PostingVote) {
return realReq.POST(PATH.BALLOTS, postingVote);
return realReq.POST(PATH.BALLOTS, postingVote, { withCredentials: true });
}

export const voteApi = {
Expand Down