feat: 내 정보 뽀각 페이지 UI 구현

components.json

@@ -11,7 +11,7 @@
     "prefix": ""
   },
   "aliases": {
-    "components": "@/components",
-    "utils": "@/util"
+    "components": "@/system/components",
+    "utils": "@/utils/tailwind-util"
   }
 }

package.json

@@ -14,6 +14,7 @@
     "node": "20.2.0"
   },
   "dependencies": {
+    "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@tanstack/react-query": "^5.51.1",
     "@tanstack/react-query-devtools": "^5.51.1",
     "axios": "^1.7.2",

src/app/(sidebar)/(my-info)/components/Badge.tsx

@@ -0,0 +1,23 @@
+// ISSUE: 공통 컴포넌트로 하기 위해 system 폴더에 위치시켰는데, tailwind 스타일이 먹지 않는 이슈 발생. 원인은 아직 못찾음
+// system 폴더가 아닌 현재 폴더에 위치시키면 문제가 발생하지 않음
+import { cn } from '@/utils/tailwind-util';
+
+export interface BadgeProps {
+  label: string;
+  variant?: 'default' | 'blue' | 'purple';
+}
+
+// TODO: cva 사용 로직으로 변경
+const variantStyle = {
+  default: 'bg-neutral-5 text-neutral-75',
+  blue: 'bg-blue-bg-1 text-blue-text-1',
+  purple: 'bg-purple-bg-1 text-purple-text-1',
+};
+
+export function Badge({ label, variant = 'default' }: BadgeProps) {
+  return (
+    <span className={cn('whitespace-nowrap px-[8px] py-[3px] rounded-[4px] text-[14px]', variantStyle[variant])}>
+      {label}
+    </span>
+  );
+}

src/app/(sidebar)/(my-info)/components/InfoCardItem.tsx

@@ -0,0 +1,69 @@
+import { Icon } from '@/system/components';
+import { Badge } from '@/app/(sidebar)/(my-info)/components/Badge';
+import { formatToYYMMDD } from '@/utils/date';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/system/components/ui/dropdown-menu';
+
+// TODO: type 파일 분리
+export interface Tag {
+  id: number;
+  name: string;
+  type: '인성' | '역량';
+}
+
+export interface InfoCard {
+  id: number;
+  title: string;
+  updatedDate: string;
+  cardTagList: Tag[];
+}
+
+interface Props extends InfoCard {}
+
+const tagTypeColor = {
+  역량: 'blue',
+  인성: 'purple',
+} as const;
+
+export function InfoCardItem({ title, updatedDate, cardTagList }: Props) {
+  const formattedDate = formatToYYMMDD(updatedDate);
+
+  return (
+    <div className="flex flex-col justify-between min-w-[343px] h-[140px] p-[24px] rounded-[16px] bg-white border border-neutral-5 cursor-pointer hover:border-neutral-30">
+      <div className="flex">
+        <div className="flex-1 overflow-hidden">
+          <div className="mb-[9px] text-[12px] text-neutral-20">{formattedDate}</div>
+          <div className="w-auto truncate text-[16px] font-semibold">{title}</div>
+        </div>
+        <div>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <button className="rounded-[4px] hover:bg-neutral-1">
+                <Icon name="more" color="#1B1C1E" />
+              </button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem className="gap-[8px]">
+                <Icon name="delete" color="#FF5C5C" />
+                <div className="text-red-50 text-[15px] font-normal">삭제하기</div>
+              </DropdownMenuItem>
+              <DropdownMenuItem className="gap-[8px]">
+                <Icon name="pip" color="#70737C" />
+                <div className="text-neutral-95 text-[15px] font-normal">개별창으로 띄우기</div>
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </div>
+      <div className="flex gap-[8px]">
+        {cardTagList.map((tag) => (
+          <Badge key={tag.id} label={tag.name} variant={tagTypeColor[tag.type]} />
+        ))}
+      </div>
+    </div>
+  );
+}

src/app/(sidebar)/(my-info)/components/InfoCardList.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import { useState } from 'react';
+import { mockInfoCount, mockInfoList } from '../mock';
+import { cn } from '@/utils/tailwind-util';
+import { Icon } from '@/system/components';
+import { InfoCardItem } from './InfoCardItem';
+
+const INFO_OPTIONS = ['경험 정리', '자기소개서', '면접 질문'] as const;
+
+export function InfoCardList() {
+  const [currentOption, setCurrentOption] = useState<(typeof INFO_OPTIONS)[number]>('경험 정리');
+
+  // TODO: API 연동 시 response data로 변경
+  const infoCount = mockInfoCount;
+  const infoList = mockInfoList;
+
+  return (
+    <div>
+      <div className="mb-[28px] flex justify-between">
+        <div className="flex gap-[24px]">
+          {INFO_OPTIONS.map((option) => (
+            <button
+              key={option}
+              className="flex gap-[6px] items-center cursor-pointer"
+              onClick={() => setCurrentOption(option)}>
+              <div
+                className={cn(
+                  'text-[18px] text-neutral-10 font-semibold',
+                  currentOption === option && 'text-neutral-80',
+                )}>
+                {option}
+              </div>
+              <div
+                className={cn(
+                  'px-[8px] py-[2px] bg-neutral-10 rounded-[6px] text-neutral-1 text-[14px] font-semibold',
+                  currentOption === option && 'bg-neutral-80',
+                )}>
+                {infoCount[option]}
+              </div>
+            </button>
+          ))}
+        </div>
+        <button className="flex items-center gap-[8px] bg-neutral-95 py-[6px] pl-[16px] pr-[10px] rounded-[6px]">
+          <div className="text-white text-[14px] font-semibold">카드 추가</div>
+          <Icon name="add" color="#08F29B" />
+        </button>
+      </div>
+      <div className="grid grid-cols-[repeat(auto-fill,minmax(343px,1fr))] gap-[16px]">
+        {infoList.map((info) => (
+          <InfoCardItem key={info.id} {...info} />
+        ))}
+      </div>
+    </div>
+  );
+}

src/app/(sidebar)/(my-info)/mock.ts

@@ -0,0 +1,61 @@
+import { InfoCard } from './components/InfoCardItem';
+
+export const mockInfoCount = {
+  '경험 정리': 1,
+  자기소개서: 3,
+  '면접 질문': 2,
+};
+
+export const mockInfoList: InfoCard[] = [
+  {
+    id: 1,
+    title: '제목',
+    updatedDate: '2024-07-20T20:00:00',
+    cardTagList: [
+      {
+        id: 1,
+        name: '인성태그1',
+        type: '인성',
+      },
+      {
+        id: 2,
+        name: '역량태그1',
+        type: '역량',
+      },
+    ],
+  },
+  {
+    id: 2,
+    title: 'test title2',
+    updatedDate: '2024-07-10T20:00:00',
+    cardTagList: [
+      {
+        id: 1,
+        name: '인성태그1',
+        type: '인성',
+      },
+      {
+        id: 2,
+        name: '역량태그1',
+        type: '역량',
+      },
+    ],
+  },
+  {
+    id: 3,
+    title: '제목제목제목제목제목제목제목제목제목제목제목제목제목제목제목제목제목',
+    updatedDate: '2024-07-15T20:00:00',
+    cardTagList: [
+      {
+        id: 1,
+        name: '인성태그1',
+        type: '인성',
+      },
+      {
+        id: 2,
+        name: '역량태그1',
+        type: '역량',
+      },
+    ],
+  },
+];

src/app/(sidebar)/(my-info)/page.tsx

@@ -0,0 +1,17 @@
+import { Icon } from '@/system/components';
+import { InfoCardList } from './components/InfoCardList';
+
+export default function MyInfo() {
+  return (
+    <div className="max-w-[1700px] py-[64px] px-[80px] mx-auto">
+      <div className="mb-[72px] flex justify-between">
+        <h1 className="text-[28px] font-bold">내 정보 뽀각</h1>
+        <button className="flex gap-[24px] p-[16px] border rounded-[8px] border-neutral-5 bg-white">
+          <div className="text-[16px] font-semibold">우정균님의 기본정보</div>
+          <Icon name="down" color="#878A93" />
+        </button>
+      </div>
+      <InfoCardList />
+    </div>
+  );
+}

src/app/layout.tsx

@@ -2,7 +2,7 @@ import type { Metadata } from 'next';
 import { Inter } from 'next/font/google';
 import { QueryProvider } from '@/lib';
 import './globals.css';
-import QueryProvider from '@/context/QueryProvider/QueryProvider';
+import { cn } from '@/utils/tailwind-util';
 
 const inter = Inter({ subsets: ['latin'] });
 
@@ -18,7 +18,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={inter.className}>
+      <body className={cn(inter.className, 'bg-neutral-1')}>
         <QueryProvider>{children}</QueryProvider>
       </body>
     </html>

src/lib/AsyncBoundary/AsyncBoundary.tsx

@@ -4,7 +4,7 @@ import { forwardRef } from 'react';
 import { useQueryErrorResetBoundary } from '@tanstack/react-query';
 import { chain } from '@/utils';
 import { ErrorBoundary } from '../ErrorBoundary/ErrorBoundary';
-import SSRSafeSuspense from '../SSRSafeSuspense/SSRSafeSuspense';
+import { SSRSafeSuspense } from '../SSRSafeSuspense/SSRSafeSuspense';
 import type { StrictPropsWithChildren } from '@/types';
 import type { ComponentProps, ComponentRef, Suspense } from 'react';
 

src/lib/ErrorBoundary/ErrorBoundaryContext.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import generateContext from '../generateContext/generateContext';
+import { generateContext } from '../generateContext/generateContext';
 
 export const [ErrorboundaryProvider, useErrorBoundaryContext] = generateContext<{
   error: Error | null;

src/system/components/Icon/Icon.tsx

@@ -5,7 +5,12 @@ import { Memo } from './SVG/Memo';
 import { Profile } from './SVG/Profile';
 import { Setting } from './SVG/Setting';
 import { Logout } from './SVG/Logout';
+import { Down } from './SVG/Down';
+import { Add } from './SVG/Add';
+import { More } from './SVG/More';
 import type { IconBaseType } from '@/system/components/Icon/SVG/type';
+import { Delete } from './SVG/Delete';
+import { Pip } from './SVG/Pip';
 
 const iconMap = {
   bell: Bell,
@@ -15,6 +20,11 @@ const iconMap = {
   profile: Profile,
   search: Search,
   setting: Setting,
+  down: Down,
+  add: Add,
+  more: More,
+  delete: Delete,
+  pip: Pip,
 } as const;
 
 export interface IconProps extends IconBaseType {

src/system/components/Icon/SVG/Add.tsx

@@ -0,0 +1,21 @@
+import { IconBaseType } from './type';
+
+export function Add({ size, color }: IconBaseType) {
+  return (
+    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} fill="none" xmlns="http://www.w3.org/2000/svg">
+      <mask
+        id="mask0_1054_1585"
+        style={{ maskType: 'alpha' }}
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="24"
+        height="24">
+        <rect width="24" height="24" fill="#D9D9D9" />
+      </mask>
+      <g mask="url(#mask0_1054_1585)">
+        <path d="M11.25 12.75H5.5V11.25H11.25V5.5H12.75V11.25H18.5V12.75H12.75V18.5H11.25V12.75Z" fill={color} />
+      </g>
+    </svg>
+  );
+}

src/system/components/Icon/SVG/Delete.tsx

@@ -0,0 +1,16 @@
+import { IconBaseType } from './type';
+
+export function Delete({ size, color }: IconBaseType) {
+  return (
+    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M4.62598 7.40259H19.3736L18.0473 21.25H5.95222L4.62598 7.40259Z"
+        stroke={color}
+        stroke-width="1.5"
+        stroke-linecap="square"
+      />
+      <path d="M7.81177 2.75H16.1884" stroke={color} stroke-width="1.5" stroke-linecap="square" />
+      <path d="M12 11.9995L12 16.6525" stroke={color} stroke-width="1.5" stroke-linecap="square" />
+    </svg>
+  );
+}

src/system/components/Icon/SVG/Down.tsx

@@ -0,0 +1,21 @@
+import { IconBaseType } from './type';
+
+export function Down({ size, color }: IconBaseType) {
+  return (
+    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} fill="none" xmlns="http://www.w3.org/2000/svg">
+      <mask
+        id="mask0_805_23618"
+        style={{ maskType: 'alpha' }}
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="24"
+        height="24">
+        <rect width="24" height="24" fill={color} />
+      </mask>
+      <g mask="url(#mask0_805_23618)">
+        <path d="M12 15L6.5 8H17.5L12 15Z" fill={color} />
+      </g>
+    </svg>
+  );
+}

src/system/components/Icon/SVG/More.tsx

@@ -0,0 +1,23 @@
+import { IconBaseType } from './type';
+
+export function More({ size, color }: IconBaseType) {
+  return (
+    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} fill="none" xmlns="http://www.w3.org/2000/svg">
+      <mask
+        id="mask0_1054_878"
+        style={{ maskType: 'alpha' }}
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width={size}
+        height={size}>
+        <rect width={size} height={size} fill="#D9D9D9" />
+      </mask>
+      <g mask="url(#mask0_1054_878)">
+        <rect x="10.5991" y="4.82007" width="2.80176" height="2.80176" fill={color} />
+        <rect x="10.5991" y="10.5991" width="2.80176" height="2.80176" fill={color} />
+        <rect x="10.5991" y="16.3782" width="2.80176" height="2.80176" fill={color} />
+      </g>
+    </svg>
+  );
+}