Merge pull request #81 from codeit-maso/feature/Yun

🎨 style: edit 페이지 분리 / 애니메이션 추가 / 뒤로가기 버튼 추가 / 스켈레톤 ui 적용

Author: Yun-Jinwoo

src/App.jsx

@@ -15,7 +15,11 @@ export default function App() {
         <Route path="/" element={<Home />} />
         <Route path="/list" element={<RecipientList />} />
         <Route path="/post" element={<CreateRecipient />} />
-        <Route path="/post/:id" element={<Recipient />} />
+        <Route path="/post/:id" element={<Recipient showDelete={false} />} />
+        <Route
+          path="/post/:id/edit"
+          element={<Recipient showDelete={true} />}
+        />
         <Route path="/post/:id/message" element={<MessageForm />} />
       </Routes>
     </>

src/assets/styles/base.scss

@@ -27,11 +27,6 @@ html {
   font-size: 62.5%;
 }
 
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
 button {
   cursor: pointer;
 }

src/components/Card/Card.jsx

@@ -24,6 +24,7 @@ export default function Card({
   empty = false,
   onDelete,
   onClick,
+  showDelete,
 }) {
   const navigate = useNavigate();
   const sanitizedHTML = DOMPurify.sanitize(children);
@@ -41,11 +42,11 @@ export default function Card({
 
   return (
     <article
-      className={`${styles.card} ${empty ? styles['card--empty'] : ''}`}
-      onClick={() => !empty && onClick?.(id)}
+      className={`${styles.card} ${empty ? styles['card--empty'] : ''} ${showDelete ? styles['card--show'] : ''}`}
+      onClick={() => (empty ? clickPost() : onClick?.(id))}
     >
       {empty ? (
-        <div onClick={clickPost}>
+        <div>
           <img src={plus} alt="추가하기" />
         </div>
       ) : (
@@ -64,11 +65,13 @@ export default function Card({
                 <Badge relation={relationship} />
               </div>
             </div>
-            <div className={styles['card__delete-button']}>
-              <button onClick={clickDelete}>
-                <img src={deleteIcon} alt="쓰레기통 아이콘" />
-              </button>
-            </div>
+            {showDelete && (
+              <div className={styles['card__delete-button']}>
+                <button onClick={clickDelete}>
+                  <img src={deleteIcon} alt="쓰레기통 아이콘" />
+                </button>
+              </div>
+            )}
           </header>
           <div className={styles['card__body']}>
             <div className={styles['card__content']}>

src/components/Card/Card.module.scss

@@ -10,6 +10,12 @@
   box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.08);
   background: $white;
   gap: 16px;
+  transition: transform 0.2s ease;
+  cursor: pointer;
+
+  &:hover {
+    transform: scale(0.95);
+  }
 
   &.card--empty {
     display: flex;
@@ -23,6 +29,10 @@
     }
   }
 
+  &.card--show {
+    cursor: default;
+  }
+
   &__header {
     display: flex;
     gap: 14px;
@@ -91,6 +101,11 @@
       word-break: break-word;
       @include font-18-regular;
       color: $gray-600;
+      ul,
+      li,
+      a {
+        all: revert;
+      }
     }
   }
 
@@ -100,6 +115,18 @@
   }
 }
 
+@keyframes click-pop {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.03); // 살짝 커졌다가
+  }
+  100% {
+    transform: scale(1); // 다시 원래대로
+  }
+}
+
 @media (max-width: 1248px) {
   .card {
     width: inherit;

src/components/layout/Header/Header.module.scss

@@ -26,6 +26,8 @@
   border: 1px solid $gray-300;
   border-radius: 6px;
   white-space: nowrap;
+  color: inherit;
+  text-decoration: none;
 }
 
 @media (min-width: 361px) and (max-width: 768px) {

src/pages/CreateRecipient/CreateRecipient.jsx

@@ -16,13 +16,15 @@ export default function CreateRecipient() {
   const [selectedType, setSelectedType] = useState('color');
   const [selectedColor, setSelectedColor] = useState('beige');
   const [selectedImage, setSelectedImage] = useState(-1);
+  const [imageLoading, setImageLoading] = useState([]);
   const navigate = useNavigate();
 
   useEffect(() => {
     const fetch = async () => {
       try {
         const result = await getBackgroundImage();
         setData(result);
+        setImageLoading(new Array(result.length).fill(true));
       } catch (error) {
         console.error('데이터 로딩 실패:', error);
       }
@@ -52,6 +54,14 @@ export default function CreateRecipient() {
     setSelectedImage(index);
   }
 
+  function handleImageLoad(index) {
+    setImageLoading((prev) => {
+      const updated = [...prev];
+      updated[index] = false;
+      return updated;
+    });
+  }
+
   async function handleButtonClick() {
     try {
       const id = await postRecipient({
@@ -113,6 +123,7 @@ export default function CreateRecipient() {
             이미지
           </button>
         </div>
+
         {selectedType === 'color' && (
           <ul className={styles['create-page__color-list']}>
             {colors.map((color) => (
@@ -149,10 +160,17 @@ export default function CreateRecipient() {
                 }`}
                 onClick={() => handleImageClick(index)}
               >
+                {imageLoading[index] && (
+                  <div className={styles['create-page__skeleton']} />
+                )}
                 <img
                   src={url}
                   alt={`배경이미지${index + 1}`}
-                  className={styles['create-page__background-img']}
+                  className={`
+                    ${styles['create-page__background-img']} 
+                    ${imageLoading[index] ? styles['create-page__background-img--hidden'] : ''}
+                  `}
+                  onLoad={() => handleImageLoad(index)}
                 />
                 {selectedImage === index && (
                   <img
@@ -176,7 +194,6 @@ export default function CreateRecipient() {
           생성하기
         </Button>
       </div>
-
     </div>
   );
 }

src/pages/CreateRecipient/CreateRecipient.module.scss

@@ -64,6 +64,14 @@
       list-style: none;
       flex-shrink: 0;
       cursor: pointer;
+      transition:
+        transform 0.3s ease,
+        box-shadow 0.3s ease;
+
+      &:hover {
+        transform: scale(1.05);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+      }
     }
 
     .create-page__color--selected {
@@ -111,6 +119,14 @@
       overflow: hidden;
       flex-shrink: 0;
       cursor: pointer;
+      transition:
+        transform 0.3s ease,
+        box-shadow 0.3s ease;
+
+      &:hover {
+        transform: scale(1.05);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+      }
 
       .create-page__background-img {
         position: absolute;
@@ -137,6 +153,30 @@
   }
 }
 
+.create-page__skeleton {
+  width: 100%;
+  height: 100%;
+  background-color: #e0e0e0;
+  animation: skeleton-loading 1.2s infinite ease-in-out;
+  border-radius: 8px;
+}
+
+@keyframes skeleton-loading {
+  0% {
+    background-color: #e0e0e0;
+  }
+  50% {
+    background-color: #f0f0f0;
+  }
+  100% {
+    background-color: #e0e0e0;
+  }
+}
+
+.create-page__background-img--hidden {
+  display: none;
+}
+
 @media (max-width: 1024px) {
   .create-page {
     position: relative;

src/pages/Recipient/Recipient.jsx

@@ -10,7 +10,7 @@ import Button from '../../components/common/Button';
 import Modal from '../../components/Modal/Modal.jsx';
 import styles from './Recipient.module.scss';
 
-export default function Recipient() {
+export default function Recipient({ showDelete }) {
   const { id } = useParams();
   const [postData, setPostData] = useState(null);
   const [messages, setMessages] = useState([]);
@@ -107,6 +107,14 @@ export default function Recipient() {
     }
   }
 
+  function handleGoBack() {
+    navigate(-1);
+  }
+
+  function handleEditClick(id) {
+    navigate(`/post/${id}/edit`);
+  }
+
   function handleOpenModal(id) {
     setSelectedCardId(id);
   }
@@ -126,24 +134,36 @@ export default function Recipient() {
     <>
       <HeaderService recipient={postData} />
       <div
-        className={`${styles['post-container']} ${!postData.backgroundImageURL ? styles[`background--${postData.backgroundColor}`] : ''}`}
+        className={`${styles['post-container']} ${!postData.backgroundImageURL ? styles[`background--${postData.backgroundColor}`] : ''} ${showDelete ? styles[`background--gray`] : ''}`}
         style={
-          postData.backgroundImageURL
+          postData.backgroundImageURL && !showDelete
             ? { backgroundImage: `url(${postData.backgroundImageURL})` }
             : {}
         }
       >
         <div className={styles['button-container']}>
-          <Button
-            className={styles['delete-button']}
-            type="delete"
-            onClick={() => handleDeleteRecipient(id)}
-          >
-            삭제하기
-          </Button>
+          <div className={styles['back-button-wrapper']}>
+            <button className={styles['back-button']} onClick={handleGoBack}>
+              ← 뒤로가기
+            </button>
+          </div>
+
+          <div className={styles['action-button-wrapper']}>
+            {showDelete ? (
+              <Button type="delete" onClick={() => handleDeleteRecipient(id)}>
+                페이지 삭제하기
+              </Button>
+            ) : (
+              <Button type="delete" onClick={() => handleEditClick(id)}>
+                편집하기
+              </Button>
+            )}
+          </div>
         </div>
         <div className={styles['card-container']}>
-          <Card recipientId={id} empty={true} />
+          {!showDelete && (
+            <Card recipientId={id} empty={true} showDelete={showDelete} />
+          )}
           {messages.map((msg) => (
             <Card
               key={msg.id}
@@ -156,6 +176,7 @@ export default function Recipient() {
               onDelete={handleDeleteMessage}
               onClick={() => handleOpenModal(msg.id)}
               font={msg.font}
+              showDelete={showDelete}
             >
               {msg.content}
             </Card>