Merge branch '8-feat-promotion-page-outline' into develop

src/App.tsx

@@ -2,7 +2,9 @@ import { Outlet } from 'react-router-dom';
 
 function App() {
   return (
+
       <Outlet/>
+
   );
 }
 

src/container/container.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+
+type Props = {
+    children: React.ReactNode
+}
+
+const Container = (props: Props) => {
+  return (
+    <div className="flex w-screen justify-center bg-system-background">
+        {props.children}
+    </div>
+  )
+}
+
+export default Container

src/main/mainscreen.tsx

@@ -4,6 +4,7 @@ import InfoComponent from '../components/info/infocomponent';
 import Search from '../components/search/search';
 import KakaoModal from '../login/Modal';
 import {axiosAPI} from '../axios/index';
+import Container from '../container/container';
 type Props = {}
 
 const MainScreen = (props: Props) => {
@@ -16,11 +17,13 @@ const MainScreen = (props: Props) => {
     }, []);
 
     return (
-        <div className='flex flex-col min-h-screen w-full bg-system-background p-4'>
-            <KakaoModal/>
-            <Nav/>
-            <InfoComponent/>
-            <Search/>
+        <div className="flex justify-center w-screen h-full bg-system-background">
+            <div className='flex flex-col min-h-screen max-w-lg justify-center bg-system-background p-4'>
+                <KakaoModal/>
+                <Nav/>
+                <InfoComponent/>
+                <Search/>
+            </div>
         </div>
     )
 }

src/promotion/bottombutton.tsx

@@ -6,7 +6,7 @@ const backgroundStyle = {
     background: 'linear-gradient(180deg, rgba(0, 0, 0, 0) 53%, rgba(0, 0, 0, 0.7) 100%)',
 };
 
