[#159] Header 관련 로직 추가 (#160)

* feat: Route에 따른 header 조건 지정 * fix: 바텀네비게이션 announce -> notice로 수정 * refactor: style 코드들 정렬 * feat: 더보기 클릭 라우팅 추가 * feat: 코드 스타일 업데이트 * feat: 스크롤 코드 삭제 * feat: bottom nav bar true로 설정 * feat: 상위 3개만 출력하도록 변경 * feat: 로그인에서 utility header 추가 * refactor: 불필요한 코드 삭제 * refactor: PR시 빌드 확인 코드 삭제 * feat: main에서 api 콜 수정 * refactor: header 설정 추가 * fix: storybook 업데이트
DaITssu · Jan 4, 2024 · 7be564c · 7be564c
1 parent 06fc5ce
commit 7be564c
Show file tree

Hide file tree

Showing 18 changed files with 236 additions and 179 deletions.
diff --git a/.github/workflows/pull_request_action.yml b/.github/workflows/pull_request_action.yml
diff --git a/src/components/Home/NoticeFunSystem/NoticeFunSystem.styles.tsx b/src/components/Home/NoticeFunSystem/NoticeFunSystem.styles.tsx
@@ -1,71 +1,70 @@
 import styled from '@emotion/styled';
 import { TEXT_STYLES } from '@/styles/constants/textStyles';
 export const SummaryBox = styled.div`
-  width : 100%;
-  heigth : 264px;
-  padding : 16px 24px;
-  background: #FFFFFF;
+  width: 100%;
+  height: 264px;
+  padding: 16px 24px;
+  background: #ffffff;
 `;
 export const TopBox = styled.div`
-  display : flex; 
+  display: flex;
   justify-content: space-between;
 `;
 
 export const Title = styled.div`
   ${TEXT_STYLES.HeadM20};
-  left : 0px;
- 
+  left: 0px;
 `;
 export const MoreButton = styled.div`
   ${TEXT_STYLES.CapR14};
-  color : #6E6E6E;
-  margin-top : 4px;
-  display : flex;
-  align-items : center;
+  color: #6e6e6e;
+  margin-top: 4px;
+  display: flex;
+  align-items: center;
 `;
 
 export const TextBox = styled.div`
   box-sizing: border-box;
   position: relative;
   width: 100%;
-  height : 170px;
-  margin-top : 16px;
-  background: #FFFFFF;
-  border: 1px solid #D9D9D9;
+  height: 170px;
+  margin-top: 16px;
+  background: #ffffff;
+  border: 1px solid #d9d9d9;
   box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.05);
   border-radius: 15px;
 `;
 
-export const Line = styled.div<{top : string}>`
-  width : 100%;
-  height : 1px;
-  top : ${(props)=> props.top};
-  position : absolute;
-  background-color : #D9D9D9;
+export const Line = styled.div<{ top: string }>`
+  width: 100%;
+  height: 1px;
+  top: ${(props) => props.top};
+  position: absolute;
+  background-color: #d9d9d9;
 `;
 
-export const TextLine = styled.div<{top : string}>`
-  display : flex; 
-  width : 100%;
-  position : absolute;
+export const TextLine = styled.div<{ top: string }>`
+  display: flex;
+  width: 100%;
+  position: absolute;
   // margin : 0px 12px;
-  top : ${(props)=> props.top};
-  box-sizing : border-box;
+  top: ${(props) => props.top};
+  box-sizing: border-box;
 `;
 
 export const TextSummary = styled.div`
   ${TEXT_STYLES.BodyM16};
-  white-space : nowrap;
-  overflow : hidden;
-  display : auto;
-  text-overflow : ellipsis;
-  padding-right : 50px;
+  white-space: nowrap;
+  overflow: hidden;
+  display: auto;
+  text-overflow: ellipsis;
+  padding-right: 50px;
   padding-left: 12px;
 `;
 
 export const Date = styled.div`
   ${TEXT_STYLES.CapR14};
-  color : #6E6E6E;
-  position : absolute;
-  right : 12px;
-`;
+  color: #6e6e6e;
+  position: absolute;
+  right: 12px;
+`;
diff --git a/src/components/Home/NoticeFunSystem/NoticeFunSystem.tsx b/src/components/Home/NoticeFunSystem/NoticeFunSystem.tsx
@@ -2,6 +2,7 @@ import { useState } from 'react';
 import * as styles from './NoticeFunSystem.styles';
 import RightArrow from '@icons/icon/Arrow/RightSmallArrow.svg';
 import Image from 'next/image';
+import { useRouter } from 'next/router';
 
 export interface SummaryText {
   id: number;
@@ -17,11 +18,21 @@ export interface NoticeFunSystemProps {
 }
 
 const NoticeFunSystem = (props: NoticeFunSystemProps) => {
+  const router = useRouter();
+
+  function handleOnClickMore() {
+    if (props.title === '공지사항') {
+      router.push('/notice');
+    } else {
+      router.push('/funsystem');
+    }
+  }
+
   return (
     <styles.SummaryBox>
       <styles.TopBox>
         <styles.Title>{props.title}</styles.Title>
-        <styles.MoreButton>
+        <styles.MoreButton onClick={handleOnClickMore}>
           더보기
           <Image src={RightArrow} alt="right arrow" />
         </styles.MoreButton>

diff --git a/src/components/Home/NoticeFunSystemTab/LineSearchBar/LineSearchBar.styles.ts b/src/components/Home/NoticeFunSystemTab/LineSearchBar/LineSearchBar.styles.ts
@@ -1,15 +1,15 @@
 import styled from '@emotion/styled';
 import Image from 'next/image';
 import { TEXT_STYLES } from '@/styles/constants/textStyles';
-import {COLORS} from '@/styles/constants/colors';
+import { COLORS } from '@/styles/constants/colors';
 
 export const SearchBarBox = styled.div`
-  width : 100%;
-  height :56px;
-  padding-left : 16px;
-  padding-right : 16px;
-  padding-bottom : 8px; 
-  box-sizing : border-box;
+  width: 100%;
+  height: 56px;
+  padding-left: 16px;
+  padding-right: 16px;
+  padding-bottom: 8px;
+  box-sizing: border-box;
   background: ${COLORS.grayscale.white};
 `;
 
@@ -26,17 +26,19 @@ export const Input = styled.input`
   border: none;
   outline: none;
   ${TEXT_STYLES.BodyM16};
+  background-color: white;
+  color: ${COLORS.grayscale.Black};
 `;
 
 export const GlassImage = styled(Image)`
   margin-right: 10px;
 `;
 export const Circle = styled.div`
   margin-right: 15px;
-  width : 18px;
-  height : 18px;
-  border-radius : 50%;
-  background-color : ${COLORS.grayscale.Gray3};
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background-color: ${COLORS.grayscale.Gray3};
 `;
 export const CancelImage = styled(Image)`
   filter: brightness(0) invert(1);

diff --git a/src/components/Home/NoticeFunSystemTab/LineSearchBar/LineSearchBar.tsx b/src/components/Home/NoticeFunSystemTab/LineSearchBar/LineSearchBar.tsx
@@ -3,7 +3,11 @@ import * as styles from './LineSearchBar.styles';
 import searchicon from '@icons/icon/Search/BlueSearch.svg';
 import cancelicon from '@icons/icon/SubscribeList/Cancel.svg';
 
-const LineSearchBar = ({onSearch}:{onSearch : (searchText:string)=>void}) => {
+const LineSearchBar = ({
+  onSearch,
+}: {
+  onSearch: (searchText: string) => void;
+}) => {
   const [searchText, setSearchText] = useState('');
 
   const handleOnKeyPress = (e: KeyboardEvent<HTMLInputElement>) => {
@@ -15,7 +19,7 @@ const LineSearchBar = ({onSearch}:{onSearch : (searchText:string)=>void}) => {
   const handleClearSearch = () => {
     setSearchText('');
   };
-  const handleSearch = () =>{
+  const handleSearch = () => {
     onSearch(searchText);
   };
 
@@ -30,18 +34,23 @@ const LineSearchBar = ({onSearch}:{onSearch : (searchText:string)=>void}) => {
           onChange={(e) => setSearchText(e.target.value)}
         />
         <styles.Circle onClick={handleClearSearch}>
-          <styles.CancelImage src={cancelicon} width={18} height={18} alt={''} />
+          <styles.CancelImage
+            src={cancelicon}
+            width={18}
+            height={18}
+            alt={''}
+          />
         </styles.Circle>
-        
-        <styles.GlassImage 
+
+        <styles.GlassImage
           src={searchicon}
-          width={24} 
-          height={24} 
-          alt={''} 
-          onClick={handleSearch}/>
+          width={24}
+          height={24}
+          alt={''}
+          onClick={handleSearch}
+        />
       </styles.SearchBarStyles>
     </styles.SearchBarBox>
-
   );
 };
 

diff --git a/src/components/Home/NoticeFunSystemTab/NoticeFunSystemTab.tsx b/src/components/Home/NoticeFunSystemTab/NoticeFunSystemTab.tsx
@@ -5,50 +5,53 @@ import LineSearchBar from './LineSearchBar/LineSearchBar';
 import CommunityList from '@/components/community/list/CommunityList';
 import FunSystemList from '@/components/notice/FunSystemList';
 
-
 const NoticeFunSystemTab = () => {
-
-
   const [index, setIndex] = useState(0);
-  const [search, setSearch] = useState("");
+  const [search, setSearch] = useState('');
 
-  useEffect(()=>{
+  useEffect(() => {
     window.location.reload;
   }, [index, search]);
 
-  const handleSearch = (searchText : string) =>{
+  const handleSearch = (searchText: string) => {
     setSearch(searchText);
-  }
+  };
 
   const selectMenuHandler = (n: number) => {
     setIndex(n);
   };
 
   return (
     <>
-      <LineSearchBar onSearch = {handleSearch}/>
-      {search && <styles.TabContainer>
-        <styles.TabBox>
-          {["공지사항", "펀시스템","커뮤니티"].map((element, idx) => (
-            <styles.TabFontBox
-              key={idx}
-              isSelected={idx === index}
-              onClick={() => selectMenuHandler(idx)}>
-              {element}
-            </styles.TabFontBox>
-          ))}
-        </styles.TabBox>
-        {index === 0 ? (
-          <NoticeList key={search} search = {search} category = "ALL"/>
-        ) : index === 1 ?(
-          <FunSystemList key={search} search = {search} category = "ALL"/>
-        ) : (
-          <CommunityList key={search} isButtonVisible = {false} search = {search}/>
-        )}
-      </styles.TabContainer>}
-
+      <LineSearchBar onSearch={handleSearch} />
+      {search && (
+        <styles.TabContainer>
+          <styles.TabBox>
+            {['공지사항', '펀시스템', '커뮤니티'].map((element, idx) => (
+              <styles.TabFontBox
+                key={idx}
+                isSelected={idx === index}
+                onClick={() => selectMenuHandler(idx)}
+              >
+                {element}
+              </styles.TabFontBox>
+            ))}
+          </styles.TabBox>
+          {index === 0 ? (
+            <NoticeList key={search} search={search} category="ALL" />
+          ) : index === 1 ? (
+            <FunSystemList key={search} search={search} category="ALL" />
+          ) : (
+            <CommunityList
+              key={search}
+              isButtonVisible={false}
+              search={search}
+            />
+          )}
+        </styles.TabContainer>
+      )}
     </>
   );
 };
 
-export default NoticeFunSystemTab;
+export default NoticeFunSystemTab;
diff --git a/src/components/Home/PopularPosts/PopularPosts.stories.tsx b/src/components/Home/PopularPosts/PopularPosts.stories.tsx
@@ -17,18 +17,18 @@ export const PopularPostsExample: Story = {
         id: 1,
         title: '제목',
         content: '내용',
-        type: 'info',
+        topic: 'info',
         commentCount: 3,
-        createdAt: '2021-10-10 10:10:10',
+        updatedAt: '2021-10-10 10:10:10',
       },
       {
         id: 2,
         title: '제목',
         content:
           '내용나더라너라더라더ㅏㄹ날냗런댜ㅓㄹ자ㅡ라즈ㅏ냐나더라ㅣ너ㅣㅏ러니ㅏ더리ㅏㄷ너ㅣㅏ럳니ㅏㅓ릳너ㅣㅏ러ㅏ디너리ㅏㄴ더ㅏㅣ러ㅏㅣㄴ더ㅣㅏ러니다러ㅏ니ㅓㅏ더러쟈러다란르ㅏㄴㄷ르ㅏㅡ',
-        type: 'info',
+        topic: 'info',
         commentCount: 5,
-        createdAt: '2021-10-10 20:10:10',
+        updatedAt: '2021-10-10 20:10:10',
       },
     ],
   },

diff --git a/src/components/Home/PopularPosts/PopularPosts.styles.ts b/src/components/Home/PopularPosts/PopularPosts.styles.ts
@@ -7,7 +7,7 @@ export const Container = styled.div`
   display: flex;
   background-color: ${COLORS.grayscale.Gray5};
   flex-direction: column;
-  padding: 20px;
+  padding: 16px 24px;
 `;
 
 export const RowSpacer = styled.div`