From 9b6b81fbc3f584ee682d242abeb0b68e558ca2e8 Mon Sep 17 00:00:00 2001 From: Raymond Date: Mon, 19 Feb 2024 00:25:16 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20=EC=95=8C=EB=A6=BC,=20=EC=84=A4?= =?UTF-8?q?=EC=A0=95=20=ED=99=94=EB=A9=B4=20=EA=B5=AC=ED=98=84=ED=95=98?= =?UTF-8?q?=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../dashboard/best-worth/index.tsx | 0 .../dashboard/character/index.tsx | 0 .../dashboard/happy/index.tsx | 0 .../dashboard/money/index.tsx | 0 .../dashboard/sad/index.tsx | 0 .../compositions/dashboard/tree-info.tsx | 89 ++++++++ .../compositions/header/alert/alert-card.tsx | 86 +++++++ .../compositions/header/alert/index.tsx | 57 +++++ .../header/edit-setting/index.tsx | 30 +++ .../compositions/header/setting/index.tsx | 77 +++++++ .../compositions/header/write-list/index.tsx | 45 ++++ .../header/write-list/wirte-list-card.tsx | 76 +++++++ components/header/index.tsx | 107 +-------- components/knowing-filter-group/index.tsx | 128 ++++++++++- components/modal/index.tsx | 52 ++++- components/ui/dialog/index.tsx | 28 +-- components/ui/drawer/index.tsx | 28 ++- layout/base-layout.tsx | 7 +- pages/dashboard/index.tsx | 215 +----------------- pages/test.tsx | 16 -- styles/theme/colors.ts | 1 + tailwind.config.ts | 8 +- 22 files changed, 682 insertions(+), 368 deletions(-) rename components/{ => compositions}/dashboard/best-worth/index.tsx (100%) rename components/{ => compositions}/dashboard/character/index.tsx (100%) rename components/{ => compositions}/dashboard/happy/index.tsx (100%) rename components/{ => compositions}/dashboard/money/index.tsx (100%) rename components/{ => compositions}/dashboard/sad/index.tsx (100%) create mode 100644 components/compositions/dashboard/tree-info.tsx create mode 100644 components/compositions/header/alert/alert-card.tsx create mode 100644 components/compositions/header/alert/index.tsx create mode 100644 components/compositions/header/edit-setting/index.tsx create mode 100644 components/compositions/header/setting/index.tsx create mode 100644 components/compositions/header/write-list/index.tsx create mode 100644 components/compositions/header/write-list/wirte-list-card.tsx delete mode 100644 pages/test.tsx diff --git a/components/dashboard/best-worth/index.tsx b/components/compositions/dashboard/best-worth/index.tsx similarity index 100% rename from components/dashboard/best-worth/index.tsx rename to components/compositions/dashboard/best-worth/index.tsx diff --git a/components/dashboard/character/index.tsx b/components/compositions/dashboard/character/index.tsx similarity index 100% rename from components/dashboard/character/index.tsx rename to components/compositions/dashboard/character/index.tsx diff --git a/components/dashboard/happy/index.tsx b/components/compositions/dashboard/happy/index.tsx similarity index 100% rename from components/dashboard/happy/index.tsx rename to components/compositions/dashboard/happy/index.tsx diff --git a/components/dashboard/money/index.tsx b/components/compositions/dashboard/money/index.tsx similarity index 100% rename from components/dashboard/money/index.tsx rename to components/compositions/dashboard/money/index.tsx diff --git a/components/dashboard/sad/index.tsx b/components/compositions/dashboard/sad/index.tsx similarity index 100% rename from components/dashboard/sad/index.tsx rename to components/compositions/dashboard/sad/index.tsx diff --git a/components/compositions/dashboard/tree-info.tsx b/components/compositions/dashboard/tree-info.tsx new file mode 100644 index 0000000..ecbc0b5 --- /dev/null +++ b/components/compositions/dashboard/tree-info.tsx @@ -0,0 +1,89 @@ +import Badge from '@/components/badge' +import Button from '@/components/button' +import React from 'react' + +const TreeInfo = () => { + return ( + <> +
+
+

+ 내 정원에 심어진 나무는 +
+ 총 999그루 +

+
+ + + + + + + + + + + +
+
+ +
+

+ 김디엔님에 대해 알아보세요! +

+ +
+ + + + +
+
+ + + +
+ + ) +} + +export default TreeInfo diff --git a/components/compositions/header/alert/alert-card.tsx b/components/compositions/header/alert/alert-card.tsx new file mode 100644 index 0000000..f323995 --- /dev/null +++ b/components/compositions/header/alert/alert-card.tsx @@ -0,0 +1,86 @@ +import { cn } from '@/lib/client/utils' +import React from 'react' + +interface AlertCardProps { + isRead?: boolean +} + +const AlertCard = ({ isRead = false }: AlertCardProps) => { + return ( +
+
+ + + + + + + + + + + +
+
+

김미영님이 소개서를 작성했어요

+
+
+ 1-4년 +
+
+ 직장 +
+
+
+
+ 2023.01.01 +
+
+ ) +} + +export default AlertCard diff --git a/components/compositions/header/alert/index.tsx b/components/compositions/header/alert/index.tsx new file mode 100644 index 0000000..5585862 --- /dev/null +++ b/components/compositions/header/alert/index.tsx @@ -0,0 +1,57 @@ +import Drawer from '@/components/ui/drawer' +import React, { useState } from 'react' +import AlertCard from './alert-card' + +const Alert = () => { + const [openAlert, setOpenAlert] = useState(false) + return ( + 알림

, + options: { + onBackClick() { + setOpenAlert(false) + }, + showRight: false, + }, + }} + open={openAlert} + onChangeOpen={setOpenAlert} + trigger={ + + + + + } + > +
+
+ +
+ + + +
+ + ) +} + +export default Alert diff --git a/components/compositions/header/edit-setting/index.tsx b/components/compositions/header/edit-setting/index.tsx new file mode 100644 index 0000000..8715faa --- /dev/null +++ b/components/compositions/header/edit-setting/index.tsx @@ -0,0 +1,30 @@ +import Drawer from '@/components/ui/drawer' +import React, { useState } from 'react' + +const EditProfile = () => { + const [openAlert, setOpenAlert] = useState(false) + return ( + 프로필 수정

, + options: { + onBackClick() { + setOpenAlert(false) + }, + showRight: false, + }, + }} + open={openAlert} + onChangeOpen={setOpenAlert} + trigger={ + + } + > + TODO: #26 머지 후 작업 + + ) +} + +export default EditProfile diff --git a/components/compositions/header/setting/index.tsx b/components/compositions/header/setting/index.tsx new file mode 100644 index 0000000..512cf8c --- /dev/null +++ b/components/compositions/header/setting/index.tsx @@ -0,0 +1,77 @@ +import Drawer from '@/components/ui/drawer' +import React, { useState } from 'react' +import Modal from '@/components/modal' +import WriteList from '@/components/compositions/header/write-list' +import EditProfile from '@/components/compositions/header/edit-setting' + +const Setting = () => { + const [openSetting, setOpenSetting] = useState(false) + return ( + 설정

