From ff8631ffc5e6696a8ccb9ff9e682ab384bc92f92 Mon Sep 17 00:00:00 2001 From: eunbenn Date: Mon, 15 Jan 2024 04:13:38 +0900 Subject: [PATCH 01/18] =?UTF-8?q?chore:=20=ED=85=8C=EC=8A=A4=ED=8A=B8=20uu?= =?UTF-8?q?id=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Detail/api/getBookDetail.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Detail/api/getBookDetail.ts b/src/Detail/api/getBookDetail.ts index 5ed7512f..ede46f10 100644 --- a/src/Detail/api/getBookDetail.ts +++ b/src/Detail/api/getBookDetail.ts @@ -2,7 +2,7 @@ import { api } from '../../libs/api'; export async function getBookDetail() { const data = await api.get( - `/api/books/detail/ee4f66f9-9cf4-4b28-90f4-f71d0ecba024`, + `/api/books/detail/ee4f66f9-9cf4-4b28-90f4-f71d0ecba021`, { headers: { 'Content-Type': 'application/json', From aa4149347bac74b5ba0a6c6d437c529cd28b00c1 Mon Sep 17 00:00:00 2001 From: eunbenn Date: Tue, 16 Jan 2024 01:12:18 +0900 Subject: [PATCH 02/18] =?UTF-8?q?style:=20=EB=B3=80=EA=B2=BD=EB=90=9C=20?= =?UTF-8?q?=EC=BB=AC=EB=9F=AC=20=ED=95=84=EB=93=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../BigLecueNote/BigLecueNote.style.ts | 35 ++++--------------- src/Detail/components/BigLecueNote/index.tsx | 9 ++--- .../BookInfoBox/BookInfoBox.style.ts | 33 +++++++++-------- src/Detail/components/BookInfoBox/index.tsx | 2 +- .../LecueNoteListHeader.style.ts | 17 ++++----- .../components/LecueNoteLIstHeader/index.tsx | 2 +- .../LecueNoteListContainer.style.ts | 11 ++---- .../LecueNoteListContainer/index.tsx | 6 ++-- .../SmallLecueNote/SmallLecueNote.style.ts | 35 ++++--------------- .../components/SmallLecueNote/index.tsx | 9 ++--- src/Detail/type/lecueBookType.ts | 3 +- src/StickerAttach/api/postStickerState.ts | 35 +++++++++++++++++++ 12 files changed, 92 insertions(+), 105 deletions(-) create mode 100644 src/StickerAttach/api/postStickerState.ts diff --git a/src/Detail/components/BigLecueNote/BigLecueNote.style.ts b/src/Detail/components/BigLecueNote/BigLecueNote.style.ts index 9f24aaba..a2ba5cc3 100644 --- a/src/Detail/components/BigLecueNote/BigLecueNote.style.ts +++ b/src/Detail/components/BigLecueNote/BigLecueNote.style.ts @@ -1,8 +1,7 @@ import styled from '@emotion/styled'; export const BigLecueNoteWrapper = styled.div<{ - noteBackgroundColor: number; - noteBackgroundImage: string; + noteBackground: string; noteTextColor: number; }>` width: 100%; @@ -10,36 +9,16 @@ export const BigLecueNoteWrapper = styled.div<{ padding: 2rem 1.1rem 1.7rem 1.9rem; border-radius: 0.6rem; - background: ${({ theme, noteBackgroundColor, noteBackgroundImage }) => { - if (noteBackgroundColor === -1) { - return `url(${noteBackgroundImage})`; + ${({ noteBackground }) => { + if (noteBackground.substring(0, 1) === '#') { + return `background-color: ${noteBackground}`; } else { - switch (noteBackgroundColor) { - case 1: - return theme.colors.sub_pink; - case 2: - return theme.colors.sub_blue; - case 3: - return theme.colors.sub_green; - case 4: - return theme.colors.sub_purple; - case 5: - return theme.colors.sub_yellow; - case 6: - return theme.colors.sub_ivory; - default: - return 'transparent'; - } + return `background: url(${noteBackground})`; } }}; background-size: cover; - color: ${({ theme, noteTextColor }) => { - switch (noteTextColor) { - case 0: - return theme.colors.white; - case 1: - return theme.colors.BG; - } + color: ${({ noteTextColor }) => { + return noteTextColor; }}; `; diff --git a/src/Detail/components/BigLecueNote/index.tsx b/src/Detail/components/BigLecueNote/index.tsx index 7bb04427..9fa75b7f 100644 --- a/src/Detail/components/BigLecueNote/index.tsx +++ b/src/Detail/components/BigLecueNote/index.tsx @@ -5,8 +5,7 @@ interface BigLecueNoteProps { noteDate: string; noteNickname: string; noteTextColor: number; - noteBackgroundColor: number; - noteBackgroundImage: string; + noteBackground: string; } function BigLecueNote({ @@ -14,13 +13,11 @@ function BigLecueNote({ noteDate, noteNickname, noteTextColor, - noteBackgroundColor, - noteBackgroundImage, + noteBackground, }: BigLecueNoteProps) { return ( {noteNickname} diff --git a/src/Detail/components/BookInfoBox/BookInfoBox.style.ts b/src/Detail/components/BookInfoBox/BookInfoBox.style.ts index 77c89392..2312e313 100644 --- a/src/Detail/components/BookInfoBox/BookInfoBox.style.ts +++ b/src/Detail/components/BookInfoBox/BookInfoBox.style.ts @@ -1,17 +1,18 @@ import styled from '@emotion/styled'; -export const BookInfoBoxWrapper = styled.div<{ backgroundColor: number }>` +export const BookInfoBoxWrapper = styled.div<{ backgroundColor: string }>` display: flex; width: 100%; height: 18.3em; background-color: ${({ theme, backgroundColor }) => { + backgroundColor; switch (backgroundColor) { - case 0: + case '#F5F5F5': return theme.colors.BG; - case 1: - return theme.colors.white; + case '#191919': + return theme.colors.background; } }}; `; @@ -48,44 +49,48 @@ export const BookInfoHeaderItemWrapper = styled.div` column-gap: 0.3rem; `; -export const BookInfoHeaderItem = styled.p<{ backgroundColor: number }>` +export const BookInfoHeaderItem = styled.p<{ backgroundColor: string }>` height: 1.8rem; padding-top: 0.4rem; color: ${({ theme, backgroundColor }) => { + backgroundColor; switch (backgroundColor) { - case 0: + case '#F5F5F5': return theme.colors.white30; - case 1: + case '#191919': return theme.colors.MG; } }}; + ${({ theme }) => theme.fonts.E_Caption_R_12}; `; -export const BookInfoTitle = styled.p<{ backgroundColor: number }>` +export const BookInfoTitle = styled.p<{ backgroundColor: string }>` margin-top: 0.7rem; color: ${({ theme, backgroundColor }) => { + backgroundColor; switch (backgroundColor) { - case 0: - return theme.colors.white; - case 1: + case '#F5F5F5': + return theme.colors.background; + case '#191919': return theme.colors.BG; } }}; ${({ theme }) => theme.fonts.Head2_SB_18}; `; -export const BookInfoContent = styled.p<{ backgroundColor: number }>` +export const BookInfoContent = styled.p<{ backgroundColor: string }>` height: 8.5rem; margin-top: 1rem; color: ${({ theme, backgroundColor }) => { + backgroundColor; switch (backgroundColor) { - case 0: + case '#F5F5F5': return theme.colors.white80; - case 1: + case '#191919': return theme.colors.BG; } }}; diff --git a/src/Detail/components/BookInfoBox/index.tsx b/src/Detail/components/BookInfoBox/index.tsx index 348ac5bb..2ce5db11 100644 --- a/src/Detail/components/BookInfoBox/index.tsx +++ b/src/Detail/components/BookInfoBox/index.tsx @@ -7,7 +7,7 @@ interface BookInfoBoxProps { bookNickname: string; title: string; description: string; - bookBackgroundColor: number; + bookBackgroundColor: string; } function BookInfoBox({ diff --git a/src/Detail/components/LecueNoteLIstHeader/LecueNoteListHeader.style.ts b/src/Detail/components/LecueNoteLIstHeader/LecueNoteListHeader.style.ts index 1c4dc714..eeb1d252 100644 --- a/src/Detail/components/LecueNoteLIstHeader/LecueNoteListHeader.style.ts +++ b/src/Detail/components/LecueNoteLIstHeader/LecueNoteListHeader.style.ts @@ -1,7 +1,7 @@ import styled from '@emotion/styled'; export const LecueNoteListHeaderWrapper = styled.div<{ - backgroundColor: number; + backgroundColor: string; }>` display: flex; position: sticky; @@ -14,7 +14,7 @@ export const LecueNoteListHeaderWrapper = styled.div<{ column-gap: 1rem; `; -export const LecueNoteCountBox = styled.div<{ backgroundColor: number }>` +export const LecueNoteCountBox = styled.div<{ backgroundColor: string }>` display: flex; justify-content: center; align-items: center; @@ -23,18 +23,19 @@ export const LecueNoteCountBox = styled.div<{ backgroundColor: number }>` border-radius: 7rem; background-color: ${({ theme, backgroundColor }) => { + backgroundColor; switch (backgroundColor) { - case 0: + case '#F5F5F5': return theme.colors.BG; - case 1: - return theme.colors.white; + case '#191919': + return theme.colors.background; } }}; color: ${({ theme, backgroundColor }) => { switch (backgroundColor) { - case 0: - return theme.colors.white; - case 1: + case '#F5F5F5': + return theme.colors.background; + case '#191919': return theme.colors.BG; } }}; diff --git a/src/Detail/components/LecueNoteLIstHeader/index.tsx b/src/Detail/components/LecueNoteLIstHeader/index.tsx index 132031d2..0a76120a 100644 --- a/src/Detail/components/LecueNoteLIstHeader/index.tsx +++ b/src/Detail/components/LecueNoteLIstHeader/index.tsx @@ -3,7 +3,7 @@ import * as S from './LecueNoteListHeader.style'; interface LecueNoteListHeaderProps { noteNum: number; - backgroundColor: number; + backgroundColor: string; isZigZagView: boolean; buttonOnClick: () => void; } diff --git a/src/Detail/components/LecueNoteListContainer/LecueNoteListContainer.style.ts b/src/Detail/components/LecueNoteListContainer/LecueNoteListContainer.style.ts index 1ece03d5..7beffc27 100644 --- a/src/Detail/components/LecueNoteListContainer/LecueNoteListContainer.style.ts +++ b/src/Detail/components/LecueNoteListContainer/LecueNoteListContainer.style.ts @@ -1,20 +1,15 @@ import styled from '@emotion/styled'; export const LecueNoteListContainerWrapper = styled.div<{ - backgroundColor: number; + backgroundColor: string; isEditable: boolean; }>` width: 100vw; padding: 0 1.6rem; padding-bottom: ${({ isEditable }) => isEditable && '12rem'}; - background-color: ${({ theme, backgroundColor }) => { - switch (backgroundColor) { - case 0: - return theme.colors.white; - case 1: - return theme.colors.BG; - } + background-color: ${({ backgroundColor }) => { + return backgroundColor; }}; flex: 1; diff --git a/src/Detail/components/LecueNoteListContainer/index.tsx b/src/Detail/components/LecueNoteListContainer/index.tsx index ce4efa3c..7db99b41 100644 --- a/src/Detail/components/LecueNoteListContainer/index.tsx +++ b/src/Detail/components/LecueNoteListContainer/index.tsx @@ -18,7 +18,7 @@ import * as S from './LecueNoteListContainer.style'; interface LecueNoteListContainerProps { noteNum: number; - backgroundColor: number; + backgroundColor: string; noteList: NoteType[]; postedStickerList: postedStickerType[]; } @@ -121,14 +121,14 @@ function LecueNoteListContainer({ {!isEditable && ( <> - {backgroundColor === 0 ? ( + {backgroundColor === '#F5F5F5' ? ( ) : ( )} - {backgroundColor === 0 ? ( + {backgroundColor === '#F5F5F5' ? ( ) : ( diff --git a/src/Detail/components/SmallLecueNote/SmallLecueNote.style.ts b/src/Detail/components/SmallLecueNote/SmallLecueNote.style.ts index f4fdc5c1..058a8c51 100644 --- a/src/Detail/components/SmallLecueNote/SmallLecueNote.style.ts +++ b/src/Detail/components/SmallLecueNote/SmallLecueNote.style.ts @@ -3,8 +3,7 @@ import styled from '@emotion/styled'; export const SmallLecueNoteWrapper = styled.div<{ renderType: number; noteTextColor: number; - noteBackgroundColor: number; - noteBackgroundImage: string; + noteBackground: string; }>` width: 15.2rem; height: 16.6rem; @@ -27,36 +26,16 @@ export const SmallLecueNoteWrapper = styled.div<{ }}; border-radius: 0.4rem; - background: ${({ theme, noteBackgroundColor, noteBackgroundImage }) => { - if (noteBackgroundColor === -1 && noteBackgroundImage) { - return `url(${noteBackgroundImage})`; + ${({ noteBackground }) => { + if (noteBackground.substring(0, 1) === '#') { + return `background-color: ${noteBackground}`; } else { - switch (noteBackgroundColor) { - case 1: - return theme.colors.sub_pink; - case 2: - return theme.colors.sub_blue; - case 3: - return theme.colors.sub_green; - case 4: - return theme.colors.sub_purple; - case 5: - return theme.colors.sub_yellow; - case 6: - return theme.colors.sub_ivory; - default: - return 'transparent'; - } + return `background: url(${noteBackground})`; } }}; background-size: cover; - color: ${({ theme, noteTextColor }) => { - switch (noteTextColor) { - case 0: - return theme.colors.white; - case 1: - return theme.colors.BG; - } + color: ${({ noteTextColor }) => { + return noteTextColor; }}; transform: ${({ renderType }) => { diff --git a/src/Detail/components/SmallLecueNote/index.tsx b/src/Detail/components/SmallLecueNote/index.tsx index 11519b80..6e82465f 100644 --- a/src/Detail/components/SmallLecueNote/index.tsx +++ b/src/Detail/components/SmallLecueNote/index.tsx @@ -20,8 +20,7 @@ interface SmallLecueNoteProps { noteDate: string; noteNickname: string; noteTextColor: number; - noteBackgroundColor: number; - noteBackgroundImage: string; + noteBackground: string; noteId: number; noteList: Note[]; } @@ -32,8 +31,7 @@ function SmallLecueNote({ noteDate, noteNickname, noteTextColor, - noteBackgroundColor, - noteBackgroundImage, + noteBackground, noteId, noteList, }: SmallLecueNoteProps) { @@ -52,8 +50,7 @@ function SmallLecueNote({ {noteNickname} diff --git a/src/Detail/type/lecueBookType.ts b/src/Detail/type/lecueBookType.ts index a5ab7a7b..5b602421 100644 --- a/src/Detail/type/lecueBookType.ts +++ b/src/Detail/type/lecueBookType.ts @@ -12,6 +12,5 @@ export interface NoteType { noteDate: string; noteNickname: string; noteTextColor: number; - noteBackgroundColor: number; - noteBackgroundImage: string; + noteBackground: string; } diff --git a/src/StickerAttach/api/postStickerState.ts b/src/StickerAttach/api/postStickerState.ts new file mode 100644 index 00000000..8e1b37b8 --- /dev/null +++ b/src/StickerAttach/api/postStickerState.ts @@ -0,0 +1,35 @@ +import { api } from '../../libs/api'; + +interface postedStickerParams { + postedStickerId: number; + bookId: number; + positionX: number; + positionY: number; +} + +export async function postStickerState({ + postedStickerId, + bookId, + positionX, + positionY, +}: postedStickerParams) { + console.log('api', postedStickerId, bookId, positionX, positionY); + + const data = await api.post( + '/api/stickers', + { + bookId: bookId, + stickerId: postedStickerId, + positionX: positionX, + positionY: positionY, + }, + { + headers: { + 'Content-Type': 'application/json', + Authorization: `Bearer ${import.meta.env.VITE_APP_TOKEN}`, + }, + }, + ); + console.log(data.data.data); + return data?.data?.data; +} From 0e1bbf54c448b1648fb9cf7c4d2b33ec5c27a3b3 Mon Sep 17 00:00:00 2001 From: eunbenn Date: Tue, 16 Jan 2024 01:14:04 +0900 Subject: [PATCH 03/18] =?UTF-8?q?chore:=20=ED=83=80=EC=9E=85=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Detail/components/SmallLecueNote/index.tsx | 14 ++------------ src/LecueNote/components/CreateNote/index.tsx | 3 ++- 2 files changed, 4 insertions(+), 13 deletions(-) diff --git a/src/Detail/components/SmallLecueNote/index.tsx b/src/Detail/components/SmallLecueNote/index.tsx index 6e82465f..8f194569 100644 --- a/src/Detail/components/SmallLecueNote/index.tsx +++ b/src/Detail/components/SmallLecueNote/index.tsx @@ -1,19 +1,9 @@ import { useState } from 'react'; +import { NoteType } from '../../type/lecueBookType'; import LecueNoteModal from '../LecueNoteModal'; import * as S from './SmallLecueNote.style'; -interface Note { - noteId: number; - renderType: number; - content: string; - noteDate: string; - noteNickname: string; - noteTextColor: number; - noteBackgroundColor: number; - noteBackgroundImage: string; -} - interface SmallLecueNoteProps { renderType: number; content: string; @@ -22,7 +12,7 @@ interface SmallLecueNoteProps { noteTextColor: number; noteBackground: string; noteId: number; - noteList: Note[]; + noteList: NoteType[]; } function SmallLecueNote({ diff --git a/src/LecueNote/components/CreateNote/index.tsx b/src/LecueNote/components/CreateNote/index.tsx index 783b7711..62c12302 100644 --- a/src/LecueNote/components/CreateNote/index.tsx +++ b/src/LecueNote/components/CreateNote/index.tsx @@ -1,4 +1,5 @@ import { useState } from 'react'; + import { BG_COLOR_CHART, CATEGORY, @@ -31,7 +32,7 @@ function CreateNote() { return ( - + Date: Tue, 16 Jan 2024 01:51:08 +0900 Subject: [PATCH 04/18] =?UTF-8?q?chore:=20=EC=A3=BC=EC=84=9D=20=EC=82=AD?= =?UTF-8?q?=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/StickerAttach/api/postStickerState.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/StickerAttach/api/postStickerState.ts b/src/StickerAttach/api/postStickerState.ts index 8e1b37b8..6c506ec2 100644 --- a/src/StickerAttach/api/postStickerState.ts +++ b/src/StickerAttach/api/postStickerState.ts @@ -30,6 +30,5 @@ export async function postStickerState({ }, }, ); - console.log(data.data.data); return data?.data?.data; } From 30c306e11868893ce1b0973d7f03ddcf4b55227d Mon Sep 17 00:00:00 2001 From: eunbenn Date: Tue, 16 Jan 2024 14:20:32 +0900 Subject: [PATCH 05/18] =?UTF-8?q?style:=20=EC=8A=A4=ED=8B=B0=EC=BB=A4=20?= =?UTF-8?q?=ED=85=8C=EB=91=90=EB=A6=AC=20=EC=A3=BC=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/ZigZagView/ZigZagView.style.ts | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/src/Detail/components/ZigZagView/ZigZagView.style.ts b/src/Detail/components/ZigZagView/ZigZagView.style.ts index 57031213..ca5a4f28 100644 --- a/src/Detail/components/ZigZagView/ZigZagView.style.ts +++ b/src/Detail/components/ZigZagView/ZigZagView.style.ts @@ -21,13 +21,18 @@ export const StickerContainer = styled.div` height: 100%; `; -export const Sticker = styled.div<{ stickerImage: string }>` - background-image: ${({ stickerImage }) => `url(${stickerImage})`}; - +export const Sticker = styled.div<{ + stickerImage: string; + isEditable?: boolean; +}>` width: 10rem; height: 10rem; - background-repeat: no-repeat; + + ${({ isEditable, theme }) => + isEditable && `border: solid 0.1rem ${theme.colors.key}`}; background-position: center; + background-image: ${({ stickerImage }) => `url(${stickerImage})`}; + background-repeat: no-repeat; object-fit: cover; `; From 440007eb9123b2ded17e3aab9f6000b8ac5e3952 Mon Sep 17 00:00:00 2001 From: eunbenn Date: Tue, 16 Jan 2024 17:09:01 +0900 Subject: [PATCH 06/18] =?UTF-8?q?chore:=20=ED=83=80=EC=9E=85=20=EB=B6=84?= =?UTF-8?q?=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/StickerAttach/api/postStickerState.ts | 8 +------- src/StickerAttach/type/postStickerType.ts | 6 ++++++ 2 files changed, 7 insertions(+), 7 deletions(-) create mode 100644 src/StickerAttach/type/postStickerType.ts diff --git a/src/StickerAttach/api/postStickerState.ts b/src/StickerAttach/api/postStickerState.ts index 6c506ec2..471d4ee9 100644 --- a/src/StickerAttach/api/postStickerState.ts +++ b/src/StickerAttach/api/postStickerState.ts @@ -1,11 +1,5 @@ import { api } from '../../libs/api'; - -interface postedStickerParams { - postedStickerId: number; - bookId: number; - positionX: number; - positionY: number; -} +import { postedStickerParams } from '../type/postStickerType'; export async function postStickerState({ postedStickerId, diff --git a/src/StickerAttach/type/postStickerType.ts b/src/StickerAttach/type/postStickerType.ts new file mode 100644 index 00000000..f1a4b42d --- /dev/null +++ b/src/StickerAttach/type/postStickerType.ts @@ -0,0 +1,6 @@ +export interface postedStickerParams { + postedStickerId: number; + bookId: number; + positionX: number; + positionY: number; +} From ae10fef532e187e6c1cd136193b7bf12efcbb227 Mon Sep 17 00:00:00 2001 From: eunbenn Date: Tue, 16 Jan 2024 17:10:00 +0900 Subject: [PATCH 07/18] =?UTF-8?q?chore:=20useQuery=EB=B6=99=EC=9D=B4?= =?UTF-8?q?=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../LecueNoteListContainer/index.tsx | 17 ++++++++++-- src/StickerAttach/hooks/.gitkeep | 0 .../hooks/usePostStickerState.ts | 27 +++++++++++++++++++ 3 files changed, 42 insertions(+), 2 deletions(-) delete mode 100644 src/StickerAttach/hooks/.gitkeep create mode 100644 src/StickerAttach/hooks/usePostStickerState.ts diff --git a/src/Detail/components/LecueNoteListContainer/index.tsx b/src/Detail/components/LecueNoteListContainer/index.tsx index 7db99b41..4cad6187 100644 --- a/src/Detail/components/LecueNoteListContainer/index.tsx +++ b/src/Detail/components/LecueNoteListContainer/index.tsx @@ -48,6 +48,8 @@ function LecueNoteListContainer({ const { state } = location; + const postMutation = usePostStickerState(); + useEffect(() => { // editable 상태 변경 if (state) { @@ -88,8 +90,19 @@ function LecueNoteListContainer({ }; const handleClickDone = () => { - setIsEditable(true); - sessionStorage.removeItem('scrollPosition'); + // 다 붙였을 때 post 실행 + const { postedStickerId, positionX, positionY } = stickerState; + const bookId = 1; + + postMutation.mutate({ + postedStickerId: postedStickerId, + bookId: bookId, + positionX: positionX, + positionY: positionY, + }); + + setIsEditable(false); + navigate('/lecue-book'); }; diff --git a/src/StickerAttach/hooks/.gitkeep b/src/StickerAttach/hooks/.gitkeep deleted file mode 100644 index e69de29b..00000000 diff --git a/src/StickerAttach/hooks/usePostStickerState.ts b/src/StickerAttach/hooks/usePostStickerState.ts new file mode 100644 index 00000000..922e4cdb --- /dev/null +++ b/src/StickerAttach/hooks/usePostStickerState.ts @@ -0,0 +1,27 @@ +import { AxiosError } from 'axios'; +import { useMutation } from 'react-query'; + +import { postStickerState } from '../api/postStickerState'; +import { postedStickerParams } from '../type/postStickerType'; + +const usePostStickerState = () => { + const mutation = useMutation({ + mutationFn: ({ + postedStickerId, + bookId, + positionX, + positionY, + }: postedStickerParams) => { + return postStickerState({ + postedStickerId, + bookId, + positionX, + positionY, + }); + }, + onError: (err: AxiosError) => console.log(err), + }); + return mutation; +}; + +export default usePostStickerState; From 649f997d962eadadb22df29c0e95cd3b34bd231c Mon Sep 17 00:00:00 2001 From: eunbenn Date: Tue, 16 Jan 2024 17:14:20 +0900 Subject: [PATCH 08/18] =?UTF-8?q?feat:=20=EC=8A=A4=ED=81=AC=EB=A1=A4=20?= =?UTF-8?q?=EC=9C=84=EC=B9=98=20=EC=A0=80=EC=9E=A5/=EB=B3=B5=EC=9B=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../LecueNoteListContainer/index.tsx | 10 ++++++--- src/Detail/components/ZigZagView/index.tsx | 22 +++++++++++-------- 2 files changed, 20 insertions(+), 12 deletions(-) diff --git a/src/Detail/components/LecueNoteListContainer/index.tsx b/src/Detail/components/LecueNoteListContainer/index.tsx index 4cad6187..a510ce2d 100644 --- a/src/Detail/components/LecueNoteListContainer/index.tsx +++ b/src/Detail/components/LecueNoteListContainer/index.tsx @@ -1,4 +1,4 @@ -import { useEffect, useState } from 'react'; +import { useEffect, useRef, useState } from 'react'; import { DraggableData, DraggableEvent } from 'react-draggable'; import { useLocation, useNavigate } from 'react-router-dom'; @@ -32,6 +32,7 @@ function LecueNoteListContainer({ //hooks const location = useLocation(); const navigate = useNavigate(); + const scrollRef = useRef(document.createElement('div')); //storage const storedValue = sessionStorage.getItem('scrollPosition'); const savedScrollPosition = @@ -60,6 +61,7 @@ function LecueNoteListContainer({ postedStickerId: stickerId, stickerImage: stickerImage, })); + sessionStorage.removeItem('scrollPosition'); } else { // editable 상태 변경 setIsEditable(false); @@ -77,11 +79,11 @@ function LecueNoteListContainer({ })); }; + // 스티커 버튼 클릭시 const handleClickStickerButton = () => { + // 현재 스크롤 위치 저장 sessionStorage.setItem('scrollPosition', window.scrollY.toString()); - setIsEditable(true); - navigate('/sticker-pack'); }; @@ -120,11 +122,13 @@ function LecueNoteListContainer({ {isZigZagView ? ( ) : ( diff --git a/src/Detail/components/ZigZagView/index.tsx b/src/Detail/components/ZigZagView/index.tsx index 3ad1ab44..ce1b4007 100644 --- a/src/Detail/components/ZigZagView/index.tsx +++ b/src/Detail/components/ZigZagView/index.tsx @@ -1,4 +1,4 @@ -import { useRef } from 'react'; +import { forwardRef, useRef } from 'react'; import Draggable, { DraggableData, DraggableEvent } from 'react-draggable'; import { NoteType, postedStickerType } from '../../type/lecueBookType'; @@ -11,15 +11,20 @@ interface ZigZagViewProps { stickerState: postedStickerType; isEditable: boolean; postedStickerList: postedStickerType[]; + savedScrollPosition: number; } -function ZigZagView({ +const ZigZagView = forwardRef(function ZigZagView( + { noteList, handleDrag, stickerState, isEditable, postedStickerList, -}: ZigZagViewProps) { + savedScrollPosition, + }: ZigZagViewProps, + ref: React.Ref, +) { const nodeRef = useRef(null); return ( @@ -29,24 +34,23 @@ function ZigZagView({ ))} - + {postedStickerList.map((data) => ( false} nodeRef={nodeRef} key={data.postedStickerId} positionOffset={{ x: data.positionX, y: data.positionY }} - onStart={() => false} > ))} {isEditable && ( - Date: Tue, 16 Jan 2024 17:15:15 +0900 Subject: [PATCH 09/18] =?UTF-8?q?chore:=20=EC=BD=94=EB=A9=98=ED=8A=B8=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Detail/components/LecueNoteListContainer/index.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/Detail/components/LecueNoteListContainer/index.tsx b/src/Detail/components/LecueNoteListContainer/index.tsx index a510ce2d..ef8322d6 100644 --- a/src/Detail/components/LecueNoteListContainer/index.tsx +++ b/src/Detail/components/LecueNoteListContainer/index.tsx @@ -10,6 +10,7 @@ import { IcCaution, } from '../../../assets'; import Button from '../../../components/common/Button'; +import usePostStickerState from '../../../StickerAttach/hooks/usePostStickerState'; import { NoteType, postedStickerType } from '../../type/lecueBookType'; import LecueNoteListHeader from '../LecueNoteLIstHeader'; import LinearView from '../LinearView'; @@ -52,7 +53,7 @@ function LecueNoteListContainer({ const postMutation = usePostStickerState(); useEffect(() => { - // editable 상태 변경 + // state : 라우터 타고 온 스티커 값, 즉 스티커 값을 갖고 있는 상태라면 if (state) { window.scrollTo(0, savedScrollPosition); const { stickerId, stickerImage } = state.sticker; From 59d5094461a5d14a0483e6ffbedc66fec7a45df2 Mon Sep 17 00:00:00 2001 From: eunbenn Date: Tue, 16 Jan 2024 17:15:36 +0900 Subject: [PATCH 10/18] =?UTF-8?q?feat:=20=EA=B8=80=EC=93=B0=EA=B8=B0=20?= =?UTF-8?q?=EB=9D=BC=EC=9A=B0=ED=8A=B8=20=EC=97=B0=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Detail/components/LecueNoteListContainer/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Detail/components/LecueNoteListContainer/index.tsx b/src/Detail/components/LecueNoteListContainer/index.tsx index ef8322d6..d60ecf70 100644 --- a/src/Detail/components/LecueNoteListContainer/index.tsx +++ b/src/Detail/components/LecueNoteListContainer/index.tsx @@ -89,7 +89,7 @@ function LecueNoteListContainer({ }; const handleClickWriteButton = () => { - alert('WriteBtn'); + navigate('/create-note'); }; const handleClickDone = () => { From 52371b02a99abe80f49fdbbf7c63513712d5e71e Mon Sep 17 00:00:00 2001 From: eunbenn Date: Tue, 16 Jan 2024 17:16:23 +0900 Subject: [PATCH 11/18] =?UTF-8?q?feat:=20=EC=8A=A4=ED=8B=B0=EC=BB=A4=20?= =?UTF-8?q?=EC=9C=84=EC=B9=98=20=EC=A1=B0=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Detail/components/LecueNoteListContainer/index.tsx | 4 ++-- src/Detail/components/ZigZagView/index.tsx | 6 ++---- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/src/Detail/components/LecueNoteListContainer/index.tsx b/src/Detail/components/LecueNoteListContainer/index.tsx index d60ecf70..bb1d3432 100644 --- a/src/Detail/components/LecueNoteListContainer/index.tsx +++ b/src/Detail/components/LecueNoteListContainer/index.tsx @@ -75,8 +75,8 @@ function LecueNoteListContainer({ const { positionX, positionY } = stickerState; setStickerState((prev) => ({ ...prev, - positionX: positionX + ui.deltaX, - positionY: positionY + ui.deltaY, + positionX: Math.ceil(positionX + ui.deltaX), + positionY: Math.ceil(positionY + ui.deltaY), })); }; diff --git a/src/Detail/components/ZigZagView/index.tsx b/src/Detail/components/ZigZagView/index.tsx index ce1b4007..a5c33dee 100644 --- a/src/Detail/components/ZigZagView/index.tsx +++ b/src/Detail/components/ZigZagView/index.tsx @@ -45,7 +45,6 @@ const ZigZagView = forwardRef(function ZigZagView( ))} - {isEditable && ( + )} - )} ); -} - +}); export default ZigZagView; From 0b0b4acab5b3bd1dba5944f578727f64a4d738ec Mon Sep 17 00:00:00 2001 From: eunbenn Date: Tue, 16 Jan 2024 17:20:49 +0900 Subject: [PATCH 12/18] =?UTF-8?q?style:=20sticker=20Style=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Detail/components/ZigZagView/ZigZagView.style.ts | 5 +++-- src/Detail/components/ZigZagView/index.tsx | 6 +++++- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/src/Detail/components/ZigZagView/ZigZagView.style.ts b/src/Detail/components/ZigZagView/ZigZagView.style.ts index ca5a4f28..c92b69c0 100644 --- a/src/Detail/components/ZigZagView/ZigZagView.style.ts +++ b/src/Detail/components/ZigZagView/ZigZagView.style.ts @@ -17,8 +17,9 @@ export const LecueNoteContainer = styled.div` export const StickerContainer = styled.div` position: absolute; - width: 100%; + width: 34.2rem; height: 100%; + padding: 0.4rem 0 2rem; `; export const Sticker = styled.div<{ @@ -30,7 +31,7 @@ export const Sticker = styled.div<{ ${({ isEditable, theme }) => isEditable && `border: solid 0.1rem ${theme.colors.key}`}; - + border-radius: 0.4rem; background-position: center; background-image: ${({ stickerImage }) => `url(${stickerImage})`}; background-repeat: no-repeat; diff --git a/src/Detail/components/ZigZagView/index.tsx b/src/Detail/components/ZigZagView/index.tsx index a5c33dee..e274b41c 100644 --- a/src/Detail/components/ZigZagView/index.tsx +++ b/src/Detail/components/ZigZagView/index.tsx @@ -55,7 +55,11 @@ const ZigZagView = forwardRef(function ZigZagView( bounds="parent" nodeRef={nodeRef} > - + )} From 8a8de87bf4d4c5d67a6995c41616a98d879bec10 Mon Sep 17 00:00:00 2001 From: eunbenn Date: Tue, 16 Jan 2024 17:21:04 +0900 Subject: [PATCH 13/18] =?UTF-8?q?style:=20=ED=94=84=EB=A6=AC=ED=8B=B0?= =?UTF-8?q?=EC=96=B4=20=EB=8B=B9=ED=95=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Detail/components/ZigZagView/index.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/Detail/components/ZigZagView/index.tsx b/src/Detail/components/ZigZagView/index.tsx index e274b41c..3f90b750 100644 --- a/src/Detail/components/ZigZagView/index.tsx +++ b/src/Detail/components/ZigZagView/index.tsx @@ -16,11 +16,11 @@ interface ZigZagViewProps { const ZigZagView = forwardRef(function ZigZagView( { - noteList, - handleDrag, - stickerState, - isEditable, - postedStickerList, + noteList, + handleDrag, + stickerState, + isEditable, + postedStickerList, savedScrollPosition, }: ZigZagViewProps, ref: React.Ref, @@ -45,7 +45,7 @@ const ZigZagView = forwardRef(function ZigZagView( ))} - {isEditable && ( + {isEditable && ( )} - + ); }); From 42db01ee7bf6a6efe13ae2dcf6d40a5cd322686f Mon Sep 17 00:00:00 2001 From: eunbenn Date: Tue, 16 Jan 2024 17:54:26 +0900 Subject: [PATCH 14/18] =?UTF-8?q?fix:=20=EB=A0=8C=EB=8D=94=EB=A7=81=20?= =?UTF-8?q?=EB=AC=B8=EC=A0=9C=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Detail/components/LecueNoteListContainer/index.tsx | 4 ---- src/StickerAttach/hooks/usePostStickerState.ts | 7 +++++++ 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/Detail/components/LecueNoteListContainer/index.tsx b/src/Detail/components/LecueNoteListContainer/index.tsx index bb1d3432..37a6deca 100644 --- a/src/Detail/components/LecueNoteListContainer/index.tsx +++ b/src/Detail/components/LecueNoteListContainer/index.tsx @@ -62,11 +62,9 @@ function LecueNoteListContainer({ postedStickerId: stickerId, stickerImage: stickerImage, })); - sessionStorage.removeItem('scrollPosition'); } else { // editable 상태 변경 setIsEditable(false); - navigate('/lecue-book'); } }, [state]); @@ -105,8 +103,6 @@ function LecueNoteListContainer({ }); setIsEditable(false); - - navigate('/lecue-book'); }; return ( diff --git a/src/StickerAttach/hooks/usePostStickerState.ts b/src/StickerAttach/hooks/usePostStickerState.ts index 922e4cdb..b230a1fa 100644 --- a/src/StickerAttach/hooks/usePostStickerState.ts +++ b/src/StickerAttach/hooks/usePostStickerState.ts @@ -1,10 +1,12 @@ import { AxiosError } from 'axios'; import { useMutation } from 'react-query'; +import { useNavigate } from 'react-router-dom'; import { postStickerState } from '../api/postStickerState'; import { postedStickerParams } from '../type/postStickerType'; const usePostStickerState = () => { + const navigate = useNavigate(); const mutation = useMutation({ mutationFn: ({ postedStickerId, @@ -19,6 +21,11 @@ const usePostStickerState = () => { positionY, }); }, + onSuccess: () => { + navigate('/lecue-book'); + sessionStorage.removeItem('scrollPosition'); + }, + onError: (err: AxiosError) => console.log(err), }); return mutation; From fddf1599f4839636451c053d2795a28c3ee40792 Mon Sep 17 00:00:00 2001 From: eunbenn Date: Tue, 16 Jan 2024 17:54:42 +0900 Subject: [PATCH 15/18] =?UTF-8?q?fix:=20=EC=8A=A4=ED=8B=B0=EC=BB=A4=20?= =?UTF-8?q?=ED=8F=AC=EC=A7=80=EC=85=98=20=EA=B0=92=20=EC=9C=84=EC=B9=98=20?= =?UTF-8?q?=EC=A1=B0=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Detail/components/ZigZagView/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Detail/components/ZigZagView/index.tsx b/src/Detail/components/ZigZagView/index.tsx index 3f90b750..550ea6ee 100644 --- a/src/Detail/components/ZigZagView/index.tsx +++ b/src/Detail/components/ZigZagView/index.tsx @@ -40,7 +40,7 @@ const ZigZagView = forwardRef(function ZigZagView( onStart={() => false} nodeRef={nodeRef} key={data.postedStickerId} - positionOffset={{ x: data.positionX, y: data.positionY }} + defaultPosition={{ x: data.positionX, y: data.positionY }} > From 6bef2e5b53e390075680a281763ceb0aff79696b Mon Sep 17 00:00:00 2001 From: eunbenn Date: Tue, 16 Jan 2024 22:13:23 +0900 Subject: [PATCH 16/18] =?UTF-8?q?chore:=20=EC=8A=A4=ED=81=AC=EB=A1=A4=20?= =?UTF-8?q?=EC=9C=84=EC=B9=98=20=EC=82=AD=EC=A0=9C=EB=A5=BC=20=EC=82=AD?= =?UTF-8?q?=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/StickerAttach/hooks/usePostStickerState.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/StickerAttach/hooks/usePostStickerState.ts b/src/StickerAttach/hooks/usePostStickerState.ts index b230a1fa..2ef10f63 100644 --- a/src/StickerAttach/hooks/usePostStickerState.ts +++ b/src/StickerAttach/hooks/usePostStickerState.ts @@ -23,7 +23,6 @@ const usePostStickerState = () => { }, onSuccess: () => { navigate('/lecue-book'); - sessionStorage.removeItem('scrollPosition'); }, onError: (err: AxiosError) => console.log(err), From ff767437dcad97f505975c99ffe3b93944a8f4c8 Mon Sep 17 00:00:00 2001 From: eunbenn Date: Tue, 16 Jan 2024 22:15:03 +0900 Subject: [PATCH 17/18] =?UTF-8?q?fix:=20=EC=8A=A4=ED=8B=B0=EC=BB=A4=20?= =?UTF-8?q?=EC=9C=84=EC=B9=98=20=EB=B2=84=EA=B7=B8=20=EC=B5=9C=EC=A2=85=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../LecueNoteListContainer/index.tsx | 4 ++-- .../components/ZigZagView/ZigZagView.style.ts | 2 ++ src/Detail/components/ZigZagView/index.tsx | 22 +++++++++---------- 3 files changed, 15 insertions(+), 13 deletions(-) diff --git a/src/Detail/components/LecueNoteListContainer/index.tsx b/src/Detail/components/LecueNoteListContainer/index.tsx index 37a6deca..3821a27b 100644 --- a/src/Detail/components/LecueNoteListContainer/index.tsx +++ b/src/Detail/components/LecueNoteListContainer/index.tsx @@ -73,8 +73,8 @@ function LecueNoteListContainer({ const { positionX, positionY } = stickerState; setStickerState((prev) => ({ ...prev, - positionX: Math.ceil(positionX + ui.deltaX), - positionY: Math.ceil(positionY + ui.deltaY), + positionX: positionX + ui.deltaX, + positionY: positionY + ui.deltaY, })); }; diff --git a/src/Detail/components/ZigZagView/ZigZagView.style.ts b/src/Detail/components/ZigZagView/ZigZagView.style.ts index c92b69c0..23bb906d 100644 --- a/src/Detail/components/ZigZagView/ZigZagView.style.ts +++ b/src/Detail/components/ZigZagView/ZigZagView.style.ts @@ -26,6 +26,8 @@ export const Sticker = styled.div<{ stickerImage: string; isEditable?: boolean; }>` + position: absolute; + width: 10rem; height: 10rem; diff --git a/src/Detail/components/ZigZagView/index.tsx b/src/Detail/components/ZigZagView/index.tsx index 550ea6ee..9876ee7c 100644 --- a/src/Detail/components/ZigZagView/index.tsx +++ b/src/Detail/components/ZigZagView/index.tsx @@ -35,19 +35,9 @@ const ZigZagView = forwardRef(function ZigZagView( ))} - {postedStickerList.map((data) => ( - false} - nodeRef={nodeRef} - key={data.postedStickerId} - defaultPosition={{ x: data.positionX, y: data.positionY }} - > - - - ))} {isEditable && ( )} + {postedStickerList.map((data) => ( + false} + nodeRef={nodeRef} + key={data.postedStickerId} + defaultPosition={{ x: data.positionX, y: data.positionY }} + > + + + ))} ); From 09b9aa6a4a319234056a5a3c1fe7f9704bf35a13 Mon Sep 17 00:00:00 2001 From: eunbenn Date: Tue, 16 Jan 2024 22:15:30 +0900 Subject: [PATCH 18/18] =?UTF-8?q?style:=20=ED=97=A4=EB=8D=94=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/LecueNoteListContainer/index.tsx | 11 +++++++---- src/Detail/page/DetailPage/index.tsx | 13 +++++++++++-- 2 files changed, 18 insertions(+), 6 deletions(-) diff --git a/src/Detail/components/LecueNoteListContainer/index.tsx b/src/Detail/components/LecueNoteListContainer/index.tsx index 3821a27b..42f1bdae 100644 --- a/src/Detail/components/LecueNoteListContainer/index.tsx +++ b/src/Detail/components/LecueNoteListContainer/index.tsx @@ -22,6 +22,8 @@ interface LecueNoteListContainerProps { backgroundColor: string; noteList: NoteType[]; postedStickerList: postedStickerType[]; + isEditable: boolean; + setEditableStateFalse: () => void; } function LecueNoteListContainer({ @@ -29,6 +31,8 @@ function LecueNoteListContainer({ backgroundColor, noteList, postedStickerList, + isEditable, + setEditableStateFalse, }: LecueNoteListContainerProps) { //hooks const location = useLocation(); @@ -40,7 +44,6 @@ function LecueNoteListContainer({ storedValue !== null ? parseInt(storedValue, 10) : 0; //state const [isZigZagView, setIsZigZagView] = useState(true); - const [isEditable, setIsEditable] = useState(true); const [stickerState, setStickerState] = useState({ postedStickerId: 0, stickerImage: '', @@ -64,9 +67,9 @@ function LecueNoteListContainer({ })); } else { // editable 상태 변경 - setIsEditable(false); + setEditableStateFalse(); } - }, [state]); + }, [state, isEditable]); // 스티커 위치 값 저장 const handleDrag = (_e: DraggableEvent, ui: DraggableData) => { @@ -102,7 +105,7 @@ function LecueNoteListContainer({ positionY: positionY, }); - setIsEditable(false); + setEditableStateFalse(); }; return ( diff --git a/src/Detail/page/DetailPage/index.tsx b/src/Detail/page/DetailPage/index.tsx index 3867bb01..7e4c32ab 100644 --- a/src/Detail/page/DetailPage/index.tsx +++ b/src/Detail/page/DetailPage/index.tsx @@ -1,3 +1,5 @@ +import { useState } from 'react'; + import Header from '../../../components/common/Header'; import BookInfoBox from '../../components/BookInfoBox'; import LecueNoteListContainer from '../../components/LecueNoteListContainer'; @@ -7,15 +9,22 @@ import * as S from './DetailPage.style'; function DetailPage() { const { bookDetail } = useGetBookDetail(); + const [isEditable, setIsEditable] = useState(true); + + const setEditableStateFalse = () => { + setIsEditable(false); + }; return bookDetail ? ( -
+
) : ( //TODO 에러페이지로 route -
uuid가 틀려서 아무것도 안보임
+
에러에러에러에러
); }