💄 Style: 수정 - BackwardsHeader를 포함한 body 상단 padding값 외 8 (#39)

* 🎨 Design: 수정 -  추천장소 swiper autoplay해제

Fixes: #6

* ✨ Feat: 추가 - 더보기버튼이 포함된 타이틀 컴포넌트

Fixes: #2

* ✨ Feat: 추가 - 애개육아정보 인기글 컴포넌트

Related to : #32

* ✨ Feat: 추가 - 애개매거진

Related to: #15

* ✨ Feat: 추가 - 애개스토리

Related to: #17

* 💄 Style: 변경 - footer의 z-index

fixes: #2

* ✨ Feat: 추가 - home페이지 컴포넌트 조합 및 레이아웃 구성

Fixes: #23

* 💄 Style: 수정 - BackwardsHeader를 포함한 body 상단 padding값

Fixes: #2

* ✨ Feat: 수정 - 컴포넌트의 타이틀 부분 moretitle 컴포넌트로 수정

Fixes: #2

* ✨ Feat: 추가 - 마이페이지의  최근 본 장소

Related to: #34

* ✨ Feat: 추가 - 마이페이지의  나만의 북마크

Fixes: #35

* ♻️ Refactor:수정 - 로그인 상태 관리 로직을 부모 컴포넌트로 이동

Fixes: #9

* ✨ Feat: 추가 - 마이페이지 userinfo에 로그인 상태 전달 및 컴포넌트 추가

Fixes: #9

* ✨ Feat: 추가 - 글자 말줄임 처리 커스텀훅

Fixes: #2

* ✨ Feat: 추가 - 후기글 커스텀훅 사용하여 말줄임처리, 별점후기
DetailRating 컴포넌트 추가

Fixes: #10

* ✨ Feat: 추가 - 내가 작성한 글 텍스트 커스텀훅 사용하여 말줄임처리

Fixes: #36

src/components/Mypage/UserInfo.tsx

@@ -1,13 +1,15 @@
-import React, { useState } from 'react';
 import defaultProfile from '../../assets/DefaultProfile.svg';
 
-const UserInfo: React.FC = () => {
-  const [isLoggedIn, setIsLoggedIn] = useState(false);
+interface UserInfoProps {
+  isLoggedIn: boolean;
+}
+
+const UserInfo: React.FC<UserInfoProps> = ({ isLoggedIn }) => {
   return (
-    <div className='bg-white flex justify-center'>
+    <div className='flex justify-center bg-white py-[20px]'>
       {isLoggedIn ? (
         //로그인상태
-        <div className='rounded-10px flex h-[119px] w-[360px] items-center border-[0.5px] border-[#b3b3b3] px-[15px] py-[20px]'>
+        <div className='flex h-[119px] items-center rounded-[10px] border-[0.5px] border-[#b3b3b3] px-[15px] py-[20px]'>
           <div className='mr-[18px] flex h-[78px] w-[79px] flex-col items-center justify-center'>
             <img
               className='mb-[5px] h-[66px] w-[66px]'

src/hooks/useTruncatedText.tsx

@@ -0,0 +1,17 @@
+import { useState, useEffect } from 'react';
+
+const useTruncatedText = (text: string, maxLength: number) => {
+  const [truncatedText, setTruncatedText] = useState('');
+
+  useEffect(() => {
+    if (text.length > maxLength) {
+      setTruncatedText(text.slice(0, maxLength) + '...');
+    } else {
+      setTruncatedText(text);
+    }
+  }, [text, maxLength]);
+
+  return truncatedText;
+};
+
+export default useTruncatedText;

src/index.css

@@ -19,7 +19,7 @@ body:has(footer) {
   padding-bottom: 46px;
 }
 body:has(.BackwardsHeader) {
-  padding-top: 46px;
+  padding-top: 48px;
 }
 
 html {

src/page/MyPage/MyBookmark.tsx

@@ -0,0 +1,17 @@
+import MoreTitle from '../../components/layout/MoreTitle';
+import Place from '../../components/BDPlace/Place';
+
+const MyBookmark = () => {
+  return (
+    <div className='card card2'>
+      <MoreTitle title='나만의 북마크' />
+      <div className='gap-4px flex justify-between pb-[30px]'>
+        <Place />
+        <Place />
+        <Place />
+      </div>
+    </div>
+  );
+};
+
+export default MyBookmark;

src/page/MyPage/MyPage.tsx

@@ -1,17 +1,37 @@
-import React from 'react';
+import { useState } from 'react';
+import UserInfo from '../../components/Mypage/UserInfo';
+import MyBookmark from './MyBookmark';
+import RecentPlace from './RecentPlace';
 import BackwardsHeader from '../../components/BackwardsHeader';
 import ReviewList from './ReviewList';
 import WritingList from './WritingList';
 import FeaturedBanner from './FeaturedBanner';
 
 const MyPage = () => {
+  const [isLoggedIn, setIsLoggedIn] = useState(true);
   return (
     <div>
       <BackwardsHeader title='마이페이지' />
+      <UserInfo isLoggedIn={isLoggedIn} />
+      {isLoggedIn ? <UserDashboard /> : null}
+    </div>
+  );
+};
+
+const UserDashboard = () => {
+  return (
+    <>
+      {/* 나만의 북마크 */}
+      <MyBookmark />
+      {/* 최근 본 장소 */}
+      <RecentPlace />
+      {/* 작성 후기 */}
       <ReviewList />
+      {/* 내가 작성한 글 */}
       <WritingList />
+      {/* 배너 */}
       <FeaturedBanner />
-    </div>
+    </>
   );
 };
 

src/page/MyPage/RecentPlace.tsx

@@ -0,0 +1,17 @@
+import MoreTitle from '../../components/layout/MoreTitle';
+import Place from '../../components/BDPlace/Place';
+
+const RecentPlace = () => {
+  return (
+    <div className='card card2'>
+      <MoreTitle title='최근 본 장소' />
+      <div className='gap-4px flex justify-between pb-[30px]'>
+        <Place />
+        <Place />
+        <Place />
+      </div>
+    </div>
+  );
+};
+
+export default RecentPlace;

src/page/MyPage/ReviewList.tsx

@@ -1,21 +1,23 @@
 import ReviewListItem from './ReviewListItem';
-import more from '../../assets/More.svg';
+import MoreTitle from '../../components/layout/MoreTitle';
 
 const ReviewList = () => {
   const reviewItemCount = 3;
   const reviewItems = Array.from({ length: reviewItemCount });
 
+  const reviewText =
+    '친절하고 좋아요 아이들이랑 강아지랑 놀께 많아요 친절하고 좋아요 아이들이랑 강아지랑 놀께 많아요친절하고 좋아요 아이들이랑 강아지랑 놀께 많아요친절하고 좋아요 아이들이랑 강아지랑 놀께 많아요친절하고 좋아요 아이들이랑 강아지랑 놀께 많아요친절하고 좋아요 아이들이랑 강아지랑 놀께 많아요친절하고 좋아요 아이들이랑 강아지랑 놀께 많아요친절하고 좋아요 아이들이랑 강아지랑 놀께 많아요친절하고 좋아요 아이들이랑 강아지랑 놀께많아요 아이들이랑 강아지랑 놀께 많아요친절하고 좋아요 아이들이랑 강아지랑 놀께많아요';
+
   return (
     <>
       <div className='card card2'>
-        <div className='cardTitle flex items-center justify-between'>
-          <p className='font-semibold'>작성후기</p>
-          <button type='button' aria-label='작성후기 더보기'>
-            <img src={more} alt='더보기 아이콘' aria-hidden />
-          </button>
-        </div>
+        <MoreTitle title='작성 후기' />
         {reviewItems.map((_, index) => (
-          <ReviewListItem key={index} className={index === 0 ? 'first' : ''} />
+          <ReviewListItem
+            key={index}
+            className={index === 0 ? 'first' : ''}
+            reviewText={reviewText}
+          />
         ))}
       </div>
     </>

src/page/MyPage/ReviewListItem.tsx

@@ -1,16 +1,26 @@
 import classNames from 'classnames';
 import { GoStarFill } from 'react-icons/go';
+import useTruncatedText from '../../hooks/useTruncatedText';
+import DetailRating from '../Detail/DetailRating';
 
 interface ReviewListItemProps {
   className?: string;
+  reviewText: string;
 }
 
-const ReviewListItem: React.FC<ReviewListItemProps> = ({ className }) => {
+const ReviewListItem: React.FC<ReviewListItemProps> = ({
+  className,
+  reviewText,
+}) => {
+  // 첫번째 아이템의 경우 상단 border 없앰
   const borderClass = classNames({
     'border-t border-border': className !== 'first',
     'items-center py-[10px] flex': true,
   });
 
+  // useTruncatedText 훅 사용
+  const truncatedText = useTruncatedText(reviewText, 210);
+
   return (
     <div>
       <div className={borderClass}>
@@ -20,23 +30,10 @@ const ReviewListItem: React.FC<ReviewListItemProps> = ({ className }) => {
         </p>
       </div>
       <div className='mb-[15px] flex'>
-        <div className='flex gap-[4px]'>
-          <GoStarFill className='font-[12px] text-[#fddf02]' />
-          <GoStarFill className='font-[12px] text-[#fddf02]' />
-          <GoStarFill className='font-[12px] text-[#fddf02]' />
-          <GoStarFill className='font-[12px] text-[#fddf02]' />
-        </div>
+        <DetailRating initialRating={5} />
         <span className='ml-[8px] text-[12px] text-caption'>2024.01.01</span>
       </div>
-      <p className='pb-[15px] text-[12px]'>
-        친절하고 좋아요 아이들이랑 강아지랑 놀께 많아요 친절하고 좋아요
-        아이들이랑 강아지랑 놀께 많아요친절하고 좋아요 아이들이랑 강아지랑 놀께
-        많아요친절하고 좋아요 아이들이랑 강아지랑 놀께 많아요친절하고 좋아요
-        아이들이랑 강아지랑 놀께 많아요친절하고 좋아요 아이들이랑 강아지랑 놀께
-        많아요친절하고 좋아요 아이들이랑 강아지랑 놀께 많아요친절하고 좋아요
-        아이들이랑 강아지랑 놀께 많아요친절하고 좋아요 아이들이랑 강아지랑 놀께
-        많아요
-      </p>
+      <p className='pb-[15px] text-[12px]'>{truncatedText}</p>
       {/* <div className='imgList flex flex-wrap gap-[12px] pb-[40px]'>
         <div className='imgWrap h-[50px] w-[50px] rounded-[10px] border-2 border-border bg-background'></div>
         <div className='imgWrap h-[50px] w-[50px] rounded-[10px] border-2 border-border bg-background'></div>

src/page/MyPage/WritingList.tsx

@@ -1,21 +1,23 @@
 import WritingListItem from './WritingListItem';
-import more from '../../assets/More.svg';
+import MoreTitle from '../../components/layout/MoreTitle';
 
 const WritingList = () => {
   const reviewItemCount = 2;
   const reviewItems = Array.from({ length: reviewItemCount });
 
+  const boardText =
+    '친절하고 좋아요 아이들이랑 강아지랑 놀께 많아요 친절하고 좋아요 아이들이랑 강아지랑 놀께 많아요친절하고 좋아요 아이들이랑 강아지랑 놀께 많아요친절하고 좋아요 아이들이랑 강아지랑 놀께 많아요친절하고 좋아요 아이들이랑 강아지랑 놀께 많아요친절하고 좋아요 아이들이랑 강아지랑 놀께 많아요친절하고 좋아요 아이들이랑 강아지랑 놀께 많아요친절하고 좋아요 아이들이랑 강아지랑 놀께 많아요친절하고 좋아요 아이들이랑 강아지랑 놀께많아요 아이들이랑 강아지랑 놀께 많아요친절하고 좋아요 아이들이랑 강아지랑 놀께많아요';
+
   return (
     <>
       <div className='last card card2'>
-        <div className='cardTitle flex items-center justify-between'>
-          <p className='font-semibold'>내가 작성한 글</p>
-          <button type='button' aria-label='내가 작성한 글 더보기'>
-            <img src={more} alt='더보기 아이콘' aria-hidden />
-          </button>
-        </div>
+        <MoreTitle title='내가 작성한 글' />
         {reviewItems.map((_, index) => (
-          <WritingListItem key={index} className={index === 0 ? 'first' : ''} />
+          <WritingListItem
+            key={index}
+            className={index === 0 ? 'first' : ''}
+            boardText={boardText}
+          />
         ))}
       </div>
     </>

src/page/MyPage/WritingListItem.tsx

@@ -1,16 +1,24 @@
 import classNames from 'classnames';
-import { GoStarFill } from 'react-icons/go';
+import useTruncatedText from '../../hooks/useTruncatedText';
 
 interface WritingListItemProps {
   className?: string;
+  boardText: string;
 }
 
-const WritingListItem: React.FC<WritingListItemProps> = ({ className }) => {
+const WritingListItem: React.FC<WritingListItemProps> = ({
+  className,
+  boardText,
+}) => {
+  // 첫번째 아이템의 경우 상단 border 없앰
   const borderClass = classNames({
     'border-t border-border': className !== 'first',
     'items-center py-[10px] flex': true,
   });
 
+  // useTruncatedText 훅 사용
+  const truncatedText = useTruncatedText(boardText, 210);
+
   return (
     <div>
       <div className={borderClass}>
@@ -19,15 +27,7 @@ const WritingListItem: React.FC<WritingListItemProps> = ({ className }) => {
         </p>
         <span className='ml-[4px] text-[12px] text-caption'>2024.01.01</span>
       </div>
-      <p className='pb-[15px] text-[12px]'>
-        친절하고 좋아요 아이들이랑 강아지랑 놀께 많아요 친절하고 좋아요
-        아이들이랑 강아지랑 놀께 많아요친절하고 좋아요 아이들이랑 강아지랑 놀께
-        많아요친절하고 좋아요 아이들이랑 강아지랑 놀께 많아요친절하고 좋아요
-        아이들이랑 강아지랑 놀께 많아요친절하고 좋아요 아이들이랑 강아지랑 놀께
-        많아요친절하고 좋아요 아이들이랑 강아지랑 놀께 많아요친절하고 좋아요
-        아이들이랑 강아지랑 놀께 많아요친절하고 좋아요 아이들이랑 강아지랑 놀께
-        많아요
-      </p>
+      <p className='pb-[15px] text-[12px]'>{truncatedText}</p>
     </div>
   );
 };