Merge pull request #50 from AlongTheBlue/like

feat: 주소 색상 변경, 찜 이미지 추가
AlongTheBlue · Oct 30, 2024 · d4103ba · d4103ba
2 parents 3fb8529 + b19ec76
commit d4103ba
Show file tree

Hide file tree

Showing 10 changed files with 48 additions and 13 deletions.
diff --git a/public/images/icon/black_unliked.svg b/public/images/icon/black_unliked.svg
diff --git a/public/images/icon/detail_infocenter.svg b/public/images/icon/detail_infocenter.svg
diff --git a/public/images/icon/heart 1.svg b/public/images/icon/heart 1.svg
diff --git a/public/images/icon/unliked.svg b/public/images/icon/unliked.svg
diff --git a/src/components/ItemCard.jsx b/src/components/ItemCard.jsx
@@ -73,18 +73,17 @@ function ItemCard({ item, selectMode, travelCourses, itemCategory }) {
         ) : null}
       </div>
       <div className="item-info">
-        <div className="item-header">
-          <div className="item-title" onClick={handlePlaceDetail}>{item.title}</div>
-          {selectMode ? (
+        {selectMode && 
             <div className="item-select" onClick={handleSelectPlace}>
-              선택하기
+              선택
             </div>
-          ) : (
-            <img src="/images/icon/unliked.svg" alt="unliked icon" style={{visibility: "hidden"}}/>
-          )}
+        }
+        <div className="item-header">
+          <div className="item-title" onClick={handlePlaceDetail}>{item.title}</div>
+          <img src='/images/icon/black_unliked.svg' alt="unliked icon"/>
         </div>
         <div className="item-address">
-          <img src="/images/icon/location.svg" alt="location icon" />
+          <img src="/images/icon/detail_address.svg" alt="location icon" />
           <div>{item.address}</div>
         </div>
         <div className="hashtags">

diff --git a/src/components/ItemDetailCard.jsx b/src/components/ItemDetailCard.jsx
@@ -146,6 +146,14 @@ function ItemDetailCard({category, id}) {
             {item.time && item.time.length > 0 ? item.time : '없음'}
           </div>
         </div>
+        <div className='item-detail-infocenter'>
+          <div className='item-detail-img'>
+            <img src='/images/icon/detail_infocenter.svg' />
+          </div>
+          <div className='item-detail-text'>
+            {item.infoCenter}
+          </div>
+        </div>
         <div className="item-detail-weather">
           <div className='item-detail-img'>
             <img src={weatherImg} />

diff --git a/src/components/SquareCard.jsx b/src/components/SquareCard.jsx
@@ -23,6 +23,9 @@ function SquareCard({item, category}) {
           borderRadius: '5px'
         }}
       />
+      {/* <div className='square-card-like'>
+        <img className='like-img' src='/images/icon/unliked.svg'/>
+      </div> */}
       <div className="square-card-info">
         <div>
           <div className="square-card-name">{item.title}</div>

diff --git a/src/styles/ItemCard.css b/src/styles/ItemCard.css
@@ -74,7 +74,8 @@
   }
   .item-address div {
     font-size: 0.8em;
-    color: #8F8F8F;
+    /* color: #8F8F8F; */
+    color: #007bff;
   }
 
   .item-select {

diff --git a/src/styles/ItemDetailCard.css b/src/styles/ItemDetailCard.css
@@ -45,7 +45,7 @@
     padding: 0.3em 0;
 }
 
-.item-detail-address, .item-detail-holiday, .item-detail-weather {
+.item-detail-address, .item-detail-holiday, .item-detail-weather, .item-detail-infocenter {
     display: flex;
     font-size: 0.9em;
     align-items: center;
@@ -57,18 +57,23 @@
 }
 
 .item-detail-address img{
-    width: 1.6em;
+    width: 1.7em;
 }
 
 .item-detail-holiday img{
-    width: 1.3em;
+    width: 1.4em;
 }
 
 .item-detail-weather img{
     width: 1.6em;
 }
 
+.item-detail-infocenter img{
+    width: 1.2em;
+}
+
 .item-detail-text {
+    padding-left: 0.4em;
     width: 95%;
     margin-left: auto;
 }

diff --git a/src/styles/SquareCard.css b/src/styles/SquareCard.css
@@ -5,6 +5,16 @@
     cursor: pointer;
 }
 
+/* .square-card-like {
+    position: absolute;
+    top: 0.4em;
+    right: 0.4em;
+}
+
+.like-img {
+    width: 1.1em;
+} */
+
 .square-card-info {
     position: absolute;
     bottom: 0;