Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 9 commits into from
May 11, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
736bc2a
feat: user mock profileImage 제거
BangDori May 11, 2024
a957cae
feat: 사용자 프로필 기본 이미지 추가
BangDori May 11, 2024
7bcff33
feat: 피드 간격 수정
BangDori May 11, 2024
c960fd0
feat: 모든 태그에 대해 스크롤 바 제거 적용
BangDori May 11, 2024
1fbb453
feat: 피드 Carousel 구현
BangDori May 11, 2024
8673d97
feat: 유저 및 피드 mock 이미지 사이즈 조정
BangDori May 11, 2024
b768dd7
feat: 피드 mock 이미지 리스트 수정
BangDori May 11, 2024
77bd9ac
chore: react-responsive-carousel 설치
BangDori May 11, 2024
f93f4fd
feat: 캐러셀 이미지 비율만 유지
BangDori May 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
30 changes: 28 additions & 2 deletions public/assets/sprites/common.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 0 additions & 1 deletion src/app/layout/iPhone/ui/IPhoneLayout.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,6 @@
z-index: 32;
background-color: white;

scrollbar-width: none;
overflow-x: hidden;
}

Expand Down
101 changes: 72 additions & 29 deletions src/app/mocks/consts/feed.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
},
],

Expand All @@ -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,
Expand All @@ -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',
},
],

Expand All @@ -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',
},
],

Expand All @@ -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',
},
],

Expand All @@ -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',
},
],

Expand All @@ -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',
},
],

Expand All @@ -189,7 +232,7 @@ export const feeds: Feeds = {
images: [
{
id: 1,
imageUrl: 'https://picsum.photos/200/200',
imageUrl: 'https://picsum.photos/320/400',
},
],

Expand All @@ -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',
},
],

Expand Down
18 changes: 9 additions & 9 deletions src/app/mocks/consts/user.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -16,7 +16,7 @@ export const users: Users = {
},
2: {
id: 2,
profileImage: 'https://picsum.photos/200/200',
profileImage: '',
name: '이의찬',
content: 'Legitgoons',
feedCount: 124,
Expand All @@ -25,7 +25,7 @@ export const users: Users = {
},
3: {
id: 3,
profileImage: 'https://picsum.photos/200/200',
profileImage: '',
name: '양재서',
content: 'psychology50',
feedCount: 6,
Expand All @@ -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,
Expand All @@ -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,
Expand All @@ -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,
Expand All @@ -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,
Expand All @@ -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,
Expand All @@ -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,
Expand Down
4 changes: 4 additions & 0 deletions src/app/styles/_reset.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,3 +142,7 @@ body {
width: 100%;
height: 100%;
}

* {
scrollbar-width: none;
}
49 changes: 49 additions & 0 deletions src/shared/ui/carousel/Carousel.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
}
}
}
Loading
Loading