Merge branch 'main' into feat/#68

package.json

@@ -19,6 +19,7 @@
     "react-scripts": "^5.0.1",
     "react-swipeable": "^7.0.1",
     "recoil": "^0.7.7",
+    "recoil-persist": "^5.1.0",
     "request": "^2.88.2",
     "source-map": "^0.7.4",
     "styled-components": "^6.1.11",

src/apis/deleteShareGroup.ts

@@ -0,0 +1,10 @@
+import { authInstance } from './instance';
+
+export async function deleteShareGroup(shareGroupId: number): Promise<void> {
+  try {
+    await authInstance().delete(`/shareGroups/${shareGroupId}`);
+  } catch (error) {
+    console.error('Error deleting share group:', error);
+    throw error;
+  }
+}

src/apis/getMembers.ts

@@ -3,6 +3,7 @@ import {
   emailResponse,
   marketingResponse,
   deleteResponse,
+  samplePhotoResponse,
 } from '../recoil/types/members';
 import axios from 'axios';
 
@@ -81,3 +82,24 @@ export const deleteUser = async (memberId: number) => {
     }
   }
 };
+
+// 샘플 사진 업로드 여부 조회 (GET)
+export const getHasSamplePhoto = async () => {
+  try {
+    const response =
+      await authInstance().get<samplePhotoResponse>(`/members/samplePhoto`);
+    const { status, code, message, data } = response.data;
+
+    if (status === 200) {
+      return data.hasSamplePhoto;
+    } else {
+      throw new Error(`Error ${code}: ${message}`);
+    }
+  } catch (err: unknown) {
+    if (axios.isAxiosError(err)) {
+      throw new Error(`Axios error: ${err.message}`);
+    } else {
+      throw new Error('샘플 사진 업로드 여부 조회 중 오류 발생.');
+    }
+  }
+};

src/apis/getMyInviteCode.ts

@@ -0,0 +1,29 @@
+import { authInstance } from './instance';
+
+interface IInviteCode {
+  inviteCode: string;
+  inviteUrl: string;
+}
+
+export async function getMyInviteCode({
+  shareGroupId,
+}: {
+  shareGroupId: number;
+}): Promise<IInviteCode> {
+  try {
+    const response = await authInstance().get(
+      `/shareGroups/${shareGroupId}/invite`,
+    );
+    if (response.status === 200) {
+      return {
+        inviteCode: response.data.inviteCode,
+        inviteUrl: response.data.inviteUrl,
+      };
+    } else {
+      throw new Error('Failed to fetch invite code');
+    }
+  } catch (error) {
+    console.error('Error fetching invite code:', error);
+    throw error;
+  }
+}

src/apis/getMyShareGroup.ts

@@ -0,0 +1,59 @@
+import { ApiResponse } from 'recoil/types/notice';
+import { authInstance } from './instance';
+
+interface IShareGroupInfo {
+  shareGroupId: number;
+  name: string;
+  image: string;
+  memberCount: number;
+  inviteUrl: string;
+  createdAt: string;
+}
+
+interface profile {
+  profileId: number; // 프로필 id
+  name: string; // 프로필 이름
+  image: string; // URL 형식
+  memberId: number; // 해당 프로필로 참여한 회원의 id. 생략할지 고민중
+}
+
+interface IShareGroupMember {
+  shareGroupId: number;
+  name: string;
+  image: string;
+  memberCount: number;
+  inviteUrl: string;
+  createdAt: string;
+  profileInfoList: profile[];
+}
+
+// eslint-disable-next-line prettier/prettier
+export async function getMyShareGroup(): Promise<IShareGroupInfo[]> {
+  try {
+    const response = await authInstance().get('/shareGroups/my');
+    if (response.status === 200) {
+      return response.data.data.shareGroupInfoList;
+    } else {
+      throw new Error('Failed to fetch share group');
+    }
+  } catch (error) {
+    console.error('Error fetching share group:', error);
+    throw error;
+  }
+}
+
+export async function getShareGroupMembers(
+  shareGroupId: number,
+): Promise<IShareGroupMember> {
+  try {
+    const response = await authInstance().get(`/shareGroups/${shareGroupId}`);
+    if (response.status === 200) {
+      return response.data.data;
+    } else {
+      throw new Error('Failed to fetch share group members');
+    }
+  } catch (error) {
+    console.error('Error fetching share group members:', error);
+    throw error;
+  }
+}

