From c44161bc43a1d1139ecfd8ca88f26ea46abaf0ef Mon Sep 17 00:00:00 2001 From: effozen Date: Sun, 17 Nov 2024 22:59:38 +0900 Subject: [PATCH 1/5] =?UTF-8?q?[ENV][Docs]=20:=20README.md=20=EC=9C=84?= =?UTF-8?q?=ED=82=A4=EC=99=80=20=EB=85=B8=EC=85=98=20=EC=88=9C=EC=84=9C=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 996b615a..0dc5703b 100644 --- a/README.md +++ b/README.md @@ -20,8 +20,8 @@ ## πŸ— 링크 μ•ˆλ‚΄

- νŒ€ λ…Έμ…˜ | νŒ€ μœ„ν‚€ | + νŒ€ λ…Έμ…˜ | κΈ°νšμ„œ | λ””μžμΈ ) +

- .sb-addon { - width: 100%; - display: flex; - align-items: center; - position: relative; - background-color: #EEF3F8; - border-radius: 5px; - border: 1px solid rgba(0, 0, 0, 0.05); - background: #EEF3F8; - height: 180px; - margin-bottom: 48px; - overflow: hidden; - } - - .sb-addon-text { - padding-left: 48px; - max-width: 240px; - } - - .sb-addon-text h4 { - padding-top: 0px; - } - - .sb-addon-img { - position: absolute; - left: 345px; - top: 0; - height: 100%; - width: 200%; - overflow: hidden; - } - - .sb-addon-img img { - width: 650px; - transform: rotate(-15deg); - margin-left: 40px; - margin-top: -72px; - box-shadow: 0 0 1px rgba(255, 255, 255, 0); - backface-visibility: hidden; - } - - @media screen and (max-width: 800px) { - .sb-addon-img { - left: 300px; - } - } - - @media screen and (max-width: 600px) { - .sb-section { - flex-direction: column; - } - - .sb-features-grid { - grid-template-columns: repeat(1, 1fr); - } - - .sb-socials { - grid-template-columns: repeat(2, 1fr); - } - - .sb-addon { - height: 280px; - align-items: flex-start; - padding-top: 32px; - overflow: hidden; - } - - .sb-addon-text { - padding-left: 24px; - } - - .sb-addon-img { - right: 0; - left: 0; - top: 130px; - bottom: 0; - overflow: hidden; - height: auto; - width: 124%; - } + - .sb-addon-img img { - width: 1200px; - transform: rotate(-12deg); - margin-left: 0; - margin-top: 48px; - margin-bottom: -40px; - margin-left: -24px; - } - } - `} - +
+


+ + +## 🌱 νŒ€μ› μ†Œκ°œ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
J060_김주원J174_μ΄λ™μœ¨J210_μž„μž¬λ„J234_μ •ν˜œμΈ
FEFEFEFull Stack (FE + BE)
@juwon5272@leedongyull@effozen@happyhyep
+ +
+ +## ⛏ 기술 μŠ€νƒ + +μΆ”ν›„ μΆ”κ°€ μ˜ˆμ •μž…λ‹ˆλ‹€. + +[//]: # () +
From 3419cebb46c4e6158a08b90d00a6661dd756c89c Mon Sep 17 00:00:00 2001 From: effozen Date: Sun, 17 Nov 2024 23:00:38 +0900 Subject: [PATCH 3/5] =?UTF-8?q?[FE][Docs]=20:=20=EC=8A=A4=ED=86=A0?= =?UTF-8?q?=EB=A6=AC=EB=B6=81=20=EB=94=94=EB=A0=89=ED=86=A0=EB=A6=AC=20?= =?UTF-8?q?=EA=B5=AC=EC=A1=B0=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/component/common/dropdown/Dropdown.tsx | 1 - frontend/src/stories/{ => example}/Button.stories.ts | 0 frontend/src/stories/{ => example}/Button.tsx | 0 frontend/src/stories/{ => example}/Header.stories.ts | 0 frontend/src/stories/{ => example}/Header.tsx | 0 frontend/src/stories/{ => example}/Page.stories.ts | 0 frontend/src/stories/{ => example}/Page.tsx | 0 frontend/src/stories/{ => example}/button.css | 0 frontend/src/stories/{ => example}/header.css | 0 frontend/src/stories/{ => example}/page.css | 0 10 files changed, 1 deletion(-) rename frontend/src/stories/{ => example}/Button.stories.ts (100%) rename frontend/src/stories/{ => example}/Button.tsx (100%) rename frontend/src/stories/{ => example}/Header.stories.ts (100%) rename frontend/src/stories/{ => example}/Header.tsx (100%) rename frontend/src/stories/{ => example}/Page.stories.ts (100%) rename frontend/src/stories/{ => example}/Page.tsx (100%) rename frontend/src/stories/{ => example}/button.css (100%) rename frontend/src/stories/{ => example}/header.css (100%) rename frontend/src/stories/{ => example}/page.css (100%) diff --git a/frontend/src/component/common/dropdown/Dropdown.tsx b/frontend/src/component/common/dropdown/Dropdown.tsx index 8479c06a..3df606af 100644 --- a/frontend/src/component/common/dropdown/Dropdown.tsx +++ b/frontend/src/component/common/dropdown/Dropdown.tsx @@ -17,7 +17,6 @@ export const ToggleContext = createContext({ toggle: () => {}, }); -// Todo : λ“œλžλ‹€μš΄ μ™ΈλΆ€μ—μ„œ ν΄λ¦­μ‹œ μ°½ λ‹«νžˆκ²Œ μ„€μ • export const Dropdown = (props: IDropdownProps) => { const [isOpen, setIsOpen] = useState(false); diff --git a/frontend/src/stories/Button.stories.ts b/frontend/src/stories/example/Button.stories.ts similarity index 100% rename from frontend/src/stories/Button.stories.ts rename to frontend/src/stories/example/Button.stories.ts diff --git a/frontend/src/stories/Button.tsx b/frontend/src/stories/example/Button.tsx similarity index 100% rename from frontend/src/stories/Button.tsx rename to frontend/src/stories/example/Button.tsx diff --git a/frontend/src/stories/Header.stories.ts b/frontend/src/stories/example/Header.stories.ts similarity index 100% rename from frontend/src/stories/Header.stories.ts rename to frontend/src/stories/example/Header.stories.ts diff --git a/frontend/src/stories/Header.tsx b/frontend/src/stories/example/Header.tsx similarity index 100% rename from frontend/src/stories/Header.tsx rename to frontend/src/stories/example/Header.tsx diff --git a/frontend/src/stories/Page.stories.ts b/frontend/src/stories/example/Page.stories.ts similarity index 100% rename from frontend/src/stories/Page.stories.ts rename to frontend/src/stories/example/Page.stories.ts diff --git a/frontend/src/stories/Page.tsx b/frontend/src/stories/example/Page.tsx similarity index 100% rename from frontend/src/stories/Page.tsx rename to frontend/src/stories/example/Page.tsx diff --git a/frontend/src/stories/button.css b/frontend/src/stories/example/button.css similarity index 100% rename from frontend/src/stories/button.css rename to frontend/src/stories/example/button.css diff --git a/frontend/src/stories/header.css b/frontend/src/stories/example/header.css similarity index 100% rename from frontend/src/stories/header.css rename to frontend/src/stories/example/header.css diff --git a/frontend/src/stories/page.css b/frontend/src/stories/example/page.css similarity index 100% rename from frontend/src/stories/page.css rename to frontend/src/stories/example/page.css From 4c49469cf826482055f7682dd7db713e6e12e23d Mon Sep 17 00:00:00 2001 From: effozen Date: Mon, 18 Nov 2024 03:35:22 +0900 Subject: [PATCH 4/5] =?UTF-8?q?[FE][Fix]=20:=20Dropdown=20=EB=B2=84?= =?UTF-8?q?=ED=8A=BC=20useContext=EB=A1=9C=20=EC=9D=B8=ED=95=9C=20?= =?UTF-8?q?=EC=88=9C=ED=99=98=20=EC=B0=B8=EC=A1=B0=20=EB=AC=B8=EC=A0=9C=20?= =?UTF-8?q?=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../component/common/dropdown/Dropdown.tsx | 21 +++------------- .../common/dropdown/DropdownContext.tsx | 25 +++++++++++++++++++ .../common/dropdown/DropdownMenu.tsx | 2 +- .../common/dropdown/DropdownTrigger.tsx | 23 ++++++++++++++++- 4 files changed, 51 insertions(+), 20 deletions(-) create mode 100644 frontend/src/component/common/dropdown/DropdownContext.tsx diff --git a/frontend/src/component/common/dropdown/Dropdown.tsx b/frontend/src/component/common/dropdown/Dropdown.tsx index 3df606af..12229a4a 100644 --- a/frontend/src/component/common/dropdown/Dropdown.tsx +++ b/frontend/src/component/common/dropdown/Dropdown.tsx @@ -1,32 +1,17 @@ -import { createContext, ReactNode, useMemo, useState } from 'react'; +import { ReactNode } from 'react'; import { DropdownTrigger } from '@/component/common/dropdown/DropdownTrigger.tsx'; import { DropdownItem } from '@/component/common/dropdown/DropdownItem.tsx'; import { DropdownMenu } from '@/component/common/dropdown/DropdownMenu.tsx'; +import { ToggleProvider } from '@/component/common/dropdown/DropdownContext.tsx'; interface IDropdownProps { children: ReactNode; } -export interface IToggleContext { - isOpen: boolean; - toggle: () => void; -} - -export const ToggleContext = createContext({ - isOpen: false, - toggle: () => {}, -}); - export const Dropdown = (props: IDropdownProps) => { - const [isOpen, setIsOpen] = useState(false); - - const toggle = () => setIsOpen(prevIsOpen => !prevIsOpen); - - const toggleContextValue = useMemo(() => ({ isOpen, toggle }), [isOpen]); - return ( ); }; diff --git a/frontend/src/component/common/dropdown/DropdownContext.tsx b/frontend/src/component/common/dropdown/DropdownContext.tsx new file mode 100644 index 00000000..61b865ac --- /dev/null +++ b/frontend/src/component/common/dropdown/DropdownContext.tsx @@ -0,0 +1,25 @@ +import { createContext, ReactNode, useMemo, useState } from 'react'; + +export interface IToggleContext { + isOpen: boolean; + toggle: () => void; +} + +interface IToggleProviderProps { + children: ReactNode; +} + +export const ToggleContext = createContext({ + isOpen: false, + toggle: () => {}, +}); + +export const ToggleProvider = (props: IToggleProviderProps) => { + const [isOpen, setIsOpen] = useState(false); + const toggle = () => setIsOpen(prevIsOpen => !prevIsOpen); + const toggleContextValue = useMemo(() => ({ isOpen, toggle }), [isOpen]); + + return ( + {props.children} + ); +}; diff --git a/frontend/src/component/common/dropdown/DropdownMenu.tsx b/frontend/src/component/common/dropdown/DropdownMenu.tsx index 5517c7e9..1333b16b 100644 --- a/frontend/src/component/common/dropdown/DropdownMenu.tsx +++ b/frontend/src/component/common/dropdown/DropdownMenu.tsx @@ -1,6 +1,6 @@ import { ReactNode, useContext, useRef, useEffect } from 'react'; import classNames from 'classnames'; -import { ToggleContext } from '@/component/common/dropdown/Dropdown.tsx'; +import { ToggleContext } from '@/component/common/dropdown/DropdownContext'; interface IDropdownMenuProps { children: ReactNode | ReactNode[]; diff --git a/frontend/src/component/common/dropdown/DropdownTrigger.tsx b/frontend/src/component/common/dropdown/DropdownTrigger.tsx index 5f612bcf..cb2cf2cc 100644 --- a/frontend/src/component/common/dropdown/DropdownTrigger.tsx +++ b/frontend/src/component/common/dropdown/DropdownTrigger.tsx @@ -1,11 +1,32 @@ import { ReactNode, useContext } from 'react'; import classNames from 'classnames'; -import { ToggleContext } from '@/component/common/dropdown/Dropdown.tsx'; +import { ToggleContext } from '@/component/common/dropdown/DropdownContext'; interface IDropdownTriggerProps { + /** λ²„νŠΌ 내뢀에 λ“€μ–΄κ°ˆ 컨텐츠 */ children: ReactNode; } +/** + * λ“œλ‘­λ‹€μš΄μ—μ„œ 메뉴λ₯Ό μ—΄κ³  λ‹«λŠ” 트리거 μ»΄ν¬λ„ŒνŠΈμž…λ‹ˆλ‹€. + * + * @param {ReactNode} children - λ²„νŠΌ 내뢀에 λ“€μ–΄κ°ˆ 컨텐츠 + * @return {JSX.Element} λ“œλ‘­λ‹€μš΄ 트리거 μ»΄ν¬λ„ŒνŠΈ + * + * @remarks + * - λ“œλ‘­λ‹€μš΄ 트리거 μ»΄ν¬λ„ŒνŠΈλ₯Ό μ‚¬μš©ν•˜μ—¬ λ“œλ‘­λ‹€μš΄ 메뉴λ₯Ό μ—΄κ³  닫을 수 μžˆμŠ΅λ‹ˆλ‹€. + * - λ“œλ‘­λ‹€μš΄ 트리거 μ»΄ν¬λ„ŒνŠΈλŠ” λ“œλ‘­λ‹€μš΄ μ»΄ν¬λ„ŒνŠΈ λ‚΄λΆ€μ—μ„œ μ‚¬μš©λ˜μ–΄μ•Ό ν•©λ‹ˆλ‹€. + * - λ“œλ‘­λ‹€μš΄ 트리거 μ»΄ν¬λ„ŒνŠΈλŠ” λ²„νŠΌ 역할을 μˆ˜ν–‰ν•©λ‹ˆλ‹€. + * + * @example + * ```tsx + * + * + * 메뉴 + * + * ``` + */ + export const DropdownTrigger = (props: IDropdownTriggerProps) => { const { toggle } = useContext(ToggleContext); From 66a14e89845ba1f5db8d838abec4e6d12d841136 Mon Sep 17 00:00:00 2001 From: effozen Date: Mon, 18 Nov 2024 04:25:12 +0900 Subject: [PATCH 5/5] =?UTF-8?q?[FE][Docs]=20#112=20:=20Storybook=20?= =?UTF-8?q?=EB=B0=8F=20TSDoc=20=EC=9E=91=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../component/common/dropdown/Dropdown.tsx | 25 +++++ .../common/dropdown/DropdownItem.tsx | 24 ++++- .../common/dropdown/DropdownMenu.tsx | 21 +++++ .../src/stories/dropdown/Dropdown.stories.tsx | 64 +++++++++++++ .../stories/dropdown/DropdownItem.stories.tsx | 42 +++++++++ .../stories/dropdown/DropdownMenu.stories.tsx | 91 +++++++++++++++++++ .../dropdown/DropdownTrigger.stories.tsx | 43 +++++++++ 7 files changed, 308 insertions(+), 2 deletions(-) create mode 100644 frontend/src/stories/dropdown/Dropdown.stories.tsx create mode 100644 frontend/src/stories/dropdown/DropdownItem.stories.tsx create mode 100644 frontend/src/stories/dropdown/DropdownMenu.stories.tsx create mode 100644 frontend/src/stories/dropdown/DropdownTrigger.stories.tsx diff --git a/frontend/src/component/common/dropdown/Dropdown.tsx b/frontend/src/component/common/dropdown/Dropdown.tsx index 12229a4a..0d8e1acf 100644 --- a/frontend/src/component/common/dropdown/Dropdown.tsx +++ b/frontend/src/component/common/dropdown/Dropdown.tsx @@ -5,9 +5,34 @@ import { DropdownMenu } from '@/component/common/dropdown/DropdownMenu.tsx'; import { ToggleProvider } from '@/component/common/dropdown/DropdownContext.tsx'; interface IDropdownProps { + /** λ“œλ‘­λ‹€μš΄ μ»΄ν¬λ„ŒνŠΈ 내뢀에 λ“€μ–΄κ°ˆ 컨텐츠 */ children: ReactNode; } +/** + * λ“œλ‘­λ‹€μš΄ μ»΄ν¬λ„ŒνŠΈμž…λ‹ˆλ‹€. + * + * @param {ReactNode} children - λ“œλ‘­λ‹€μš΄ μ»΄ν¬λ„ŒνŠΈ 내뢀에 λ“€μ–΄κ°ˆ 컨텐츠 + * @return {JSX.Element} λ“œλ‘­λ‹€μš΄ μ»΄ν¬λ„ŒνŠΈ + * + * @remarks + * - λ“œλ‘­λ‹€μš΄ μ»΄ν¬λ„ŒνŠΈλŠ” λ“œλ‘­λ‹€μš΄ 메뉴λ₯Ό μ œκ³΅ν•©λ‹ˆλ‹€. + * + * @example + * ```tsx + * + * + * + * 메뉴 + * + * + * 메뉴 ν•­λͺ© 1 + * 메뉴 ν•­λͺ© 2 + * + * + * ``` + */ + export const Dropdown = (props: IDropdownProps) => { return (