codeit-momentum · gayeooon · Jun 25, 2025 · Jun 25, 2025 · Jun 25, 2025 · Jun 25, 2025
diff --git a/src/assets/svg/common/IcArrow.tsx b/src/assets/svg/common/IcArrow.tsx
diff --git a/src/assets/svg/moment/IcGaugeBar.tsx b/src/assets/svg/moment/IcGaugeBar.tsx
@@ -0,0 +1,35 @@
+const IcGaugeBar = () => {
+  return (
+    <svg
+      width="25"
+      height="22"
+      viewBox="0 0 25 22"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect width="25" height="22" fill="url(#pattern0_1225_500)" />
+      <defs>
+        <pattern
+          id="pattern0_1225_500"
+          patternContentUnits="objectBoundingBox"
+          width="1"
+          height="1"
+        >
+          <use
+            xlinkHref="#image0_1225_500"
+            transform="matrix(0.00480769 0 0 0.00543478 -0.115385 -0.217391)"
+          />
+        </pattern>
+        <image
+          id="image0_1225_500"
+          width="256"
+          height="256"
+          preserveAspectRatio="none"
+          xlinkHref="data:image/png;base64,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"
+        />
+      </defs>
+    </svg>
+  );
+};
+
+export default IcGaugeBar;
diff --git a/src/assets/svg/moment/IcMomentUpload.tsx b/src/assets/svg/moment/IcMomentUpload.tsx
@@ -1,20 +1,17 @@
 const IcMomentUpload = () => {
   return (
     <svg
+      xmlns="http://www.w3.org/2000/svg"
       width="95"
       height="95"
       viewBox="0 0 95 95"
       fill="none"
-      xmlns="http://www.w3.org/2000/svg"
     >
-      <g id="Moment_Image">
-        <rect width="95" height="95" rx="10" fill="#020202" />
-        <path
-          id="Image_Null"
-          d="M54.5 38H40.5C39.7044 38 38.9413 38.3161 38.3787 38.8787C37.8161 39.4413 37.5 40.2044 37.5 41V55C37.5 55.7956 37.8161 56.5587 38.3787 57.1213C38.9413 57.6839 39.7044 58 40.5 58H54.5C54.6645 57.9977 54.8284 57.981 54.99 57.95L55.29 57.88H55.36H55.41L55.78 57.74L55.91 57.67C56.01 57.61 56.12 57.56 56.22 57.49C56.3535 57.3918 56.4805 57.2849 56.6 57.17L56.67 57.08C56.7682 56.9805 56.8585 56.8735 56.94 56.76L57.03 56.63C57.0998 56.5187 57.1601 56.4016 57.21 56.28C57.2374 56.232 57.2609 56.1818 57.28 56.13C57.33 56.01 57.36 55.88 57.4 55.75V55.6C57.4567 55.4046 57.4903 55.2032 57.5 55V41C57.5 40.2044 57.1839 39.4413 56.6213 38.8787C56.0587 38.3161 55.2956 38 54.5 38ZM40.5 56C40.2348 56 39.9804 55.8946 39.7929 55.7071C39.6054 55.5196 39.5 55.2652 39.5 55V50.69L42.79 47.39C42.883 47.2963 42.9936 47.2219 43.1154 47.1711C43.2373 47.1203 43.368 47.0942 43.5 47.0942C43.632 47.0942 43.7627 47.1203 43.8846 47.1711C44.0064 47.2219 44.117 47.2963 44.21 47.39L52.81 56H40.5ZM55.5 55C55.4991 55.1233 55.4753 55.2453 55.43 55.36C55.4071 55.4087 55.3804 55.4556 55.35 55.5C55.3232 55.5423 55.2931 55.5825 55.26 55.62L49.91 50.27L50.79 49.39C50.883 49.2963 50.9936 49.2219 51.1154 49.1711C51.2373 49.1203 51.368 49.0942 51.5 49.0942C51.632 49.0942 51.7627 49.1203 51.8846 49.1711C52.0064 49.2219 52.117 49.2963 52.21 49.39L55.5 52.69V55ZM55.5 49.86L53.62 48C53.0477 47.457 52.2889 47.1543 51.5 47.1543C50.7111 47.1543 49.9523 47.457 49.38 48L48.5 48.88L45.62 46C45.0477 45.457 44.2889 45.1543 43.5 45.1543C42.7111 45.1543 41.9523 45.457 41.38 46L39.5 47.86V41C39.5 40.7348 39.6054 40.4804 39.7929 40.2929C39.9804 40.1054 40.2348 40 40.5 40H54.5C54.7652 40 55.0196 40.1054 55.2071 40.2929C55.3946 40.4804 55.5 40.7348 55.5 41V49.86ZM49 42C48.7033 42 48.4133 42.088 48.1666 42.2528C47.92 42.4176 47.7277 42.6519 47.6142 42.926C47.5006 43.2001 47.4709 43.5017 47.5288 43.7926C47.5867 44.0836 47.7296 44.3509 47.9393 44.5607C48.1491 44.7704 48.4164 44.9133 48.7074 44.9712C48.9983 45.0291 49.2999 44.9994 49.574 44.8858C49.8481 44.7723 50.0824 44.58 50.2472 44.3334C50.412 44.0867 50.5 43.7967 50.5 43.5C50.5 43.1022 50.342 42.7206 50.0607 42.4393C49.7794 42.158 49.3978 42 49 42Z"
-          fill="#DBDBDB"
-        />
-      </g>
+      <rect width="95" height="95" rx="10" fill="#020202" />
+      <path
+        d="M54.5 38H40.5C39.7044 38 38.9413 38.3161 38.3787 38.8787C37.8161 39.4413 37.5 40.2044 37.5 41V55C37.5 55.7956 37.8161 56.5587 38.3787 57.1213C38.9413 57.6839 39.7044 58 40.5 58H54.5C54.6645 57.9977 54.8284 57.981 54.99 57.95L55.29 57.88H55.36H55.41L55.78 57.74L55.91 57.67C56.01 57.61 56.12 57.56 56.22 57.49C56.3535 57.3918 56.4805 57.2849 56.6 57.17L56.67 57.08C56.7682 56.9805 56.8585 56.8735 56.94 56.76L57.03 56.63C57.0998 56.5187 57.1601 56.4016 57.21 56.28C57.2374 56.232 57.2609 56.1818 57.28 56.13C57.33 56.01 57.36 55.88 57.4 55.75V55.6C57.4567 55.4046 57.4903 55.2032 57.5 55V41C57.5 40.2044 57.1839 39.4413 56.6213 38.8787C56.0587 38.3161 55.2956 38 54.5 38ZM40.5 56C40.2348 56 39.9804 55.8946 39.7929 55.7071C39.6054 55.5196 39.5 55.2652 39.5 55V50.69L42.79 47.39C42.883 47.2963 42.9936 47.2219 43.1154 47.1711C43.2373 47.1203 43.368 47.0942 43.5 47.0942C43.632 47.0942 43.7627 47.1203 43.8846 47.1711C44.0064 47.2219 44.117 47.2963 44.21 47.39L52.81 56H40.5ZM55.5 55C55.4991 55.1233 55.4753 55.2453 55.43 55.36C55.4071 55.4087 55.3804 55.4556 55.35 55.5C55.3232 55.5423 55.2931 55.5825 55.26 55.62L49.91 50.27L50.79 49.39C50.883 49.2963 50.9936 49.2219 51.1154 49.1711C51.2373 49.1203 51.368 49.0942 51.5 49.0942C51.632 49.0942 51.7627 49.1203 51.8846 49.1711C52.0064 49.2219 52.117 49.2963 52.21 49.39L55.5 52.69V55ZM55.5 49.86L53.62 48C53.0477 47.457 52.2889 47.1543 51.5 47.1543C50.7111 47.1543 49.9523 47.457 49.38 48L48.5 48.88L45.62 46C45.0477 45.457 44.2889 45.1543 43.5 45.1543C42.7111 45.1543 41.9523 45.457 41.38 46L39.5 47.86V41C39.5 40.7348 39.6054 40.4804 39.7929 40.2929C39.9804 40.1054 40.2348 40 40.5 40H54.5C54.7652 40 55.0196 40.1054 55.2071 40.2929C55.3946 40.4804 55.5 40.7348 55.5 41V49.86ZM49 42C48.7033 42 48.4133 42.088 48.1666 42.2528C47.92 42.4176 47.7277 42.6519 47.6142 42.926C47.5006 43.2001 47.4709 43.5017 47.5288 43.7926C47.5867 44.0836 47.7296 44.3509 47.9393 44.5607C48.1491 44.7704 48.4164 44.9133 48.7074 44.9712C48.9983 45.0291 49.2999 44.9994 49.574 44.8858C49.8481 44.7723 50.0824 44.58 50.2472 44.3334C50.412 44.0867 50.5 43.7967 50.5 43.5C50.5 43.1022 50.342 42.7206 50.0607 42.4393C49.7794 42.158 49.3978 42 49 42Z"
+        fill="#FAED46"
+      />
     </svg>
   );
 };