, + options: { + onBackClick() { + setOpenSetting(false) + }, + showRight: false, + }, + }} + open={openSetting} + onChangeOpen={setOpenSetting} + trigger={ + + + + } + > +
+
+

+ 계정 관리 +

+ + + + 로그아웃 + + } + title="로그아웃" + description="정말 로그아웃 하시겠어요?" + /> + + 서비스 탈퇴 + + } + title="서비스 탈퇴" + description={`탈퇴 시 모든 정보가 사라져요. + 정말 탈퇴하시겠어요?`} + /> +
+
+

+ 남의 위키 +

+ +
+
+ + ) +} + +export default Setting diff --git a/components/compositions/header/write-list/index.tsx b/components/compositions/header/write-list/index.tsx new file mode 100644 index 0000000..3d5af96 --- /dev/null +++ b/components/compositions/header/write-list/index.tsx @@ -0,0 +1,45 @@ +import KnowingFilterGroup from '@/components/knowing-filter-group' +import Drawer from '@/components/ui/drawer' +import React, { useState } from 'react' +import WriteListCard from '@/components/compositions/header/write-list/wirte-list-card' + +const WriteList = () => { + const [openAlert, setOpenAlert] = useState(false) + return ( + 작성목록

, + options: { + onBackClick() { + setOpenAlert(false) + }, + showRight: false, + }, + }} + open={openAlert} + onChangeOpen={setOpenAlert} + trigger={ + + } + > + +
+

+ 999명의 친구가 이유를 + 적었어요 +

