Revert "Merge pull request #927 from sopt-makers/develop"

This reverts commit 2a96eb7, reversing
changes made to 3de2624.

package.json

@@ -27,11 +27,11 @@
     "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-popover": "^1.1.1",
     "@sentry/nextjs": "^7.51.0",
-    "@sopt-makers/colors": "^3.0.2",
+    "@sopt-makers/colors": "^3.0.1",
     "@sopt-makers/fonts": "^2.0.1",
     "@sopt-makers/icons": "^1.0.5",
     "@sopt-makers/playground-common": "^1.5.2",
-    "@sopt-makers/ui": "^2.4.2",
+    "@sopt-makers/ui": "^2.3.1",
     "@stitches/react": "^1.2.8",
     "@tanstack/react-query": "^4.10.3",
     "@types/autosize": "^4.0.3",
@@ -93,4 +93,4 @@
   "workspaces": [
     "packages/*"
   ]
-}
+}

pages/_app.tsx

@@ -19,16 +19,13 @@ import '../styles/globals.css';
 import '@sopt-makers/ui/dist/index.css';
 import { DialogProvider, ToastProvider } from '@sopt-makers/ui';
 import { MentionProvider } from '@components/feed/Mention/MentionContext';
-import { globalStyles } from 'styles/globals';
 
 // 리액트 하이드레이션 에러를 피하기 위해 사용. 렌더링에 관여하지 않는 코드여서 if 문으로 분기처리
 if (typeof window !== 'undefined') {
   setAccessTokens();
 }
 
 function MyApp({ Component, pageProps }: AppProps) {
-  globalStyles();
-
   const [queryClient] = React.useState(
     () =>
       new QueryClient({

pages/post/index.tsx

@@ -135,6 +135,8 @@ export default function PostPage() {
       !!comment
   );
 
+  console.log({ comments });
+
   const handleClickComment = () => {
     const refCurrent = commentRef.current;
     if (refCurrent) {

src/api/post/hooks.ts

@@ -70,7 +70,9 @@ export const useQueryGetPost = (postId: string) => {
   });
 };
 
-type postType = paths['/post/v2/{postId}']['get']['responses']['200']['content']['application/json;charset=UTF-8'];
+type postType = {
+  data: paths['/post/v2/{postId}']['get']['responses']['200']['content']['application/json;charset=UTF-8'];
+};
 
 export const useMutationPostLike = (queryId: string) => {
   const queryClient = useQueryClient();
@@ -81,11 +83,13 @@ export const useMutationPostLike = (queryId: string) => {
     onMutate: async () => {
       const previousPost = queryClient.getQueryData(['getPost', queryId]) as postType;
 
-      const newLikeCount = previousPost.isLiked ? previousPost.likeCount - 1 : previousPost.likeCount + 1;
+      const newLikeCount = previousPost.data.isLiked
+        ? previousPost.data.likeCount && previousPost.data.likeCount - 1
+        : previousPost.data.likeCount && previousPost.data.likeCount + 1;
 
       const data = produce(previousPost, (draft: postType) => {
-        draft.isLiked = !previousPost.isLiked;
-        draft.likeCount = newLikeCount;
+        draft.data.isLiked = !previousPost.data.isLiked;
+        draft.data.likeCount = newLikeCount;
       });
 
       queryClient.setQueryData(['getPost', queryId], data);

src/components/feed/FeedCommentContainer/FeedCommentContainer.tsx

@@ -27,9 +27,6 @@ import { useToast } from '@sopt-makers/ui';
 import CommentBlocker from '@components/blocker/CommentBlocker';
 import { IconTrash, IconWrite } from '@sopt-makers/icons';
 import { IconAlertCircle } from '@sopt-makers/icons';
-import ReWriteIcon from '@assets/svg/comment-write.svg';
-import TrashIcon from '@assets/svg/trash.svg';
-import AlertIcon from '@assets/svg/alert-triangle.svg';
 interface FeedCommentContainerProps {
   comment: paths['/comment/v2']['get']['responses']['200']['content']['application/json;charset=UTF-8']['comments'][number];
   isMine: boolean;
@@ -111,7 +108,7 @@ export default function FeedCommentContainer({
             isMine
               ? [
                   <FeedActionButton onClick={() => setEditMode(true)}>
-                    <ReWriteIcon />
+                    <IconWrite />
                     수정
                   </FeedActionButton>,
                   <FeedActionButton
@@ -132,7 +129,7 @@ export default function FeedCommentContainer({
                       ))
                     }
                   >
-                    <TrashIcon />
+                    <IconTrash />
                     삭제
                   </FeedActionButton>,
                 ]
@@ -155,7 +152,7 @@ export default function FeedCommentContainer({
                       ))
                     }
                   >
-                    <AlertIcon />
+                    <IconAlertCircle />
                     신고
                   </FeedActionButton>,
                 ]

src/components/feed/FeedCommentViewer/FeedCommentViewer.tsx

@@ -1,6 +1,6 @@
 import { paths } from '@/__generated__/schema2';
-import LikeHoverIcon from '@assets/svg/like_hover_in_comment.svg';
-import MessageIcon from '@assets/svg/message-dots.svg';
+import LikeHoverIcon from '@assets/svg/like_hover.svg';
+import MessageIcon from '@assets/svg/message-dots.svg?v2';
 import ReCommentHoverIcon from '@assets/svg/Recomment_Hover_Icon.svg';
 import Avatar from '@components/avatar/Avatar';
 import { playgroundURL } from '@constants/url';
@@ -10,8 +10,8 @@ import { fontsObject } from '@sopt-makers/fonts';
 import { playgroundLink } from '@sopt-makers/playground-common';
 import { fromNow } from '@utils/dayjs';
 import MenuIcon from 'public/assets/svg/ic_menu.svg';
-import LikeFillIcon from 'public/assets/svg/like_fill_in_comment.svg';
-import LikeIcon from 'public/assets/svg/like_in_comment.svg';
+import LikeFillIcon from 'public/assets/svg/like_fill_in_comment.svg?v2';
+import LikeIcon from 'public/assets/svg/like_in_comment.svg?v2';
 import React, { useContext } from 'react';
 import { styled } from 'stitches.config';
 import { MentionContext } from '../Mention/MentionContext';
@@ -62,18 +62,18 @@ export default function FeedCommentViewer({
           </Name>
           <Date>{fromNow(comment.createdDate)}</Date>
         </AuthorWrapper>
-        <Menu as="div" style={{ position: 'relative' }}>
-          <Menu.Button>
-            <MenuIcon />
-          </Menu.Button>
-          <MenuItems>
-            {Actions.map((Action, index) => (
-              <SMenuItemContainer>
+        {isMine && (
+          <Menu as="div" style={{ position: 'relative' }}>
+            <Menu.Button>
+              <MenuIcon />
+            </Menu.Button>
+            <MenuItems>
+              {Actions.map((Action, index) => (
                 <Menu.Item key={index}>{Action}</Menu.Item>
-              </SMenuItemContainer>
-            ))}
-          </MenuItems>
-        </Menu>
+              ))}
+            </MenuItems>
+          </Menu>
+        )}
       </CommentHeader>
 
       <CommentBody>
@@ -134,31 +134,8 @@ const Date = styled('span', {
 });
 const MenuItems = styled(Menu.Items, {
   position: 'absolute',
-  top: '35px', // TODO: design 체크 필요
-  right: '0', // TODO: design 체크 필요
-  padding: '8px',
-  borderRadius: '13px',
-  display: 'flex',
-  flexDirection: 'column',
-  gap: '6px',
-  background: '$gray800',
-});
-const SMenuItemContainer = styled('div', {
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  width: '80px',
-  background: '$gray800',
-
-  '&:hover': {
-    background: '$gray700',
-    borderRadius: '$8',
-  },
-
-  '&:active': {
-    background: '$gray600',
-    borderRadius: '$8',
-  },
+  top: 0,
+  right: '100%', // TODO: design 체크 필요
 });
 const CommentBody = styled('div', {
   paddingLeft: '40px',