diff --git a/src/assets/svg/moment/IcTitleBox.tsx b/src/assets/svg/moment/IcTitleBox.tsx
@@ -0,0 +1,35 @@
+const IcTitleBox = () => {
+  return (
+    <svg
+      width="192"
+      height="36"
+      viewBox="0 0 192 36"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect width="192" height="36" fill="url(#pattern0_1229_704)" />
+      <defs>
+        <pattern
+          id="pattern0_1229_704"
+          patternContentUnits="objectBoundingBox"
+          width="1"
+          height="1"
+        >
+          <use
+            xlinkHref="#image0_1229_704"
+            transform="matrix(0.00520833 0 0 0.0277778 -0.166667 -3)"
+          />
+        </pattern>
+        <image
+          id="image0_1229_704"
+          width="256"
+          height="256"
+          preserveAspectRatio="none"
+          xlinkHref="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAYAAABccqhmAAAFRUlEQVR4Ae3cMRKDMAwEQML/30xScqOKDse3qeQMRbQiN8YFx+FDgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAlPgM79YbX2e53e13+T3EHgqcF3X0v+x82kjriNAYD8BAbDfTHVE4LGAAHhM5UIC+wks93zimX+/m0xHt8BqZwJ2APdsVATqBARA3cg1TOAWEAC3hYpAncDrZwCe+evuOQ2HwNtnAnYAMQwlgTYBAdA2cf0SCAEBEBhKAm0CAqBt4volEAICIDCUBNoEBEDbxPVLIAQEQGAoCbQJCIC2ieuXQAgIgMBQEmgTEABtE9cvgRAQAIGhJNAmIADaJq5fAiEgAAJDSaBNQAC0TVy/BEJAAASGkkCbgABom7h+CYSAAAgMJYE2AQHQNnH9EggBARAYSgJtAq+/E3CCe0fgFLHeSeDtdwBOSzuAKWJNoEhAABQNW6sEpoAAmCLWBIoEljsDmPbOBKaI9T8JrPbMP+3sAKaINYEiAQFQNGytEpgCAmCKWBMgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQLbC/wAQGUURB/CJN8AAAAASUVORK5CYII="
+        />
+      </defs>
+    </svg>
+  );
+};
+
+export default IcTitleBox;
diff --git a/src/components/Moment/CheckList/CheckList.style.ts b/src/components/Moment/CheckList/CheckList.style.ts
@@ -1,30 +1,10 @@
 import styled from 'styled-components';
 
