1. 공유할 사용자를 검색할 수 있다.
2. 앨범을 공유하거나, 공유한 대상을 삭제할 수 있다.
3. 홈에서 공유하거나 공유 받은 앨범을 볼 수 있다.
4. 앨범을 공유 받으면, 해당 앨범에 저장된 사진을 볼 수 있다.

• 사용자 검색

  Firebase Admin SDK를 사용하여, 사용자를 불러온다.

  // src/app/api/user/route.ts
  adminApp.auth().getUserByEmail(email);

• 공유/공유 취소

  Firestore Database에 공유 정보 저장 & 삭제

  // [uid]/[uid]
  sharedAlbums: Reference(albumDoc)[] 
  // [uid]/[uid]/album/[albumId]
  sharedUsers: {uid, permission}[]

• 홈 - 공유 앨범
  

  • Firestore에서 로그인한 사용자의 공유 앨범 리스트를 가져온다.

    // src/utils/SDKUtils.ts
    const getSharedAlbums = async (
     uid: string,
    ): Promise<DocumentReference[]> => {
     const userDocRef = doc(appFireStore, uid, uid);
     const userDoc = (await getDoc(userDocRef)).data();
     return userDoc.sharedAlbums;
    };

  
  

  • 공유 앨범 데이터를 불러온다.

    // src/app/api/album/sharing
    sharedAlbums.map(async (ref: DocumentReference) => {
     const albumData = await getDoc(ref).data();
     // (중략)
    });

  
  

  • 공유한 사용자 데이터를 불러온다.

    // src/app/api/album/sharing
     
    const { displayName, email } = await adminAppAuth.getUser(sharedAlbumUserUid);

• 공유 앨범 상세

  • 피드 리스트를 얻기 위해 공유 앨범/나의 앨범 구분없이 요청을 보낸다.

    // src/services/feed.ts
    // Path Parameter(uid, albumName)를 쿼리 매개변수로 요청에 추가하여 전송
    // 앨범 상세페이지 경로: {uid}/album/{albumName}
    // 피드 상세페이지 경로: {uid}/album/{albumName}/feed
    await fetch(
     `${API_URL}/feed?limit=${limit}&skip=${skip}&album=${albumName}&uid=${uid}`,
    );

    
    

  • 쿠키의 uid(로그인한 사용자)와 쿼리 매개변수로 받은 uid(앨범 생성자)가 다를 경우 권한을 검사한다.

    // src/app/api/route.ts
    export async function GET(req: NextRequest) {
     // 중략
     let hasPermission = true;
     if (userUid !== uid) {
     const sharedAlbums = await getSharedAlbums(userUid);
     hasPermission = await checkAlbumPermission(albumDoc, sharedAlbums);
     }
     if (!hasPermission) {
     return new Response('접근 권한이 없는 앨범입니다.', {
     status: 403,
     });
     }
     // 중략
    }

• CSS

  • 부모 요소 CSS

    // src/containers/albumDetail/StyledFeed.ts
    const StyledFeedList = styled.ul`
     display: grid;
     grid-template-columns: repeat(3, minmax(0, 1fr));
     margin: -8px -8px;
     grid-auto-rows: 1px;
    `;

  • 아이템 CSS

    // src/components/AlbumItem/StyledAlbumItem.ts
    const StyledAlbumItem = styled.li`
     margin: 8px;
    `;

• JS

  • gridRowEnd 값을 계산하는 커스텀훅

    // src/hooks/useAlbumItemLayout.ts
    interface ImgSize {
     width: number;
     height: number;
    }
    function useAlbumItemLayout(node: HTMLLIElement) {
     const [imgSize, setImgSize] = useState<ImgSize | null>(null);
     const [gridRowEnd, setGridRowEnd] = useState('');
     useEffect(() => {
     const setLayout = async () => {
     if (!imgSize || !node) {
     return;
     }
     const height = node.clientWidth * (imgSize.height / imgSize.width);
     setGridRowEnd(`span ${Math.round(height + 16)}`);
     };
     setLayout();
     }, [imgSize]);
     return { setImgSize, gridRowEnd };
    }

  • gridRowEnd 값을 계산하기 위해 필요한 아이템 이미지 사이즈 구하기

    // src/components/AlbumItem/AlbumItem.tsx
    <img
     onLoad={(e) =>
     setImgSize({
     width: e.currentTarget.naturalWidth,
     height: e.currentTarget.naturalHeight,
     })
     }
    />

