[#155] Fix: 재료 선택시 search params 소문자로 수정 (#156)

tteokguk-please · Feb 12, 2024 · 31b96d9 · 31b96d9
1 parent a47be9a
commit 31b96d9
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 10 deletions.
diff --git a/src/components/shared/CheerSuccessModal.tsx b/src/components/shared/CheerSuccessModal.tsx
@@ -45,7 +45,7 @@ const CheerSuccessModal = ({
   };
 
   const handleClickViewMessage = () => {
-    setSearchParams(`?ingredient=${ingredientKey}`, { replace: true });
+    setSearchParams(`?ingredient=${ingredientKey?.toLowerCase()}`, { replace: true });
 
     viewMessageOverlay.open(({ isOpen, close: handleCloseViewMessageModal }) => (
       <ViewMessageModal

diff --git a/src/components/shared/ViewMessageModal.tsx b/src/components/shared/ViewMessageModal.tsx
@@ -25,7 +25,7 @@ interface Props {
 
 const ViewMessageModal = ({ isOpen, onClose, ingredientKey }: Props) => {
   const [searchParams] = useSearchParams();
-  const [selectedIngredient, setSelectedIngredient] = useAtom($selectedIngredient);
+  const [, setSelectedIngredient] = useAtom($selectedIngredient);
   const { nickname, message, isAnonymous } = useAtomValue($ingredientSupportMessage);
 
   useEffect(() => {
@@ -38,7 +38,7 @@ const ViewMessageModal = ({ isOpen, onClose, ingredientKey }: Props) => {
 
   const handleClickCopyLinkButton = () => {
     copyLink({
-      path: `${location.pathname}?ingredient=${selectedIngredient}`,
+      path: `${location.pathname}?ingredient=${ingredientKey.toLowerCase()}`,
       eventCategory: "작성한 응원 메시지 공유",
     });
   };

diff --git a/src/pages/TteokgukPage.tsx b/src/pages/TteokgukPage.tsx
@@ -67,7 +67,7 @@ const TteokgukPage = () => {
   const [, setSelectedIngredient] = useAtom($selectedIngredient);
 
   useEffect(() => {
-    const ingredientKey = searchParams.get("ingredient") as IngredientKey;
+    const ingredientKey = searchParams.get("ingredient")?.toUpperCase() as IngredientKey;
     if (ingredientKey === null) return;
 
     const { nickname, message, ingredient } = tteokgukCheerMessages.supporters[ingredientKey];
@@ -120,7 +120,6 @@ const TteokgukPage = () => {
     tteokgukId,
     memberId,
   } = tteokguk;
-  const isLoggedIn = !!getLocalStorage("accessToken");
   const isMyTteokguk = loggedInUserDetails?.id === memberId;
 
   const handleClickAddIngredientButton = () => {
@@ -226,7 +225,7 @@ const TteokgukPage = () => {
     setIngredientSupportMessage((previousState) => ({ ...previousState, nickname, message }));
     setSelectedIngredient(ingredient);
 
-    setSearchParams(`?ingredient=${ingredientKey}`, { replace: true });
+    setSearchParams(`?ingredient=${ingredientKey?.toLowerCase()}`, { replace: true });
 
     viewMessageOverlay.open(({ isOpen, close }) => {
       return (
@@ -315,14 +314,14 @@ const TteokgukPage = () => {
           </div>
         </article>
 
-        {!isLoggedIn && (
+        {!getLocalStorage("accessToken") && (
           <Link to="/login">
             <Button color="primary.45" applyColorTo="outline">
               소원 떡국 만들기
             </Button>
           </Link>
         )}
-        {isLoggedIn && !isMyTteokguk && !completion && (
+        {!!getLocalStorage("accessToken") && !isMyTteokguk && !completion && (
           <Button
             onClick={handleClickAddIngredientButton}
             color="primary.45"

diff --git a/src/store/auth.ts b/src/store/auth.ts
@@ -35,8 +35,11 @@ export const $signup = atomWithMutation(() => ({
   mutationFn: (body: SignupRequest): Promise<SignupResponse> => postSignup(body),
 }));
 
-export const $login = atomWithMutation(() => ({
+export const $login = atomWithMutation((get) => ({
   mutationFn: (body: LoginRequest): Promise<LoginResponse> => postLogin(body),
+  onSuccess: () => {
+    get(queryClientAtom).invalidateQueries();
+  },
 }));
 
 export const $postKakaoToken = atomWithMutation(() => ({

diff --git a/src/store/user.ts b/src/store/user.ts
@@ -17,7 +17,7 @@ import { LoggedInUserDetailsResponse, RandomUserResponse } from "@/types/user.dt
 
 export const $getMyDetails = atomWithQuery(() => ({
   queryKey: ["myDetails"],
-  queryFn: async () => getMyDetails(),
+  queryFn: getMyDetails,
 }));
 
 export const $getUserDetail = atomFamilyWithQuery("users", (id: number) => {