-export const CheckListLayout = styled.div`
-  ${({ theme: { mixin } }) => mixin.flexCenter()};
-  position: relative;
-  width: 100%;
-  padding: 4rem 2rem;
-  background-color: ${({ theme }) => theme.colors.blue};
-`;
-
-export const TitleSpan = styled.span`
-  position: absolute;
-  top: -1.9rem;
-  padding: 0.3rem 1.7rem;
-  border-radius: 1.5rem;
-  background-color: #000;
-  color: #fff;
-  text-align: center;
-  font-size: 18px;
-  line-height: 26px;
-`;
-
 export const InputContainer = styled.div`
   ${({ theme: { mixin } }) => mixin.flexBox({ align: 'flex-start' })};
   width: 100%;
   min-height: 4rem;
-  padding: 1rem;
+  padding: 1rem 0.5rem;
   gap: 1rem;
 `;
 

diff --git a/src/components/Moment/CheckList/CheckList.tsx b/src/components/Moment/CheckList/CheckList.tsx
@@ -4,7 +4,7 @@ import {
   handleResizeHeight,
   setBucketState,
 } from '../../../utils/moment';
-import { BucketType } from '../../../types/moment';
+import { BucketType, BucketItemType } from '../../../types/moment';
 import usePostBucket from '../../../hooks/queries/bucketList/usePostBucket';
 import usePatchBucket from '../../../hooks/queries/bucketList/usePatchBucket';
 import useResponseMessage from '../../../hooks/common/useResponseMessage';
