Skip to content

Commit

Permalink
[#61] fefactor: refactor home (#63)
Browse files Browse the repository at this point in the history
* refactor: refactor page

* feat: add new icon

* fix: add props

* feat: add floating button

* feat: add ui and delete useless

* docs: add todos

* fix: fix design system
  • Loading branch information
dohui-son authored Aug 17, 2024
1 parent 3433fc4 commit 14c345e
Show file tree
Hide file tree
Showing 63 changed files with 906 additions and 477 deletions.
180 changes: 2 additions & 178 deletions packages/client/app/(withLayout)/home/page.tsx
Original file line number Diff line number Diff line change
@@ -1,181 +1,5 @@
'use client'

import { HomeHeader } from '@widgets/HomeHeader/HomeHeader'
import { Button } from '@gmi-design-system/component/Button/Button'
import React, { useState } from 'react'
import dynamic from 'next/dynamic'
import Green from '@gmi-design-system/component/Recommend/home/Green.svg'
import Blue from '@gmi-design-system/component/Recommend/home/Blue.svg'
import Orange from '@gmi-design-system/component/Recommend/home/Orange.svg'
import { useScrollHandler } from '@features/useScrollHandler'
import Question from '@shared/ui/QuestionList/Question'
import { IconArrowRight } from '@gmi-design-system/icon'
import HomeRecommend from '@gmi-design-system/component/Recommend/home/HomeRecommend'
import { FloatButton, JobGreenTag } from '@gds/component'
import { useClientSideRender } from './useClientSideRender'

import './slider.css'
import * as styles from './index.css'

const Slider = dynamic(() => import('react-slick'), { ssr: false })

const data = [
{
tag: '법원경비관리',
reward: '2000',
title: '서류 처리 관련 질문',
content: '안녕ㅎ아세요',
date: '2024',
bookmark: 23,
likes: 2,
},
{
tag: '법원경비관리',
reward: '2000',
title: '서류 처리 관련 질문',
content: '안녕ㅎ아세요',
date: '2024',
bookmark: 23,
likes: 2,
},
{
tag: '법원경비관리',
reward: '2000',
title: '서류 처리 관련 질문',
content: '안녕ㅎ아세요',
date: '2024',
bookmark: 23,
likes: 2,
},
{
tag: '법원경비관리',
reward: '2000',
title: '서류 처리 관련 질문',
content: '안녕ㅎ아세요',
date: '2024',
bookmark: 23,
likes: 2,
},
{
tag: '법원경비관리',
reward: '2000',
title: '서류 처리 관련 질문',
content: '안녕ㅎ아세요',
date: '2024',
bookmark: 23,
likes: 2,
},
{
tag: '법원경비관리',
reward: '2000',
title: '서류 처리 관련 질문',
content: '안녕ㅎ아세요',
date: '2024',
bookmark: 23,
likes: 2,
},
]
import { ClientHomePage } from 'src/clientPages/home'

export default function Home() {
const isClient = useClientSideRender()

const settings = {
className: 'center',
infinite: true,
slidesToShow: 1,
swipeToSlide: true,
nextArrow: (
<div className={styles.ArrowBox}>
<IconArrowRight />
</div>
),
}

const [fixed, setFixed] = useState<boolean>(false)
useScrollHandler(setFixed, 'nav-section')

return (
<div style={{ position: 'fixed', height: '844px' }}>
<div
style={{
position: 'absolute',
top: 0,
left: 0,
overflowY: 'scroll',
}}
>
<div className={styles.HomeWrapper}>
<HomeHeader />
<div className={styles.RecommendWrapper}>
<div className={styles.RecommendHeaderBox}>
<div className={styles.RecommendTitle}>추천 질문</div>
<div className={styles.MoreBox}>
<Button size="small" variant="outlined">
더보기
</Button>
</div>
</div>
</div>
</div>
<div className={styles.RecommendContentBox}>
{isClient && (
<div className="slider-container">
<Slider
className={settings.className}
infinite={settings.infinite}
slidesToShow={settings.slidesToShow}
swipeToSlide={settings.swipeToSlide}
nextArrow={settings.nextArrow}
>
{/** TODO: 데이터 형식으로 변경하기 */}
<HomeRecommend
src={Blue}
coin="2000"
title="ddd"
bookmark={20}
likes={4}
/>
<HomeRecommend
src={Green}
coin="2000"
title="ddd"
bookmark={20}
likes={4}
/>
<HomeRecommend
src={Orange}
coin="2000"
title="ddd"
bookmark={20}
likes={4}
/>
</Slider>
</div>
)}
</div>
<hr className={styles.Line} />
<div id="nav-section" className={styles.HomeWrapper}>
<div
className={`${styles.QuestionListsWrapper} ${fixed && styles.fixedNav}`}
>
<div className={styles.QuestionListHeaderWrapper}>
<div className={styles.QuestionHeaderTitle}>
<span>질문 리스트</span>
</div>
<div className={styles.QuestionFilterBox}>
{/** TODO: 디자인시스템 작성필요 */}
<JobGreenTag name="더보기" />
</div>
</div>
</div>
<div className={styles.QuestionsWrapper}>
{data.map((el) => {
return <Question data={el} />
})}
</div>
</div>
</div>
<FloatButton />
</div>
)
return <ClientHomePage />
}
13 changes: 0 additions & 13 deletions packages/client/app/(withLayout)/home/useClientsideRender.ts

This file was deleted.

3 changes: 1 addition & 2 deletions packages/client/app/(withLayout)/question/create/page.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { QuestionCreateInputs } from '@widgets/QuestionCreateInputs'
import { ClientQuestionCreatePage } from 'src/pages/questionCreate'
import { ClientQuestionCreatePage } from 'src/clientPages/questionCreate'

export default function QuestionCreatePage() {
return (
Expand Down
1 change: 1 addition & 0 deletions packages/client/src/clientPages/home/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { ClientHomePage } from './ui/ClientHomePage'
Loading

0 comments on commit 14c345e

Please sign in to comment.