✨ 캐러셀 및 사용자 기본 이미지 추가 (#50)

* feat: user mock profileImage 제거 * feat: 사용자 프로필 기본 이미지 추가 * feat: 피드 간격 수정 * feat: 모든 태그에 대해 스크롤 바 제거 적용 * feat: 피드 Carousel 구현 * feat: 유저 및 피드 mock 이미지 사이즈 조정 * feat: 피드 mock 이미지 리스트 수정 * chore: react-responsive-carousel 설치 * feat: 캐러셀 이미지 비율만 유지
CollaBu · May 11, 2024 · 68f618a · 68f618a
1 parent 4c26a7d
commit 68f618a
Show file tree

Hide file tree

Showing 16 changed files with 270 additions and 52 deletions.
diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-intersection-observer": "^9.10.2",
+    "react-responsive-carousel": "^3.2.23",
     "react-router-dom": "6.22.2",
     "react-toastify": "^10.0.5",
     "zustand": "^4.5.2"

diff --git a/public/assets/sprites/common.svg b/public/assets/sprites/common.svg
diff --git a/src/app/layout/iPhone/ui/IPhoneLayout.scss b/src/app/layout/iPhone/ui/IPhoneLayout.scss
@@ -49,7 +49,6 @@
         z-index: 32;
         background-color: white;
 
-        scrollbar-width: none;
         overflow-x: hidden;
       }
 

