-
Notifications
You must be signed in to change notification settings - Fork 0
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.
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
메인 화면 figma 프로토 타입 초기 퍼블리싱 / 컴포넌트 구조 설계 작업 #6
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
고생하셨습니다!
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
<title>Vite + React + TS</title> | ||
<title>세모 - 세종대의 모든 것</title> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
title 깔끔하게 잘 설정된 것 같아요!
@@ -30,6 +30,7 @@ | |||
"@tanstack/react-query-devtools": "^5.59.8", | |||
"axios": "^1.7.7", | |||
"jotai": "^2.10.0", | |||
"overlay-kit": "^1.4.1", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
이번에 처음 알게되었습니다. 덕분에 좋은 것 하나 배웁니다.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
이미지 불러오는 기능 분리 좋은 것 같아요.
fetchImageWithFallback({ | ||
imageUrl, | ||
onSuccess: () => setIsImageReady(true), | ||
onError: () => { | ||
setBackgroundImageUrl(FALLBACK_BACKGROUND_URL); | ||
setIsImageReady(true); | ||
}, | ||
}); | ||
}, []); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👍👍
export const SearchInput = () => { | ||
return <StyledInput type='text' placeholder='무엇이든 검색해 보세요...' />; | ||
}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
이 부분 검색 엔진 느낌으로 개발 진행하겠습니다!
export const Home = () => { | ||
return ( | ||
<AppContainer> | ||
<BackgroundImageView /> | ||
<HeaderView /> | ||
<Clock /> | ||
|
||
{/* Search */} | ||
<SearchInputContainer> | ||
<SearchInput /> | ||
<TrendingKeywords /> | ||
</SearchInputContainer> | ||
|
||
{/* <Notice /> */} | ||
<NoticeView /> | ||
|
||
{/* <Bookmark /> */} | ||
<BookmarkContainer> | ||
<BookmarkCard /> | ||
<BookmarkCard /> | ||
<BookmarkCard /> | ||
<BookmarkCard /> | ||
<BookmarkCard /> | ||
<BookmarkCard /> | ||
</BookmarkContainer> | ||
|
||
{/* 여기까지 스크롤 전 */} | ||
{/* <ProjectCuration /> */} | ||
</AppContainer> | ||
); | ||
}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
한눈에 잘 보이는 것 같아요!
작업 내용 요약
전반적인 피그마 프로토 타입 퍼블리싱 , 레이아웃 , 컴포넌트 구조 잡기 작업
임시로 배포 해둠
참고자료