feat: 이전 기록 페이지 api

apps/web/src/app/(prompt)/edit/[agentId]/[postGroupId]/log/[postId]/Log.tsx

@@ -0,0 +1,3 @@
+export function Log() {
+  return <div>dd</div>;
+}

apps/web/src/app/(prompt)/edit/[agentId]/[postGroupId]/log/[postId]/_components/LogContentItem/LogContentItem.css.ts

@@ -0,0 +1,23 @@
+import { tokens } from '@repo/theme';
+import { style } from '@vanilla-extract/css';
+
+export const wrapper = style({
+  width: '100%',
+  height: '13.4rem',
+  padding: '1.2rem',
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '0.8rem',
+  borderRadius: `${tokens.radius[10]}`,
+  ':hover': {
+    backgroundColor: `${tokens.colors.grey25}`,
+  },
+});
+
+export const promptText = style({
+  width: '100%',
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  marginRight: '0.8rem',
+});

apps/web/src/app/(prompt)/edit/[agentId]/[postGroupId]/log/[postId]/_components/LogContentItem/LogContentItem.tsx

@@ -0,0 +1,55 @@
+import { Badge } from '@repo/ui/Badge';
+import { promptText, wrapper } from './LogContentItem.css';
+import { Text } from '@repo/ui/Text';
+import { getTimeAgo } from '@web/utils';
+
+export type LogContentItemProps = {
+  type: 'EACH' | 'ALL';
+  createdAt: Date | string;
+  id: number;
+  prompt: string;
+  response: string;
+};
+type BadgeInfo = {
+  color: 'pink' | 'blue';
+  text: string;
+};
+
+const BadgeVariants: Record<LogContentItemProps['type'], BadgeInfo> = {
+  ALL: {
+    color: 'pink',
+    text: '개별 적용',
+  },
+  EACH: {
+    color: 'blue',
+    text: '일괄 적용',
+  },
+};
+export function LogContentItem({
+  type,
+  createdAt,
+  id,
+  prompt,
+  response,
+}: LogContentItemProps) {
+  const { color, text } = BadgeVariants[type];
+  return (
+    <div className={wrapper}>
+      <Badge size="medium" variant={color} shape="square">
+        {text}
+      </Badge>
+      <Text
+        className={promptText}
+        color="grey800"
+        fontSize={16}
+        fontWeight="medium"
+      >
+        {prompt}
+      </Text>
+      <Text color="grey300" fontSize={14} fontWeight="medium">
+        {/* TODO 디자인 시안과 동일하게 */}
+        {getTimeAgo(createdAt)}
+      </Text>
+    </div>
+  );
+}

apps/web/src/app/(prompt)/edit/[agentId]/[postGroupId]/log/[postId]/_components/LogSidebar/LogSidebar.css.ts

@@ -0,0 +1,15 @@
+import { tokens } from '@repo/theme';
+import { style } from '@vanilla-extract/css';
+
+export const sidebarWrapper = style({
+  width: '42.3rem',
+  height: '100vh',
+  flexShrink: '0',
+  backgroundColor: `${tokens.colors.grey0}`,
+});
+
+export const closeArea = style({
+  padding: '2rem 2.4rem',
+  display: 'flex',
+  justifySelf: 'flex-end',
+});

apps/web/src/app/(prompt)/edit/[agentId]/[postGroupId]/log/[postId]/_components/LogSidebar/LogSidebar.tsx

@@ -0,0 +1,20 @@
+import { IconButton } from '@repo/ui/IconButton';
+import { closeArea, sidebarWrapper } from './LogSidebar.css';
+import { useParams, useRouter, useSearchParams } from 'next/navigation';
+
+export function LogSidebar() {
+  const router = useRouter();
+  const { agentId, postGroupId } = useParams();
+  const searchParams = useSearchParams();
+  const postId = searchParams.get('post');
+  const handleXClick = () => {
+    router.push(`/edit/${agentId}/${postGroupId}/detail?post=${postId}`);
+  };
+  return (
+    <div className={sidebarWrapper}>
+      <div className={closeArea}>
+        <IconButton icon="x" color="grey300" onClick={handleXClick} />
+      </div>
+    </div>
+  );
+}

apps/web/src/app/(prompt)/edit/[agentId]/[postGroupId]/log/[postId]/page.tsx

@@ -0,0 +1,26 @@
+import { ServerFetchBoundary } from '@web/store/query/ServerFetchBoundary';
+
+import { getServerSideTokens } from '@web/shared/server/serverSideTokens';
+
+import { Log } from './Log';
+import { PostHistoryQueryQueryOptions } from '@web/store/query/usePostHistoryQuery';
+
+type LogPageProps = {
+  params: { agentId: string; postGroupId: string; postId: string };
+};
+
+export default function LogPage({ params }: LogPageProps) {
+  const tokens = getServerSideTokens();
+
+  const serverFetchOptions = PostHistoryQueryQueryOptions(
+    Number(params.agentId),
+    Number(params.postGroupId),
+    Number(params.postId),
+    tokens
+  );
+  return (
+    <ServerFetchBoundary fetchOptions={serverFetchOptions}>
+      <Log />
+    </ServerFetchBoundary>
+  );
+}

apps/web/src/store/query/usePostHistoryQuery.ts

@@ -0,0 +1,44 @@
+import { queryOptions, useSuspenseQuery } from '@tanstack/react-query';
+import { GET } from '@web/shared/server';
+import { Tokens } from '@web/shared/server/types';
+import { Post } from '@web/types';
+import { PostGroup } from '@web/types/post';
+
+export interface PostHistoryQuery {
+  id: number;
+  createdAt: Date | string;
+  prompt: string;
+  response: string;
+  type: 'EACH' | 'ALL';
+}
+
+export function PostHistoryQueryQueryOptions(
+  agentId: number,
+  postGroupId: number,
+  postId: number,
+  tokens?: Tokens
+) {
+  return queryOptions({
+    //TODO FIXME
+    queryKey: ['postHistory', 'Post', postId],
+    queryFn: () =>
+      GET<PostHistoryQuery>(
+        `agents/${agentId}/post-groups/${postGroupId}/posts/${postId}/prompt-histories`,
+        undefined,
+        tokens
+      ),
+
+    staleTime: Infinity,
+    gcTime: Infinity,
+  });
+}
+
+export function useGroupPostsQuery(
+  agentId: number,
+  postGroupId: number,
+  postId: number
+) {
+  return useSuspenseQuery(
+    PostHistoryQueryQueryOptions(agentId, postGroupId, postId)
+  );
+}

packages/ui/src/components/Badge/index.ts

@@ -1,2 +1,2 @@
 export { Badge } from './Badge';
-export type { BadgeProps } from './Badge';
+export type { BadgeProps, BadgeVariant } from './Badge';