[Feat] 홈, 회원가입, 로그인 페이지 작성 #57
Conversation
|
넘나 잘만드셨네용 |
| @@ -24,5 +24,6 @@ module.exports = { | |||
| 'import/prefer-default-export': 0, | |||
| 'react/require-default-props': 0, | |||
| 'react/jsx-props-no-spreading': 0, | |||
| 'react/prop-types': 0, | |||
| useEffect(() => { | ||
| const handleScroll = () => { | ||
| const currentScrollY = window.scrollY; | ||
| setIsTop(currentScrollY <= 10); | ||
| }; | ||
|
|
||
| handleScroll(); | ||
| window.addEventListener('scroll', handleScroll, { passive: true }); | ||
|
|
||
| return () => window.removeEventListener('scroll', handleScroll); | ||
| }, []); |
There was a problem hiding this comment.
스크롤 위치에 따라서 Header 의 아래에 border 및 shadow 를 보여줄 지 정하기 위해 사용됩니다.
현재 로그인/회원가입 페이지에서는 확인하실 수 있습니다~
| <header className={headerClasses}> | ||
| {/* Logo Section */} | ||
| <div className="flex items-center space-x-4"> | ||
| <Link to="/" className="transition-opacity hover:opacity-80"> | ||
| <Harmony size={32} /> | ||
| </Link> | ||
| </div> | ||
|
|
||
| {/* Navigation Buttons */} | ||
| <nav className="flex items-center space-x-3"> | ||
| {!isLoginPage && ( | ||
| <Button variant={isSignupPage ? 'outline' : 'ghost'} asChild> | ||
| <Link to="/login" className="hover:text-primary font-medium transition-colors"> | ||
| 로그인 | ||
| </Link> | ||
| </Button> | ||
| )} | ||
|
|
||
| {!isSignupPage && ( | ||
| <Button variant="outline" asChild> | ||
| <Link to="/signup" className="hover:text-primary font-medium transition-colors"> | ||
| 회원가입 | ||
| </Link> | ||
| </Button> | ||
| )} | ||
| </nav> | ||
| </header> |
There was a problem hiding this comment.
조건부 렌더링으로 처리하기보다
사용하는 쪽에서 주입하는 쪽이 더 좋을 것 같아요!
asChild는 덕분에 알았습니다. 👍
There was a problem hiding this comment.
사용하는 쪽에서 path 를 주입하신다는 말씀이실까요?
There was a problem hiding this comment.
음.. 글로 쓰기가 어렵네요 시간이 늦어서 머리가 굳었나
낼 말로 이야기할게요 ㅋㅋㅋㅋ
| @@ -16,7 +42,7 @@ export default { | |||
| 700: 'hsl(var(--green-700))', | |||
| }, | |||
|
|
|||
| white: 'var(--white)', | |||
| white: 'hsl(var(--white))', | |||
There was a problem hiding this comment.
저번에 오프라인 때 말씀드리고 수정버전을 안올려서 ㅎㅎ
svg 내부 요소들을 확인해보니, 라이트 모드 기준으로 path 태그들의 색상이 검정이어야 맞는 것 같아서
routes 폴더 내 signup/login 등은 createFileRoute 를 하고 있어서 |
아하 이거 제가 질문의 의도를 잘 전달하지 못한 것 같습니다. ㅎㅎ; |
|
아하! 그렇군요 뇌이징이 되어서 바뀐지도 몰랐습니다 ㅜㅜ |
관련 이슈 번호
close #51
#25 #22
작업 내용
고민 사항
React Hook Form 과 zod 를 도입해야 하나 고민해보았습니다.
아직 프로젝트 사이즈가 큰 것도 아니고, 관리해야 할 Form 이 많지 않아
커스텀 훅으로 일단 작성해보려고 합니다.
이에 대한 내용은 여기에 있습니다.
스크린샷