새로운 UI로 변경

eslint.config.mjs

@@ -22,6 +22,7 @@ const eslintConfig = [
       'unused-imports': unusedImports,
     },
     rules: {
+      '@typescript-eslint/no-unused-vars': 'warn',
       'react/jsx-sort-props': [
         'warn',
         {

src/app/globals.css

@@ -16,6 +16,8 @@
   --color-blog-blue: var(--blog-blue);
   --color-blog-green: var(--blog-green);
   --color-blog-yellow: var(--blog-yellow);
+  --color-blog-black: var(--blog-black);
+  --color-blog-gray-600: var(--blog-gray-600);
   --color-blog-gray-500: var(--blog-gray-500);
   --color-blog-gray-400: var(--blog-gray-400);
   --color-blog-gray-300: var(--blog-gray-300);
@@ -62,6 +64,11 @@
   --height-content: calc(
     100vh - var(--height-header) - 2 * var(--header-padding-y)
   );
+  --height-footer: var(--footer-height);
+  --padding-footer: var(--footer-height) 0;
+  --line-height-footer: calc(
+    var(--footer-height) - 2 * var(--footer-padding-x)
+  );
 }
 
 :root {
@@ -70,11 +77,14 @@
   --header-padding-x: 1rem;
   --header-padding-y: 3rem;
   --card: oklch(1 0 0);
+  --footer-height: 92px;
   --blog-purple: oklch(0.6095 0.2382 332.15);
   --blog-pink: oklch(0.5717 0.2063 13.44);
   --blog-blue: oklch(0.5332 0.2106 263.54);
   --blog-green: oklch(0.684 0.1136 154.11);
   --blog-yellow: oklch(0.7266 0.1318 91.46);
+  --blog-black: oklch(0.3496 0.0141 274.5);
+  --blog-gray-600: oklch(0.6428 0.0152 248.06);
   --blog-gray-500: oklch(0.8196 0.0047 258.33);
   --blog-gray-400: oklch(0.8779 0.0026 228.79);
   --blog-gray-300: oklch(0.9401 0 0);
@@ -158,6 +168,6 @@
     @apply border-border break-keep outline-ring/50;
   }
   body {
-    @apply flex items-center justify-center font-pretendard;
+    @apply flex items-center justify-center bg-blog-gray-100 font-pretendard;
   }
 }

src/app/page.tsx

@@ -1,23 +1,31 @@
-import { Button, PostCard } from '@/shared';
+'use client';
+
+import { useState } from 'react';
+
+import { PostCard, Tabs } from '@/shared';
 import { Grid } from '@/widgets';
 
 export default function Home() {
+  const posts = Array.from({ length: 9 }); // 임시 데이터
+
+  const [search, setSearch] = useState('');
+
+  const onChangeSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearch(e.target.value);
+  };
   return (
-    <div className='flex w-full flex-col items-start justify-start'>
-      <div className='flex gap-3 py-2'>
-        <Button className='px-2 font-bold'>전체 (49)</Button>
-        <Button className='px-2 font-bold' variant='ghost'>
-          개발 (3)
-        </Button>
-        <Button className='px-2 font-bold' variant='ghost'>
-          일상 (9)
-        </Button>
-        <Button className='px-2 font-bold' variant='ghost'>
-          회고 (4)
-        </Button>
-      </div>
-      <Grid columns={{ base: 1, md: 2, lg: 4 }} gap={16}>
-        <PostCard />
+    <div className='flex flex-col items-center justify-center gap-10'>
+      <Tabs />
+      <Grid
+        className='w-full px-4 md:px-8 lg:px-0'
+        cols='grid-cols-1 md:grid-cols-2 lg:grid-cols-[270px_270px_270px]'
+        gap={5}
+        justifyContent='center'
+        maxWidth='7xl'
+      >
+        {posts.map((_, index) => (
+          <PostCard key={index} />
+        ))}
       </Grid>
     </div>
   );

src/shared/components/features/card/PostCard.tsx

@@ -0,0 +1,34 @@
+import Image from 'next/image';
+
+import { CalendarDays } from 'lucide-react';
+
+export const PostCard = () => {
+  return (
+    <div className='flex w-full flex-col overflow-hidden bg-white shadow-lg transform-content'>
+      <div className='relative aspect-video w-full'>
+        <Image
+          fill
+          alt='thumbnail'
+          className='object-cover'
+          src='https://picsum.photos/400/225'
+        />
+      </div>
+      <div className='flex h-full w-full flex-col justify-between p-3'>
+        <div className='flex flex-col gap-2'>
+          <div className='text-sm font-bold text-blog-pink'>일상</div>
+          <div>게시물 1 제목제목</div>
+          <div className='text-sm text-blog-blue'>
+            게시물 1에 대한 내용입니다.게시물 1에 대한 내용입니다.게시물 1에
+            대한 내용입니다.게시물 1에 대한 내용입니다.
+          </div>
+        </div>
+        <div className='flex w-full items-center gap-2 pt-3'>
+          <CalendarDays className='size-5 text-blog-gray-600' />
+          <p className='text-sm font-medium text-blog-gray-600'>
+            2025년 1월 14일
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};

src/shared/components/features/card/index.ts

@@ -0,0 +1 @@
+export * from './PostCard';

src/shared/components/features/index.ts

@@ -1,3 +1,3 @@
-export * from './Header';
-export * from './Footer';
-export * from './PostCard';
+export * from './card';
+export * from './layout';
+export * from './tabs';

src/shared/components/features/layout/Footer.tsx

@@ -0,0 +1,32 @@
+import Link from 'next/link';
+
+export const Footer = () => {
+  return (
+    <footer className='flex h-footer w-full items-center justify-center bg-blog-gray-300'>
+      <div className='flex flex-col items-start justify-between gap-1'>
+        <p className='text-blog-gray-600'>
+          Copyright &copy; 2025 <b>Dobbymin</b> All rights reserved.
+        </p>
+        <div className='flex items-center justify-center gap-1 font-fira-code text-blog-gray-600'>
+          <span>gmin0701@knu.ac.kr</span>
+          <span className='font-bold'>.</span>
+          <span>+82-10-3095-7259</span>
+          <span className='font-bold'>.</span>
+          <Link
+            className='hover:font-bold hover:underline'
+            href='https://github.com/Dobbymin'
+          >
+            GitHub
+          </Link>
+          <span className='font-bold'>.</span>
+          <Link
+            className='hover:font-bold hover:underline'
+            href='https://www.linkedin.com/in/dobbymin/'
+          >
+            LinkedIn
+          </Link>
+        </div>
+      </div>
+    </footer>
+  );
+};

src/shared/components/features/layout/Header.tsx

@@ -0,0 +1,29 @@
+import Link from 'next/link';
+
+import { Search, Sun } from 'lucide-react';
+
+import { routerPath } from '../../../constants';
+import { Input } from '../../ui';
+
+export const Header = () => {
+  return (
+    <header className='fixed top-0 right-0 left-0 z-100 flex h-header items-center justify-between bg-blog-gray-500 px-header transition-colors'>
+      <Link href={routerPath.main}>
+        <p className='font-lemon text-3xl'>Dobblog</p>
+      </Link>
+      <div className='absolute top-1/2 left-1/2 hidden w-[400px] max-w-[60vw] -translate-x-1/2 -translate-y-1/2 items-center justify-center gap-3 rounded-sm bg-blog-gray-100 md:flex'>
+        <Input
+          className='border-none bg-transparent text-sm text-blog-gray-500 shadow-none outline-none placeholder:text-blog-gray-400 focus:border-none focus:ring-0 focus:outline-none'
+          type='text'
+        />
+        <Search className='mr-3 text-blog-gray-500' size={20} />
+      </div>
+      <div className='flex items-center justify-between gap-5'>
+        <Link href={routerPath.about}>
+          <p className='font-lemon text-xl'>About</p>
+        </Link>
+        <Sun className='cursor-pointer text-blog-pink' />
+      </div>
+    </header>
+  );
+};

src/shared/components/features/layout/index.ts

@@ -0,0 +1,2 @@
+export * from './Footer';
+export * from './Header';

src/shared/components/features/tabs/Tabs.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import { useState } from 'react';
+
+export const Tabs = () => {
+  const [selected, setSelected] = useState(0);
+
+  const tabs = [
+    { name: 'All.tsx', count: 49 },
+    { name: 'Develop.tsx', count: 3 },
+    { name: 'Daily.tsx', count: 9 },
+    { name: 'Review.tsx', count: 4 },
+  ];
+
+  return (
+    <div className='flex h-13 justify-start overflow-x-auto py-2 font-fira-code'>
+      {tabs.map((tab, idx) => (
+        <div
+          key={tab.name}
+          className={`flex cursor-pointer items-center justify-center gap-2 border-r px-5 text-sm font-semibold transition-colors last:border-r-0 ${
+            selected === idx
+              ? 'bg-blog-gray-100 text-blog-black'
+              : 'bg-blog-gray-200 text-blog-gray-600 hover:font-bold'
+          } ${idx === 0 ? '' : 'w-full'} `}
+          onClick={() => setSelected(idx)}
+        >
+          <p>{tab.name}</p>
+          <p className='text-blog-green'>({tab.count})</p>
+        </div>
+      ))}
+    </div>
+  );
+};

src/shared/components/features/tabs/index.ts

@@ -0,0 +1 @@
+export * from './Tabs';

src/shared/types/css.d.ts

@@ -0,0 +1,4 @@
+declare module '*.css' {
+  const content: { [className: string]: string };
+  export default content;
+}

src/widgets/grid/Grid.tsx

@@ -2,49 +2,51 @@ import * as React from 'react';
 
 import { cn } from '@/shared';
 
-type ResponsiveGrid = Partial<{
-  base: number;
-  sm: number;
-  md: number;
-  lg: number;
-  xl: number;
-  '2xl': number;
-}>;
-
 type Props = {
-  columns: number | ResponsiveGrid;
+  cols: string;
   gap?: number;
+  maxWidth?:
+    | 'xs'
+    | 'sm'
+    | 'md'
+    | 'lg'
+    | 'xl'
+    | '2xl'
+    | '3xl'
+    | '4xl'
+    | '5xl'
+    | '6xl'
+    | '7xl'
+    | 'full'
+    | 'none';
+  justifyContent?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
 } & React.HTMLAttributes<HTMLDivElement>;
 
 export const Grid = ({
   children,
-  columns,
-  gap = 0,
+  cols,
+  gap,
+  maxWidth,
+  justifyContent,
   className,
   ...props
 }: Props) => {
-  const gridColsClass = getGridColsClass(columns);
-  const gapClass = `gap-[${gap}px]`;
-
+  const gapClass = gap ? `gap-${gap}` : '';
+  const maxWidthClass = maxWidth ? `max-w-${maxWidth}` : '';
+  const justifyContentClass = justifyContent ? `justify-${justifyContent}` : '';
   return (
     <div
-      className={cn('grid w-full', gridColsClass, gapClass, className)}
+      className={cn(
+        'grid w-full',
+        cols,
+        gapClass,
+        maxWidthClass,
+        justifyContentClass,
+        className,
+      )}
       {...props}
     >
       {children}
     </div>
   );
 };
-
-function getGridColsClass(columns: number | ResponsiveGrid) {
-  if (typeof columns === 'number') {
-    return `grid-cols-${columns}`;
-  }
-
-  return Object.entries(columns)
-    .map(([breakpoint, count]) => {
-      const prefix = breakpoint === 'base' ? '' : `${breakpoint}:`;
-      return `${prefix}grid-cols-${count}`;
-    })
-    .join(' ');
-}