feat(common): add common UI components and apply MUI policy

CLAUDE.md

@@ -161,15 +161,27 @@ src/app/(page)/*/*.store.ts
 
 `features` 폴더는 사용하지 않는다.
 
+### MUI 사용 허용 범위
+
+```txt
+허용:
+- 달력 / 날짜 선택 UI: src/components/calendar/ 내 래핑 컴포넌트
+- 피드백 UI (Toast/Snackbar): src/components/feedback/ 내 래핑 컴포넌트
+- 아이콘: @mui/icons-material — 감정일기(diary) 기능 제외 전체 허용
+
+금지:
+- 감정일기(diary) 기능 내 아이콘은 lucide-react 사용 유지
+- 전체 디자인 시스템을 MUI 기반으로 전환하지 않는다.
+- 여러 페이지 / 도메인에서 MUI 컴포넌트를 직접 import하지 않는다.
+- MUI ThemeProvider를 앱 전역에 적용하지 않는다.
+- 전체 스타일 기준은 SCSS / SCSS Module을 유지한다.
+```
+
 ### Calendar UI Rules
 
 ```txt
 - 달력 UI는 MUI X Date Pickers 기반으로 구현한다.
-- MUI는 달력 / 날짜 선택 UI 전용으로만 사용한다. 전체 디자인 시스템에 적용하지 않는다.
-- 전체 스타일 기준은 SCSS / SCSS Module을 유지한다.
 - MUI 컴포넌트는 src/components/calendar/ 내 래핑 컴포넌트를 통해서만 사용한다.
-- 여러 페이지 / 도메인에서 MUI 컴포넌트를 직접 import하지 않는다.
-- 아이콘은 기존 lucide-react를 우선 사용한다.
 - 달력 라이브러리는 래핑 컴포넌트 구조로 교체 가능성을 확보한다.
 ```
 

docs/PROJECT_DECISIONS.md

@@ -227,6 +227,6 @@ SUPABASE_SERVICE_ROLE_KEY는 서버 전용
 - 전체 디자인 시스템은 SCSS / SCSS Module을 유지한다.
 - MUI는 달력 / 날짜 선택 UI 전용으로만 사용한다.
 - MUI 컴포넌트는 src/components/calendar/ 내 래핑 컴포넌트를 통해서만 사용한다.
-- 아이콘은 기존 lucide-react를 우선 사용한다.
+- 아이콘은 @mui/icons-material을 사용한다. 단, 감정일기(diary) 기능 내 아이콘은 lucide-react를 유지한다.
 - 달력 라이브러리는 래핑 컴포넌트 구조로 교체 가능성을 확보한다.
 ```

docs/TECH_STACK.md

@@ -39,8 +39,7 @@ dayjs
 
 - 전체 디자인 시스템을 MUI 기반으로 전환하지 않는다.
 - 기존 스타일 기준은 SCSS / SCSS Module을 유지한다.
-- 아이콘은 기존 `lucide-react` 사용을 우선한다.
-- `@mui/icons-material`은 현재 필수 설치 대상이 아니다.
+- 아이콘은 `@mui/icons-material`을 사용한다. 단, 감정일기(diary) 기능 내 아이콘은 `lucide-react`를 유지한다.
 - 달력 라이브러리는 추후 변경 가능하다. 변경 가능성을 확보하기 위해 MUI 의존성은 Calendar 전용 컴포넌트와 날짜 유틸 영역에만 제한한다.
 
 ---
@@ -76,7 +75,8 @@ npm install
 | `react-hook-form` | ^7.54.1 | 폼 상태 관리 |
 | `@hookform/resolvers` | ^3.9.1 | React Hook Form + Zod 연동 |
 | `zod` | ^3.23.8 | 스키마 유효성 검사 |
-| `lucide-react` | ^0.468.0 | 아이콘 라이브러리 |
+| `lucide-react` | ^0.468.0 | 아이콘 라이브러리 (감정일기 기능 전용 — 그 외는 @mui/icons-material 사용) |
+| `@mui/icons-material` | latest | MUI 아이콘 (감정일기 기능 제외 전체 사용) |
 | `recharts` | ^3.0.0 | 차트 라이브러리 (통계 시각화) |
 | `html-to-image` | ^1.11.11 | 판결 결과 카드 이미지 추출 |
 | `sass` | ^1.83.0 | SCSS / SCSS Module 스타일링 |

docs/guides/CODING_CONVENTION.md

@@ -90,16 +90,18 @@ API 응답에 불필요한 민감 정보 포함 금지
 
 ## 7. MUI 사용 기준
 
-MUI는 달력 / 날짜 선택 UI 전용으로만 사용한다.
+MUI는 아래 허용 범위 내에서만 사용한다.
 
 ```txt
 허용 범위:
-  src/components/calendar/ 내 래핑 컴포넌트에서만 MUI import 허용
+  src/components/calendar/  → MUI X Date Pickers (달력 / 날짜 선택 UI)
+  src/components/feedback/  → MUI Snackbar 등 (Toast 피드백 UI)
+  @mui/icons-material       → 감정일기(diary) 기능 제외 전체 허용
 
 금지 사항:
+  - 감정일기(diary) 기능 내 아이콘은 lucide-react 사용 유지
   - 전체 디자인 시스템을 MUI 기반으로 전환하지 않는다
   - 여러 페이지 / 도메인에서 MUI 컴포넌트를 직접 import하지 않는다
-  - @mui/icons-material 사용 금지 (아이콘은 lucide-react 사용)
   - MUI ThemeProvider를 앱 전역에 적용하지 않는다
 ```
 
@@ -114,7 +116,7 @@ MUI는 달력 / 날짜 선택 UI 전용으로만 사용한다.
 래핑 컴포넌트 원칙:
 
 ```txt
-- 달력 UI는 src/components/calendar/ 내 래핑 컴포넌트로 제공한다
+- MUI 컴포넌트는 각 허용 폴더 내 래핑 컴포넌트를 통해서만 사용한다
 - 래핑 컴포넌트를 통해 라이브러리 교체 가능성을 유지한다
 - 래핑 컴포넌트 외부에서는 MUI 직접 의존을 갖지 않는다
 ```

package.json

@@ -19,6 +19,7 @@
     "@emotion/styled": "^11.14.1",
     "@google/generative-ai": "^0.21.0",
     "@hookform/resolvers": "^3.9.1",
+    "@mui/icons-material": "^9.1.1",
     "@mui/material": "^9.1.1",
     "@mui/x-date-pickers": "^9.5.0",
     "@prisma/client": "^6.0.0",

src/components/feedback/Toast.module.scss

@@ -2,12 +2,8 @@
 @use '../../styles/abstracts/functions' as fn;
 
 .toast {
-  position: fixed;
-  top: fn.r(20);
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 9999;
-  width: calc(100% - fn.r(32));
+  width: calc(100vw - fn.r(32));
+  max-width: calc(v.$container-max-width - fn.r(32));
   padding: fn.r(14) fn.r(20);
   background-color: v.$color-black-600;
   color: var(--text-inverse);
@@ -17,11 +13,6 @@
   font-weight: v.$font-weight-medium;
   line-height: v.$line-height-body-s;
   text-align: center;
-  pointer-events: none;
   word-break: keep-all;
   overflow-wrap: break-word;
-
-  &--hidden {
-    display: none;
-  }
 }