wip

AboutClan · Nov 10, 2024 · d1957b2 · d1957b2
1 parent dbe2539
commit d1957b2
Show file tree

Hide file tree

Showing 23 changed files with 356 additions and 255 deletions.
diff --git a/components/BottomNav.tsx b/components/BottomNav.tsx
@@ -7,6 +7,7 @@ import styled from "styled-components";
 
 import { useHandleMove } from "../@natives/useHandleBottomNav";
 import { USER_LOCATION } from "../constants/keys/localStorage";
+import { useTypeToast } from "../hooks/custom/CustomToast";
 import { getStudyStandardDate } from "../libs/study/date/getStudyStandardDate";
 import { slideDirectionState } from "../recoils/navigationRecoils";
 import { ActiveLocation } from "../types/services/locationTypes";
@@ -69,12 +70,24 @@ export default function BottomNav() {
 }
 
 function NavButton({ text, url, activeIcon, defaultIcon, isActive, idx }: INavButton) {
+  const { data: session } = useSession();
+  const typeToast = useTypeToast();
+  const isGuest = session?.user.role === "guest";
   const setSlideDirection = useSetRecoilState(slideDirectionState);
   const handleMove = useHandleMove(setSlideDirection);
 
+  const onClick = (e) => {
+    if (isGuest && text === "스터디") {
+      e.preventDefault();
+      typeToast("guest");
+      return;
+    }
+    handleMove();
+  };
+
   return (
     <NavLink
-      onClick={handleMove}
+      onClick={onClick}
       href={url}
       isactive={isActive.toString() as "true" | "false"}
       replace={!text}

diff --git a/components/atoms/BottomCommentInput.tsx b/components/atoms/BottomCommentInput.tsx
@@ -0,0 +1,41 @@
+import { Box } from "@chakra-ui/react";
+
+import { SECRET_USER_SUMMARY } from "../../constants/serviceConstants/userConstants";
+import { useKeypadHeight } from "../../hooks/custom/useKeypadHeight";
+import { iPhoneNotchSize } from "../../utils/validationUtils";
+import UserCommentInput from "../molecules/UserCommentInput";
+
+interface BottomCommentInputProps {
+  onSubmit: (value: string) => void;
+  type?: "comment" | "message";
+  replyName: string;
+}
+
+function BottomCommentInput({ onSubmit, type = "comment", replyName }: BottomCommentInputProps) {
+  const keypadHeight = useKeypadHeight();
+
+  return (
+    <Box
+      position="fixed"
+      borderTop="var(--border)"
+      bottom="0"
+      flex={1}
+      w="100%"
+      backgroundColor="white"
+      maxW="var(--max-width)"
+      pb={`${keypadHeight === 0 ? iPhoneNotchSize() : 0}px`}
+    >
+      <Box py={2} borderBottom="var(--border)" px={5}>
+        <UserCommentInput
+          user={SECRET_USER_SUMMARY}
+          onSubmit={onSubmit}
+          type={type}
+          replyName={replyName}
+
+        />
+      </Box>
+    </Box>
+  );
+}
+
+export default BottomCommentInput;
diff --git a/components/atoms/buttons/MenuButton.tsx b/components/atoms/buttons/MenuButton.tsx
@@ -22,12 +22,17 @@ function MenuButton({ menuArr }: MenuButtonProps) {
         <>
           <ChakraMenuButton isActive={isOpen} as={Button} variant="unstyled">
             <ButtonWrapper>
-              <EllipsisIcon />
+              <EllipsisIcon size="md" />
             </ButtonWrapper>
           </ChakraMenuButton>
           <MenuList fontSize="14px">
             {menuArr.map((menu) => (
-              <MenuItem key={menu?.text || "kakao"} onClick={menu?.func} bg="white">
+              <MenuItem
+                as={menu?.kakaoOptions ? "div" : "button"}
+                key={menu?.text || "kakao"}
+                onClick={menu?.func}
+                bg="white"
+              >
                 {menu?.text}
                 {menu?.kakaoOptions && <KakaoShareBtn variant="unstyled" {...menu.kakaoOptions} />}
               </MenuItem>

diff --git a/components/molecules/BlurredLink.tsx b/components/molecules/BlurredLink.tsx
@@ -11,15 +11,15 @@ interface BlurredLinkProps {
 function BlurredLink({ isBlur, url }: BlurredLinkProps) {
   return (
     <BlurredPart isBlur={isBlur} isCenter={false}>
-      <CustomExternalLink color="var(--color-blue)" href={url} isBlur={isBlur}>
+      <CustomExternalLink color="var(--color-blue)" href={url} isblur={isBlur ? "true" : "false"}>
         {url}
       </CustomExternalLink>
     </BlurredPart>
   );
 }
 
-const CustomExternalLink = styled(ExternalLink)<{ isBlur: boolean }>`
-  pointer-events: ${({ isBlur }) => (isBlur ? "none" : "unset")};
+const CustomExternalLink = styled(ExternalLink)<{ isblur: "true" | "false" }>`
+  pointer-events: ${({ isblur }) => (isblur === "true" ? "none" : "unset")};
 `;
 
 export default BlurredLink;
diff --git a/components/molecules/CommentSection.tsx b/components/molecules/CommentSection.tsx
@@ -1,4 +1,5 @@
 import { Box } from "@chakra-ui/react";
+
 import { UserCommentProps } from "../../types/components/propTypes";
 import UserCommentBlock from "./UserCommentBlock";
 
@@ -7,13 +8,20 @@ interface CommentSectionProps {
   id: string;
 }
 
-function CommentSection({commentArr,id}: CommentSectionProps) {
+function CommentSection({ commentArr, id }: CommentSectionProps) {
   return (
     <>
-      <Box color="gray.600" fontSize="13px" lineHeight="20px" pb={3} borderBottom="var(--border)">
+      <Box
+        px={5}
+        color="gray.600"
+        fontSize="13px"
+        lineHeight="20px"
+        pb={3}
+        borderBottom="var(--border)"
+      >
         댓글 <b>22개</b>
       </Box>
-      {commentArr.map((comment,idx) => (
+      {commentArr.map((comment, idx) => (
         <UserCommentBlock
           key={idx}
           type="group"
@@ -23,9 +31,7 @@ function CommentSection({commentArr,id}: CommentSectionProps) {
           // writeSubComment={writeSubComment}
         />
       ))}
-      <Box position="fixed" bottom="0">
-
-      </Box>
+      <Box position="fixed" bottom="0"></Box>
     </>
   );
 }

diff --git a/components/molecules/UserComment.tsx b/components/molecules/UserComment.tsx
@@ -12,9 +12,10 @@ import {
   useSubCommentMutation,
 } from "../../hooks/common/mutations";
 import CommentEditModal from "../../modals/common/CommentEditModal";
+import { ReplyProps } from "../../pageTemplates/square/SecretSquare/SecretSquareComments";
 import { transferGatherDataState, transferGroupDataState } from "../../recoils/transferRecoils";
 import { UserCommentProps as CommentProps } from "../../types/components/propTypes";
-import { DispatchBoolean, DispatchType } from "../../types/hooks/reactTypes";
+import { DispatchType } from "../../types/hooks/reactTypes";
 import { getDateDiff } from "../../utils/dateTimeUtils";
 import Avatar from "../atoms/Avatar";
 import { EllipsisIcon } from "../Icons/DotIcons";
@@ -27,7 +28,7 @@ interface UserCommentProps extends Omit<CommentProps, "_id"> {
   commentId?: string;
   parentId?: string;
   isReComment?: boolean;
-  setIsReCommentInput: DispatchBoolean;
+  setReplyProps: DispatchType<ReplyProps>;
   likeList: string[];
   isAuthor: boolean;
 }
@@ -37,7 +38,7 @@ function UserComment({
   user,
   updatedAt,
   comment,
-  setIsReCommentInput,
+  setReplyProps,
   commentId,
 
   isReComment,
@@ -162,9 +163,11 @@ function UserComment({
             <Box fontWeight="bold" fontSize="13px" lineHeight="20px" color="gray.800">
               {user.name}
             </Box>
-            <Button variant="unstyled">
-              <EllipsisIcon size="sm" />
-            </Button>
+            {session?.user.uid === user.uid && (
+              <Button variant="unstyled">
+                <EllipsisIcon size="sm" />
+              </Button>
+            )}
             {/* <Box fontSize="10px" color="var(--gray-600)">
               {!isSecret && user.location} {!isSecret && "."} {getDateDiff(dayjs(updatedAt))}
             </Box> */}
@@ -191,19 +194,27 @@ function UserComment({
             >
               좋아요 {likeArr.length}개
             </Button>
-            <Box mx={1} w="1px" h="6px" bg="gray.200" my="auto" />
             {!isReComment && (
-              <Button
-                px="0"
-                size="xs"
-                fontSize="10px"
-                variant="ghost"
-                color="var(--gray-600)"
-                fontWeight={500}
-                onClick={() => setIsReCommentInput(true)}
-              >
-                답글 달기
-              </Button>
+              <>
+                <Box mx={1} w="1px" h="6px" bg="gray.200" my="auto" />
+                <Button
+                  px="0"
+                  size="xs"
+                  fontSize="10px"
+                  variant="ghost"
+                  color="var(--gray-600)"
+                  fontWeight={500}
+                  onClick={() =>
+                    setReplyProps({
+                      replyName: user.name,
+                      comment: parentId,
+                      subCommentId: commentId,
+                    })
+                  }
+                >
+                  답글 달기
+                </Button>
+              </>
             )}
             <Box mx={1} w="1px" h="6px" bg="gray.200" my="auto" />
             <Box>{getDateDiff(dayjs(updatedAt))}</Box>

diff --git a/components/molecules/UserCommentBlock.tsx b/components/molecules/UserCommentBlock.tsx
@@ -1,22 +1,22 @@
 import { Box } from "@chakra-ui/react";
 import { useState } from "react";
 
-import { SECRET_USER_SUMMARY } from "../../constants/serviceConstants/userConstants";
 import { useUserInfoQuery } from "../../hooks/user/queries";
+import { ReplyProps } from "../../pageTemplates/square/SecretSquare/SecretSquareComments";
 import { UserCommentProps } from "../../types/components/propTypes";
 import { DispatchType } from "../../types/hooks/reactTypes";
 import UserComment from "./UserComment";
-import UserCommentInput from "./UserCommentInput";
 
 interface UserCommentBlockProps {
   type: "gather" | "group" | "feed" | "square";
   id: string;
   commentProps: UserCommentProps;
   setCommentArr?: DispatchType<UserCommentProps[]>;
-  writeSubComment?: ({ comment, commentId }: { comment: string; commentId: string }) => void;
+  // writeSubComment?: ({ comment, commentId }: { comment: string; commentId: string }) => void;
+  setReplyProps: DispatchType<ReplyProps>;
 }
 
-function UserCommentBlock({ type, id, commentProps }: UserCommentBlockProps) {
+function UserCommentBlock({ type, id, commentProps, setReplyProps }: UserCommentBlockProps) {
   const { data: userInfo } = useUserInfoQuery();
 
   const [isReCommentInput, setIsReCommentInput] = useState(false);
@@ -49,7 +49,7 @@ function UserCommentBlock({ type, id, commentProps }: UserCommentBlockProps) {
         pageId={id}
         commentId={commentProps._id}
         // setCommentArr={setCommentArr}
-        setIsReCommentInput={setIsReCommentInput}
+        setReplyProps={setReplyProps}
         isSecret={type === "square"}
         likeList={commentProps.likeList}
         isAuthor={commentProps.user.name === "익명(글쓴이)"}
@@ -60,7 +60,7 @@ function UserCommentBlock({ type, id, commentProps }: UserCommentBlockProps) {
             isReComment
             type={type}
             isSecret={type === "square"}
-            setIsReCommentInput={setIsReCommentInput}
+            setReplyProps={setReplyProps}
             user={sub.user}
             updatedAt={sub.updatedAt}
             comment={sub.comment}
@@ -73,16 +73,6 @@ function UserCommentBlock({ type, id, commentProps }: UserCommentBlockProps) {
           />
         </Box>
       ))}
-      {isReCommentInput && (
-        <Box ml="20px" my="12px">
-          <UserCommentInput
-            user={type === "square" ? SECRET_USER_SUMMARY : userInfo}
-            // onSubmit={onSubmitReComment}
-            onSubmit={() => {}}
-            initialFocus
-          />
-        </Box>
-      )}
     </>
   );
 }