Merge pull request #98 from official-Trippy/feature/#87

�fix: QA
official-Trippy · Aug 5, 2024 · 68076ff · 68076ff
2 parents c9be506 + 3f3b421
commit 68076ff
Show file tree

Hide file tree

Showing 20 changed files with 116 additions and 69 deletions.
diff --git a/src/app/board/[boardId]/page.tsx b/src/app/board/[boardId]/page.tsx
@@ -212,7 +212,7 @@ export default function BoardPage({ params }: { params: { boardId: number } }) {
     return (
         <div>
             <Header />
-            <div className="w-[80%] mx-auto">
+            <div className="w-[66%] mx-auto">
                 <div className="mt-[8rem] text-[#6B6B6B] font-semibold text-[2rem]">
                     <span>{postData?.result.member.blogName}의 블로그</span>
                 </div>

diff --git a/src/app/mypage/page.tsx b/src/app/mypage/page.tsx
@@ -80,12 +80,12 @@ const MyPage = () => {
           objectFit="cover"
         />
       </div>
-      <div className="w-[80%] mx-auto">
-        <h1 className="w-[80%] absolute ml-auto text-right top-[320px] text-white text-4xl font-bold">
+      <div className="w-[66%] mx-auto">
+        <h1 className="w-[66%] absolute ml-auto text-right top-[320px] text-white text-4xl font-bold">
           {userData && userData.blogName}
         </h1>
       </div>
-      <div className="w-[80%] mx-auto flex p-4">
+      <div className="w-[66%] mx-auto flex p-4">
         <div className="w-[250px] mb-4">
           <UserInformation setActiveTab={setActiveTab} />
         </div>

diff --git a/src/app/onBoarding/page.tsx b/src/app/onBoarding/page.tsx
@@ -39,23 +39,23 @@ const OnBoradingPage = () => {
       <Header />
       <div className="pages" ref={pagesRef}>
         <FirstBg className="page slide-up-animation">
-          <div className="w-[80%] flex mx-auto">
+          <div className="w-[66%] flex mx-auto">
             <div className="pt-[10rem]">
               <h1 className="text-[4rem] font-bold text-btn-color">나만의 여행을<br />기록할 수 있어요</h1>
               <span className="text-[2rem] font-normal text-btn-color">소중한 순간들을 나만의 스타일로 특별하게 기록해보세요</span>
             </div>
           </div>
         </FirstBg>
         <SecondBg className={`page ${showSecondAnimation ? 'slide-up-animation' : ''}`}>
-          <div className="w-[80%] flex mx-auto">
+          <div className="w-[66%] flex mx-auto">
             <div className="pt-[10rem] flex flex-col ml-auto">
               <h1 className="text-[4rem] font-bold text-white flex flex-col ml-auto">서로의 여행 기록을<a className="flex ml-auto">공유할 수 있어요</a></h1>
               <span className="text-[2rem] font-normal text-white">서로의 이야기를 통해 각자의 여행을 더욱 뜻깊게 만들어보세요</span>
             </div>
           </div>
         </SecondBg>
         <ThirdBg className="page slide-up-animation">
-          <div className="w-[80%] flex flex-col relative z-10 mx-auto my-auto">
+          <div className="w-[66%] flex flex-col relative z-10 mx-auto my-auto">
             <div className="pt-[10rem] flex flex-col mx-auto text-center">
               <h1 className="text-[4rem] font-bold text-white flex mx-auto">나만의 특별한 OOTD와<br />정보를 공유할 수 있어요</h1>
               <span className="text-[2rem] font-normal text-white">여행 중 나의 특별한 OOTD를 공유하며 소통해보세요</span>

diff --git a/src/app/post/page.tsx b/src/app/post/page.tsx
@@ -312,7 +312,7 @@ function PostWrite() {
     return (
         <div>
             <Header />
-            <div className='w-[80%] mx-auto'>
+            <div className='w-[66%] mx-auto'>
                 <div className='flex items-center mt-[5rem]'>
                     <button
                         onClick={() => handleButtonClick('#55FBAF', 0)}

diff --git a/src/app/user/[id]/page.tsx b/src/app/user/[id]/page.tsx
@@ -75,12 +75,12 @@ const UserPage = ({ params }: { params: { id: string } }) => {
           objectFit="cover"
         />
       </div>
-      <div className="w-[80%] mx-auto">
+      <div className="w-[66%] mx-auto">
         <h1 className="w-[80%] absolute ml-auto text-right top-[320px] text-white text-4xl font-bold">
           {userData && userData.blogName}
         </h1>
       </div>
-      <div className="w-[80%] mx-auto flex p-4">
+      <div className="w-[66%] mx-auto flex p-4">
         <div className="w-[250px] mb-4">
           <UserProfile memberId={id} setActiveTab={setActiveTab} />
         </div>

diff --git a/src/components/auth/LoginForm.tsx b/src/components/auth/LoginForm.tsx
@@ -68,7 +68,7 @@ const LoginForm = () => {
   };
 
   return (
-    <div className="w-[80%] mx-auto mt-[15rem]">
+    <div className="w-[66%] mx-auto mt-[15rem]">
       <form onSubmit={handleSubmit} className="flex flex-col items-center">
         <Image src={LogoMain} alt="Logo" />
         <div className="flex flex-col mt-[6rem]">

diff --git a/src/components/auth/SignUpForm.tsx b/src/components/auth/SignUpForm.tsx
@@ -198,7 +198,7 @@ const SignUpForm = () => {
   }, [timer, verificationClicked]);
 
   return (
-    <form onSubmit={handleSubmit} className="w-[80%] mx-auto mt-[15rem]">
+    <form onSubmit={handleSubmit} className="w-[66%] mx-auto mt-[15rem]">
       <Image src={LogoMain} alt="Logo" className="mx-auto" />
       <div className="sign-up-info mt-[8rem]">로그인 정보를 설정해주세요</div>
       <label htmlFor="email" className="sign-up-info block mt-[6.9rem]">

diff --git a/src/components/blogSignUp/BlogRegisterFirst.tsx b/src/components/blogSignUp/BlogRegisterFirst.tsx
@@ -180,7 +180,7 @@ const BlogRegisterFirst = () => {
 
 
   return (
-    <div className="w-[80%] mx-auto mt-[15rem]">
+    <div className="w-[66%] mx-auto mt-[15rem]">
       <Image src={BlogStep1} alt="Logo" className="w-[47.7rem] mx-auto" />
       <div className="mt-[8rem]">
         <div className="sign-up-info">기본 회원 정보를 등록해주세요</div>

diff --git a/src/components/blogSignUp/BlogRegisterSecond.tsx b/src/components/blogSignUp/BlogRegisterSecond.tsx
@@ -39,7 +39,7 @@ const BlogRegisterSecond = () => {
   };
 
   return (
-    <div className="w-[80%] mx-auto mt-[15rem]">
+    <div className="w-[66%] mx-auto mt-[15rem]">
       <Image src={BlogStep2} alt="Logo" className="w-[47.7rem] mx-auto" />
       <div className="mt-[8rem]">
         <div className="mx-auto text-center">

diff --git a/src/components/blogSignUp/BlogRegisterThird.tsx b/src/components/blogSignUp/BlogRegisterThird.tsx
@@ -11,7 +11,7 @@ const BlogRegisterThird = () => {
   const { userInfo } = useUserInfo();
 
   return (
-    <div className="flex flex-col items-center justify-center w-[80%] mx-auto mt-[15rem]">
+    <div className="flex flex-col items-center justify-center w-[66%] mx-auto mt-[15rem]">
       <Image src={BlogStep3} alt="Logo" className="w-[47.7rem] mx-auto" />
       <Image src={CheckIcon} alt="checkLogo" className="mx-auto mt-[10.9rem] w-[10.3rem] h-[10.3rem]" />
       <div className="sign-up-complete mt-[3.6rem] text-center">회원가입 완료</div>

diff --git a/src/components/find/Account.tsx b/src/components/find/Account.tsx
@@ -54,7 +54,7 @@ const Account = () => {
   };
 
   return (
-    <div className="flex flex-col items-center justify-center w-[80%] mx-auto mt-[19rem]">
+    <div className="flex flex-col items-center justify-center w-[66%] mx-auto mt-[19rem]">
       <Image src={LogoMain} alt="Logo" className="w-[16.4rem] mx-auto" />
       <div className="flex flex-col mt-[6rem]">
         <div className="text-center text-zinc-800 text-4xl font-semibold font-['Pretendard']">계정 찾기</div>

diff --git a/src/components/find/Password.tsx b/src/components/find/Password.tsx
@@ -196,7 +196,7 @@ const Password = () => {
 
 
   return (
-    <div className="flex flex-col items-center justify-center w-[80%] mx-auto mt-[19rem]">
+    <div className="flex flex-col items-center justify-center w-[66%] mx-auto mt-[19rem]">
       <Image src={LogoMain} alt="Logo" className="w-[16.4rem] mx-auto" />
       {!showPasswordFields && (
         <><div className="flex flex-col mt-[6rem]">

diff --git a/src/components/ootd/OotdDetail.tsx b/src/components/ootd/OotdDetail.tsx
@@ -108,9 +108,9 @@ const OotdDetail: React.FC<OotdDetailProps> = ({ id }) => {
     <>
       <div className="container mx-auto p-4">
         <div className="w-full max-w-6xl mx-auto">
-          <div className="py-4 flex items-center justify-between">
+          <div className="py-12 flex items-center justify-between">
             <div className="flex items-center">
-            <div className="relative w-[48px] h-[48px]">
+            <div className="relative w-[68px] h-[68px]">
                 <Image
                   src={ootdItem.member.profileUrl}
                   alt="사용자 프로필"
@@ -120,8 +120,8 @@ const OotdDetail: React.FC<OotdDetailProps> = ({ id }) => {
                   onClick={handleProfileClick}
                 />
               </div>
-              <div className="ml-4">
-                <span className="block font-bold text-xl ml-[2px]">
+              <div className="h-[48px] ml-4">
+                <span className="block font-bold text-[24px] ml-[2px]">
                   {ootdItem.member.nickName}
                 </span>
                 <div className="flex items-center gap-2">
@@ -150,17 +150,22 @@ const OotdDetail: React.FC<OotdDetailProps> = ({ id }) => {
             </div>
           </div>
           <div className="relative">
-            <Slider {...settings}>
-              {ootdItem.post.images.map((image, index) => (
-                <div key={index}>
-                  <img
-                    className="w-full rounded-t-lg"
+          <Slider {...settings}>
+            {ootdItem.post.images.map((image, index) => (
+              <div key={index}>
+                <div className="relative w-full" style={{ aspectRatio: '1 / 1' }}>
+                  <Image
                     src={image.accessUri}
                     alt={`OOTD Image ${index + 1}`}
+                    className="absolute inset-0 w-full h-full object-cover rounded-xl"
+                    width={720}
+                    height={720}
                   />
                 </div>
-              ))}
-            </Slider>
+              </div>
+            ))}
+          </Slider>
+
           </div>
           <div className="py-[50px] text-[20px]">{ootdItem.post.body}</div>
           <div className="flex pt-4">

diff --git a/src/components/pages/home/recentPost.tsx b/src/components/pages/home/recentPost.tsx
@@ -77,7 +77,7 @@ function RecentPost({ allPosts, setAllPosts, boardData, userInfo }: HomeRecentPr
     console.log(sortedFollowPosts())
 
     return (
-        <div className='w-[80%] mx-auto py-[5rem]'>
+        <div className='w-[66%] mx-auto py-[5rem]'>
             <div>
                 <h1 className='font-bold text-[2rem]'>최신 포스트</h1>
                 <div className='flex text-[1.6rem] pt-[5rem] px-[1rem]'>

diff --git a/src/components/pages/home/recommend.tsx b/src/components/pages/home/recommend.tsx
@@ -16,7 +16,7 @@ function Recommend({ children, memberData, isLoading }: HomeProps) {
 
 
     return (
-        <div className='w-[80%] flex flex-col mx-auto mt-[8rem]'>
+        <div className='w-[66%] flex flex-col mx-auto mt-[8rem]'>
             {isLoading ? (<div>
 
             </div>) : (

diff --git a/src/components/pages/ootd/RecentOotdPost.tsx b/src/components/pages/ootd/RecentOotdPost.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useState, useEffect, useTransition } from 'react';
+import React, { useState, useEffect, useRef, useTransition } from 'react';
 import Cookies from 'js-cookie';
 import { useQuery } from 'react-query';
 import Image from 'next/image';
@@ -11,7 +11,64 @@ import { MemberInfo } from '@/services/auth';
 import EmptyHeartIcon from '../../../../public/empty_heart_default.svg';
 import CommentIcon1 from '../../../../public/empty_comment_default.svg';
 
-const PAGE_SIZE = 8;
+const PAGE_SIZE = 12;
+
+interface TagContainerProps {
+  item: {
+    post: {
+      id: number;
+      body: string;
+      tags: string[];
+      images: { accessUri: string }[];
+      likeCount: number;
+      commentCount: number;
+    };
+    member: {
+      profileUrl: string;
+      nickName: string;
+    };
+  };
+}
+
+const TagContainer: React.FC<TagContainerProps> = ({ item }) => {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const [visibleTags, setVisibleTags] = useState<string[]>(item.post.tags);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const tags = Array.from(container.children) as HTMLElement[];
+    let totalWidth = 0;
+    let visibleCount = 0;
+
+    tags.forEach((tag, index) => {
+      totalWidth += tag.offsetWidth + parseInt(getComputedStyle(tag).marginRight);
+
+      if (totalWidth <= container.offsetWidth) {
+        visibleCount = index + 1;
+      }
+    });
+
+    setVisibleTags(item.post.tags.slice(0, visibleCount));
+  }, [item.post.tags]);
+
+  return (
+    <div className="mt-4">
+      <h2 className="text-[1.2rem] font-medium text-[#6B6B6B]">{item.post.body}</h2>
+      <div className="flex flex-wrap mt-4 gap-2" ref={containerRef}>
+        {visibleTags.map((tag, index) => (
+          <span
+            key={index}
+            className="px-4 py-1 bg-neutral-100 rounded-3xl text-xl justify-center items-center gap-2.5 inline-flex text-[#9d9d9d]"
+          >
+            {tag}
+          </span>
+        ))}
+      </div>
+    </div>
+  );
+};
 
 const RecentOotdPost: React.FC = () => {
   const accessToken = Cookies.get('accessToken');
@@ -44,7 +101,7 @@ const RecentOotdPost: React.FC = () => {
     ['ootdPosts', page, orderType, tab],
     () => fetchAllOotdPosts(page, PAGE_SIZE, orderType), 
     {
-      enabled: tab === 'ALL' && totalCount !== undefined // Fetch only if tab is 'ALL'
+      enabled: tab === 'ALL' && totalCount !== undefined 
     }
   );
 
@@ -81,7 +138,7 @@ const RecentOotdPost: React.FC = () => {
   const ootdList = tab === 'ALL' ? data?.result || [] : [];
 
   return (
-    <div className='w-[80%] mx-auto py-[5rem]'>
+    <div className='w-[66%] mx-auto py-[5rem]'>
       <div>
         {accessToken ? (
           <h1 className='font-bold text-[2rem]'>
@@ -91,7 +148,7 @@ const RecentOotdPost: React.FC = () => {
           <h1 className='font-bold text-[2rem]'>트리피인들의 다양한 스타일을 만나보세요</h1>
         )}
       </div>
-      <div className='flex text-[1.6rem] pt-[5rem] px-[1rem]'>
+      <div className='flex text-[1.6rem] py-16'>
         <span
           className={`pr-[1rem] cursor-pointer ${tab === 'ALL' ? 'font-bold text-[#fa3463]' : ''}`}
           onClick={() => handleTabChange('ALL')}
@@ -119,13 +176,12 @@ const RecentOotdPost: React.FC = () => {
           {ootdList.map((item) => (
             <div key={item.post.id} className="flex flex-col overflow-hidden cursor-pointer" onClick={() => handleOotdItemClick(item.post.id)}>
               {item.post.images.length > 0 && (
-                <div className="relative w-full h-0 pt-[100%] overflow-hidden">
+                <div className="relative w-full" style={{ aspectRatio: '303 / 381' }}>
                   <Image
                     className="absolute top-0 left-0 w-full h-full object-cover rounded-xl"
                     src={item.post.images[0].accessUri}
                     alt="OOTD"
-                    width={200}
-                    height={200}
+                    layout="fill"
                   />
                 </div>
               )}
@@ -159,16 +215,7 @@ const RecentOotdPost: React.FC = () => {
                     <span className="mx-2 text-[#cfcfcf]"> {item.post.commentCount}</span>
                   </div>
                 </div>
-                <div className="mt-4">
-                  <h2 className="text-[1.2rem] font-medium text-[#6B6B6B]">{item.post.body}</h2>
-                  <div className="flex flex-wrap mt-4 gap-2">
-                    {item.post.tags.map((tag, index) => (
-                      <span key={index} className="px-4 py-1 bg-neutral-100 rounded-3xl text-xl justify-center items-center gap-2.5 inline-flex text-[#9d9d9d]">
-                        {tag}
-                      </span>
-                    ))}
-                  </div>
-                </div>
+                <TagContainer item={item} />
               </div>
             </div>
           ))}

diff --git a/src/components/pages/ootd/recoootd.tsx b/src/components/pages/ootd/recoootd.tsx
@@ -11,7 +11,7 @@ const Recoootd: React.FC<HomeProps> = ({ children, memberData, isLoading }) => {
     const accessToken = Cookies.get('accessToken');
 
     return (
-        <div className='w-[80%] flex flex-col mx-auto'>
+        <div className='w-[66%] flex flex-col mx-auto'>
             {isLoading ? (
                 <div>Loading...</div>
             ) : (

diff --git a/src/components/profile/EditInfo.tsx b/src/components/profile/EditInfo.tsx
@@ -384,7 +384,7 @@ const EditInfo = () => {
   return (
     <><div className="relative w-full h-[300px]">
       <Image src={backgroundImg} alt="Background" layout="fill" objectFit="cover" />
-    </div><div className="w-[80%] mx-auto">
+    </div><div className="w-[66%] mx-auto">
         <div className="mt-[8rem]">
           <div className="mt-[6.82rem]">
             <div className="sign-up-info">프로필 사진</div>

diff --git a/src/components/shared/footer/Footer.tsx b/src/components/shared/footer/Footer.tsx
@@ -7,7 +7,7 @@ import Link from "next/link";
 const Footer = () => {
     return (
         <div className="w-full h-[100px] fixed bottom-0 bg-neutral-500">
-            <div className="w-[80%] h-full mx-auto flex justify-between items-center">
+            <div className="w-[66%] h-full mx-auto flex justify-between items-center">
                 <div className="flex space-x-4 items-center h-full my-auto">
                     <div className="text-white text-base font-light font-['Pretendard']">서비스 이용약관</div>
                     <div className="text-white text-base font-light font-['Pretendard']">개인정보 처리방침</div>