[Feat] css 스타일 통일 #1458

components/agenda/Form/AgendaResultForm.tsx

@@ -8,7 +8,7 @@ interface AgendaResultFormProps {
 }
 
 const AgendaResultForm = ({ teamlist }: AgendaResultFormProps) => {
-  const [awardlist, setAwardList] = useState<
+  const [awardList, setAwardList] = useState<
     {
       award: string;
       teams: string[];
@@ -19,28 +19,33 @@ const AgendaResultForm = ({ teamlist }: AgendaResultFormProps) => {
     { award: '참가상', teams: [] },
   ]);
   const newAwardInputRef = useRef<HTMLInputElement>(null);
+  const defaultTeam = '팀을 선택해주세요';
 
-  // const addEventHandler = (e: MouseEvent<HTMLLabelElement>) => {
-  //   e.preventDefault();
-  //   alert(newAwardInputRef.current?.value);
-  //   const input: string | undefined = newAwardInputRef.current?.value;
-  //   newAwardInputRef.current ? (newAwardInputRef.current.value = '') : null;
-  //   input ? awardlist.push(input) : null;
-  //   awardlist && input ? setAwardList(awardlist) : null;
-  // };
-
-  const addTeam = (idx: number, newTeam: string) => {
-    const newAwardList = awardlist;
-    newAwardList[idx].teams.push(newTeam);
-    setAwardList(newAwardList);
+  const addTeam = (
+    idx: number,
+    e: React.ChangeEvent<HTMLSelectElement>,
+    selected: boolean
+  ) => {
+    if (!selected) return;
+    const newTeam = e.target.value;
+    console.log('addTeam called', idx, newTeam);
+    awardList[idx].teams.push(newTeam);
+    e.target.value = defaultTeam;
+    setAwardList([...awardList]);
+  };
+  console.log(awardList);
+  const removeTeam = (idx: number, teamidx: number) => {
+    console.log('removeTeam called', idx, teamidx);
+    awardList[idx].teams.splice(teamidx, 1);
+    setAwardList([...awardList]);
   };
 
   return (
     <div className={styles.container}>
       <h1 className={styles.title}>결과 입력</h1>
       <h2 className={styles.description}>팀별 결과를 입력해주세요</h2>
       <ul className={styles.awardUl}>
-        {awardlist?.map((data, idx) => (
+        {awardList?.map((data, idx) => (
           <li key={idx} className={styles.awardLi}>
             <DragBtn onClick={(e) => alert('DEV::dragbutton called' + e)} />
             <div className={styles.awardContainer}>
@@ -60,14 +65,18 @@ const AgendaResultForm = ({ teamlist }: AgendaResultFormProps) => {
                     options={teamlist}
                     name={`selected-team${idx}-${teamidx}`}
                     message='팀을 선택해주세요'
+                    onChange={(e, selected) => {
+                      if (!selected) removeTeam(idx, teamidx);
+                    }}
                   />
                 ))}
                 <SelectInput
                   options={teamlist}
                   name={`unselected-team${idx}`}
                   message='팀을 선택해주세요'
-                  onChange={(e) => {
-                    addTeam(idx, e.target.value);
+                  selected=''
+                  onChange={(e, selected) => {
+                    addTeam(idx, e, selected);
                   }}
                 />
               </div>
@@ -103,8 +112,8 @@ const AgendaResultForm = ({ teamlist }: AgendaResultFormProps) => {
       </ul>
       {/* <button
         onClick={() => {
-          awardlist.push('test');
-          setAwardList(awardlist);
+          awardList.push('test');
+          setAwardList(awardList);
         }}
       >
         test

components/agenda/Form/CreateAgendaForm.tsx

@@ -137,7 +137,7 @@ const CreateAgendaForm = ({ handleSubmit }: CreateAgendaFormProps) => {
       <div className={styles.topContainer}>
         <div className={styles.label_container}>
           <h3 className={styles.label}>모집마감까지 </h3>
-          <h3 className={`${styles.label} + ${styles.highlight}`}>
+          <h3 className={`${styles.label} ${styles.highlight}`}>
             {parseDate(new Date(recruitEnd.getTime() - today.getTime()))}
           </h3>
         </div>
@@ -153,7 +153,7 @@ const CreateAgendaForm = ({ handleSubmit }: CreateAgendaFormProps) => {
         <div className={styles.label_container}>
           <h3 className={styles.label}>등록 가능 팀 수</h3>
           <p
-            className={`${styles.label} + ${styles.highlight}`}
+            className={`${styles.label} ${styles.highlight}`}
           >{`${teamLimit[0]}팀 ~ ${teamLimit[1]}팀`}</p>
         </div>
         <div className={styles.sliderContainer}>

components/agenda/Input/DescriptionInput.tsx

@@ -18,10 +18,10 @@ const DescriptionInput = ({
       <label htmlFor={name} className={styles.label}>
         {label}
       </label>
-      <input
+      <textarea
         {...rest}
         name={name}
-        type='description'
+        // type='description'
         id={name}
         className={styles.description_input}
         placeholder={placeholder}

components/agenda/Input/SelectInput.tsx

@@ -1,3 +1,4 @@
+import { useRef, useState } from 'react';
 import styles from 'styles/agenda/Input/SelectInput.module.scss';
 
 interface SelectInputProps {
@@ -6,7 +7,10 @@ interface SelectInputProps {
   options: string[];
   message?: string;
   selected?: string;
-  onChange?: (e: React.ChangeEvent<HTMLSelectElement>) => void;
+  onChange?: (
+    e: React.ChangeEvent<HTMLSelectElement>,
+    selected: boolean
+  ) => void;
 }
 
 const SelectInput = ({
@@ -18,30 +22,56 @@ const SelectInput = ({
   onChange,
   ...rest
 }: SelectInputProps) => {
-  const isSelected = selected ? '' : styles.unselected;
+  const [isSelected, setIsSelected] = useState<string>(
+    selected && selected != message ? styles.selected : styles.unselected
+  );
+  const selectedValueRef = useRef<string>(selected ? selected : '');
+
+  message = message ? message : '선택해주세요';
+  selected = selected ? selected : message;
+
+  function changeState(e: React.ChangeEvent<HTMLSelectElement>) {
+    if (e.target.value === selectedValueRef.current) {
+      // 이전 값과 같을 경우
+      return isSelected === styles.selected ? true : false;
+    }
+    selectedValueRef.current = e.target.value;
+    if (selectedValueRef.current === message) {
+      // 선택값이 선택하지 않은 값일 경우
+      setIsSelected(styles.unselected);
+      return false;
+    } else {
+      setIsSelected(styles.selected);
+      return true;
+    }
+  }
+
   return (
     <div className={styles.container}>
       <label htmlFor={name} className={styles.label}>
         {label}
       </label>
       <select
         className={`${styles.select} ${isSelected}`}
-        onChange={onChange}
+        onChange={(e) => {
+          const selected = changeState(e);
+          if (onChange) onChange(e, selected);
+        }}
         name={name}
         {...rest}
       >
         <option
           key={0}
-          selected={selected ? false : true}
+          selected={selected === message ? true : false}
           className={styles.option}
         >
-          {message ? message : '선택해주세요'}
+          {message}
         </option>
         {options.map((item: string, idx: number) => (
           <option
             key={idx}
             className={styles.option}
-            selected={selected ? true : false}
+            selected={selected === item ? true : false}
           >
             {item}
           </option>

components/agenda/Input/TimeInput.tsx

@@ -1,4 +1,3 @@
-import { useEffect } from 'react';
 import Input from './Input';
 
 interface DateInputProps {
@@ -44,12 +43,6 @@ const DateInput = ({
     defaultValue = parseDate(new Date());
   }
 
-  // useEffect(() => {
-  //   const dateControl = document.getElementById(name) as HTMLInputElement;
-  //   if (dateControl?.defaultValue && defaultValue)
-  //     dateControl.defaultValue = defaultValue;
-  //   console.log(defaultValue);
-  // });
   return (
     <Input
       name={name}
@@ -58,11 +51,6 @@ const DateInput = ({
       defaultValue={defaultValue}
       {...rest}
     />
-    // <input
-    //   id='party'
-    //   name='partydate'
-    //   // defaultValue='2017-06-01T08:30'
-    // />
   );
 };
 

components/agenda/agendaDetail/AgendaInfo.tsx

@@ -1,7 +1,7 @@
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
 import { AgendaDataProps } from 'types/agenda/agendaDetail/agendaDataTypes';
-import { ParticipantSummaryProps } from 'types/agenda/agendaDetail/taps/agendaInfoTypes';
+import { ParticipantSummaryProps } from 'types/agenda/agendaDetail/tabs/agendaInfoTypes';
 import { ProfileDataProps } from 'types/agenda/profile/profileDataTypes';
 import {
   AgendaLocation,

components/agenda/agendaDetail/AgendaTab.tsx

@@ -0,0 +1,15 @@
+import { useState } from 'react';
+import { TABS, TabValues } from 'constants/agenda/agendaDetail/agendaTabs';
+import TabContent from 'components/agenda/agendaDetail/TabContent';
+import TabButtons from 'components/agenda/button/TabButtons';
+
+export default function AgendaTab() {
+  const [activeTab, setActiveTab] = useState<TabValues>(TABS.DESCRIPTION);
+
+  return (
+    <>
+      <TabButtons tabs={TABS} activeTab={activeTab} onTabClick={setActiveTab} />
+      <TabContent activeTab={activeTab} tabs={TABS} />
+    </>
+  );
+}

components/agenda/agendaDetail/TapContent.tsx → components/agenda/agendaDetail/TabContent.tsx

@@ -1,9 +1,9 @@
-import { TabContentProps } from 'types/agenda/button/tapButtonTypes';
-import AgendaAnnouncements from 'components/agenda/agendaDetail/taps/AgendaAnnouncements';
-import AgendaConditions from 'components/agenda/agendaDetail/taps/AgendaConditions';
-import AgendaDescription from 'components/agenda/agendaDetail/taps/AgendaDescription';
-import AgendaParticipants from 'components/agenda/agendaDetail/taps/AgendaParticipants';
-import styles from 'styles/agenda/agendaDetail/AgendaTap.module.scss';
+import { TabContentProps } from 'types/agenda/button/tabButtonTypes';
+import AgendaAnnouncements from 'components/agenda/agendaDetail/tabs/AgendaAnnouncements';
+import AgendaConditions from 'components/agenda/agendaDetail/tabs/AgendaConditions';
+import AgendaDescription from 'components/agenda/agendaDetail/tabs/AgendaDescription';
+import AgendaParticipants from 'components/agenda/agendaDetail/tabs/AgendaParticipants';
+import styles from 'styles/agenda/agendaDetail/AgendaTab.module.scss';
 
 export default function TabContent({ activeTab, tabs }: TabContentProps) {
   const renderContent = () => {

components/agenda/agendaDetail/taps/AgendaAnnouncements.tsx → components/agenda/agendaDetail/tabs/AgendaAnnouncements.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { AnnouncementProps } from 'types/agenda/agendaDetail/announcementTypes';
-import AnnouncementItem from 'components/agenda/agendaDetail/taps/AnnouncementItem';
-import styles from 'styles/agenda/agendaDetail/taps/AgendaAnnouncements.module.scss';
+import AnnouncementItem from 'components/agenda/agendaDetail/tabs/AnnouncementItem';
+import styles from 'styles/agenda/agendaDetail/tabs/AgendaAnnouncements.module.scss';
 
 const mockData = [
   {

components/agenda/agendaDetail/taps/AgendaConditions.tsx → components/agenda/agendaDetail/tabs/AgendaConditions.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { AgendaDataProps } from 'types/agenda/agendaDetail/agendaDataTypes';
 import { AgendaStatus } from 'constants/agenda/agenda';
-import styles from 'styles/agenda/agendaDetail/taps/AgendaConditions.module.scss';
+import styles from 'styles/agenda/agendaDetail/tabs/AgendaConditions.module.scss';
 
 const mockData: AgendaDataProps = {
   agendaTitle: '아 기다리고기다리던대회',

components/agenda/agendaDetail/taps/AgendaDescription.tsx → components/agenda/agendaDetail/tabs/AgendaDescription.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import { AgendaDataProps } from 'types/agenda/agendaDetail/agendaDataTypes';
 import { AgendaStatus } from 'constants/agenda/agenda';
 import { formatDate } from 'components/agenda/utils/formatDate';
-import styles from 'styles/agenda/agendaDetail/taps/AgendaDescription.module.scss';
+import styles from 'styles/agenda/agendaDetail/tabs/AgendaDescription.module.scss';
 
 const mockData: AgendaDataProps = {
   agendaTitle: '아 기다리고기다리던대회',

components/agenda/agendaDetail/taps/AgendaParticipants.tsx → components/agenda/agendaDetail/tabs/AgendaParticipants.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { AgendaStatus } from 'constants/agenda/agenda';
-import ParticipantsList from 'components/agenda/agendaDetail/taps/ParticipantsList';
-import styles from 'styles/agenda/agendaDetail/taps/AgendaParticipants.module.scss';
+import ParticipantsList from 'components/agenda/agendaDetail/tabs/ParticipantsList';
+import styles from 'styles/agenda/agendaDetail/tabs/AgendaParticipants.module.scss';
 import ParticipantTeamList from './ParticipantTeamList';
 
 const mockData = {

components/agenda/agendaDetail/taps/AnnouncementItem.tsx → components/agenda/agendaDetail/tabs/AnnouncementItem.tsx

@@ -3,7 +3,7 @@ import { AnnouncementProps } from 'types/agenda/agendaDetail/announcementTypes';
 import { formatDate } from 'components/agenda/utils/formatDate';
 import DownArrow from 'public/image/agenda/ChevronDown.svg';
 import RightArrow from 'public/image/agenda/ChevronRight.svg';
-import styles from 'styles/agenda/agendaDetail/taps/AnnouncementItem.module.scss';
+import styles from 'styles/agenda/agendaDetail/tabs/AnnouncementItem.module.scss';
 
 export default function AnnouncementItem({
   title,

components/agenda/agendaDetail/taps/Participant.tsx → components/agenda/agendaDetail/tabs/Participant.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { colorMapping, iconMapping } from 'types/agenda/utils/colorList';
 import { Coalition } from 'constants/agenda/agenda';
-import styles from 'styles/agenda/agendaDetail/taps/Participant.module.scss';
+import styles from 'styles/agenda/agendaDetail/tabs/Participant.module.scss';
 
 interface ParticipantProps {
   name: string;

components/agenda/agendaDetail/taps/ParticipantTeam.tsx → components/agenda/agendaDetail/tabs/ParticipantTeam.tsx

@@ -3,11 +3,11 @@ import { useRouter } from 'next/router';
 import {
   ParticipantTeamProps,
   PeopleCount,
-} from 'types/agenda/agendaDetail/taps/participantTeamTypes';
+} from 'types/agenda/agendaDetail/tabs/participantTeamTypes';
 import { Coalition } from 'constants/agenda/agenda';
 import ColorList from 'components/agenda/utils/ColorList';
 import TeamLeaderIcon from 'public/image/agenda/rock-and-roll-hand.svg';
-import styles from 'styles/agenda/agendaDetail/taps/ParticipantTeam.module.scss';
+import styles from 'styles/agenda/agendaDetail/tabs/ParticipantTeam.module.scss';
 
 const peopleCount: PeopleCount = {
   [Coalition.GUN]: 2,

components/agenda/agendaDetail/taps/ParticipantTeamList.tsx → components/agenda/agendaDetail/tabs/ParticipantTeamList.tsx

@@ -2,8 +2,8 @@ import React, { useEffect, useState } from 'react';
 import { AgendaDataProps } from 'types/agenda/agendaDetail/agendaDataTypes';
 import { teamDataProps } from 'types/agenda/team/teamDataTypes';
 import { AgendaStatus } from 'constants/agenda/agenda';
-import ParticipantTeam from 'components/agenda/agendaDetail/taps/ParticipantTeam';
-import styles from 'styles/agenda/agendaDetail/taps/ParticipantTeamList.module.scss';
+import ParticipantTeam from 'components/agenda/agendaDetail/tabs/ParticipantTeam';
+import styles from 'styles/agenda/agendaDetail/tabs/ParticipantTeamList.module.scss';
 
 const agendaMockData: AgendaDataProps = {
   agendaTitle: '아 기다리고기다리던대회',

components/agenda/agendaDetail/taps/ParticipantsList.tsx → components/agenda/agendaDetail/tabs/ParticipantsList.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Coalition } from 'constants/agenda/agenda';
-import Participant from 'components/agenda/agendaDetail/taps/Participant';
-import styles from 'styles/agenda/agendaDetail/taps/ParticipantsList.module.scss';
+import Participant from 'components/agenda/agendaDetail/tabs/Participant';
+import styles from 'styles/agenda/agendaDetail/tabs/ParticipantsList.module.scss';
 
 export default function ParticipantsList() {
   const curPeople = 1;

components/agenda/button/TabButton.tsx

@@ -0,0 +1,13 @@
+import { TabButtonProps } from 'types/agenda/button/tabButtonTypes';
+import styles from 'styles/agenda/button/TabButton.module.scss';
+
+export default function TabButton({ text, isActive, onClick }: TabButtonProps) {
+  return (
+    <button
+      className={`${styles.TabButton} ${isActive ? styles.isActive : ''}`}
+      onClick={onClick}
+    >
+      {text}
+    </button>
+  );
+}