[#27]Feat:대리구매 페이지 디자인

Sweet-red-beans · Mar 15, 2022 · b753728 · b753728
1 parent f8f0cc6
commit b753728
Show file tree

Hide file tree

Showing 32 changed files with 922 additions and 538 deletions.
diff --git a/frontend/sweet-red-beans/src/components/DMPage/DMDetail.js b/frontend/sweet-red-beans/src/components/DMPage/DMDetail.js
@@ -138,6 +138,7 @@ const DMDetail = ({selectedRoom}) => {
                 addMessage(newMessage);
             })
         });
+        setComplete(selectedRoom.is_complete)
     }, [selectedRoom])
 
     //신뢰도 +1 주는 버튼
@@ -280,15 +281,14 @@ const DMDetail = ({selectedRoom}) => {
 
     return (
         <>
-        <Modal open={modalOpen} close={closeModal} header="로그인">
-        <form>
-            신고사유를 적어주세요
+        <Modal open={modalOpen} close={closeModal} header="신고하기">
+        <form className={style.modal}>
+            <div>신고사유를 적어주세요</div>
             <div>
-            <textarea value={reportContent} onChange={reportContentChange} style={{width:"400px", height:"200px", cols:"20"}}></textarea>
-            <button onClick={reportClick}>신고하기</button>
+                <textarea value={reportContent} onChange={reportContentChange}></textarea>
             </div>
+            <button onClick={reportClick}>신고하기</button>
         </form>
-
         </Modal>
 
         <div className={style.chatcontainer}>
@@ -341,8 +341,8 @@ const DMDetail = ({selectedRoom}) => {
             , [contents, imgBase64, myNickname])}
 
 
-
             {complete ? <div className={style.complete}>거래가 완료되었습니다.</div> : null}
+
             <div className={style.writeArea}>
                 <label htmlFor="upload_file"></label>
                 <input type="file" onChange={handleChangeFile} id="upload_file" style={{display:"none"}}/>

diff --git a/frontend/sweet-red-beans/src/components/EventPage/EventPage.js b/frontend/sweet-red-beans/src/components/EventPage/EventPage.js
@@ -121,11 +121,12 @@ const EventPage = () => {
                     <button onClick={interestClick} className={sort==="관심도순"?style.selected:style.notSelected}>관심도순</button>
                 </div>
                 <div className={style.cinemafilter}>
-                    <select onChange={selectChange}>
+                    <select onChange={selectChange} value={selected}>
                         {selectList.map((item) => (
                             <option value={item} key={item}>{item}</option>
                         ))}
                     </select>
+                    <span className={style.filterArrow}></span>
                 </div>
 
 

diff --git a/frontend/sweet-red-beans/src/components/InformationShares/InformationSharePage.js b/frontend/sweet-red-beans/src/components/InformationShares/InformationSharePage.js
@@ -131,32 +131,49 @@ const InformationSharePage = () => {
         <>
         <div className={style.whiteBox}>
             <div className={style.filterArea}>
-                <select onChange={cinemaNameChange}>
-                    {cinemaNames.map((item) => (
-                        <option value={item} key={item}>{item}</option>
-                    ))}
-                </select>
+                <div className={style.filter}>
+                    <select onChange={cinemaNameChange} value={cinemaName}>
+                        {cinemaNames.map((item) => (
+                            <option value={item} key={item}>{item}</option>
+                        ))}
+                    </select>
+                    <span className={style.filterArrow}></span>
+                </div>
+
                 {
-                    cinemaNameSelected ? <select onChange={cinemaAreaChange}>
-                    {cinemaAreas.map((item) => (
-                        <option value={item} key={item}>{item}</option>
-                    ))}
-                </select> : null
+                    cinemaNameSelected ? 
+                    <div className={style.filter}>
+                        <select onChange={cinemaAreaChange} value={cinemaArea}>
+                        {cinemaAreas.map((item) => (
+                            <option value={item} key={item}>{item}</option>
+                        ))}
+                        </select> 
+                        <span className={style.filterArrow}></span>
+                    </div>
+                : null
                 }
 
                 {
-                    cinemaAreaSelected ? <select onChange={cinemaBranchChange}>
-                    {cinemaBranches.map((item) => (
-                        <option value={item} key={item}>{item}</option>
-                    ))}
-                </select> : null
+                    cinemaAreaSelected ? 
+                    <div className={style.filter}>
+                        <select onChange={cinemaBranchChange} value={cinemaBranch}>
+                        {cinemaBranches.map((item) => (
+                            <option value={item} key={item}>{item}</option>
+                        ))}
+                        </select>
+                        <span className={style.filterArrow}></span>
+                    </div>
+                : null
                 }
 
-                <select onChange={sortChange}>
-                    {sorts.map((item) => (
-                        <option value={item} key={item}>{item}</option>
-                    ))}
-                </select>
+                <div className={style.filter}>
+                    <select onChange={sortChange} value={sort}>
+                        {sorts.map((item) => (
+                            <option value={item} key={item}>{item}</option>
+                        ))}
+                    </select>
+                    <span className={style.filterArrow}></span>
+                </div>
 
                 <div className={style.search}>
                     <input type="text" placeholder="검색" onChange={searchChange} value={search} size="5"></input>

diff --git a/frontend/sweet-red-beans/src/components/InformationShares/InformationShareWritePage.js b/frontend/sweet-red-beans/src/components/InformationShares/InformationShareWritePage.js
@@ -221,25 +221,39 @@ const InformationShareWritePage = () => {
             <div className={style.titleArea}>
                 <input type="text" value={title} onChange={titleChange} placeholder="제목"/>
                 <div className={style.filterArea}>
-                    <select onChange={cinemaNameChange}>
-                    {cinemaNames.map((item) => (
-                        <option value={item} key={item}>{item}</option>
-                    ))}
-                    </select>
+                    <div className={style.filter}>
+                        <select onChange={cinemaNameChange} value={cinemaName}>
+                            {cinemaNames.map((item) => (
+                                <option value={item} key={item}>{item}</option>
+                            ))}
+                        </select>
+                        <span className={style.filterArrow}></span>
+                    </div>
+
                     {
-                        cinemaNameSelected ? <select onChange={cinemaAreaChange}>
-                        {cinemaAreas.map((item) => (
-                            <option value={item} key={item}>{item}</option>
-                        ))}
-                    </select> : null
+                        cinemaNameSelected ? 
+                        <div className={style.filter}>
+                            <select onChange={cinemaAreaChange} value={cinemaArea}>
+                            {cinemaAreas.map((item) => (
+                                <option value={item} key={item}>{item}</option>
+                            ))}
+                            </select> 
+                            <span className={style.filterArrow}></span>
+                        </div>
+                    : null
                     }
 
                     {
-                        cinemaAreaSelected ? <select onChange={cinemaBranchChange}>
-                        {cinemaBranches.map((item) => (
-                            <option value={item} key={item}>{item}</option>
-                        ))}
-                    </select> : null
+                        cinemaAreaSelected ? 
+                        <div className={style.filter}>
+                            <select onChange={cinemaBranchChange} value={cinemaBranch}>
+                            {cinemaBranches.map((item) => (
+                                <option value={item} key={item}>{item}</option>
+                            ))}
+                            </select>
+                            <span className={style.filterArrow}></span>
+                        </div>
+                    : null
                     }
                 </div>
             </div>

diff --git a/frontend/sweet-red-beans/src/components/MainPage/MainMovieEvents.js b/frontend/sweet-red-beans/src/components/MainPage/MainMovieEvents.js
@@ -30,6 +30,7 @@ const MainMovieEvents = ({cinemaName}) => {
     , []);
 
     useEffect(()=>{
+        console.log(events);
         events.map((item, index) => {
             if(item.cinema_name === cinemaName){
                 filterMovieList.push(item)
@@ -50,8 +51,8 @@ const MainMovieEvents = ({cinemaName}) => {
         arrows:true,
         infinite: true,
         speed: 500,
-        slidesToShow: 2,
-        slidesToScroll: 2,
+        slidesToShow: 3,
+        slidesToScroll: 3,
     };
     return (
         <>

diff --git a/frontend/sweet-red-beans/src/components/MainPage/MovieThumbnail.js b/frontend/sweet-red-beans/src/components/MainPage/MovieThumbnail.js
@@ -37,7 +37,7 @@ const MovieThumbnail = ({thisEvent}) => {
 
     return(
         <>
-        <div className={style.container}>
+        <div className={style.maincontainer}>
             <Link to = {`/event/${thisEvent.event_id}`} style={{ textDecoration: 'none' }}>
             <div className={style.thumbnailArea}>
                 <img src={thisEvent.thumbnail_url}/>

diff --git a/frontend/sweet-red-beans/src/components/Modals/Modal.js b/frontend/sweet-red-beans/src/components/Modals/Modal.js
@@ -1,25 +1,25 @@
 import React from 'react';
-import '../../css/modal.css';
+import style from '../../css/Modal/modal.module.css';
 
 const Modal = (props) => {
   // 열기, 닫기, 모달 헤더 텍스트를 부모로부터 받아옴
   const { open, close, header } = props;
 
   return (
     // 모달이 열릴때 openModal 클래스가 생성된다.
-    <div className={open ? 'openModal modal' : 'modal'}>
+    <div className={open ? `${style.openModal} ${style.modal}` : style.modal}>
       {open ? (
-        <section className='section'>
-            <div className='buttonArea'>
-              <button className="topClose" onClick={close}>
+        <section>
+            <div className={style.buttonArea}>
+              <button onClick={close}>
                 {' '}
                 &times;{' '}
               </button>
             </div>
-            <div className='header'>
+            <header>
               {header}
-            </div>
-          <div className='main'>{props.children}</div>
+            </header>
+          <main>{props.children}</main>
           <footer>
             {/* <button className="close" onClick={close}>
               close

diff --git a/frontend/sweet-red-beans/src/components/Modals/ReportModal.js b/frontend/sweet-red-beans/src/components/Modals/ReportModal.js
@@ -1,29 +1,25 @@
 import React from 'react';
-import '../../css/ReportModal.css';
+import style from '../../css/Modal/ReportModal.module.css';
 
 const ReportModal = (props) => {
   // 열기, 닫기, 모달 헤더 텍스트를 부모로부터 받아옴
   const { open, close, header } = props;
 
   return (
     // 모달이 열릴때 openModal 클래스가 생성된다.
-    <div className={open ? 'openModal modal' : 'modal'}>
+    <div className={open ? `${style.openModal} ${style.modal}` : style.modal}>
       {open ? (
         <section>
-          <header>
-            {header}
-            <button className="close" onClick={close}>
-              {' '}
-              &times;{' '}
-            </button>
-          </header>
+            <div className={style.buttonArea}>
+              <button onClick={close}>
+                {' '}
+                &times;{' '}
+              </button>
+            </div>
+            <header>
+              {header}
+            </header>
           <main>{props.children}</main>
-          <footer>
-            <button className="close" onClick={close}>
-              {' '}
-              close{' '}
-            </button>
-          </footer>
         </section>
       ) : null}
     </div>

diff --git a/frontend/sweet-red-beans/src/components/Modals/TransactionWriteModal.js b/frontend/sweet-red-beans/src/components/Modals/TransactionWriteModal.js
@@ -1,29 +1,25 @@
 import React from 'react';
-import '../../css/TransactionPage/TransactionWriteModal.css';
+import style from '../../css/Modal/TransactionWriteModal.module.css';
 
 const TransactionWriteModal = (props) => {
   // 열기, 닫기, 모달 헤더 텍스트를 부모로부터 받아옴
   const { open, close, header } = props;
 
   return (
     // 모달이 열릴때 openModal 클래스가 생성된다.
-    <div className={open ? 'openModal modal' : 'modal'}>
+    <div className={open ? `${style.openModal} ${style.modal}` : style.modal}>
       {open ? (
         <section>
-          <header>
-            {header}
-            <button className="close" onClick={close}>
-              {' '}
-              &times;{' '}
-            </button>
-          </header>
+            <div className={style.buttonArea}>
+              <button onClick={close}>
+                {' '}
+                &times;{' '}
+              </button>
+            </div>
+            <header>
+              {header}
+            </header>
           <main>{props.children}</main>
-          <footer>
-            <button className="close" onClick={close}>
-              {' '}
-              close{' '}
-            </button>
-          </footer>
         </section>
       ) : null}
     </div>

diff --git a/frontend/sweet-red-beans/src/components/MyPage/MyPageNormal.js b/frontend/sweet-red-beans/src/components/MyPage/MyPageNormal.js
@@ -296,7 +296,7 @@ const MyPageNomal = () => {
                     <input type="file" onChange={handleChangeFile} id="upload_file" style={{display:"none"}}/>
 
                     <div className={style.nicknameChangeArea} id="nicknameChangeArea">
-                        <input type="text" placeholder="닉네임" onChange={nicknameModifyChange} value={nicknameModify}/>
+                        <input type="text" placeholder="닉네임" onChange={nicknameModifyChange} value={nicknameModify} maxlength="15"/>
                         <div></div>
                     </div>