Feat: 마이 페이지 api 연결 (#64)

* fix: 리뷰 작성하기 페이지 접속시 최상단으로 * fix: lint * fix: margin 수정 * feat: 이미지 업로드 로직 * feat: api params 수정 * feat: 리뷰 get api 연결 * fix: 이미지 post 수정 시도 * fix: 이미지 저장 api 수정 * chore:불필요한 코드 삭제 * fix:빌드 오류 해결 * feat: 리뷰 날짜 받아오기 * feat:날짜 저장 * feat: 리뷰 탭 필터 로직 수정 * feat: 리뷰 탭 회색 별 추가 * feat: 필터 바깥 누르면 저장 X 되도록 로직 수정 * feat: key 변경 * feat: 리뷰 탭 라우터 분리 * feat: 글자 가운데 * 처리 * feat: 리뷰 탭 디폴트 카테고리 유저 정보 받아오기 구현' * fix: 서버 오류 수정 * fix: 파일명 필터링 기능 추가 * fix:유니코드 수정 * fix: key warning 해결 * feat: 이름 글자수 해결 * feat: 리뷰 등록 후 리뷰 get 오류 수정 * feat: 이미지 비율 조정 * feat:api 불러오기 * fix: 지역 정보 업데이트 로직 수정 * feat: 여행자 유형 데이터 적용 * feat:회원 정보 변경 데이터 전송 * feat: 여행자유형 변경 데이터 전송 * feat: 로그아웃 구현 * feat: 변경 정보 실시간 반영 * feat: 입력 정보 없는 경우 경고 표시 추가 --------- Co-authored-by: seobbang <[email protected]>
TEAM-UNITRIP · Sep 30, 2024 · 192fea7 · 192fea7
1 parent 47a5d61
commit 192fea7
Show file tree

Hide file tree

Showing 11 changed files with 344 additions and 99 deletions.
diff --git a/src/apis/supabase/updateUniversalInfo.ts b/src/apis/supabase/updateUniversalInfo.ts
@@ -0,0 +1,20 @@
+import { unitripSupabase } from '@/utils/supabaseClient';
+
+const updateUniversalInfo = async (universal_type: string[]) => {
+  const kakaoId = sessionStorage.getItem('kakao_id');
+
+  const { status, error } = await unitripSupabase
+    .from('USER')
+    .update({
+      universal_type,
+    })
+    .eq('kakao_id', kakaoId);
+
+  if (error) {
+    throw new Error('오류가 발생했습니다');
+  }
+
+  return status;
+};
+
+export default updateUniversalInfo;
diff --git a/src/apis/supabase/updateUserInfo.ts b/src/apis/supabase/updateUserInfo.ts
@@ -0,0 +1,23 @@
+import { Region } from '@/components/SelectRegion';
+import { unitripSupabase } from '@/utils/supabaseClient';
+
+const updateUserInfo = async (selectedRegion: Region) => {
+  const kakaoId = sessionStorage.getItem('kakao_id');
+
+  const changedData = selectedRegion.city + ' ' + selectedRegion.town;
+
+  const { status, error } = await unitripSupabase
+    .from('USER')
+    .update({
+      region: changedData,
+    })
+    .eq('kakao_id', kakaoId);
+
+  if (error) {
+    throw new Error('오류가 발생했습니다');
+  }
+
+  return status;
+};
+
+export default updateUserInfo;
diff --git a/src/components/SelectRegion.tsx b/src/components/SelectRegion.tsx
@@ -33,14 +33,23 @@ const SelectRegion = ({ region, setRegion }: SelectRegionProps) => {
           return { city: prev.city, town: false };
         });
     };
-
     document.addEventListener('mouseup', handleFocus);
 
     return () => {
       document.removeEventListener('mouseup', handleFocus);
     };
   }, []);
 
