Merge pull request #47 from 9oormthon-univ/feature/#46

feaat : 일기상세 ui 업데이트
9oormthon-univ · Aug 2, 2024 · f091102 · f091102
2 parents 2e65292 + 6f33d76
commit f091102
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 12 deletions.
diff --git a/src/components/HeaderNav/HeaderNav.styles.ts b/src/components/HeaderNav/HeaderNav.styles.ts
@@ -3,7 +3,7 @@ import { css } from "@emotion/react";
 
 const HeaderWrapper = css`
   width: 100%;
-  max-width: 780px;
+  max-width: 768px;
   position: fixed;
   height: 96px;
   top: 0;

diff --git a/src/components/Tag/Tag.styles.ts b/src/components/Tag/Tag.styles.ts
@@ -15,5 +15,5 @@ export const TagWrapper = styled.div`
 export const TagText = styled.p`
   color: #000;
 
-  ${({ theme }) => theme.text.detail1_reg};
+  ${({ theme }) => theme.text.body3_reg};
 `;
diff --git a/src/newPages/homeOther/HomeOther.styles.ts b/src/newPages/homeOther/HomeOther.styles.ts
@@ -70,7 +70,7 @@ export const TabWrapper = styled.div`
   display: flex;
   justify-content: center;
   width: 100%;
-  max-width: 375px;
+  max-width: 768px;
   position: fixed;
   top: 96px;
   background-color: white;

diff --git a/src/newPages/homeOther/PostComponent.tsx b/src/newPages/homeOther/PostComponent.tsx
@@ -121,7 +121,8 @@ const PostComponent = ({
 }: NewDiaryCardProps) => {
   const navigate = useNavigate();
   const handleClick = () => {
-    navigate(`/diaryDetail?from=otherCollection&diaryId=${id}`);
+    // navigate(`/diaryDetail?from=otherCollection&diaryId=${id}`);
+    navigate(`/diaryDetail?from=otherCollection&diaryId=${id}&profileUrl=${profileUrl}`);
   };
   return (
     <CardWrapper>

diff --git a/src/pages/diaryDetail/DiaryDetail.styles.ts b/src/pages/diaryDetail/DiaryDetail.styles.ts
@@ -11,6 +11,18 @@ export const TogetherWrapper = styled.div`
 
   overflow: scroll;
 `;
+export const Avatar = styled.div`
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  overflow: hidden;
+  margin-right: 10px; /* Adjust the margin to control the space between avatar and title */
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+`;
 
 export const MainSectionWrapper = styled.div`
   display: flex;
@@ -40,12 +52,12 @@ export const TitleWrapper = styled.div`
 export const NameText = styled.p`
   color: #000;
 
-  ${({ theme }) => theme.text.detail2_bold};
+  ${({ theme }) => theme.text.heading3};
 `;
 
 export const DateText = styled.p`
   color: ${({ theme }) => theme.colors.gray[400]};
-  ${({ theme }) => theme.text.detail2_reg};
+  ${({ theme }) => theme.text.body2_reg};
 `;
 
 export const VoiceButton = styled.button`
@@ -81,7 +93,7 @@ export const Content = styled.p`
 
   color: #000;
 
-  ${({ theme }) => theme.text.detail1_reg};
+  ${({ theme }) => theme.text.body1_reg};
 
   margin-top: 12px;
   margin-bottom: 20px;
@@ -122,7 +134,7 @@ export const ToggleButtonWrapper = styled.div`
 `;
 
 export const ToggleButtonText = styled.p`
-  color: ${({ theme }) => theme.colors.pink[500]};
+  color: #00b207;
   ${({ theme }) => theme.text.detail2_reg};
 `;
 
@@ -132,3 +144,8 @@ export const LikeButtonWrapper = styled.div`
   align-items: center;
   gap: 4px;
 `;
+
+export const ProfileWrapper = styled.div`
+  justify-content: flex-start;
+  display: flex;
+`;
diff --git a/src/pages/diaryDetail/DiaryDetail.tsx b/src/pages/diaryDetail/DiaryDetail.tsx
@@ -25,6 +25,7 @@ const DiaryDetail = () => {
   const [searchParams] = useSearchParams();
   const from = searchParams.get("from");
   const diaryId = Number(searchParams.get("diaryId"));
+  const profileUrl = searchParams.get("profileUrl") ?? undefined; // Get the profileUrl
 
   const [diary] = useRecoilState(diaryState);
 
@@ -117,10 +118,18 @@ const DiaryDetail = () => {
         <ImagePagination images={images} isLogin={false} />
         <S.MainSectionWrapper>
           <S.ContentTitleWrapper>
-            <S.TitleWrapper>
-              <S.NameText>{diaryData?.title}</S.NameText>
-              <S.DateText>{formatDate(new Date())}</S.DateText>
-            </S.TitleWrapper>
+            <S.ProfileWrapper>
+              {from === "otherCollection" && (
+                <S.Avatar>
+                  <img src={profileUrl} alt="Profile" />
+                </S.Avatar>
+              )}
+
+              <S.TitleWrapper>
+                <S.NameText>{diaryData?.title}</S.NameText>
+                <S.DateText>{formatDate(new Date())}</S.DateText>
+              </S.TitleWrapper>
+            </S.ProfileWrapper>
             {from === "myCollection" && (
               <S.VoiceButton>
                 <VoiceButtonIcon />