[fix] #14 #33 백엔드 데이터 코드 수정

kdt-8-4 · Apr 9, 2024 · 1424829 · 1424829
1 parent f337c64
commit 1424829
Show file tree

Hide file tree

Showing 10 changed files with 159 additions and 97 deletions.
diff --git a/weatherfit_refactoring/@types/feed/index.d.ts b/weatherfit_refactoring/@types/feed/index.d.ts
@@ -46,6 +46,7 @@ interface FEEDDATA_detail {
   content: string
   hashTag: string[]
   category: string[]
+  comments: CommentType[]
 }
 
 interface SelecList {

diff --git a/weatherfit_refactoring/src/Components/Molecules/bar/NavBar.tsx b/weatherfit_refactoring/src/Components/Molecules/bar/NavBar.tsx
@@ -4,7 +4,7 @@ export default function NavBar() {
   return (
     <footer>
       <nav
-        className="absolute bottom-[15px] mx-[10px] flex justify-around items-center bg-white w-[370px] h-[52px] border border-black rounded-[30px] z-10 py-[5px]"
+        className="absolute bottom-[15px] mx-[2.5%] flex justify-around items-center bg-white w-[93%] h-[52px] border border-black rounded-[30px] z-10 py-[5px]"
         style={{ boxShadow: '7px 7px 1px' }}>
         <NavBarBox iconStyle="HOME" title="홈" url="/" />
         <NavBarBox iconStyle="SEARCH" title="구경" url="/feed" />

diff --git a/weatherfit_refactoring/src/Components/Molecules/comment/Comment.tsx b/weatherfit_refactoring/src/Components/Molecules/comment/Comment.tsx
@@ -23,13 +23,9 @@ export default function Comment({
   const [showReply, setShowReply] = useState<boolean>(false)
   const [isEditing, setIsEditing] = useState<boolean>(false)
   const [editContent, setEditContent] = useState<string>('')
-  const { accesstoken, setAccessToken } = AuthTokenStore()
+  const { accesstoken } = AuthTokenStore()
   const { userNick } = AuthUserNickStore()
 
-  useEffect(() => {
-    setAccessToken()
-  }, [])
-
   // 답글 등록
   const handleReplySubmit = async (e: React.FormEvent) => {
     e.preventDefault()
@@ -209,7 +205,7 @@ export default function Comment({
       comments.map(c =>
         c.id === comment.id
           ? { ...c, status: 0 }
-          : { ...c, replyList: findComment(c.replyList) },
+          : { ...c, replyList: c.replyList ? findComment(c.replyList) : [] },
       )
     setComments(findComment(newComments))
   }
@@ -274,7 +270,7 @@ export default function Comment({
             style="my-[5px]"
             inputStyle="w-[285px] h-[30px]"
             btnText="게시"
-            place={`${userNick}으로 작성...`}
+            place={`${userNick}(으)로 작성...`}
           />
         </div>
       )}

diff --git a/weatherfit_refactoring/src/Components/Molecules/comment/CommentIcon.tsx b/weatherfit_refactoring/src/Components/Molecules/comment/CommentIcon.tsx
@@ -3,11 +3,20 @@ import { useState } from 'react'
 import IconStore, { IconStyle } from '../../Atoms/Icon/IconStore'
 import CommentModal from './CommentModal'
 
-export default function CommentIcon() {
+export default function CommentIcon({
+  boardId,
+  comments,
+  refreshComments,
+}: {
+  boardId: BOARDID
+  comments: CommentType[]
+  refreshComments: () => void
+}) {
   const [showComment, setShowComment] = useState<boolean>(false)
 
   const onClickComment = () => {
     setShowComment(!showComment)
+    refreshComments()
   }
   return (
     <>
@@ -16,7 +25,13 @@ export default function CommentIcon() {
         size={25}
         onClickFunction={onClickComment}
       />
-      {showComment && <CommentModal onClickFunction={onClickComment} />}
+      {showComment && (
+        <CommentModal
+          onClickFunction={onClickComment}
+          boardId={boardId}
+          comments={comments}
+        />
+      )}
     </>
   )
 }
diff --git a/weatherfit_refactoring/src/Components/Molecules/comment/CommentModal.tsx b/weatherfit_refactoring/src/Components/Molecules/comment/CommentModal.tsx
@@ -4,15 +4,25 @@ import Comment from './Comment'
 import CommentInput from './CommentInput'
 import { confirmAlert } from '@/utils/function/utilFunction'
 import { AuthTokenStore } from '@/Store/AuthToken'
+import { AuthUserNickStore } from '@/Store/AuthUserNick'
 
 interface Props {
   onClickFunction: () => void
+  boardId: BOARDID
+  comments: CommentType[]
 }
 
-export default function CommentModal({ onClickFunction }: Props) {
-  const [comments, setComments] = useState<CommentType[]>([])
+export default function CommentModal({
+  onClickFunction,
+  boardId,
+  comments,
+}: Props) {
+  const [commentList, setCommentList] = useState<CommentType[]>(
+    comments.filter(comment => comment.status !== 0),
+  )
   const [content, setContent] = useState<string>('')
-  const { accesstoken, setAccessToken } = AuthTokenStore()
+  const { accesstoken } = AuthTokenStore()
+  const { userNick } = AuthUserNickStore()
 
   // 댓글 더미 데이터
   // useEffect(() => {
@@ -31,8 +41,8 @@ export default function CommentModal({ onClickFunction }: Props) {
   // }, [])
 
   useEffect(() => {
-    console.log('댓글 목록 업데이트: ', comments)
-  }, [comments])
+    console.log('댓글 목록 업데이트: ', commentList)
+  }, [commentList])
 
   // 댓글 등록
   const handleCommentSubmit = async (e: React.FormEvent) => {
@@ -51,7 +61,7 @@ export default function CommentModal({ onClickFunction }: Props) {
           Authorization: 'Bearer ' + accesstoken,
         },
         body: JSON.stringify({
-          boardId: 1, // localBoardId 수정 필요
+          boardId: boardId, // localBoardId 수정 필요
           content: content,
         }),
       })
@@ -60,8 +70,8 @@ export default function CommentModal({ onClickFunction }: Props) {
 
       console.log('댓글 data: ', data)
 
-      setComments([
-        ...comments,
+      setCommentList([
+        ...commentList,
         {
           id: data.id,
           boardId: data.boardId,
@@ -81,8 +91,8 @@ export default function CommentModal({ onClickFunction }: Props) {
   }
 
   return (
-    <div className="fixed top-0 left-0 m-0 w-[100%] h-[100%] bg-[#bababa4f] z-[100]">
-      <div className="fixed bottom-0 bg-[#ffffff] w-[390px] h-[65%] rounded-t-lg z-[200] font-Cafe24SsurroundAir">
+    <div className="absolute top-0 left-0 m-0 w-[100%] h-[100%] bg-[#bababa4f] z-[100]">
+      <div className="absolute bottom-0 bg-[#ffffff] w-[100%] h-[65%] rounded-t-lg z-[200] font-Cafe24SsurroundAir">
         <div className="flex justify-between my-[10px] mx-[5px] font-bold">
           <p className="w-[100%] text-center">댓글</p>
           <p className="cursor-pointer" onClick={onClickFunction}>
@@ -92,14 +102,14 @@ export default function CommentModal({ onClickFunction }: Props) {
         <hr />
         <div className="m-[10px] h-[79%] overflow-auto">
           {/* 댓글 목록 부분 */}
-          {comments
+          {commentList
             .filter(comment => comment.status !== 0)
             .map(comment => (
               <Comment
                 key={comment.id}
                 comment={comment}
-                comments={comments}
-                setComments={setComments}
+                comments={commentList}
+                setComments={setCommentList}
               />
             ))}
         </div>
@@ -110,7 +120,7 @@ export default function CommentModal({ onClickFunction }: Props) {
           style="m-[10px] absolute bottom-[5px]"
           inputStyle="w-[325px] h-[30px]"
           btnText="게시"
-          place="닉네임(으)로 작성..."
+          place={`${userNick}(으)로 작성...`}
         />
       </div>
     </div>

diff --git a/weatherfit_refactoring/src/Components/Molecules/header/MainHeader.tsx b/weatherfit_refactoring/src/Components/Molecules/header/MainHeader.tsx
@@ -26,7 +26,7 @@ export default function MainHeader({ title }: Props) {
   }, [accesstoken])
   const router = useRouter()
 
-  console.log(`토큰: ${accesstoken} 체크: ${check}`)
+  // console.log(`토큰: ${accesstoken} 체크: ${check}`)
 
   const onClickToMain =
     title === '옷늘날씨' ? () => router.push('/') : undefined // 또는 다른 함수

diff --git a/weatherfit_refactoring/src/Components/Molecules/post/FeedContents.tsx b/weatherfit_refactoring/src/Components/Molecules/post/FeedContents.tsx
@@ -50,13 +50,13 @@ export default function FeedContents({ response, blurDataMap }: Props) {
         <div
           className=" font-Cafe24SsurroundAir m-auto text-center"
           tabIndex={0}>
-          <p>현재 온도에 맞는 게시물이 없습니다.</p>
+          <p>현재 온도와 일치하는 게시물이 없습니다.</p>
           <br />
-          <p>카테고리에서</p>
-          <p>온도를 조절하여 원하는 코디를 확인하세요..!</p>
+          <p>카테고리와 온도를 조절하여</p>
+          <p>원하는 코디를 확인해 보세요.</p>
           <br />
           <p className=" text-[12px] text-gray-600">
-            ※ 모든 코디를 보고 싶다면 해시태그 검색을 이용해주세요. ※
+            ※ 검색창의 돋보기를 누르면 모든 코디를 확인할 수 있습니다 ※
           </p>
         </div>
       )}

diff --git a/weatherfit_refactoring/src/Components/Molecules/user/DetailProfile.tsx b/weatherfit_refactoring/src/Components/Molecules/user/DetailProfile.tsx
@@ -1,36 +1,38 @@
 'use client'
 
+import IconStore, { IconStyle } from '@/Components/Atoms/Icon/IconStore'
 import Image from 'next/image'
 
-export default function DetailProfile({
-  nickName,
-  userData,
-}: {
-  nickName: string
-  userData: FEEDDATA_detail
-}) {
+export default function DetailProfile({ userData }: { userData: UserData }) {
   return (
     <div className="flex items-center font-NanumSquareRound mt-5">
-      <Image
+      {userData.image == null ? (
+        <IconStore
+          iconStyle={IconStyle.MY_PROFILE_FILL}
+          size={50}
+          style="border-[3px] border-solid border-gray rounded-full"
+        />
+      ) : (
+        <Image
+          src={userData.image}
+          alt="profile"
+          width={50}
+          height={50}
+          className="rounded-full"
+        />
+      )}
+      {/* <Image
         src={
           'https://cdnimg.melon.co.kr/cm2/artistcrop/images/002/61/143/261143_20210325180240_500.jpg?61e575e8653e5920470a38d1482d7312/melon/optimize/90'
         }
         width={50}
         height={50}
         alt="profile"
         className="rounded-full"
-      />
-      {/* <Image
-        src={userData.userImage}
-        width={50}
-        height={50}
-        alt="profile"
-        className="rounded-full"
       /> */}
       <div className="flex-col ml-3 pb-1">
-        <p className="text-lg">{nickName}</p>
-        <p className="text-xs text-gray-400">@user1</p>
-        {/* <p className="text-xs text-gray-400">여기 아이디 들어가면 되려나</p> */}
+        <p className="text-lg">{userData.nickname}</p>
+        <p className="text-xs text-gray-400">@{userData.email.split('@')[0]}</p>
       </div>
     </div>
   )