• Custom Hook

  • Intersection Observer API를 활용했습니다.
  • 특정 아이템이 뷰포트에 나타나면 페이지를 업데이트했습니다.
  
  

  // src/hooks/useInfiniteScroll.ts
  import { useRef, useState } from 'react';
  export default function useInfiniteScroll() {
   const itemRef = useRef<HTMLLIElement | null>();
   const observer = useRef<IntersectionObserver | null>(null);
   const [page, setPage] = useState(1);
   const observe = (node: HTMLLIElement) => {
   observer.current = new IntersectionObserver(entries => {
   if (entries[0].isIntersecting) {
   setPage(prev => prev + 1);
   if (observer.current) {
   observer.current.disconnect();
   }
   }
   });
   observer.current.observe(node);
   };
   const setItemToObserveRef = (node: HTMLLIElement) => {
   if (node && node !== itemRef.current) {
   itemRef.current = node;
   observe(node);
   }
   };
   return { page, setItemToObserveRef };
  }

• Custom Hook 사용

  // src/containers/albumDetail/albumDetail.tsx
  const { page, setItemToObserveRef } = useInfiniteScroll();
  // page 업데이트 시, 추가 데이터 페칭
  useEffect(() => {
   if (page === 1) {
   return;
   }
   (async () => {
   const feedsToAdd = await getFeeds({
   limit: pageSize * page,
   skip: pageSize * page - pageSize,
   uid,
   albumName
   });
   if (feedsToAdd) {
   setFeedsData(prev => [...prev, ...feedsToAdd]);
   }
   })();
  }, [page]);
  // observe item
  {feedsData.map((v, i) => {
   return (
   <AlbumItem
   key={v.id}
   ref={i === feedsData.length - 1 ? setItemToObserveRef : null}
   />
   );
  })}

  상위 컴포넌트에서 ref를 전달받기 위해 forwardRef 사용

  // src/components/AlbumItem/AlbumItem.tsx

function AlbumItem(ref: ForwardedRef) { return ( ); }

