From c3ca5d7dfa004c7175655cfc0b3c95afb35c6ffd Mon Sep 17 00:00:00 2001
From: afds4567 <33995840+afds4567@users.noreply.github.com>
Date: Mon, 16 Oct 2023 19:09:57 +0900
Subject: [PATCH 01/14] =?UTF-8?q?feat:=20=EB=8C=93=EA=B8=80=20=EA=B8=B0?=
 =?UTF-8?q?=EB=8A=A5=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/common/Input/ReplyComment.tsx  |  24 ++++
 .../components/common/Input/SingleComment.tsx | 110 ++++++++++++++++++
 2 files changed, 134 insertions(+)
 create mode 100644 frontend/src/components/common/Input/ReplyComment.tsx
 create mode 100644 frontend/src/components/common/Input/SingleComment.tsx

diff --git a/frontend/src/components/common/Input/ReplyComment.tsx b/frontend/src/components/common/Input/ReplyComment.tsx
new file mode 100644
index 00000000..673f65ac
--- /dev/null
+++ b/frontend/src/components/common/Input/ReplyComment.tsx
@@ -0,0 +1,24 @@
+import SingleComment from './SingleComment';
+
+function ReplyComment({ props }: any) {
+  const { commentList, parentId, pageTotalCommentList, depth } = props;
+
+  if (depth === 2) return null;
+  return (
+    <>
+      {commentList.length > 0 &&
+        commentList.map((comment: string) => (
+          <>
+            <SingleComment
+              comment={comment}
+              commentList={commentList}
+              totalList={pageTotalCommentList}
+              depth={depth}
+            />
+          </>
+        ))}
+    </>
+  );
+}
+
+export default ReplyComment;
diff --git a/frontend/src/components/common/Input/SingleComment.tsx b/frontend/src/components/common/Input/SingleComment.tsx
new file mode 100644
index 00000000..f2e52779
--- /dev/null
+++ b/frontend/src/components/common/Input/SingleComment.tsx
@@ -0,0 +1,110 @@
+import { useState } from 'react';
+import styled from 'styled-components';
+
+import ReplyComment from './ReplyComment';
+//  { 댓글, 댓글목록, 전체목록, depth = 0 }
+function SingleComment({ comment, commentList, totalList, depth = 0 }: any) {
+  const [replyOpen, setReplyOpen] = useState(false);
+  const [seeMore, setSeeMore] = useState(false);
+  const toggleReplyOpen = () => {
+    setReplyOpen((prev) => !prev);
+  };
+  const toggleSeeMore = () => {
+    setSeeMore((prev) => !prev);
+  };
+
+  const replyList = commentList.filter(
+    (curComment: any) => curComment.replyTo === comment.id,
+  );
+  const replyCount = replyList.length;
+
+  return (
+    <CommentWrapper depth={depth} key={comment.id}>
+      <Flex>
+        <ProfileImage
+          src={comment.writer.profileImage}
+          width="40px"
+          height="40px"
+        />
+        <CommentInfo>
+          <Writer>@{comment.writer.name}</Writer>
+          <Content>{comment.content}</Content>
+          <div>
+            <button type="button" onClick={toggleReplyOpen}>
+              답글남기기
+            </button>
+            {replyOpen && (
+              <form>
+                <input />
+              </form>
+            )}
+          </div>
+          {replyCount > 0 && (
+            <MoreReplyButton onClick={toggleSeeMore}>
+              {seeMore ? '\u25B2' : '\u25BC'} 답글 {replyCount}개
+            </MoreReplyButton>
+          )}
+        </CommentInfo>
+      </Flex>
+
+      {seeMore && (
+        <ReplyComment
+          commentList={replyList}
+          parentId={comment.id}
+          pageTotalCommentList={totalList}
+          depth={depth + 1}
+        />
+      )}
+    </CommentWrapper>
+  );
+}
+
+export default SingleComment;
+
+const CommentWrapper = styled.li<{ depth: number }>`
+  width: 100%;
+  margin-left: ${(props) => props.depth * 20}px;
+`;
+
+const Flex = styled.div`
+  display: flex;
+  gap: 12px;
+  margin-bottom: 24px;
+`;
+
+export const ProfileImage = styled.img`
+  display: block;
+
+  border-radius: 50%;
+`;
+
+const CommentInfo = styled.div``;
+
+const Writer = styled.div`
+  white-space: nowrap;
+  font-size: 1rem;
+  font-weight: 500;
+  line-height: 1.8rem;
+`;
+
+const Content = styled.div`
+  font-family: 'Roboto', 'Arial', sans-serif;
+  font-size: 1.2rem;
+  line-height: 1.6rem;
+  font-weight: 300;
+  line-height: 2rem;
+  overflow-wrap: anywhere;
+`;
+
+const MoreReplyButton = styled.button`
+  padding: 2px;
+  border: none;
+  background: none;
+  border-radius: 8px;
+  color: black;
+  font-weight: 600;
+  &:hover {
+    background: gray;
+    cursor: pointer;
+  }
+`;

From 8d734e8d3e35dace2bb1fc796a3427cdfcc79192 Mon Sep 17 00:00:00 2001
From: afds4567 <33995840+afds4567@users.noreply.github.com>
Date: Mon, 16 Oct 2023 19:10:09 +0900
Subject: [PATCH 02/14] =?UTF-8?q?feat:=20=ED=95=80=20=EC=83=81=EC=84=B8?=
 =?UTF-8?q?=EB=B3=B4=EA=B8=B0=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=8C=93?=
 =?UTF-8?q?=EA=B8=80=EA=B8=B0=EB=8A=A5=20=EB=B0=98=EC=98=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/PinDetail.tsx | 112 ++++++++++++++++++++++++++++---
 1 file changed, 101 insertions(+), 11 deletions(-)

diff --git a/frontend/src/pages/PinDetail.tsx b/frontend/src/pages/PinDetail.tsx
index f4f43ba1..c3b54e32 100644
--- a/frontend/src/pages/PinDetail.tsx
+++ b/frontend/src/pages/PinDetail.tsx
@@ -8,6 +8,9 @@ import UpdateBtnSVG from '../assets/updateBtn.svg';
 import Box from '../components/common/Box';
 import Button from '../components/common/Button';
 import Flex from '../components/common/Flex';
+import SingleComment, {
+  ProfileImage,
+} from '../components/common/Input/SingleComment';
 import Space from '../components/common/Space';
 import Text from '../components/common/Text';
 import Modal from '../components/Modal';
