쇼핑몰: #236 사용후기, 상품문의 PC 마크업 및 스타일 완료

css/default_shop.css

@@ -530,11 +530,17 @@ td.empty_table {padding:85px 0;text-align:center}
 .sit_use_star {margin:0 !important;padding:0 0 0 5px}
 
 .sit_use_con {display:none;padding:10px 10px 0}
-.sit_use_con p {padding:0}
+.sit_use_p {margin:0 0 10px;padding:10px;border:1px solid #e9e9e9;background:#fff}
 .sit_use_cmd {text-align:right}
 
 #sit_use_wbtn {margin:0 0 5px;text-align:right}
 
+#sit_use_write {}
+#sit_use_write #is_subject {width:100%}
+#sit_use_write ul {margin:5px 0 0}
+#sit_use_write li {margin:0 0 5px}
+#sit_use_write li label {display:inline-block;width:80px}
+
 /* 상품 상세보기 - 상품문의 */
 #sit_qa {margin:0 0 10px;padding:10px 10px 20px;border-bottom:1px solid #e9e9e9}
 #sit_qa h2 {margin:0 0 10px}
@@ -548,10 +554,13 @@ td.empty_table {padding:85px 0;text-align:center}
 .sit_qa_dl:after {display:block;visibility:hidden;clear:both;content:""}
 .sit_qa_dl dt {float:left}
 .sit_qa_dl dd {float:left;margin:0 20px 0 5px}
+.sit_qaa_done {color:#ff3061}
+.sit_qaa_yet {color:#999}
 
 .sit_qa_con {display:none;padding:10px 10px 0}
-.sit_qa_con p {padding:0}
-.sit_qa_qaq {margin:0 0 5px}
+.sit_qa_p {margin:0 0 10px;padding:10px;border:1px solid #e9e9e9;background:#fff}
+.sit_qa_p strong {display:inline-block;margin:0 0 10px}
+.sit_qa_qaq {margin:0 0 20px}
 .sit_qa_con textarea {display:none}
 .sit_qa_cmd {text-align:right}
 
@@ -560,7 +569,8 @@ td.empty_table {padding:85px 0;text-align:center}
 
 #sit_qa_wbtn {margin:0 0 5px;text-align:right}
 
-#sit_qa_w {display:none}
+#sit_qa_write {}
+#sit_qa_write #iq_subject {width:100%}
 
 /* 상품 상세보기 - 배송정보 */
 #sit_dvr {margin:0 0 10px;padding:10px 10px 20px;border-bottom:1px solid #e9e9e9}

css/mobile_shop.css

@@ -233,7 +233,7 @@ a.sanchor_on {background:#626870;color:#fff !important;text-decoration:none}
 .sit_use_star {margin:0 !important;padding:0 0 0 0.7em}
 
 .sit_use_con {display:none;padding:1em 1em 0}
-.sit_use_con p {padding:0}
+.sit_use_p {margin:0 0 10px;padding:10px;border:1px solid #e9e9e9;background:#fff}
 .sit_use_cmd {text-align:right}
 
 #sit_use_wbtn {margin:0 0 0.3em;text-align:right}
@@ -253,8 +253,9 @@ a.sanchor_on {background:#626870;color:#fff !important;text-decoration:none}
 .sit_qa_dl dd {float:left;margin:0 1.8em 0 0.3em}
 
 .sit_qa_con {display:none;padding:1em 1em 0}
-.sit_qa_con p {padding:0}
-.sit_qa_qaq {margin:0 0 0.3em}
+.sit_qa_p {margin:0 0 1em;padding:1em;border:1px solid #e9e9e9;background:#fff}
+.sit_qa_p strong {display:inline-block;margin:0 0 1em}
+.sit_qa_qaq {margin:0 0 2em}
 .sit_qa_con textarea {display:none}
 .sit_qa_cmd {text-align:right}
 

shop/itemqa.php

@@ -45,14 +45,17 @@ $thumbnail_width = 500;
         // http://stackoverflow.com/questions/6967081/show-hide-multiple-divs-with-jquery?answertab=votes#tab-top
 
         $iq_stats = '';
+        $iq_style = '';
         $iq_answer = '';
         if ($row['iq_answer'])
         {
             $iq_answer = get_view_thumbnail($row['iq_answer'], $thumbnail_width);
             $iq_stats = '답변완료';
+            $iq_style = 'sit_qaa_done';
             $is_answer = true;
         } else {
             $iq_stats = '답변전';
+            $iq_style = 'sit_qaa_yet';
             $iq_answer = '답변이 등록되지 않았습니다.';
             $is_answer = false;
         }
@@ -61,35 +64,36 @@ $thumbnail_width = 500;
     ?>
 
         <li class="sit_qa_li">
-            <button type="button" class="sit_qa_li_title" onclick="javascript:qa_menu('sit_qa_con_<?php echo $i; ?>')"><b><?php echo $num; ?>.</b> <?php echo $iq_subject; ?></button>
+            <button type="button" class="sit_qa_li_title" onclick="javascript:qa_menu('sit_qa_con_<?php echo $i; ?>')"><b><?php echo $iq_num; ?>.</b> <?php echo $iq_subject; ?></button>
             <dl class="sit_qa_dl">
                 <dt>작성자</dt>
                 <dd><?php echo $iq_name; ?></dd>
                 <dt>작성일</dt>
                 <dd><?php echo $iq_time; ?></dd>
                 <dt>상태</dt>
-                <dd><?php echo $iq_stats; ?></dd>
+                <dd class="<?php echo $iq_style; ?>"><?php echo $iq_stats; ?></dd>
             </dl>
 
             <div id="sit_qa_con_<?php echo $i; ?>" class="sit_qa_con">
-                <p class="sit_qa_qaq">
-                    <strong>문의내용</strong><br>
-                    <?php echo $iq_question; // 상품 문의 내용 ?>
-                </p>
+                <div class="sit_qa_p">
+                    <div class="sit_qa_qaq">
+                        <strong>문의내용</strong><br>
+                        <?php echo $iq_question; // 상품 문의 내용 ?>
+                    </div>
+                    <div class="sit_qa_qaa">
+                        <strong>답변</strong><br>
+                        <?php echo $iq_answer; ?>
+                    </div>
+                </div>
 
                 <?php if ($is_admin || ($row['mb_id'] == $member['mb_id'] && !$is_answer)) { ?>
                 <div class="sit_qa_cmd">
-                    <a href="<?php echo $itemqa_form."&amp;iq_id={$row['iq_id']}&amp;w=u"; ?>" class="itemqa_form" onclick="return false;">수정</a>
-                    <a href="<?php echo $itemqa_formupdate."&amp;iq_id={$row['iq_id']}&amp;w=d&amp;hash={$hash}"; ?>" class="itemqa_delete">삭제</a>
+                    <a href="<?php echo $itemqa_form."&amp;iq_id={$row['iq_id']}&amp;w=u"; ?>" class="itemqa_form btn01" onclick="return false;">수정</a>
+                    <a href="<?php echo $itemqa_formupdate."&amp;iq_id={$row['iq_id']}&amp;w=d&amp;hash={$hash}"; ?>" class="itemqa_delete btn01">삭제</a>
                     <!-- <button type="button" onclick="javascript:itemqa_update(<?php echo $i; ?>);" class="btn01">수정</button>
                     <button type="button" onclick="javascript:itemqa_delete(fitemqa_password<?php echo $i; ?>, <?php echo $i; ?>);" class="btn01">삭제</button> -->
                 </div>
                 <?php } ?>
-
-                <p class="sit_qa_qaa">
-                    <strong>답변</strong><br>
-                    <?php echo $iq_answer; ?>
-                </p>
             </div>
             </div>
         </li>
@@ -146,7 +150,7 @@ echo itemqa_page(10, $page, $total_page, "./itemqa.php?it_id=$it_id&amp;page=",
 
 <div id="sit_qa_wbtn">
     <!-- <a href="javascript:itemqawin('it_id=<?php echo $it_id; ?>');">상품문의 쓰기<span class="sound_only"> 새 창</span></a> -->
-    <a href="<?php echo $itemqa_form; ?>" onclick="return false;" class="btn02 itemqa_form">상품문의 쓰기<span class="sound_only"> 새 창</span></a>
+    <a href="<?php echo $itemqa_form; ?>" class="btn02 itemqa_form" onclick="return false;">상품문의 쓰기<span class="sound_only"> 새 창</span></a>
     <a href="<?php echo $itemqa_list; ?>" id="itemqa_list" class="btn01">더보기</a>
 </div>
 

shop/itemqaform.php

@@ -29,36 +29,39 @@ if ($w == "u")
 
 include_once(G4_PATH.'/head.sub.php');
 ?>
-<style>
-ul {list-style:none;margin:0px;padding:0px;}
-label {width:130px;vertical-align:top;padding:3px 0;}
-</style>
 
-<div style="padding:10px;">
+<div id="sit_qa_write" class="new_win">
+    <h1 class="new_win_title">상품문의 쓰기</h1>
+
     <form name="fitemqa" method="post" action="./itemqaformupdate.php" onsubmit="return fitemqa_submit(this);" autocomplete="off">
     <input type="hidden" name="w" value="<?php echo $w; ?>">
     <input type="hidden" name="it_id" value="<?php echo $it_id; ?>">
     <input type="hidden" name="iq_id" value="<?php echo $iq_id; ?>">
-    <fieldset style="padding:0 10px 10px;">
-    <legend><strong>상품문의 쓰기</strong></legend>
-    <ul style="padding:10px;">
-        <li>
-            <label for="iq_subject">제목</label>
-            <input type="text" id="iq_subject" name="iq_subject" size="100" class="ed" minlength="2" maxlength="250" required itemname="제목" value="<?php echo get_text($qa['iq_subject']); ?>">
-        </li>
-        <li>
-            <label for="" style="width:200px;">질문</label>
-            <?php echo editor_html('iq_question', $qa['iq_question']); ?>
-        </li>
-    </ul>
-    <input type="submit" value="   확   인   ">
-    </fieldset>
+
+    <table class="frm_tbl">
+    <colgroup>
+        <col class="grid_2">
+        <col>
+    </colgroup>
+    <tbody>
+    <tr>
+        <th scope="row"><label for="iq_subject">제목</label></th>
+        <td><input type="text" name="iq_subject" value="<?php echo get_text($qa['iq_subject']); ?>" id="iq_subject" required class="frm_input" minlength="2" maxlength="250"></td>
+    </tr>
+    <tr>
+        <th scope="row"><label for="iq_question">질문</label></th>
+        <td><?php echo editor_html('iq_question', $qa['iq_question']); ?></td>
+    </tr>
+    </tbody>
+    </table>
+
+    <div class="btn_win">
+        <input type="submit" value="작성완료" class="btn_submit">
+    </div>
     </form>
 </div>
 
 <script type="text/javascript">
-self.focus();
-
 function fitemqa_submit(f)
 {
     <?php echo get_editor_js('iq_question'); ?>
@@ -71,10 +74,6 @@ function fitemqa_submit(f)
 
     return true;
 }
-
-$(function() {
-    $("#iq_subject").focus();
-});
 </script>
 
 <?php

shop/itemuse.php

@@ -66,14 +66,14 @@ $itemuse_formupdate = "./itemuseformupdate.php?it_id=".$it_id;
             </dl>
 
             <div id="sit_use_con_<?php echo $i; ?>" class="sit_use_con">
-                <p>
+                <div class="sit_use_p">
                     <?php echo $is_content; // 사용후기 내용 ?>
-                </p>
+                </div>
 
                 <?php if ($is_admin || $row['mb_id'] == $member['mb_id']) { ?>
                 <div class="sit_use_cmd">
-                    <a href="<?php echo $itemuse_form."&amp;is_id={$row['is_id']}&amp;w=u"; ?>" class="itemuse_form" onclick="return false;">수정</a>
-                    <a href="<?php echo $itemuse_formupdate."&amp;is_id={$row['is_id']}&amp;w=d&amp;hash={$hash}"; ?>" class="itemuse_delete">삭제</a>
+                    <a href="<?php echo $itemuse_form."&amp;is_id={$row['is_id']}&amp;w=u"; ?>" class="itemuse_form btn01" onclick="return false;">수정</a>
+                    <a href="<?php echo $itemuse_formupdate."&amp;is_id={$row['is_id']}&amp;w=d&amp;hash={$hash}"; ?>" class="itemuse_delete btn01">삭제</a>
                 </div>
                 <?php } ?>
             </div>
@@ -130,8 +130,8 @@ echo itemuse_page($config['cf_write_pages'], $page, $total_page, "./itemuse.php?
 ?>
 
 <div id="sit_use_wbtn">
-    <a href="<?php echo $itemuse_form; ?>" id="itemuse_form" class="btn02">사용후기 쓰기<span class="sound_only"> 새 창</span></a>
-    <a href="<?php echo $itemuse_list; ?>" id="itemuse_list" class="btn01">더보기</a>
+    <a href="<?php echo $itemuse_form; ?>" class="btn02 itemuse_form" onclick="return false;">사용후기 쓰기<span class="sound_only"> 새 창</span></a>
+    <a href="<?php echo $itemuse_list; ?>" class="btn01 itemuse_list">더보기</a>
 </div>
 
 <script>

shop/itemuseform.php

@@ -37,44 +37,72 @@ if ($w == "") {
 
 include_once(G4_PATH.'/head.sub.php');
 ?>
-<style>
-ul {list-style:none;margin:0px;padding:0px;}
-label {width:130px;vertical-align:top;padding:3px 0;}
-</style>
 
-<div style="padding:10px;">
+<div id="sit_use_write" class="new_win">
+    <h1 class="new_win_title">사용후기 쓰기</h1>
+
     <form name="fitemuse" method="post" action="./itemuseformupdate.php" onsubmit="return fitemuse_submit(this);" autocomplete="off">
     <input type="hidden" name="w" value="<?php echo $w; ?>">
     <input type="hidden" name="it_id" value="<?php echo $it_id; ?>">
     <input type="hidden" name="is_id" value="<?php echo $is_id; ?>">
-    <fieldset style="padding:0 10px 10px;">
-    <legend><strong>사용후기 쓰기</strong></legend>
-    <ul style="padding:10px;">
-        <li>
-            <label for="is_subject">제목</label>
-            <input type="text" id="is_subject" name="is_subject" size="100" class="ed" minlength="2" maxlength="250" required itemname="제목" value="<?php echo get_text($use['is_subject']); ?>">
-        </li>
-        <li>
-            <label for="" style="width:200px;">내용</label>
-            <?php echo editor_html('is_content', $use['is_content']); ?>
-        </li>
-        <li>
-            <label>평가</label>
-            <input type=radio name=is_score value='10' <?php echo ($is_score==10)?"checked='checked'":""; ?>><img src='<?php echo G4_SHOP_URL; ?>/img/star5.gif' align=absmiddle>
-            <input type=radio name=is_score value='8'  <?php echo ($is_score==8)?"checked='checked'":""; ?>><img src='<?php echo G4_SHOP_URL; ?>/img/star4.gif' align=absmiddle>
-            <input type=radio name=is_score value='6'  <?php echo ($is_score==6)?"checked='checked'":""; ?>><img src='<?php echo G4_SHOP_URL; ?>/img/star3.gif' align=absmiddle>
-            <input type=radio name=is_score value='4'  <?php echo ($is_score==4)?"checked='checked'":""; ?>><img src='<?php echo G4_SHOP_URL; ?>/img/star2.gif' align=absmiddle>
-            <input type=radio name=is_score value='2'  <?php echo ($is_score==2)?"checked='checked'":""; ?>><img src='<?php echo G4_SHOP_URL; ?>/img/star1.gif' align=absmiddle>
-        </li>
-    </ul>
-    <input type="submit" value="   확   인   ">
-    </fieldset>
+
+    <table class="frm_tbl">
+    <colgroup>
+        <col class="grid_2">
+        <col>
+    </colgroup>
+    <tbody>
+    <tr>
+        <th scope="row"><label for="is_subject">제목</label></th>
+        <td><input type="text" name="is_subject" value="<?php echo get_text($use['is_subject']); ?>" id="is_subject" required class="frm_input" minlength="2" maxlength="250"></td>
+    </tr>
+    <tr>
+        <th scope="row"><label for="" style="width:200px;">내용</label></th>
+        <td><?php echo editor_html('is_content', $use['is_content']); ?></td>
+    </tr>
+    <tr>
+        <th scope="row">평가</th>
+        <td>
+            <ul>
+                <li>
+                    <input type="radio" name="is_score" value="10" id="is_score10" <?php echo ($is_score==10)?'checked="checked"':''; ?>>
+                    <label for="is_score10">매우만족</label>
+                    <img src="<?php echo G4_URL; ?>/img/shop/s_star5.png">
+                </li>
+                <li>
+                    <input type="radio" name="is_score" value="8" id="is_score8" <?php echo ($is_score==8)?'checked="checked"':''; ?>>
+                    <label for="is_score8">만족</label>
+                    <img src="<?php echo G4_URL; ?>/img/shop/s_star4.png">
+                </li>
+                <li>
+                    <input type="radio" name="is_score" value="6" id="is_score6" <?php echo ($is_score==6)?'checked="checked"':''; ?>>
+                    <label for="is_score6">보통</label>
+                    <img src="<?php echo G4_URL; ?>/img/shop/s_star3.png">
+                </li>
+                <li>
+                    <input type="radio" name="is_score" value="4" id="is_score4" <?php echo ($is_score==4)?'checked="checked"':''; ?>>
+                    <label for="is_score4">불만</label>
+                    <img src="<?php echo G4_URL; ?>/img/shop/s_star2.png">
+                </li>
+                <li>
+                    <input type="radio" name="is_score" value="2" id="is_score2" <?php echo ($is_score==2)?'checked="checked"':''; ?>>
+                    <label for="is_score2">매우불만</label>
+                    <img src="<?php echo G4_URL; ?>/img/shop/s_star1.png">
+                </li>
+            </ul>
+        </td>
+    </tr>
+    </tbody>
+    </table>
+
+    <div class="btn_win">
+        <input type="submit" value="작성완료" class="btn_submit">
+    </div>
+
     </form>
 </div>
 
 <script type="text/javascript">
-self.focus();
-
 function fitemuse_submit(f)
 {
     /*
@@ -102,10 +130,6 @@ function fitemuse_submit(f)
 
     return true;
 }
-
-$(function() {
-    $("#is_subject").focus();
-});
 </script>
 
 <?php