Merge pull request #13 from Help-M-Ssaem/feat/#11

[Feat] 고민 게시판 API 연동 및 UI
Help-M-Ssaem · Aug 8, 2024 · e8bd5fa · e8bd5fa
2 parents e41be3c + b8e33c5
commit e8bd5fa
Show file tree

Hide file tree

Showing 16 changed files with 605 additions and 40 deletions.
diff --git a/src/app/chatting/page.tsx 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<string[]>([])
+  const [input, setInput] = useState<string>('')
+  const [isConnected, setIsConnected] = useState<boolean>(false)
+  const socketRef = useRef<WebSocket | null>(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<string>) => {
+      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 (
+    <div>
+      <h1>Chatting</h1>
+      <div>
+        {messages.map((msg, index) => (
+          <div key={index}>{msg}</div>
+        ))}
+      </div>
+      <input
+        type="text"
+        value={input}
+        onChange={(e) => setInput(e.target.value)}
+        onKeyPress={(e) => {
+          if (e.key === 'Enter') {
+            sendMessage()
+          }
+        }}
+      />
+      <button onClick={sendMessage}>Send</button>
+      {isConnected && <button onClick={disconnect}>Disconnect</button>}
+    </div>
+  )
+}
+
+export default Chatting
diff --git a/src/app/worry/[id]/page.tsx 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 (
+    <>
+      <div className="text-title3 text-maindark font-semibold my-5">
+        M쌤 매칭을 기다리는 고민
+      </div>
+      <Container color="purple">
+        <div className="flex justify-end gap-2.5 mb-5">
+          <Button text="수정" color="PURPLE" size="small" onClick={() => {}} />
+          <Button text="삭제" color="PURPLE" size="small" onClick={() => {}} />
+        </div>
+        <div className="h-[1px] bg-main" />
+        {worryDetail && (
+          <>
+            <div className="flex justify-between my-7.5">
+              <WorryProfile
+                profileImgUrl={worryDetail.memberSimpleInfo.profileImgUrl}
+                nickName={worryDetail.memberSimpleInfo.nickName}
+                strFromMbti={worryDetail.memberSimpleInfo.mbti}
+                strToMbti={worryDetail.targetMbti}
+              />
+              <div className="flex gap-3.5 text-caption text-gray2">
+                <p>조회수 {worryDetail.hits}회</p>
+                <p>{worryDetail.createdAt}</p>
+              </div>
+            </div>
+
+            <div className="flex flex-col gap-1">
+              <p className="text-title3 font-bold">{worryDetail.title}</p>
+              <div
+                className="text-body text-mainblack"
+                dangerouslySetInnerHTML={{ __html: worryDetail.content }}
+              />
+            </div>
+          </>
+        )}
+        <div className="h-[1px] bg-main" />
+        <div className="flex justify-center">
+          <Button
+            text="채팅 시작"
+            color="PURPLE"
+            size="small"
+            onClick={() => {}}
+            className="my-10"
+          />
+        </div>
+      </Container>
+    </>
+  )
+}
+
+export default WorryDetail
diff --git a/src/app/worry/page.tsx b/src/app/worry/page.tsx
@@ -0,0 +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 = () => {
+  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 (
+    <div className="flex flex-col">
+      <div className="text-title3 text-maindark font-semibold m-5">
+        M쌤 매칭을 기다리는 고민
+      </div>
+      <Container color="purple">
+        <MbtiSelect
+          strFromMbti={waitingStrFromMbti}
+          strToMbti={waitingStrToMbti}
+          setStrFromMbti={setWaitingStrFromMbti}
+          setStrToMbti={setWaitingStrToMbti}
+        />
+        <div className="h-[1px] bg-main" />
+        {waitingWorryList &&
+          waitingWorryList.result.map((worry) => (
+            <>
+              <WorryBoard key={worry.id} worryBoard={worry} />
+              <div className="h-[1px] bg-main" />
+            </>
+          ))}
+      </Container>
+
+      <div className="text-title3 text-maindark font-semibold m-5">
+        해결 완료된 고민
+      </div>
+      <Container color="purple">
+        <MbtiSelect
+          strFromMbti={solvedStrFromMbti}
+          strToMbti={solvedStrToMbti}
+          setStrFromMbti={setSolvedStrFromMbti}
+          setStrToMbti={setSolvedStrToMbti}
+        />
+        <div className="h-[1px] bg-main" />
+        {solvedWorryList &&
+          solvedWorryList.result.map((worry) => (
+            <>
+              <WorryBoard key={worry.id} worryBoard={worry} />
+              <div className="h-[1px] bg-main" />
+            </>
+          ))}
+      </Container>
+    </div>
+  )
+}
+
+export default WorryPage
diff --git 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/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) => <MbtiCategories {...args} />
+const Template: StoryFn<MbtiCategoriesProps> = (args) => (
+  <MbtiCategories {...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
@@ -8,7 +8,7 @@ import {
 } from '@/service/board/useBoardService'
 import { useState } from 'react'
 
-interface MbtiCategoriesProps {
+export interface MbtiCategoriesProps {
   selectedMbti: string
   setMbti: (mbti: string) => void
 }

diff --git 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 = () => <MbtiSelect />
+const Template: StoryFn<MbtiSelectProps> = (args: MbtiSelectProps) => (
+  <MbtiSelect {...args} />
+)
 
 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
@@ -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('전체')
+export 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 (
     <div className="flex relative w-full">
       <div className="flex justify-between items-center gap-4 mb-4">
         <Dropdown
-          selectedType={selectedLeftType}
+          selectedType={displayType(strFromMbti)}
           showDropdown={showLeftDropdown}
           onToggleDropdown={() => setShowLeftDropdown(!showLeftDropdown)}
           onSelectType={handleLeftTypeClick}
@@ -36,7 +48,7 @@ const MbtiSelect = () => {
           height={7}
         />
         <Dropdown
-          selectedType={selectedRightType}
+          selectedType={displayType(strToMbti)}
           showDropdown={showRightDropdown}
           onToggleDropdown={() => setShowRightDropdown(!showRightDropdown)}
           onSelectType={handleRightTypeClick}

diff --git a/src/components/worry/WorryBoard.stories.tsx b/src/components/worry/WorryBoard.stories.tsx
@@ -12,10 +12,13 @@ const Template: StoryFn<WorryBoardProps> = (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',
+  },
 }