실습문제 3. CSS Styling

1) 모듈 css연습

• /css/index.css파일을 참고하여 UserList의 스타일과 BoardList의 전용 module.css로 분리하고, 컴포넌트에서 공통으로 사용하는 스타일은 Common.module.css로 작성하세요

• 분리한 스타일이 저장된 module.css를 현재 컴포넌트에 import하고 적절한 위치에서 사용하세요

css/index.css

/* ============================= */
/* BoardList 스타일 */
/* ============================= */
.title-board {
    color: darkgreen;
    font-size: 24px;
    text-align: center;
    background-color: #e0f2f1;
    padding: 10px;
    border-radius: 8px;
}

.board-list {
    font-size: 18px;
    margin-bottom: 8px;
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

/* ============================= */
/* UserList 스타일 */
/* ============================= */
.title-user {
    color: #2c3e50;
    font-size: 22px;
    text-align: left;
    margin-bottom: 12px;
    border-bottom: 2px solid #2c3e50;
}

.user-list {
    font-size: 18px;
    margin-bottom: 8px;
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

/* ============================= */
/* 공통 스타일 */
/* ============================= */
.list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.list-item {
    font-size: 18px;
    margin-bottom: 8px;
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

.highlight {
    background-color: #fff3cd;
}

.hoverable:hover {
    background-color: #f0f0f0;
}

/* 나이 강조 */
.age {
    font-weight: bold;
    color: #e67e22;
}

/* 작성자 스타일 */
.writer {
    font-style: italic;
    color: #16a085;
}

import './css/index.css';

const users = [
  { id: 1, name: '홍길동', age: 28 },
  { id: 2, name: '김영희', age: 34 },
  { id: 3, name: '박철수', age: 23 },
];

const posts = [
  { id: 1, title: '공지사항입니다.', writer: '관리자' },
  { id: 2, title: '새로운 기능 소개', writer: '홍길동' },
  { id: 3, title: '업데이트 예정 안내', writer: '김영희' },
];

function UserList() {
  return (
    <div>
      <h2 className="title-user">👤 사용자 목록</h2>
      <ul className="list">
        {users.map(user => (
          <li key={user.id} className="list-item hoverable">
            이름: {user.name} / 나이: <span className="age">{user.age}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}

function BoardList() {
  return (
    <div>
      <h2 className="title-board">📋 게시판 목록</h2>
      <ul className="list">
        {posts.map(post => (
          <li key={post.id} className="list-item hoverable">
            제목: <span className="highlight">{post.title}</span> / 작성자:{" "}
            <span className="writer">{post.writer}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default function ModuleCssPractice() {
  return (
    <div>
      <UserList />
      <BoardList />
    </div>
  );
}