diff --git a/src/app/mocks/consts/feed.ts b/src/app/mocks/consts/feed.ts
@@ -17,7 +17,43 @@ export const feeds: Feeds = {
     images: [
       {
         id: 1,
-        imageUrl: 'https://picsum.photos/200/200',
+        imageUrl: 'https://picsum.photos/320/400',
+      },
+      {
+        id: 1,
+        imageUrl: 'https://picsum.photos/320/400',
+      },
+      {
+        id: 2,
+        imageUrl: 'https://picsum.photos/320/400',
+      },
+      {
+        id: 4,
+        imageUrl: 'https://picsum.photos/320/400',
+      },
+      {
+        id: 5,
+        imageUrl: 'https://picsum.photos/320/400',
+      },
+      {
+        id: 6,
+        imageUrl: 'https://picsum.photos/320/400',
+      },
+      {
+        id: 7,
+        imageUrl: 'https://picsum.photos/320/400',
+      },
+      {
+        id: 8,
+        imageUrl: 'https://picsum.photos/320/400',
+      },
+      {
+        id: 9,
+        imageUrl: 'https://picsum.photos/320/400',
+      },
+      {
+        id: 10,
+        imageUrl: 'https://picsum.photos/320/400',
       },
     ],
 
@@ -34,20 +70,7 @@ export const feeds: Feeds = {
     id: 2,
     user: users[2],
     content: 'Feed Content 2',
-    images: [
-      {
-        id: 1,
-        imageUrl: 'https://picsum.photos/200/200',
-      },
-      {
-        id: 2,
-        imageUrl: 'https://picsum.photos/200/200',
-      },
-      {
-        id: 3,
-        imageUrl: 'https://picsum.photos/200/200',
-      },
-    ],
+    images: [],
 
     likeCount: likes[2].totalCount,
     commentCount: comments[2].length,
@@ -65,7 +88,15 @@ export const feeds: Feeds = {
     images: [
       {
         id: 1,
-        imageUrl: 'https://picsum.photos/200/200',
+        imageUrl: 'https://picsum.photos/320/400',
+      },
+      {
+        id: 2,
+        imageUrl: 'https://picsum.photos/320/400',
+      },
+      {
+        id: 3,
+        imageUrl: 'https://picsum.photos/320/400',
       },
     ],
 
@@ -85,11 +116,23 @@ export const feeds: Feeds = {
     images: [
       {
         id: 1,
-        imageUrl: 'https://picsum.photos/200/200',
+        imageUrl: 'https://picsum.photos/320/400',
       },
       {
         id: 2,
-        imageUrl: 'https://picsum.photos/200/200',
+        imageUrl: 'https://picsum.photos/320/400',
+      },
+      {
+        id: 3,
+        imageUrl: 'https://picsum.photos/320/400',
+      },
+      {
+        id: 4,
+        imageUrl: 'https://picsum.photos/320/400',
+      },
+      {
+        id: 5,
+        imageUrl: 'https://picsum.photos/320/400',
       },
     ],
 
@@ -109,15 +152,15 @@ export const feeds: Feeds = {
     images: [
       {
         id: 1,
-        imageUrl: 'https://picsum.photos/200/200',
+        imageUrl: 'https://picsum.photos/320/400',
       },
       {
         id: 2,
-        imageUrl: 'https://picsum.photos/200/200',
+        imageUrl: 'https://picsum.photos/320/400',
       },
       {
         id: 3,
-        imageUrl: 'https://picsum.photos/200/200',
+        imageUrl: 'https://picsum.photos/320/400',
       },
     ],
 
@@ -137,15 +180,15 @@ export const feeds: Feeds = {
     images: [
       {
         id: 1,
-        imageUrl: 'https://picsum.photos/200/200',
+        imageUrl: 'https://picsum.photos/320/400',
       },
       {
         id: 2,
-        imageUrl: 'https://picsum.photos/200/200',
+        imageUrl: 'https://picsum.photos/320/400',
       },
       {
         id: 3,
-        imageUrl: 'https://picsum.photos/200/200',
+        imageUrl: 'https://picsum.photos/320/400',
       },
     ],
 
@@ -165,11 +208,11 @@ export const feeds: Feeds = {
     images: [
       {
         id: 1,
-        imageUrl: 'https://picsum.photos/200/200',
+        imageUrl: 'https://picsum.photos/320/400',
       },
       {
         id: 2,
-        imageUrl: 'https://picsum.photos/200/200',
+        imageUrl: 'https://picsum.photos/320/400',
       },
     ],
 
@@ -189,7 +232,7 @@ export const feeds: Feeds = {
     images: [
       {
         id: 1,
-        imageUrl: 'https://picsum.photos/200/200',
+        imageUrl: 'https://picsum.photos/320/400',
       },
     ],
 
@@ -209,11 +252,11 @@ export const feeds: Feeds = {
     images: [
       {
         id: 1,
-        imageUrl: 'https://picsum.photos/200/200',
+        imageUrl: 'https://picsum.photos/320/400',
       },
       {
         id: 2,
-        imageUrl: 'https://picsum.photos/200/200',
+        imageUrl: 'https://picsum.photos/320/400',
       },
     ],
 

diff --git a/src/app/mocks/consts/user.ts b/src/app/mocks/consts/user.ts
@@ -7,7 +7,7 @@ interface Users {
 export const users: Users = {
   1: {
     id: 1,
-    profileImage: 'https://picsum.photos/200/200',
+    profileImage: '',
     name: '강병준',
     content: 'bangdori',
     feedCount: 100,
@@ -16,7 +16,7 @@ export const users: Users = {
   },
   2: {
     id: 2,
-    profileImage: 'https://picsum.photos/200/200',
+    profileImage: '',
     name: '이의찬',
     content: 'Legitgoons',
     feedCount: 124,
@@ -25,7 +25,7 @@ export const users: Users = {
   },
   3: {
     id: 3,
-    profileImage: 'https://picsum.photos/200/200',
+    profileImage: '',
     name: '양재서',
     content: 'psychology50',
     feedCount: 6,
@@ -34,7 +34,7 @@ export const users: Users = {
   },
   4: {
     id: 4,
-    profileImage: 'https://picsum.photos/200/200',
+    profileImage: 'https://picsum.photos/32/32',
     name: '이수민',
     content: 'SSXXMM22',
     feedCount: 24,
@@ -43,7 +43,7 @@ export const users: Users = {
   },
   5: {
     id: 5,
-    profileImage: 'https://picsum.photos/200/200',
+    profileImage: 'https://picsum.photos/32/32',
     name: '신얀',
     content: 'yanni13',
     feedCount: 51,
@@ -52,7 +52,7 @@ export const users: Users = {
   },
   6: {
     id: 6,
-    profileImage: 'https://picsum.photos/200/200',
+    profileImage: 'https://picsum.photos/32/32',
     name: '이주원',
     content: '2weeksone',
     feedCount: 97,
@@ -61,7 +61,7 @@ export const users: Users = {
   },
   7: {
     id: 7,
-    profileImage: 'https://picsum.photos/200/200',
+    profileImage: 'https://picsum.photos/32/32',
     name: '안성윤',
     content: 'asn6878',
     feedCount: 87,
@@ -70,7 +70,7 @@ export const users: Users = {
   },
   8: {
     id: 8,
-    profileImage: 'https://picsum.photos/200/200',
+    profileImage: 'https://picsum.photos/32/32',
     name: '이진우',
     content: 'jinlee1703',
     feedCount: 32,
@@ -79,7 +79,7 @@ export const users: Users = {
   },
   9: {
     id: 9,
-    profileImage: 'https://picsum.photos/200/200',
+    profileImage: 'https://picsum.photos/32/32',
     name: '최희진',
     content: 'heejinnn',
     feedCount: 66,

diff --git a/src/app/styles/_reset.scss b/src/app/styles/_reset.scss
@@ -142,3 +142,7 @@ body {
   width: 100%;
   height: 100%;
 }
+
+* {
+  scrollbar-width: none;
+}
diff --git a/src/shared/ui/carousel/Carousel.scss b/src/shared/ui/carousel/Carousel.scss
@@ -0,0 +1,49 @@
+.carousel-container {
+  overflow-x: unset;
+
+  .carousel {
+    overflow: unset;
+  }
+}
+
+.carousel {
+  .slider {
+    display: flex;
+
+    .slide {
+      .carousel-item {
+        width: inherit;
+        height: inherit;
+      }
+
+      img {
+        aspect-ratio: 4 / 5;
+      }
+    }
+  }
+
+  .control-dots {
+    display: flex;
+    justify-content: center;
+    gap: 4px;
+
+    margin: 0;
+    bottom: -10px;
+
+    .dot {
+      width: 4px;
+      height: 4px;
+
+      margin: 0;
+
+      background-color: $gray3;
+      box-shadow: unset;
+
+      opacity: 1;
+
+      &.selected {
+        background-color: $mint3;
+      }
+    }
+  }
+}