-
+  
 const BottomButton = (props: Props) => {
   return (
 

src/promotion/promotioninfo.tsx

@@ -2,33 +2,15 @@ import React from 'react'
 import sample_image_lg from './img/sample_image_lg.png'
 import location_icon_white from './img/location_icon_white.png'
 import calendar_icon_white from './img/calendar_icon_white.png'
+import { PromotionType } from './types';
 import ShowInfo from './showinfo'
 import TalkInfo from './talkinfo'
 type Props = {
   promotion_info : PromotionType
 }
 
-type SetListType = {
-  song_title : string,
-  song_artist : string,
-  song_like : boolean,
-  song_like_num : number
-}
-type PromotionType = {
-  img : string | undefined,
-  band_name : string,
-  title : string,
-  location : string,
-  date : string, 
-  price : string,
-  setlist : SetListType [],
-  promotion_info : string,
-  refund_info : string
-}
-
-
 const PromotionInfo = (props: Props) => {
-  const { img, band_name, title, location, date, price, setlist, promotion_info, refund_info } = props.promotion_info
+  const { img, band_name, title, location, date, price, setlist, promotion_info, refund_info, comment } = props.promotion_info
 
   const [isLeft, setIsLeft] = React.useState<boolean>(true);
 
@@ -75,7 +57,11 @@ const PromotionInfo = (props: Props) => {
           </div>
         </div>
           {
-              isLeft ? <ShowInfo setList={setlist}/> : <TalkInfo/>
+              isLeft ? <ShowInfo 
+                  setList={setlist}
+                  promotionInfo={promotion_info}
+                  refundInfo={refund_info}
+                  /> : <TalkInfo comment = {comment}/>
           }
     </div>
   )

src/promotion/promotionview.tsx

@@ -7,24 +7,8 @@ import PromotionInfo from './promotioninfo';
 import {axiosAPI} from '../axios/index';
 import BottomButton from './bottombutton';
 import {useParams} from 'react-router-dom';
+import { PromotionType, SetListType, CommentType } from './types';
 type Props = {}
-type SetListType = {
-    song_title : string,
-    song_artist : string,
-    song_like : boolean,
-    song_like_num : number
-}
-type PromotionType = {
-    img : string | undefined,
-    band_name : string,
-    title : string,
-    location : string,
-    date : string, 
-    price : string,
-    setlist : SetListType [],
-    promotion_info : string,
-    refund_info : string
-}
 
 const mockSetList: SetListType[] = [
     {
@@ -58,6 +42,21 @@ const mockSetList: SetListType[] = [
       song_like_num: 55,
     },
   ];
+const example_comment_content : CommentType[]= [
+  {
+    nickname: "John Doe",
+    comment_date: "2024.07.04",
+    comment_content: "This is the best concert I have ever been to!",
+    profile_img: undefined
+  },
+  {
+    nickname: "Jane Doe",
+    comment_date: "2024.07.04",
+    comment_content: "I can't wait to see them live!",
+    profile_img: undefined
+  }
+]
+
   const example_promotion_info: PromotionType[] = [{
     img: undefined,
     band_name: "The Rolling Stones",
@@ -68,6 +67,7 @@ const mockSetList: SetListType[] = [
     setlist: mockSetList,
     promotion_info: "Join us for an unforgettable night with The Rolling Stones. Experience the classics live!",
     refund_info: "Refunds are available up to 7 days before the event. No refunds will be given after this period.",
+    comment: example_comment_content,
   }];
 const PromotionView = (props: Props) => {
 

src/promotion/showinfo.tsx

@@ -1,17 +1,12 @@
 import React from 'react'
 import LikeButton from '../components/buttons/like_button'
 import MusicLikeButton from '../components/buttons/like_button_music'
-type SetListType = {
-    song_title : string,
-    song_artist : string,
-    song_like : boolean,
-    song_like_num : number
-  }
+import { SetListType } from './types/index';
 type Props = {
-    setList : SetListType []
+    setList : SetListType [],
+    promotionInfo : string,
+    refundInfo : string
 }
-
-
 const ShowInfo = (props: Props) => {
     const setlist = props?.setList
     return (
@@ -52,32 +47,13 @@ const ShowInfo = (props: Props) => {
                     공연정보
                 </div>
                 <div className='flex flex-col bg-white rounded-xl p-22px mt-10px -mx-4'>
-                    이렇게 달래 놓고는 황급히 불을 활활 피워
-                    발과 시냇물에 젖은 옷을 말리게 했습니다.
-
-                    누구나 이런 밤의 세계에 익숙하지 못한 사람
-                    은 좀 무서워질 것입니다만. 그런데, 지금 그 
-                    아가씨가 바로 내 눈앞에 와 있는 것입니다. 그러나 가엾은 아가씨는 불을 쬐려고도, 무엇을 
-
-                    먹어볼 생각도 하지 않았습니다. 그리고, 그 돌
-                    멩이 하나가 그대로 내 심장 위에 덜컥덜컥 떨
-                    어져 내리는 것 같았습니다. 병아리장은 남들
-                    보다 일찍 서둘러서 맨 먼저 떠나 윗길로 접어
-                    들었다 나요. 맑은 산 정기와, 소나기 뒤에 싸
-                    늘하게 씻긴 공기를 씌어 얼굴이 온통 발갛게 
-                    상기되어 있었습니다. 이때까지 밤하늘이 그
-                    렇게도 유난히 깊고, 별들이 그렇게도 찬란하
-                    게 보인 적은 없었습니다.
+                    {props.promotionInfo}
                 </div>
                 <div className='text-plg text-gray-2 pb-10px pt-5'>
                 환불정보
                 </div>
                 <div className='text-plg text-gray-2'>
-                이때까지 밤하늘이 그렇게도 유난히 깊고, 별들이
-                그렇게도 찬란하게 보인 적은 없었습니다. 병아리장은
-                남들보다 일찍 서둘러서 맨 먼저 떠나 윗길로 접어들
-                었다 나요. 우리 아가씨가 노새 등에 실린 버들고리
-                사이에 의젓이 올라타고 몸소 나타난 것입니다.
+                    {props.refundInfo}
                 </div>
             </div>
             <div className='h-100px'>

src/promotion/talkinfo.tsx

@@ -1,46 +1,88 @@
-import React,{useState} from 'react'
+import React,{useState ,useRef, useEffect} from 'react'
 import TextareaAutosize from 'react-textarea-autosize';
-
-type Props = {}
+import { CommentType } from './types';
+type Props = {
+  comment : CommentType[]
+}
 
 const TalkInfo = (props: Props) => {
   const [message, setMessage] = useState('');
   const charLimit = 200;
+  const ellipsisRef = useRef(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+  const [contentHeight, setContentHeight] = useState(0);
 
   const handleMessageChange = (event: any) => {
-    if (event.target.value.length <= charLimit) {
+
       setMessage(event.target.value);
-    }
+
   };
 
   const handleSubmit = () => {
     // handle submit logic
     alert('Message submitted: ' + message);
   };
+
+  useEffect(() => {
+    if (contentRef.current) {
+      setContentHeight(contentRef.current.clientHeight);
+    }
+  }, [props.comment]);
+
   return (
     <div className='w-full flex flex-col mt-5'>
       <div className='text-primary text-pxl font-semibold mb-3'>
-        응원 Talk N개
+        {`응원 Talk ${props.comment.length}개`}
+      </div>
+      <div className='w-full flex flex-col mb-34px'>
+        <TextareaAutosize
+            className="w-full bg-gray-4 text-gray-3 rounded-t-md p-3 placeholder-gray-3"
+            placeholder="공연을 응원하는 메시지를 남겨보세요!"
+            value={message}
+            onChange={handleMessageChange}
+            maxRows={4}
+          />
+          <div className='w-full flex flex-row justify-between bg-gray-4 px-10px py-6px rounded-b-md'>
+            <div className="text-xs text-gray-400">
+              {message.length}/{charLimit}
+            </div>
+            <div className='flex justify-center items-center'>
+              <button
+                className="bg-gray-3 text-xs h-22px px-10px rounded-5px text-gray-1 rounded-sm" onClick={handleSubmit}>
+                등록
+              </button>
+            </div>
+          </div>
       </div>
-      <TextareaAutosize
-          className="w-full bg-gray-700 text-gray-300 border border-gray-600 rounded-md p-3 placeholder-gray-500"
-          placeholder="공연을 응원하는 메시지를 남겨보세요!"
-          value={message}
-          onChange={handleMessageChange}
-          maxRows={4}
-        />
-      <div className="relative mb-3">
+
+      <div className="mb-3">
+        {props.comment.map((comment, index) => {
+          return( <div key={index} className="w-full flex flex-col items-start ">
+            <div className="flex flex-row">
+              <div>
+                 <div
+                    className="bg-white rounded-full mr-10px"
+                    style={{
+                      width: `${contentHeight-2.5}px`, // Dynamic width based on the content height
+                      height: `${contentHeight-2.5}px`, // Dynamic height
+                    }}
+                  />
+              </div>
+              <div className="flex flex-col items-start" ref={contentRef as React.RefObject<HTMLDivElement>}>
+                <div className="text-xs text-gray-1">{comment.nickname}</div>
+                <div className="text-xs text-gray-2">{comment.comment_date}</div>
+              </div>
+            </div>
+            <div className="text-xs mt-10px text-system-white">{comment.comment_content}</div>
+            {index < props.comment.length - 1 && (
+                                        <div className='w-full h-0.4px my-10px bg-gray-4'></div>
+            )}
+          </div>
+          )
+})}
 
-        {/* <div className="absolute bottom-3 left-3 text-xs text-gray-400">
-          {message.length}/{charLimit}
-        </div> */}
       </div>
-      <button
-        className="bg-gray-600 text-gray-300 py-2 px-4 rounded-md hover:bg-gray-500"
-        onClick={handleSubmit}
-      >
-        등록
-      </button>
+
       <div className='h-100px'>
                 {/* 모든 정보를 보여주기 위한 마진 */}
       </div>

src/promotion/types/index.tsx

@@ -0,0 +1,27 @@
+type SetListType = {
+    song_title : string,
+    song_artist : string,
+    song_like : boolean,
+    song_like_num : number
+  }
+
+type CommentType ={
+nickname : string,
+profile_img : string | undefined,
+comment_date : string,
+comment_content : string
+}
+type PromotionType = {
+    img : string | undefined,
+    band_name : string,
+    title : string,
+    location : string,
+    date : string, 
+    price : string,
+    setlist : SetListType [],
+    promotion_info : string,
+    refund_info : string,
+    comment : CommentType []
+}
+
+export type {SetListType, PromotionType, CommentType}

src/ticket/ticketmain.tsx

@@ -8,7 +8,7 @@ type Props = {}
 const Ticket = (props: Props) => {
   const token = useCheckAuth();
   return (
-    <div className='flex flex-col w-full h-screen'>
+    <div className='flex flex-col container max-w-screen-md h-screen'>
             <Nav/>
             <div className='flex flex-col w-full h-full p-10'>
               <div className='flex flex-row w-full justify-between'>