feat: 로그인 시 사용자 id, 리뷰 조회 시 작성자 id 등 api 명세 수정 (#358)

* feat/#357: 로그인 응답에 사용자 이메일, 펫 정보 추가 * chore/#357: image 관련 타입 common디렉토리로 이동 * feat/#357: Review에 작성자id 추가 * refactor/#357: 불필요한 코드 삭제 * feat/#357: id로 본인 리뷰 확인하도록 수정 * feat/#357: 로그인 시 반려동물 프로필에 바로 반영되도록 수정 - 피드백 반영 로그아웃 하고 다시 로그인 했을 때 반려견 정보를 선택하는 점이 불편해요. * chore/#357: 로컬에서만 MSW가 실행되도록 설정
woowacourse-teams · Sep 13, 2023 · 8930b88 · 8930b88
1 parent bc23619
commit 8930b88
Show file tree

Hide file tree

Showing 13 changed files with 41 additions and 10 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -4,7 +4,7 @@
   "scripts": {
     "type-check": "tsc --noEmit",
     "type-check:watch": "yarn type-check --watch",
-    "start:dev": "cross-env NODE_ENV=development webpack serve --config config/webpack.dev.js",
+    "start:dev": "cross-env NODE_ENV=development MSW=on webpack serve --config config/webpack.dev.js",
     "start:prod": "serve -s dist",
     "start:sb": "storybook dev -p 6006",
     "build:prod": "cross-env NODE_ENV=production webpack --progress --config config/webpack.prod.js",

diff --git a/frontend/src/apis/image.ts b/frontend/src/apis/image.ts
@@ -1,4 +1,4 @@
-import { PostImageFileReq, PostImageFileRes } from '@/types/image/remote';
+import { PostImageFileReq, PostImageFileRes } from '@/types/common/image/remote';
 
 import { client } from '.';
 

diff --git a/frontend/src/components/Review/ReviewItem/ReveiwItem.stories.tsx b/frontend/src/components/Review/ReviewItem/ReveiwItem.stories.tsx
@@ -31,6 +31,7 @@ type Story = StoryObj<typeof ReviewItem>;
 export const Basic: Story = {
   args: {
     id: 1,
+    writerId: 1,
     rating: 4,
     date: '2023-05-26',
     comment:
@@ -60,6 +61,7 @@ export const Basic: Story = {
 export const LongComment: Story = {
   args: {
     id: 2,
+    writerId: 2,
     rating: 5,
     date: '2023-06-26',
     comment:
@@ -88,6 +90,7 @@ export const LongComment: Story = {
 export const ShortComment: Story = {
   args: {
     id: 1,
+    writerId: 3,
     rating: 5,
     date: '2023-07-26',
     comment:

diff --git a/frontend/src/components/Review/ReviewItem/ReviewItem.tsx b/frontend/src/components/Review/ReviewItem/ReviewItem.tsx
@@ -17,12 +17,12 @@ import { zipgoLocalStorage } from '@/utils/localStorage';
 interface ReviewItemProps extends Review {}
 
 const ReviewItem = (reviewItemProps: ReviewItemProps) => {
-  /** @todo 본인 리뷰 확인 - 추후 id로 변경 */
   const { isLoggedIn } = useAuth();
-  const petProfile = zipgoLocalStorage.getPetProfile();
+  const user = zipgoLocalStorage.getUserInfo();
 
   const {
     id: reviewId,
+    writerId,
     rating,
     date,
     tastePreference,
@@ -47,7 +47,7 @@ const ReviewItem = (reviewItemProps: ReviewItemProps) => {
   const { removeReviewMutation } = useRemoveReviewMutation();
   const [isCommentExpanded, setIsCommentExpanded] = useState(false);
 
-  const isMyReview = petProfile?.name === petName;
+  const isMyReview = user?.id === writerId;
 
   const { toggleHelpfulReaction } = useToggleHelpfulReactionMutation(reacted);
 

diff --git a/frontend/src/hooks/query/auth.ts b/frontend/src/hooks/query/auth.ts
@@ -27,9 +27,15 @@ export const useAuthMutation = () => {
   const { mutate: loginZipgo, ...loginRestMutation } = useMutation({
     mutationFn: loginZipgoAuth,
     onSuccess({ accessToken, authResponse }) {
+      const newestPet = authResponse.pets.at(-1);
+      const selectedPet = zipgoLocalStorage.getPetProfile();
+
       zipgoLocalStorage.setTokens({ accessToken });
       zipgoLocalStorage.setUserInfo(authResponse);
 
+      if (!selectedPet && newestPet) zipgoLocalStorage.setPetProfile(newestPet);
+      if (selectedPet && newestPet) zipgoLocalStorage.setPetProfile(selectedPet);
+
       queryClient.invalidateQueries([QUERY_KEY.authenticateUser]);
 
       navigate(routerPath.home());

diff --git a/frontend/src/mocks/fixtures/auth.ts b/frontend/src/mocks/fixtures/auth.ts
@@ -3,9 +3,23 @@ import { LoginZipgoAuthRes } from '@/types/auth/remote';
 const loginZipgoAuth = (): LoginZipgoAuthRes => ({
   accessToken: 'accessToken',
   authResponse: {
+    id: 1,
+    email: '[email protected]',
     name: 'Zipgo',
     profileImgUrl: 'url',
-    hasPet: false,
+    hasPet: true,
+    pets: [
+      {
+        id: 71,
+        name: '두식이',
+        age: 3,
+        breed: '믹스견',
+        gender: '남',
+        petSize: '대형견',
+        imageUrl: 'https://image.zipgo.pet/prod/pet-image/ddf683ff-5e12-454d-b926-ebefa43c6767',
+        weight: 11.1,
+      },
+    ],
   },
 });
 

diff --git a/frontend/src/mocks/fixtures/review.ts b/frontend/src/mocks/fixtures/review.ts
@@ -4,6 +4,7 @@ const getReviews = (): GetReviewsRes => ({
   reviews: [
     {
       id: 1,
+      writerId: 1,
       petProfile: {
         id: 1,
         name: '에디',
@@ -33,6 +34,7 @@ const getReviews = (): GetReviewsRes => ({
     },
     {
       id: 2,
+      writerId: 2,
       petProfile: {
         id: 2,
         name: '노아이즈',
@@ -61,6 +63,7 @@ const getReviews = (): GetReviewsRes => ({
     },
     {
       id: 3,
+      writerId: 3,
       petProfile: {
         id: 11,
         name: '롤로노아 로지',

diff --git a/frontend/src/mocks/worker.ts b/frontend/src/mocks/worker.ts
@@ -5,7 +5,7 @@ import handlers from './handlers';
 export const worker = setupWorker(...handlers);
 
 export const startWorker = () => {
-  if (process.env.NODE_ENV === 'development') {
+  if (process.env.MSW === 'on') {
     worker.start({ serviceWorker: { url: './mockServiceWorker.js' } });
   }
 };
diff --git a/frontend/src/pages/ReviewAddition/ReviewAddition.tsx b/frontend/src/pages/ReviewAddition/ReviewAddition.tsx
@@ -7,7 +7,6 @@ import FoodInfoInReviewForm from '@/components/Review/ReviewForm/FoodInfoInRevie
 import ReviewForm from '@/components/Review/ReviewForm/ReviewForm';
 import { useValidParams } from '@/hooks/@common/useValidParams';
 import { routerPath } from '@/router/routes';
-import { AdverseReaction, StoolCondition, TastePreference } from '@/types/review/client';
 
 interface LocationState {
   state: {

diff --git a/frontend/src/types/auth/client.ts b/frontend/src/types/auth/client.ts
@@ -1,11 +1,16 @@
+import { PetProfile } from '../petProfile/client';
+
 interface Tokens {
   accessToken: string;
 }
 
 interface User {
-  profileImgUrl: string;
+  id: number;
   name: string;
+  email: string;
+  profileImgUrl: string;
   hasPet: boolean;
+  pets: PetProfile[];
 }
 
 export type { Tokens, User };
diff --git a/frontend/src/types/image/remote.ts → frontend/src/types/common/image/remote.ts b/frontend/src/types/image/remote.ts → frontend/src/types/common/image/remote.ts
diff --git a/frontend/src/types/petProfile/client.ts b/frontend/src/types/petProfile/client.ts
@@ -5,7 +5,7 @@ type PetProfile = {
   name: string;
   age: number;
   breed: Breed['name'];
-  petSize?: PetSize;
+  petSize: PetSize;
   gender: Gender;
   weight: number;
   imageUrl: string;

diff --git a/frontend/src/types/review/client.ts b/frontend/src/types/review/client.ts
@@ -17,6 +17,7 @@ type SummaryKeywordsKo = Values<typeof REVIEW_SUMMARY_KEYWORDS>;
 
 interface Review {
   id: number;
+  writerId: number;
   rating: number;
   date: string;
   comment: string;