diff --git a/.github/workflows/pull_request_action.yml b/.github/workflows/pull_request_action.yml deleted file mode 100644 index 7633424a..00000000 --- a/.github/workflows/pull_request_action.yml +++ /dev/null @@ -1,23 +0,0 @@ -name: Build on PR - -on: - pull_request: - branches: [main] - -jobs: - build: - runs-on: ubuntu-latest - - steps: - - uses: actions/checkout@v2 - - - name: Use Node.js - uses: actions/setup-node@v1 - with: - node-version: '16' - - - name: Install dependencies - run: yarn install - - - name: Build - run: yarn build diff --git a/src/components/Home/NoticeFunSystem/NoticeFunSystem.styles.tsx b/src/components/Home/NoticeFunSystem/NoticeFunSystem.styles.tsx index 1210b506..be6a2ea8 100644 --- 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; -`; \ No newline at end of file + color: #6e6e6e; + position: absolute; + right: 12px; +`; diff --git a/src/components/Home/NoticeFunSystem/NoticeFunSystem.tsx b/src/components/Home/NoticeFunSystem/NoticeFunSystem.tsx index 3a5f7b9a..15f23479 100644 --- 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 ( {props.title} - + 더보기 right arrow diff --git a/src/components/Home/NoticeFunSystemTab/LineSearchBar/LineSearchBar.styles.ts b/src/components/Home/NoticeFunSystemTab/LineSearchBar/LineSearchBar.styles.ts index ca49de15..3a6a37cb 100644 --- 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,6 +26,8 @@ export const Input = styled.input` border: none; outline: none; ${TEXT_STYLES.BodyM16}; + background-color: white; + color: ${COLORS.grayscale.Black}; `; export const GlassImage = styled(Image)` @@ -33,10 +35,10 @@ export const GlassImage = styled(Image)` `; 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 index 4475054d..46ac8f00 100644 --- 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) => { @@ -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)} /> - + - - + width={24} + height={24} + alt={''} + onClick={handleSearch} + /> - ); }; diff --git a/src/components/Home/NoticeFunSystemTab/NoticeFunSystemTab.tsx b/src/components/Home/NoticeFunSystemTab/NoticeFunSystemTab.tsx index 2c71d100..8147e0af 100644 --- a/src/components/Home/NoticeFunSystemTab/NoticeFunSystemTab.tsx +++ b/src/components/Home/NoticeFunSystemTab/NoticeFunSystemTab.tsx @@ -5,20 +5,17 @@ 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); @@ -26,29 +23,35 @@ const NoticeFunSystemTab = () => { return ( <> - - {search && - - {["공지사항", "펀시스템","커뮤니티"].map((element, idx) => ( - selectMenuHandler(idx)}> - {element} - - ))} - - {index === 0 ? ( - - ) : index === 1 ?( - - ) : ( - - )} - } - + + {search && ( + + + {['공지사항', '펀시스템', '커뮤니티'].map((element, idx) => ( + selectMenuHandler(idx)} + > + {element} + + ))} + + {index === 0 ? ( + + ) : index === 1 ? ( + + ) : ( + + )} + + )} ); }; -export default NoticeFunSystemTab; \ No newline at end of file +export default NoticeFunSystemTab; diff --git a/src/components/Home/PopularPosts/PopularPosts.stories.tsx b/src/components/Home/PopularPosts/PopularPosts.stories.tsx index 557fb9c7..228aae01 100644 --- 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 index 1c86c395..6bbb2093 100644 --- 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` diff --git a/src/components/Home/PopularPosts/PopularPosts.tsx b/src/components/Home/PopularPosts/PopularPosts.tsx index e7078bb2..ff40b177 100644 --- a/src/components/Home/PopularPosts/PopularPosts.tsx +++ b/src/components/Home/PopularPosts/PopularPosts.tsx @@ -9,17 +9,21 @@ export interface PostDetailProps { id: number; title: string; content: string; - type: 'info' | 'question' | 'free'; + topic: string; commentCount: number; - createdAt: string; + updatedAt: string; } const PopularPosts = ({ posts }: { posts: PostDetailProps[] }) => { + const router = useRouter(); + const handleOnClickMore = () => { + router.push('/community'); + }; return ( 인기 게시글 - + 더보기{' '} { id={post.id} title={post.title} content={post.content} - type={post.type} + topic={post.topic} commentCount={post.commentCount} - createdAt={post.createdAt} + updatedAt={post.updatedAt} key={post.id} /> ))} @@ -50,21 +54,12 @@ const PostDetail = ({ id, title, content, - type, + topic, commentCount, - createdAt, + updatedAt, }: PostDetailProps) => { const router = useRouter(); - let typeTrans = ''; - if (type === 'info') { - typeTrans = '정보'; - } else if (type === 'question') { - typeTrans = '질문'; - } else { - typeTrans = '자유'; - } - function onClick() { //TODO 실제 게시글로 이동 router.push(`/post/${id}`); @@ -74,10 +69,10 @@ const PostDetail = ({ - {typeTrans} + {topic} {title} - {beforeTime(createdAt)} + {beforeTime(updatedAt)} {content} diff --git a/src/components/common/Header/Header.tsx b/src/components/common/Header/Header.tsx index a62e4bbe..8cf36787 100644 --- a/src/components/common/Header/Header.tsx +++ b/src/components/common/Header/Header.tsx @@ -2,29 +2,63 @@ import * as styles from './Header.style'; import SearchIcon from '@icons/icon/header/search.svg'; import AlarmIcon from '@icons/icon/header/alarm.svg'; import Image from 'next/image'; -import { useState } from 'react'; -import LineSearchBar from '@/components/Home/NoticeFunSystemTab/LineSearchBar/LineSearchBar'; +import { useEffect, useState } from 'react'; import NoticeFunSystemTab from '@/components/Home/NoticeFunSystemTab/NoticeFunSystemTab'; +import { useRouter } from 'next/router'; + const Header = () => { + const router = useRouter(); + const [isHeaderVisible, setIsHeaderVisible] = useState(true); const [isSearchVisible, setIsSearchVisible] = useState(false); - const handleSearchIconClick=()=>{ - setIsSearchVisible((prev)=> !prev); - } + + const handleSearchIconClick = () => { + setIsSearchVisible((prev) => !prev); + }; + + const handleLogoClick = () => { + router.push('/'); + }; + + const handleAlarmIconClick = () => { + router.push('/alarm'); + }; + + useEffect(() => { + const path = router.pathname; + if (['/login', '/landing'].includes(path)) { + setIsHeaderVisible(false); + } else { + setIsHeaderVisible(true); + } + }, [router.pathname]); return ( <> - - DAITSSU - - search - alarm - - - {isSearchVisible && } + {isHeaderVisible && ( + <> + + DAITSSU + + search + {/* 알림 기능 완성까지 보류 */} + {/* alarm */} + + + {isSearchVisible && } + + )} ); }; diff --git a/src/components/common/Navbar/Navigation.ts b/src/components/common/Navbar/Navigation.ts index 4226e211..2207484d 100644 --- a/src/components/common/Navbar/Navigation.ts +++ b/src/components/common/Navbar/Navigation.ts @@ -8,7 +8,7 @@ export const NAV_LIST = { export const NAV_URL_LIST = { [NAV_LIST.HOME]: '/', - [NAV_LIST.ANNOUNCEMENT]: '/announcement', + [NAV_LIST.ANNOUNCEMENT]: '/notice', [NAV_LIST.COMMUNITY]: '/community', [NAV_LIST.CALENDAR]: '/calendar', [NAV_LIST.MY_PAGE]: '/myPage', diff --git a/src/components/landing/index.tsx b/src/components/landing/index.tsx index 13fd4ade..83802e20 100644 --- a/src/components/landing/index.tsx +++ b/src/components/landing/index.tsx @@ -18,7 +18,6 @@ const Landing = () => { /> - ); }; diff --git a/src/components/main/index.tsx b/src/components/main/index.tsx index 9a43d5bc..2ea33609 100644 --- a/src/components/main/index.tsx +++ b/src/components/main/index.tsx @@ -19,15 +19,30 @@ const Main = () => { const funSystemResponse = getFunsystem(); popularArticleResponse.then((data) => { - setPosts(data.data); + const result: PostDetailProps[] = data.data; + if (result.length > 3) { + setPosts(result.slice(0, 3)); + } else { + setPosts(result); + } }); noticeResponse.then((data) => { - setNoticeList(data.data.content); + const result: SummaryText[] = data.data.notices; + if (result.length > 3) { + setNoticeList(result.slice(0, 3)); + } else { + setNoticeList(result); + } }); funSystemResponse.then((data) => { - setFunSystemList(data.data.content); + const result: SummaryText[] = data.data.funSystems; + if (result.length > 3) { + setFunSystemList(result.slice(0, 3)); + } else { + setFunSystemList(result); + } }); }, []); diff --git a/src/hooks/useNavbar.ts b/src/hooks/useNavbar.ts index cc8bd634..c41ff373 100644 --- a/src/hooks/useNavbar.ts +++ b/src/hooks/useNavbar.ts @@ -4,7 +4,7 @@ import { useState, useEffect } from 'react'; 미로그인시 랜딩페이지에서 스크롤 위치에 따라 하단 네비게이션바를 렌더링 여부를 return하는 hook */ const useNavbar = () => { - const [isLogin, setIsLogin] = useState(false); //TODO: 추후 전역 상태에서 가져옴 + const [isLogin, setIsLogin] = useState(true); //TODO: 추후 전역 상태에서 가져옴 const [renderNavbar, setRenderNavbar] = useState(false); function onScroll() { diff --git a/src/pages/index.page.tsx b/src/pages/index.page.tsx index a44e672f..88b1c490 100644 --- a/src/pages/index.page.tsx +++ b/src/pages/index.page.tsx @@ -5,7 +5,6 @@ import { userNavAtom, IUserNavAtom } from '@/states/userNavAtom'; import { NAV_LIST } from '@/components/common/Navbar/Navigation'; import '../styles/Home.module.css'; import Main from '@/components/main'; -import Landing from '@/components/landing'; const MainPage = () => { const setNavAtom = useSetRecoilState(userNavAtom); @@ -13,9 +12,6 @@ const MainPage = () => { activeNavType: NAV_LIST.HOME, }; - //TODO: 추후 전역 상태로 관리 - const [isLogin, setIsLogin] = useState(false); - //mobile height size 설정 useEffect(() => { const vh = window.innerHeight * 0.01; @@ -27,21 +23,10 @@ const MainPage = () => { }); }, []); - if (isLogin) { - return ( - -
- - ); - } else { - return ( - <> - - -
- - - ); - } + return ( + +
+ + ); }; export default MainPage; diff --git a/src/pages/landing/index.page.tsx b/src/pages/landing/index.page.tsx new file mode 100644 index 00000000..7d13995b --- /dev/null +++ b/src/pages/landing/index.page.tsx @@ -0,0 +1,9 @@ +import Landing from '@/components/landing'; + +export default function Home() { + return ( + <> + + + ); +} diff --git a/src/pages/layout/index.tsx b/src/pages/layout/index.tsx index fc9a3fc4..f0f02e74 100644 --- a/src/pages/layout/index.tsx +++ b/src/pages/layout/index.tsx @@ -1,6 +1,5 @@ -import Header from '@/components/common/Header/Header'; import { userNavAtom } from '@/states/userNavAtom'; -import { PropsWithChildren } from 'react'; +import { PropsWithChildren, useEffect, useState } from 'react'; import { useRecoilValue } from 'recoil'; import { Outlet } from 'react-router-dom'; import * as styles from './layout.style'; @@ -11,10 +10,24 @@ const MainLayout = ({ children }: PropsWithChildren<{}>) => { const activeNavType = useRecoilValue(userNavAtom).activeNavType; const { renderNavbar } = useNavbar(); + const [isShow, setIsShow] = useState(false); + + useEffect(() => { + const currentPageUrl = window.location.href; + if ( + currentPageUrl.includes('landing') || + currentPageUrl.includes('login') + ) { + setIsShow(false); + } else { + setIsShow(true); + } + }, []); return ( <> {children || } + {/* {isShow &&
} */} diff --git a/src/pages/login/index.page.tsx b/src/pages/login/index.page.tsx index 4ba569a5..5d00f30e 100644 --- a/src/pages/login/index.page.tsx +++ b/src/pages/login/index.page.tsx @@ -1,5 +1,11 @@ +import UtilityHeader from '@/components/common/Header/UtilityHeader'; import LoginLayout from '@/components/login/LoginLayout/LoginLayout'; export default function Login() { - return ; + return ( + <> + + + + ); }