diff --git a/src/constants/write.ts b/src/constants/write.ts index 8f4d2ee..6900597 100644 --- a/src/constants/write.ts +++ b/src/constants/write.ts @@ -53,3 +53,9 @@ export const BOTTOM_SHEET_CONTENT = { cancelText: null, }, } + +export const SEARCH_EXAMPLE = + '검색하고 싶은 근무지가 구의119안전센터일 경우\n1. 근무지 이름로 검색\nex) 구의\n\n2. 주소지로 검색(광진구 광나루로 480 (구의동))\nex) 광진구, 구의동, 광나루로' + +export const SECRET_EXPLANATION = + '공개 시, 더 많은 사람들이 당신의 따뜻한 마음을 보고 공감할 수 있으며,\n특별한 메시지는 다양한 채널을 통해 소개될 수도 있습니다.\n비공개로 설정하면, 나만의 소중한 기록으로 남길 수 있어요.' diff --git a/src/containers/Share/Onboarding.tsx b/src/containers/Share/Onboarding.tsx index ec79f7c..eb58cae 100644 --- a/src/containers/Share/Onboarding.tsx +++ b/src/containers/Share/Onboarding.tsx @@ -1,15 +1,13 @@ import Header from '@/components/Header' import useEmblaCarousel from 'embla-carousel-react' import { twMerge } from 'tailwind-merge' -import FirstSlide from './FirstSlide' -import SecondSlide from './SecondSlide' -import ThirdSlide from './ThirdSlide' import useAuthStore from '@/stores/authStore' import { useDotButton } from '@/hooks/useDotButton' import SolidButton from '@/components/SolidButton' import { shareLink } from '@/utils/shareLink' import { useEffect } from 'react' import { useQueryClient } from '@tanstack/react-query' +import Slide from './Slide' export default function Onboarding() { const nickname = useAuthStore((state) => state.user)?.nickname ?? '' @@ -17,6 +15,35 @@ export default function Onboarding() { const { selectedIndex, scrollSnaps, onDotButtonClick } = useDotButton(emblaApi) const queryClient = useQueryClient() + const SLIDE_DATA = [ + { + title: `${nickname}님, 어두웠던 아파트를\n밝혀주셨어요`, + subtitle: '이제 가족, 친구들과 함께 더 많은 불빛을 켜볼까요?', + windowObj: { 0: nickname }, + }, + { + title: `공유하기 버튼을 눌러\n링크를 보내주세요`, + windowObj: { 0: nickname, 7: '내 친구', 9: '내 친구' }, + }, + { + title: `링크를 통해 감사메시지를 남기면\n불빛이 켜져요`, + subtitle: '함께하는 사람마다 불빛이 하나씩 늘어날거에요', + windowObj: { 0: nickname, 7: '내 친구', 9: '내 친구', 2: '' }, + }, + { + title: `${nickname}님의 공유 한 번이\n이 도시를 밝게 빛나게 할 수 있어요!`, + subtitle: `익숙하지 않은 이름이 보여도 놀라지 마세요\n${nickname}님의 선한 영향력을 받은 분이에요`, + windowObj: { + 0: nickname, + 7: '내 친구', + 9: '내 친구', + 2: '', + 5: '', + 8: '', + }, + }, + ] + useEffect(() => { document.body.style.overflowY = 'hidden' return () => { @@ -40,9 +67,9 @@ export default function Onboarding() {
- - - + {SLIDE_DATA.map(({ title, subtitle, windowObj }) => ( + + ))}
{ shareLink(nickname) diff --git a/src/containers/Share/SecondSlide.tsx b/src/containers/Share/SecondSlide.tsx deleted file mode 100644 index df12b1e..0000000 --- a/src/containers/Share/SecondSlide.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import { BUILDING_WINDOW } from '@/constants/window' -import BuildingWindow from '@/containers/Share/BuildingWindow' -import { chunkWindow } from '@/utils/chunkWindow' - -interface SecondSlideProps { - nickname: string -} - -export default function SecondSlide({ nickname }: SecondSlideProps) { - const writers = [nickname, '내 친구', '내 친구'] - const array = [0, 7, 9] - - return ( -
-
-

- {nickname}님의 가족, 친구 분들과 -
- 함께 불빛을 밝혀나가면 어떨까요? -

-
-
-
-
-
-
- {chunkWindow( - BUILDING_WINDOW.slice(0, 12).map((window, index) => { - const windowIndex = array.indexOf(index) - return ( - - ) - }) - ).map((row, index) => ( -
- {row} -
- ))} -
-
-
- ) -} diff --git a/src/containers/Share/FirstSlide.tsx b/src/containers/Share/Slide.tsx similarity index 63% rename from src/containers/Share/FirstSlide.tsx rename to src/containers/Share/Slide.tsx index 8a6b3c8..113aa57 100644 --- a/src/containers/Share/FirstSlide.tsx +++ b/src/containers/Share/Slide.tsx @@ -2,29 +2,27 @@ import { BUILDING_WINDOW } from '@/constants/window' import BuildingWindow from '@/containers/Share/BuildingWindow' import { chunkWindow } from '@/utils/chunkWindow' -interface FirstSlideProps { - nickname: string +interface SlideProps { + title: string + subtitle?: string + windowObj: Record } -export default function FirstSlide({ nickname }: FirstSlideProps) { +export default function Slide({ title, subtitle, windowObj }: SlideProps) { return (
-
-

- {nickname}님, 어두웠던 아파트를 -
- 밝혀주셨어요. -

-

하지만 아직 많이 어두운 것 같아요.

+
+

{title}

+

{subtitle}

-
+
{chunkWindow( BUILDING_WINDOW.slice(0, 12).map((window, index) => ( - + )) ).map((row, index) => (
diff --git a/src/containers/Share/ThirdSlide.tsx b/src/containers/Share/ThirdSlide.tsx deleted file mode 100644 index 0e8ad7d..0000000 --- a/src/containers/Share/ThirdSlide.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import { BUILDING_WINDOW } from '@/constants/window' -import BuildingWindow from '@/containers/Share/BuildingWindow' -import { chunkWindow } from '@/utils/chunkWindow' - -interface ThirdSlideProps { - nickname: string -} - -export default function ThirdSlide({ nickname }: ThirdSlideProps) { - const writers = [nickname, '내 친구', '내 친구'] - const array = [0, 7, 9, 2, 5, 8] - - return ( -
-
-

- {nickname}님의 공유 한 번이 -
이 도시를 밝게 빛나게 할 수 있어요! -

-
-
-
-
-
-
- {chunkWindow( - BUILDING_WINDOW.slice(0, 12).map((window, index) => { - const windowIndex = array.indexOf(index) - return ( - - ) - }) - ).map((row, index) => ( -
- {row} -
- ))} -
-
-
- ) -} diff --git a/src/containers/Write/BottomSheet/CheckAlarm.tsx b/src/containers/Write/BottomSheet/CheckAlarm.tsx index 2707e83..b10a379 100644 --- a/src/containers/Write/BottomSheet/CheckAlarm.tsx +++ b/src/containers/Write/BottomSheet/CheckAlarm.tsx @@ -32,6 +32,8 @@ export default function CheckAlarm() { if (result) { await queryClient.invalidateQueries({ queryKey: ['messages'] }) + await queryClient.invalidateQueries({ queryKey: ['my-messages'] }) + await queryClient.invalidateQueries({ queryKey: ['main-data'] }) toggleShareLink() } } diff --git a/src/containers/Write/Funnel/MessagesCollection.tsx b/src/containers/Write/Funnel/MessagesCollection.tsx index 21e8bc1..6a53c12 100644 --- a/src/containers/Write/Funnel/MessagesCollection.tsx +++ b/src/containers/Write/Funnel/MessagesCollection.tsx @@ -24,7 +24,7 @@ export default function MessagesCollection() { )}

- 다른 사람이 작성한 감사 메시지를 + 다른 사람들이 작성한 감사 메시지를
참고해 작성해보세요!

diff --git a/src/containers/Write/Funnel/NewsCollection.tsx b/src/containers/Write/Funnel/NewsCollection.tsx index 746d533..0a9281b 100644 --- a/src/containers/Write/Funnel/NewsCollection.tsx +++ b/src/containers/Write/Funnel/NewsCollection.tsx @@ -18,9 +18,9 @@ export default function NewsCollection() { return (

- 다른 사람이 작성한 감사 메시지를 + 경찰·소방관님의 이야기를 읽고,
- 참고해 작성해보세요! + 감사의 마음을 전해보세요.

{news.map((item) => ( diff --git a/src/containers/Write/Funnel/SearchOffice.tsx b/src/containers/Write/Funnel/SearchOffice.tsx index 2c3cf36..0129596 100644 --- a/src/containers/Write/Funnel/SearchOffice.tsx +++ b/src/containers/Write/Funnel/SearchOffice.tsx @@ -4,6 +4,7 @@ import SearchResultItem from './SearchResultItem' import { useState } from 'react' import useWriteMessageStore from '@/stores/writeMessageStore' import { getSearchResult } from '@/apis/message' +import { SEARCH_EXAMPLE } from '@/constants/write' interface SearchOfficeProps { onCompleteSelect: () => void @@ -70,7 +71,7 @@ export default function SearchOffice({ onCompleteSelect }: SearchOfficeProps) { ) : ( <>

이렇게 검색해보세요!

-

ex) 강동구

+

{SEARCH_EXAMPLE}

)}
diff --git a/src/containers/Write/Funnel/WriteMessage.tsx b/src/containers/Write/Funnel/WriteMessage.tsx index 5c970c1..77bade4 100644 --- a/src/containers/Write/Funnel/WriteMessage.tsx +++ b/src/containers/Write/Funnel/WriteMessage.tsx @@ -1,7 +1,7 @@ import { postMessage } from '@/apis/message' import Checkbox from '@/components/Checkbox' import SolidButton from '@/components/SolidButton' -import { MESSAGE_MAX_LENGTH } from '@/constants/write' +import { MESSAGE_MAX_LENGTH, SECRET_EXPLANATION } from '@/constants/write' import useAuthStore from '@/stores/authStore' import useWriteBottomStore from '@/stores/writeBottomStore' import useWriteMessageStore from '@/stores/writeMessageStore' @@ -47,6 +47,7 @@ export default function WriteMessage() { if (result) { await queryClient.invalidateQueries({ queryKey: ['my-messages'] }) + await queryClient.invalidateQueries({ queryKey: ['main-data'] }) navigate('/', { state: { from: 'write' } }) } } @@ -81,7 +82,6 @@ export default function WriteMessage() { disabled={showCollectionIntro || showCheckAlarm || showShareLink} onChange={handleMessageChange} /> - {/* TODO: 닉네임 받아서 넣기 */}

From. {nickname}

@@ -100,6 +100,9 @@ export default function WriteMessage() { /> 비공개로 작성하기 +

+ {SECRET_EXPLANATION} +

diff --git a/src/hooks/useNews.tsx b/src/hooks/useNews.tsx index b1149c9..8b7579a 100644 --- a/src/hooks/useNews.tsx +++ b/src/hooks/useNews.tsx @@ -1,7 +1,7 @@ import { getNews } from '@/apis/news' import { useInfiniteQuery } from '@tanstack/react-query' -const NEWS_SIZE = 5 +const NEWS_SIZE = 10 export const useGetNews = () => { return useInfiniteQuery({ diff --git a/src/pages/MyMessageDetail.tsx b/src/pages/MyMessageDetail.tsx index efdf163..579429c 100644 --- a/src/pages/MyMessageDetail.tsx +++ b/src/pages/MyMessageDetail.tsx @@ -4,6 +4,7 @@ import Header from '@/components/Header' import Loading from '@/components/Loading' import OutlinedButton from '@/components/OutlinedButton' import SolidButton from '@/components/SolidButton' +import { SECRET_EXPLANATION } from '@/constants/write' import MyMessageCard from '@/containers/Message/MyMessageCard' import useBodyBackgroundColor from '@/hooks/useBodyBackgroundColor' import { useGetMyMessageDetail } from '@/hooks/useMessage' @@ -83,21 +84,23 @@ export default function MyMessageDetail() { <>
{data && } -

공개 여부 설정

-

- 비공개로 설정 시, 다른 유저들이 메시지를 확인할 수 없어요. -

- +

공개 여부 설정

+
+ +

+ {SECRET_EXPLANATION} +

+