@@ -28,7 +31,9 @@ interface PinDetailProps {
   setIsEditPinDetail: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
-const userToken = localStorage.getItem('userToken');
+const userToken = localStorage?.getItem('userToken');
+const localStorageUser = localStorage?.getItem('user');
+const user = JSON.parse(localStorageUser);
 
 function PinDetail({
   width,
@@ -36,8 +41,12 @@ function PinDetail({
   isEditPinDetail,
   setIsEditPinDetail,
 }: PinDetailProps) {
+  console.log(user);
+
   const [searchParams, setSearchParams] = useSearchParams();
   const [pin, setPin] = useState<PinProps | null>(null);
+  const [commentList, setCommentList] = useState<any[]>([]); // 댓글 리스트
+  const [newComment, setNewComment] = useState<string>('');
   const { showToast } = useToast();
   const {
     formValues,
@@ -119,6 +128,41 @@ function PinDetail({
     getPinData();
   };
 
+  // 댓글 구현 부분
+  const setCurrentPageCommentList = async () => {
+    const { data } = await getApi(`/pins/comment/${pinId}`);
+    setCommentList(data);
+    return data;
+  };
+
+  useEffect(() => {
+    setCurrentPageCommentList();
+  }, []);
+
+  const onClickCommentBtn = async (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+
+    try {
+      // 댓글 추가
+      // comment 값이랑 추가 정보 body에 담아서 보내기
+      await postApi(
+        `/pins/comment`,
+        {
+          pinId,
+          content: newComment,
+          parentCommentId: null,
+        },
+        'x-www-form-urlencoded',
+      );
+
+      setCurrentPageCommentList();
+
+      showToast('info', '댓글이 추가되었습니다.');
+    } catch {
+      showToast('error', '댓글을 다시 작성해주세요');
+    }
+  };
+
   if (!pin) return <></>;
 
   if (isEditPinDetail)
@@ -144,9 +188,7 @@ function PinDetail({
           {pin.name}
         </Text>
       </Flex>
-
       <Space size={1} />
-
       <Flex $justifyContent="space-between" $alignItems="flex-end" width="100%">
         <Text color="black" $fontSize="small" $fontWeight="normal">
           {pin.creator}
@@ -164,9 +206,7 @@ function PinDetail({
           </Text>
         </Flex>
       </Flex>
-
       <Space size={2} />
-
       <ImageInputLabel htmlFor="file">파일업로드</ImageInputLabel>
       <ImageInputButton
         id="file"
@@ -174,11 +214,8 @@ function PinDetail({
         name="image"
         onChange={onPinImageFileChange}
       />
-
       <PinImageContainer images={pin.images} getPinData={getPinData} />
-
       <Space size={6} />
-
       <Flex $flexDirection="column">
         <Text color="black" $fontSize="large" $fontWeight="bold">
           어디에 있나요?
@@ -198,9 +235,64 @@ function PinDetail({
           {pin.description}
         </Text>
       </Flex>
-
       <Space size={7} />
+      {/*  Comment Section */}
 
+      <Text color="black" $fontSize="large" $fontWeight="bold">
+        댓글{' '}
+      </Text>
+      <Space size={1} />
+      {userToken && (
+        <div style={{ display: 'flex', marginBottom: '20px', gap: '12px' }}>
+          <ProfileImage src={user?.imageUrl || ''} width="40px" height="40px" />
+          <div style={{ width: '100%' }}>
+            <input
+              style={{
+                width: '100%',
+                borderTop: 'none',
+                borderLeft: 'none',
+                borderRight: 'none',
+                fontSize: '16px',
+              }}
+              value={newComment}
+              onChange={(e: any) => setNewComment(e.target.value)}
+              placeholder="댓글 추가"
+              // onClick={toggleReplyOpen}
+            />
+            <button
+              style={{
+                marginTop: '12px',
+                float: 'right',
+                width: '40px',
+                fontSize: '12px',
+              }}
+              type="button"
+              onClick={onClickCommentBtn}
+            >
+              등록
+            </button>
+
+            {/* {replyOpen && (
+            <form>
+              <input />
+            </form>
+          )} */}
+          </div>
+        </div>
+      )}
+      {commentList?.length > 0 &&
+        commentList.map(
+          (comment: any) =>
+            !comment.replyTo ? (
+              <SingleComment
+                key={comment.id}
+                comment={comment}
+                commentList={commentList}
+                totalList={commentList}
+              />
+            ) : null, // <-- comment.replyTo가 존재하는 경우 null 반환
+        )}
+      {/* comment section END */}
       <ButtonsWrapper>
         <SaveToMyMapButton variant="primary" onClick={openModalWithToken}>
           내 지도에 저장하기
@@ -210,9 +302,7 @@ function PinDetail({
           공유하기
         </ShareButton>
       </ButtonsWrapper>
-
       <Space size={8} />
-
       <Modal
         modalKey="addToMyTopicList"
         position="center"

From eaca1404dc85b5d3e3b55d52c4a502564d05a573 Mon Sep 17 00:00:00 2001
From: afds4567 <33995840+afds4567@users.noreply.github.com>
Date: Mon, 16 Oct 2023 19:10:38 +0900
Subject: [PATCH 03/14] =?UTF-8?q?chore:=20=EC=9E=90=EB=8F=99=EC=99=84?=
 =?UTF-8?q?=EC=84=B1=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20lint?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/common/Input/Autocomplete.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/common/Input/Autocomplete.tsx b/frontend/src/components/common/Input/Autocomplete.tsx
index 10b38113..c790e166 100644
--- a/frontend/src/components/common/Input/Autocomplete.tsx
+++ b/frontend/src/components/common/Input/Autocomplete.tsx
@@ -4,8 +4,8 @@ import styled from 'styled-components';
 
 import { getPoiApi } from '../../../apis/getPoiApi';
 import { Poi } from '../../../types/Poi';
-import Input from '.';
 import Text from '../Text';
+import Input from '.';
 
 interface AutocompleteProps {
   defaultValue?: string;

From 9450d2ca0227eb39dd5380beeb1f20c24e179db1 Mon Sep 17 00:00:00 2001
From: afds4567 <33995840+afds4567@users.noreply.github.com>
Date: Mon, 16 Oct 2023 19:38:40 +0900
Subject: [PATCH 04/14] =?UTF-8?q?refacotr:=20api=20=EC=9D=91=EB=8B=B5=20?=
 =?UTF-8?q?=EB=AA=85=EC=84=B8=20=EB=B0=98=EC=98=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/common/Input/ReplyComment.tsx  | 2 +-
 frontend/src/components/common/Input/SingleComment.tsx | 4 ++--
 frontend/src/constants/index.ts                        | 2 +-
 frontend/src/pages/PinDetail.tsx                       | 6 +++---
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/common/Input/ReplyComment.tsx b/frontend/src/components/common/Input/ReplyComment.tsx
index 673f65ac..2dba4509 100644
--- a/frontend/src/components/common/Input/ReplyComment.tsx
+++ b/frontend/src/components/common/Input/ReplyComment.tsx
@@ -1,7 +1,7 @@
 import SingleComment from './SingleComment';
 
 function ReplyComment({ props }: any) {
-  const { commentList, parentId, pageTotalCommentList, depth } = props;
+  const { commentList, pageTotalCommentList, depth } = props;
 
   if (depth === 2) return null;
   return (
diff --git a/frontend/src/components/common/Input/SingleComment.tsx b/frontend/src/components/common/Input/SingleComment.tsx
index f2e52779..b2729ace 100644
--- a/frontend/src/components/common/Input/SingleComment.tsx
+++ b/frontend/src/components/common/Input/SingleComment.tsx
@@ -22,12 +22,12 @@ function SingleComment({ comment, commentList, totalList, depth = 0 }: any) {
     <CommentWrapper depth={depth} key={comment.id}>
       <Flex>
         <ProfileImage
-          src={comment.writer.profileImage}
+          src={comment.creatorImageUrl}
           width="40px"
           height="40px"
         />
         <CommentInfo>
-          <Writer>@{comment.writer.name}</Writer>
+          <Writer>@{comment.creator}</Writer>
           <Content>{comment.content}</Content>
           <div>
             <button type="button" onClick={toggleReplyOpen}>
diff --git a/frontend/src/constants/index.ts b/frontend/src/constants/index.ts
index ca04016c..ec2f197f 100644
--- a/frontend/src/constants/index.ts
+++ b/frontend/src/constants/index.ts
@@ -10,4 +10,4 @@ export const DEFAULT_PROFILE_IMAGE =
   'https://dr702blqc4x5d.cloudfront.net/2023-map-be-fine/icon/profile_defaultImage.svg';
 
 export const DEFAULT_PROD_URL =
-  process.env.APP_URL || 'https://mapbefine.kro.kr/api';
+  process.env.APP_URL || 'http://localhost:3000/api';
diff --git a/frontend/src/pages/PinDetail.tsx b/frontend/src/pages/PinDetail.tsx
index c3b54e32..66904a73 100644
--- a/frontend/src/pages/PinDetail.tsx
+++ b/frontend/src/pages/PinDetail.tsx
@@ -130,7 +130,7 @@ function PinDetail({
 
   // 댓글 구현 부분
   const setCurrentPageCommentList = async () => {
-    const { data } = await getApi(`/pins/comment/${pinId}`);
+    const data: any[] = await getApi(`/pins/comments/${pinId}`);
     setCommentList(data);
     return data;
   };
@@ -150,9 +150,9 @@ function PinDetail({
         {
           pinId,
           content: newComment,
-          parentCommentId: null,
+          parentPinCommentId: null,
         },
-        'x-www-form-urlencoded',
+        'application/json',
       );
 
       setCurrentPageCommentList();

From 3148dc0ecd2935f92ef03677201b2c12646dcff2 Mon Sep 17 00:00:00 2001
From: afds4567 <33995840+afds4567@users.noreply.github.com>
Date: Mon, 16 Oct 2023 19:56:12 +0900
Subject: [PATCH 05/14] =?UTF-8?q?feat:=20=EB=8C=80=EB=8C=93=EA=B8=80=20?=
 =?UTF-8?q?=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/common/Input/SingleComment.tsx | 85 ++++++++++++++++++-
 frontend/src/pages/PinDetail.tsx              |  8 +-
 2 files changed, 85 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/common/Input/SingleComment.tsx b/frontend/src/components/common/Input/SingleComment.tsx
index b2729ace..0004c981 100644
--- a/frontend/src/components/common/Input/SingleComment.tsx
+++ b/frontend/src/components/common/Input/SingleComment.tsx
@@ -1,11 +1,26 @@
 import { useState } from 'react';
 import styled from 'styled-components';
 
+import { postApi } from '../../../apis/postApi';
+import useToast from '../../../hooks/useToast';
 import ReplyComment from './ReplyComment';
+
+const userToken = localStorage?.getItem('userToken');
+const localStorageUser = localStorage?.getItem('user');
+const user = JSON.parse(localStorageUser || '{}');
 //  { 댓글, 댓글목록, 전체목록, depth = 0 }
-function SingleComment({ comment, commentList, totalList, depth = 0 }: any) {
+function SingleComment({
+  pinId,
+  comment,
+  commentList,
+  totalList,
+  depth = 0,
+}: any) {
   const [replyOpen, setReplyOpen] = useState(false);
   const [seeMore, setSeeMore] = useState(false);
+  const [newComment, setNewComment] = useState<string>('');
+  const { showToast } = useToast();
+
   const toggleReplyOpen = () => {
     setReplyOpen((prev) => !prev);
   };
@@ -18,6 +33,29 @@ function SingleComment({ comment, commentList, totalList, depth = 0 }: any) {
   );
   const replyCount = replyList.length;
 
+  const onClickCommentBtn = async (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+
+    try {
+      // 댓글 추가
+      // comment 값이랑 추가 정보 body에 담아서 보내기
+      await postApi(
+        `/pins/comments`,
+        {
+          pinId,
+          content: newComment,
+          parentPinCommentId: null,
+        },
+        'application/json',
+      );
+
+      setCurrentPageCommentList();
+
+      showToast('info', '댓글이 추가되었습니다.');
+    } catch {
+      showToast('error', '댓글을 다시 작성해주세요');
+    }
+  };
   return (
     <CommentWrapper depth={depth} key={comment.id}>
       <Flex>
@@ -34,9 +72,48 @@ function SingleComment({ comment, commentList, totalList, depth = 0 }: any) {
               답글남기기
             </button>
             {replyOpen && (
-              <form>
-                <input />
-              </form>
+              <div
+                style={{ display: 'flex', marginBottom: '20px', gap: '12px' }}
+              >
+                <ProfileImage
+                  src={user?.imageUrl || ''}
+                  width="40px"
+                  height="40px"
+                />
+                <div style={{ width: '100%' }}>
+                  <input
+                    style={{
+                      width: '100%',
+                      borderTop: 'none',
+                      borderLeft: 'none',
+                      borderRight: 'none',
+                      fontSize: '16px',
+                    }}
+                    value={newComment}
+                    onChange={(e: any) => setNewComment(e.target.value)}
+                    placeholder="댓글 추가"
+                    // onClick={toggleReplyOpen}
+                  />
+                  <button
+                    style={{
+                      marginTop: '12px',
+                      float: 'right',
+                      width: '40px',
+                      fontSize: '12px',
+                    }}
+                    type="button"
+                    onClick={onClickCommentBtn}
+                  >
+                    등록
+                  </button>
+
+                  {/* {replyOpen && (
+            <form>
+              <input />
+            </form>
+          )} */}
+                </div>
+              </div>
             )}
           </div>
           {replyCount > 0 && (
diff --git a/frontend/src/pages/PinDetail.tsx b/frontend/src/pages/PinDetail.tsx
index 66904a73..f42ca9e9 100644
--- a/frontend/src/pages/PinDetail.tsx
+++ b/frontend/src/pages/PinDetail.tsx
@@ -33,7 +33,7 @@ interface PinDetailProps {
 
 const userToken = localStorage?.getItem('userToken');
 const localStorageUser = localStorage?.getItem('user');
-const user = JSON.parse(localStorageUser);
+const user = JSON.parse(localStorageUser || '{}');
 
 function PinDetail({
   width,
@@ -146,7 +146,7 @@ function PinDetail({
       // 댓글 추가
       // comment 값이랑 추가 정보 body에 담아서 보내기
       await postApi(
-        `/pins/comment`,
+        `/pins/comments`,
         {
           pinId,
           content: newComment,
@@ -162,7 +162,6 @@ function PinDetail({
       showToast('error', '댓글을 다시 작성해주세요');
     }
   };
-
   if (!pin) return <></>;
 
   if (isEditPinDetail)
@@ -283,12 +282,13 @@ function PinDetail({
       {commentList?.length > 0 &&
         commentList.map(
           (comment: any) =>
-            !comment.replyTo ? (
+            !comment.parentPinCommentId ? (
               <SingleComment
                 key={comment.id}
                 comment={comment}
                 commentList={commentList}
                 totalList={commentList}
+                pinId={pinId}
               />
             ) : null, // <-- comment.replyTo가 존재하는 경우 null 반환
         )}

From 42c9691351749e5625263749c92475c33c837cb0 Mon Sep 17 00:00:00 2001
From: afds4567 <33995840+afds4567@users.noreply.github.com>
Date: Tue, 17 Oct 2023 16:03:10 +0900
Subject: [PATCH 06/14] =?UTF-8?q?feat:=20=EC=88=98=EC=A0=95=20=EC=82=AD?=
 =?UTF-8?q?=EC=A0=9C=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/common/Input/ReplyComment.tsx  |  4 +-
 .../components/common/Input/SingleComment.tsx | 97 +++++++++++++++----
 frontend/src/constants/index.ts               |  3 +-
 frontend/src/pages/PinDetail.tsx              | 12 ++-
 4 files changed, 85 insertions(+), 31 deletions(-)

diff --git a/frontend/src/components/common/Input/ReplyComment.tsx b/frontend/src/components/common/Input/ReplyComment.tsx
index 2dba4509..bd76e116 100644
--- a/frontend/src/components/common/Input/ReplyComment.tsx
+++ b/frontend/src/components/common/Input/ReplyComment.tsx
@@ -1,8 +1,6 @@
 import SingleComment from './SingleComment';
 
-function ReplyComment({ props }: any) {
-  const { commentList, pageTotalCommentList, depth } = props;
-
+function ReplyComment({ commentList, pageTotalCommentList, depth }: any) {
   if (depth === 2) return null;
   return (
     <>
diff --git a/frontend/src/components/common/Input/SingleComment.tsx b/frontend/src/components/common/Input/SingleComment.tsx
index 0004c981..f6edf2de 100644
--- a/frontend/src/components/common/Input/SingleComment.tsx
+++ b/frontend/src/components/common/Input/SingleComment.tsx
@@ -1,8 +1,11 @@
+/* eslint-disable jsx-a11y/click-events-have-key-events */
 import { useState } from 'react';
 import styled from 'styled-components';
 
 import { postApi } from '../../../apis/postApi';
+import { putApi } from '../../../apis/putApi';
 import useToast from '../../../hooks/useToast';
+import Text from '../Text';
 import ReplyComment from './ReplyComment';
 
 const userToken = localStorage?.getItem('userToken');
@@ -15,11 +18,14 @@ function SingleComment({
   commentList,
   totalList,
   depth = 0,
+  refetch,
 }: any) {
   const [replyOpen, setReplyOpen] = useState(false);
   const [seeMore, setSeeMore] = useState(false);
   const [newComment, setNewComment] = useState<string>('');
   const { showToast } = useToast();
+  const params = new URLSearchParams(window.location.search);
+  const pinDetail = params.get('pinDetail');
 
   const toggleReplyOpen = () => {
     setReplyOpen((prev) => !prev);
@@ -28,8 +34,8 @@ function SingleComment({
     setSeeMore((prev) => !prev);
   };
 
-  const replyList = commentList.filter(
-    (curComment: any) => curComment.replyTo === comment.id,
+  const replyList = commentList?.filter(
+    (curComment: any) => curComment.parentPinCommentId === comment.id,
   );
   const replyCount = replyList.length;
 
@@ -39,23 +45,51 @@ function SingleComment({
     try {
       // 댓글 추가
       // comment 값이랑 추가 정보 body에 담아서 보내기
+
       await postApi(
         `/pins/comments`,
         {
-          pinId,
+          pinId: Number(pinDetail),
           content: newComment,
-          parentPinCommentId: null,
+          parentPinCommentId: comment.id,
         },
         'application/json',
       );
+      refetch(Number(pinDetail));
+      setReplyOpen(false);
+      setNewComment('');
+      showToast('info', '댓글이 추가되었습니다.');
+    } catch (e) {
+      showToast('error', '댓글을 다시 작성해주세요');
+    }
+  };
 
-      setCurrentPageCommentList();
+  const onClickDeleteBtn = async (e: React.MouseEvent<HTMLDivElement>) => {
+    e.stopPropagation();
+    try {
+      // 댓글 삭제
+      await postApi(`/pins/comments/${comment.id}`);
+      refetch();
+      showToast('info', '댓글이 삭제되었습니다.');
+    } catch (e) {
+      showToast('error', '댓글을 다시 작성해주세요');
+    }
+  };
 
-      showToast('info', '댓글이 추가되었습니다.');
-    } catch {
+  const onClickModifyBtn = async (e: React.MouseEvent<HTMLDivElement>) => {
+    e.stopPropagation();
+    try {
+      // 댓글 수정
+      await putApi(`/pins/comments/${comment.id}`, {
+        content: newComment,
+      });
+      refetch();
+      showToast('info', '댓글이 수정되었습니다.');
+    } catch (e) {
       showToast('error', '댓글을 다시 작성해주세요');
     }
   };
+
   return (
     <CommentWrapper depth={depth} key={comment.id}>
       <Flex>
@@ -65,12 +99,22 @@ function SingleComment({
           height="40px"
         />
         <CommentInfo>
-          <Writer>@{comment.creator}</Writer>
-          <Content>{comment.content}</Content>
+          <Writer>
+            <Text $fontSize="default" $fontWeight="bold" color="black">
+              @{comment.creator}
+            </Text>
+          </Writer>
+          <Content>
+            <Text $fontSize="large" $fontWeight="normal" color="darkGray">
+              {comment.content}
+            </Text>
+          </Content>
           <div>
-            <button type="button" onClick={toggleReplyOpen}>
-              답글남기기
-            </button>
+            {depth === 1 ? null : (
+              <button type="button" onClick={toggleReplyOpen}>
+                답글남기기
+              </button>
+            )}
             {replyOpen && (
               <div
                 style={{ display: 'flex', marginBottom: '20px', gap: '12px' }}
@@ -122,11 +166,29 @@ function SingleComment({
             </MoreReplyButton>
           )}
         </CommentInfo>
+        <Flex>
+          <Text
+            $fontSize="small"
+            color="gray"
+            $fontWeight="bold"
+            onClick={onClickModifyBtn}
+          >
+            수정
+          </Text>
+          <Text
+            $fontSize="small"
+            color="primary"
+            $fontWeight="bold"
+            onClick={onClickDeleteBtn}
+          >
+            삭제
+          </Text>
+        </Flex>
       </Flex>
 
       {seeMore && (
         <ReplyComment
-          commentList={replyList}
+          commentList={replyList ?? []}
           parentId={comment.id}
           pageTotalCommentList={totalList}
           depth={depth + 1}
@@ -141,6 +203,7 @@ export default SingleComment;
 const CommentWrapper = styled.li<{ depth: number }>`
   width: 100%;
   margin-left: ${(props) => props.depth * 20}px;
+  list-style: none;
 `;
 
 const Flex = styled.div`
@@ -159,17 +222,9 @@ const CommentInfo = styled.div``;
 
 const Writer = styled.div`
   white-space: nowrap;
-  font-size: 1rem;
-  font-weight: 500;
-  line-height: 1.8rem;
 `;
 
 const Content = styled.div`
-  font-family: 'Roboto', 'Arial', sans-serif;
-  font-size: 1.2rem;
-  line-height: 1.6rem;
-  font-weight: 300;
-  line-height: 2rem;
   overflow-wrap: anywhere;
 `;
 
diff --git a/frontend/src/constants/index.ts b/frontend/src/constants/index.ts
index ec2f197f..a2135671 100644
--- a/frontend/src/constants/index.ts
+++ b/frontend/src/constants/index.ts
@@ -9,5 +9,4 @@ export const DEFAULT_TOPIC_IMAGE =
 export const DEFAULT_PROFILE_IMAGE =
   'https://dr702blqc4x5d.cloudfront.net/2023-map-be-fine/icon/profile_defaultImage.svg';
 
-export const DEFAULT_PROD_URL =
-  process.env.APP_URL || 'http://localhost:3000/api';
+export const DEFAULT_PROD_URL = process.env.APP_URL || 'http://localhost:8080';
diff --git a/frontend/src/pages/PinDetail.tsx b/frontend/src/pages/PinDetail.tsx
index f42ca9e9..c72a0a96 100644
--- a/frontend/src/pages/PinDetail.tsx
+++ b/frontend/src/pages/PinDetail.tsx
@@ -81,6 +81,7 @@ function PinDetail({
 
   useEffect(() => {
     getPinData();
+    setCurrentPageCommentList(pinId);
   }, [pinId, searchParams]);
 
   const onClickEditPin = () => {
@@ -129,14 +130,14 @@ function PinDetail({
   };
 
   // 댓글 구현 부분
-  const setCurrentPageCommentList = async () => {
+  const setCurrentPageCommentList = async (pinId: number) => {
     const data: any[] = await getApi(`/pins/comments/${pinId}`);
     setCommentList(data);
     return data;
   };
 
   useEffect(() => {
-    setCurrentPageCommentList();
+    setCurrentPageCommentList(pinId);
   }, []);
 
   const onClickCommentBtn = async (e: React.MouseEvent<HTMLButtonElement>) => {
@@ -155,8 +156,8 @@ function PinDetail({
         'application/json',
       );
 
-      setCurrentPageCommentList();
-
+      setCurrentPageCommentList(pinId);
+      setNewComment('');
       showToast('info', '댓글이 추가되었습니다.');
     } catch {
       showToast('error', '댓글을 다시 작성해주세요');
@@ -289,8 +290,9 @@ function PinDetail({
                 commentList={commentList}
                 totalList={commentList}
                 pinId={pinId}
+                refetch={setCurrentPageCommentList}
               />
-            ) : null, // <-- comment.replyTo가 존재하는 경우 null 반환
+            ) : null, // <-- comment.parentPinCommentId가 존재하는 경우 null 반환
         )}
       {/* comment section END */}
       <ButtonsWrapper>

From be2a5c0cb11dad2905952b10a1a427134a6f62d0 Mon Sep 17 00:00:00 2001
From: afds4567 <33995840+afds4567@users.noreply.github.com>
Date: Tue, 17 Oct 2023 16:27:45 +0900
Subject: [PATCH 07/14] =?UTF-8?q?refactor:=20=EC=88=98=EC=A0=95=ED=95=98?=
 =?UTF-8?q?=EA=B8=B0=20=EA=B8=B0=EB=8A=A5=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/common/Input/SingleComment.tsx | 35 +++++++++++++++----
 1 file changed, 29 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/common/Input/SingleComment.tsx b/frontend/src/components/common/Input/SingleComment.tsx
index f6edf2de..5a1247ee 100644
--- a/frontend/src/components/common/Input/SingleComment.tsx
+++ b/frontend/src/components/common/Input/SingleComment.tsx
@@ -2,6 +2,7 @@
 import { useState } from 'react';
 import styled from 'styled-components';
 
+import { deleteApi } from '../../../apis/deleteApi';
 import { postApi } from '../../../apis/postApi';
 import { putApi } from '../../../apis/putApi';
 import useToast from '../../../hooks/useToast';
@@ -24,6 +25,8 @@ function SingleComment({
   const [seeMore, setSeeMore] = useState(false);
   const [newComment, setNewComment] = useState<string>('');
   const { showToast } = useToast();
+  const [isEditing, setIsEditing] = useState(false);
+  const [content, setContent] = useState(comment.content);
   const params = new URLSearchParams(window.location.search);
   const pinDetail = params.get('pinDetail');
 
@@ -68,7 +71,7 @@ function SingleComment({
     e.stopPropagation();
     try {
       // 댓글 삭제
-      await postApi(`/pins/comments/${comment.id}`);
+      await deleteApi(`/pins/comments/${comment.id}`);
       refetch();
       showToast('info', '댓글이 삭제되었습니다.');
     } catch (e) {
@@ -76,20 +79,31 @@ function SingleComment({
     }
   };
 
-  const onClickModifyBtn = async (e: React.MouseEvent<HTMLDivElement>) => {
+  const onContentChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setContent(e.target.value);
+  };
+
+  const onClickModifyConfirmBtn = async (
+    e: React.MouseEvent<HTMLButtonElement>,
+  ) => {
     e.stopPropagation();
     try {
       // 댓글 수정
       await putApi(`/pins/comments/${comment.id}`, {
-        content: newComment,
+        content,
       });
       refetch();
+      setIsEditing;
       showToast('info', '댓글이 수정되었습니다.');
     } catch (e) {
       showToast('error', '댓글을 다시 작성해주세요');
     }
   };
 
+  const onClickModifyBtn = () => {
+    setIsEditing((prev) => !prev);
+  };
+
   return (
     <CommentWrapper depth={depth} key={comment.id}>
       <Flex>
@@ -105,9 +119,18 @@ function SingleComment({
             </Text>
           </Writer>
           <Content>
-            <Text $fontSize="large" $fontWeight="normal" color="darkGray">
-              {comment.content}
-            </Text>
+            {isEditing ? (
+              <Flex>
+                <input value={content} onChange={onContentChange} />
+                <button type="button" onClick={onClickModifyConfirmBtn}>
+                  확인
+                </button>
+              </Flex>
+            ) : (
+              <Text $fontSize="large" $fontWeight="normal" color="darkGray">
+                {comment.content}
+              </Text>
+            )}
           </Content>
           <div>
             {depth === 1 ? null : (

From d29a1e5adae57200de4abf0b2d79b2d526da5d92 Mon Sep 17 00:00:00 2001
From: afds4567 <33995840+afds4567@users.noreply.github.com>
Date: Tue, 17 Oct 2023 16:33:48 +0900
Subject: [PATCH 08/14] =?UTF-8?q?refactor:=20=EC=88=98=EC=A0=95=20?=
 =?UTF-8?q?=EC=82=AD=EC=A0=9C=20=EA=B6=8C=ED=95=9C=20=EB=B0=98=EC=98=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/common/Input/SingleComment.tsx | 40 ++++++++++---------
 1 file changed, 22 insertions(+), 18 deletions(-)

diff --git a/frontend/src/components/common/Input/SingleComment.tsx b/frontend/src/components/common/Input/SingleComment.tsx
index 5a1247ee..51804b08 100644
--- a/frontend/src/components/common/Input/SingleComment.tsx
+++ b/frontend/src/components/common/Input/SingleComment.tsx
@@ -75,6 +75,7 @@ function SingleComment({
       refetch();
       showToast('info', '댓글이 삭제되었습니다.');
     } catch (e) {
+      console.error(e);
       showToast('error', '댓글을 다시 작성해주세요');
     }
   };
@@ -96,6 +97,7 @@ function SingleComment({
       setIsEditing;
       showToast('info', '댓글이 수정되었습니다.');
     } catch (e) {
+      console.error(e);
       showToast('error', '댓글을 다시 작성해주세요');
     }
   };
@@ -189,24 +191,26 @@ function SingleComment({
             </MoreReplyButton>
           )}
         </CommentInfo>
-        <Flex>
-          <Text
-            $fontSize="small"
-            color="gray"
-            $fontWeight="bold"
-            onClick={onClickModifyBtn}
-          >
-            수정
-          </Text>
-          <Text
-            $fontSize="small"
-            color="primary"
-            $fontWeight="bold"
-            onClick={onClickDeleteBtn}
-          >
-            삭제
-          </Text>
-        </Flex>
+        {comment.canChange && (
+          <Flex>
+            <Text
+              $fontSize="small"
+              color="gray"
+              $fontWeight="bold"
+              onClick={onClickModifyBtn}
+            >
+              수정
+            </Text>
+            <Text
+              $fontSize="small"
+              color="primary"
+              $fontWeight="bold"
+              onClick={onClickDeleteBtn}
+            >
+              삭제
+            </Text>
+          </Flex>
+        )}
       </Flex>
 
       {seeMore && (

From 0f2589d94e598f7cfa641f7c326c37d77cbfc503 Mon Sep 17 00:00:00 2001
From: afds4567 <33995840+afds4567@users.noreply.github.com>
Date: Tue, 17 Oct 2023 16:42:32 +0900
Subject: [PATCH 09/14] =?UTF-8?q?refactor:=20=EB=8C=93=EA=B8=80=20?=
 =?UTF-8?q?=EC=9E=AC=EC=9A=94=EC=B2=AD=20=EB=A1=9C=EC=A7=81=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

---
 frontend/src/components/common/Input/SingleComment.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/common/Input/SingleComment.tsx b/frontend/src/components/common/Input/SingleComment.tsx
index 51804b08..e42deb1a 100644
--- a/frontend/src/components/common/Input/SingleComment.tsx
+++ b/frontend/src/components/common/Input/SingleComment.tsx
@@ -72,7 +72,7 @@ function SingleComment({
     try {
       // 댓글 삭제
       await deleteApi(`/pins/comments/${comment.id}`);
-      refetch();
+      refetch(comment.id);
       showToast('info', '댓글이 삭제되었습니다.');
     } catch (e) {
       console.error(e);
@@ -93,7 +93,7 @@ function SingleComment({
       await putApi(`/pins/comments/${comment.id}`, {
         content,
       });
-      refetch();
+      refetch(comment.id);
       setIsEditing;
       showToast('info', '댓글이 수정되었습니다.');
     } catch (e) {

From 347cbc0fdc8f7e89a4ea3b57e57b4cce0e8b115d Mon Sep 17 00:00:00 2001
From: afds4567 <33995840+afds4567@users.noreply.github.com>
Date: Tue, 17 Oct 2023 17:04:06 +0900
Subject: [PATCH 10/14] =?UTF-8?q?refactor=20:=EC=88=98=EC=A0=95=20?=
 =?UTF-8?q?=EC=82=AD=EC=A0=9C=EC=8B=9C=20commentId=EC=97=90=EC=84=9C=20pin?=
 =?UTF-8?q?Id=EB=A1=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/common/Input/SingleComment.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/common/Input/SingleComment.tsx b/frontend/src/components/common/Input/SingleComment.tsx
index e42deb1a..00fac8a2 100644
--- a/frontend/src/components/common/Input/SingleComment.tsx
+++ b/frontend/src/components/common/Input/SingleComment.tsx
@@ -58,7 +58,7 @@ function SingleComment({
         },
         'application/json',
       );
-      refetch(Number(pinDetail));
+      await refetch(Number(pinDetail));
       setReplyOpen(false);
       setNewComment('');
       showToast('info', '댓글이 추가되었습니다.');
@@ -72,7 +72,7 @@ function SingleComment({
     try {
       // 댓글 삭제
       await deleteApi(`/pins/comments/${comment.id}`);
-      refetch(comment.id);
+      refetch(Number(pinDetail));
       showToast('info', '댓글이 삭제되었습니다.');
     } catch (e) {
       console.error(e);
@@ -93,7 +93,7 @@ function SingleComment({
       await putApi(`/pins/comments/${comment.id}`, {
         content,
       });
-      refetch(comment.id);
+      refetch(Number(pinDetail));
       setIsEditing;
       showToast('info', '댓글이 수정되었습니다.');
     } catch (e) {

From cdfaf48a15c4caf6ce33fa855f8866bb4fcb21ea Mon Sep 17 00:00:00 2001
From: afds4567 <33995840+afds4567@users.noreply.github.com>
Date: Tue, 17 Oct 2023 17:06:39 +0900
Subject: [PATCH 11/14] =?UTF-8?q?refactor:=20fetch=EB=A1=9C=EC=A7=81=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/common/Input/SingleComment.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/common/Input/SingleComment.tsx b/frontend/src/components/common/Input/SingleComment.tsx
index 00fac8a2..ce648e8d 100644
--- a/frontend/src/components/common/Input/SingleComment.tsx
+++ b/frontend/src/components/common/Input/SingleComment.tsx
@@ -72,7 +72,7 @@ function SingleComment({
     try {
       // 댓글 삭제
       await deleteApi(`/pins/comments/${comment.id}`);
-      refetch(Number(pinDetail));
+      await refetch(Number(pinDetail));
       showToast('info', '댓글이 삭제되었습니다.');
     } catch (e) {
       console.error(e);
@@ -93,7 +93,7 @@ function SingleComment({
       await putApi(`/pins/comments/${comment.id}`, {
         content,
       });
-      refetch(Number(pinDetail));
+      await refetch(Number(pinDetail));
       setIsEditing;
       showToast('info', '댓글이 수정되었습니다.');
     } catch (e) {

From 2a931db79f683ba17fb705946e4c718f2715d7a3 Mon Sep 17 00:00:00 2001
From: afds4567 <33995840+afds4567@users.noreply.github.com>
Date: Tue, 17 Oct 2023 17:12:57 +0900
Subject: [PATCH 12/14] =?UTF-8?q?refactor:=20=EC=97=90=EB=9F=AC=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/common/Input/ReplyComment.tsx  | 8 +++++++-
 frontend/src/components/common/Input/SingleComment.tsx | 3 ++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/common/Input/ReplyComment.tsx b/frontend/src/components/common/Input/ReplyComment.tsx
index bd76e116..de1ba2d9 100644
--- a/frontend/src/components/common/Input/ReplyComment.tsx
+++ b/frontend/src/components/common/Input/ReplyComment.tsx
@@ -1,6 +1,11 @@
 import SingleComment from './SingleComment';
 
-function ReplyComment({ commentList, pageTotalCommentList, depth }: any) {
+function ReplyComment({
+  commentList,
+  pageTotalCommentList,
+  depth,
+  refetch,
+}: any) {
   if (depth === 2) return null;
   return (
     <>
@@ -12,6 +17,7 @@ function ReplyComment({ commentList, pageTotalCommentList, depth }: any) {
               commentList={commentList}
               totalList={pageTotalCommentList}
               depth={depth}
+              refetch={refetch}
             />
           </>
         ))}
diff --git a/frontend/src/components/common/Input/SingleComment.tsx b/frontend/src/components/common/Input/SingleComment.tsx
index ce648e8d..3b1a655b 100644
--- a/frontend/src/components/common/Input/SingleComment.tsx
+++ b/frontend/src/components/common/Input/SingleComment.tsx
@@ -94,7 +94,7 @@ function SingleComment({
         content,
       });
       await refetch(Number(pinDetail));
-      setIsEditing;
+      setIsEditing(false);
       showToast('info', '댓글이 수정되었습니다.');
     } catch (e) {
       console.error(e);
@@ -219,6 +219,7 @@ function SingleComment({
           parentId={comment.id}
           pageTotalCommentList={totalList}
           depth={depth + 1}
+          refetch={refetch}
         />
       )}
     </CommentWrapper>

From 994e904885a98480baef6c01e84d2495c878c36f Mon Sep 17 00:00:00 2001
From: afds4567 <33995840+afds4567@users.noreply.github.com>
Date: Tue, 17 Oct 2023 17:35:37 +0900
Subject: [PATCH 13/14] =?UTF-8?q?refactor:=20default=20prod=20url=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/constants/index.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/constants/index.ts b/frontend/src/constants/index.ts
index a2135671..ca04016c 100644
--- a/frontend/src/constants/index.ts
+++ b/frontend/src/constants/index.ts
@@ -9,4 +9,5 @@ export const DEFAULT_TOPIC_IMAGE =
 export const DEFAULT_PROFILE_IMAGE =
   'https://dr702blqc4x5d.cloudfront.net/2023-map-be-fine/icon/profile_defaultImage.svg';
 
-export const DEFAULT_PROD_URL = process.env.APP_URL || 'http://localhost:8080';
+export const DEFAULT_PROD_URL =
+  process.env.APP_URL || 'https://mapbefine.kro.kr/api';

From 334005804a2a0fc90cef789c47b2d4085a697f7e Mon Sep 17 00:00:00 2001
From: afds4567 <33995840+afds4567@users.noreply.github.com>
Date: Thu, 19 Oct 2023 11:02:44 +0900
Subject: [PATCH 14/14] =?UTF-8?q?refactor:=20=EB=A6=AC=EB=B7=B0=20?=
 =?UTF-8?q?=EB=B0=98=EC=98=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/common/Input/ReplyComment.tsx  |  11 +-
 .../components/common/Input/SingleComment.tsx | 155 +++++++++---------
 frontend/src/pages/PinDetail.tsx              |  81 +++++----
 frontend/src/pages/UpdatedPinDetail.tsx       |  23 +--
 frontend/src/types/Comment.ts                 |   9 +
 5 files changed, 138 insertions(+), 141 deletions(-)
 create mode 100644 frontend/src/types/Comment.ts

diff --git a/frontend/src/components/common/Input/ReplyComment.tsx b/frontend/src/components/common/Input/ReplyComment.tsx
index de1ba2d9..f40065d2 100644
--- a/frontend/src/components/common/Input/ReplyComment.tsx
+++ b/frontend/src/components/common/Input/ReplyComment.tsx
@@ -1,16 +1,23 @@
 import SingleComment from './SingleComment';
 
+interface ReplyCommentProps {
+  commentList: Comment[];
+  pageTotalCommentList: Comment[];
+  depth: number;
+  refetch: (pinId: number) => Promise<Comment[]>;
+}
+
 function ReplyComment({
   commentList,
   pageTotalCommentList,
   depth,
   refetch,
-}: any) {
+}: ReplyCommentProps) {
   if (depth === 2) return null;
   return (
     <>
       {commentList.length > 0 &&
-        commentList.map((comment: string) => (
+        commentList.map((comment) => (
           <>
             <SingleComment
               comment={comment}
diff --git a/frontend/src/components/common/Input/SingleComment.tsx b/frontend/src/components/common/Input/SingleComment.tsx
index 3b1a655b..c8fb143f 100644
--- a/frontend/src/components/common/Input/SingleComment.tsx
+++ b/frontend/src/components/common/Input/SingleComment.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 import { useState } from 'react';
 import styled from 'styled-components';
@@ -6,15 +7,15 @@ import { deleteApi } from '../../../apis/deleteApi';
 import { postApi } from '../../../apis/postApi';
 import { putApi } from '../../../apis/putApi';
 import useToast from '../../../hooks/useToast';
+import { ConfirmCommentButton, CustomInput } from '../../../pages/PinDetail';
+import Flex from '../Flex';
 import Text from '../Text';
 import ReplyComment from './ReplyComment';
 
-const userToken = localStorage?.getItem('userToken');
 const localStorageUser = localStorage?.getItem('user');
 const user = JSON.parse(localStorageUser || '{}');
 //  { 댓글, 댓글목록, 전체목록, depth = 0 }
 function SingleComment({
-  pinId,
   comment,
   commentList,
   totalList,
@@ -108,109 +109,117 @@ function SingleComment({
 
   return (
     <CommentWrapper depth={depth} key={comment.id}>
-      <Flex>
+      <Flex $gap="12px">
         <ProfileImage
           src={comment.creatorImageUrl}
           width="40px"
           height="40px"
         />
         <CommentInfo>
-          <Writer>
-            <Text $fontSize="default" $fontWeight="bold" color="black">
-              @{comment.creator}
-            </Text>
-          </Writer>
+          <Flex $justifyContent="space-between">
+            <div>
+              <Writer>
+                <Text $fontSize="default" $fontWeight="bold" color="black">
+                  @{comment.creator}
+                </Text>
+              </Writer>
+            </div>
+            {comment.canChange && (
+              <Flex $gap="8px" cursor="pointer">
+                <Text
+                  $fontSize="small"
+                  color="gray"
+                  $fontWeight="bold"
+                  onClick={onClickModifyBtn}
+                >
+                  수정
+                </Text>
+                <Text
+                  $fontSize="small"
+                  color="primary"
+                  $fontWeight="bold"
+                  onClick={onClickDeleteBtn}
+                >
+                  삭제
+                </Text>
+              </Flex>
+            )}
+          </Flex>
           <Content>
             {isEditing ? (
-              <Flex>
-                <input value={content} onChange={onContentChange} />
-                <button type="button" onClick={onClickModifyConfirmBtn}>
-                  확인
-                </button>
-              </Flex>
+              <div
+                style={{ width: '100%', display: 'flex', marginTop: '12px' }}
+              >
+                <CustomInput
+                  value={content}
+                  onChange={onContentChange}
+                  placeholder="댓글 수정"
+                />
+                <ConfirmCommentButton
+                  variant="secondary"
+                  style={{ width: '60px', padding: '4px 12px' }}
+                  // type="button"
+                  onClick={onClickModifyConfirmBtn}
+                >
+                  등록
+                </ConfirmCommentButton>
+              </div>
             ) : (
-              <Text $fontSize="large" $fontWeight="normal" color="darkGray">
+              <Text $fontSize="default" $fontWeight="normal" color="darkGray">
                 {comment.content}
               </Text>
             )}
           </Content>
           <div>
             {depth === 1 ? null : (
-              <button type="button" onClick={toggleReplyOpen}>
-                답글남기기
-              </button>
-            )}
-            {replyOpen && (
               <div
-                style={{ display: 'flex', marginBottom: '20px', gap: '12px' }}
+                onClick={toggleReplyOpen}
+                style={{ cursor: 'pointer', marginBottom: '8px' }}
               >
+                <Text color="black" $fontSize="small" $fontWeight="bold">
+                  답글 작성
+                </Text>
+              </div>
+            )}
+            {replyOpen && (
+              <div style={{ display: 'flex', gap: '12px' }}>
                 <ProfileImage
                   src={user?.imageUrl || ''}
                   width="40px"
                   height="40px"
                 />
                 <div style={{ width: '100%' }}>
-                  <input
-                    style={{
-                      width: '100%',
-                      borderTop: 'none',
-                      borderLeft: 'none',
-                      borderRight: 'none',
-                      fontSize: '16px',
-                    }}
+                  <CustomInput
                     value={newComment}
                     onChange={(e: any) => setNewComment(e.target.value)}
                     placeholder="댓글 추가"
                     // onClick={toggleReplyOpen}
                   />
-                  <button
-                    style={{
-                      marginTop: '12px',
-                      float: 'right',
-                      width: '40px',
-                      fontSize: '12px',
-                    }}
-                    type="button"
+                  <ConfirmCommentButton
+                    variant="secondary"
+                    style={{}}
+                    // type="button"
                     onClick={onClickCommentBtn}
                   >
                     등록
-                  </button>
-
-                  {/* {replyOpen && (
-            <form>
-              <input />
-            </form>
-          )} */}
+                  </ConfirmCommentButton>
                 </div>
               </div>
             )}
           </div>
           {replyCount > 0 && (
-            <MoreReplyButton onClick={toggleSeeMore}>
-              {seeMore ? '\u25B2' : '\u25BC'} 답글 {replyCount}개
-            </MoreReplyButton>
+            <Flex>
+              <ProfileImage
+                src={replyList[0].creatorImageUrl || ''}
+                width="28px"
+                height="28px"
+              />
+              <MoreReplyButton onClick={toggleSeeMore}>
+                {seeMore ? '\u25B2' : '\u25BC'} 답글 {replyCount}개
+              </MoreReplyButton>
+            </Flex>
           )}
         </CommentInfo>
-        {comment.canChange && (
-          <Flex>
-            <Text
-              $fontSize="small"
-              color="gray"
-              $fontWeight="bold"
-              onClick={onClickModifyBtn}
-            >
-              수정
-            </Text>
-            <Text
-              $fontSize="small"
-              color="primary"
-              $fontWeight="bold"
-              onClick={onClickDeleteBtn}
-            >
-              삭제
-            </Text>
-          </Flex>
-        )}
       </Flex>
 
       {seeMore && (
@@ -229,24 +238,20 @@ function SingleComment({
 export default SingleComment;
 
 const CommentWrapper = styled.li<{ depth: number }>`
-  width: 100%;
   margin-left: ${(props) => props.depth * 20}px;
+  margin-top: 12px;
   list-style: none;
 `;
 
-const Flex = styled.div`
-  display: flex;
-  gap: 12px;
-  margin-bottom: 24px;
-`;
-
 export const ProfileImage = styled.img`
   display: block;
 
   border-radius: 50%;
 `;
 
-const CommentInfo = styled.div``;
+const CommentInfo = styled.div`
+  flex: 1;
+`;
 
 const Writer = styled.div`
   white-space: nowrap;
diff --git a/frontend/src/pages/PinDetail.tsx b/frontend/src/pages/PinDetail.tsx
index c72a0a96..1ae547da 100644
--- a/frontend/src/pages/PinDetail.tsx
+++ b/frontend/src/pages/PinDetail.tsx
@@ -20,6 +20,7 @@ import { ModalContext } from '../context/ModalContext';
 import useCompressImage from '../hooks/useCompressImage';
 import useFormValues from '../hooks/useFormValues';
 import useToast from '../hooks/useToast';
+import theme from '../themes';
 import { ModifyPinFormProps } from '../types/FormValues';
 import { PinProps } from '../types/Pin';
 import UpdatedPinDetail from './UpdatedPinDetail';
@@ -41,11 +42,9 @@ function PinDetail({
   isEditPinDetail,
   setIsEditPinDetail,
 }: PinDetailProps) {
-  console.log(user);
-
   const [searchParams, setSearchParams] = useSearchParams();
   const [pin, setPin] = useState<PinProps | null>(null);
-  const [commentList, setCommentList] = useState<any[]>([]); // 댓글 리스트
+  const [commentList, setCommentList] = useState<Comment[]>([]); // 댓글 리스트
   const [newComment, setNewComment] = useState<string>('');
   const { showToast } = useToast();
   const {
@@ -131,7 +130,7 @@ function PinDetail({
 
   // 댓글 구현 부분
   const setCurrentPageCommentList = async (pinId: number) => {
-    const data: any[] = await getApi(`/pins/comments/${pinId}`);
+    const data = await getApi<Comment[]>(`/pins/${pinId}/comments`);
     setCommentList(data);
     return data;
   };
@@ -239,50 +238,32 @@ function PinDetail({
       {/*  Comment Section */}
 
       <Text color="black" $fontSize="large" $fontWeight="bold">
-        댓글{' '}
+        어떻게 생각하나요?{' '}
       </Text>
       <Space size={1} />
       {userToken && (
         <div style={{ display: 'flex', marginBottom: '20px', gap: '12px' }}>
           <ProfileImage src={user?.imageUrl || ''} width="40px" height="40px" />
-          <div style={{ width: '100%' }}>
-            <input
-              style={{
-                width: '100%',
-                borderTop: 'none',
-                borderLeft: 'none',
-                borderRight: 'none',
-                fontSize: '16px',
-              }}
+          <div style={{ width: '100%', marginTop: '12px' }}>
+            <CustomInput
               value={newComment}
-              onChange={(e: any) => setNewComment(e.target.value)}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                setNewComment(e.target.value)
+              }
               placeholder="댓글 추가"
-              // onClick={toggleReplyOpen}
             />
-            <button
-              style={{
-                marginTop: '12px',
-                float: 'right',
-                width: '40px',
-                fontSize: '12px',
-              }}
-              type="button"
+            <ConfirmCommentButton
+              variant="secondary"
               onClick={onClickCommentBtn}
             >
               등록
-            </button>
-
-            {/* {replyOpen && (
-            <form>
-              <input />
-            </form>
-          )} */}
+            </ConfirmCommentButton>
           </div>
         </div>
       )}
       {commentList?.length > 0 &&
         commentList.map(
-          (comment: any) =>
+          (comment) =>
             !comment.parentPinCommentId ? (
               <SingleComment
                 key={comment.id}
@@ -295,15 +276,7 @@ function PinDetail({
             ) : null, // <-- comment.parentPinCommentId가 존재하는 경우 null 반환
         )}
       {/* comment section END */}
-      <ButtonsWrapper>
-        <SaveToMyMapButton variant="primary" onClick={openModalWithToken}>
-          내 지도에 저장하기
-        </SaveToMyMapButton>
-        <Space size={3} />
-        <ShareButton variant="secondary" onClick={copyContent}>
-          공유하기
-        </ShareButton>
-      </ButtonsWrapper>
+
       <Space size={8} />
       <Modal
         modalKey="addToMyTopicList"
@@ -394,7 +367,7 @@ const ButtonsWrapper = styled.div`
   align-items: center;
   width: 332px;
   height: 48px;
-  margin: 0 auto;
+  margin: 24px auto 0;
 `;
 
 const ImageInputLabel = styled.label`
@@ -416,4 +389,28 @@ const ImageInputButton = styled.input`
   display: none;
 `;
 
+export const CustomInput = styled.input`
+  width: 100%;
+  border-top: none;
+  border-left: none;
+  border-right: none;
+  border-bottom: 2px solid ${theme.color.lightGray};
+  font-size: 16px;
+
+  &:focus {
+    outline: none;
+    border-bottom: 2px solid ${theme.color.black};
+  }
+`;
+
+export const ConfirmCommentButton = styled(Button)`
+  font-size: ${({ theme }) => theme.fontSize.extraSmall};
+  font-weight: ${({ theme }) => theme.fontWeight.bold};
+
+  box-shadow: 8px 8px 8px 0px rgba(69, 69, 69, 0.15);
+
+  margin-top: 12px;
+  float: right;
+  font-size: 12px;
+`;
 export default PinDetail;
diff --git a/frontend/src/pages/UpdatedPinDetail.tsx b/frontend/src/pages/UpdatedPinDetail.tsx
index 71edf779..46069be7 100644
--- a/frontend/src/pages/UpdatedPinDetail.tsx
+++ b/frontend/src/pages/UpdatedPinDetail.tsx
@@ -73,27 +73,6 @@ function UpdatedPinDetail({
 
   return (
     <Wrapper>
-      <Flex
-        width="100%"
-        height="180px"
-        $backgroundColor="gray"
-        $alignItems="center"
-        $justifyContent="center"
-        $flexDirection="column"
-        padding={7}
-        $borderRadius="small"
-      >
-        <Space size={1} />
-        <Text
-          color="white"
-          $fontSize="default"
-          $fontWeight="normal"
-          $textAlign="center"
-        >
-          + 사진을 추가해주시면 더 알찬 정보를 제공해줄 수 있을 것 같아요.
-        </Text>
-      </Flex>
-
       <Space size={5} />
 
       <InputContainer
@@ -145,7 +124,7 @@ function UpdatedPinDetail({
 
 const Wrapper = styled.div`
   margin: 0 auto;
-
+  width: 100%;
   @media (max-width: 1076px) {
     width: calc(50vw - 40px);
   }
diff --git a/frontend/src/types/Comment.ts b/frontend/src/types/Comment.ts
new file mode 100644
index 00000000..bc6c5d1f
--- /dev/null
+++ b/frontend/src/types/Comment.ts
@@ -0,0 +1,9 @@
+interface Comment {
+  id: number;
+  content: string;
+  creator: string;
+  creatorImageUrl: string;
+  parentPinCommentId: number | null;
+  canChange: boolean;
+  updatedAt: String;
+}