Merge pull request #92 from FINAL-TEAM4/pettalk/detail

#77 styles: 디자인 디테일 수정
FINAL-TEAM4 · Sep 20, 2023 · 1717b93 · 1717b93
2 parents cf9cea7 + cf6a1eb
commit 1717b93
Show file tree

Hide file tree

Showing 10 changed files with 142 additions and 121 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -17,7 +17,7 @@ import DailyChallenge3 from "./pages/challenge/DailyChallenge3";
 import PointShop from "@/pages/challenge/PointShop";
 // 펫톡
 import PetTalk from "@/pages/petTalk";
-import PetTaliDetail from "./pages/petTalk/Detail";
+import PetTalkDetail from "./pages/petTalk/Detail";
 import Concern from "@/pages/petTalk/Concern";
 import FreeTalk from "@/pages/petTalk/Freetalk";
 import ConcernWrite from "./pages/petTalk/ConcernWrite";
@@ -59,8 +59,9 @@ const App = () => {
       <Route path="/dailychallenge3" element={<DailyChallenge3 />} />
       <Route path="/pointshop" element={<PointShop />} />
       {/* 펫톡 */}
+      {/* <Route path="/petTalk" element={<PetTalk />} /> */}
       <Route path="/petTalk" element={<PetTalk />} />
-      <Route path="/petTalk/:petTaliId" element={<PetTaliDetail />} />
+      <Route path="/petTalk/:petTalkId" element={<PetTalkDetail />} />
       <Route path="/petTalk/concern" element={<Concern />} />
       <Route path="/petTalk/freetalk" element={<FreeTalk />} />
       <Route path="/petTalk/concernwrite" element={<ConcernWrite />} />

diff --git a/src/assets/Funny_on.png b/src/assets/Funny_on.png
diff --git a/src/assets/Sad_off.png b/src/assets/Sad_off.png
diff --git a/src/assets/Sad_on.png b/src/assets/Sad_on.png
diff --git a/src/assets/kiss_off.png b/src/assets/kiss_off.png
diff --git a/src/assets/kiss_on.png b/src/assets/kiss_on.png
diff --git a/src/pages/petTalk/Detail.tsx b/src/pages/petTalk/Detail.tsx
@@ -61,7 +61,7 @@ const PetTalkDetail = () => {
               <div className={styles.user_info}>
                 <img src="" alt="profile-img" />
                 <span className={styles.user_name}>닉네임</span>
-                <span className={styles.today_date}>・ 게시된 날짜 넣기</span>
+                <span className={styles.date}>・ 게시된 날짜 넣기</span>
               </div>
               <div className={styles.title}>제목 텍스트 입니다.</div>
               <div className={styles.text_wrapper}>
@@ -104,14 +104,17 @@ const PetTalkDetail = () => {
                 }`}
                 onClick={() => handleButtonClick(index)}
               >
-                <img
-                  src={
-                    selectedButton === index
-                      ? emoji.imgSrc.replace("_off", "_on")
-                      : emoji.imgSrc
-                  }
-                  alt={emoji.altText}
-                />
+                <div className={styles.img_area}>
+                  <img
+                    src={
+                      selectedButton === index
+                        ? emoji.imgSrc.replace("_off", "_on")
+                        : emoji.imgSrc
+                    }
+                    alt={emoji.altText}
+                  />
+                </div>
+
                 <span
                   style={{
                     fontWeight: selectedButton === index ? 600 : 400,

diff --git a/src/pages/petTalk/index.tsx b/src/pages/petTalk/index.tsx
@@ -13,7 +13,11 @@ import floating from "../../assets/X.png";
 import concern_icon from "../../assets/concerns_icon.svg";
 import freetalk_icon from "../../assets/freetalk_icon.svg";
 
-const PetTalk = () => {
+interface PetTalkProps {
+  petTalkId?: number;
+}
+
+const PetTalk: React.FC<PetTalkProps> = ({ petTalkId }) => {
   const location = useLocation();
   const [activeTab, setActiveTab] = useRecoilState(activeTabState);
 
@@ -89,119 +93,124 @@ const PetTalk = () => {
 
             <div className={styles.talk_list}>
               <div className={styles.border}>
-                {/* item 클릭하면 상세페이지 연결 추가하기 */}
-                <div className={styles.item}>
-                  <div className={styles.user_info}>
-                    <img src="" alt="profile-img" />
-                    <span className={styles.user_name}>닉네임</span>
-                    <span className={styles.date}>・ 게시된 날짜 넣기</span>
-                  </div>
-                  <div className={styles.title}>제목 텍스트 입니다.</div>
-                  <div className={styles.text_wrapper}>
-                    <div className={styles.content_text}>
-                      꿍이가 아파요 어뜩하죠ㅠㅠ 꿍이가 아파요 어뜩하죠ㅠㅠ
-                      꿍이가 아파요 어뜩하죠ㅠㅠ 꿍이가 아파요 어뜩하죠ㅠㅠ
-                      꿍이가 아파요 어뜩하죠ㅠㅠ 꿍이가 아파요 어뜩하죠ㅠㅠ
-                      꿍이가 아파요 어뜩하죠ㅠㅠ
+                <Link to={`/pettalk/${petTalkId}`}>
+                  <div className={styles.item}>
+                    <div className={styles.user_info}>
+                      <img src="" alt="profile-img" />
+                      <span className={styles.user_name}>닉네임</span>
+                      <span className={styles.date}>・ 게시된 날짜 넣기</span>
                     </div>
-                    <button className={styles.plus_button}>더보기</button>
-                  </div>
-
-                  {/* 이미지가 없는 게시글이면 숨겨지도록 작업예정 */}
-                  <div className={styles.content_img}>
-                    <img src="" alt="예시이미지" />
-                  </div>
-                  <div className={styles.response_wrapper}>
-                    <div className={styles.icon_area}>
-                      <img src={heart} alt="" />
-                      <span>100</span>
+                    <div className={styles.title}>제목 텍스트 입니다.</div>
+                    <div className={styles.text_wrapper}>
+                      <div className={styles.content_text}>
+                        꿍이가 아파요 어뜩하죠ㅠㅠ 꿍이가 아파요 어뜩하죠ㅠㅠ
+                        꿍이가 아파요 어뜩하죠ㅠㅠ 꿍이가 아파요 어뜩하죠ㅠㅠ
+                        꿍이가 아파요 어뜩하죠ㅠㅠ 꿍이가 아파요 어뜩하죠ㅠㅠ
+                        꿍이가 아파요 어뜩하죠ㅠㅠ
+                      </div>
+                      <button className={styles.plus_button}>더보기</button>
                     </div>
-                    <div className={styles.icon_area}>
-                      <img src={talk} alt="" />
-                      <span>100</span>
+
+                    {/* 이미지가 없는 게시글이면 숨겨지도록 작업예정 */}
+                    <div className={styles.content_img}>
+                      <img src="" alt="예시이미지" />
                     </div>
-                    <div className={styles.icon_area}>
-                      <img src={view} alt="" />
-                      <span>100</span>
+                    <div className={styles.response_wrapper}>
+                      <div className={styles.icon_area}>
+                        <img src={heart} alt="" />
+                        <span>100</span>
+                      </div>
+                      <div className={styles.icon_area}>
+                        <img src={talk} alt="" />
+                        <span>100</span>
+                      </div>
+                      <div className={styles.icon_area}>
+                        <img src={view} alt="" />
+                        <span>100</span>
+                      </div>
                     </div>
                   </div>
-                </div>
+                </Link>
               </div>
               <div className={styles.border}>
-                <div className={styles.item}>
-                  <div className={styles.user_info}>
-                    <img src="" alt="profile-img" />
-                    <span className={styles.user_name}>닉네임</span>
-                    <span className={styles.today_date}>
-                      ・ 게시된 날짜 넣기
-                    </span>
-                  </div>
-                  <div className={styles.title}>제목 텍스트 입니다.</div>
-                  <div className={styles.text_wrapper}>
-                    <div className={styles.content_text}>
-                      꿍이가 아파요 어뜩하죠ㅠㅠ 꿍이가 아파요 어뜩하죠ㅠㅠ
-                      꿍이가 아파요 어뜩하죠ㅠㅠ 꿍이가 아파요 어뜩하죠ㅠㅠ
-                      꿍이가 아파요 어뜩하죠ㅠㅠ 꿍이가 아파요 어뜩하죠ㅠㅠ
-                      꿍이가 아파요 어뜩하죠ㅠㅠ
+                <Link to={`/pettalk/${petTalkId}`}>
+                  <div className={styles.item}>
+                    <div className={styles.user_info}>
+                      <img src="" alt="profile-img" />
+                      <span className={styles.user_name}>닉네임</span>
+                      <span className={styles.today_date}>
+                        ・ 게시된 날짜 넣기
+                      </span>
                     </div>
-                    <button className={styles.plus_button}>더보기</button>
-                  </div>
-
-                  <div className={styles.response_wrapper}>
-                    <div className={styles.icon_area}>
-                      <img src={heart} alt="" />
-                      <span>100</span>
-                    </div>
-                    <div className={styles.icon_area}>
-                      <img src={talk} alt="" />
-                      <span>100</span>
+                    <div className={styles.title}>제목 텍스트 입니다.</div>
+                    <div className={styles.text_wrapper}>
+                      <div className={styles.content_text}>
+                        꿍이가 아파요 어뜩하죠ㅠㅠ 꿍이가 아파요 어뜩하죠ㅠㅠ
+                        꿍이가 아파요 어뜩하죠ㅠㅠ 꿍이가 아파요 어뜩하죠ㅠㅠ
+                        꿍이가 아파요 어뜩하죠ㅠㅠ 꿍이가 아파요 어뜩하죠ㅠㅠ
+                        꿍이가 아파요 어뜩하죠ㅠㅠ
+                      </div>
+                      <button className={styles.plus_button}>더보기</button>
                     </div>
-                    <div className={styles.icon_area}>
-                      <img src={view} alt="" />
-                      <span>100</span>
+
+                    <div className={styles.response_wrapper}>
+                      <div className={styles.icon_area}>
+                        <img src={heart} alt="" />
+                        <span>100</span>
+                      </div>
+                      <div className={styles.icon_area}>
+                        <img src={talk} alt="" />
+                        <span>100</span>
+                      </div>
+                      <div className={styles.icon_area}>
+                        <img src={view} alt="" />
+                        <span>100</span>
+                      </div>
                     </div>
                   </div>
-                </div>
+                </Link>
               </div>
 
               <div className={styles.border}>
-                <div className={styles.item}>
-                  <div className={styles.user_info}>
-                    <img src="" alt="profile-img" />
-                    <span className={styles.user_name}>닉네임</span>
-                    <span className={styles.today_date}>
-                      ・ 게시된 날짜 넣기
-                    </span>
-                  </div>
-                  <div className={styles.title}>제목 텍스트 입니다.</div>
-                  <div className={styles.text_wrapper}>
-                    <div className={styles.content_text}>
-                      꿍이가 아파요 어뜩하죠ㅠㅠ 꿍이가 아파요 어뜩하죠ㅠㅠ
-                      꿍이가 아파요 어뜩하죠ㅠㅠ 꿍이가 아파요 어뜩하죠ㅠㅠ
-                      꿍이가 아파요 어뜩하죠ㅠㅠ 꿍이가 아파요 어뜩하죠ㅠㅠ
-                      꿍이가 아파요 어뜩하죠ㅠㅠ
+                <Link to={`/pettalk/${petTalkId}`}>
+                  <div className={styles.item}>
+                    <div className={styles.user_info}>
+                      <img src="" alt="profile-img" />
+                      <span className={styles.user_name}>닉네임</span>
+                      <span className={styles.today_date}>
+                        ・ 게시된 날짜 넣기
+                      </span>
                     </div>
-                    <button className={styles.plus_button}>더보기</button>
-                  </div>
-                  {/* 이미지가 없는 게시글이면 숨겨지도록 작업예정 */}
-                  <div className={styles.content_img}>
-                    <img src="" alt="예시이미지" />
-                  </div>
-                  <div className={styles.response_wrapper}>
-                    <div className={styles.icon_area}>
-                      <img src={heart} alt="" />
-                      <span>100</span>
+                    <div className={styles.title}>제목 텍스트 입니다.</div>
+                    <div className={styles.text_wrapper}>
+                      <div className={styles.content_text}>
+                        꿍이가 아파요 어뜩하죠ㅠㅠ 꿍이가 아파요 어뜩하죠ㅠㅠ
+                        꿍이가 아파요 어뜩하죠ㅠㅠ 꿍이가 아파요 어뜩하죠ㅠㅠ
+                        꿍이가 아파요 어뜩하죠ㅠㅠ 꿍이가 아파요 어뜩하죠ㅠㅠ
+                        꿍이가 아파요 어뜩하죠ㅠㅠ
+                      </div>
+                      <button className={styles.plus_button}>더보기</button>
                     </div>
-                    <div className={styles.icon_area}>
-                      <img src={talk} alt="" />
-                      <span>100</span>
+                    {/* 이미지가 없는 게시글이면 숨겨지도록 작업예정 */}
+                    <div className={styles.content_img}>
+                      <img src="" alt="예시이미지" />
                     </div>
-                    <div className={styles.icon_area}>
-                      <img src={view} alt="" />
-                      <span>100</span>
+                    <div className={styles.response_wrapper}>
+                      <div className={styles.icon_area}>
+                        <img src={heart} alt="" />
+                        <span>100</span>
+                      </div>
+                      <div className={styles.icon_area}>
+                        <img src={talk} alt="" />
+                        <span>100</span>
+                      </div>
+                      <div className={styles.icon_area}>
+                        <img src={view} alt="" />
+                        <span>100</span>
+                      </div>
                     </div>
                   </div>
-                </div>
+                </Link>
               </div>
             </div>
 

diff --git a/src/styles/pettalk.module.scss b/src/styles/pettalk.module.scss
@@ -87,7 +87,7 @@
         .user_info {
           display: flex;
           align-items: center;
-          column-gap: 4px;
+          column-gap: 8px;
           img {
             width: 26px;
             height: 26px;
@@ -108,15 +108,15 @@
         .title {
           color: $gray_0900_171717;
           margin: 8px 0;
-          margin-left: 30px;
+          margin-left: 35px;
           font-size: 14px;
           font-weight: 600;
         }
         .text_wrapper {
           margin-bottom: 12px;
           .content_text {
             color: $gray_0700_5C5C5C;
-            margin-left: 30px;
+            margin-left: 35px;
             font-size: 14px;
             font-weight: 400;
             width: 293px;
@@ -139,7 +139,7 @@
             padding: 0;
             overflow: visible;
             cursor: pointer;
-            margin-left: 30px;
+            margin-left: 35px;
           }
         }
 
@@ -149,7 +149,7 @@
           display: flex;
           justify-content: center;
           align-items: center;
-          margin-left: 30px;
+          margin-left: 35px;
 
           img {
             width: 293px;
@@ -159,7 +159,7 @@
         .response_wrapper {
           display: flex;
           gap: 8px;
-          margin-left: 30px;
+          margin-left: 35px;
           margin-top: 12px;
           .icon_area {
             display: flex;