src/apis/postPhotoUpload.ts

@@ -1,18 +1,16 @@
 import { PostApiResponse } from 'recoil/types/notice';
 import { authInstance } from './instance';
 interface requestProp {
-  shareGroupId: number;
+  shareGroupId?: number;
   photoUrlList: string[];
 }
 
 export const postPhotoUpload = async (
   requestData: requestProp,
 ): Promise<{ data: any }> => {
   try {
-    const res = await authInstance().post<PostApiResponse>(
-      `/photos/upload`,
-      requestData,
-    );
+    const url = requestData.shareGroupId ? '/photos/upload' : '/photos/sample';
+    const res = await authInstance().post<PostApiResponse>(url, requestData);
     const { status, code, message, data } = res.data;
     if (status === 200) {
       return { data };

src/apis/postPresignedUrl.ts

@@ -2,7 +2,6 @@ import { PostApiResponse } from 'recoil/types/notice';
 import { authInstance } from './instance';
 
 interface requestProp {
-  shareGroupId: number;
   photoNameList: string[];
 }
 

src/components/Common/DropDown/Styles.ts

@@ -38,7 +38,7 @@ export const ExpendLayout = styled.div<LayoutProps>`
   position: ${({ noIndexTag }) => (noIndexTag ? 'absolute' : 'relative')};
   top: 10%;
   left: 2rem;
-  z-index: 1;
+  z-index: 2;
 `;
 
 export const IconLayout = styled.div`

src/components/Header/Styles.ts

@@ -11,4 +11,6 @@ export const Layout = styled.div`
   padding: 0 1rem;
 `;
 
-export const IconLayout = styled.button``;
+export const IconLayout = styled.button`
+  cursor: pointer;
+`;

src/components/MyPage/MyPageMain.tsx

@@ -1,53 +1,42 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import * as S from './Styles';
 import logoblurred from '../../assets/logo/typo-blurred.png';
 import background from 'assets/background/cloudLeft.png';
-import { getMyInfo } from 'apis/getMyInfo';
 
-import { useSetRecoilState } from 'recoil';
+import { useRecoilValue, useSetRecoilState } from 'recoil';
 import {
   myPageModalState,
   modalMessageState,
   modalDataState,
 } from 'recoil/states/mypage';
-
-interface responseType {
-  name: string;
-  email: string;
-  image: string;
-  memberId: number; // memberId 추가
-}
+import { UserState } from 'recoil/states/enter';
 
 const MyPageMain = () => {
-  const [data, setData] = useState<responseType>();
+  const userInfo = useRecoilValue(UserState);
   const setModalOpen = useSetRecoilState(myPageModalState);
   const setModalMessage = useSetRecoilState(modalMessageState);
   const setModalData = useSetRecoilState(modalDataState);
+
   const openLogoutModal = () => {
     setModalMessage('로그아웃 하시겠습니까?');
     setModalOpen(true);
   };
 
   const openWithdrawalModal = () => {
     setModalMessage('탈퇴하시겠습니까? 데이터는 복구할 수 없습니다.');
-    if (data) {
-      setModalData({ memberId: data.memberId });
+    if (userInfo) {
+      setModalData({ memberId: userInfo.memberId });
       setModalOpen(true);
     } else setModalOpen(true);
   };
 
-  useEffect(() => {
-    getMyInfo()
-      .then((res) => setData(res.data))
-      .catch((error) => console.error(error));
-  }, []);
   return (
     <S.Layout>
       <S.Background src={background}></S.Background>
-      <S.Profile image={data?.image} />
+      <S.Profile src={userInfo?.image} />
       <S.Logo src={logoblurred} />
-      <S.EmailText>{data?.email}</S.EmailText>
-      <S.NameText>{data?.name}</S.NameText>
+      <S.EmailText>{userInfo?.email}</S.EmailText>
+      <S.NameText>{userInfo?.name}</S.NameText>
       <S.LogOutBtn onClick={openLogoutModal} />
       <S.OutServiceBtn onClick={openWithdrawalModal} />
       <S.BtnText style={{ top: '66%', left: '50%' }} onClick={openLogoutModal}>

src/components/MyPage/Styles.ts

@@ -18,16 +18,15 @@ export const ProfileContainer = styled.div`
   transform: translate(-50%, -50%);
 `;
 
-export const Profile = styled.div<{ image?: string }>`
+export const Profile = styled.img`
   position: absolute;
   width: 35%;
   height: 16%;
   border-radius: 50%;
   top: 35%;
   left: 50%;
   transform: translate(-50%, -50%);
-  background-image: ${(props) =>
-    props.image ? `url(${props.image})` : `url(${I.Profile})`};
+  object-fit: cover;
 `;
 
 export const EmailText = styled.div`

src/components/ShareGroup/ShareGroupAddButton/ShareGroupAddButton.tsx

@@ -26,10 +26,10 @@ const ShareGroupAddButton: React.FC<ShareGroupAddButtonProps> = ({
       <S.Cloud />
       {showButton && (
         <S.RectContainer>
-          <StyledNavLink to="/join_group">
+          <StyledNavLink to="join">
             <ShareGroupRectButton />
           </StyledNavLink>
-          <StyledNavLink to="/addCount/headCount">
+          <StyledNavLink to="add/member">
             <ShareGroupRectButton add />
           </StyledNavLink>
         </S.RectContainer>

src/components/ShareGroup/ShareGroupCarousel/Styles.ts

@@ -17,10 +17,9 @@ export const CarouselTrack = styled.div<{
 `;
 
 export const CarouselBlankItem = styled.div<{ isRight?: boolean }>`
-  height: 200px;
   background: red;
-  margin-right: ${(props) => (props.isRight ? '4rem' : 0)};
-  margin-left: ${(props) => (props.isRight ? 0 : '4rem')};
+  margin-right: ${(props) => (props.isRight ? '18%' : 0)};
+  margin-left: ${(props) => (props.isRight ? 0 : '18%')};
 `;
 
 export const Dot = styled.div<{ active: boolean }>`

src/components/ShareGroup/ShareGroupCarouselItem/ShareGroupCarouselItem.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import * as S from './Styles';
 import { useNavigate, useParams } from 'react-router-dom';
+import defaultProfile from '../../../assets/samples/emptyProfile.png';
 
 interface CarouselItemProps {
-  profileId: number;
+  profileId?: number;
   active: boolean;
   profileImage?: string;
   name?: string;
@@ -22,17 +23,21 @@ const ShareGroupCarouselItem: React.FC<CarouselItemProps> = ({
       active={active}
       onClick={() =>
         navigatte(`/group/detail`, {
-          state: { shareGroupId: id, profileId: profileId },
+          state: {
+            shareGroupId: id,
+            profileId: profileId,
+            profileImage: profileImage,
+          },
         })
       }
     >
       <S.SvgContainer>
         <S.Folder />
         <S.ContentBox>
           {profileImage ? (
-            <S.Img src="https://avatars.githubusercontent.com/u/6400346?v=4" />
+            <S.Img src={profileImage} />
           ) : (
-            <S.Profile />
+            <S.Img src={defaultProfile} />
           )}
           <S.Name>{name}</S.Name>
         </S.ContentBox>