Merge pull request #927 from sopt-makers/develop

프로덕션 배포

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.1",
+    "@sopt-makers/colors": "^3.0.2",
     "@sopt-makers/fonts": "^2.0.1",
     "@sopt-makers/icons": "^1.0.5",
     "@sopt-makers/playground-common": "^1.5.2",
-    "@sopt-makers/ui": "^2.3.1",
+    "@sopt-makers/ui": "^2.4.2",
     "@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,13 +19,16 @@ 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,8 +135,6 @@ export default function PostPage() {
       !!comment
   );
 
-  console.log({ comments });
-
   const handleClickComment = () => {
     const refCurrent = commentRef.current;
     if (refCurrent) {

src/api/post/hooks.ts

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

src/components/feed/FeedCommentContainer/FeedCommentContainer.tsx

@@ -27,6 +27,9 @@ 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;
@@ -108,7 +111,7 @@ export default function FeedCommentContainer({
             isMine
               ? [
                   <FeedActionButton onClick={() => setEditMode(true)}>
-                    <IconWrite />
+                    <ReWriteIcon />
                     수정
                   </FeedActionButton>,
                   <FeedActionButton
@@ -129,7 +132,7 @@ export default function FeedCommentContainer({
                       ))
                     }
                   >
-                    <IconTrash />
+                    <TrashIcon />
                     삭제
                   </FeedActionButton>,
                 ]
@@ -152,7 +155,7 @@ export default function FeedCommentContainer({
                       ))
                     }
                   >
-                    <IconAlertCircle />
+                    <AlertIcon />
                     신고
                   </FeedActionButton>,
                 ]

src/components/feed/FeedCommentViewer/FeedCommentViewer.tsx

@@ -1,6 +1,6 @@
 import { paths } from '@/__generated__/schema2';
-import LikeHoverIcon from '@assets/svg/like_hover.svg';
-import MessageIcon from '@assets/svg/message-dots.svg?v2';
+import LikeHoverIcon from '@assets/svg/like_hover_in_comment.svg';
+import MessageIcon from '@assets/svg/message-dots.svg';
 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?v2';
-import LikeIcon from 'public/assets/svg/like_in_comment.svg?v2';
+import LikeFillIcon from 'public/assets/svg/like_fill_in_comment.svg';
+import LikeIcon from 'public/assets/svg/like_in_comment.svg';
 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>
-        {isMine && (
-          <Menu as="div" style={{ position: 'relative' }}>
-            <Menu.Button>
-              <MenuIcon />
-            </Menu.Button>
-            <MenuItems>
-              {Actions.map((Action, index) => (
+        <Menu as="div" style={{ position: 'relative' }}>
+          <Menu.Button>
+            <MenuIcon />
+          </Menu.Button>
+          <MenuItems>
+            {Actions.map((Action, index) => (
+              <SMenuItemContainer>
                 <Menu.Item key={index}>{Action}</Menu.Item>
-              ))}
-            </MenuItems>
-          </Menu>
-        )}
+              </SMenuItemContainer>
+            ))}
+          </MenuItems>
+        </Menu>
       </CommentHeader>
 
       <CommentBody>
@@ -134,8 +134,31 @@ const Date = styled('span', {
 });
 const MenuItems = styled(Menu.Items, {
   position: 'absolute',
-  top: 0,
-  right: '100%', // TODO: design 체크 필요
+  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',
+  },
 });
 const CommentBody = styled('div', {
   paddingLeft: '40px',

src/components/form/Presentation/JoinablePartsField/index.tsx

@@ -0,0 +1,59 @@
+import { Option } from '@components/form/Select/OptionItem';
+import { parts } from '@data/options';
+import { Chip } from '@sopt-makers/ui';
+
+interface JoinablePartsFieldProps {
+  value: Option[];
+  onChange: (newSelectedParts: Option[]) => void;
+}
+
+const JoinablePartsField = ({ value, onChange }: JoinablePartsFieldProps) => {
+  const handleClick = (selectedOption: Option) => {
+    const isValidValue = Array.isArray(value);
+    let updatedParts = isValidValue ? [...value] : [];
+
+    // 'all' 옵션을 클릭했을 때 처리
+    if (selectedOption.value === 'all') {
+      // 전체 옵션이 이미 선택되어 있으면 해제, 아니면 전체 선택
+      updatedParts = isValidValue && value.some(part => part.value === 'all') ? [] : parts;
+    } else {
+      // 개별 옵션을 선택할 때
+      if (isValidValue && value.some(part => part.value === selectedOption.value)) {
+        // 이미 선택된 항목이면 해제
+        updatedParts = updatedParts.filter(part => part.value !== selectedOption.value);
+      } else {
+        // 선택되지 않은 항목이면 추가
+        updatedParts.push(selectedOption);
+      }
+
+      // 개별 옵션 해제 시 전체 옵션도 해제
+      if (updatedParts.some(part => part.value === 'all') && updatedParts.length < parts.length) {
+        updatedParts = updatedParts.filter(part => part.value !== 'all');
+      }
+
+      // 모든 개별 파트가 선택되었으면 'all' 옵션도 활성화
+      if (updatedParts.length === parts.length - 1) {
+        updatedParts.push(parts[0]); // 'all'을 활성화
+      }
+    }
+
+    onChange(updatedParts);
+  };
+
+  return (
+    <>
+      {parts.map(part => (
+        <Chip
+          active={Array.isArray(value) && value.some(selected => selected.value === part.value)}
+          onClick={() => handleClick(part)}
+          key={part.value}
+          style={{ width: '80px' }}
+        >
+          {part.label}
+        </Chip>
+      ))}
+    </>
+  );
+};
+
+export default JoinablePartsField;