Merge branch 'dev' of https://github.com/Strong-Potato/TripVote-FE in…

…to 211-fix-fix-code-in-vote-for-matching-type
Strong-Potato · Jan 26, 2024 · c941de1 · c941de1
2 parents a067a51 + 112560d
commit c941de1
Show file tree

Hide file tree

Showing 20 changed files with 244 additions and 174 deletions.
diff --git a/src/api/auth.ts b/src/api/auth.ts
@@ -1,8 +1,23 @@
 import axios from 'axios';
 
 export const authRequest = {
-  withdrawal: async (password?: string) =>
-    await axios.post(
+  login: (email: string, password: string) =>
+    axios.post(
+      '/api/login', 
+      {
+        email,
+        password,
+      },
+      {withCredentials: true},
+    ),
+
+  login_kakao: () =>
+    axios.post('/api/oauth2/authorization/kakao', null, {
+      withCredentials: true,
+    }),
+
+  withdrawal: (password?: string) =>
+    axios.post(
       '/api/members/sign-out',
       {
         password,

diff --git a/src/api/detail.ts b/src/api/detail.ts
@@ -1,6 +1,6 @@
 import axios from 'axios';
 
-import {MySpaces, placeInfoData, PlacesNearby, PostReview, Reviews, ReviewsRating, Wishes} from '@/types/detail';
+import {MySpaces, placeInfoData, PlacesNearby, PostReview, ReviewsRating, Wishes} from '@/types/detail';
 
 // --------------------------- GET ---------------------------
 
@@ -20,14 +20,6 @@ export const getReviewsRating = async (id: number, typeId: number, title: string
   return response.data;
 };
 
-export const getReviews = async (id: number, typeId: number, title: string): Promise<Reviews> => {
-  const response = await axios.get('/api/reviews', {
-    params: {placeId: id, contentTypeId: typeId, placeTitle: title},
-  });
-
-  return response.data;
-};
-
 export const getIsWish = async (id: number) => {
   const response = await axios.get(`/api/wishes/${id}`, {
     withCredentials: true,

diff --git a/src/api/review.ts b/src/api/review.ts
@@ -12,6 +12,35 @@ export const reviewRequest = {
       });
       console.log(res);
 
+      return res.data;
+    } catch (error) {
+      console.log(error);
+    }
+  },
+  getReviews: async ({
+    pageParam,
+    id,
+    typeId,
+    title,
+  }: {
+    pageParam: number;
+    id: number;
+    typeId: number;
+    title: string;
+  }) => {
+    try {
+      const res = await axios.get('/api/reviews', {
+        params: {
+          placeId: id,
+          contentTypeId: typeId,
+          placeTitle: title,
+          size: 5,
+          page: pageParam,
+        },
+        withCredentials: true,
+      });
+      console.log(res);
+
       return res.data;
     } catch (error) {
       console.log(error);

diff --git a/src/components/Auth/Input/InputEmail.tsx b/src/components/Auth/Input/InputEmail.tsx
@@ -1,40 +1,36 @@
-import styles from "./Input.module.scss";
+import styles from './Input.module.scss';
 
-import InputRemove from "@/assets/icons/InputRemove.svg?react";
-import validationForm from "@/utils/inputValidation";
+import InputRemove from '@/assets/icons/InputRemove.svg?react';
+import validationForm from '@/utils/inputValidation';
 
-import { InputEmailProps } from "@/types/auth";
+import {InputEmailProps} from '@/types/auth';
 
-function InputEmail({ register, dirty, error, resetField }: InputEmailProps) {
+function InputEmail({register, dirty, error, resetField}: InputEmailProps) {
   const resetEmail = () => {
-    resetField("email");
+    resetField('email');
   };
 
   return (
     <section className={styles.email}>
-      <label htmlFor="email">아이디(이메일 주소)</label>
+      <label htmlFor='email'>아이디(이메일 주소)</label>
 
       <input
-        id="email"
-        className={`${styles.input} ${dirty && error ? styles.error : ""}`}
-        type="text"
-        placeholder="이메일 주소를 입력해주세요"
-        {...register("email", {
+        id='email'
+        className={`${styles.input} ${dirty && error ? styles.error : ''}`}
+        type='text'
+        placeholder='이메일 주소를 입력해주세요'
+        autoComplete='off'
+        {...register('email', {
           required: true,
           pattern: {
             value: validationForm.email,
-            message: "이메일 형식이 올바르지 않습니다.",
+            message: '이메일 형식이 올바르지 않습니다.',
           },
         })}
       />
 
       {dirty && (
-        <button
-          type="button"
-          className={styles.removeBtn}
-          onClick={resetEmail}
-          tabIndex={-1}
-        >
+        <button type='button' className={styles.removeBtn} onClick={resetEmail} tabIndex={-1}>
           <InputRemove className={styles.svg} />
         </button>
       )}

diff --git a/src/components/Auth/Input/InputEmailSert.tsx b/src/components/Auth/Input/InputEmailSert.tsx
@@ -55,6 +55,7 @@ function InputEmailSert({register, email, due, setDue, type}: InputEmailSertProp
         maxLength={8}
         placeholder='인증코드 8자리를 입력해주세요'
         disabled={due === 0}
+        autoComplete='off'
         {...register('emailSert', {
           required: true,
           pattern: {

diff --git a/src/components/Auth/Input/InputNickname.tsx b/src/components/Auth/Input/InputNickname.tsx
@@ -1,44 +1,38 @@
-import styles from "./Input.module.scss";
+import styles from './Input.module.scss';
 
-import InputRemove from "@/assets/icons/InputRemove.svg?react";
-import validationForm from "@/utils/inputValidation";
+import InputRemove from '@/assets/icons/InputRemove.svg?react';
+import validationForm from '@/utils/inputValidation';
 
-import { InputNickname } from "@/types/auth";
+import {InputNickname} from '@/types/auth';
 
-function InputNickname({ register, dirty, error, resetField }: InputNickname) {
+function InputNickname({register, dirty, error, resetField}: InputNickname) {
   const resetNickname = () => {
-    resetField("nickname");
+    resetField('nickname');
   };
 
   return (
     <section className={styles.nickname}>
-      <label htmlFor="nickname">닉네임</label>
+      <label htmlFor='nickname'>닉네임</label>
 
-      <p className={styles.nickname__disc}>
-        일행 간 구분을 위해 본인을 잘 나타낼 수 있는 닉네임을 권장해요.
-      </p>
+      <p className={styles.nickname__disc}>일행 간 구분을 위해 본인을 잘 나타낼 수 있는 닉네임을 권장해요.</p>
 
       <input
-        id="nickname"
-        className={`${styles.input} ${dirty && error ? styles.error : ""}`}
-        type="text"
-        placeholder="영어/한글/숫자 최대 10자 (공백 포함)"
-        {...register("nickname", {
+        id='nickname'
+        className={`${styles.input} ${dirty && error ? styles.error : ''}`}
+        type='text'
+        placeholder='영어/한글/숫자 최대 10자 (공백 포함)'
+        autoComplete='off'
+        {...register('nickname', {
           required: true,
           pattern: {
             value: validationForm.nickname,
-            message: "닉네임 형식을 확인해주세요.",
+            message: '닉네임 형식을 확인해주세요.',
           },
         })}
       />
 
       {dirty && (
-        <button
-          type="button"
-          className={styles.removeBtn}
-          onClick={resetNickname}
-          tabIndex={-1}
-        >
+        <button type='button' className={styles.removeBtn} onClick={resetNickname} tabIndex={-1}>
           <InputRemove className={styles.svg} />
         </button>
       )}

diff --git a/src/components/Auth/Login/LoginForm.tsx b/src/components/Auth/Login/LoginForm.tsx
@@ -1,12 +1,12 @@
-import axios from 'axios';
-import {useState} from 'react';
-import {SubmitHandler, useForm} from 'react-hook-form';
+import {FormEvent, useState} from 'react';
+import {useForm} from 'react-hook-form';
 import {useNavigate} from 'react-router-dom';
 
 import styles from './LoginForm.module.scss';
 
 import AuthButton from '@/components/Auth/Button/AuthButton';
 
+import {authRequest} from '@/api/auth';
 import validationForm from '@/utils/inputValidation';
 
 import InputEmail from './LoginInput/InputEmail';
@@ -18,7 +18,7 @@ function LoginForm() {
   const {
     register,
     resetField,
-    handleSubmit,
+    getValues,
     formState: {dirtyFields},
   } = useForm<AuthForm>({
     defaultValues: {
@@ -41,21 +41,16 @@ function LoginForm() {
     return false;
   };
 
-  const onSubmit: SubmitHandler<AuthForm> = async (data) => {
-    const {email, password} = data;
+  const onSubmit = async (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    const {email, password} = getValues();
 
     if (showError(email as string, password as string)) return;
 
     try {
-      const res = await axios.post(
-        '/api/login',
-        {
-          email,
-          password,
-        },
-        {withCredentials: true},
-      );
-      console.log(res);
+      const res = await authRequest.login(email as string, password as string);
+      console.log('login response', res);
 
       if (res.data.responseCode === 401) {
         setValidationError(true);
@@ -69,7 +64,7 @@ function LoginForm() {
   };
 
   return (
-    <form className={styles.container} onSubmit={handleSubmit(onSubmit)}>
+    <form className={styles.container} onSubmit={onSubmit}>
       <InputEmail label='이메일' register={register} resetField={resetField} dirtyFields={dirtyFields} />
 
       <InputPassword label='비밀번호' register={register} resetField={resetField} dirtyFields={dirtyFields} />

diff --git a/src/components/Auth/Login/LoginInput/InputEmail.tsx b/src/components/Auth/Login/LoginInput/InputEmail.tsx
@@ -1,39 +1,35 @@
-import styles from "./Input.module.scss";
+import styles from './Input.module.scss';
 
-import InputRemove from "@/assets/icons/InputRemove.svg?react";
-import validationForm from "@/utils/inputValidation";
+import InputRemove from '@/assets/icons/InputRemove.svg?react';
+import validationForm from '@/utils/inputValidation';
 
-import { LoginInput } from "@/types/auth";
+import {LoginInput} from '@/types/auth';
 
-function InputEmail({ label, register, dirtyFields, resetField }: LoginInput) {
+function InputEmail({label, register, dirtyFields, resetField}: LoginInput) {
   const resetEmail = () => {
-    resetField("email");
+    resetField('email');
   };
 
   return (
     <section className={styles.container}>
-      <label htmlFor="email">{label}</label>
+      <label htmlFor='email'>{label}</label>
 
       <input
-        id="email"
+        id='email'
         className={styles.input}
-        type="text"
-        placeholder="이메일 주소를 입력해주세요"
-        {...register("email", {
+        type='text'
+        placeholder='이메일 주소를 입력해주세요'
+        autoComplete='off'
+        {...register('email', {
           pattern: {
             value: validationForm.email,
-            message: "이메일 형식이 올바르지 않습니다.",
+            message: '이메일 형식이 올바르지 않습니다.',
           },
         })}
       />
 
       {dirtyFields.email && (
-        <button
-          type="button"
-          className={styles.removeBtn}
-          onClick={resetEmail}
-          tabIndex={-1}
-        >
+        <button type='button' className={styles.removeBtn} onClick={resetEmail} tabIndex={-1}>
           <InputRemove className={styles.svg} />
         </button>
       )}

diff --git a/src/components/Detail/Contents/Contents.tsx b/src/components/Detail/Contents/Contents.tsx
@@ -11,6 +11,8 @@ import Reviews from './Reviews/Reviews';
 import {placeInfoDataPlace} from '@/types/detail';
 // import {useGetReviews} from '@/hooks/Detail/useReviews';
 // import {useParams} from 'react-router-dom';
+import {useInfiniteScrollReviews} from '@/hooks/useInfiniteScroll';
+import {useGetReviews} from '@/hooks/Detail/useReviews';
 
 interface ContentsProps {
   data: placeInfoDataPlace;
@@ -25,20 +27,21 @@ function Contents({data, onOpen, reviewsRating}: ContentsProps) {
   const [tabIndex, setTabIndex] = useRecoilState(TabIndexState);
   const setTabPosition = useSetRecoilState(TabYPosition);
 
-  // const {id: params} = useParams();
-
   const handleTabsChange = (index: number) => {
     setTabIndex(index);
   };
 
-  // const {
-  //   data: {
-  //     data: {reviews: reviews},
-  //   },
-  // } = useGetReviews(Number(params?.split(' ')[0]), Number(params?.split(' ')[1]), data.title);
-  // console.log(reviews, '!!');
+  const [reviewsData, hasNextData, inViewRef] = useInfiniteScrollReviews(() =>
+    useGetReviews(data.id, data.contentTypeId, data.title),
+  );
+
+  const reviews: any[] = [];
 
-  const reviews = undefined;
+  if (reviewsData) {
+    reviewsData?.pages.map((data: any) => {
+      data.data.reviews.map((data: any) => reviews.push(data));
+    });
+  }
 
   useEffect(() => {
     const tabRef = document.getElementById('tab');
@@ -78,7 +81,13 @@ function Contents({data, onOpen, reviewsRating}: ContentsProps) {
           <Information onOpen={onOpen} data={data} reviewsRating={reviewsRating} reviews={reviews} />
         </TabPanel>
         <TabPanel padding='0'>
-          <Reviews onOpen={onOpen} reviewsRating={reviewsRating} reviews={reviews} />
+          <Reviews
+            hasNextData={hasNextData}
+            inViewRef={inViewRef}
+            onOpen={onOpen}
+            reviewsRating={reviewsRating}
+            reviews={reviews}
+          />
         </TabPanel>
       </TabPanels>
     </Tabs>