From bd85f4618692f01e41a351edb47f4064ccbdebff Mon Sep 17 00:00:00 2001 From: parkyejin Date: Thu, 8 Aug 2024 23:01:15 +0900 Subject: [PATCH 1/5] =?UTF-8?q?feat(#11):=20=EA=B3=A0=EB=AF=BC=20=EA=B2=8C?= =?UTF-8?q?=EC=8B=9C=ED=8C=90=20API=20=EC=97=B0=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/chatting/page.tsx | 88 ++++++++++++++++++++++++++++ src/app/worry/page.tsx | 7 +++ src/model/Worry.ts | 25 +++++++- src/service/worry/WorryQueries.ts | 61 +++++++++++++++++++ src/service/worry/WorryService.ts | 58 ++++++++++++++++++ src/service/worry/useWorryService.ts | 80 +++++++++++++++++++++++++ 6 files changed, 317 insertions(+), 2 deletions(-) create mode 100644 src/app/chatting/page.tsx create mode 100644 src/app/worry/page.tsx create mode 100644 src/service/worry/WorryQueries.ts create mode 100644 src/service/worry/WorryService.ts create mode 100644 src/service/worry/useWorryService.ts diff --git a/src/app/chatting/page.tsx b/src/app/chatting/page.tsx new file mode 100644 index 0000000..a72ca93 --- /dev/null +++ b/src/app/chatting/page.tsx @@ -0,0 +1,88 @@ +'use client' + +import React, { useState, useEffect, useRef } from 'react' + +const Chatting = () => { + const chatRoomId = 1 + const member = 1 + const [messages, setMessages] = useState([]) + const [input, setInput] = useState('') + const [isConnected, setIsConnected] = useState(false) + const socketRef = useRef(null) + + useEffect(() => { + const socket = new WebSocket( + `wss://lc3cc1cnma.execute-api.ap-northeast-2.amazonaws.com/mssaem?chatRoomId=${chatRoomId}&member=${member}`, + ) + + socket.onopen = () => { + console.log('WebSocket Opened') + setIsConnected(true) + } + + socket.onmessage = (event: MessageEvent) => { + console.log('WebSocket Message:', event.data) + setMessages((prev) => [...prev, event.data]) + } + + socket.onerror = (error: Event) => { + console.error('WebSocket Error:', error) + } + + socket.onclose = () => { + console.log('WebSocket is closed') + setIsConnected(false) + } + + socketRef.current = socket + + return () => { + socket.close() + } + }, [chatRoomId, member]) + + const sendMessage = () => { + if (socketRef.current && input.trim() !== '') { + const message = { + action: 'sendMessage', + chatRoomId: 1, + message: input, + } + socketRef.current.send(JSON.stringify(message)) + setInput('') + } + } + + const disconnect = () => { + if (socketRef.current) { + socketRef.current.close() + socketRef.current = null + setIsConnected(false) + } + } + + return ( +
+

Chatting

+
+ {messages.map((msg, index) => ( +
{msg}
+ ))} +
+ setInput(e.target.value)} + onKeyPress={(e) => { + if (e.key === 'Enter') { + sendMessage() + } + }} + /> + + {isConnected && } +
+ ) +} + +export default Chatting diff --git a/src/app/worry/page.tsx b/src/app/worry/page.tsx new file mode 100644 index 0000000..2a1959a --- /dev/null +++ b/src/app/worry/page.tsx @@ -0,0 +1,7 @@ +import Container from '@/components/common/Container' + +const WorryPage = () => { + return dfasfd +} + +export default WorryPage diff --git a/src/model/Worry.ts b/src/model/Worry.ts index 4652d0d..6c81510 100644 --- a/src/model/Worry.ts +++ b/src/model/Worry.ts @@ -1,6 +1,7 @@ import { MBTI } from '@/components/common/Button' +import { User } from './User' -interface WorryBoardI { +interface WorryI { title: string content: string memberMbti: MBTI @@ -9,4 +10,24 @@ interface WorryBoardI { imgUrl: string } -export type { WorryBoardI } +interface WorryList { + page: number + totalSize: number + result: WorryI[] +} + +interface WorryDetail { + memberSimpleInfo: User + worryBoardId: number + targetMbti: string + title: string + content: string + createdAt: string + imgList: string[] + isEditAllowed: boolean + isChatAllowed: boolean + chatRoomId: number + hits: number +} + +export type { WorryI, WorryList, WorryDetail } diff --git a/src/service/worry/WorryQueries.ts b/src/service/worry/WorryQueries.ts new file mode 100644 index 0000000..e0c0738 --- /dev/null +++ b/src/service/worry/WorryQueries.ts @@ -0,0 +1,61 @@ +import WorryService, { WorryListProps, WorryPatchProps } from './WorryService' + +const queryKeys = { + worry: (worryId: number) => ['worry', worryId] as const, + worryList: ['worryList'] as const, + worryListNumber: ['worryListNumber'] as const, + bookmarkList: ['bookmarkList'] as const, +} + +const queryOptions = { + worryList: { + queryKey: queryKeys.worryList, + queryFn: async ({ page, size, strFromMbti, strToMbti }: WorryListProps) => { + const res = await WorryService.getWaitingWorryList({ + page, + size, + strFromMbti, + strToMbti, + }) + return res.data + }, + }, + + worryDetail: { + queryKey: (worryId: number) => queryKeys.worry(worryId), + queryFn: async (worryId: number) => { + const res = await WorryService.getWorryDetail(worryId) + return res.data + }, + }, + + postWorry: { + queryKey: queryKeys.worryList, + mutationFn: async (worry: FormData): Promise => { + await WorryService.postWorry(worry) + }, + }, + + patchWorry: { + queryKey: (worryId: number) => queryKeys.worry(worryId), + mutationFn: async ({ id, worry }: WorryPatchProps): Promise => { + await WorryService.patchWorry({ id, worry }) + }, + }, + + deleteWorry: { + queryKey: queryKeys.worryList, + mutationFn: async (worryId: number): Promise => { + await WorryService.deleteWorry(worryId) + }, + }, + + patchWorrySolved: { + queryKey: (worryId: number) => queryKeys.worry(worryId), + mutationFn: async (worryId: number): Promise => { + await WorryService.patchWorrySolved(worryId) + }, + }, +} + +export { queryKeys, queryOptions } diff --git a/src/service/worry/WorryService.ts b/src/service/worry/WorryService.ts new file mode 100644 index 0000000..5d0b7ee --- /dev/null +++ b/src/service/worry/WorryService.ts @@ -0,0 +1,58 @@ +import Service from '@/apis/AxiosInstance' +import { WorryDetail, WorryList } from '@/model/Worry' + +export interface WorryListProps { + page: number + size: number + strFromMbti: string + strToMbti: string +} + +export interface WorryPatchProps { + id: number + worry: FormData +} + +class WorryService extends Service { + getWaitingWorryList({ page, size, strFromMbti, strToMbti }: WorryListProps) { + return this.http.get( + `/worry-board/waiting/filter&page=${page}&size=${size}&strFromMbti=${strFromMbti}&strToMbti=${strToMbti}`, + ) + } + + getSolvedWorryList({ page, size, strFromMbti, strToMbti }: WorryListProps) { + return this.http.get( + `/worry-board/solved/filter&page=${page}&size=${size}&strFromMbti=${strFromMbti}&strToMbti=${strToMbti}`, + ) + } + + getWorryDetail(id: number) { + return this.http.get(`/worry-board/${id}`) + } + + postWorry(worry: FormData) { + return this.http.post(`/member/worry-board`, worry, { + headers: { + 'Content-Type': 'multipart/form-data', + }, + }) + } + + patchWorry({ id, worry }: WorryPatchProps) { + return this.http.patch(`/member/worry-board/${id}`, worry, { + headers: { + 'Content-Type': 'multipart/form-data', + }, + }) + } + + deleteWorry(id: number) { + return this.http.delete(`/member/worry-board/${id}`) + } + + patchWorrySolved(id: number) { + return this.http.patch(`/member/worry-board/${id}/solved`) + } +} + +export default new WorryService() diff --git a/src/service/worry/useWorryService.ts b/src/service/worry/useWorryService.ts new file mode 100644 index 0000000..2719074 --- /dev/null +++ b/src/service/worry/useWorryService.ts @@ -0,0 +1,80 @@ +import { + useMutation, + useQuery, + UseMutationOptions, +} from '@tanstack/react-query' +import { queryOptions } from './WorryQueries' + +interface WorryPatchProps { + id: number + worry: FormData +} + +const useWaitingWorryList = ( + page: number, + size: number, + strFromMbti: string, + strToMbti: string, +) => + useQuery({ + ...queryOptions.worryList, + queryKey: ['worryList', page, size, strFromMbti, strToMbti], + queryFn: () => + queryOptions.worryList.queryFn({ page, size, strFromMbti, strToMbti }), + }) + +const useWorryDetail = (worryId: number) => + useQuery({ + ...queryOptions.worryDetail, + queryKey: ['worryDetail', worryId], + queryFn: () => queryOptions.worryDetail.queryFn(worryId), + }) + +const usePostWorry = () => { + const mutationFn = (worry: FormData): Promise => + queryOptions.postWorry.mutationFn(worry) + + const options: UseMutationOptions = { + mutationFn, + } + return useMutation(options) +} + +const usePatchWorry = () => { + const mutationFn = ({ id, worry }: WorryPatchProps): Promise => + queryOptions.patchWorry.mutationFn({ id, worry }) + + const options: UseMutationOptions = { + mutationFn, + } + return useMutation(options) +} + +const useDeleteWorry = () => { + const mutationFn = (id: number): Promise => + queryOptions.deleteWorry.mutationFn(id) + + const options: UseMutationOptions = { + mutationFn, + } + return useMutation(options) +} + +const usePatchWorrySolved = () => { + const mutationFn = (worryId: number): Promise => + queryOptions.patchWorrySolved.mutationFn(worryId) + + const options: UseMutationOptions = { + mutationFn, + } + return useMutation(options) +} + +export { + useWaitingWorryList, + useWorryDetail, + usePostWorry, + usePatchWorry, + useDeleteWorry, + usePatchWorrySolved, +} From 8d03d8d0c74dcdc969349df146b43724fe49bcbd Mon Sep 17 00:00:00 2001 From: parkyejin Date: Fri, 9 Aug 2024 00:01:24 +0900 Subject: [PATCH 2/5] =?UTF-8?q?feat(#11):=20=EA=B3=A0=EB=AF=BC=20=EA=B2=8C?= =?UTF-8?q?=EC=8B=9C=ED=8C=90=20API=20=EC=97=B0=EA=B2=B0=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/service/worry/WorryQueries.ts | 30 +++++++++---------- src/service/worry/WorryService.ts | 4 +-- src/service/worry/useWorryService.ts | 44 ++++++++++++++++++++-------- 3 files changed, 48 insertions(+), 30 deletions(-) diff --git a/src/service/worry/WorryQueries.ts b/src/service/worry/WorryQueries.ts index e0c0738..234ad88 100644 --- a/src/service/worry/WorryQueries.ts +++ b/src/service/worry/WorryQueries.ts @@ -3,13 +3,10 @@ import WorryService, { WorryListProps, WorryPatchProps } from './WorryService' const queryKeys = { worry: (worryId: number) => ['worry', worryId] as const, worryList: ['worryList'] as const, - worryListNumber: ['worryListNumber'] as const, - bookmarkList: ['bookmarkList'] as const, } const queryOptions = { - worryList: { - queryKey: queryKeys.worryList, + waitingWorryList: { queryFn: async ({ page, size, strFromMbti, strToMbti }: WorryListProps) => { const res = await WorryService.getWaitingWorryList({ page, @@ -20,38 +17,39 @@ const queryOptions = { return res.data }, }, - + solvedWorryList: { + queryFn: async ({ page, size, strFromMbti, strToMbti }: WorryListProps) => { + const res = await WorryService.getSolvedWorryList({ + page, + size, + strFromMbti, + strToMbti, + }) + return res.data + }, + }, worryDetail: { - queryKey: (worryId: number) => queryKeys.worry(worryId), queryFn: async (worryId: number) => { const res = await WorryService.getWorryDetail(worryId) return res.data }, }, - postWorry: { - queryKey: queryKeys.worryList, mutationFn: async (worry: FormData): Promise => { await WorryService.postWorry(worry) }, }, - patchWorry: { - queryKey: (worryId: number) => queryKeys.worry(worryId), mutationFn: async ({ id, worry }: WorryPatchProps): Promise => { await WorryService.patchWorry({ id, worry }) }, }, - deleteWorry: { - queryKey: queryKeys.worryList, - mutationFn: async (worryId: number): Promise => { - await WorryService.deleteWorry(worryId) + mutationFn: async (id: number): Promise => { + await WorryService.deleteWorry(id) }, }, - patchWorrySolved: { - queryKey: (worryId: number) => queryKeys.worry(worryId), mutationFn: async (worryId: number): Promise => { await WorryService.patchWorrySolved(worryId) }, diff --git a/src/service/worry/WorryService.ts b/src/service/worry/WorryService.ts index 5d0b7ee..06b7754 100644 --- a/src/service/worry/WorryService.ts +++ b/src/service/worry/WorryService.ts @@ -16,13 +16,13 @@ export interface WorryPatchProps { class WorryService extends Service { getWaitingWorryList({ page, size, strFromMbti, strToMbti }: WorryListProps) { return this.http.get( - `/worry-board/waiting/filter&page=${page}&size=${size}&strFromMbti=${strFromMbti}&strToMbti=${strToMbti}`, + `/worry-board/waiting/filter?page=${page}&size=${size}&strFromMbti=${strFromMbti}&strToMbti=${strToMbti}`, ) } getSolvedWorryList({ page, size, strFromMbti, strToMbti }: WorryListProps) { return this.http.get( - `/worry-board/solved/filter&page=${page}&size=${size}&strFromMbti=${strFromMbti}&strToMbti=${strToMbti}`, + `/worry-board/solved/filter?page=${page}&size=${size}&strFromMbti=${strFromMbti}&strToMbti=${strToMbti}`, ) } diff --git a/src/service/worry/useWorryService.ts b/src/service/worry/useWorryService.ts index 2719074..0a04cdc 100644 --- a/src/service/worry/useWorryService.ts +++ b/src/service/worry/useWorryService.ts @@ -1,34 +1,53 @@ import { useMutation, - useQuery, UseMutationOptions, + useQuery, } from '@tanstack/react-query' import { queryOptions } from './WorryQueries' +import { WorryPatchProps } from './WorryService' -interface WorryPatchProps { - id: number - worry: FormData +const useWaitingWorryList = ( + page: number, + size: number, + strFromMbti: string, + strToMbti: string, +) => { + return useQuery({ + queryKey: ['worryList', page, size, strFromMbti, strToMbti], + queryFn: () => + queryOptions.waitingWorryList.queryFn({ + page, + size, + strFromMbti, + strToMbti, + }), + }) } -const useWaitingWorryList = ( +const useSolvedWorryList = ( page: number, size: number, strFromMbti: string, strToMbti: string, -) => - useQuery({ - ...queryOptions.worryList, +) => { + return useQuery({ queryKey: ['worryList', page, size, strFromMbti, strToMbti], queryFn: () => - queryOptions.worryList.queryFn({ page, size, strFromMbti, strToMbti }), + queryOptions.solvedWorryList.queryFn({ + page, + size, + strFromMbti, + strToMbti, + }), }) +} -const useWorryDetail = (worryId: number) => - useQuery({ - ...queryOptions.worryDetail, +const useWorryDetail = (worryId: number) => { + return useQuery({ queryKey: ['worryDetail', worryId], queryFn: () => queryOptions.worryDetail.queryFn(worryId), }) +} const usePostWorry = () => { const mutationFn = (worry: FormData): Promise => @@ -72,6 +91,7 @@ const usePatchWorrySolved = () => { export { useWaitingWorryList, + useSolvedWorryList, useWorryDetail, usePostWorry, usePatchWorry, From 8fec812df9cddb6f36cd76eefeee9a640b0263cd Mon Sep 17 00:00:00 2001 From: parkyejin Date: Fri, 9 Aug 2024 00:01:42 +0900 Subject: [PATCH 3/5] =?UTF-8?q?design(#11):=20=EB=A7=A4=EC=B9=AD=20?= =?UTF-8?q?=EA=B8=B0=EB=8B=A4=EB=A6=AC=EB=8A=94=20=EA=B3=A0=EB=AF=BC,=20?= =?UTF-8?q?=ED=95=B4=EA=B2=B0=EB=90=9C=20=EA=B3=A0=EB=AF=BC=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/worry/page.tsx | 71 ++++++++++++++++++++++++++++- src/components/board/Board.tsx | 2 +- src/components/worry/MbtiSelect.tsx | 26 ++++++++--- src/components/worry/WorryBoard.tsx | 20 ++++++-- src/model/Worry.ts | 1 + 5 files changed, 106 insertions(+), 14 deletions(-) diff --git a/src/app/worry/page.tsx b/src/app/worry/page.tsx index 2a1959a..b3a7946 100644 --- a/src/app/worry/page.tsx +++ b/src/app/worry/page.tsx @@ -1,7 +1,76 @@ +'use client' + import Container from '@/components/common/Container' +import MbtiSelect from '@/components/worry/MbtiSelect' +import WorryBoard from '@/components/worry/WorryBoard' +import { + useSolvedWorryList, + useWaitingWorryList, +} from '@/service/worry/useWorryService' +import { useState } from 'react' const WorryPage = () => { - return dfasfd + const [waitingStrFromMbti, setWaitingStrFromMbti] = useState('ALL') + const [waitingStrToMbti, setWaitingStrToMbti] = useState('ALL') + const [solvedStrFromMbti, setSolvedStrFromMbti] = useState('ALL') + const [solvedStrToMbti, setSolvedStrToMbti] = useState('ALL') + + const { data: waitingWorryList } = useWaitingWorryList( + 0, + 10, + waitingStrFromMbti, + waitingStrToMbti, + ) + const { data: solvedWorryList } = useSolvedWorryList( + 0, + 10, + solvedStrFromMbti, + solvedStrToMbti, + ) + + return ( +
+
+ M쌤 매칭을 기다리는 고민 +
+ + +
+ {waitingWorryList && + waitingWorryList.result.map((worry) => ( + <> + +
+ + ))} + + +
+ 해결 완료된 고민 +
+ + +
+ {solvedWorryList && + solvedWorryList.result.map((worry) => ( + <> + +
+ + ))} + +
+ ) } export default WorryPage diff --git a/src/components/board/Board.tsx b/src/components/board/Board.tsx index bd52f16..0f55d22 100644 --- a/src/components/board/Board.tsx +++ b/src/components/board/Board.tsx @@ -2,8 +2,8 @@ import { BoardI } from '@/model/Board' import Image from 'next/image' -import Profile from '../common/Profile' import { useRouter } from 'next/navigation' +import Profile from '../common/Profile' export interface BoardProps { board: BoardI diff --git a/src/components/worry/MbtiSelect.tsx b/src/components/worry/MbtiSelect.tsx index 28cebbe..1c576d9 100644 --- a/src/components/worry/MbtiSelect.tsx +++ b/src/components/worry/MbtiSelect.tsx @@ -4,27 +4,39 @@ import Image from 'next/image' import { useState } from 'react' import Dropdown from '@/components/worry/Dropdown' -const MbtiSelect = () => { - const [selectedLeftType, setSelectedLeftType] = useState('전체') - const [selectedRightType, setSelectedRightType] = useState('전체') +interface MbtiSelectProps { + strFromMbti: string + strToMbti: string + setStrFromMbti: (str: string) => void + setStrToMbti: (str: string) => void +} + +const MbtiSelect = ({ + strFromMbti, + strToMbti, + setStrFromMbti, + setStrToMbti, +}: MbtiSelectProps) => { const [showLeftDropdown, setShowLeftDropdown] = useState(false) const [showRightDropdown, setShowRightDropdown] = useState(false) const handleLeftTypeClick = (type: string) => { - setSelectedLeftType(type) + setStrFromMbti(type === '전체' ? 'ALL' : type) setShowLeftDropdown(false) } const handleRightTypeClick = (type: string) => { - setSelectedRightType(type) + setStrToMbti(type === '전체' ? 'ALL' : type) setShowRightDropdown(false) } + const displayType = (type: string) => (type === 'ALL' ? '전체' : type) + return (
setShowLeftDropdown(!showLeftDropdown)} onSelectType={handleLeftTypeClick} @@ -36,7 +48,7 @@ const MbtiSelect = () => { height={7} /> setShowRightDropdown(!showRightDropdown)} onSelectType={handleRightTypeClick} diff --git a/src/components/worry/WorryBoard.tsx b/src/components/worry/WorryBoard.tsx index 883bb9f..d69184b 100644 --- a/src/components/worry/WorryBoard.tsx +++ b/src/components/worry/WorryBoard.tsx @@ -1,19 +1,26 @@ 'use client' import Image from 'next/image' -import { WorryBoardI } from '@/model/Worry' +import { WorryI } from '@/model/Worry' import Button from '../common/Button' export interface WorryBoardProps { - worryBoard: WorryBoardI + worryBoard: WorryI } +const MAX_CONTENT_LENGTH = 35 + const WorryBoard = ({ worryBoard }: WorryBoardProps) => { const { title, content, memberMbti, targetMbti, createdDate, imgUrl } = worryBoard + const truncatedContent = + content.length > MAX_CONTENT_LENGTH + ? `${content.substring(0, MAX_CONTENT_LENGTH)}...` + : content + return ( -
+
{title}
-
{content}
+
- image + {imgUrl && image}
) } diff --git a/src/model/Worry.ts b/src/model/Worry.ts index 6c81510..5dcab19 100644 --- a/src/model/Worry.ts +++ b/src/model/Worry.ts @@ -2,6 +2,7 @@ import { MBTI } from '@/components/common/Button' import { User } from './User' interface WorryI { + id: number title: string content: string memberMbti: MBTI From f0b681e524986e70f74055abd45347a61e6433ca Mon Sep 17 00:00:00 2001 From: parkyejin Date: Fri, 9 Aug 2024 00:28:53 +0900 Subject: [PATCH 4/5] =?UTF-8?q?feat(#11):=20WorryProfile=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/worry/[id]/page.tsx | 63 +++++++++++++++++++ src/components/worry/MbtiSelect.stories.tsx | 13 +++- src/components/worry/MbtiSelect.tsx | 2 +- src/components/worry/WorryBoard.stories.tsx | 15 +++-- src/components/worry/WorryBoard.tsx | 12 +++- src/components/worry/WorryProfile.stories.tsx | 19 ++++++ src/components/worry/WorryProfile.tsx | 48 ++++++++++++++ src/model/Worry.ts | 2 +- 8 files changed, 161 insertions(+), 13 deletions(-) create mode 100644 src/app/worry/[id]/page.tsx create mode 100644 src/components/worry/WorryProfile.stories.tsx create mode 100644 src/components/worry/WorryProfile.tsx diff --git a/src/app/worry/[id]/page.tsx b/src/app/worry/[id]/page.tsx new file mode 100644 index 0000000..8e1e9ba --- /dev/null +++ b/src/app/worry/[id]/page.tsx @@ -0,0 +1,63 @@ +'use client' + +import Button from '@/components/common/Button' +import Container from '@/components/common/Container' +import { useParams } from 'next/navigation' +import { useWorryDetail } from '@/service/worry/useWorryService' +import WorryProfile from '@/components/worry/WorryProfile' + +const WorryDetail = () => { + const { id } = useParams() + const { data: worryDetail } = useWorryDetail(Number(id)) + + return ( + <> +
+ M쌤 매칭을 기다리는 고민 +
+ +
+
+
+ {worryDetail && ( + <> +
+ +
+

조회수 {worryDetail.hits}회

+

{worryDetail.createdAt}

+
+
+ +
+

{worryDetail.title}

+
+
+ + )} +
+
+
+ + + ) +} + +export default WorryDetail diff --git a/src/components/worry/MbtiSelect.stories.tsx b/src/components/worry/MbtiSelect.stories.tsx index f766717..b87cb39 100644 --- a/src/components/worry/MbtiSelect.stories.tsx +++ b/src/components/worry/MbtiSelect.stories.tsx @@ -1,12 +1,19 @@ import { Meta, StoryFn } from '@storybook/react' -import MbtiSelect from './MbtiSelect' +import MbtiSelect, { MbtiSelectProps } from './MbtiSelect' export default { title: 'Worry/MbtiSelect', component: MbtiSelect, } as Meta -const Template: StoryFn = () => +const Template: StoryFn = (args: MbtiSelectProps) => ( + +) export const Primary = Template.bind({}) -Primary.args = {} +Primary.args = { + strFromMbti: 'ISTJ', + strToMbti: 'ENFJ', + setStrFromMbti: () => {}, + setStrToMbti: () => {}, +} diff --git a/src/components/worry/MbtiSelect.tsx b/src/components/worry/MbtiSelect.tsx index 1c576d9..dee53ed 100644 --- a/src/components/worry/MbtiSelect.tsx +++ b/src/components/worry/MbtiSelect.tsx @@ -4,7 +4,7 @@ import Image from 'next/image' import { useState } from 'react' import Dropdown from '@/components/worry/Dropdown' -interface MbtiSelectProps { +export interface MbtiSelectProps { strFromMbti: string strToMbti: string setStrFromMbti: (str: string) => void diff --git a/src/components/worry/WorryBoard.stories.tsx b/src/components/worry/WorryBoard.stories.tsx index 62a8421..4a8322c 100644 --- a/src/components/worry/WorryBoard.stories.tsx +++ b/src/components/worry/WorryBoard.stories.tsx @@ -12,10 +12,13 @@ const Template: StoryFn = (args: WorryBoardProps) => ( export const Primary = Template.bind({}) Primary.args = { - title: '학생회장 선배 도와주세요ㅠㅠ', - content: '마음이 있는 것 같나요??', - memberMbti: 'ISTJ', - targetMbti: 'ESFP', - createdDate: '3분전', - imgUrl: '/images/common/thumbnail.svg', + worryBoard: { + id: 1, + title: '학생회장 선배 도와주세요ㅠㅠ', + content: '마음이 있는 것 같나요??', + memberMbti: 'ISTJ', + targetMbti: 'ESFP', + createdDate: '3분전', + imgUrl: '/images/common/thumbnail.svg', + }, } diff --git a/src/components/worry/WorryBoard.tsx b/src/components/worry/WorryBoard.tsx index d69184b..945af53 100644 --- a/src/components/worry/WorryBoard.tsx +++ b/src/components/worry/WorryBoard.tsx @@ -2,6 +2,7 @@ import Image from 'next/image' import { WorryI } from '@/model/Worry' +import { useRouter } from 'next/navigation' import Button from '../common/Button' export interface WorryBoardProps { @@ -11,7 +12,9 @@ export interface WorryBoardProps { const MAX_CONTENT_LENGTH = 35 const WorryBoard = ({ worryBoard }: WorryBoardProps) => { - const { title, content, memberMbti, targetMbti, createdDate, imgUrl } = + const router = useRouter() + + const { id, title, content, memberMbti, targetMbti, createdDate, imgUrl } = worryBoard const truncatedContent = @@ -20,7 +23,12 @@ const WorryBoard = ({ worryBoard }: WorryBoardProps) => { : content return ( -
+
{ + router.push(`/worry/${id}`) + }} + >
+
+
+ ) +} + +export default WorryProfile diff --git a/src/model/Worry.ts b/src/model/Worry.ts index 5dcab19..12ff2c2 100644 --- a/src/model/Worry.ts +++ b/src/model/Worry.ts @@ -20,7 +20,7 @@ interface WorryList { interface WorryDetail { memberSimpleInfo: User worryBoardId: number - targetMbti: string + targetMbti: MBTI title: string content: string createdAt: string From b8e33c5dfff9a14dda65e0a71f093e8aa697d30a Mon Sep 17 00:00:00 2001 From: parkyejin Date: Fri, 9 Aug 2024 00:48:22 +0900 Subject: [PATCH 5/5] =?UTF-8?q?fix:=20MbtiCategories=20storybook=20?= =?UTF-8?q?=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../board/MbtiCategories.stories.tsx | 20 ++++++------------- src/components/board/MbtiCategories.tsx | 2 +- 2 files changed, 7 insertions(+), 15 deletions(-) diff --git a/src/components/board/MbtiCategories.stories.tsx b/src/components/board/MbtiCategories.stories.tsx index feb2865..97afdf3 100644 --- a/src/components/board/MbtiCategories.stories.tsx +++ b/src/components/board/MbtiCategories.stories.tsx @@ -1,25 +1,17 @@ import { Meta, StoryFn } from '@storybook/react' -import MbtiCategories from './MbtiCategories' +import MbtiCategories, { MbtiCategoriesProps } from './MbtiCategories' export default { title: 'Board/MbtiCategories', component: MbtiCategories, } as Meta -const Template: StoryFn = (args) => +const Template: StoryFn = (args) => ( + +) export const Primary = Template.bind({}) Primary.args = { - title: '카페에서 남친이랑 싸웠어', - content: '내가 말을 “만약에"라고 시작하면 너무 기빨린대', - imgUrl: '/images/common/thumbnail.svg', - likeCount: 30, - commentCount: 18, - createdAt: '24.07.25', - memberSimpleInfo: { - profileImgUrl: '/images/common/default.svg', - nickName: '유보라', - mbti: 'enfp', - badge: '엠비티어른', - }, + selectedMbti: 'ISTJ', + setMbti: () => {}, } diff --git a/src/components/board/MbtiCategories.tsx b/src/components/board/MbtiCategories.tsx index 7b18c94..7bf7c63 100644 --- a/src/components/board/MbtiCategories.tsx +++ b/src/components/board/MbtiCategories.tsx @@ -8,7 +8,7 @@ import { } from '@/service/board/useBoardService' import { useState } from 'react' -interface MbtiCategoriesProps { +export interface MbtiCategoriesProps { selectedMbti: string setMbti: (mbti: string) => void }