+ + + + + + + +
+ + ) +} + +export default WriteList diff --git a/components/compositions/header/write-list/wirte-list-card.tsx b/components/compositions/header/write-list/wirte-list-card.tsx new file mode 100644 index 0000000..13fe3b9 --- /dev/null +++ b/components/compositions/header/write-list/wirte-list-card.tsx @@ -0,0 +1,76 @@ +import React from 'react' + +const WriteListCard = () => { + return ( +
+
+ + + + + + + + + + + +
+
+

김미영님

+
+
+ 1-4년 +
+
+ 직장 +
+
+
+
+ 2023.01.01 +
+
+ ) +} + +export default WriteListCard diff --git a/components/header/index.tsx b/components/header/index.tsx index 533955d..03637da 100644 --- a/components/header/index.tsx +++ b/components/header/index.tsx @@ -1,12 +1,13 @@ import { useRouter } from 'next/router' -import { ReactNode, useCallback, useEffect, useRef, useState } from 'react' +import { ReactNode, useCallback, useEffect, useRef } from 'react' import { Variants, motion, useAnimation } from 'framer-motion' -import Drawer from '@/components/ui/drawer' import { fadeInProps } from '@/variants' import { useSettingStore } from '@/stores/setting.store' import useScrollDirection from '@/hooks/use-scroll-direction' import { cn } from '@/lib/client/utils' +import Setting from '@/components/compositions/header/setting' +import Alert from '@/components/compositions/header/alert' const logoVariants: Variants = { initial: {}, @@ -116,8 +117,6 @@ const Header = ({ center = , rightIcon, options }: HeaderProps) => { const { showRight, onBackClick } = options ?? { showRight: true } const headerRef = useRef(null) const router = useRouter() - const [openAlert, setOpenAlert] = useState(false) - const [openSetting, setOpenSetting] = useState(false) const { scrollTop, direction } = useScrollDirection() @@ -140,19 +139,11 @@ const Header = ({ center = , rightIcon, options }: HeaderProps) => { useEffect(() => { if (typeof window !== 'undefined' && headerRef.current) { - const observer = new IntersectionObserver((entries) => { - entries.forEach((entry) => { - setIntersecting(entry.isIntersecting) - }) - }) - const element = headerRef.current - observer.observe(element) element.addEventListener('resize', handleResize) handleResize() return () => { element.removeEventListener('resize', handleResize) - observer.disconnect() } } }, [handleResize, setIntersecting]) @@ -187,7 +178,6 @@ const Header = ({ center = , rightIcon, options }: HeaderProps) => { /> - {center} @@ -195,95 +185,8 @@ const Header = ({ center = , rightIcon, options }: HeaderProps) => { {showRight ? rightIcon ?? ( <> - - - - - } - > -
작성목록

} - options={{ - onBackClick() { - setOpenAlert(false) - }, - - showRight: false, - }} - /> -

112

-

112

-

112

-

112

-

112

-

112

-

112

-

112

-

112

-

112

-

112

- - - - - } - > -
설정

} - options={{ - onBackClick() { - setOpenSetting(false) - }, - showRight: false, - }} - /> -

112

-

112

-

112

-

112

-

112

-

112

-

112

-

112

-

112

-

112

-

112

- + + ) : null} diff --git a/components/knowing-filter-group/index.tsx b/components/knowing-filter-group/index.tsx index 4f262d6..ced1a42 100644 --- a/components/knowing-filter-group/index.tsx +++ b/components/knowing-filter-group/index.tsx @@ -1,7 +1,129 @@ -import React from 'react' +import { AnimatePresence, motion } from 'framer-motion' +import React, { HTMLAttributes, useState } from 'react' +import FilterText from '../filter-text' +import { cn } from '@/lib/client/utils' +import { fadeInProps } from '@/variants' +import FilterButton from '../filter-button' -const KnowingFilterGroup = () => { - return
+type KnowFilterType = 'period' | 'route' +const filterItems: { + [key in 'period' | 'route']: { label: string; value: string }[] +} = { + period: [ + { + label: '전체', + value: 'ALL', + }, + { + label: '초등학교', + value: 'ELEMENTARY_SCHOOL', + }, + { + label: '중·고등학교', + value: 'MIDDLE_AND_HIGH_SCHOOL', + }, + { + label: '대학교', + value: 'UNIVERSITY', + }, + { + label: '직장', + value: 'WORK', + }, + { + label: '모임', + value: 'SOCIAL', + }, + { + label: '기타', + value: 'ETC', + }, + ], + route: [ + { + label: '전체', + value: 'ALL', + }, + { + label: '6개월 미만', + value: 'SIX_MONTHS', + }, + { + label: '6개월-1년', + value: 'ONE_YEAR', + }, + { + label: '1년-4년', + value: 'FOUR_YEARS', + }, + { + label: '4년 이상', + value: 'INFINITE', + }, + ], +} + +interface KnowingFilter extends HTMLAttributes {} + +const KnowingFilterGroup = (props: KnowingFilter) => { + const [knowState, setKnowState] = useState('period') + const [selectedFilterItem, setSelectedFilterItem] = useState('ALL') + + const onKnowFilterClick = (type: KnowFilterType) => () => { + setSelectedFilterItem('ALL') + setKnowState(type) + } + return ( +
+
+ + +
+ + {knowState && ( + + {filterItems[knowState].map((item) => ( + setSelectedFilterItem(item.value)} + key={item.value} + label={item.label} + /> + ))} + + )} + +
+ ) } export default KnowingFilterGroup diff --git a/components/modal/index.tsx b/components/modal/index.tsx index 92ee390..7da259b 100644 --- a/components/modal/index.tsx +++ b/components/modal/index.tsx @@ -1,6 +1,5 @@ import { Dialog, - DialogClose, DialogContent, DialogDescription, DialogFooter, @@ -8,35 +7,68 @@ import { DialogTitle, DialogTrigger, } from '@/components/ui/dialog' -import { ForwardedRef, forwardRef } from 'react' +import { Close } from '@radix-ui/react-dialog' +import { ForwardedRef, PropsWithChildren, ReactNode, forwardRef } from 'react' interface ModalProps extends React.ComponentPropsWithoutRef, React.ComponentPropsWithoutRef { - children: React.ReactNode title?: string description?: string + footer?: ReactNode[] trigger: React.ReactNode } -export const Modal = forwardRef( - ({ children, title, description, trigger }, ref) => { +export const Modal = forwardRef>( + ( + { + children, + title, + description, + trigger, + footer = [ + + 취소 + Close + , + , + ], + }, + ref, + ) => { return ( }> {trigger} - + + {...[footer]} + + } + > {title && {title}} {description && ( - {description} + + {description} + )} {children} - - - ) diff --git a/components/ui/dialog/index.tsx b/components/ui/dialog/index.tsx index b88da42..5a3ae6f 100644 --- a/components/ui/dialog/index.tsx +++ b/components/ui/dialog/index.tsx @@ -1,6 +1,5 @@ import * as React from 'react' import * as DialogPrimitive from '@radix-ui/react-dialog' -import { X } from 'lucide-react' import { cn } from '@/lib/client/utils' @@ -29,23 +28,23 @@ DialogOverlay.displayName = DialogPrimitive.Overlay.displayName const DialogContent = React.forwardRef< React.ElementRef, - React.ComponentPropsWithoutRef + React.ComponentPropsWithoutRef & { + footer?: React.ReactNode + } + // py-12 px-4 >(({ className, children, ...props }, ref) => ( - {children} - - - Close - +
{children}
+ {props.footer} )) @@ -69,13 +68,7 @@ const DialogFooter = ({ className, ...props }: React.HTMLAttributes) => ( -
+
) DialogFooter.displayName = 'DialogFooter' @@ -85,11 +78,8 @@ const DialogTitle = React.forwardRef< >(({ className, ...props }, ref) => ( )) DialogTitle.displayName = DialogPrimitive.Title.displayName diff --git a/components/ui/drawer/index.tsx b/components/ui/drawer/index.tsx index 7942e3e..574bcc7 100644 --- a/components/ui/drawer/index.tsx +++ b/components/ui/drawer/index.tsx @@ -1,6 +1,8 @@ +import { HeaderProps } from '@/components/header' +import BaseLayout from '@/layout/base-layout' import { useBrowserLayoutEffect } from '@/lib/client/utils' import { drawerInOutProps } from '@/variants' -import { AnimatePresence, LazyMotion, domAnimation, m } from 'framer-motion' +import { AnimatePresence, LazyMotion, domAnimation } from 'framer-motion' import { PropsWithChildren, ReactNode, @@ -16,6 +18,7 @@ interface DrawerProps { open?: boolean onChangeOpen?: (state: boolean) => void trigger?: ReactNode + header?: HeaderProps & { showHeader?: boolean } } function css(element: HTMLElement, style: Partial) { @@ -31,6 +34,7 @@ const Drawer = ({ open = false, onChangeOpen, children, + header, }: PropsWithChildren) => { const id = useId() const [isMounted, setIsMounted] = useState(open) @@ -49,16 +53,18 @@ const Drawer = ({ left: '0px', top: '0px', width: '100dvw', - height: '100dvh', + height: 'calc(var(--vh,1vh)*100)', }) + document.body.style.overflowY = 'hidden' } else { css(ref.current, { position: 'fixed', left: '0px', top: '0px', width: '0px', - height: '0px', + height: 'calc(var(--vh,1vh)*100)', }) + document.body.style.overflowY = '' } const newIsMountState = state ?? !isMounted setIsMounted(newIsMountState) @@ -84,7 +90,7 @@ const Drawer = ({ if (isMounted) { css(ref.current, { display: 'block', - zIndex: '100', + zIndex: '10', }) } } @@ -102,12 +108,16 @@ const Drawer = ({ {isMounted ? ( - - {children} - +
+ {children} +
+ ) : null} , diff --git a/layout/base-layout.tsx b/layout/base-layout.tsx index 9d24691..b4a2213 100644 --- a/layout/base-layout.tsx +++ b/layout/base-layout.tsx @@ -2,7 +2,7 @@ import React, { PropsWithChildren } from 'react' import LocalFont from 'next/font/local' import { cn } from '@/lib/client/utils' import Header, { HeaderProps } from '@/components/header' -import { motion } from 'framer-motion' +import { HTMLMotionProps, motion } from 'framer-motion' import { fadeInProps } from '@/variants' const pretendard = LocalFont({ @@ -34,17 +34,20 @@ interface BaseLayoutProps { showHeader?: boolean header?: HeaderProps className?: string + framer?: HTMLMotionProps<'main'> } const BaseLayout = ({ className, children, - showHeader = true, header, + showHeader = true, + framer, }: PropsWithChildren) => { return ( { - const [knowState, setKnowState] = useState('period') - const [selectedFilterItem, setSelectedFilterItem] = useState('ALL') const headerHeight = useSettingStore((state) => state.headerHeight) const { direction, scrollTop } = useScrollDirection() - const onKnowFilterClick = (type: KnowFilterType) => () => { - setSelectedFilterItem('ALL') - setKnowState(type) - } const shouldShowHeader = scrollTop > headerHeight && direction === 'UP' return ( -
-
- - -
- - {knowState && ( - - {filterItems[knowState].map((item) => ( - setSelectedFilterItem(item.value)} - key={item.value} - label={item.label} - /> - ))} - - )} - -
-
+ +
{/* 내 정원에 심어진 나무는? */}
-
-
-

- 내 정원에 심어진 나무는 -
- - 총 999그루 - -

-
- - - - - - - - - - - -
-
- -
-

- 김디엔님에 대해 알아보세요! -

- -
- - - - -
-
- - - -
+
{/* 가장 중요한 것 - 파이차트 */}
diff --git a/pages/test.tsx b/pages/test.tsx deleted file mode 100644 index 631b4d8..0000000 --- a/pages/test.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import ComboboxDropdown from '@/components/combobox' - -const Page = () => { - return ( - <> -
- console.log(option)} - /> -
- - ) -} - -export default Page diff --git a/styles/theme/colors.ts b/styles/theme/colors.ts index e920f34..c43a76c 100644 --- a/styles/theme/colors.ts +++ b/styles/theme/colors.ts @@ -91,6 +91,7 @@ export const colors = { green2: '#E2F6E9', green3: '#ECFFE8', blue1: '#E2F5FF', + blue2: '#EFFAFF', yellow1: '#FFFDE7', orange1: '#FFF1DB', gray1: '#FAFAFA', diff --git a/tailwind.config.ts b/tailwind.config.ts index 1d9d40e..0e893e9 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -78,7 +78,7 @@ const config = { 'mainTitle1-medium': [ '28px', { - fontWeight: 'medium', + fontWeight: '500', lineHeight: '38px', }, ], @@ -92,7 +92,7 @@ const config = { 'mainTitle2-medium': [ '24px', { - fontWeight: 'medium', + fontWeight: '500', lineHeight: '34px', }, ], @@ -107,7 +107,7 @@ const config = { '20px', { lineHeight: '28px', - fontWeight: 'medium', + fontWeight: '500', }, ], subTitle2: '18px', @@ -129,7 +129,7 @@ const config = { 'body3-medium': [ '14px', { - fontWeight: 'medium', + fontWeight: '500', lineHeight: '20px', }, ],