feat: 특정 앨범 조회 api 연동 완료

Na-o-man · Aug 15, 2024 · 4c2a8a9 · 4c2a8a9
1 parent 0357467
commit 4c2a8a9
Show file tree

Hide file tree

Showing 8 changed files with 191 additions and 76 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -53,7 +53,7 @@ function App() {
                 path="group/join/:inviteCode/profile"
                 element={<Joingroup3 />}
               />
-              <Route path="vote" element={<VoteMainPage />} />
+              <Route path="vote:id" element={<VoteMainPage />} />
               <Route path="vote/list" element={<VoteMainPage />} />
               <Route path="vote/create" element={<VoteMainPage />} />
               <Route path="vote/excute" element={<VoteMainPage />} />

diff --git a/src/apis/getProfileImage.ts → src/apis/getPhotos.ts b/src/apis/getProfileImage.ts → src/apis/getPhotos.ts
@@ -7,7 +7,7 @@ interface requestProp {
   size?: number;
 }
 
-export const getProfileImage = async (
+export const getPhotos = async (
   requestData: requestProp,
 ): Promise<{ status: number; data: any }> => {
   try {

diff --git a/src/components/ShareGroup/ShareGroupCarouselItem/ShareGroupCarouselItem.tsx b/src/components/ShareGroup/ShareGroupCarouselItem/ShareGroupCarouselItem.tsx
@@ -2,6 +2,8 @@ import React from 'react';
 import * as S from './Styles';
 import { useNavigate, useParams } from 'react-router-dom';
 import defaultProfile from '../../../assets/samples/emptyProfile.png';
+import { useSetRecoilState } from 'recoil';
+import { dropDownTitle } from 'recoil/states/share_group';
 
 interface CarouselItemProps {
   profileId?: number;
@@ -18,20 +20,21 @@ const ShareGroupCarouselItem: React.FC<CarouselItemProps> = ({
 }) => {
   const navigatte = useNavigate();
   const { id } = useParams();
+  const setTitle = useSetRecoilState(dropDownTitle);
+
+  const handleClickItem = () => {
+    setTitle(name);
+    navigatte(`/group/detail`, {
+      state: {
+        shareGroupId: id,
+        profileId: profileId,
+        profileImage: profileImage,
+        name: name,
+      },
+    });
+  };
   return (
-    <S.Layout
-      active={active}
-      onClick={() =>
-        navigatte(`/group/detail`, {
-          state: {
-            shareGroupId: id,
-            profileId: profileId,
-            profileImage: profileImage,
-            name: name,
-          },
-        })
-      }
-    >
+    <S.Layout active={active} onClick={handleClickItem}>
       <S.SvgContainer>
         <S.Folder />
         <S.ContentBox>

diff --git a/src/components/ShareGroup/ShareGroupTopButton/ShareGroupTopButton.tsx b/src/components/ShareGroup/ShareGroupTopButton/ShareGroupTopButton.tsx
@@ -6,8 +6,7 @@ import { groupSelectorbyId } from 'recoil/selectors/sharegroup';
 
 const ShareGroupTopButton: React.FC = () => {
   const { id } = useParams<{ id: string }>();
-  const int = parseInt(id || '0');
-  const group = useRecoilValue(groupSelectorbyId(int));
+  const group = useRecoilValue(groupSelectorbyId(Number(id)));
 
   return (
     <S.Layout>

diff --git a/src/pages/ShareGroup/ShareGroupDetailPage/DropDown.tsx b/src/pages/ShareGroup/ShareGroupDetailPage/DropDown.tsx
@@ -0,0 +1,79 @@
+import { DownArrow } from 'assets/icon';
+import React, { useEffect, useState } from 'react';
+import * as S from './Styles';
+import { useRecoilState, useRecoilValue } from 'recoil';
+import {
+  dropDownTitle,
+  shareGroupMemberListState,
+} from 'recoil/states/share_group';
+
+interface RequestData {
+  shareGroupId: number;
+  profileId: number;
+}
+
+interface DropDownProps {
+  groupId: number;
+  setter: React.Dispatch<React.SetStateAction<RequestData>>;
+}
+
+const DropDown: React.FC<DropDownProps> = ({ groupId, setter }) => {
+  const [isClicked, setIsClicked] = useState(false);
+  const members = useRecoilValue(shareGroupMemberListState) || [];
+  const names = members
+    ?.filter((mem) => mem.memberId !== null)
+    .map((mem) => {
+      return { name: mem.name, profileId: mem.profileId };
+    });
+  const [title, setTitle] = useRecoilState(dropDownTitle);
+
+  const handleClick = () => {
+    setIsClicked(!isClicked);
+  };
+  const handleItemClick = (idx: number, profileId: number) => {
+    setIsClicked(false);
+    setTitle(names[idx].name);
+    const newData = { shareGroupId: groupId, profileId: profileId };
+    setter(newData);
+  };
+
+  return (
+    <>
+      {isClicked ? (
+        <S.DropDownExpend>
+          <S.DropDownIcon>
+            <DownArrow />
+          </S.DropDownIcon>
+          <S.DropDownList>
+            {names.map((name, i) =>
+              names[i].name === title ? (
+                <S.DropDownItem
+                  key={i}
+                  onClick={() => handleItemClick(i, name.profileId)}
+                >
+                  {name.name}
+                </S.DropDownItem>
+              ) : (
+                <S.DropDownItem
+                  key={i}
+                  onClick={() => handleItemClick(i, name.profileId)}
+                >
+                  {name.name}
+                </S.DropDownItem>
+              ),
+            )}
+          </S.DropDownList>
+        </S.DropDownExpend>
+      ) : (
+        <S.DropDownLayout onClick={handleClick}>
+          <S.DropDownText>
+            <DownArrow />
+            {title}
+          </S.DropDownText>
+        </S.DropDownLayout>
+      )}
+    </>
+  );
+};
+
+export default DropDown;
diff --git a/src/pages/ShareGroup/ShareGroupDetailPage/ShareGroupDetailPage.tsx b/src/pages/ShareGroup/ShareGroupDetailPage/ShareGroupDetailPage.tsx
@@ -1,28 +1,26 @@
 import React, { useEffect, useState } from 'react';
 import * as S from './Styles';
 import Header from 'components/Header/Header';
-import DropDown from 'components/Common/DropDown/DropDown';
+import DropDown from './DropDown';
 import ShareGroupImageList, {
   itemProp,
 } from 'components/ShareGroup/ShareGroupImageList/ShareGroupImageList';
 import logo from 'assets/design/logo/symbol.png';
 import { useLocation } from 'react-router-dom';
-import { getProfileImage } from 'apis/getProfileImage';
+import { getPhotos } from 'apis/getPhotos';
 
 const ShareGroupDetailPage: React.FC = () => {
   const [isLoading, setIsLoading] = useState(false);
   const location = useLocation();
-  const requestData = {
+  const [requestData, setRequestData] = useState({
     shareGroupId: location.state.shareGroupId,
     profileId: location.state.profileId,
-  };
+  });
   const [items, setItems] = useState<itemProp[]>([]);
-  const names = [];
-  names.push(`${location.state.name}`);
 
   const getApi = async () => {
     setIsLoading(true);
-    const { status, data } = await getProfileImage(requestData);
+    const { status, data } = await getPhotos(requestData);
     if (status === 200) {
       setIsLoading(false);
       setItems(data.photoInfoList);
@@ -31,7 +29,7 @@ const ShareGroupDetailPage: React.FC = () => {
 
   useEffect(() => {
     getApi();
-  }, []);
+  }, [requestData]);
 
   if (isLoading) {
     return (
@@ -48,7 +46,10 @@ const ShareGroupDetailPage: React.FC = () => {
       <S.TopRectContainer>
         <S.TopRect />
         <S.DropDownContainer>
-          <DropDown noIndexTag dataList={names} />
+          <DropDown
+            groupId={location.state.shareGroupId}
+            setter={setRequestData}
+          />
         </S.DropDownContainer>
       </S.TopRectContainer>
       <Header backarrow checkbtn />

diff --git a/src/pages/ShareGroup/ShareGroupDetailPage/Styles.ts b/src/pages/ShareGroup/ShareGroupDetailPage/Styles.ts
@@ -2,6 +2,7 @@ import styled, { keyframes } from 'styled-components';
 import * as I from 'assets/icon';
 import CloudLeft from 'assets/background/cloudLeft.png';
 import CloudRight from 'assets/background/cloudRight.png';
+import { NavLink } from 'react-router-dom';
 
 const rotate = keyframes`
   0% {
@@ -25,7 +26,6 @@ export const Layout = styled.div`
   position: relative;
   width: 100%;
   height: 100%;
-  background-image: null;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -48,7 +48,7 @@ export const CloudLayout = styled.div<{ isRightCloud?: boolean }>`
 export const TopRectContainer = styled.div`
   position: relative;
   border: 1px solid blue;
-  top: -3.5rem;
+  top: -4rem;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -61,10 +61,9 @@ export const TopRect = styled(I.TopRect)`
 `;
 
 export const DropDownContainer = styled.div`
-  width: 100%;
-  height: 5rem;
+  width: 70px;
   position: absolute;
-  top: 4.5rem;
+  top: 7rem;
   margin: 0 auto;
   display: flex;
   justify-content: center;
@@ -96,3 +95,74 @@ export const LoadingText = styled.p`
   font-weight: 600;
   color: #fff;
 `;
+
+export const DropDownLayout = styled.div`
+  width: 70px;
+  height: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  left: 0;
+  cursor: pointer;
+  z-index: 2;
+`;
+
+export const DropDownText = styled.div`
+  position: absolute;
+  top: 50;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: #4e4e4e;
+  font-size: 0.8rem;
+  font-style: normal;
+  font-weight: 700;
+`;
+
+export const DropDownExpend = styled.div`
+  width: 6rem;
+  border-radius: 0.75rem;
+  border: 2px solid rgba(255, 255, 255, 0.7);
+  background: rgba(255, 255, 255, 0.6);
+  backdrop-filter: blur(12px);
+  position: absolute;
+  top: 0;
+  z-index: 2;
+`;
+
+export const DropDownIcon = styled.div`
+  position: absolute;
+  top: 0.4rem;
+  left: 0.8rem;
+  cursor: pointer;
+`;
+
+export const DropDownList = styled.ul`
+  width: 100%;
+  padding: 0.5rem;
+  padding-left: 2.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  cursor: pointer;
+`;
+
+export const DropDownItem = styled.li`
+  display: flex;
+  width: 100%;
+  font-size: 0.9rem;
+  font-style: normal;
+  font-weight: 600;
+`;
+
+export const StyledNavLink = styled(NavLink)`
+  text-decoration: none;
+  color: inherit;
+  &:hover,
+  &:focus,
+  &:active {
+    text-decoration: none;
+    color: inherit;
+  }
+`;
diff --git a/src/recoil/states/share_group.ts b/src/recoil/states/share_group.ts
@@ -22,16 +22,6 @@ interface ShareGroup {
   inviteUrl: string;
 }
 
-interface ShareGroupDetail {
-  shareGroupId: number; // 공유 그룹 id
-  memberList: ShareGroupDetailMember[]; // 공유 그룹에 속한 회원들의 정보
-}
-
-interface ShareGroupDetailMember {
-  id: number; // 공유 그룹 멤버 id
-  photos: string[]; // 공유 그룹에 속한 사진들의 URL
-}
-
 export const isModalState = atom({
   key: 'isShareGroupImageModalOpen',
   default: false,
@@ -45,50 +35,23 @@ export const selectedImageState = atom<string | null>({
 export const shareGroupListState = atom<ShareGroup[]>({
   key: 'shareGroupListState',
   default: [],
+  effects_UNSTABLE: [persistAtom],
 });
 
 export const shareGroupMemberListState = atom<profile[] | null>({
   key: 'shareGroupMemberList',
   default: [],
+  effects_UNSTABLE: [persistAtom],
 });
 
-export const shareGroupDetailSelectedImageState = atom<ShareGroupDetail | null>(
-  {
-    key: 'shareGroupDetailSelectedImage',
-    default: {
-      shareGroupId: 1,
-      memberList: [
-        {
-          id: 1,
-          photos: [
-            'https://i.imgur.com/GfKSahj.jpeg',
-            'https://i.imgur.com/GfKSahj.jpeg',
-            'https://i.imgur.com/GfKSahj.jpeg',
-          ],
-        },
-        {
-          id: 2,
-          photos: [
-            'https://i.imgur.com/GfKSahj.jpeg',
-            'https://i.imgur.com/GfKSahj.jpeg',
-            'https://i.imgur.com/GfKSahj.jpeg',
-          ],
-        },
-        {
-          id: 3,
-          photos: [
-            'https://i.imgur.com/GfKSahj.jpeg',
-            'https://i.imgur.com/GfKSahj.jpeg',
-            'https://i.imgur.com/GfKSahj.jpeg',
-          ],
-        },
-      ],
-    },
-  },
-);
-
 export const selectedGroupName = atom<string>({
   key: 'selectedGroupName',
   default: '',
   effects_UNSTABLE: [persistAtom],
 });
+
+export const dropDownTitle = atom<string>({
+  key: 'dropDownTitle',
+  default: '',
+  effects_UNSTABLE: [persistAtom],
+});