Merge pull request #193 from sparcs-kaist/feature/showBoard

feature: Zabo 추가 / 수정 페이지에서 Zabo Board 게시 여부 선택
sparcs-kaist · May 5, 2024 · d22a0e4 · d22a0e4
2 parents add1117 + 52ef44f
commit d22a0e4
Show file tree

Hide file tree

Showing 10 changed files with 63 additions and 5 deletions.
diff --git a/src/components/organisms/ZaboCard/ZaboCardM.js b/src/components/organisms/ZaboCard/ZaboCardM.js
@@ -17,6 +17,7 @@ const Poster = ({ zabo }) => {
     owner,
     createdAt,
     schedules,
+    showBoard,
     views,
     likesCount,
     isLiked,
@@ -72,6 +73,7 @@ const Writing = ({ zabo }) => {
     owner,
     createdAt,
     schedules,
+    showBoard,
     views,
     likesCount,
     isLiked,

diff --git a/src/components/pages/ZaboPage/ZaboDetailPage.js b/src/components/pages/ZaboPage/ZaboDetailPage.js
@@ -111,6 +111,7 @@ const ZaboDetailPage = (props) => {
     title,
     owner = {},
     schedules,
+    showBoard,
     createdAt,
     description,
     category = [],

diff --git a/src/components/pages/ZaboPage/ZaboEditPage.js b/src/components/pages/ZaboPage/ZaboEditPage.js
@@ -61,10 +61,11 @@ const ZaboEditPage = ({ zaboId, zabo }) => {
     title: zabo.title,
     description: zabo.description,
     schedules: prevSchedules,
+    showBoard: zabo.showBoard,
     category: newCat,
     hasSchedule: prevHasSchedule,
   });
-  const { title, description, schedules, hasSchedule } = state;
+  const { title, description, schedules, hasSchedule, showBoard } = state;
 
   useEffect(() => {
     if (!submit) return;
@@ -96,7 +97,8 @@ const ZaboEditPage = ({ zaboId, zabo }) => {
     if (
       zabo.title !== title ||
       zabo.description !== description ||
-      !isEqual(prevSchedules, schedules)
+      !isEqual(prevSchedules, schedules) ||
+      zabo.showBoard !== showBoard
     ) {
       setChanged(true);
     } else {

diff --git a/src/components/templates/ZaboUpload/InfoForm.js b/src/components/templates/ZaboUpload/InfoForm.js
@@ -14,6 +14,7 @@ import { setInfo } from "store/reducers/upload";
 import { gridLayoutCompareFunction } from "lib/utils";
 
 import { InfoFormWrapper } from "./InfoForm.styled";
+import I18nextBrowserLanguageDetector from "i18next-browser-languagedetector";
 
 const scheduleTypeOptions = [
   { value: "행사", label: "행사" },
@@ -29,7 +30,7 @@ const scheduleTypeOptionsH = scheduleTypeOptions.reduce(
 );
 
 const Form = ({ state, setState, preview }) => {
-  const { title, description, hasSchedule, schedules, category } = state;
+  const { title, description, hasSchedule, schedules, showBoard, category } = state;
   const schedule = schedules[0];
   const { title: scheduleTitle, startAt, eventType } = schedule;
 
@@ -84,6 +85,13 @@ const Form = ({ state, setState, preview }) => {
     },
     [setState],
   );
+  const handleBoardToggle = useCallback(
+    (e) => {
+      const { checked } = e.target;
+      setState({ showBoard: checked });
+    },
+    [setState],
+  );
 
   return (
     <InfoFormWrapper>
@@ -136,6 +144,7 @@ const Form = ({ state, setState, preview }) => {
                 <ToggleButton onChange={handleToggle} checked={hasSchedule} />
               </div>
             </div>
+
             <div className="body">
               <div className="body-container">
                 <div className="schedule-title">
@@ -200,6 +209,16 @@ const Form = ({ state, setState, preview }) => {
               </div>
             </div>
           </InfoFormWrapper.Info.Schedule>
+
+          <InfoFormWrapper.Info.Board className="zabo-boardcheck" showBoard={showBoard}>
+            <div className="head">
+              <p>ZABO BOARD 게시를 희망하시나요?</p>
+              <div className="toggle-btn">
+                <ToggleButton onChange={handleBoardToggle} checked={showBoard} />
+              </div>
+            </div>
+          </InfoFormWrapper.Info.Board>
+
           <section className="zabo-keywords">
             <div className="label label-tag">태그</div>
             <div className="tags">
@@ -233,6 +252,7 @@ Form.propTypes = {
         eventType: PropTypes.string,
       }),
     ),
+    showBoard: PropTypes.bool,
     category: PropTypes.arrayOf(
       PropTypes.shape({
         name: PropTypes.string,

diff --git a/src/components/templates/ZaboUpload/InfoForm.styled.js b/src/components/templates/ZaboUpload/InfoForm.styled.js
@@ -243,6 +243,33 @@ InfoFormWrapper.Info = styled.section`
   }
 `;
 
+InfoFormWrapper.Info.Board = styled.section`
+  width: 99%;
+  height: 100%;
+  transition: max-height 0.3s ease-in-out;
+  padding: 0 29px;
+  margin: 0 0 28px 0;
+  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3);
+  border-left: 5px solid #143441;
+  border-radius: 2px;
+  .head {
+    height: 72px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    p {
+      color: #363636;
+      font-size: 16px;
+      font-weight: bold;
+      margin: 0;
+    }
+    .toggle-btn {
+      flex: 1;
+      text-align: right;
+    }
+  }
+`;
+
 InfoFormWrapper.Info.Schedule = styled.section`
   width: 99%;
   height: 100%;
@@ -259,7 +286,7 @@ InfoFormWrapper.Info.Schedule = styled.section`
         `};
   transition: max-height 0.3s ease-in-out;
   padding: 0 29px;
-  margin: 30px 0 48px;
+  margin: 30px 0 18px;
   box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3);
   border-left: 5px solid #143441;
   border-radius: 2px;

diff --git a/src/components/templates/ZaboUpload/UploadProcess.js b/src/components/templates/ZaboUpload/UploadProcess.js
@@ -33,7 +33,7 @@ const UploadProcess = ({ children }) => {
   const dispatch = useDispatch();
   const history = useHistory();
   const info = useSelector((state) => get(state, ["upload", "info"]));
-  const { title, description, hasSchedule, schedules, category } = info;
+  const { title, description, hasSchedule, schedules, showBoard, category } = info;
   const imageFiles = useSelector((state) => get(state, ["upload", "images"]));
   const [progress, setProgress] = useState(0);
   const [error, setError] = useState(null);
@@ -55,6 +55,7 @@ const UploadProcess = ({ children }) => {
     formData.append("title", title);
     formData.append("description", description);
     if (hasSchedule) formData.append("schedules", JSON.stringify(schedules));
+    formData.append("showBoard", showBoard);
     const uCats = category
       .filter((c) => c.clicked)
       .map((t) => t.name)

diff --git a/src/lib/interface/schemas/zabo.ts b/src/lib/interface/schemas/zabo.ts
@@ -24,6 +24,7 @@ export interface Zabo extends MongoSchema {
     endAt?: string;
     eventType?: "행사" | "신청";
   }[];
+  showBoard: boolean;
 
   pins?: Board[] | string[];
   likes?: ZaboLike[];

diff --git a/src/lib/propTypes.js b/src/lib/propTypes.js
@@ -29,6 +29,7 @@ export const ZaboType = PropTypes.shape({
       type: PropTypes.string,
     }),
   ),
+  showBoard: PropTypes.bool,
   isLiked: PropTypes.bool,
   isPinned: PropTypes.bool,
   isMyZabo: PropTypes.bool,

diff --git a/src/store/reducers/upload.ts b/src/store/reducers/upload.ts
@@ -49,6 +49,7 @@ export interface IUploadState {
     description: string;
     hasSchedule: boolean;
     schedules: ISchedule[];
+    showBoard: boolean;
     category: { name: string; clicked: boolean }[];
   };
   showModal: boolean;
@@ -72,6 +73,7 @@ const initialState: IUploadState = {
     description: "",
     hasSchedule: false,
     schedules: [defaultSchedule],
+    showBoard: false,
     category: ZABO_CATEGORIES.map((tag) => ({ name: tag, clicked: false })),
   },
   showModal: false,

diff --git a/src/types/index.d.ts b/src/types/index.d.ts
@@ -37,6 +37,7 @@ export interface IZabo {
       type: string;
     },
   ];
+  showBoard: boolean;
   isLiked: boolean;
   isPinned: boolean;
   isMyZabo: boolean;