-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #945 from 42organization/GGFE-173-보관함-프로필-이미지띠-배경색-모달
[GGFE-173] 보관함 프로필 이미지띠 배경색 모달
- Loading branch information
Showing
32 changed files
with
494 additions
and
123 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
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
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
73 changes: 73 additions & 0 deletions
73
components/modal/store/inventory/ChangeProfileBackgroundModal.tsx
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,73 @@ | ||
| import { useResetRecoilState, useSetRecoilState } from 'recoil'; | ||
| import { modalState } from 'utils/recoil/modal'; | ||
| import { UseItemRequest } from 'types/inventoryTypes'; | ||
| import { ItemCautionContainer } from './ItemCautionContainer'; | ||
| import { | ||
| ModalButtonContainer, | ||
| ModalButton, | ||
| } from 'components/modal/ModalButton'; | ||
| import { Modal } from 'types/modalTypes'; | ||
| import styles from 'styles/modal/store/InventoryModal.module.scss'; | ||
| import GachaBall from './GachaBall'; | ||
| import { mockInstance } from 'utils/mockAxios'; | ||
| import { errorState } from 'utils/recoil/error'; | ||
|
|
||
| type ChangeProfileBackgroundModalProps = UseItemRequest; | ||
|
|
||
| // TODO : 주의사항 구체화 필요 | ||
| const caution = [ | ||
| '색상은 랜덤으로 결정됩니다.', | ||
| '아이템을 사용한 후에는 취소가 불가능합니다.', | ||
| ]; | ||
|
|
||
| // 랜덤 프로필 이미지띠 변경 | ||
| export default function ChangeProfileBackgroundModal({ | ||
| receiptId, | ||
| }: ChangeProfileBackgroundModalProps) { | ||
| const resetModal = useResetRecoilState(modalState); | ||
| const setModal = useSetRecoilState<Modal>(modalState); | ||
| const setError = useSetRecoilState<string>(errorState); | ||
|
|
||
| const gachaAction = async () => { | ||
| const data: UseItemRequest = { | ||
| receiptId: receiptId, | ||
| }; | ||
| try { | ||
| const res = await mockInstance.patch('/users/background', data); | ||
| // api 테스트용 -> 나중에 지우기 | ||
| console.log(`프로필 배경색: ${res.data}`); | ||
| // 가챠 애니메이션 모달 | ||
| setModal({ | ||
| modalName: 'USE-ITEM-GACHA', | ||
| randomItem: 'background', | ||
| }); | ||
| } catch (error) { | ||
| setError('HB05'); | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <div className={styles.container}> | ||
| <div className={styles.title}>프로필 배경색 변경</div> | ||
| <div className={styles.phrase}> | ||
| <div className={styles.section}> | ||
| <div className={styles.sectionTitle}></div> | ||
| <GachaBall /> | ||
| </div> | ||
| <ItemCautionContainer caution={caution} /> | ||
| <ModalButtonContainer> | ||
| <ModalButton | ||
| style='negative' | ||
| value='취소' | ||
| onClick={() => resetModal()} | ||
| /> | ||
| <ModalButton | ||
| style='positive' | ||
| value='뽑기' | ||
| onClick={() => gachaAction()} | ||
| /> | ||
| </ModalButtonContainer> | ||
| </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
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,41 @@ | ||
| import PlayerImage from 'components/PlayerImage'; | ||
| import styles from 'styles/modal/store/EdgePreview.module.scss'; | ||
|
|
||
| const edgeColorList = [ | ||
| 'BASIC', | ||
| 'EDGE1', | ||
| 'EDGE2', | ||
| 'EDGE3', | ||
| 'EDGE4', | ||
| 'EDGE5', | ||
| 'EDGE6', | ||
| 'EDGE7', | ||
| 'EDGE8', | ||
| 'EDGE9', | ||
| 'EDGE10', | ||
| 'EDGE11', | ||
| 'EDGE12', | ||
| 'EDGE13', | ||
| 'EDGE14', | ||
| 'EDGE15', | ||
| 'EDGE16', | ||
| ]; | ||
|
|
||
| export function EdgePreview() { | ||
| return ( | ||
| <div className={styles.container}> | ||
| <div className={styles.preview}> | ||
| {edgeColorList.map((color) => ( | ||
| <div key={color}> | ||
| <div>{color}</div> | ||
| <PlayerImage | ||
| src='/image/fallBackSrc.jpeg' | ||
| styleName={`mainProfile ${color.toLowerCase()}`} | ||
| size={30} | ||
| /> | ||
| </div> | ||
| ))} | ||
| </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
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
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,18 @@ | ||
| import { useEffect } from 'react'; | ||
| import { useSetRecoilState, useResetRecoilState } from 'recoil'; | ||
| import { colorModeState } from 'utils/recoil/colorMode'; | ||
| import { BackgroundColor } from 'types/colorModeTypes'; | ||
|
|
||
| function useProfileColorMode(color: BackgroundColor) { | ||
| const setColorMode = useSetRecoilState(colorModeState); | ||
| const resetColorMode = useResetRecoilState(colorModeState); | ||
|
|
||
| useEffect(() => { | ||
| setColorMode(color); | ||
| return () => { | ||
| resetColorMode(); | ||
| }; | ||
| }, [color]); | ||
| } | ||
|
|
||
| export default useProfileColorMode; |
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,13 @@ | ||
| import type { NextApiRequest, NextApiResponse } from 'next'; | ||
|
|
||
| export default function handler( | ||
| req: NextApiRequest, | ||
| res: NextApiResponse<string> | ||
| ) { | ||
| const { method } = req; | ||
| const { receiptId } = req.body; | ||
| if (method === 'PATCH') { | ||
| // res.status(204).end(); | ||
| res.status(200).json(`receiptId : ${receiptId}`); | ||
| } | ||
| } |
Oops, something went wrong.