캐릭터 리스트 레이아웃 구현 완료

next.config.mjs

@@ -1,4 +1,13 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+  webpack(config) {
+    config.module.rules.push({
+      test: /\.svg$/,
+      use: ['@svgr/webpack']
+    })
 
-export default nextConfig;
+    return config
+  }
+}
+
+export default nextConfig

package.json

@@ -18,6 +18,7 @@
   },
   "devDependencies": {
     "@mswjs/http-middleware": "^0.10.1",
+    "@svgr/webpack": "^8.1.0",
     "@types/cors": "^2",
     "@types/eslint-plugin-jsx-a11y": "^6",
     "@types/express": "^4",

public/svgs/index.ts

@@ -0,0 +1,3 @@
+import Magnifier from './magnifier.svg'
+
+export { Magnifier }

src/app/(afterLogin)/home/_components/CharacterList.module.css

@@ -0,0 +1,111 @@
+.container {
+  max-width: 1240px;
+  margin: 0 auto;
+  padding: 0 20px;
+}
+
+.title {
+  font-size: 32px;
+  font-weight: 500;
+  margin: 40px 0 30px;
+}
+
+.searchContainer {
+  position: relative;
+}
+
+.magnifier {
+  position: absolute;
+  left: 0px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 20px;
+  height: 20px;
+}
+
+.searchInput {
+  width: 100%;
+  padding: 10px;
+  padding-left: 30px;
+
+  border: none;
+  border-bottom: 2px solid var(--color-black);
+}
+
+.searchInput:focus {
+  outline: none;
+}
+
+.resultCount {
+  color: var(--color-gray);
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.characterList {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+}
+
+.character {
+  min-width: 130px;
+  height: 315px;
+  flex: 1 1 calc(100% / 6 - 5px);
+  background-color: var(--color-black);
+  cursor: pointer;
+  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
+}
+
+.imageContainer {
+  position: relative;
+  width: 100%;
+  height: 55%;
+  overflow: hidden;
+}
+
+.imageContainer img {
+  width: 100%;
+  object-fit: cover;
+  transition: scale 0.3s ease-in-out;
+}
+
+.character:hover .imageContainer img {
+  scale: 1.1;
+}
+
+.description {
+  position: relative;
+  padding: 25px 0 0 10px;
+  height: 45%;
+}
+
+.description h4 {
+  position: relative;
+  margin: 0;
+  padding: 0;
+  color: var(--color-white);
+  font-size: 14px;
+  font-weight: 500;
+  z-index: 2;
+}
+
+.description::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 3px;
+  background-color: var(--color-red);
+  transition: height 0.3s ease-in-out;
+  z-index: 1;
+}
+
+.character:hover .description::before {
+  height: 100%;
+}

src/app/(afterLogin)/home/_components/CharacterList.tsx

@@ -0,0 +1,30 @@
+import Image from 'next/image'
+import styles from './CharacterList.module.css'
+import { Magnifier } from '../../../../../public/svgs'
+
+export default function CharacterList() {
+  return (
+    <div className={styles.container}>
+      <h2 className={styles.title}>MARVEL CHARACTER LIST</h2>
+      <form>
+        <div className={styles.searchContainer}>
+          <Magnifier className={styles.magnifier} />
+          <input type="text" placeholder="Search" className={styles.searchInput} />
+        </div>
+      </form>
+      <p className={styles.resultCount}>2837 RESULTS</p>
+      <ul className={styles.characterList}>
+        {[...Array(10)].map((_, index) => (
+          <li key={index} className={styles.character}>
+            <div className={styles.imageContainer}>
+              <Image src="/images/dummy_character.jpg" alt="dummy character" fill />
+            </div>
+            <div className={styles.description}>
+              <h4>AGENT MOBIUS</h4>
+            </div>
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}

src/app/(afterLogin)/home/page.tsx

@@ -1,14 +1,15 @@
-import { auth } from '@/auth'
+import CharacterList from './_components/CharacterList'
 import styles from './page.module.css'
 
 export default async function HomePage() {
-  const session = await auth()
   return (
     <div className={styles.container}>
       <header className={styles.header}>
         <h1>MARVEL CHARACTERS</h1>
         <p>Get hooked on a hearty helping of heroes and villains from the humble House of Ideas!</p>
       </header>
+
+      <CharacterList />
     </div>
   )
 }

src/app/globals.css

@@ -1,5 +1,8 @@
 :root {
   --color-white: #fff;
+  --color-black: #000;
+  --color-gray: #8e8e8e;
+  --color-red: #e62429;
 }
 
 * {