[FEAT] PickRecord 컴포넌트 구현 및 pick 수정(태그, 타이틀)기능 구현

frontend/techpick/package.json

@@ -24,6 +24,7 @@
     "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-icons": "1.3.0",
     "@radix-ui/react-popover": "1.1.2",
+    "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-visually-hidden": "^1.1.0",
     "@tanstack/react-query": "^5.59.0",

frontend/techpick/src/apis/apiConstants.ts

@@ -3,6 +3,7 @@ const API_ENDPOINTS = {
   LOCATION: 'location',
   BASIC: 'basic',
   PICKS: 'picks',
+  TAGS: 'tags',
 };
 
 export const API_URLS = {
@@ -24,4 +25,9 @@ export const API_URLS = {
     `${cursor ? '&cursor=' + cursor : ''}` +
     `${size ? '&size=' + size : ''}`,
   MOVE_PICKS: `${API_ENDPOINTS.PICKS}/${API_ENDPOINTS.LOCATION}`,
+  UPDATE_PICKS: `${API_ENDPOINTS.PICKS}`,
+  CREATE_TAGS: `${API_ENDPOINTS.TAGS}`,
+  DELETE_TAGS: `${API_ENDPOINTS.TAGS}`,
+  UPDATE_TAGS: `${API_ENDPOINTS.TAGS}`,
+  GET_TAGS: `${API_ENDPOINTS.TAGS}`,
 };

frontend/techpick/src/apis/pick/getPick/getPick.ts

@@ -1,12 +1,10 @@
 import { HTTPError } from 'ky';
 import { apiClient, returnErrorFromHTTPError } from '@/apis';
-import type { GetPickResponseType } from '../pickApi.type';
+import type { PickInfoType } from '@/types';
 
-export const getPick = async (pickId: number): Promise<GetPickResponseType> => {
+export const getPick = async (pickId: number): Promise<PickInfoType> => {
   try {
-    const response = await apiClient.get<GetPickResponseType>(
-      `picks/${pickId}`
-    );
+    const response = await apiClient.get<PickInfoType>(`picks/${pickId}`);
     const data = await response.json();
 
     return data;

frontend/techpick/src/apis/pick/getPick/useGetPickQuery.ts

@@ -1,10 +1,10 @@
 import { useQuery } from '@tanstack/react-query';
 import { getPick } from './getPick';
-import type { GetPickResponseType } from '../pickApi.type';
+import type { PickInfoType } from '@/types';
 
 // todo: suspense query로 바꾸기.
 export const useGetPickQuery = (pickId: number) => {
-  return useQuery<GetPickResponseType>({
+  return useQuery<PickInfoType>({
     queryKey: ['pick', pickId],
     queryFn: () => {
       return getPick(pickId);

frontend/techpick/src/apis/pick/index.ts

@@ -1,4 +1,4 @@
 export { useGetPickQuery } from './getPick/useGetPickQuery';
-export { useUpdatePickMutation } from './updatePick/useUpdatePickMutation';
 export { getPicksByFolderId } from './getPicks';
 export { movePicks } from './movePicks';
+export { updatePick } from './updatePick';

frontend/techpick/src/apis/pick/updatePick/updatePick.ts → frontend/techpick/src/apis/pick/updatePick.ts

@@ -1,15 +1,16 @@
 import { HTTPError } from 'ky';
 import { apiClient, returnErrorFromHTTPError } from '@/apis';
-import type {
-  GetPickResponseType,
-  UpdatePickRequestType,
-} from '../pickApi.type';
+import { API_URLS } from '../apiConstants';
+import type { UpdatePickRequestType, PickInfoType } from '@/types';
 
 export const updatePick = async (pickInfo: UpdatePickRequestType) => {
   try {
-    const response = await apiClient.put<GetPickResponseType>('picks', {
-      json: pickInfo,
-    });
+    const response = await apiClient.patch<PickInfoType>(
+      API_URLS.UPDATE_PICKS,
+      {
+        json: pickInfo,
+      }
+    );
     const data = await response.json();
 
     return data;

frontend/techpick/src/apis/tag/createTag.ts

@@ -1,10 +1,14 @@
-import { apiClient } from '@/apis';
+import { apiClient } from '../apiClient';
+import { API_URLS } from '../apiConstants';
 import { CreateTagRequestType, CreateTagResponseType } from '@/types';
 
 export const createTag = async (createTag: CreateTagRequestType) => {
-  const response = await apiClient.post<CreateTagResponseType>('tag', {
-    body: JSON.stringify(createTag),
-  });
+  const response = await apiClient.post<CreateTagResponseType>(
+    API_URLS.CREATE_TAGS,
+    {
+      body: JSON.stringify(createTag),
+    }
+  );
   const data = await response.json();
 
   return data;

frontend/techpick/src/apis/tag/deleteTag.ts

@@ -1,12 +1,13 @@
-import { apiClient } from '@/apis';
+import { apiClient } from '../apiClient';
+import { API_URLS } from '../apiConstants';
 import { DeleteTagRequestType } from '@/types';
 
 export const deleteTag = async (tagId: DeleteTagRequestType['id']) => {
   const deleteTagRequest: DeleteTagRequestType = {
     id: tagId,
   };
 
-  await apiClient.delete<never>(`tags`, {
+  await apiClient.delete<never>(API_URLS.DELETE_TAGS, {
     json: deleteTagRequest,
   });
 };

frontend/techpick/src/apis/tag/getTagList.ts

@@ -1,8 +1,11 @@
-import { apiClient } from '@/apis';
+import { apiClient } from '../apiClient';
+import { API_URLS } from '../apiConstants';
 import type { GetTagListResponseType } from '@/types';
 
 export const getTagList = async () => {
-  const response = await apiClient.get<GetTagListResponseType>('tags');
+  const response = await apiClient.get<GetTagListResponseType>(
+    API_URLS.GET_TAGS
+  );
   const data = await response.json();
 
   return data;

frontend/techpick/src/apis/tag/updateTag.ts

@@ -1,20 +1,15 @@
-import { apiClient } from '@/apis';
+import { apiClient } from '../apiClient';
+import { API_URLS } from '../apiConstants';
 import { UpdateTagRequestType, UpdateTagResponseType } from '@/types';
 
-// const findTargetTag = (
-//   tagList: UpdateTagResponseType,
-//   updateTag: TagUpdateType
-// ) => {
-//   const targetTag = tagList.filter((tag) => tag.tagId === updateTag.tagId);
-//   return targetTag;
-// };
-
 export const updateTag = async (updateTag: UpdateTagRequestType) => {
-  const response = await apiClient.put<UpdateTagResponseType>('tag', {
-    json: [updateTag],
-  });
+  const response = await apiClient.put<UpdateTagResponseType>(
+    API_URLS.UPDATE_TAGS,
+    {
+      json: [updateTag],
+    }
+  );
   const updatedTag = await response.json();
-  //const updatedTag = findTargetTag(totalTagList, updateTag);
 
   return updatedTag;
 };

frontend/techpick/src/app/(signed)/folders/layout.css.ts

@@ -8,11 +8,11 @@ export const pageContainerLayout = style({
 });
 
 export const ListViewerLayout = style({
-  display: 'flex',
-  flexDirection: 'column',
   width: '100%',
   height: '100vh',
   padding: space['32'],
+  flexShrink: 1,
+  minWidth: 0,
 
   '@media': {
     'screen and (min-width: 1440px)': {

frontend/techpick/src/app/(signed)/folders/layout.tsx

@@ -1,5 +1,9 @@
 import { PropsWithChildren, Suspense } from 'react';
-import { FolderTree, FolderAndPickDndContextProvider } from '@/components';
+import {
+  FolderTree,
+  FolderAndPickDndContextProvider,
+  PickRecordHeader,
+} from '@/components';
 import { CurrentPathIndicator } from '@/components/FolderPathIndicator/CurrentPathIndicator';
 import { SearchWidget } from '@/components/SearchWidget/SearchWidget';
 import {
@@ -26,6 +30,7 @@ export default function FolderLayout({ children }: PropsWithChildren) {
               </Suspense>
             </div>
           </div>
+          <PickRecordHeader />
           {children}
         </div>
       </FolderAndPickDndContextProvider>

frontend/techpick/src/app/(signed)/folders/unclassified/page.tsx

@@ -1,7 +1,8 @@
 'use client';
 
 import { useEffect } from 'react';
-import { DraggablePickListViewer } from '@/components';
+import { PickDraggableListLayout } from '@/components/PickDraggableListLayout';
+import { PickDraggableRecord } from '@/components/PickRecord/PickDraggableRecord';
 import { useTreeStore } from '@/stores/dndTreeStore/dndTreeStore';
 import { usePickStore } from '@/stores/pickStore/pickStore';
 
@@ -37,11 +38,17 @@ export default function UnclassifiedFolderPage() {
     return <div>loading...</div>;
   }
 
+  const pickList = getOrderedPickListByFolderId(
+    basicFolderMap['UNCLASSIFIED'].id
+  );
   return (
-    <DraggablePickListViewer
-      pickList={getOrderedPickListByFolderId(basicFolderMap['UNCLASSIFIED'].id)}
+    <PickDraggableListLayout
       folderId={basicFolderMap['UNCLASSIFIED'].id}
-      viewType="list"
-    />
+      viewType="record"
+    >
+      {pickList.map((pickInfo) => {
+        return <PickDraggableRecord key={pickInfo.id} pickInfo={pickInfo} />;
+      })}
+    </PickDraggableListLayout>
   );
 }

frontend/techpick/src/components/Breadcrumb/Breadcumb.tsx

@@ -80,14 +80,14 @@ const BreadcrumbSeparator = ({
   className,
   ...props
 }: React.ComponentProps<'li'>) => (
-  <li
+  <span
     role="presentation"
     aria-hidden="true"
     className={`${className ?? ''} ${breadcrumbSeparatorStyle}`}
     {...props}
   >
     {children ?? <ChevronRight />}
-  </li>
+  </span>
 );
 BreadcrumbSeparator.displayName = 'BreadcrumbSeparator';
 

frontend/techpick/src/components/Button/Button.css.ts

@@ -43,13 +43,13 @@ export type buttonColorVariantKeyTypes = keyof typeof buttonColorVariants;
 
 export const buttonBackgroundVariants = styleVariants({
   primary: {
-    backgroundColor: colorVars.blue1,
+    backgroundColor: colorVars.blue8,
   },
   secondary: {
     backgroundColor: colorVars.green1,
   },
   warning: {
-    backgroundColor: colorVars.orange1,
+    backgroundColor: colorVars.orange8,
   },
 });
 
@@ -71,11 +71,11 @@ export const buttonStyle = style({
 
   selectors: {
     '&[data-variant="primary"]:hover, &[data-variant="primary"]:focus': {
-      backgroundColor: colorVars.amber1,
+      backgroundColor: colorVars.blue10,
     },
 
     '&[data-variant="warning"]:hover, &[data-variant="warning"]:focus': {
-      backgroundColor: colorVars.orange1,
+      backgroundColor: colorVars.orange10,
     },
   },
 });

frontend/techpick/src/components/DragOverlay.tsx

@@ -3,15 +3,13 @@
 import { useEffect, useState } from 'react';
 import type { CSSProperties } from 'react';
 import { DragOverlay as DndKitDragOverlay } from '@dnd-kit/core';
-import { usePickRenderModeStore, usePickStore, useTreeStore } from '@/stores';
+import { usePickStore, useTreeStore } from '@/stores';
 import { pickDragOverlayStyle } from './dragOverlay.css';
-import { PickCard } from './PickListViewer/PickCard';
-import { PickRecord } from './PickListViewer/PickRecord';
+import { PickRecord } from './PickRecord';
 
 export function DargOverlay({ elementClickPosition }: DargOverlayProps) {
   const { isDragging: isFolderDragging, draggingFolderInfo } = useTreeStore();
   const { isDragging: isPickDragging, draggingPickInfo } = usePickStore();
-  const { pickRenderMode } = usePickRenderModeStore();
   const [mousePosition, setMousePosition] = useState({ x: -1, y: -1 });
   const overlayStyle: CSSProperties = {
     top: `${mousePosition.y}px`,
@@ -74,18 +72,10 @@ export function DargOverlay({ elementClickPosition }: DargOverlayProps) {
   }
 
   if (isPickDragging && draggingPickInfo) {
-    if (pickRenderMode === 'list') {
-      return (
-        <DndKitDragOverlay style={overlayStyle}>
-          <PickRecord pickInfo={draggingPickInfo} />
-        </DndKitDragOverlay>
-      );
-    }
-
     return (
       <DndKitDragOverlay style={overlayStyle}>
         <div>
-          <PickCard pickInfo={draggingPickInfo}></PickCard>
+          <PickRecord pickInfo={draggingPickInfo}></PickRecord>
         </div>
       </DndKitDragOverlay>
     );

frontend/techpick/src/components/PickDraggableListLayout.tsx

@@ -0,0 +1,16 @@
+import { PickListSortableContextProvider } from './PickListSortableContextProvider';
+import { PickViewDraggableItemListLayoutComponentProps } from '@/types';
+
+export function PickDraggableListLayout({
+  viewType = 'record',
+  folderId,
+  children,
+}: PickViewDraggableItemListLayoutComponentProps) {
+  return (
+    <div>
+      <PickListSortableContextProvider folderId={folderId} viewType={viewType}>
+        {children}
+      </PickListSortableContextProvider>
+    </div>
+  );
+}