Skip to content

Commit

Permalink
✨ 피드 메인 페이지 UI 업데이트 (#80)
Browse files Browse the repository at this point in the history 
* feat: 피드 코딩 데이터 이미지 비율 변경
* feat: 이미지 비율 1:1로 수정
* feat: 캐러셀 컨트롤 박스 간격 조정
* feat: 신고하기 UI 업데이트 반영
* feat: 신고하기 UI 숨기기 체크박스 간격 조정
* feat: textarea padding 조정
  • Loading branch information
@BangDori
BangDori authored May 25, 2024
1 parent 9c01160 commit 3ef81c7
Show file tree
Hide file tree
Showing 4 changed files with 39 additions and 43 deletions.
58 changes: 29 additions & 29 deletions src/app/mocks/consts/feed.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,43 +18,43 @@ export const feeds: Feeds = {
images: [
{
id: 1,
imageUrl: 'https://picsum.photos/320/400',
imageUrl: 'https://picsum.photos/320/320',
},
{
id: 1,
imageUrl: 'https://picsum.photos/320/400',
imageUrl: 'https://picsum.photos/320/320',
},
{
id: 2,
imageUrl: 'https://picsum.photos/320/400',
imageUrl: 'https://picsum.photos/320/320',
},
{
id: 4,
imageUrl: 'https://picsum.photos/320/400',
imageUrl: 'https://picsum.photos/320/320',
},
{
id: 5,
imageUrl: 'https://picsum.photos/320/400',
imageUrl: 'https://picsum.photos/320/320',
},
{
id: 6,
imageUrl: 'https://picsum.photos/320/400',
imageUrl: 'https://picsum.photos/320/320',
},
{
id: 7,
imageUrl: 'https://picsum.photos/320/400',
imageUrl: 'https://picsum.photos/320/320',
},
{
id: 8,
imageUrl: 'https://picsum.photos/320/400',
imageUrl: 'https://picsum.photos/320/320',
},
{
id: 9,
imageUrl: 'https://picsum.photos/320/400',
imageUrl: 'https://picsum.photos/320/320',
},
{
id: 10,
imageUrl: 'https://picsum.photos/320/400',
imageUrl: 'https://picsum.photos/320/320',
},
],

Expand Down Expand Up @@ -89,15 +89,15 @@ export const feeds: Feeds = {
images: [
{
id: 1,
imageUrl: 'https://picsum.photos/320/400',
imageUrl: 'https://picsum.photos/320/320',
},
{
id: 2,
imageUrl: 'https://picsum.photos/320/400',
imageUrl: 'https://picsum.photos/320/320',
},
{
id: 3,
imageUrl: 'https://picsum.photos/320/400',
imageUrl: 'https://picsum.photos/320/320',
},
],

Expand All @@ -117,23 +117,23 @@ export const feeds: Feeds = {
images: [
{
id: 1,
imageUrl: 'https://picsum.photos/320/400',
imageUrl: 'https://picsum.photos/320/320',
},
{
id: 2,
imageUrl: 'https://picsum.photos/320/400',
imageUrl: 'https://picsum.photos/320/320',
},
{
id: 3,
imageUrl: 'https://picsum.photos/320/400',
imageUrl: 'https://picsum.photos/320/320',
},
{
id: 4,
imageUrl: 'https://picsum.photos/320/400',
imageUrl: 'https://picsum.photos/320/320',
},
{
id: 5,
imageUrl: 'https://picsum.photos/320/400',
imageUrl: 'https://picsum.photos/320/320',
},
],

Expand All @@ -153,15 +153,15 @@ export const feeds: Feeds = {
images: [
{
id: 1,
imageUrl: 'https://picsum.photos/320/400',
imageUrl: 'https://picsum.photos/320/320',
},
{
id: 2,
imageUrl: 'https://picsum.photos/320/400',
imageUrl: 'https://picsum.photos/320/320',
},
{
id: 3,
imageUrl: 'https://picsum.photos/320/400',
imageUrl: 'https://picsum.photos/320/320',
},
],

Expand All @@ -181,15 +181,15 @@ export const feeds: Feeds = {
images: [
{
id: 1,
imageUrl: 'https://picsum.photos/320/400',
imageUrl: 'https://picsum.photos/320/320',
},
{
id: 2,
imageUrl: 'https://picsum.photos/320/400',
imageUrl: 'https://picsum.photos/320/320',
},
{
id: 3,
imageUrl: 'https://picsum.photos/320/400',
imageUrl: 'https://picsum.photos/320/320',
},
],

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

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

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

Expand Down
16 changes: 6 additions & 10 deletions src/features/feed-reports/ui/FeedReportsForm.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,19 +29,17 @@

.report-textarea-container {
margin-top: 16px;
position: relative;

width: 244px;
height: 72px;

.report-textarea {
padding: 10px;
padding: 10px 7px 10px 10px;

width: calc(100% - 20px);
height: calc(100% - 20px);
height: 48px;

background-color: $gray1;

border-radius: 4px;
resize: none;

&:focus {
Expand All @@ -50,17 +48,15 @@
}

.textarea-text-count {
position: absolute;

right: 10px;
bottom: 8px;
margin-top: 2px;
text-align: right;

color: $gray3;
}
}

.hide-checkbox-container {
margin: 12px 0 20px;
margin-bottom: 22px;

display: flex;
align-items: center;
Expand Down
4 changes: 2 additions & 2 deletions src/features/feed-reports/ui/FeedReportsForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,9 +76,9 @@ export const FeedReportsForm: React.FC<FeedReportsFormProps> = ({
onChange={handleInputContent}
maxLength={MAX_REPORT_CONTENT_LENGTH}
/>
<span className='textarea-text-count b2md'>
<p className='textarea-text-count b2md'>
{content.length}/{MAX_REPORT_CONTENT_LENGTH}
</span>
</p>
</div>

{/* 숨김 처리 체크박스 */}
Expand Down
4 changes: 2 additions & 2 deletions src/widgets/feed-carousel/ui/Carousel.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
}

img {
aspect-ratio: 4 / 5;
aspect-ratio: 1 / 1;
}
}
}
Expand All @@ -28,7 +28,7 @@
justify-content: center;
gap: 4px;

margin-bottom: 16px;
margin-bottom: 12px;

.dot {
width: 4px;
Expand Down

0 comments on commit 3ef81c7

Please sign in to comment.