🌈 Design: 공통 컴포넌트 상태 및 기본값 추가 (진행 중) (#28)

router.jsx

@@ -1,4 +1,5 @@
 import BaseLayout from './src/components/layout/BaseLayout';
+import ComponentMuseum from './src/pages/ComponentMuseum';
 import MainPage from './src/pages/MainPage';
 
 export const routesConfig = [
@@ -18,6 +19,10 @@ export const routesConfig = [
                 path: '/missing',
                 element: <>Oh No</>,
             },
+            {
+                path: '/museum',
+                element: <ComponentMuseum />,
+            },
         ],
     },
 ];

src/assets/stylesheets/components/_mainModal.scss

@@ -194,8 +194,11 @@
 /* 리뷰 종합 섹션 */
 
 #review-total-score {
+    display: flex;
+    gap: 1.2rem;
     position: sticky;
     inset-block: 0;
+    border-block-end: 1px solid rgb(var(--clr-text) / 0.15);
     background-color: rgb(var(--clr-white));
     z-index: 2;
 }
@@ -243,6 +246,41 @@
 
 .review-ai-summary {
     // 몰래 넣어놔야지 히히
+    flex: 1;
+    margin: 0.8rem;
+    padding: 0.8rem;
+    border-radius: var(--rad-lg);
+    background-color: rgb(var(--clr-info) / 0.05);
+    font-size: var(--fnt-sm);
+}
+
+.ai-summary-title {
+    display: flex;
+    align-items: center;
+    gap: 0.2rem;
+    margin-block-end: 0.6rem;
+    width: fit-content;
+    background-image: linear-gradient(to right, blue, red, gold);
+    color: transparent;
+    font-weight: 900;
+    background-clip: text;
+
+    > .remix {
+        color: slateblue;
+    }
+}
+
+.ai-summary-content {
+    line-height: 1.4;
+    word-break: break-all;
+
+    &::before {
+        content: '“';
+    }
+
+    &::after {
+        content: '”';
+    }
 }
 
 /* _mainModal.scss */

src/assets/stylesheets/components/_modalFormInput.scss

@@ -40,8 +40,8 @@
 }
 
 #modal-form-textarea {
-    flex: 1;
     min-height: 3.6rem;
+    resize: vertical;
 }
 
 .modal-form-controls {

src/assets/stylesheets/components/_nametag.scss

@@ -1,10 +1,11 @@
+/* _nameTag.scss */
+
 .nametag-content {
+    flex-shrink: 0;
     display: flex;
     align-items: center;
     gap: 0.4rem;
     position: relative;
-    width: 3.5rem;
-    height: 1.25rem;
 
     &-icon {
         display: flex;
@@ -13,16 +14,30 @@
         width: 1.2rem;
         height: 1.2rem;
         background: rgb(var(--clr-gray));
-        border: 0.05rem solid rgba(0, 0, 0, 0.15);
+        border: 1px solid rgb(var(--clr-text) / 0.15);
         border-radius: var(--rad-full);
         position: relative;
+        overflow: clip;
+
+        > .remix {
+            color: rgb(var(--clr-white) / 0.5);
+            margin-block-start: 0.4rem;
+        }
+    }
+
+    &-user-image {
+        position: absolute;
+        inset: 0;
     }
 
     &-username {
+        max-width: 8rem;
         color: rgb(var(--clr-text));
-        overflow: hidden;
         font-size: var(--fnt-md);
         font-weight: 700;
-        max-width: 6rem;
+        text-overflow: ellipsis;
+        overflow: hidden;
     }
 }
+
+/* _nameTag.scss */

src/assets/stylesheets/components/_notificationCard.scss

@@ -245,6 +245,8 @@
     height: 2.4rem;
     background-color: rgb(var(--clr-white) / 0.75);
     backdrop-filter: blur(1.8rem);
+    font-size: var(--fnt-sm);
+    font-weight: 700;
 }
 
 /* _notificationCard.scss */

src/assets/stylesheets/components/_reviewItem.scss

@@ -33,13 +33,6 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-
-    > div:first-child {
-        width: 1.2rem;
-        height: 1.2rem;
-        border-radius: var(--rad-full);
-        background-color: rgb(var(--clr-gray));
-    }
 }
 
 .review-item-summary {