@@ -39,6 +39,8 @@ const CheckList = ({ type }: CheckListProps) => {
   const useTypeHook = TypeHooks[type];
   const { data } = useTypeHook();
 
+  console.log(data);
+
   const hadleSubmitItem = (target: HTMLTextAreaElement) => {
     const trimmedItem = newItem.trim();
     if (!trimmedItem) return;
@@ -113,7 +115,9 @@ const CheckList = ({ type }: CheckListProps) => {
   };
 
   return (
-    <CheckListLayout title={type === 'REPEAT' ? '반복형' : '달성형'}>
+    <CheckListLayout
+      title={type === 'REPEAT' ? '반복형 버킷리스트' : '달성형 버킷리스트'}
+    >
       {/* 새 버킷리스트 추가 */}
       <S.InputContainer>
         <S.CheckBoxWrapper>
@@ -130,17 +134,23 @@ const CheckList = ({ type }: CheckListProps) => {
       </S.InputContainer>
 
       {/* 기존 버킷리스트 목록 */}
-      {data.buckets.map((item) => (
-        <CheckListItem
-          key={item.bucketID}
-          id={item.bucketID}
-          type={type}
-          value={item.content}
-          state={setBucketState(item.isCompleted, item.isChallenging)}
-          onUpdateItem={handleUpdateItem}
-          onDeleteItem={handleDeleteItem}
-        />
-      ))}
+      {data.buckets
+        .sort((a, b) => {
+          const priority = (item: BucketItemType) =>
+            item.isCompleted ? 2 : item.isChallenging ? 1 : 0;
+          return priority(a) - priority(b);
+        })
+        .map((item) => (
+          <CheckListItem
+            key={item.bucketID}
+            id={item.bucketID}
+            type={type}
+            value={item.content}
+            state={setBucketState(item.isCompleted, item.isChallenging)}
+            onUpdateItem={handleUpdateItem}
+            onDeleteItem={handleDeleteItem}
+          />
+        ))}
       <RenderModal />
       {isToastOpen && <Toast setToast={setIsToastOpen}>{toastMessage}</Toast>}
     </CheckListLayout>

diff --git a/src/components/Moment/CheckList/CheckListItem/CheckListItem.style.ts b/src/components/Moment/CheckList/CheckListItem/CheckListItem.style.ts
@@ -4,7 +4,7 @@ export const CheckListItemLayout = styled.div`
   ${({ theme: { mixin } }) => mixin.flexBox({ align: 'flex-start' })};
   width: 100%;
   min-height: 4rem;
-  padding: 1rem;
+  padding: 1rem 0.5rem;
   gap: 1rem;
 `;
 

diff --git a/src/components/Moment/ContainerLayout/ContainerLayout.style.ts b/src/components/Moment/ContainerLayout/ContainerLayout.style.ts
@@ -4,90 +4,76 @@ export const ContainerLayout = styled.div`
   ${({ theme: { mixin } }) => mixin.flexCenter()};
   position: relative;
   width: 33.5rem;
-  padding: 0.5rem 1.7rem;
+  padding: 1.5rem 2rem;
   background-color: ${({ theme }) => theme.colors.blue};
   color: ${({ theme }) => theme.colors.white};
 `;
 
-export const TitleSpan = styled.span`
-  padding: 0.5rem 1.6rem;
+export const TitleBox = styled.div`
+  position: relative;
+  ${({ theme: { mixin } }) => mixin.flexCenter()}
+  width: 19.2rem;
+  height: 3.6rem;
   margin-bottom: 1rem;
-  border-radius: 1.5rem;
-  background-color: ${({ theme }) => theme.colors.black};
+`;
+
+export const TitleSpan = styled.span`
+  position: absolute;
+  top: 0;
   text-align: center;
-  font-size: 18px;
+  font-size: 16px;
   border-radius: 1rem;
-  line-height: 20px;
+  line-height: 3.6rem;
 `;
 
 export const TopRightPixel = styled.div`
   position: absolute;
   top: 0;
   right: 0;
-  width: 1.7rem;
-  height: 1.2rem;
+  width: 2.2rem;
+  height: 0.6rem;
   background-color: ${({ theme }) => theme.colors.black};
-  &::after {
-    content: '';
-    position: absolute;
-    width: 1rem;
-    height: 0.6rem;
-    background-color: ${({ theme }) => theme.colors.blue};
-    left: 0;
-    bottom: 0;
-  }
+  box-shadow:
+    0.5rem 0.5rem 0 0 ${({ theme }) => theme.colors.black},
+    1.1rem 1.1rem 0 0 ${({ theme }) => theme.colors.black},
+    1.6rem 1.6rem 0 0 ${({ theme }) => theme.colors.black};
 `;
 
 export const TopLeftPixel = styled.div`
   position: absolute;
   top: 0;
   left: 0;
-  width: 1.7rem;
-  height: 1.2rem;
+  width: 2.2rem;
+  height: 0.6rem;
   background-color: ${({ theme }) => theme.colors.black};
-  &::after {
-    content: '';
-    position: absolute;
-    width: 1rem;
-    height: 0.6rem;
-    background-color: ${({ theme }) => theme.colors.blue};
-    right: 0;
-    bottom: 0;
-  }
+  box-shadow:
+    -0.5rem 0.5rem 0 0 ${({ theme }) => theme.colors.black},
+    -1.1rem 1.1rem 0 0 ${({ theme }) => theme.colors.black},
+    -1.6rem 1.6rem 0 0 ${({ theme }) => theme.colors.black};
 `;
 
 export const BottomRightPixel = styled.div`
   position: absolute;
   bottom: 0;
   right: 0;
-  width: 1.7rem;
-  height: 1.2rem;
+  width: 2.2rem;
+  height: 0.6rem;
   background-color: ${({ theme }) => theme.colors.black};
-  &::after {
-    content: '';
-    position: absolute;
-    width: 1rem;
-    height: 0.6rem;
-    background-color: ${({ theme }) => theme.colors.blue};
-    left: 0;
-    top: 0;
-  }
+  box-shadow:
+    0.5rem -0.5rem 0 0 ${({ theme }) => theme.colors.black},
+    1.1rem -1.1rem 0 0 ${({ theme }) => theme.colors.black},
+    1.6rem -1.6rem 0 0 ${({ theme }) => theme.colors.black};
 `;
 
 export const BottomLeftPixel = styled.div`
   position: absolute;
   bottom: 0;
   left: 0;
-  width: 1.7rem;
-  height: 1.2rem;
+  width: 2.2rem;
+  height: 0.6rem;
   background-color: ${({ theme }) => theme.colors.black};
-  &::after {
-    content: '';
-    position: absolute;
-    width: 1rem;
-    height: 0.6rem;
-    background-color: ${({ theme }) => theme.colors.blue};
-    right: 0;
-    top: 0;
-  }
+  box-shadow:
+    -0.5rem -0.5rem 0 0 ${({ theme }) => theme.colors.black},
+    -1.1rem -1.1rem 0 0 ${({ theme }) => theme.colors.black},
+    -1.6rem -1.6rem 0 0 ${({ theme }) => theme.colors.black};
 `;
diff --git a/src/components/Moment/ContainerLayout/ContainerLayout.tsx b/src/components/Moment/ContainerLayout/ContainerLayout.tsx
@@ -1,22 +1,19 @@
-import { CSSProperties, ReactNode } from 'react';
+import { ReactNode } from 'react';
 import * as S from './ContainerLayout.style';
+import IcTitleBox from '../../../assets/svg/moment/IcTitleBox';
 
 interface ContainerLayoutProps {
   title: string;
-  containerStyle?: CSSProperties;
-  titleStyle?: CSSProperties;
   children: ReactNode;
 }
 
-const ContainerLayout = ({
-  title,
-  containerStyle,
-  titleStyle,
-  children,
-}: ContainerLayoutProps) => {
+const ContainerLayout = ({ title, children }: ContainerLayoutProps) => {
   return (
-    <S.ContainerLayout style={containerStyle}>
-      <S.TitleSpan style={titleStyle}>{title}</S.TitleSpan>
+    <S.ContainerLayout>
+      <S.TitleBox>
+        <IcTitleBox />
+        <S.TitleSpan>{title}</S.TitleSpan>
+      </S.TitleBox>
       <S.TopRightPixel />
       <S.TopLeftPixel />
       <S.BottomRightPixel />

diff --git a/src/components/Moment/Create/MomentPlanSetup/MomentPlanSetup.style.ts b/src/components/Moment/Create/MomentPlanSetup/MomentPlanSetup.style.ts
@@ -3,10 +3,11 @@ import styled from 'styled-components';
 export const MomentPlanSetupLayout = styled.div`
   ${({ theme: { mixin } }) => mixin.flexCenter()};
   width: 100%;
+  gap: 2rem;
 `;
 
 export const PlanTitle = styled.h3`
-  margin-top: 3rem;
+  margin-top: 1rem;
   font-size: 16px;
   color: ${({ theme }) => theme.colors.white};
   text-align: center;