Merge pull request #358 from MovieReviewComment/feature/issue-327/com…

…ment-card-footer

[#327] Implement CommentCardFooter

ui/src/components/comment/client/comment-card-footer.tsx

@@ -0,0 +1,88 @@
+'use client';
+
+import { EllipsisVerticalIcon } from '@heroicons/react/24/outline';
+
+import UserChip from '@/components/auth/client/user-chip';
+import { DeleteCommentButton } from '@/components/comment/client/delete-comment-button';
+import ChipButton from '@/components/common/client/chip-button';
+import Text from '@/components/common/server/text';
+import Time from '@/components/common/server/time';
+
+import { useAuth } from '@/context/auth/auth-context';
+import { useComment } from '@/context/comment/comment-context';
+
+import { useDropdown } from '@/hooks/common/use-dropdown';
+
+export function CommentCardFooter({
+  nickname,
+  tag,
+  createdAt,
+  updatedAt,
+  authorId,
+}: {
+  nickname: string;
+  tag: string;
+  createdAt: string;
+  updatedAt: string;
+  authorId: string;
+}) {
+  const isUpdated = createdAt !== updatedAt;
+  const dateStr = isUpdated ? updatedAt : createdAt;
+
+  const { isDropdownOpen, targetRef, toggleDropdown } = useDropdown<HTMLDivElement>();
+
+  const { setIsEditing } = useComment();
+
+  const { user } = useAuth();
+
+  const isAuthorized =
+    user?.id === authorId || user?.accessLevel === 'ADMIN' || user?.accessLevel === 'DEVELOPER';
+
+  return (
+    <div className="mt-4 flex justify-between">
+      <div className="flex flex-wrap items-center gap-1">
+        <UserChip nickname={nickname} tag={tag} />
+
+        <Text weight="bold">&#183;</Text>
+
+        <Time dateStr={dateStr} relative nowrap />
+        {isUpdated && (
+          <div className="hidden min-[350px]:block">
+            <Text nowrap>수정됨</Text>
+          </div>
+        )}
+      </div>
+
+      {isAuthorized && (
+        <div ref={targetRef} className="relative ml-auto">
+          <ChipButton
+            rounded="lg"
+            width="fit"
+            Icon={<EllipsisVerticalIcon className="w-4" />}
+            onClick={toggleDropdown}
+          />
+
+          {isDropdownOpen && (
+            <div className="absolute right-0 top-7 flex flex-col rounded-lg border bg-white p-2">
+              <DeleteCommentButton />
+
+              <ChipButton
+                onClick={() => {
+                  setIsEditing(true);
+                  toggleDropdown();
+                }}
+                Text={
+                  <Text size="sm" nowrap>
+                    수정
+                  </Text>
+                }
+                rounded="lg"
+                width="full"
+              />
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

ui/src/components/common/client/chip-button.tsx

@@ -11,13 +11,15 @@ export default function ChipButton({
   rounded,
   type = 'button',
   width,
+  disabled,
 }: {
-  Text: ReactNode;
+  Text?: ReactNode;
   Icon?: ReactNode;
   onClick?: () => void;
   rounded: 'full' | 'lg';
   type?: 'button' | 'submit';
   width: 'fit' | 'full';
+  disabled?: boolean;
 }) {
   const roundClass = clsx({ 'rounded-lg': rounded === 'lg', 'rounded-full': rounded === 'full' });
   const widthClass = clsx({ 'w-full': width === 'full', 'w-fit': width === 'fit' });
@@ -27,10 +29,12 @@ export default function ChipButton({
       className={clsx(
         'flex items-center space-x-1 px-2 py-1 hover:bg-gray-100',
         roundClass,
-        widthClass
+        widthClass,
+        { 'pointer-events-none': disabled }
       )}
       onClick={onClick}
       type={type}
+      aria-disabled={disabled}
     >
       {Icon}
       {Text}