Merge branch 'sowon' into develop

src/main/java/com/style24/front/biz/service/TsfSocialService.java

@@ -7,6 +7,7 @@ import org.springframework.stereotype.Service;
 
 import com.style24.front.biz.dao.TsfSocialDao;
 import com.style24.front.support.security.session.TsfSession;
+import com.style24.persistence.domain.Login;
 import com.style24.persistence.domain.Social;
 
 import lombok.extern.slf4j.Slf4j;
@@ -47,6 +48,12 @@ public class TsfSocialService {
 	public Collection<Social> getSocialGoodsList(Social social) {
 		Social info = new Social();
 		info = socialDao.getSocialInfo(social);
+		
+		// TODO 로그인 정보 입력
+		if (TsfSession.isLogin()) {
+			Login login = TsfSession.getInfo();
+			social.setCustNo(login.getCustNo());
+		}
 		social.setSocialSq(info.getSocialSq());
 		return socialDao.getSocialGoodsList(social);
 	}

src/main/webapp/WEB-INF/views/web/social/SocialMainFormWeb.html

@@ -27,12 +27,7 @@
 			</ul> 
 		</div>
 		<div class="wrap">
-			<div class="content dp_hotdeal"> <!-- 페이지특정 클래스 = dp_hotdeal -->
-				<div class="cont_head">
-					<div>
-                        <h3 th:text="${socialInfo.socialNm}"></h3>
-                    </div>
-				</div>
+			<div class="content wide dp_hotdeal"> <!-- 페이지특정 클래스 = dp_hotdeal -->
 				<div class="cont_body">
                     <div class="hotdeal">
                         <div id="countdown">
@@ -44,42 +39,43 @@
                     <div class="list_content">
                         <div class="itemsGrp rowtype"> <!-- itemsGrp rank hot deal --> <!-- rowtype 추가시 가로형태로 출력 -->
                         <th:block th:each="SocialData, SocialStat : ${socialGoods}">
-                            <div th:class="${SocialData.stockQtySum == 0 ? 'item_prod sold_out' : 'item_prod'}" > 
+                            <div class="item_prod" th:class="${SocialData.stockQtySum == 0 ? 'item_prod sold_out' : 'item_prod'}" > 
                                 <div class="item_state"> <!-- item_state AD soldout -->
+                                    <button type="button" th:class="${SocialData.wishYn == 'Y'}? 'itemLike active' : 'itemLike'" onclick="cfnPutWishList(this);" th:attr="goodsCd=${SocialData.goodsCd}, ithrCd='', contentsLoc='', planDtlSq=''">관심상품 추가</button>
                                     <a href="#none" class="itemLink">
                                         <div class="itemPic">
-                                            <div class="shape ranker"><span>특가</span></div>
                                             <img alt="BLUE-a" class=" vLHTC pd_img" th:src="${@environment.getProperty('upload.goods.view') + '/' + SocialData.sysImgNm}">
-                                            <button type="button" class="itemLike" th:classappend="${SocialData.wishYn == 'Y'}? 'active' : ''"  onclick="cfnPutWishList(this);" th:attr="goodsCd=${SocialData.goodsCd}, ithrCd='', contentsLoc='', planDtlSq=''">관심상품 추가</button>
                                         </div>
+                                        <div class="itemSpecialPrice"><span>특가</span></div>
                                         <p class="itemBrand" th:text="${SocialData.brandKnm}"></p>
-                                        <div class="itemName" th:text="${SocialData.goodsNm}" style="font-size: 18px;"></div>
-                                        <p class="itemPrice" >
-                                         [[${#numbers.formatInteger(SocialData.currAprice,0,'COMMA')} + 원]]
-                                            <!-- [[${SocialData.currAprice}]]원 -->
+                                        <div class="itemName" th:text="${SocialData.goodsNm}"></div>
+                                        <!-- <div class="itemComment">#주문 폭주 상품</div> -->
+                                        <p class="itemPrice">
+                                             [[${#numbers.formatInteger(SocialData.currAprice,0,'COMMA')} + 원]]
                                             <span class="itemPrice_original" th:text="${#numbers.formatInteger(SocialData.listPrice,0,'COMMA')} + '원'"></span>
 											<span class=" itemPercent" th:text="${#numbers.formatDecimal(SocialData.dcArate,1,0)} + '%'"></span>
                                         </p>
-                                        <p class="itemBadge">
-                                            <span class="badge13">베스트 </span>
-                                        </p>
-                                        <!-- <div class="itemcolorchip">
+                                       <!--  <div class="itemcolorchip">
                                             <span class="chip_color35" value="ABM">BEIGE</span>
                                             <span class="chip_color54" value="BDS">BLACK</span>
                                             <span class="chip_color40" value="YBR">WHITE</span>
-                                        </div> -->
-                                        <div class="itemComment" th:text="${SocialData.goodsTnm}"></div>
+                                        </div>
+                                         -->
+                                        <div class="shopBagBtn">
+                                            <button class="btn btn_defalt">
+                                                <span>쇼핑백 담기</span>
+                                            </button>
+                                        </div>
                                     </a>
                                 </div>
                             </div>
-                              </th:block>
+                            </th:block>
                         </div>
                     </div>
                 </div>
 		    </div>
         </div>
     </div>   
-
 <script th:inline="javascript">
 var socialInfo = [[${socialInfo}]];
 

src/main/webapp/ux/pc/css/common.css

@@ -752,9 +752,32 @@ content: "〉";font-size: 12px;padding-left: 8px;
 
 .itemsGrp {font-size: 0px;box-sizing: border-box;clear: both;margin-bottom: 20px;}
 .itemsGrp::after{content: "";display: table;clear: both;}
+
+/* row type */
+.itemsGrp.rowtype .item_prod {width: 49.43%; margin-bottom: 1.12%; height: 420px; border:1px solid #ddd; overflow: hidden;}
+.itemsGrp.rowtype .item_prod:nth-child(2n) {margin-right: 0;}
+.itemsGrp.rowtype .item_prod .itemBadge, .itemsGrp.rowtype .item_prod .itemcolorchip {display: none;}
+.itemsGrp.rowtype .item_prod .item_state {display: table; padding-left: 330px; padding-right: 50px; padding-bottom: 0; height: 420px; width: 100%;}
+.itemsGrp.rowtype .item_prod .itemLink {display: table-cell; position: static; vertical-align: middle;}
+.itemsGrp.rowtype .item_prod .itemLike {z-index: 99;}
+.itemsGrp.rowtype .item_prod .itemPic {position: absolute; top: 0; left: 0; margin-bottom: 0; padding-top: 0; width: 280px; height: 420px;}
+.itemsGrp.rowtype .item_prod .itemPic .shape {z-index: 89;}
+.itemsGrp.rowtype .item_prod .itemPic::after {background: #f5f5f5; opacity:1; z-index: 87;}
+.itemsGrp.rowtype .item_prod .itemPic .pd_img {z-index: 88;}
+.itemsGrp.rowtype .item_state.soldout .itemPic:before {content:'SOLD OUT'; position: absolute; top: 50%; left: 50%; font-size: 20px; color:#fff; background: rgba(0,0,0,.5); width: 100%; height: 100%; transform:translate(-50%, -50%); line-height: 420px; z-index: 89; text-align: center;}
+.itemsGrp.rowtype .item_prod .itemBrand {margin:0px 6px 65px; font-size: 16px; font-weight: 300;}
+.itemsGrp.rowtype .item_prod .itemComment {position: absolute; left: 340px; top: 150px; font-size: 16px; font-weight: 300; margin:0;}
+.itemsGrp.rowtype .item_prod .itemName {margin:0px 6px 40px; font-size: 30px; font-weight: 200; line-height: 1.2; max-height:70px; height: 70px;}
+.itemsGrp.rowtype .item_prod .itemPrice {font-size: 30px; line-height: 1; font-weight: 500;}
+.itemsGrp.rowtype .item_prod .itemPrice_original {font-size: 20px; font-weight: 200;}
+.itemsGrp.rowtype .item_prod .itemPercent {font-size: 42px; line-height: 0.8;}
+
+
+
 .item_prod {width: 20%;display: inline-block;font-size: 0px;vertical-align: top;color: rgb(31, 31, 31);position: relative;letter-spacing: -0.2px;}
 .item_state {position: relative; padding: 0px 10px 60px; box-sizing: border-box;}
-	@media (max-width: 1919px) and (min-width: 1401px){/* .item_state {padding-left: 6px;padding-right: 6px;} */}
+.itemsGrp .item_state.soldout .itemPic:before {content:'SOLD OUT'; position: absolute; top: 50%; left: 50%; font-size: 20px; color:#fff; background: rgba(0,0,0,.5); width: 100%; height: 100%; transform:translate(-50%, -50%); line-height: 420px; z-index: 1; text-align: center;}
+@media (max-width: 1919px) and (min-width: 1401px){/* .item_state {padding-left: 6px;padding-right: 6px;} */}
 .hgbgCa {width: 100%;height: 100%;}
 .fgRDJH {padding: 0px 40px;font-size: 0px;box-sizing: border-box;}
 	@media (max-width: 1919px) and (min-width: 1401px){.fgRDJH {padding-left: 38px;padding-right: 38px;}}
@@ -768,25 +791,28 @@ content: "〉";font-size: 12px;padding-left: 8px;
 .itemLike::after {background: url('/images/pc/ico_like.png');background-size: 46px;background-position: -25px 0px;background-repeat: no-repeat;}
 .itemLike:hover::before, .itemLike:active::before {opacity: 1;}
 .itemLike.active::before {opacity: 1;}
+.itemLike.likeit::before {opacity: 1;}
 
 .itemLink {position: relative;text-decoration: none;color: rgb(102, 102, 102);cursor: pointer;display: block;}
 .itemPic {position: relative;width: 100%;margin-bottom:20px;padding-top: 150%;font-size: 0px;overflow: hidden;}
 .itemPic::after {content: "";display: block;position: absolute;top: 0px;left: 0px;width: 100%;height: 100%;opacity: 0.03;background-color: rgb(0, 0, 0);}
 .itemPic .pd_img {position: absolute;width: 100%;height: auto;top: 50%;left: 0px;transform: translateY(-50%);}
-
-.itemBrand {display: inline-block;margin: 0px 5px 12px;line-height: 9px;font-size: 12px;font-weight: 300;color: rgb(137, 137, 137);}
+/* .itemPic .pd_img {position: absolute;width: 100%;width: auto; height: auto;max-height: 500px;top: 50%;left: 50%;transform: translate(-50%,-50%);} */
+.itemBrand {margin: 0px 5px 12px;line-height: 12px;font-size: 12px;font-weight: 300;color: rgb(137, 137, 137);height:12px;}
 .itemComment{margin:20px 5px 0px;line-height: 1; font-size: 14px;font-weight: 300;color: #fd4802;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
-.itemName {
-	margin: 0px 5px 15px;line-height:20px;font-size: 14px;font-weight: 200;color:#222; height:40px;
-	position: relative;overflow: hidden;white-space: normal;overflow-wrap: break-word;display: block; max-width:95%;
-}
-.itemName {display: -webkit-box;text-overflow: ellipsis;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
+.itemName {	margin: 0px 5px 15px;line-height:20px;font-size: 14px;font-weight: 200;color:#222; height:40px;}
 .itemPrice * {margin-right: 7px;}
 .itemPrice {position: relative;line-height: 16px;font-size:16px;font-weight: 300;color: rgb(31, 31, 31);margin: 0px 5px;}
 .itemPrice_original {position: relative;margin-left: 5px;line-height: 16px;font-size: 14px;font-weight: 300;color: rgb(204, 204, 204);}
 .itemPrice_original::after{content: '';display: inline-block;width: 100%;height: 1px;background: rgb(204, 204, 204);position: absolute;top: 50%;left: 0;bottom:auto;right:auto;transform: translateY(-50%);}
 .itemPercent {position: absolute;top: 0px;right: 0px;bottom: auto;left: auto;margin-left: 15px;line-height: 16px;font-size: 16px;font-weight: 300;color: #fd4802;}
 
+/* items Ellipsis */
+.itemBrand {position: relative;overflow: hidden;white-space: normal;overflow-wrap: break-word;display: block; max-width:95%;}
+.itemBrand {display: -webkit-box;text-overflow: ellipsis;-webkit-line-clamp: 1;-webkit-box-orient: vertical;}
+.itemName {position: relative;overflow: hidden;white-space: normal;overflow-wrap: break-word;display: block; max-width:95%;}
+.itemName {display: -webkit-box;text-overflow: ellipsis;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
+
 /* common.css로 이동 예정 */
 .itemcolorchip {margin:20px 5px 0px; max-width: 208px;}
 .itemcolorchip [class*="chip_"] {position: relative;display: inline-block;width: 15px;height: 15px;font-size: 0; vertical-align: middle; margin:0 0 0 4px;}