🎨style: 메인 페이지 및 공통 컴포넌트 반응현 구현

🎨style: 메인 페이지 및 공통 컴포넌트 반응현 구현

Author: minimo-9

src/api/fetchProfileImages.js src/api/getProfileImages.jssrc/api/fetchProfileImages.js renamed to src/api/getProfileImages.js

@@ -1,6 +1,6 @@
 import { api } from './api';
 
-export default async function fetchProfileImages() {
+export default async function getProfileImages() {
   try {
     const res = await api.get('/profile-images/');
     return res.data.imageUrls;

src/api/createMessage.js src/api/postMessage.jssrc/api/createMessage.js renamed to src/api/postMessage.js

@@ -9,7 +9,8 @@ export default async function createMessage({
   content,
   font,
 }) {
-  const res = await api.post(`/${team}/recipients/${recipientId}/messages/`, {
+  const teamId = import.meta.env.VITE_TEAM_ID;
+  const res = await api.post(`/${teamId}/recipients/${recipientId}/messages/`, {
     team,
     recipientId,
     sender,

src/assets/images/logo.svg

@@ -1,7 +1,7 @@
-import { useMemo, useEffect } from 'react';
+import { useMemo, useEffect, useRef } from 'react';
 import ReactQuill from 'react-quill';
 import 'react-quill/dist/quill.snow.css';
-import styled from './Editor.module.scss';
+import styles from './Editor.module.scss';
 
 const formats = [
   'bold',
@@ -21,40 +21,49 @@ const fontFamilyMap = {
   'Noto Sans': '"Noto Sans", sans-serif',
 };
 
-export default function Editor({ value, onChange, font }) {
+export default function Editor({ value, onChange, font, onBlur, isError }) {
+  const quillRef = useRef();
+
   const modules = useMemo(() => {
     return {
       toolbar: [
         ['bold', 'italic', 'underline'],
         [{ align: [] }],
+        [{ color: [] }, { background: [] }],
         [{ list: 'ordered' }, { list: 'bullet' }],
         ['link'],
-        [{ color: [] }, { background: [] }],
       ],
     };
   }, []);
 
   useEffect(() => {
-    const editorElement = document.querySelector('.ql-editor');
-    if (editorElement) {
-      editorElement.style.fontFamily = fontFamilyMap[font];
-      editorElement.style.fontSize = '18px';
+    const editorRoot = quillRef.current?.editor?.root;
+    if (editorRoot) {
+      editorRoot.style.fontFamily = fontFamilyMap[font];
+      editorRoot.style.fontSize = '18px';
     }
   }, [font]);
 
   return (
-    <div className={styled['editor']}>
-      <h2 className={styled['editor__title']}>내용을 입력해 주세요</h2>
+    <div className={styles['editor']}>
+      <h2 className={styles['editor__title']}>내용을 입력해 주세요</h2>
 
-      <div className={styled['editor__box']}>
+      <div
+        className={`${styles['editor__box']} ${isError ? styles['editor__box--error'] : ''}`}
+      >
         <ReactQuill
+          ref={quillRef}
           theme="snow"
           modules={modules}
           formats={formats}
           value={value}
           onChange={onChange}
+          onBlur={onBlur}
           placeholder="전하고 싶은 메시지를 적어보세요."
         />
+        {isError && (
+          <p className={styles['editor__error-message']}>값을 입력해 주세요.</p>
+        )}
       </div>
     </div>
   );

src/components/Editor/Editor.jsx

@@ -3,17 +3,27 @@
 .editor {
   display: flex;
   flex-direction: column;
-  width: 72rem;
-  height: 30.8rem;
+  max-width: 720px;
+  min-width: 320px;
+  width: 100%;
   gap: 12px;
 
   &__box {
     height: 260px;
+    margin-bottom: 4px;
     border: 1px solid $gray-300;
     border-radius: 8px;
+
+    &--error {
+      border: 1px solid $error;
+      color: $gray-900;
+    }
   }
 
   :global(.ql-toolbar) {
+    display: flex;
+    align-items: center;
+    height: 49px;
     border: none;
     border-bottom: 1px;
     border-top-right-radius: 8px;
@@ -22,7 +32,10 @@
   }
 
   :global(.ql-container) {
-    height: 215px;
+    max-width: 688px;
+    min-width: 288px;
+    height: 178px;
+    margin: 16px;
     border: none;
   }
 
@@ -31,4 +44,24 @@
     @include font-24-bold;
     color: $gray-900;
   }
+
+  &__error-message {
+    @include font-12-regular;
+    color: $error;
+  }
+
+  @media (max-width: 767px) {
+    & {
+      max-width: 320px;
+    }
+    :global(.ql-toolbar button),
+    :global(.ql-toolbar .ql-picker) {
+      width: 24px;
+    }
+
+    :global(.ql-toolbar .ql-color-picker),
+    :global(.ql-toolbar .ql-icon-picker) {
+      width: 24px;
+    }
+  }
 }

src/components/Editor/Editor.module.scss

@@ -11,14 +11,12 @@ const fontClassMap = {
   '나눔손글씨 손편지체': styles['font-naunm-hand'],
 };
 
-export default function FontSelect({ defaultValue = 'Noto Sans', onChange }) {
+export default function FontSelect({ value = 'Noto Sans', onChange }) {
   const dropdownRef = useRef(null);
   const id = useId();
-  const [selected, setSelected] = useState(defaultValue);
   const [isOpen, setIsOpen] = useDetectClose(dropdownRef);
 
   const handleSelect = (font) => {
-    setSelected(font);
     onChange?.(font);
     setIsOpen(false);
   };
@@ -32,10 +30,10 @@ export default function FontSelect({ defaultValue = 'Noto Sans', onChange }) {
         <button
           id={id}
           type="button"
-          className={`${styles['dropdown__button']} ${fontClassMap[selected]}`}
+          className={`${styles['dropdown__button']} ${fontClassMap[value]}`}
           onClick={() => setIsOpen((prev) => !prev)}
         >
-          {selected}
+          {value}
           <span
             className={`${styles.dropdown__arrow} ${isOpen ? styles.open : ''}`}
           />

src/components/FontSelect/FontSelect.jsx

@@ -4,7 +4,6 @@
   display: flex;
   flex-direction: column;
   width: 320px;
-  height: 98px;
   gap: 12px;
 
   &__label {
@@ -17,6 +16,7 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
+    position: relative;
     width: 286px;
     height: 24px;
     padding: 12px 16px;
@@ -57,6 +57,7 @@
     display: flex;
     justify-content: space-between;
     flex-direction: column;
+    position: static;
     width: 318px;
     height: 220px;
     margin-top: 8px;
@@ -68,8 +69,7 @@
   }
 
   &__item {
-    width: 316px;
-    height: 50px;
+    width: 318px;
     padding: 12px 16px;
     @include font-16-regular;
     color: $gray-900;
@@ -78,6 +78,11 @@
       background-color: $gray-100;
     }
   }
+  @media (max-width: 767px) {
+    &__list {
+      position: absolute;
+    }
+  }
 }
 
 .font-noto {

src/components/FontSelect/FontSelect.module.scss

@@ -4,17 +4,12 @@ import styles from './RelationshipSelect.module.scss';
 
 const OPTIONS = ['친구', '지인', '동료', '가족'];
 
-export default function RelationshipSelect({
-  defaultValue = '지인',
-  onChange,
-}) {
+export default function RelationshipSelect({ value = '지인', onChange }) {
   const dropdownRef = useRef(null);
   const id = useId();
-  const [selected, setSelected] = useState(defaultValue);
   const [isOpen, setIsOpen] = useDetectClose(dropdownRef);
 
   const handleSelect = (option) => {
-    setSelected(option);
     onChange?.(option);
     setIsOpen(false);
   };
@@ -31,7 +26,7 @@ export default function RelationshipSelect({
           className={styles['dropdown__button']}
           onClick={() => setIsOpen((prev) => !prev)}
         >
-          {selected}
+          {value}
           <span
             className={`${styles.dropdown__arrow} ${isOpen ? styles.open : ''}`}
           />

src/components/RelationshipSelect/RelationshipSelect.jsx

@@ -4,7 +4,6 @@
   display: flex;
   flex-direction: column;
   width: 320px;
-  height: 98px;
   gap: 12px;
 
   &__label {
@@ -17,6 +16,7 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
+    position: relative;
     width: 286px;
     height: 24px;
     padding: 12px 16px;
@@ -57,19 +57,20 @@
     display: flex;
     justify-content: space-between;
     flex-direction: column;
+    position: absolute;
     width: 318px;
     height: 220px;
     margin-top: 8px;
     padding: 10px 1px;
     border: 1px solid $gray-300;
     border-radius: 8px;
     background-color: $white;
+    z-index: 1;
     list-style: none;
   }
 
   &__item {
-    width: 316px;
-    height: 50px;
+    width: 318px;
     padding: 12px 16px;
     @include font-16-regular;
     color: $gray-900;

src/components/RelationshipSelect/RelationshipSelect.module.scss

@@ -1,31 +1,28 @@
 import { useEffect, useState } from 'react';
-import fetchProfileImages from '../../api/fetchProfileImages.js';
+import getProfileImages from '../../api/getProfileImages.js';
 import DEFAULT_PROFILE_IMAGE from '../../constants/image.js';
 import styles from './UserProfileSelector.module.scss';
 
-export default function UserProfileSelector({ onSelect }) {
+export default function UserProfileSelector({
+  value = DEFAULT_PROFILE_IMAGE,
+  onSelect,
+}) {
   const [profileImages, setProfileImages] = useState([]);
-  const [selectedImage, setSelectedImage] = useState(DEFAULT_PROFILE_IMAGE);
 
   useEffect(() => {
     const loadImages = async () => {
-      const images = await fetchProfileImages();
+      const images = await getProfileImages();
       setProfileImages(images);
     };
     loadImages();
   }, []);
 
-  const handleSelect = (url) => {
-    setSelectedImage(url);
-    onSelect?.(url);
-  };
-
   return (
     <div className={styles['profile-select']}>
       <h2 className={styles['profile-select__title']}>프로필 이미지</h2>
       <div className={styles['profile-select__content']}>
         <img
-          src={selectedImage}
+          src={value}
           alt="선택된 프로필"
           className={styles['profile-select__selected-image']}
         />
@@ -40,11 +37,9 @@ export default function UserProfileSelector({ onSelect }) {
                 src={url}
                 alt={`profile-${idx}`}
                 className={`${styles['profile-select__image']} ${
-                  selectedImage === url
-                    ? styles['profile-select__image--selected']
-                    : ''
+                  value === url ? styles['profile-select__image--selected'] : ''
                 }`}
-                onClick={() => handleSelect(url)}
+                onClick={() => onSelect?.(url)}
               />
             ))}
           </div>