refactor: 리프레시 쿠키 > JWT 변경 및 버그 + 개선 사항 반영 (#506)

* feat: LoginZipgoaAuth refresh token 추가 * refactor: 기존 refresh token 로직을 쿠키 > JWT로 변경 * fix: FilterDialog Desktop에서 position이 안맞는 현상 수정 * refactor: Template min-height 수정 * refactor: FoodDetailWrapper padding bottom 조절 * refactor: Toast 높이 수정 * refactor: petFoodId type 수정 * refactor: 리뷰 CRUD에 따라 SummaryChart 별점이 동기화 되도록 수정
woowacourse-teams · Oct 19, 2023 · 5cf8e6d · 5cf8e6d
1 parent e2953d7
commit 5cf8e6d
Show file tree

Hide file tree

Showing 15 changed files with 148 additions and 119 deletions.
diff --git a/frontend/src/apis/auth.ts b/frontend/src/apis/auth.ts
@@ -6,6 +6,7 @@ import {
   LoginZipgoAuthRes,
   RefreshZipgoAuthRes,
 } from '@/types/auth/remote';
+import { zipgoLocalStorage } from '@/utils/localStorage';
 
 import { client, clientBasic } from '.';
 
@@ -21,11 +22,20 @@ export const loginZipgoAuth = async ({ code }: LoginZipgoAuthReq) => {
 };
 
 export const refreshZipgoAuth = async () => {
-  const { data } = await clientBasic<RefreshZipgoAuthRes>('/auth/refresh', {
-    withCredentials: true,
+  const { refreshToken } = zipgoLocalStorage.getTokens({ required: true });
+
+  const {
+    data: { accessToken },
+  } = await clientBasic<RefreshZipgoAuthRes>('/auth/refresh', {
+    headers: {
+      Refresh: `Zipgo ${refreshToken}`,
+    },
   });
 
-  return data;
+  return {
+    accessToken,
+    refreshToken,
+  };
 };
 
 export const loginKakaoAuth = async () => {
@@ -50,7 +60,13 @@ export const logoutKaKaoAuth = async () => {
 };
 
 export const authenticateUser = async () => {
-  const { data } = await client<AuthenticateUserRes>('/auth');
+  const tokens = zipgoLocalStorage.getTokens();
+
+  const { data } = await client<AuthenticateUserRes>('/auth', {
+    headers: {
+      Refresh: `Zipgo ${tokens?.refreshToken}`,
+    },
+  });
 
   return data;
 };
diff --git a/frontend/src/apis/index.ts b/frontend/src/apis/index.ts
@@ -33,11 +33,11 @@ client.interceptors.response.use(
 
     if (APIError.isAuthError(error) && config?.headers.Authorization) {
       try {
-        const { accessToken } = await refreshZipgoAuth();
+        const tokens = await refreshZipgoAuth();
 
-        zipgoLocalStorage.setTokens({ accessToken });
+        zipgoLocalStorage.setTokens(tokens);
 
-        config.headers.Authorization = `Bearer ${accessToken}`;
+        config.headers.Authorization = `Bearer ${tokens.accessToken}`;
 
         return client(config);
       } catch (error) {

diff --git a/frontend/src/components/@common/Template.tsx b/frontend/src/components/@common/Template.tsx
@@ -67,7 +67,7 @@ const Layout = styled.div`
   overflow-y: auto;
 
   width: 100%;
-  min-height: calc(var(--vh, 1vh) * 100);
+  max-height: calc(var(--vh, 1vh) * 100);
 `;
 
 const Container = styled.div<
@@ -92,7 +92,7 @@ const Container = styled.div<
 
     if ($isFixedHeader === false) {
       return css`
-        min-height: calc((var(--vh, 1vh) * 100) - ${$headerHeight});
+        max-height: calc((var(--vh, 1vh) * 100) - ${$headerHeight});
       `;
     }
   }}

diff --git a/frontend/src/components/@common/Toast/Toast.tsx b/frontend/src/components/@common/Toast/Toast.tsx
@@ -54,14 +54,14 @@ const fadeIn = keyframes`
   }
   to {
     opacity: 1;
-    transform: translateY(0%);
+    transform: translateY(-150%);
   }
 `;
 
 const fadeOut = keyframes`
   from {
     opacity: 1;
-    transform: translateY(0%);
+    transform: translateY(-150%);
   }
   to {
     opacity: 0;

diff --git a/frontend/src/components/Review/ReviewForm/FoodInfoInReviewForm/FoodInfoInReviewForm.tsx b/frontend/src/components/Review/ReviewForm/FoodInfoInReviewForm/FoodInfoInReviewForm.tsx
@@ -5,7 +5,7 @@ import { SATISFACTION_MESSAGES } from '@/constants/review';
 import { useFoodDetailQuery } from '@/hooks/query/food';
 
 interface FoodInfoInReviewFormProps {
-  petFoodId: number;
+  petFoodId: string;
   rating: number;
 }
 

diff --git a/...end/src/components/Review/ReviewListAndChart/ReviewControls/FilterDialog/FilterDialog.tsx b/...end/src/components/Review/ReviewListAndChart/ReviewControls/FilterDialog/FilterDialog.tsx
@@ -38,69 +38,71 @@ const FilterDialog = () => {
       <Dialog.Portal>
         <Dialog.BackDrop />
         <Dialog.Content asChild>
-          <DialogContentLayout>
-            <TopContainer>
-              <DialogTitle>리뷰 검색 필터</DialogTitle>
-              <Dialog.Close asChild>
-                <Close>𝖷</Close>
-              </Dialog.Close>
-            </TopContainer>
-            <FilterContainer>
-              <FilterSection>
-                <FilterTitle>크기</FilterTitle>
-                <FilterList>
-                  {metaData.petSizes.map(({ id, name }) => (
-                    <FilterItem
-                      role="checkbox"
-                      key={id}
-                      aria-checked={petSizes.has(id)}
-                      $selected={petSizes.has(id)}
-                      onClick={() => toggleFilter('petSizes', id)}
-                    >
-                      {name}
-                    </FilterItem>
-                  ))}
-                </FilterList>
-              </FilterSection>
-              <FilterSection>
-                <FilterTitle>나이대</FilterTitle>
-                <FilterList>
-                  {metaData.ageGroups.map(({ id, name }) => (
-                    <FilterItem
-                      role="checkbox"
-                      key={id}
-                      aria-checked={ageGroups.has(id)}
-                      $selected={ageGroups.has(id)}
-                      onClick={() => toggleFilter('ageGroups', id)}
-                    >
-                      {name}
-                    </FilterItem>
-                  ))}
-                </FilterList>
-              </FilterSection>
-              <FilterSection>
-                <FilterTitle>견종</FilterTitle>
-                <Select onChange={onSelectBreed}>
-                  <option value={-1} selected={breeds.has(-1)}>
-                    선택 안 함
-                  </option>
-                  {metaData.breeds.map(({ id, name }) => (
-                    <option key={id} value={id} selected={breeds.has(id)}>
-                      {name}
+          <DialogPositionSupporter>
+            <DialogContentLayout>
+              <TopContainer>
+                <DialogTitle>리뷰 검색 필터</DialogTitle>
+                <Dialog.Close asChild>
+                  <Close>𝖷</Close>
+                </Dialog.Close>
+              </TopContainer>
+              <FilterContainer>
+                <FilterSection>
+                  <FilterTitle>크기</FilterTitle>
+                  <FilterList>
+                    {metaData.petSizes.map(({ id, name }) => (
+                      <FilterItem
+                        role="checkbox"
+                        key={id}
+                        aria-checked={petSizes.has(id)}
+                        $selected={petSizes.has(id)}
+                        onClick={() => toggleFilter('petSizes', id)}
+                      >
+                        {name}
+                      </FilterItem>
+                    ))}
+                  </FilterList>
+                </FilterSection>
+                <FilterSection>
+                  <FilterTitle>나이대</FilterTitle>
+                  <FilterList>
+                    {metaData.ageGroups.map(({ id, name }) => (
+                      <FilterItem
+                        role="checkbox"
+                        key={id}
+                        aria-checked={ageGroups.has(id)}
+                        $selected={ageGroups.has(id)}
+                        onClick={() => toggleFilter('ageGroups', id)}
+                      >
+                        {name}
+                      </FilterItem>
+                    ))}
+                  </FilterList>
+                </FilterSection>
+                <FilterSection>
+                  <FilterTitle>견종</FilterTitle>
+                  <Select onChange={onSelectBreed}>
+                    <option value={-1} selected={breeds.has(-1)}>
+                      선택 안 함
                     </option>
-                  ))}
-                </Select>
-              </FilterSection>
-            </FilterContainer>
-            <ButtonContainer>
-              <ResetButton type="button" onClick={resetFilterList}>
-                초기화
-              </ResetButton>
-              <Dialog.Close asChild onClick={confirm}>
-                <ConfirmButton type="button">적용하기 ＞</ConfirmButton>
-              </Dialog.Close>
-            </ButtonContainer>
-          </DialogContentLayout>
+                    {metaData.breeds.map(({ id, name }) => (
+                      <option key={id} value={id} selected={breeds.has(id)}>
+                        {name}
+                      </option>
+                    ))}
+                  </Select>
+                </FilterSection>
+              </FilterContainer>
+              <ButtonContainer>
+                <ResetButton type="button" onClick={resetFilterList}>
+                  초기화
+                </ResetButton>
+                <Dialog.Close asChild onClick={confirm}>
+                  <ConfirmButton type="button">적용하기 ＞</ConfirmButton>
+                </Dialog.Close>
+              </ButtonContainer>
+            </DialogContentLayout>
+          </DialogPositionSupporter>
         </Dialog.Content>
       </Dialog.Portal>
     </Dialog>
@@ -149,13 +151,21 @@ const TriggerIcon = styled.img`
   height: 1.4rem;
 `;
 
-const DialogContentLayout = styled.div`
+const DialogPositionSupporter = styled.div`
   position: fixed;
   z-index: 1001;
   top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+  transform: translateY(-50%);
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
+  width: 100%;
+  max-width: ${({ theme }) => theme.maxWidth.mobile};
+`;
+
+const DialogContentLayout = styled.div`
   display: flex;
   flex-direction: column;
   gap: 2rem;

diff --git a/frontend/src/hooks/query/auth.ts b/frontend/src/hooks/query/auth.ts
@@ -28,11 +28,11 @@ export const useAuthMutation = () => {
 
   const { mutate: loginZipgo, ...loginRestMutation } = useMutation({
     mutationFn: loginZipgoAuth,
-    onSuccess({ accessToken, authResponse }) {
+    onSuccess({ authResponse, ...tokens }) {
       const newestPet = authResponse.pets.at(-1);
       const selectedPet = zipgoLocalStorage.getPetProfile();
 
-      zipgoLocalStorage.setTokens({ accessToken });
+      zipgoLocalStorage.setTokens(tokens);
       zipgoLocalStorage.setUserInfo(authResponse);
 
       if (selectedPet) updatePetProfile(selectedPet);