Merge pull request #142 from starlight-dari/main

merge main into deploy

Author: jjoo1229

src/app/memoryAlbum/layout.tsx

@@ -40,4 +40,8 @@ const Body = styled.div`
   color: #fff;
 `;
 
-const Content = styled.div``;
+const Content = styled.div`
+  width: calc(100vw - 300px);
+  display: flex;
+  justify-content: center;
+`;

src/app/starCommunity/page.tsx

@@ -139,7 +139,7 @@ const Body = styled.div`
 
 const TitleWrapper = styled.div`
   display: flex;
-  width: 68vw;
+  width: 1190px;
   padding: 30px 0;
   align-items: end;
   gap: 15px;
@@ -156,7 +156,7 @@ const Subtitle = styled.div`
 
 const Container = styled.div`
   height: 926px;
-  width: 1189px;
+  width: 1190px;
   position: relative;
   overflow-y: auto;
 `;

src/components/chatbotModal.tsx

@@ -37,8 +37,8 @@ const questions: QuestionData[] = [
     id: 3,
     category: "펫로스증후군 극복 프로그램",
     question: `다음은 펫로스 증후군 극복 프로그램 링크 목록입니다.\n
-[마인드카페 센터_바로가기](https://center.mindcafe.co.kr/program_petloss)\n
-[마음치유모임 with 펫로스_바로가기](https://www.gangnam.go.kr/contents/mind_healing/1/view.do?mid=ID04_04075401)`,
+<a href="https://center.mindcafe.co.kr/program_petloss" style="color:#ADC3F3;">마인드카페 센터_바로가기</a>\n
+<a href="https://www.gangnam.go.kr/contents/mind_healing/1/view.do?mid=ID04_04075401" style="color:#ADC3F3;">마음치유모임 with 펫로스_바로가기</a>`,
   },
 ];
 

src/components/memoryAlbumContent.tsx

@@ -44,16 +44,18 @@ const AlbumContent: React.FC<PetAlbumContentProps> = ({ petId }) => {
       <Container>
         <Title>도착한 편지들</Title>
         {petAlbumContent && petAlbumContent.length > 0 ? (
-          petAlbumContent?.map((item, index) => (
-            <Letter
-              key={index}
-              onClick={() => handleLetterClick(item.letter_id)}
-            >
-              <LetterTitle>{item.title}</LetterTitle>
-              <LetterContent>{item.content}</LetterContent>
-              {!item.opened && <AlertBadge />}
-            </Letter>
-          ))
+          <LetterWrapper>
+            {petAlbumContent?.map((item, index) => (
+              <Letter
+                key={index}
+                onClick={() => handleLetterClick(item.letter_id)}
+              >
+                <LetterTitle>{item.title}</LetterTitle>
+                <LetterContent>{item.content}</LetterContent>
+                {!item.opened && <AlertBadge />}
+              </Letter>
+            ))}
+          </LetterWrapper>
         ) : (
           <NoLetter>
             <p>아직 도착한 편지가 없어요. 조금만 기다려주세요.</p>
@@ -71,7 +73,7 @@ const Container = styled.div`
   display: flex;
   flex-direction: column;
   align-items: start;
-  padding: 50px 110px;
+  padding: 50px 0;
   gap: 6px;
   width: 1200px;
   height: calc(-200px + 100vh);
@@ -83,6 +85,15 @@ const Title = styled.div`
   padding-bottom: 20px;
 `;
 
+const LetterWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  font-weight: 400;
+  height: 650px
+  overflow-y: auto;
+`;
+
 const Letter = styled.div`
   display: flex;
   flex-direction: column;

src/components/starModal.tsx

@@ -272,8 +272,8 @@ const StarPage: React.FC<StarPageModalProps> = ({ onClose, memoryId }) => {
           <PostImage
             src={starPage.img_url}
             alt="Post Image"
-            width={600}
-            height={600}
+            width={500}
+            height={500}
           />
           <Title>{starPage.name}</Title>
           <InfoContainer>
@@ -419,8 +419,8 @@ const ModalContent = styled.div`
   display: flex;
   position: relative;
   background: #101827;
-  width: 1200px;
-  height: 900px;
+  width: 1100px;
+  height: 800px;
   padding: 40px 30px;
   color: #fff;
   //   overflow: auto;
@@ -438,8 +438,6 @@ const Title = styled.h1`
 const AuthorName = styled.div`
   font-size: 1.2rem;
   font-weight: bold;
-  //   color: #a1cfff;
-  margin-bottom: 15px;
 `;
 
 const PostImage = styled(Image)`
@@ -472,7 +470,7 @@ const Content = styled.p`
   line-height: 1.6;
   margin: 20px 0;
   color: #c0c0c0;
-  height: 85px;
+  height: 112px;
   overflow-y: auto;
 `;
 
@@ -482,7 +480,7 @@ const CommentSection = styled.div`
   border-top: 1px solid rgba(255, 255, 255, 0.2);
   padding-top: 15px;
   position: relative;
-  height: 830px;
+  height: 708px;
 `;
 
 const CommentWrapper = styled.div`