export default forwardRef(AlbumItem);
```

1. 뒤로가기 클릭 시, 앱이 닫히는 이슈
   - 해결: 이전 페이지가 존재할 경우, 이전 페이지로 이동하도록 수정

2. 뒤로가기 클릭 시, 게시물 업로드/수정 모달이 계속 열려있는 이슈
   - 원인: 게시물 업로드/수정 모달이 페이지 상위 컴포넌트에서 렌더링되기 때문에, 이전 페이지로 이동해도 모달은 닫히지 않음
   - 해결: 모바일에선 게시물 업로드/수정 모달을 페이지로 변경

3. 게시물 업로드/수정 후 게시물 상세페이지에서 뒤로가기 클릭 시, 게시물 업로드/수정 페이지로 돌아가는 이슈
   - 상황: 게시물 업로드/수정 화면으로 돌아가는 흐름이 불편하다는 피드백을 받음
   - 해결: 모바일에서도 게시물 업로드/수정을 모달로 되돌리고, 뒤로가기 클릭 시 모달이 닫히도록 변경

자세한 내용 | MOMOO-RN

• 문제: 이미지 선택 후 유효성 검사 시, svg 파일이 통과하지 못하는 버그

• 원인: 기존에 svg 파일을 image/svg로 검사하고 있었으나, 표준 MIME 타입은 image/svg+xml이기 때문

• 해결: image/svg+xml을 통과시키도록 정규 표현식 수정

  /^image\/(jpg|svg|png|jpeg|gif|bmp|tif|heic)$/ // 기존
  /^image\/(jpg|svg(\+xml)?|png|jpeg|gif|bmp|tif|heic)$/ // 변경

• 문제: 모바일에서 게시물 업로드/수정 모달 내 스크롤 시도 시, 배경 콘텐츠가 스크롤되는 경우가 있음

• 원인: 해당 요소의 스크롤을 (더) 내릴/올릴 수 없는 경우, window에 스크롤 이벤트 발생 (chrome 동작 방식)

• 해결: 모바일에서 해당 모달 open 시, body에 scroll-rock 클래스 추가 (close 시, scroll-rock 클래스 삭제)

  .scroll-lock {
   position: fixed;
   height: 100vh;
   overflow: hidden;
  }

• 문제: 데이터 업데이트 시, 다른 경로로 이동한 후 돌아오면 이전 데이터가 렌더링됨
• 해결: 데이터 업데이트 시 라우트 새로고침

import { useRouter } from 'next/navigation';
router.refresh();

회원가입

1. (削除) 이용약관 읽고 뒤로 오면 입력해 놓았던 내용이 사라지고, 모든 체크 박스가 해제됨 (削除ここまで)5a0b0d0
2. (削除) 프로필 사진 변경 버튼에 마우스 커서를 가져다 놓았을 때, 손가락 모양으로 바뀌면 좋겠음 (削除ここまで)bdfc9ea
3. 버튼 하단부가 잘림. 앱이 전체적으로 하단부 UI가 잘림
4. (削除) '안녕하세요 모무입니다'라는 텍스트가 없으면 좋을 것 같음. 이미 스플래시에서 소개했기 때문 (削除ここまで)4f05ab6
5. (削除) 아이디가 로그인용인지 사람들에게 보이는 용인지 모르겠음 (削除ここまで)(username -> nickname)

프로필 수정

1. (削除) 프로필 수정 기능에서 사진 크기 2MB 이내라서 핸드폰으로 찍은 사진은 등록이 안 됨 (削除ここまで)(src/hooks/useProfileImg.ts)
2. (削除) 계정 재인증 모달 - 비밀번호가 마스킹 처리되면 좋겠음 (削除ここまで)7e75388
3. (削除) 프로필 설정이 수정인 건지 헷갈림 (削除ここまで)6167780
4. (削除) 탈퇴 모달 하단부가 잘림 (削除ここまで)#227

홈

1. 플러스 아이콘이 앨범 추가 버튼인지 헷갈림
2. (削除) 앨범 이름을 입력하지 않아도 앨범 추가 가능 (削除ここまで)#236
3. (削除) 앨범 수정/삭제 모달에 있는 체크 표시의 기능을 모르겠음 (削除ここまで)(저장 버튼: 체크 아이콘 -> '저장' 텍스트)
4. (削除) 앨범 생성 시, 엔터를 눌러서 저장 가능하면 좋겠음 (削除ここまで)91d0fe3
5. (削除) 같은 이름으로 앨범을 여러 개 만들 수 있음 (削除ここまで)#236
6. (削除) 현재 앨범 ... 버튼(더보기) 클릭 시, 앨범 수정/삭제 모달이 열리는데 기능을 명료화하면 더 좋을 것 같음 (削除ここまで)(더보기 클릭 시, 선택 모달이 뜨도록 변경)01e4d5f b825983
7. (削除) 앨범 하단부가 잘림 (削除ここまで)571a714
8. (削除) 앨범명을 입력하고 저장 버튼을 여러 번 누르면 앨범이 여러개 생성됨 (削除ここまで)692c719
9. (削除) 앨범 수정/삭제 모달의 버튼을 여러 번 누르면 에러 페이지("존재하지 않는 페이지입니다")로 이동됨
   상황 재현: 버튼이 위치한 곳을 계속해서 클릭하면, 생성이 완료될 때 모달이 닫히는 동시에 앨범이 클릭 됨 -> 클릭 된 앨범의 제목이 없을 시, 유효하지 않은 주소로 이동됨 (削除ここまで)#236
10. (削除) 모달창이 띄워졌을 때 버튼은 눌러지지 않지만 스크롤이 가능 -> 일반적인 사용성이나, 게시물 업로드/수정 모달의 경우 모바일에서 화면 전체를 차지하기 때문에 사용에 불편함이 있음 (削除ここまで) #143
11. (削除) 앨범 필터 버튼이 너무 작음 (削除ここまで)036022a
12. (削除) 앨범 제목 글자 수의 제한이 없음 (削除ここまで)536bae6
13. (削除) 정렬 기준 누르고 나서 다른 부분 터치했을 때 정렬창이 꺼졌으면 함 (削除ここまで)9b16fbf

앨범 상세 페이지

1. (削除) 게시글이 많아질수록 '앨범에 게시글 추가 버튼'도 뒤로 밀려서 누르러 가기 힘들어짐 (削除ここまで)5bbe7dd 63fa419
2. (削除) 목록형, 앨범형 선택 가능하면 좋겠음 (削除ここまで)fe9614f
3. 날짜, 제목이 보였으면 좋겠음

게시물 상세 페이지

1. (削除) 제목과 본문이 글자 크기 차이가 크게 안 나서 색상이나 폰트 사이즈를 좀 더 조절하면 좋겠음 (削除ここまで)17cc95d

게시물 업로드

1. (削除) 한 번에 여러 장의 사진을 등록할 수 있으면 좋겠음 (削除ここまで) => 브라우저 파일 선택 기능 익숙지 않은 사용자
2. 처음에 모든 selectbox가 닫혀있어서 한 번 더 눌러야 하는 게 사용성이 안 좋은 것 같음
3. 뭔가 지도의 핀을 움직여서 위치를 선택할 수 있는 기능이 있으면 좋겠음
4. (削除) 체크 표시가 위치 추가 버튼이라는 것을 알기 어려웠음 (削除ここまで)#52
5. (削除) 업로드 버튼은 포커스가 마지막에 되면 좋겠음 (削除ここまで)#74
6. (削除) 오늘의 날씨에서 비와 눈의 구분이 모호함 (削除ここまで)89f4104
7. 지도에서 내가 원하는 부분을 터치하여 지정할 수 있으면 좋겠음
8. 위치 추가란을 열었을 때, 아래로 드래그하여 오늘의 날씨도 볼 수 있으면 좋겠음
9. (削除) 앨범이 복수 선택 가능해서 좋음 (削除ここまで)
10. (削除) ESC를 누르면 모달이 닫히면 좋겠음 (削除ここまで)61d1e8a
11. (削除) 기존 사진에 추가할 사진만 선택했는데, 기존 사진은 없어짐 (削除ここまで)#269
12. (削除) 사진이 최대 3장이 올라가는데 따로 안내 사항이 없는 점이 아쉬움 (削除ここまで)#269
13. 위치 추가의 경우 지도에 표시되는 장소를 확대하고 축소하는 기능을 사용할 때 만약 input에 커서가 들어가 있는 경우 (검색어를 입력하고 바로 지도를 확대하는 경우) 확대 축소할 때마다 input에 자꾸 포커스가 들어감. input에서 포커스를 빼야(뒤로가기 버튼 눌러야) 깔끔하게 확대축소가 가능함
14. 검색어를 모호하게 입력했을 때 선택지가 없는게 아쉬움(서울로 입력하면 경복궁이 선택됨)
15. (削除) 필수 항목을 알 수 없어서 불편함 (削除ここまで)#269
16. 앨범 선택 시, 새로운 앨범을 만들어서 그 앨범에 바로 추가할 수 있으면 좋겠음
17. (削除) 사진 업로드 버튼에 포커스가 되면 좋겠음 (削除ここまで)#74
18. 사진뿐만 아니라 동영상도 저장할 수 있으면 좋겠음
19. 탭바가 있어도 좋을 듯함
20. (削除) 업로드되는 사진의 확장명을 추가하면 좋겠음(gif 등) (削除ここまで)#53
21. (削除) 게시물 제목과 게시물 본문은 공백 포함 500자까지 제한 있음(안내 필요) (削除ここまで)#269
22. (削除) 위치 선택 시, 지도가 뜨지 않는 버그 (削除ここまで)(Kakao Developers에 주소 추가)
23. (削除) 날씨와 기분 셀렉트 박스가 선택되지 않는 버그(게시물 업로드 22 버그로 인한 버그) (削除ここまで)
24. (削除) 업로드 버튼이 눌러지지 않음 -> UI 피드백이 없어서 업로드중임을 알 수 없음 -> 로딩중 UI 추가 (削除ここまで)

앱

1. (削除) 안드로이드 기기의 뒤로가기 버튼을 누르면 앱이 종료됨 (削除ここまで)dc43540

기타

1. (削除) 스크롤을 하며 계속해서 게시글을 보고 싶음 (削除ここまで)fe9614f
2. (削除) 앨범을 필수로 생성해야 사진이 업로드할 수 있거나, 앨범 생성 전 사진을 업로드해도 기본 앨범에 사진이 업로드되면 좋겠음
   상황: 회원가입 시, '전체 보기' 앨범이 자동 생성되나 사용자는 인지하지 못함
   해결1: 기존엔 업로드 후 이동한 피드 상세 페이지에서 해당 피드에 대한 정보만 볼 수 있음. '전체 보기'의 피드 상세 페이지로 이동하도록 변경하여, '전체 보기' 앨범이 자동 생성되고 해당 앨범에 저장되었음을 인지할 수 있도록 함 (削除ここまで)(${userUid}/전체 보기/feed)
   해결2: 회원가입 시, 튜토리얼
3. (削除) 사진 슬라이드가 동작하지 않음
   3-1. 업로드 (削除ここまで)3aabb70
   (削除) 3-2. 게시물 상세 페이지 (削除ここまで)#35
4. (削除) 게시글 수정 후 게시글에서 < 뒤로가기 아이콘을 누르면 다시 게시글 수정 페이지가 나와서 불편함
   - 개선: 게시물 수정 페이지 -> 모달로 통일 (削除ここまで)#32
5. (削除) 게시글 삭제를 하면 기존에 있던 페이지가 아니라 새 게시글 작성하는 페이지가 나와서 불편함 - 상황: 게시물 생성 후 삭제 시 이전 페이지인 새 게시글 페이지로 이동됨 - 개선: 새 게시글 페이지(게시물 업로드 페이지) -> 모달로 통일 (削除ここまで)#39
6. (削除) confirm 창이나 alert창을 직접 만들지 않아서 UI가 예쁘지 않음 (削除ここまで)#191
7. 캘린더 형식으로 업로드한 날짜를 지정해 확인할 수 있는 기능이 있으면 좋겠음
8. 앱 잠금 기능이 있으면 좋겠음
9. (削除) 공유 기능 추가 희망 (削除ここまで)#253
10. 예쁜 이미지 사진으로 만들어져 사진으로 공유할 수 있으면 좋겠음
11. (削除) 내비게이션 바에 홈 버튼이 a 태그와 button 태그로 이루어져서 포커스가 두 번 됨 (削除ここまで)(#241)https://github.com/yonainthefish/MoMoo/issues/241[https://github.com/yonainthefish/MoMoo/commit/270938caf1635d0ee1eb806c8d0c7cd91535da98]
12. (削除) 모달이 나왔을 땐, 모달 내에서만 포커스가 이동하면 좋겠음 (削除ここまで)(#245)[https://github.com/yonainthefish/MoMoo/issues/245]
13. (削除) 유효하지 않은 URL 접속 시, 내비게이션바는 나오면 좋을 것 같음 (削除ここまで)(#231)[https://github.com/yonainthefish/MoMoo/issues/231]
14. (削除) 아이콘의 퀄리티가 더 발전하면 좋겠음 (削除ここまで)
15. 앱의 컨셉이 더 분명하면 좋을 것 같음
    15-1. 사진 업로드 메인일 경우, 앨범 상세 페이지에서 사용자가 업로드한 사진들이 모였을 때 뿌듯함을 느낄 만한 디자인 요소 추가하면 좋겠음
    15-2. 일기 기능이 메인일 경우,
    
    • 폰트 속성 변화 기능을 추가하면 좋겠음
      
    • 나의 하루 기분을 주간/월간 그래프로 확인할 수 있는 기능 추가하면 좋겠음
16. (削除) 튜토리얼이나 사용법을 알려주는 기능이 있으면 좋겠음 (削除ここまで) 이용가이드
17. (削除) 앨범이 여러 개가 되는 경우 스크롤이 너무 길어져서 핸드폰의 갤러리처럼 작아도 좋을 듯 함 (削除ここまで)
18. 전체보기가 시선을 강탈함
19. (削除) 마이페이지 창에서 유저 프로필 기능을 따로 사용하지 않는다면 빼면 좋겠음(되는 줄 알고 몇 번 클릭함) (削除ここまで)#91
20. 다른 사람과의 채팅 기능이 있었으면 신선할 것 같음
21. (削除) 앨범 생성, 회원탈퇴 모달 - 버튼이 보이지 않음 (削除ここまで)
22. (削除) 404 페이지에 nav가 있으면 좋겠음(다른 페이지로 이동할 수 있도록) (削除ここまで)

• 1차 만족도 조사 대비 평균 약 29% 향상됨 (4번 제외)
• ⭐ 10점 만점

1. 회원가입/로그인/프로필 수정: ⭐ 7.3 -> ⭐ 10
2. 앨범 생성/수정/삭제: ⭐ 7.7 -> ⭐ 9.5
3. 게시물 업로드/수정/삭제: ⭐ 6.7 -> ⭐ 10
4. 앨범 공유: 10

홈

1. '더보기'를 누르면 (수정하기, 공유 대상) 이외에 삭제하기도 있었으면 함
2. 앨범에서 사진을 누르거나 확대를 통해 사진을 좀 더 자세히 볼 수 있으면 좋을 것 같음
3. (削除) 앨범 클릭 시, 404 화면이 뜨는 경우가 있음 -> 앨범 이름이 '.'인 경우 (削除ここまで)#145

게시물 상세

1. (削除) 실제 업로드한 날짜의 다음날로 나옴 (削除ここまで)412e163

게시물 업로드/수정/삭제

1. 기존엔 앨범에 들어가 있는 상태에서 업로드를 눌러도 앨범 선택을 따로 눌러야 하는데, 만약 앨범에 들어간 상태에서 업로드하고자 하면 저절로 어떤 앨범인지 선택되면 좋겠음
2. 시간이 오래 걸리는 경우 있음
3. 사진을 여러장 올릴 때 다중 선택이 가능하면 좋겠음

공유 앨범

1. 공유 앨범을 만들고 사용자를 초대하면 사진을 같이 볼 수 있다는 게 재밌는 부분인 거 같음
2. 공유 앨범을 만들 때, 사용자를 초대해야만 공유 앨범(홈)에 앨범이 생기는 것을 몰랐음. 설명이 필요할 것 같음

기타

1. (削除) 업로드 모달에서 기기의 뒤로가기를 누르면 어플이 종료되는 현상이 나타남 -> AndroidManifest.xml에서 더는 지원하지 않는 속성을 제거한 후 해결됨 (削除ここまで)832a5ab
2. 앱스토어로도 설치하고 싶음
3. 공유 앨범에 반응을 남길 수 있으면 좋겠음. 좋아요 혹은 스티커. 다양한 스티커를 판매했으면 좋겠음
4. 공유받은 앨범에 사진을 올리고 싶음
5. 사진 보정도 할 수 있으면 좋겠음. 밝기 조정, 채도 조정 등
6. 업로드 날짜는 현재 자동으로 저장되는데, 직접 수정 가능하면 좋겠음

• 앨범 공유 모달을 통해, 공유 대상을 검색/추가/삭제할 수 있다

• 홈에서 공유 앨범을 확인할 수 있다

  👉
  v1 v2
  
  

• 공유 받은 사용자는 해당 앨범의 모든 사진을 볼 수 있다

• 현재 read 권한까지 개발 완료. write, admin 권한 추가 예정

• 기존: 사진 선택 및 전체 재선택 가능
• 개선: 사진 선택 후, 일부 삭제 및 추가 선택 가능

• 기존: 파이어베이스와의 모든 통신을 클라이언트에서 처리했습니다.

• 개선: 파이어베이스와의 통신 로직을 백엔드로 분리한 이유는 다음과 같습니다.

  • 유지보수성 향상을 위한 비즈니스 로직 분리
  • 요청 중단으로 인한 데이터 손실 방지
  • 보안 강화
  
  

  // src/app/api/user/route/ts
  export async function DELETE() {
   const uid = cookies().get('uid')?.value;
   if (!uid) {
   return NextResponse.json(
   {
   error: '인증되지 않은 사용자입니다.'
   },
   {
   status: 401
   }
   );
   }
   try {
   const { photoURL } = await getUserByUid(uid);
   await Promise.all([
   deletePhothURL(photoURL),
   deleteFeedsImg(uid),
   deleteUserDoc(uid),
   deleteAlbumDocs(uid),
   deleteFeedDocs(uid)
   ]);
   await adminAppAuth.deleteUser(uid);
   } catch (error) {
   console.error(error);
   return NextResponse.json(
   {
   error: '계정 삭제 중 예기치 못한 오류가 발생했습니다.'
   },
   {
   status: 500
   }
   );
   }
   return NextResponse.json({
   status: 204
   });
  }