+  const fetchRegionData = () => {
+    const town =
+      REGION_LIST.find((item) => item.city === region.city)?.town || [];
+    setLocationList(town);
+  };
+
+  useEffect(() => {
+    fetchRegionData();
+  }, [region.city]);
+
   const onClickDropDown = (inputType: 'city' | 'town', regionName: string) => {
     if (inputType === 'city') {
       setRegion(() => {
@@ -49,10 +58,6 @@ const SelectRegion = ({ region, setRegion }: SelectRegionProps) => {
           town: '',
         };
       });
-
-      const town =
-        REGION_LIST.find((item) => item.city === regionName)?.town || [];
-      setLocationList(town);
     } else if (inputType === 'town') {
       setRegion((prev) => {
         return {

diff --git a/src/components/TravelerType.tsx b/src/components/TravelerType.tsx
diff --git a/src/types/globals.d.ts b/src/types/globals.d.ts
@@ -9,6 +9,7 @@ declare global {
         setAccessToken(
           token: string,
         ): Promise<ShippingAddressResponse | ShippingAddressError>;
+        logout(): Promise<LogoutResponse | AuthError>;
       };
       API: {
         request: (settings: {

diff --git a/src/types/userAPI.ts b/src/types/userAPI.ts
@@ -1,5 +1,6 @@
 export interface UserDataResponse {
   name: string;
+  profile: string;
   region: string;
   universal_type: string[];
   favorite_list: number[];

diff --git a/src/views/Login/components/UserType.tsx b/src/views/Login/components/UserType.tsx
@@ -2,8 +2,9 @@ import { css } from '@emotion/react';
 import { useNavigate } from 'react-router-dom';
 
 import postAddUser from '@/apis/supabase/postAddUser';
+import { MapMonoGrayIcon } from '@/assets/icon';
 import BottomButton from '@/components/BottomButton';
-import TravelerType from '@/components/TravelerType';
+import SelectTravelerType from '@/components/SelectTravelerType';
 import { COLORS, FONTS } from '@/styles/constants';
 import { KakaoUserDataResponse } from '@/types/userAPI';
 
@@ -31,10 +32,20 @@ const UserType = ({ userData }: UserTypeProps) => {
           <br />
           모두 선택해주세요
         </p>
-        <TravelerType
-          travelerType={travelerType}
-          setTravelerType={setTravelerType}
-        />
+        <div css={contentContainer}>
+          <div>
+            <p css={subText}>다중선택 가능</p>
+            <SelectTravelerType
+              currentTravelerType={travelerType}
+              setTravelerType={setTravelerType}
+            />
+          </div>
+
+          <div css={explanation}>
+            <MapMonoGrayIcon />
+            <p>여행자 유형은 장소 추천과 리뷰 필터링에 반영돼요!</p>
+          </div>
+        </div>
       </section>
 
       <BottomButton
@@ -70,3 +81,35 @@ const highlight = css`
 
   box-shadow: inset 0 -1.5rem 0 ${COLORS.brand2};
 `;
+
+const contentContainer = css`
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+
+  flex: 1;
+`;
+
+const subText = css`
+  padding: 0.9rem 0;
+
+  color: ${COLORS.gray4};
+  text-align: end;
+  ${FONTS.Body3};
+`;
+
+const explanation = css`
+  display: flex;
+  gap: 0.8rem;
+  align-items: center;
+
+  width: calc(100% + 4rem);
+  padding: 1.2rem 2rem;
+  margin-left: -2rem;
+
+  background-color: ${COLORS.gray0};
+
+  color: ${COLORS.gray9};
+  ${FONTS.Body3};
+  font-weight: 400;
+`;
diff --git a/src/views/Mypage/components/Main.tsx b/src/views/Mypage/components/Main.tsx
@@ -1,4 +1,5 @@
 import { css } from '@emotion/react';
+import { useNavigate } from 'react-router-dom';
 
 import { ArrowRightIcon } from '@/assets/icon';
 import { ProfileImg } from '@/assets/image';
@@ -7,17 +8,31 @@ import { COLORS, FONTS } from '@/styles/constants';
 import { MYPAGE_TAB_CONTENTS } from '../constants/text';
 
 interface MainProps {
+  name: string;
+  profile?: string;
   handleSetCurrentTab: (clicked: string) => void;
 }
 
 function Main(props: MainProps) {
-  const { handleSetCurrentTab } = props;
+  const { name, profile, handleSetCurrentTab } = props;
+
+  const navigate = useNavigate();
+
+  const logout = () => {
+    window.Kakao.Auth.logout();
+    sessionStorage.removeItem('kakao_id');
+    navigate(`/`);
+  };
 
   return (
     <div>
       <section css={profileSection}>
-        <img src={ProfileImg} alt="프로필이미지_사진" css={profileImage} />
-        <span css={InfoText}>서아람</span>
+        <img
+          src={profile || ProfileImg}
+          alt="프로필이미지_사진"
+          css={profileImage}
+        />
+        <span css={InfoText}>{name}</span>
       </section>
       <ul>
         {Object.entries(MYPAGE_TAB_CONTENTS).map(([key, name]) => (
@@ -30,7 +45,7 @@ function Main(props: MainProps) {
           </li>
         ))}
       </ul>
-      <button type="button" css={tabItem('logout')}>
+      <button type="button" css={tabItem('logout')} onClick={logout}>
         로그아웃
       </button>
     </div>
@@ -67,7 +82,7 @@ const tabItem = (variant: string) => css`
   align-items: center;
 
   width: 100%;
-  padding: 1.85rem 0;
+  padding: 1.85rem 2rem;
   border-bottom: 1px solid ${COLORS.gray0};
 
   color: ${COLORS.brand1};

diff --git a/src/views/Mypage/components/PersonalInfo.tsx b/src/views/Mypage/components/PersonalInfo.tsx
@@ -1,11 +1,57 @@
 import { css } from '@emotion/react';
 import { useState } from 'react';
 
+import updateUserInfo from '@/apis/supabase/updateUserInfo';
+import BottomButton from '@/components/BottomButton';
 import SelectRegion, { Region } from '@/components/SelectRegion';
+import ToastMessage from '@/components/ToastMessage';
 import { COLORS, FONTS } from '@/styles/constants';
-
-const PersonalInfo = () => {
-  const [region, setRegion] = useState<Region>({ city: '', town: '' });
+import { UserDataResponse } from '@/types/userAPI';
+
+interface PersonalInfoProps {
+  name: string;
+  region: Region;
+  setUserData: React.Dispatch<React.SetStateAction<UserDataResponse>>;
+}
+
+const PersonalInfo = ({ name, region, setUserData }: PersonalInfoProps) => {
+  const [selectedRegion, setSelectedRegion] = useState<Region>({
+    city: region.city,
+    town: region.town,
+  });
+  const [toast, setToast] = useState(false);
+  const [warning, setWarning] = useState(false);
+
+  const saveFn = () => {
+    const fetchData = async () => {
+      try {
+        const status = await updateUserInfo(selectedRegion);
+
+        if (status === 204) {
+          setToast(true);
+          setUserData((prev) => {
+            return {
+              ...prev,
+              region: `${selectedRegion.city} ${selectedRegion.town}`,
+            };
+          });
+        }
+      } catch (e) {
+        throw new Error('오류가 발생했습니다');
+      }
+    };
+
+    if (!selectedRegion.city || !selectedRegion.town) {
+      setWarning(true);
+    } else {
+      if (
+        region.city !== selectedRegion.city ||
+        region.town !== selectedRegion.town
+      ) {
+        fetchData();
+      }
+    }
+  };
 
   return (
     <>
@@ -14,7 +60,7 @@ const PersonalInfo = () => {
           <li css={formItem}>
             <span css={title}>이름*</span>
 
-            <input type="text" css={input} value="이돌이" disabled />
+            <input type="text" css={input} value={name} disabled />
           </li>
 
           <li css={formItem}>
@@ -27,9 +73,19 @@ const PersonalInfo = () => {
             </div>
           </li>
 
-          <SelectRegion region={region} setRegion={setRegion} />
+          <SelectRegion region={selectedRegion} setRegion={setSelectedRegion} />
         </ul>
       </form>
+      {warning && (
+        <ToastMessage setToast={setToast}>항목을 모두 채워주세요.</ToastMessage>
+      )}
+      {toast && (
+        <ToastMessage setToast={setToast}>
+          변경 사항이 반영되었습니다.
+        </ToastMessage>
+      )}
+
+      <BottomButton text="저장" clickedFn={saveFn} />
     </>
   );
 };
@@ -44,6 +100,7 @@ const PersonalInfoContainter = css`
 
   width: 100%;
   height: calc(100dvh - 6.2rem);
+  padding: 0 2rem;
   overflow-y: hidden;
 `;