Merge pull request #187 from depromeet/186-chore-마이페이지-스타일링-개선

prgmr99 · web-flow · commit c4b0037d02c7 · 2025-05-09T22:06:41.000+09:00
style: 마이페이지 나의 회고, 아이콘 및 색상 적용
diff --git a/public/icons/mypage/concentrations/Thunder.svg b/public/icons/mypage/concentrations/Thunder.svg
@@ -0,0 +1,21 @@
+<svg width="21" height="23" viewBox="0 0 21 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Gp/Thunder" filter="url(#filter0_d_3116_70220)">
+<path id="Vector" fill-rule="evenodd" clip-rule="evenodd" d="M14.1598 9.3606H11.0665V6.29393C11.0665 4.99393 9.57313 4.3806 8.77979 5.3606L6.51313 8.1406L3.87313 11.3806C3.12646 12.2939 3.72646 13.7273 4.85313 13.7273H7.94646V16.7273C7.94646 18.0206 9.43979 18.6206 10.2331 17.6539L12.4998 14.9006L15.1398 11.6873C15.8865 10.7806 15.2865 9.3606 14.1598 9.3606Z" fill="url(#paint0_linear_3116_70220)"/>
+</g>
+<defs>
+<filter id="filter0_d_3116_70220" x="-1.5" y="-0.5" width="24" height="24" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="1"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3116_70220"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3116_70220" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_3116_70220" x1="9.50646" y1="4.87793" x2="9.50646" y2="18.1309" gradientUnits="userSpaceOnUse">
+<stop stop-color="#DD6875"/>
+<stop offset="1" stop-color="#ED98A2"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/public/icons/mypage/concentrations/Thunder2.svg b/public/icons/mypage/concentrations/Thunder2.svg
@@ -0,0 +1,17 @@
+<svg width="21" height="23" viewBox="0 0 21 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Gp/Thunder" filter="url(#filter0_d_3116_70237)">
+<path id="Vector" fill-rule="evenodd" clip-rule="evenodd" d="M14.1598 9.3606H11.0665V6.29393C11.0665 4.99393 9.57313 4.3806 8.77979 5.3606L6.51313 8.1406L3.87313 11.3806C3.12646 12.2939 3.72646 13.7273 4.85313 13.7273H7.94646V16.7273C7.94646 18.0206 9.43979 18.6206 10.2331 17.6539L12.4998 14.9006L15.1398 11.6873C15.8865 10.7806 15.2865 9.3606 14.1598 9.3606Z" fill="#7E8999"/>
+</g>
+<defs>
+<filter id="filter0_d_3116_70237" x="-1.5" y="-0.5" width="24" height="24" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="1"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3116_70237"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3116_70237" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/public/icons/mypage/concentrations/Thunder3.svg b/public/icons/mypage/concentrations/Thunder3.svg
@@ -0,0 +1,17 @@
+<svg width="21" height="23" viewBox="0 0 21 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Gp/Thunder" filter="url(#filter0_d_3116_70254)">
+<path id="Vector" fill-rule="evenodd" clip-rule="evenodd" d="M14.1598 9.3606H11.0665V6.29393C11.0665 4.99393 9.57313 4.3806 8.77979 5.3606L6.51313 8.1406L3.87313 11.3806C3.12646 12.2939 3.72646 13.7273 4.85313 13.7273H7.94646V16.7273C7.94646 18.0206 9.43979 18.6206 10.2331 17.6539L12.4998 14.9006L15.1398 11.6873C15.8865 10.7806 15.2865 9.3606 14.1598 9.3606Z" fill="#6B6BE1"/>
+</g>
+<defs>
+<filter id="filter0_d_3116_70254" x="-1.5" y="-0.5" width="24" height="24" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="1"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3116_70254"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3116_70254" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/public/icons/mypage/concentrations/Thunder4.svg b/public/icons/mypage/concentrations/Thunder4.svg
@@ -0,0 +1,22 @@
+<svg width="21" height="23" viewBox="0 0 21 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Gp/Thunder" filter="url(#filter0_d_3116_70271)">
+<path id="Vector" fill-rule="evenodd" clip-rule="evenodd" d="M14.1598 9.3606H11.0665V6.29393C11.0665 4.99393 9.57313 4.3806 8.77979 5.3606L6.51313 8.1406L3.87313 11.3806C3.12646 12.2939 3.72646 13.7273 4.85313 13.7273H7.94646V16.7273C7.94646 18.0206 9.43979 18.6206 10.2331 17.6539L12.4998 14.9006L15.1398 11.6873C15.8865 10.7806 15.2865 9.3606 14.1598 9.3606Z" fill="url(#paint0_linear_3116_70271)"/>
+</g>
+<defs>
+<filter id="filter0_d_3116_70271" x="-1.5" y="-0.5" width="24" height="24" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="1"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3116_70271"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3116_70271" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_3116_70271" x1="15.0374" y1="18.2442" x2="3.71156" y2="18.5079" gradientUnits="userSpaceOnUse">
+<stop stop-color="#DDD9F8"/>
+<stop offset="0.273644" stop-color="#E4E4FF"/>
+<stop offset="0.610199" stop-color="#CCE4FF"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/public/icons/mypage/concentrations/Thunder5.svg b/public/icons/mypage/concentrations/Thunder5.svg
@@ -0,0 +1,17 @@
+<svg width="21" height="23" viewBox="0 0 21 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Gp/Thunder" filter="url(#filter0_d_3116_70288)">
+<g clip-path="url(#paint0_angular_3116_70288_clip_path)" data-figma-skip-parse="true"><g transform="matrix(-0.00411515 0.0080512 -0.00724623 -0.00457229 9.50646 11.5044)"><foreignObject x="-1080.88" y="-1080.88" width="2161.76" height="2161.76"><div xmlns="http://www.w3.org/1999/xhtml" style="background:conic-gradient(from 90deg,rgba(204, 227, 255, 1) 0deg,rgba(187, 187, 241, 1) 50.0592deg,rgba(184, 226, 251, 1) 85.9386deg,rgba(242, 239, 232, 1) 134.974deg,rgba(204, 227, 255, 1) 172.049deg,rgba(187, 187, 241, 1) 224.672deg,rgba(199, 237, 235, 1) 259.355deg,rgba(231, 245, 235, 1) 298.822deg,rgba(242, 240, 231, 1) 328.722deg,rgba(204, 227, 255, 1) 360deg);height:100%;width:100%;opacity:1"></div></foreignObject></g></g><path id="Vector" fill-rule="evenodd" clip-rule="evenodd" d="M14.1598 9.3606H11.0665V6.29393C11.0665 4.99393 9.57313 4.3806 8.77979 5.3606L6.51313 8.1406L3.87313 11.3806C3.12646 12.2939 3.72646 13.7273 4.85313 13.7273H7.94646V16.7273C7.94646 18.0206 9.43979 18.6206 10.2331 17.6539L12.4998 14.9006L15.1398 11.6873C15.8865 10.7806 15.2865 9.3606 14.1598 9.3606Z" data-figma-gradient-fill="{&#34;type&#34;:&#34;GRADIENT_ANGULAR&#34;,&#34;stops&#34;:[{&#34;color&#34;:{&#34;r&#34;:0.80188393592834473,&#34;g&#34;:0.89301735162734985,&#34;b&#34;:1.0,&#34;a&#34;:1.0},&#34;position&#34;:0.0},{&#34;color&#34;:{&#34;r&#34;:0.73333334922790527,&#34;g&#34;:0.73333334922790527,&#34;b&#34;:0.94509804248809814,&#34;a&#34;:1.0},&#34;position&#34;:0.13905346393585205},{&#34;color&#34;:{&#34;r&#34;:0.72156864404678345,&#34;g&#34;:0.88627451658248901,&#34;b&#34;:0.98431372642517090,&#34;a&#34;:1.0},&#34;position&#34;:0.23871821165084839},{&#34;color&#34;:{&#34;r&#34;:0.94901961088180542,&#34;g&#34;:0.93725490570068359,&#34;b&#34;:0.90980392694473267,&#34;a&#34;:1.0},&#34;position&#34;:0.37492668628692627},{&#34;color&#34;:{&#34;r&#34;:0.80188393592834473,&#34;g&#34;:0.89301735162734985,&#34;b&#34;:1.0,&#34;a&#34;:1.0},&#34;position&#34;:0.47791361808776855},{&#34;color&#34;:{&#34;r&#34;:0.73333334922790527,&#34;g&#34;:0.73333334922790527,&#34;b&#34;:0.94509804248809814,&#34;a&#34;:1.0},&#34;position&#34;:0.62408852577209473},{&#34;color&#34;:{&#34;r&#34;:0.78039216995239258,&#34;g&#34;:0.92941176891326904,&#34;b&#34;:0.92156863212585449,&#34;a&#34;:1.0},&#34;position&#34;:0.72043114900588989},{&#34;color&#34;:{&#34;r&#34;:0.90588235855102539,&#34;g&#34;:0.96078431606292725,&#34;b&#34;:0.92156863212585449,&#34;a&#34;:1.0},&#34;position&#34;:0.83006232976913452},{&#34;color&#34;:{&#34;r&#34;:0.94901961088180542,&#34;g&#34;:0.94117647409439087,&#34;b&#34;:0.90588235855102539,&#34;a&#34;:1.0},&#34;position&#34;:0.91311627626419067}],&#34;stopsVar&#34;:[{&#34;color&#34;:{&#34;r&#34;:0.80188393592834473,&#34;g&#34;:0.89301735162734985,&#34;b&#34;:1.0,&#34;a&#34;:1.0},&#34;position&#34;:0.0},{&#34;color&#34;:{&#34;r&#34;:0.73333334922790527,&#34;g&#34;:0.73333334922790527,&#34;b&#34;:0.94509804248809814,&#34;a&#34;:1.0},&#34;position&#34;:0.13905346393585205},{&#34;color&#34;:{&#34;r&#34;:0.72156864404678345,&#34;g&#34;:0.88627451658248901,&#34;b&#34;:0.98431372642517090,&#34;a&#34;:1.0},&#34;position&#34;:0.23871821165084839},{&#34;color&#34;:{&#34;r&#34;:0.94901961088180542,&#34;g&#34;:0.93725490570068359,&#34;b&#34;:0.90980392694473267,&#34;a&#34;:1.0},&#34;position&#34;:0.37492668628692627},{&#34;color&#34;:{&#34;r&#34;:0.80188393592834473,&#34;g&#34;:0.89301735162734985,&#34;b&#34;:1.0,&#34;a&#34;:1.0},&#34;position&#34;:0.47791361808776855},{&#34;color&#34;:{&#34;r&#34;:0.73333334922790527,&#34;g&#34;:0.73333334922790527,&#34;b&#34;:0.94509804248809814,&#34;a&#34;:1.0},&#34;position&#34;:0.62408852577209473},{&#34;color&#34;:{&#34;r&#34;:0.78039216995239258,&#34;g&#34;:0.92941176891326904,&#34;b&#34;:0.92156863212585449,&#34;a&#34;:1.0},&#34;position&#34;:0.72043114900588989},{&#34;color&#34;:{&#34;r&#34;:0.90588235855102539,&#34;g&#34;:0.96078431606292725,&#34;b&#34;:0.92156863212585449,&#34;a&#34;:1.0},&#34;position&#34;:0.83006232976913452},{&#34;color&#34;:{&#34;r&#34;:0.94901961088180542,&#34;g&#34;:0.94117647409439087,&#34;b&#34;:0.90588235855102539,&#34;a&#34;:1.0},&#34;position&#34;:0.91311627626419067}],&#34;transform&#34;:{&#34;m00&#34;:-8.2302932739257812,&#34;m01&#34;:-14.492467880249023,&#34;m02&#34;:20.867839813232422,&#34;m10&#34;:16.102407455444336,&#34;m11&#34;:-9.1445798873901367,&#34;m12&#34;:8.0255212783813477},&#34;opacity&#34;:1.0,&#34;blendMode&#34;:&#34;NORMAL&#34;,&#34;visible&#34;:true}"/>
+</g>
+<defs>
+<filter id="filter0_d_3116_70288" x="-1.5" y="-0.5" width="24" height="24" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="1"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3116_70288"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3116_70288" result="shape"/>
+</filter>
+<clipPath id="paint0_angular_3116_70288_clip_path"><path id="Vector" fill-rule="evenodd" clip-rule="evenodd" d="M14.1598 9.3606H11.0665V6.29393C11.0665 4.99393 9.57313 4.3806 8.77979 5.3606L6.51313 8.1406L3.87313 11.3806C3.12646 12.2939 3.72646 13.7273 4.85313 13.7273H7.94646V16.7273C7.94646 18.0206 9.43979 18.6206 10.2331 17.6539L12.4998 14.9006L15.1398 11.6873C15.8865 10.7806 15.2865 9.3606 14.1598 9.3606Z"/></clipPath></defs>
+</svg>
diff --git a/public/icons/mypage/satisfactions/Heart.svg b/public/icons/mypage/satisfactions/Heart.svg
@@ -0,0 +1,21 @@
+<svg width="22" height="21" viewBox="0 0 22 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Gp/Heart" filter="url(#filter0_d_3116_70213)">
+<path id="Vector" fill-rule="evenodd" clip-rule="evenodd" d="M15.5268 6.03363C14.7468 5.16697 13.8334 4.47363 12.7534 4.47363C11.7734 4.47363 10.7934 4.80697 10.0001 5.49363C9.20678 4.81363 8.22678 4.47363 7.24678 4.47363C6.16678 4.47363 5.26011 5.1603 4.47345 6.03363C3.35345 7.27363 2.95344 9.4203 4.04011 11.4403C5.13345 13.4936 7.95344 15.467 9.28678 16.3203C9.72011 16.6003 10.2801 16.6003 10.7201 16.3203C12.0534 15.467 14.8668 13.4936 15.9668 11.4403C17.0468 9.41363 16.6468 7.27363 15.5334 6.03363H15.5268Z" fill="url(#paint0_linear_3116_70213)"/>
+</g>
+<defs>
+<filter id="filter0_d_3116_70213" x="-1" y="-1.5" width="24" height="24" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="1"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3116_70213"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3116_70213" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_3116_70213" x1="10.001" y1="4.47363" x2="10.001" y2="16.5303" gradientUnits="userSpaceOnUse">
+<stop stop-color="#DD6875"/>
+<stop offset="1" stop-color="#ED98A2"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/public/icons/mypage/satisfactions/Heart2.svg b/public/icons/mypage/satisfactions/Heart2.svg
@@ -0,0 +1,17 @@
+<svg width="22" height="21" viewBox="0 0 22 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Gp/Heart" filter="url(#filter0_d_3116_70230)">
+<path id="Vector" fill-rule="evenodd" clip-rule="evenodd" d="M15.5268 6.03363C14.7468 5.16697 13.8334 4.47363 12.7534 4.47363C11.7734 4.47363 10.7934 4.80697 10.0001 5.49363C9.20678 4.81363 8.22678 4.47363 7.24678 4.47363C6.16678 4.47363 5.26011 5.1603 4.47345 6.03363C3.35345 7.27363 2.95344 9.4203 4.04011 11.4403C5.13345 13.4936 7.95344 15.467 9.28678 16.3203C9.72011 16.6003 10.2801 16.6003 10.7201 16.3203C12.0534 15.467 14.8668 13.4936 15.9668 11.4403C17.0468 9.41363 16.6468 7.27363 15.5334 6.03363H15.5268Z" fill="#7E8999"/>
+</g>
+<defs>
+<filter id="filter0_d_3116_70230" x="-1" y="-1.5" width="24" height="24" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="1"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3116_70230"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3116_70230" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/public/icons/mypage/satisfactions/Heart3.svg b/public/icons/mypage/satisfactions/Heart3.svg
@@ -0,0 +1,17 @@
+<svg width="22" height="21" viewBox="0 0 22 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Gp/Heart" filter="url(#filter0_d_3116_70247)">
+<path id="Vector" fill-rule="evenodd" clip-rule="evenodd" d="M15.5268 6.03363C14.7468 5.16697 13.8334 4.47363 12.7534 4.47363C11.7734 4.47363 10.7934 4.80697 10.0001 5.49363C9.20678 4.81363 8.22678 4.47363 7.24678 4.47363C6.16678 4.47363 5.26011 5.1603 4.47345 6.03363C3.35345 7.27363 2.95344 9.4203 4.04011 11.4403C5.13345 13.4936 7.95344 15.467 9.28678 16.3203C9.72011 16.6003 10.2801 16.6003 10.7201 16.3203C12.0534 15.467 14.8668 13.4936 15.9668 11.4403C17.0468 9.41363 16.6468 7.27363 15.5334 6.03363H15.5268Z" fill="#6B6BE1"/>
+</g>
+<defs>
+<filter id="filter0_d_3116_70247" x="-1" y="-1.5" width="24" height="24" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="1"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3116_70247"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3116_70247" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/public/icons/mypage/satisfactions/Heart4.svg b/public/icons/mypage/satisfactions/Heart4.svg
@@ -0,0 +1,22 @@
+<svg width="22" height="21" viewBox="0 0 22 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Gp/Heart" filter="url(#filter0_d_3116_70264)">
+<path id="Vector" fill-rule="evenodd" clip-rule="evenodd" d="M15.5268 6.03363C14.7468 5.16697 13.8334 4.47363 12.7534 4.47363C11.7734 4.47363 10.7934 4.80697 10.0001 5.49363C9.20678 4.81363 8.22678 4.47363 7.24678 4.47363C6.16678 4.47363 5.26011 5.1603 4.47345 6.03363C3.35345 7.27363 2.95344 9.4203 4.04011 11.4403C5.13345 13.4936 7.95344 15.467 9.28678 16.3203C9.72011 16.6003 10.2801 16.6003 10.7201 16.3203C12.0534 15.467 14.8668 13.4936 15.9668 11.4403C17.0468 9.41363 16.6468 7.27363 15.5334 6.03363H15.5268Z" fill="url(#paint0_linear_3116_70264)"/>
+</g>
+<defs>
+<filter id="filter0_d_3116_70264" x="-1" y="-1.5" width="24" height="24" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="1"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3116_70264"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3116_70264" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_3116_70264" x1="16.1224" y1="16.6333" x2="3.59078" y2="16.9883" gradientUnits="userSpaceOnUse">
+<stop stop-color="#DDD9F8"/>
+<stop offset="0.273644" stop-color="#E4E4FF"/>
+<stop offset="0.610199" stop-color="#CCE4FF"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/public/icons/mypage/satisfactions/Heart5.svg b/public/icons/mypage/satisfactions/Heart5.svg
diff --git a/src/app/(protected)/my-page/_component/RetroSpectCard.tsx b/src/app/(protected)/my-page/_component/RetroSpectCard.tsx
diff --git a/src/app/(protected)/my-page/_component/RetroSpectSection.tsx b/src/app/(protected)/my-page/_component/RetroSpectSection.tsx
