-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* feat: 냉장고 페이지 컴포넌트 분리 * feat: 현재 탭 전달 및 업데이트 * chore: 게시판에서 탭상태 생성 * feat: 식자재 추가 모달 오픈 추가 및 닫기 전달 * feat: 식자재 추가 organism * feat: 모달-토글 컴포넌트 연결 * feat: 제출 완료시 토스트메시지 추가 * feat: 냉장고 페이지 컴포넌트 분리 * feat: 현재 탭 전달 및 업데이트 * chore: 게시판에서 탭상태 생성 * feat: 식자재 추가 모달 오픈 추가 및 닫기 전달 * feat: 식자재 추가 organism * feat: 모달-토글 컴포넌트 연결 * feat: 제출 완료시 토스트메시지 추가 * feat: 냉장고 목록 모달 추가 * fix: 코드리뷰 Button props 수정 등 --------- Co-authored-by: 한혜선 <[email protected]>
- Loading branch information
1 parent
d7b742a
commit 748c168
Showing
31 changed files
with
901 additions
and
45 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| import React from 'react'; | ||
|
|
||
| interface BorderTabProps { | ||
| tabName: '냉장' | '냉동'; | ||
| currentTabName: '냉장' | '냉동'; | ||
| handleTabNameChange: (tabName: '냉장' | '냉동') => void; | ||
| clickHandler?: () => void; | ||
| className?: string; | ||
| } | ||
| const BorderTab: React.FC<BorderTabProps> = ({ | ||
| tabName, | ||
| className, | ||
| currentTabName, | ||
| handleTabNameChange, | ||
| }) => { | ||
| return ( | ||
| <div | ||
| className={`bg-white w-full border-2 p-[8px] text-center rounded-[24px] ${className} ${ | ||
| currentTabName === tabName ? 'border-primary2 z-10' : 'border-gray-200' | ||
| }`} | ||
| onClick={() => { | ||
| handleTabNameChange(tabName); | ||
| }} | ||
| > | ||
| {tabName} | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default BorderTab; |
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,20 @@ | ||
| import React from 'react'; | ||
|
|
||
| interface ButtonProps { | ||
| text: string; | ||
| onClick?: () => void; | ||
| className?: string; | ||
| } | ||
|
|
||
| const Button: React.FC<ButtonProps> = ({ text, className, onClick }) => { | ||
| return ( | ||
| <button | ||
| className={` text-white p-18 gap-12 rounded-12 heading4-semibold ${className}`} | ||
| onClick={onClick} | ||
| > | ||
| {text} | ||
| </button> | ||
| ); | ||
| }; | ||
|
|
||
| export default Button; |
This file was deleted.
Oops, something went wrong.
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,20 @@ | ||
| import React from 'react'; | ||
|
|
||
| interface GrayBoxProps { | ||
| children: React.ReactNode; | ||
| className?: string; | ||
| onClick?: () => void; | ||
| } | ||
|
|
||
| const GrayBox: React.FC<GrayBoxProps> = ({ children, className, onClick }) => { | ||
| return ( | ||
| <div | ||
| className={`flex ${className ?? 'flex-col'} justify-center items-start bg-[#F5F6F7] gap-22 p-[16px] w-full bg-[#F5F6F7] rounded-12`} | ||
| onClick={onClick} | ||
| > | ||
| {children} | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default GrayBox; |
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
Large diffs are not rendered by default.
Oops, something went wrong.
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,31 @@ | ||
| import React from 'react'; | ||
|
|
||
| interface ModalBoxProps { | ||
| children: React.ReactNode; | ||
| blackClickHandler: () => void; | ||
| } | ||
|
|
||
| const ModalBox: React.FC<ModalBoxProps> = ({ children, blackClickHandler }) => { | ||
| const handleWhiteContentClick: (e: React.MouseEvent) => void = (e) => { | ||
| if (e.target === e.currentTarget) { | ||
| blackClickHandler(); | ||
| } | ||
| e.stopPropagation(); | ||
| }; | ||
|
|
||
| return ( | ||
| <div | ||
| className="fixed top-0 left-0 w-full h-full flex items-end justify-center bg-black bg-opacity-50 z-[9999]" | ||
| onClick={blackClickHandler} | ||
| > | ||
| <div | ||
| className="w-full max-w-[480px] min-h-[500px] pt-[40px] mb-[-24px] bg-white p-[20px] rounded-[24px]" | ||
| onClick={handleWhiteContentClick} | ||
| > | ||
| {children} | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default ModalBox; |
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,13 @@ | ||
| import React from 'react'; | ||
|
|
||
| const ModalCenter: React.FC = () => { | ||
| return ( | ||
| <div className="fixed top-0 left-0 max-w-[480px] w-full h-full flex items-center justify-center bg-black bg-opacity-50"> | ||
| <div className="bg-white p-4"> | ||
| <div>hi</div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default ModalCenter; |
Oops, something went wrong.