{"version":3,"file":"static/js/716.afc81d13.chunk.js","mappings":"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","sources":["pages/Notice/Notice.tsx","utils/logPageView.ts"],"sourcesContent":["import { useState, useEffect, useCallback } from 'react';\nimport { useNavigate } from 'react-router-dom';\nimport { useNotice, useQueryString } from 'hooks';\nimport { Header, EmptyBox } from 'components';\nimport styled from 'styled-components';\nimport * as colors from 'styles/colors';\nimport { formatDateToString } from 'utils/date';\nimport { logPageView } from 'utils/logPageView';\nimport { Tabs, Tab } from 'bun-ui-kit';\nimport { Loader } from '@bgzt/ui';\n\nexport const Notice = () => {\n  const { notice, categories, noticeLoading, categoriesLoading, handleNotice, selectedNoticeCategory } = useNotice();\n  const query = useQueryString();\n  const navigate = useNavigate();\n  const [loading, setLoading] = useState(false);\n  const [categoryId, setCategoryId] = useState();\n  const [value, setValue] = useState('0');\n\n  const handleChange = (newValue: string) => {\n    setValue(newValue);\n    navigate(`/notice?tab=${newValue}`, { replace: true });\n  };\n\n  const handleCategory = useCallback(\n    (id) => {\n      setCategoryId(id);\n      selectedNoticeCategory(id);\n    },\n    [setCategoryId, selectedNoticeCategory],\n  );\n\n  const moveToDetail = useCallback(\n    (id) => {\n      navigate(`/notice/${id}`);\n    },\n    [navigate],\n  );\n\n  useEffect(() => {\n    handleNotice();\n  }, [handleNotice]);\n\n  useEffect(() => {\n    setLoading(true);\n    logPageView();\n    return () => setLoading(false);\n  }, []);\n\n  useEffect(() => {\n    if (query && typeof query !== 'string' && query.tab && categories?.length) {\n      // 해당 query의 탭에 포커스\n      if (Number(query.tab) < categories.length) {\n        setValue(query.tab);\n        selectedNoticeCategory(categories[Number(query.tab)].id);\n      } else {\n        setValue('0');\n        navigate(`/notice`, { replace: true });\n      }\n    }\n  }, [query, categories, navigate, selectedNoticeCategory]);\n\n  return (\n    <NoticeWrapper>\n      {loading && <Header title={'공지사항'} />}\n      <MainWrapper>\n        {noticeLoading ? (\n          <LoaderWrapper>\n            <Loader />\n          </LoaderWrapper>\n        ) : (\n          <>\n            <PageTitle>공지사항</PageTitle>\n\n            {categoriesLoading ? (\n              <NoticeCategoryButtonEmpty>\n                {[1, 2, 3].map((id) => (\n                  <span key={id}>\n                    <div></div>\n                  </span>\n                ))}\n              </NoticeCategoryButtonEmpty>\n            ) : (\n              <Tabs\n                selectedTab={value}\n                onSelect={handleChange}\n                style={{\n                  margin: '30px 20px 0px 20px',\n                  padding: '8px 0',\n                  fontFamily: 'SFProText, SFProDisplay, Arial',\n                  borderTop: '1px solid #f6f6f6',\n                  borderBottom: '1px solid #f6f6f6',\n                  width: 'calc(100% - 40px)',\n                }}>\n                {categories?.map((category) => (\n                  <Tab\n                    label={category.categoryName}\n                    onClick={() => handleCategory(category.id)}\n                    key={category.id}\n                    style={{\n                      fontFamily: 'SFProText, SFProDisplay, Arial',\n                      paddingLeft: '0px',\n                      textAlign: 'center',\n                      display: 'flex',\n                      justifyContent: 'center',\n                      color: categoryId === category.id ? ` ${colors.BGZT_Green_500}` : `${colors.BGZT_Gray_300}`,\n                    }}\n                  />\n                ))}\n              </Tabs>\n            )}\n\n            {notice && notice.length > 0 ? (\n              <NoticeListWrapper>\n                {notice.map((notice) => (\n                  <NoticeList key={notice.id} onClick={() => moveToDetail(notice.id)}>\n                    <NoticeTitle>{notice.title}</NoticeTitle>\n                    <NoticeDate>{formatDateToString(notice.createdAt)}</NoticeDate>\n                  </NoticeList>\n                ))}\n              </NoticeListWrapper>\n            ) : (\n              <EmptyBox message={'공지사항이 없어요.'} />\n            )}\n          </>\n        )}\n      </MainWrapper>\n    </NoticeWrapper>\n  );\n};\n\nconst NoticeWrapper = styled.div`\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  align-content: center;\n`;\n\nconst MainWrapper = styled.div`\n  padding-top: 50px;\n  width: 100%;\n  max-width: 640px;\n`;\n\nconst LoaderWrapper = styled.div`\n  position: absolute;\n  top: 40%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n`;\n\nconst PageTitle = styled.div`\n  font-size: 1.75rem;\n  color: #181818;\n  font-weight: bold;\n  margin: 30px 20px 0 20px;\n`;\n\nconst NoticeCategoryButtonEmpty = styled.div`\n  display: flex;\n  flex-wrap: wrap;\n  padding: 12px 0;\n  a,\n  span {\n    text-decoration: none;\n    width: 33%;\n    padding: 12px 0;\n    display: flex;\n    justify-content: center;\n    div {\n      background-color: ${colors.BGZT_Gray_50};\n      box-sizing: border-box;\n      height: 17px;\n      width: 80%;\n    }\n  }\n`;\n\nconst NoticeListWrapper = styled.div`\n  min-height: 400px;\n  padding: 30px 20px;\n  box-sizing: border-box;\n`;\n\nconst NoticeList = styled.div`\n  padding: 20px 0;\n  display: flex;\n  flex-direction: column;\n  border-bottom: 1px solid ${colors.BGZT_Gray_50};\n  &:last-child {\n    border-bottom: none;\n  }\n  &:nth-child(1) {\n    border-bottom: 1px solid ${colors.BGZT_Gray_50};\n  }\n  box-sizing: border-box;\n  cursor: pointer;\n`;\n\nconst NoticeTitle = styled.div`\n  font-weight: 500;\n  font-stretch: normal;\n  font-style: normal;\n  line-height: 1.4;\n  letter-spacing: normal;\n  color: ${colors.HEADER_FONT_COLOR};\n  padding-right: 30px;\n  word-break: keep-all;\n`;\n\nconst NoticeDate = styled.div`\n  margin: 10px 0 0;\n  font-size: 0.75rem;\n  font-weight: 500;\n  font-stretch: normal;\n  font-style: normal;\n  line-height: 1;\n  letter-spacing: normal;\n  color: rgba(102, 102, 102, 0.5);\n`;\n","import ReactGa from 'react-ga';\n\nexport const logPageView = () => {\n  const { pathname, search } = window.location;\n  const page = pathname + search;\n  if (process.env.REACT_APP_ENV === 'production') {\n    ReactGa.set({ page });\n    ReactGa.pageview(page);\n  }\n};\n"],"names":["Notice","useNotice","notice","categories","noticeLoading","categoriesLoading","handleNotice","selectedNoticeCategory","query","useQueryString","navigate","useNavigate","useState","loading","setLoading","categoryId","setCategoryId","value","setValue","handleCategory","useCallback","id","moveToDetail","useEffect","logPageView","tab","length","Number","replace","NoticeWrapper","title","MainWrapper","LoaderWrapper","PageTitle","NoticeCategoryButtonEmpty","map","Tabs","selectedTab","onSelect","newValue","style","margin","padding","fontFamily","borderTop","borderBottom","width","category","Tab","label","categoryName","onClick","paddingLeft","textAlign","display","justifyContent","color","colors","NoticeListWrapper","NoticeList","NoticeTitle","NoticeDate","formatDateToString","createdAt","message","styled","div","window","location","page","pathname","search","ReactGa"],"sourceRoot":""}