Merge pull request #1550 from 42organization/agenda

[test-deploy] 동적 라우팅, error page, 기타 css 수정사항 테스트
42organization · Sep 5, 2024 · 7e32062 · 7e32062
2 parents bab532f + f1aec59
commit 7e32062
Show file tree

Hide file tree

Showing 59 changed files with 630 additions and 274 deletions.
diff --git a/Layout/LayoutProvider.tsx b/Layout/LayoutProvider.tsx
@@ -4,6 +4,7 @@ import AdminAppLayout from 'Layout/AdminLayout';
 import AgendaAppLayout from 'Layout/AgendaLayout';
 import TakguAppLayout from 'Layout/TakguLayout';
 import { usePathname } from 'hooks/agenda/Layout/usePathname';
+import useAxiosAgendaError from 'hooks/useAxiosAgendaError';
 import useAxiosResponse from 'hooks/useAxiosResponse';
 
 type LayoutProviderProps = {
@@ -14,7 +15,8 @@ type LayoutProviderProps = {
 // 로그인 스테이트 등은 각 레이아웃에서 확인
 const LayoutProvider = ({ children }: LayoutProviderProps) => {
   useRecoilValue(loginState);
-  useAxiosResponse();
+  useAxiosResponse(); // takgu axios response interceptor
+  useAxiosAgendaError(); // agenda axios response interceptor
 
   const app = usePathname();
   switch (app) {

diff --git a/components/LoginChecker.tsx b/components/LoginChecker.tsx
@@ -8,7 +8,11 @@ interface LoginCheckerProps {
 
 export default function LoginChecker({ children }: LoginCheckerProps) {
   const [isLoading, loggedIn] = useLoginCheck();
-  // return <>{children}</>;
+  // dev 환경에서는 로그인 상태를 유지
+  // 만약 로그인 상태를 확인하고 싶다면, 아래 주석처리 필요
+  if (process.env.NODE_ENV === 'development') {
+    return <>{children}</>;
+  }
 
   return loggedIn ? (
     <>{children}</>

diff --git a/components/admin/agenda/announcements/AnnouncementTable.tsx b/components/admin/agenda/announcements/AnnouncementTable.tsx
@@ -59,7 +59,7 @@ export default function AnnouncementTable() {
   });
   const [currentPage, setCurrentPage] = useState<number>(1);
   const [selectedAgendaKey, setSelectedAgendaKey] = useState<string>('');
-  const agendaList = useFetchGet('admin/list').data || [];
+  const agendaList = useFetchGet({ url: 'admin/list' }).data || [];
 
   useEffect(() => {
     if (agendaKey) {

diff --git a/components/admin/agenda/teamList/TeamTable.tsx b/components/admin/agenda/teamList/TeamTable.tsx
@@ -68,7 +68,7 @@ export default function TeamTable() {
 
   const [currentPage, setCurrentPage] = useState<number>(1);
   const [selectedAgendaKey, setSelectedAgendaKey] = useState('');
-  const agendaList = useFetchGet(`admin/list`).data || [];
+  const agendaList = useFetchGet({ url: 'admin/list' }).data || [];
   const setSnackBar = useSetRecoilState(toastState);
 
   const buttonList: string[] = [styles.coin, styles.penalty];

diff --git a/components/agenda/Form/AdminTicketForm.tsx b/components/agenda/Form/AdminTicketForm.tsx
@@ -17,7 +17,7 @@ interface userFormProps {
 const AdminTicketForm = ({ stringKey, data, onProceed }: userFormProps) => {
   const { closeModal } = useModal();
   const sendRequest = useFetchRequest().sendRequest;
-  const agendaList = useFetchGet('admin/list').data || [];
+  const agendaList = useFetchGet({ url: 'admin/list' }).data || [];
 
   const [issuedFromKey, setIssuedFromKey] = useState(
     data.issuedFromKey ? data.issuedFromKey : ''

diff --git a/components/agenda/Form/TicketForm.tsx b/components/agenda/Form/TicketForm.tsx
@@ -12,7 +12,7 @@ interface userFormProps {
 const TicketForm = ({ stringKey }: userFormProps) => {
   const { closeModal } = useModal();
   const sendRequest = useFetchRequest().sendRequest;
-  const agendaList = useFetchGet('admin/list').data || [];
+  const agendaList = useFetchGet({ url: 'admin/list' }).data || [];
   const [selectedAgendaKey, setSelectedAgendaKey] = useState('');
 
   const handleSelectChange = (e: { target: { value: any } }) => {

diff --git a/components/agenda/Form/userForm.tsx b/components/agenda/Form/userForm.tsx
@@ -48,9 +48,9 @@ const UserForm = ({ stringKey }: userFormProps) => {
   const { closeModal } = useModal();
   const sendRequest = useFetchRequest().sendRequest;
 
-  const { data }: { data: dataType | null } = useFetchGet(
-    `profile/${stringKey}`
-  );
+  const { data }: { data: dataType | null } = useFetchGet({
+    url: `profile/${stringKey}`,
+  });
 
   if (!data) {
     return <div className={styles.modalContainer}>loading...</div>;

diff --git a/components/agenda/Home/AgendaInfo.tsx b/components/agenda/Home/AgendaInfo.tsx
@@ -45,7 +45,7 @@ const AgendaInfo = ({
           <div className={styles.agendaItemTimeWrapper}>
             <div className={styles.imageWrapper}>
               <Image
-                src={'/image/agenda/User.svg'}
+                src={'/image/agenda/user.svg'}
                 width={15}
                 height={15}
                 alt='count'

diff --git a/components/agenda/Home/MyAgendaBtn.tsx b/components/agenda/Home/MyAgendaBtn.tsx
@@ -30,7 +30,8 @@ const MyAgendaBtn = () => {
     }
   };
   const myList =
-    useFetchGet<MyTeamDataProps[]>('/profile/current/list')?.data || [];
+    useFetchGet<MyTeamDataProps[]>({ url: '/profile/current/list' })?.data ||
+    [];
   return (
     <div
       className={`${styles.myAgendaContainer} ${

diff --git a/components/agenda/Profile/AgendaUserSearchBar.tsx b/components/agenda/Profile/AgendaUserSearchBar.tsx
@@ -1,12 +1,67 @@
+import router from 'next/router';
 import { GoSearch } from 'react-icons/go';
+import { IoIosCloseCircle } from 'react-icons/io';
+import useSearchBar from 'hooks/useSearchBar';
 import styles from 'styles/agenda/Profile/AgendaUserSearchBar.module.scss';
 
 const AgendaUserSearchBar = () => {
+  const {
+    keyword,
+    setKeyword,
+    keywordHandler,
+    showDropDown,
+    setShowDropDown,
+    searchResult,
+    searchBarRef,
+    handleKeyDown,
+  } = useSearchBar();
+
+  const changeUser = (intraId: string) => {
+    setKeyword('');
+    setShowDropDown(false);
+    router.push(`/agenda/profile/user?id=${intraId}`);
+  };
+
   return (
-    <div className={styles.agendaUserSearchBar}>
-      <input type='text' placeholder='Search User' maxLength={12} />
-      <GoSearch className={styles.imageBox} />
-    </div>
+    <>
+      <div className={styles.warp} ref={searchBarRef}>
+        <div className={styles.agendaUserSearchBar}>
+          <input
+            type='text'
+            onChange={keywordHandler}
+            onKeyDown={handleKeyDown}
+            onFocus={() => setShowDropDown(true)}
+            placeholder='유저 검색하기'
+            maxLength={12}
+            value={keyword}
+          />
+          <div className={styles.icons}>
+            {keyword ? (
+              <span className={styles.reset} onClick={() => setKeyword('')}>
+                <IoIosCloseCircle />
+              </span>
+            ) : (
+              <span>
+                <GoSearch />
+              </span>
+            )}
+          </div>
+        </div>
+        {showDropDown && keyword && (
+          <div className={styles.dropdown}>
+            {searchResult.length ? (
+              searchResult.map((intraId: string) => (
+                <div onClick={() => changeUser(intraId)} key={intraId}>
+                  {intraId}
+                </div>
+              ))
+            ) : (
+              <div>검색 결과가 없습니다.</div>
+            )}
+          </div>
+        )}
+      </div>
+    </>
   );
 };
 

diff --git a/components/agenda/Profile/HistoryList.tsx b/components/agenda/Profile/HistoryList.tsx
@@ -41,80 +41,84 @@ const HistoryList = ({ historyListData, isHost }: HistoryListProps) => {
       <div className={styles.historyTitleText}>{historyTitle}</div>
       <div className={styles.historyItems}>
         {historyListData.length > 0 ? (
-          historyListData.map((historyData: HistoryItemProps) => {
-            const {
-              historyTeamMates,
-              totalPeople,
-              peopleCount,
-              startTime,
-              endTime,
-              timeString,
-            } = parsingHistoryData(historyData);
+          historyListData.map(
+            (historyData: HistoryItemProps, index: number) => {
+              const {
+                historyTeamMates,
+                totalPeople,
+                peopleCount,
+                startTime,
+                endTime,
+                timeString,
+              } = parsingHistoryData(historyData);
 
-            return (
-              <Link
-                href={`/agenda/${historyData.agendaKey}`}
-                className={styles.historyItem}
-                key={historyData.agendaId}
-              >
-                <div className={styles.agendaTitle}>
-                  {historyData.agendaTitle}
-                </div>
-
-                <div className={styles.tagWrapper}>
-                  {/* PROGRESS : tag mapping */}
-                  {historyData.isOfficial ? (
-                    <AgendaTag tagName='공식' />
-                  ) : (
-                    <AgendaTag tagName='비공식' />
-                  )}
-                  <AgendaTag tagName='팀' />
-                </div>
+              return (
+                <Link
+                  href={`/agenda/detail?agenda_key=${historyData.agendaKey}`}
+                  className={styles.historyItem}
+                  key={`${historyData.agendaId}-${index}`}
+                >
+                  <div className={styles.agendaTitle}>
+                    {historyData.agendaTitle}
+                  </div>
 
-                <div className={styles.timeWrapper}>
-                  <div className={styles.imageWrapper}>
-                    <TimeIcon />
+                  <div className={styles.tagWrapper}>
+                    {/* PROGRESS : tag mapping */}
+                    {historyData.isOfficial ? (
+                      <AgendaTag tagName='공식' />
+                    ) : (
+                      <AgendaTag tagName='비공식' />
+                    )}
+                    <AgendaTag tagName='팀' />
                   </div>
 
-                  <div className={styles.timeContent}>{timeString}</div>
-                </div>
+                  <div className={styles.timeWrapper}>
+                    <div className={styles.imageWrapper}>
+                      <TimeIcon />
+                    </div>
 
-                {/* Team 정보 UI / host 경우 ❌ */}
-                {historyTeamMates && historyTeamMates.length > 0 ? (
-                  <>
-                    <hr className={styles.divider} />
+                    <div className={styles.timeContent}>{timeString}</div>
+                  </div>
 
-                    <div className={styles.teamName}>
-                      {historyData.teamName}
-                    </div>
+                  {/* Team 정보 UI / host 경우 ❌ */}
+                  {historyTeamMates && historyTeamMates.length > 0 ? (
+                    <>
+                      <hr className={styles.divider} />
 
-                    <div className={styles.teamIntraIdWrapper}>
-                      <div className={styles.imageWrapper}>
-                        <TeamIcon />
+                      <div className={styles.teamName}>
+                        {historyData.teamName}
                       </div>
 
-                      {/* intra id mapping */}
-                      <div className={styles.intraIdWrapper}>
-                        {historyTeamMates.map((mate) => (
-                          <div key={`${historyData.agendaId}-${mate.intraId}`}>
-                            {mate.intraId}
-                          </div>
-                        ))}
+                      <div className={styles.teamIntraIdWrapper}>
+                        <div className={styles.imageWrapper}>
+                          <TeamIcon />
+                        </div>
+
+                        {/* intra id mapping */}
+                        <div className={styles.intraIdWrapper}>
+                          {historyTeamMates.map((mate, index) => (
+                            <div
+                              key={`${historyData.agendaId}-${mate.intraId}-${index}`}
+                            >
+                              {mate.intraId}
+                            </div>
+                          ))}
+                        </div>
                       </div>
-                    </div>
 
-                    {/* coalition color mapping */}
-                    <div className={styles.coalitionWrapper}>
-                      <ColorList
-                        peopleCount={peopleCount}
-                        totalPeople={totalPeople}
-                      />
-                    </div>
-                  </>
-                ) : null}
-              </Link>
-            );
-          })
+                      {/* coalition color mapping */}
+                      <div className={styles.coalitionWrapper}>
+                        <ColorList
+                          peopleCount={peopleCount}
+                          totalPeople={totalPeople}
+                        />
+                      </div>
+                    </>
+                  ) : null}
+                </Link>
+              );
+            }
+          )
         ) : (
           <div className={styles.historyEmpty}>아젠다 기록이 없습니다.</div>
         )}