MOMOO | 모무

웹사이트      플레이스토어      React Native GitHub      React GitHub (Migration 전)

프로젝트 기간: 2023.09.29 ~ 2023.11.16 | 리팩토링 기간: 2023.11.20 ~ 진행 중
체험계정 ID: [email protected] | PW: 123qwe

목차

1. 👨‍💻👩‍💻 팀 소개
2. 🛠️ 기술 및 개발 환경
3. 💡 주요 기능
4. 📝 핵심기술
5. 🐛 트러블 슈팅
6. 🙋‍♂️ 유저 피드백
7. 🚀 버전 2(마이그레이션, 기능추가)
8. 🔥 Firebase 구조
9. 📚 프로젝트 관련 문서

👨‍💻👩‍💻 1. 팀 소개

목차로 ▲

2. 🛠️ 기술 및 개발 환경

FrontEnd	BackEnd	Design	협업방식	컨벤션

3. 💡 주요 기능

1) 인트로

• 스플래시
• 로그인 및 회원가입

2) 홈

• 나의 앨범/공유 앨범 리스트
• 앨범 정렬(최신순/오래된순)
• 앨범 추가/수정/삭제
• 앨범 공유

3) 앨범 상세페이지

• 앨범의 피드 앨범형
• 앨범에 사진 추가
• 피드 수정

4) 피드 상세페이지

• 앨범의 피드 리스트형
• 피드 수정/삭제/앨범 변경

5) 피드 업로드

• 사진 및 제목 (필수)
• 본문, 날씨/기분 이모티콘, 위치 (선택)

6) 마이페이지

• 프로필 수정
• 회원탈퇴 및 로그아웃
• 이용약관 및 개인정보처리방침

목차로 ▲

4. 📝 핵심기술

1) 앨범 공유

• 기능 소개

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

• 코드

1. 사용자 검색 - Firebase Admin SDK를 사용하여, 사용자를 불러온다.

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

2. 공유/공유 취소 - Firestore Database에 공유 정보 저장&삭제

```
  // [uid]/[uid]
  sharedAlbums: Reference(albumDoc)[] 

  // [uid]/[uid]/album/[albumId]
  sharedUsers: {uid, permission}[]
```

3. 홈 - 공유 앨범 - Firestore에서 로그인한 사용자의 공유 앨범 리스트를 가져온다. ```js // 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; }; ```

- 공유 앨범 데이터를 불러온다.
```js
  // src/app/api/album/sharing
  
  sharedAlbums.map(async (ref: DocumentReference) => {
    const albumData = await getDoc(ref).data();
    // (중략)
  });
```

- 공유한 사용자 데이터를 불러온다.
```js
  // src/app/api/album/sharing
  
  const { displayName, email } =
    await adminAppAuth.getUser(sharedAlbumUserUid);
```

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

```js
  // 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(앨범 생성자)가 다를 경우 권한을 검사한다.

```js
  // 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,
      });
    }

    // 중략
  }
```

2) Masonry Layout

• 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,
        })
      }
    />

목차로 ▲

5. 🐛 트러블 슈팅

1) 안드로이드 기기의 뒤로가기

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

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

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

자세한 내용 | MOMOO-RN

2) 이미지 확장자 유효성 검사 - SVG

• 문제: 이미지 선택 후 유효성 검사 시, 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)$/ // 변경

3) 모달 배경 콘텐츠 스크롤

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

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

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

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

4) 데이터 업데이트와 UI

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

• 해결: 데이터 업데이트 시 라우트 새로고침

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

목차로 ▲

6. 🙋‍♂️ 유저 피드백

1) 1차 유저 테스트

피드백 목록

회원가입

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

앨범 상세 페이지

1. 게시글이 많아질수록 '앨범에 게시글 추가 버튼'도 뒤로 밀려서 누르러 가기 힘들어짐5bbe7dd63fa419
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 버그로 인한 버그)

앱

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)[yonaisgood/MOMOO-React#245]
13. 유효하지 않은 URL 접속 시, 내비게이션바는 나오면 좋을 것 같음(#231)[yonaisgood/MOMOO-React#231]
14. 아이콘의 퀄리티가 더 발전하면 좋겠음
15. 앱의 컨셉이 더 분명하면 좋을 것 같음
    15-1. 사진 업로드 메인일 경우, 앨범 상세 페이지에서 사용자가 업로드한 사진들이 모였을 때 뿌듯함을 느낄 만한 디자인 요소 추가하면 좋겠음
    15-2. 일기 기능이 메인일 경우,
    
    • 폰트 속성 변화 기능을 추가하면 좋겠음
      
    • 나의 하루 기분을 주간/월간 그래프로 확인할 수 있는 기능 추가하면 좋겠음
16. 튜토리얼이나 사용법을 알려주는 기능이 있으면 좋겠음 이용가이드
17. 앨범이 여러 개가 되는 경우 스크롤이 너무 길어져서 핸드폰의 갤러리처럼 작아도 좋을 듯 함
18. 전체보기가 시선을 강탈함
19. 마이페이지 창에서 유저 프로필 기능을 따로 사용하지 않는다면 빼면 좋겠음(되는 줄 알고 몇 번 클릭함)#91
20. 다른 사람과의 채팅 기능이 있었으면 신선할 것 같음

*총 70개의 피드백을 받았습니다. 현재 53개를 반영 완료했습니다.

2) 2차 유저 테스트

사용 만족도 개선

• 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. 업로드 날짜는 현재 자동으로 저장되는데, 직접 수정 가능하면 좋겠음

목차로 ▲

7. 🚀 버전 2(마이그레이션, 기능추가)

1) React -> Next.js Migration 이유

공유 기능 개발을 위해 Firebase Admin SDK가 필요했음.
따라서 Node.js 환경에서 구동되고, 초기 로딩 속도 개선도 기대할 수 있는 Next.js로 Migration함

2) 달라진 기능

앨범 공유 (신기능)

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

  

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

  	👉
  v1		v2

  
  

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

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

게시물 업로드 모달

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

	👉
v1		v2

3) 사용성 개선 및 버그 수정

6. 유저 피드백을 참고해주세요 :)

목차로 ▲

8. 🔥 Firebase 구조

Firestore Database

  // {uid}/{uid}
  {
    sharedAlbums: Reference(albumDoc){}
  }


  // {uid}/{uid}/album/{albumId}
  {
    createdTime: Timestamp;
    feedList: String(feedId)[];
    name: String;
    sharedUsers: {uid:String; permission: "read"}[];
  }

  // {uid}/{uid}/feed/{feedId}
  {
    id: String;
    title: String;
    text: String;
    seletedAddress: String;
    emotionImage: String;
    weatherImage: String;
    timestamp: Timestamp;
  }

Storage

  feed/{feedId + imageIndex}.{확장자}
  profile/{uid}.{확장자}

목차로 ▲

9. 📚 프로젝트 관련 문서

• 💡 노션: 기획 및 회의록
• 💡 피그마: 와이어프레임 & 디자인
• 💡 이용가이드

목차로 ▲