Merge pull request #1459 from 42organization/Feat/#1458-css-style-unify

[Feat] css 스타일 통일 #1458 모두 스타일 잡은 부분 확인했습니다. 앞으로도 까먹지 말고 common.scss 참고하기 ~
42organization · Jul 26, 2024 · 6503af9 · 6503af9
2 parents 8b7a92e + a3cb7de
commit 6503af9
Show file tree

Hide file tree

Showing 64 changed files with 348 additions and 329 deletions.
diff --git a/components/Layout.tsx b/components/Layout.tsx
@@ -155,7 +155,8 @@ function AppLayoutDev({ children }: AppLayoutProps) {
   }
 }
 
-let AppLayout;
+let AppLayout: React.FC<AppLayoutProps>;
+
 if (process.env.NODE_ENV === 'development') {
   console.log('DEV MODE::: AppLayoutDev');
   AppLayout = AppLayoutDev;

diff --git a/components/agenda/Form/AgendaResultForm.tsx b/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

diff --git a/components/agenda/Form/CreateAgendaForm.tsx b/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}>

diff --git a/components/agenda/Input/DescriptionInput.tsx b/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}

diff --git a/components/agenda/Input/SelectInput.tsx b/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>

diff --git a/components/agenda/Input/TimeInput.tsx b/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'
-    // />
   );
 };
 

diff --git a/components/agenda/agendaDetail/AgendaInfo.tsx b/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,
@@ -13,7 +13,7 @@ import { UploadBtn } from 'components/agenda/button/UploadBtn';
 import styles from 'styles/agenda/agendaDetail/AgendaInfo.module.scss';
 
 // 목데이터 생성
-const mockData = {
+const mockData: AgendaDataProps = {
   agendaTitle: '아 기다리고기다리던대회',
   agendaContents:
     '이 대회는 언제부터 시작되어 어쩌구저쩌구 뭐를 겨루려고 했는데 비밀이에요',
@@ -32,6 +32,7 @@ const mockData = {
   createdAt: new Date('2024-07-01'),
   announcementTitle: '대회 공지사항',
   isOfficial: true,
+  agendaisRanking: false,
 };
 
 // 개인상세조회
@@ -77,7 +78,7 @@ const getIsHost = (
   return profileData.userIntra === agendaData.agendaHost;
 };
 
-const getIsParticipant = (teamList) => {
+const getIsParticipant = (teamList: number) => {
   return teamList === 200;
 };
 
@@ -110,8 +111,8 @@ export default function AgendaInfo() {
 
   const router = useRouter();
   const { agendaKey } = router.query;
-  const [agendaData, setAgendaData] = useState(null);
-  const [teamListStatus, setTeamListStatus] = useState(null);
+  const [agendaData, setAgendaData] = useState<AgendaDataProps | null>(null);
+  const [teamListStatus, setTeamListStatus] = useState<number>(200);
 
   useEffect(() => {
     // axios.get(`/api/agenda?agenda_id=${agendaKey}`)

diff --git a/components/agenda/agendaDetail/AgendaTab.tsx b/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} />
+    </>
+  );
+}
diff --git a/components/agenda/agendaDetail/AgendaTap.tsx b/components/agenda/agendaDetail/AgendaTap.tsx
diff --git a/...onents/agenda/agendaDetail/TapContent.tsx → ...onents/agenda/agendaDetail/TabContent.tsx b/...onents/agenda/agendaDetail/TapContent.tsx → ...onents/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 = () => {

diff --git a/...agendaDetail/taps/AgendaAnnouncements.tsx → ...agendaDetail/tabs/AgendaAnnouncements.tsx b/...agendaDetail/taps/AgendaAnnouncements.tsx → ...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 = [
   {

diff --git a/...da/agendaDetail/taps/AgendaConditions.tsx → ...da/agendaDetail/tabs/AgendaConditions.tsx b/...da/agendaDetail/taps/AgendaConditions.tsx → ...da/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: '아 기다리고기다리던대회',
@@ -26,7 +26,7 @@ const mockData: AgendaDataProps = {
 };
 
 export default function AgendaConditions() {
-  const [agendaData, setAgendaData] = useState(null);
+  const [agendaData, setAgendaData] = useState<AgendaDataProps | null>(null);
 
   useEffect(() => {
     setAgendaData(mockData);

diff --git a/...a/agendaDetail/taps/AgendaDescription.tsx → ...a/agendaDetail/tabs/AgendaDescription.tsx b/...a/agendaDetail/taps/AgendaDescription.tsx → ...a/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: '아 기다리고기다리던대회',
@@ -29,7 +29,7 @@ const mockData: AgendaDataProps = {
 export default function AgendaDescription() {
   // axios로 받아온 데이터
   // agenda?agenda_id=${agendaKey}
-  const [agendaData, setAgendaData] = useState(null);
+  const [agendaData, setAgendaData] = useState<AgendaDataProps | null>(null);
 
   useEffect(() => {
     // axios.get(`/api/agenda?agenda_id=${agendaKey}`)