fix: 코맨트 수정 안되는 버그 해결(#84)

.vscode/launch.json

@@ -14,11 +14,17 @@
       }
     },
     {
-      "type": "chrome",
+      "type": "firefox",
       "request": "launch",
       "name": "debug config",
       "url": "http://localhost:5173",
-      "webRoot": "${workspaceFolder}/src"
+      "webRoot": "${workspaceFolder}/src",
+      "pathMappings": [
+        {
+          "url": "http://localhost:5173/src",
+          "path": "${workspaceFolder}/src"
+        }
+      ]
     }
   ],
   "compounds": [

src/App.tsx

@@ -1,5 +1,6 @@
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 
+import CommentSection from '@/components/comment/commentSection';
 import { PATH } from '@/constants/path';
 import ContainerLayout from '@/layouts/Container';
 import RootLayout from '@/layouts/Root';
@@ -91,6 +92,10 @@ const router = createBrowserRouter([
             path: PATH.PROFILE,
             element: <ProfilePage />,
           },
+          {
+            path: 'comments',
+            element: <CommentSection postId="postId" />,
+          },
         ],
       },
     ],

src/api/fetchUsers.ts

@@ -1,10 +1,20 @@
 import { collection, doc, getDoc, getDocs, query, updateDoc, where } from 'firebase/firestore';
 
 import { db } from '@/api/firebaseApp';
+import { UserData } from '@/types/profile';
 import { UserModel } from '@/types/user';
 
 const usersCollection = collection(db, 'users');
 
+export const fetchUserData = async (userId: string): Promise<UserData | null> => {
+  const userDoc = doc(db, 'users', userId);
+  const docSnapshot = await getDoc(userDoc);
+  if (docSnapshot.exists()) {
+    return docSnapshot.data() as UserData;
+  }
+  return null;
+};
+
 export const getUserInfoByUserId = async ({ userId }: { userId: string }): Promise<UserModel> => {
   const userDoc = doc(usersCollection, userId);
   const userDocSnapshot = await getDoc(userDoc);

src/components/comment/CommentActions.tsx

@@ -0,0 +1,24 @@
+// CommentActions.tsx
+import { css } from '@emotion/react';
+
+interface CommentActionsProps {
+  onEdit: () => void;
+  onDelete: () => void;
+}
+
+const CommentActions: React.FC<CommentActionsProps> = ({ onEdit, onDelete }) => {
+  return (
+    <div css={commentActionsStyle}>
+      <button onClick={onEdit}>Edit</button>
+      <button onClick={onDelete}>Delete</button>
+    </div>
+  );
+};
+
+const commentActionsStyle = css`
+  display: flex;
+  gap: 8px;
+  margin-top: 4px;
+`;
+
+export default CommentActions;

src/components/comment/CommentInput.tsx

@@ -0,0 +1,65 @@
+// CommentInput.tsx
+import { css } from '@emotion/react';
+import { HiOutlinePaperAirplane } from 'react-icons/hi2';
+
+import theme from '@/styles/theme';
+
+interface CommentInputProps {
+  newCommentContent: string;
+  setNewCommentContent: (content: string) => void;
+  handleCreateComment: () => void;
+}
+
+const CommentInput: React.FC<CommentInputProps> = ({
+  newCommentContent,
+  setNewCommentContent,
+  handleCreateComment,
+}) => {
+  return (
+    <div css={newCommentStyle}>
+      <textarea
+        css={textareaStyle}
+        value={newCommentContent}
+        onChange={(e) => setNewCommentContent(e.target.value)}
+        placeholder="Write a comment..."
+      />
+      <button css={sendButtonStyle} onClick={handleCreateComment}>
+        <HiOutlinePaperAirplane />
+      </button>
+    </div>
+  );
+};
+
+const newCommentStyle = css`
+  display: flex;
+  margin-bottom: 20px;
+`;
+
+const textareaStyle = () => css`
+  width: 100%;
+  padding: 12px;
+  border: 1px solid ${theme.colors.lightGray};
+  border-radius: 8px;
+  font-size: ${theme.fontSizes.small};
+  resize: vertical;
+`;
+
+const sendButtonStyle = () => css`
+  background: ${theme.colors.primary};
+  color: white;
+  border: none;
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 8px;
+  cursor: pointer;
+
+  &:hover {
+    background: ${theme.colors.black};
+  }
+`;
+
+export default CommentInput;

src/components/comment/CommentItem.tsx

@@ -0,0 +1,108 @@
+// CommentItem.tsx
+import { css } from '@emotion/react';
+
+import { CommentModel } from '@/api/fetchComment';
+import defaultProfile from '@/assets/images/default-avatar.svg';
+import theme from '@/styles/theme';
+import { formatCreatedAt } from '@/utils/date';
+
+import CommentActions from './CommentActions';
+import UserInfo from '../user/UserInfo';
+
+interface CommentItemProps {
+  comment: CommentModel;
+  currentUserId: string | undefined;
+  editingCommentId: string | null;
+  editingContent: string;
+  setEditingCommentId: (id: string | null) => void;
+  setEditingContent: (content: string) => void;
+  handleUpdateComment: (commentId: string) => void;
+  handleDeleteComment: (commentId: string) => void;
+  userData: { displayName: string; photoURL: string };
+}
+
+const CommentItem: React.FC<CommentItemProps> = ({
+  comment,
+  currentUserId,
+  editingCommentId,
+  editingContent,
+  setEditingCommentId,
+  setEditingContent,
+  handleUpdateComment,
+  handleDeleteComment,
+  userData,
+}) => {
+  return (
+    <div css={commentStyle}>
+      <UserInfo
+        name={userData?.displayName || 'Unknown User'}
+        url={userData?.photoURL || defaultProfile}
+        userId={comment.userId}
+      />
+      <div css={commentContentStyle}>
+        {editingCommentId === comment.id ? (
+          <>
+            <textarea
+              css={editTextareaStyle}
+              value={editingContent}
+              onChange={(e) => setEditingContent(e.target.value)}
+            />
+            <div css={editButtonsStyle}>
+              <button onClick={() => handleUpdateComment(comment.id)}>Save</button>
+              <button onClick={() => setEditingCommentId(null)}>Cancel</button>
+            </div>
+          </>
+        ) : (
+          <>
+            <p>{comment.content}</p>
+            <span css={commentDateStyle}>{formatCreatedAt(comment.createdAt)}</span>
+            {comment.userId === currentUserId && (
+              <CommentActions
+                onEdit={() => {
+                  setEditingCommentId(comment.id);
+                  setEditingContent(comment.content);
+                }}
+                onDelete={() => handleDeleteComment(comment.id)}
+              />
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  );
+};
+
+const commentStyle = css`
+  display: flex;
+  align-items: flex-start;
+`;
+
+const commentContentStyle = () => css`
+  margin-left: 12px;
+  flex-grow: 1;
+  font-size: ${theme.fontSizes.small};
+`;
+
+const commentDateStyle = () => css`
+  font-size: ${theme.fontSizes.micro};
+  color: ${theme.colors.darkGray};
+  margin-top: 4px;
+  display: block;
+`;
+
+const editTextareaStyle = () => css`
+  width: 100%;
+  padding: 8px;
+  border: 1px solid ${theme.colors.lightGray};
+  border-radius: 4px;
+  font-size: ${theme.fontSizes.small};
+  resize: vertical;
+  margin-bottom: 8px;
+`;
+
+const editButtonsStyle = css`
+  display: flex;
+  gap: 8px;
+`;
+
+export default CommentItem;