-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* style: feed 컴포넌트 위치 이동 * feat: feed public api 제거 * design: profile 스타일 설정 * feat: profile 스켈레톤 UI * chore: vite host 옵션 추가 * feat: 피드 메인 페이지 Skeleton UI 추가 * design: Skeleton 애니메이션 추가 * design: 스켈레톤 UI 적용 * design: body reset 값 설정 * design: 피드 메인 페이지 헤더 디자인 조정 * feat: 로딩 화면 스크롤 비활성화 * fix: API 인터셉터 onError 메서드 수정 * feat: 네트워크 에러 컴포넌트 * style: 네트워크 에러 이미지 경로 수정 * feat: 피드 메인 페이지 public api 추가 * feat: feed 더미 데이터 추가 및 pageCount 개수 조정 * design: 피드 리스트 디자인 조정 * chore: react-toastify 라이브러리 추가 * feat: caution icon 추가 * feat: 인터넷 연결 불안정 토스트 UI * feat: 네트워크 에러 토스트 UI 수정 * style: @todo 주석 추가
- Loading branch information
Showing
36 changed files
with
523 additions
and
31 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export { FeedMainPage } from './ui/FeedMainPage'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1 +1 @@ | ||
export { FeedMainPage } from './feed-main/ui/FeedMainPage'; | ||
export { FeedMainPage } from './feed-main'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,4 @@ | ||
@forward 'colors.scss'; | ||
@forward 'fonts.scss'; | ||
@forward 'box.scss'; | ||
@forward 'skeleton.scss'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -133,3 +133,8 @@ button { | |
justify-content: center; | ||
align-items: center; | ||
} | ||
|
||
body { | ||
width: 100vw; | ||
height: 100vh; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
@keyframes loading { | ||
0% { | ||
background-position: -468px 0; | ||
} | ||
100% { | ||
background-position: 468px 0; | ||
} | ||
} | ||
|
||
@mixin skeletonAnimation() { | ||
animation-duration: 2s; | ||
animation-iteration-count: infinite; | ||
animation-name: loading; | ||
animation-timing-function: linear; | ||
background-image: linear-gradient( | ||
to right, | ||
#d8d8d8 0%, | ||
#bdbdbd 20%, | ||
#d8d8d8 40%, | ||
#d8d8d8 100% | ||
); | ||
|
||
background-repeat: no-repeat; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,11 +1,12 @@ | ||
export type IconName = | ||
| 'back' | ||
| 'notification' | ||
| 'like' | ||
| 'share' | ||
| 'kebab-menu' | ||
| 'writing' | ||
| 'bookmark' | ||
| 'pennyway-logo' | ||
| 'like' | ||
| 'chat' | ||
| 'search'; | ||
| 'search' | ||
| 'caution'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,5 +1,7 @@ | ||
export { ActiveButton, BasicButton } from './button'; | ||
export { PageHeader } from './header'; | ||
export { ConfirmModal, ConfirmReportModal, BottomSheetModal } from './modal'; | ||
export { Profile } from './profile'; | ||
export { Profile, SkeletonProfile } from './profile'; | ||
export { Icon } from './icon'; | ||
export { NetworkError } from './network-error'; | ||
export { NetworkToastError } from './network-toast-error'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,47 @@ | ||
@use '@/shared/styles/_index.scss' as *; | ||
|
||
.network-error-wrapper { | ||
z-index: 999; | ||
|
||
position: absolute; | ||
top: 0; | ||
right: 0; | ||
bottom: 0; | ||
left: 0; | ||
|
||
background-color: #fff; | ||
|
||
.network-error { | ||
display: flex; | ||
flex-direction: column; | ||
align-items: center; | ||
|
||
padding-top: 121px; | ||
|
||
.error-message { | ||
display: flex; | ||
flex-direction: column; | ||
align-items: center; | ||
|
||
gap: 8px; | ||
|
||
margin: 27.5px 0 16px; | ||
|
||
.error-title { | ||
color: $gray7; | ||
} | ||
|
||
.error-description { | ||
color: $gray4; | ||
} | ||
} | ||
|
||
.refetch-btn { | ||
@include responsive-box(107px, 36px); | ||
border-radius: 6px; | ||
background-color: $mint3; | ||
|
||
color: #ffffff; | ||
} | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
import NetworkErrorImage from '/assets/image/network_error.png'; | ||
import './NetworkError.scss'; | ||
|
||
interface NetworkErrorProps { | ||
refetch: () => void; | ||
} | ||
|
||
export const NetworkError: React.FC<NetworkErrorProps> = ({ refetch }) => { | ||
return ( | ||
<div className='network-error-wrapper'> | ||
<div className='network-error'> | ||
<img src={NetworkErrorImage} alt='network-error' /> | ||
<div className='error-message'> | ||
<h1 className='error-title h2semi'>인터넷에 연결되지 않았어요</h1> | ||
<p className='error-description b1md'> | ||
연결 확인 후 다시 시도해주세요 | ||
</p> | ||
</div> | ||
<button className='refetch-btn b1semi' onClick={refetch}> | ||
재시도하기 | ||
</button> | ||
</div> | ||
</div> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export { NetworkError } from './NetworkError'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,75 @@ | ||
@use '@/shared/styles/_index.scss' as *; | ||
|
||
@keyframes bounceInUp { | ||
from, | ||
60%, | ||
75%, | ||
90%, | ||
to { | ||
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); | ||
} | ||
from { | ||
opacity: 0; | ||
transform: translate3d(0, 100%, 0); | ||
} | ||
60% { | ||
opacity: 1; | ||
transform: translate3d(0, -20px, 0); | ||
} | ||
75% { | ||
transform: translate3d(0, 10px, 0); | ||
} | ||
90% { | ||
transform: translate3d(0, -5px, 0); | ||
} | ||
to { | ||
transform: translate3d(0, 0, 0); | ||
} | ||
} | ||
|
||
.Toastify { | ||
position: fixed; | ||
bottom: 8px; | ||
left: 0; | ||
right: 0; | ||
|
||
@include responsive-box(280px, 40px); | ||
margin: 0 auto; | ||
|
||
.network-error-toast { | ||
animation: bounceInUp 0.75s cubic-bezier(0.68, -0.55, 0.27, 1.55) both; | ||
|
||
width: 100%; | ||
height: 100%; | ||
border-radius: 6px; | ||
|
||
display: flex; | ||
align-items: center; | ||
|
||
color: #ffffff; | ||
background: #98a3b4e5; | ||
|
||
.Toastify__toast--default { | ||
color: #ffffff; | ||
|
||
width: 100%; | ||
|
||
.Toastify__toast-body { | ||
display: flex; | ||
align-items: center; | ||
|
||
gap: 6px; | ||
|
||
.Toastify__toast-icon { | ||
@include responsive-box(20px, 20px); | ||
|
||
margin-left: 12px; | ||
} | ||
} | ||
|
||
.Toastify__close-button { | ||
display: none; | ||
} | ||
} | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
import { ToastContainer } from 'react-toastify'; | ||
|
||
import './NetworkToastError.scss'; | ||
import { Icon } from '..'; | ||
|
||
export const NetworkToastError = () => { | ||
return ( | ||
<ToastContainer | ||
className='network-error-toast b1semi' | ||
position='bottom-center' | ||
autoClose={false} | ||
icon={<Icon name='caution' width='20' height='20' />} | ||
hideProgressBar={true} | ||
rtl={false} | ||
limit={1} | ||
theme='colored' | ||
/> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export { NetworkToastError } from './NetworkToastError'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,27 @@ | ||
@use '@/shared/styles/_index.scss' as *; | ||
|
||
.skeleton-profile { | ||
display: flex; | ||
align-items: center; | ||
border-radius: 8px; | ||
border: none; | ||
background-color: white; | ||
|
||
.skeleton-profile-image { | ||
@include skeletonAnimation(); | ||
@include responsive-box(32px, 32px); | ||
border-radius: 50%; | ||
overflow: hidden; | ||
|
||
background-color: $gray2; | ||
} | ||
|
||
.skeleton-name-section { | ||
@include skeletonAnimation(); | ||
@include responsive-box(56px, 14px); | ||
|
||
margin: 0 0 8px 8px; | ||
background-color: $gray2; | ||
border-radius: 4px; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
import './SkeletonProfile.scss'; | ||
|
||
export const SkeletonProfile = () => { | ||
return ( | ||
<div className='skeleton-profile'> | ||
<div className='skeleton-profile-image' /> | ||
<div className='skeleton-name-section' /> | ||
</div> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1 +1,2 @@ | ||
export { Profile } from './Profile'; | ||
export { SkeletonProfile } from './SkeletonProfile'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.