From c87ad1642692e55039006fb5217fc55ec184811e Mon Sep 17 00:00:00 2001 From: Chamsol Kim Date: Mon, 11 Aug 2025 12:47:09 +0900 Subject: [PATCH 1/9] =?UTF-8?q?feat=20[#5]=20`TextField`=20component=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84=20(text=20input)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit `TextField`는 `TEXT_FIELD_TYPE`을 설정해서 text input 방식 또는 dropdown select 방식 중 하나로 사용 가능 --- src/components/text-field/dropdown-input.jsx | 3 ++ src/components/text-field/input-styles.js | 27 ++++++++++++ src/components/text-field/text-field-type.js | 6 +++ src/components/text-field/text-field.jsx | 34 +++++++++++++++ src/components/text-field/text-input.jsx | 45 ++++++++++++++++++++ src/pages/test-page.jsx | 16 +++++++ 6 files changed, 131 insertions(+) create mode 100644 src/components/text-field/dropdown-input.jsx create mode 100644 src/components/text-field/input-styles.js create mode 100644 src/components/text-field/text-field-type.js create mode 100644 src/components/text-field/text-field.jsx create mode 100644 src/components/text-field/text-input.jsx diff --git a/src/components/text-field/dropdown-input.jsx b/src/components/text-field/dropdown-input.jsx new file mode 100644 index 0000000..40d7f53 --- /dev/null +++ b/src/components/text-field/dropdown-input.jsx @@ -0,0 +1,3 @@ +function DropdownInput() {} + +export default DropdownInput; diff --git a/src/components/text-field/input-styles.js b/src/components/text-field/input-styles.js new file mode 100644 index 0000000..24b7b4c --- /dev/null +++ b/src/components/text-field/input-styles.js @@ -0,0 +1,27 @@ +import { css } from "styled-components"; +import Colors from "../color/colors"; + +const INPUT_STYLES = Object.freeze({ + font: css` + font-size: 16px; + font-weight: 400; + line-height: 26px; + `, + borderColor: { + normal: (error) => (error ? Colors.error : Colors.gray(300)), + hover: (error) => (error ? Colors.error : Colors.gray(500)), + active: (error) => (error ? Colors.error : Colors.gray(700)), + focus: (error) => (error ? Colors.error : Colors.gray(500)), + disabled: Colors.gray(300), + }, + textColor: { + normal: Colors.gray(900), + placeholder: Colors.gray(500), + }, + backgroundColor: { + normal: "#ffffff", + disabled: Colors.gray(100), + }, +}); + +export default INPUT_STYLES; diff --git a/src/components/text-field/text-field-type.js b/src/components/text-field/text-field-type.js new file mode 100644 index 0000000..80da361 --- /dev/null +++ b/src/components/text-field/text-field-type.js @@ -0,0 +1,6 @@ +const TEXT_FIELD_TYPE = Object.freeze({ + input: "input", + dropdown: "dropdown", +}); + +export default TEXT_FIELD_TYPE; diff --git a/src/components/text-field/text-field.jsx b/src/components/text-field/text-field.jsx new file mode 100644 index 0000000..d36375f --- /dev/null +++ b/src/components/text-field/text-field.jsx @@ -0,0 +1,34 @@ +import styled from "styled-components"; +import Colors from "../color/colors"; +import DropdownInput from "./dropdown-input"; +import TEXT_FIELD_TYPE from "./text-field-type"; +import TextInput from "./text-input"; + +const StyledInputTextField = styled.div` + display: flex; + flex-direction: column; + gap: 4px; +`; + +const ErrorMessage = styled.p` + margin: 0; + font-size: 12px; + font-weight: 400; + line-height: 18px; + color: ${Colors.error}; +`; + +function InputTextField({ type, error, ...props }) { + return ( + + {type === TEXT_FIELD_TYPE.input ? ( + + ) : ( + + )} + {error && {error}} + + ); +} + +export default InputTextField; diff --git a/src/components/text-field/text-input.jsx b/src/components/text-field/text-input.jsx new file mode 100644 index 0000000..c02badd --- /dev/null +++ b/src/components/text-field/text-input.jsx @@ -0,0 +1,45 @@ +import styled from "styled-components"; +import INPUT_STYLES from "./input-styles"; + +const StyledTextInput = styled.input` + background-color: ${INPUT_STYLES.backgroundColor.normal}; + outline: none; + border: none; + border-radius: 8px; + box-shadow: 0 0 0 1px + ${({ $error }) => INPUT_STYLES.borderColor.normal($error)} inset; + padding: 12px 16px; + ${INPUT_STYLES.font} + color: ${INPUT_STYLES.textColor.normal}; + + &::placeholder { + ${INPUT_STYLES.font} + color: ${INPUT_STYLES.textColor.placeholder}; + } + + &:hover { + box-shadow: 0 0 0 1px + ${({ $error }) => INPUT_STYLES.borderColor.hover($error)} inset; + } + + &:active { + box-shadow: 0 0 0 2px + ${({ $error }) => INPUT_STYLES.borderColor.active($error)} inset; + } + + &:focus { + box-shadow: 0 0 0 2px + ${({ $error }) => INPUT_STYLES.borderColor.focus($error)} inset; + } + + &:disabled { + background-color: ${INPUT_STYLES.backgroundColor.disabled}; + box-shadow: 0 0 0 1px ${INPUT_STYLES.borderColor.disabled} inset; + } +`; + +function TextInput({ error, ...props }) { + return ; +} + +export default TextInput; diff --git a/src/pages/test-page.jsx b/src/pages/test-page.jsx index 705a521..cdc1c56 100644 --- a/src/pages/test-page.jsx +++ b/src/pages/test-page.jsx @@ -11,6 +11,8 @@ import { } from "../components/button/button"; import BUTTON_SIZE from "../components/button/button-size"; import ToggleButton from "../components/button/toggle-button"; +import TextField from "../components/text-field/text-field"; +import TEXT_FIELD_TYPE from "../components/text-field/text-field-type"; function TestPage() { return ( @@ -103,6 +105,20 @@ function TestPage() { +
+ + + +
); } From f44f7b0c1746654af8c276fb6e820f62aa4b9685 Mon Sep 17 00:00:00 2001 From: Chamsol Kim Date: Mon, 11 Aug 2025 13:04:39 +0900 Subject: [PATCH 2/9] =?UTF-8?q?feat=20[#5]=20`TextField`=20component=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84=20(dropdown=20input)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/ic-chevron-down.svg | 3 + src/assets/ic-chevron-up.svg | 3 + src/components/text-field/dropdown-input.jsx | 79 +++++++++++++++++++- src/components/text-field/text-field.jsx | 2 +- src/pages/test-page.jsx | 14 ++++ 5 files changed, 99 insertions(+), 2 deletions(-) create mode 100644 src/assets/ic-chevron-down.svg create mode 100644 src/assets/ic-chevron-up.svg diff --git a/src/assets/ic-chevron-down.svg b/src/assets/ic-chevron-down.svg new file mode 100644 index 0000000..412d030 --- /dev/null +++ b/src/assets/ic-chevron-down.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/ic-chevron-up.svg b/src/assets/ic-chevron-up.svg new file mode 100644 index 0000000..536315f --- /dev/null +++ b/src/assets/ic-chevron-up.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/text-field/dropdown-input.jsx b/src/components/text-field/dropdown-input.jsx index 40d7f53..e0f1d13 100644 --- a/src/components/text-field/dropdown-input.jsx +++ b/src/components/text-field/dropdown-input.jsx @@ -1,3 +1,80 @@ -function DropdownInput() {} +import styled from "styled-components"; +import arrowDownImg from "../../assets/ic-chevron-down.svg"; +import INPUT_STYLES from "./input-styles"; + +const StyledDropdownInput = styled.button` + background-color: ${INPUT_STYLES.backgroundColor.normal}; + outline: none; + border: none; + border-radius: 8px; + box-shadow: 0 0 0 1px + ${({ $error }) => INPUT_STYLES.borderColor.normal($error)} inset; + padding: 12px 16px; + min-width: 320px; + display: flex; + align-items: center; + gap: 8px; + cursor: pointer; + + &:hover { + box-shadow: 0 0 0 1px + ${({ $error }) => INPUT_STYLES.borderColor.hover($error)} inset; + } + + &:active { + box-shadow: 0 0 0 2px + ${({ $error }) => INPUT_STYLES.borderColor.active($error)} inset; + } + + &:focus { + box-shadow: 0 0 0 2px + ${({ $error }) => INPUT_STYLES.borderColor.focus($error)} inset; + } + + &:disabled { + background-color: ${INPUT_STYLES.backgroundColor.disabled}; + box-shadow: 0 0 0 1px ${INPUT_STYLES.borderColor.disabled} inset; + cursor: default; + } +`; + +const PlaceholderText = styled.span` + ${INPUT_STYLES.font} + color: ${INPUT_STYLES.textColor.placeholder}; + flex-grow: 1; + text-align: left; +`; + +const InputText = styled.span` + ${INPUT_STYLES.font} + color: ${INPUT_STYLES.textColor.normal}; + flex-grow: 1; + text-align: left; +`; + +const Icon = styled.div` + width: 16px; + height: 16px; + + img { + width: 100%; + height: 100%; + } +`; + +function DropdownInput({ error, placeholder, value, disabled }) { + return ( + + {value ? ( + {value} + ) : ( + {placeholder} + )} + + Dropdown 화살표 + + + ); +} export default DropdownInput; diff --git a/src/components/text-field/text-field.jsx b/src/components/text-field/text-field.jsx index d36375f..831214c 100644 --- a/src/components/text-field/text-field.jsx +++ b/src/components/text-field/text-field.jsx @@ -24,7 +24,7 @@ function InputTextField({ type, error, ...props }) { {type === TEXT_FIELD_TYPE.input ? ( ) : ( - + )} {error && {error}} diff --git a/src/pages/test-page.jsx b/src/pages/test-page.jsx index cdc1c56..258c0b4 100644 --- a/src/pages/test-page.jsx +++ b/src/pages/test-page.jsx @@ -119,6 +119,20 @@ function TestPage() { error="Error Message" /> +
+ + + +
); } From baa8f6d3d02352a094e57b89d2008fd9e5c8cc65 Mon Sep 17 00:00:00 2001 From: Chamsol Kim Date: Mon, 11 Aug 2025 13:45:16 +0900 Subject: [PATCH 3/9] =?UTF-8?q?feat=20[#5]=20Dropdown=20text=20field?= =?UTF-8?q?=EC=97=90=20interaction=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Dropdown type의 `TextField`를 선택하면 dropdown 표시 - Dropdown의 option 1개를 클릭하면 해당 `TextField`의 `value`가 선택된 값으로 교체 --- src/components/text-field/dropdown-input.jsx | 86 +++++++++++++++++--- src/pages/test-page.jsx | 26 +++++- 2 files changed, 98 insertions(+), 14 deletions(-) diff --git a/src/components/text-field/dropdown-input.jsx b/src/components/text-field/dropdown-input.jsx index e0f1d13..7b8fae8 100644 --- a/src/components/text-field/dropdown-input.jsx +++ b/src/components/text-field/dropdown-input.jsx @@ -1,10 +1,11 @@ +import { useState } from "react"; import styled from "styled-components"; import arrowDownImg from "../../assets/ic-chevron-down.svg"; +import Colors from "../color/colors"; import INPUT_STYLES from "./input-styles"; const StyledDropdownInput = styled.button` background-color: ${INPUT_STYLES.backgroundColor.normal}; - outline: none; border: none; border-radius: 8px; box-shadow: 0 0 0 1px @@ -15,6 +16,7 @@ const StyledDropdownInput = styled.button` align-items: center; gap: 8px; cursor: pointer; + position: relative; &:hover { box-shadow: 0 0 0 1px @@ -62,18 +64,78 @@ const Icon = styled.div` } `; -function DropdownInput({ error, placeholder, value, disabled }) { +const Dropdown = styled.div` + background-color: white; + box-shadow: 0 0 0 1px ${Colors.gray(300)} inset, + 0 2px 12px 0 rgba(0, 0, 0, 0.08); + border-radius: 8px; + display: flex; + flex-direction: column; + align-items: center; + padding: 10px 0; + position: absolute; + top: calc(100% + 8px); + left: 0; + right: 0; +`; + +const DropdownOption = styled.div` + width: calc(100% - 2px); + border: none; + background: none; + padding: 12px 16px; + font-size: 16px; + font-weight: 400; + line-height: 26px; + color: ${Colors.gray(900)}; + cursor: pointer; + + &:hover { + background-color: ${Colors.gray(100)}; + } +`; + +function DropdownInput({ + error, + placeholder, + value, + options, + disabled, + onSelect, +}) { + const [isOpen, setIsOpen] = useState(false); + + const handleInputClick = (event) => { + setIsOpen(!isOpen); + onSelect(event.target.textContent); + }; + return ( - - {value ? ( - {value} - ) : ( - {placeholder} - )} - - Dropdown 화살표 - - + <> + + {value ? ( + {value} + ) : ( + {placeholder} + )} + + Dropdown 화살표 + + {isOpen && ( + + {options.map((option, index) => ( + + {option} + + ))} + + )} + + ); } diff --git a/src/pages/test-page.jsx b/src/pages/test-page.jsx index 258c0b4..0300ce8 100644 --- a/src/pages/test-page.jsx +++ b/src/pages/test-page.jsx @@ -1,3 +1,4 @@ +import { useState } from "react"; import smileAddImg from "../assets/ic-face-smile-add.svg"; import Badge from "../components/badge/badge"; import BADGE_TYPE from "../components/badge/badge-type"; @@ -15,6 +16,17 @@ import TextField from "../components/text-field/text-field"; import TEXT_FIELD_TYPE from "../components/text-field/text-field-type"; function TestPage() { + const [option1, setOption1] = useState(); + const [option2, setOption2] = useState(); + const [dropdown2Error, setDropdown2Error] = useState("Error Message"); + const handleDropdownSelect1 = (option) => { + setOption1(option); + }; + const handleDropdownSelect2 = (option) => { + setOption2(option); + setDropdown2Error(null); + }; + return (
- +
From d2fa0106a92bdefd82f45c06233ce3e774f5d1f8 Mon Sep 17 00:00:00 2001 From: Chamsol Kim Date: Mon, 11 Aug 2025 13:46:14 +0900 Subject: [PATCH 4/9] =?UTF-8?q?feat=20[#5]=20Dropdown=EC=9D=B4=20=EC=97=B4?= =?UTF-8?q?=EB=A0=B8=EC=9D=84=20=EB=95=8C=20=ED=99=94=EC=82=B4=ED=91=9C=20?= =?UTF-8?q?=EB=B0=A9=ED=96=A5=20=ED=9A=8C=EC=A0=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/text-field/dropdown-input.jsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/text-field/dropdown-input.jsx b/src/components/text-field/dropdown-input.jsx index 7b8fae8..f706308 100644 --- a/src/components/text-field/dropdown-input.jsx +++ b/src/components/text-field/dropdown-input.jsx @@ -1,6 +1,7 @@ import { useState } from "react"; import styled from "styled-components"; import arrowDownImg from "../../assets/ic-chevron-down.svg"; +import arrowUpImg from "../../assets/ic-chevron-up.svg"; import Colors from "../color/colors"; import INPUT_STYLES from "./input-styles"; @@ -123,7 +124,7 @@ function DropdownInput({ {placeholder} )} - Dropdown 화살표 + Dropdown 화살표 {isOpen && ( From 2e6cf98f0283280097035584515d7e4136d6b095 Mon Sep 17 00:00:00 2001 From: Chamsol Kim Date: Mon, 11 Aug 2025 13:48:19 +0900 Subject: [PATCH 5/9] =?UTF-8?q?refactor=20[#5]=20`DropdownInput`=EC=97=90?= =?UTF-8?q?=EC=84=9C=20=EA=B8=B0=EB=B3=B8=20props=EB=8A=94=20spread=20?= =?UTF-8?q?=EB=AC=B8=EB=B2=95=EC=9C=BC=EB=A1=9C=20=EC=A7=81=EC=A0=91=20?= =?UTF-8?q?=EC=A0=84=EB=8B=AC=ED=95=98=EB=8F=84=EB=A1=9D=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/text-field/dropdown-input.jsx | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/src/components/text-field/dropdown-input.jsx b/src/components/text-field/dropdown-input.jsx index f706308..7d69d91 100644 --- a/src/components/text-field/dropdown-input.jsx +++ b/src/components/text-field/dropdown-input.jsx @@ -101,8 +101,8 @@ function DropdownInput({ placeholder, value, options, - disabled, onSelect, + ...props }) { const [isOpen, setIsOpen] = useState(false); @@ -113,11 +113,7 @@ function DropdownInput({ return ( <> - + {value ? ( {value} ) : ( From 441d45415c60e1562d8914cdf7d68fcc08c6ed5c Mon Sep 17 00:00:00 2001 From: Chamsol Kim Date: Mon, 11 Aug 2025 19:20:20 +0900 Subject: [PATCH 6/9] =?UTF-8?q?fix=20[#5]=20`TextInput`=EC=9D=84=20?= =?UTF-8?q?=EC=82=AC=EC=9A=A9=ED=95=A0=20=EB=95=8C=20=EC=B5=9C=EC=86=8C=20?= =?UTF-8?q?=EB=84=88=EB=B9=84=20=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/text-field/text-input.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/text-field/text-input.jsx b/src/components/text-field/text-input.jsx index c02badd..be94af4 100644 --- a/src/components/text-field/text-input.jsx +++ b/src/components/text-field/text-input.jsx @@ -11,6 +11,7 @@ const StyledTextInput = styled.input` padding: 12px 16px; ${INPUT_STYLES.font} color: ${INPUT_STYLES.textColor.normal}; + min-width: 320px; &::placeholder { ${INPUT_STYLES.font} From 165f79dffcc887ba936a318425f488f106d0491c Mon Sep 17 00:00:00 2001 From: Chamsol Kim Date: Tue, 12 Aug 2025 10:29:04 +0900 Subject: [PATCH 7/9] =?UTF-8?q?feat=20[#5]=20Dropdown=20text=20field?= =?UTF-8?q?=EC=97=90=EC=84=9C=20dropdown=20=EB=B0=94=EA=B9=A5=EC=9D=84=20?= =?UTF-8?q?=ED=81=B4=EB=A6=AD=ED=95=B4=EC=84=9C=20dropdown=20=EB=8B=AB?= =?UTF-8?q?=EA=B8=B0=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit React의 portal 개념을 활용해서 구현합니다. --- index.html | 1 + src/app.jsx | 7 +- .../dropdown-input/dropdown-context.js | 5 + .../{ => dropdown-input}/dropdown-input.jsx | 152 +++++++++--------- .../dropdown-input/dropdown-option.jsx | 20 +++ .../dropdown-input/dropdown-provider.jsx | 10 ++ .../text-field/dropdown-input/dropdown.jsx | 66 ++++++++ src/components/text-field/text-field.jsx | 8 +- .../{ => text-input}/text-input.jsx | 2 +- src/hooks/dropdown/use-dropdown.jsx | 54 +++++++ src/pages/test-page.jsx | 3 + 11 files changed, 249 insertions(+), 79 deletions(-) create mode 100644 src/components/text-field/dropdown-input/dropdown-context.js rename src/components/text-field/{ => dropdown-input}/dropdown-input.jsx (53%) create mode 100644 src/components/text-field/dropdown-input/dropdown-option.jsx create mode 100644 src/components/text-field/dropdown-input/dropdown-provider.jsx create mode 100644 src/components/text-field/dropdown-input/dropdown.jsx rename src/components/text-field/{ => text-input}/text-input.jsx (96%) create mode 100644 src/hooks/dropdown/use-dropdown.jsx diff --git a/index.html b/index.html index 3c20db6..e57d567 100644 --- a/index.html +++ b/index.html @@ -15,6 +15,7 @@
+ diff --git a/src/app.jsx b/src/app.jsx index c2cf85c..81ae363 100644 --- a/src/app.jsx +++ b/src/app.jsx @@ -1,7 +1,12 @@ +import DropdownProvider from "./components/text-field/dropdown-input/dropdown-provider"; import TestPage from "./pages/test-page"; function App() { - return ; + return ( + + + + ); } export default App; diff --git a/src/components/text-field/dropdown-input/dropdown-context.js b/src/components/text-field/dropdown-input/dropdown-context.js new file mode 100644 index 0000000..34a3d95 --- /dev/null +++ b/src/components/text-field/dropdown-input/dropdown-context.js @@ -0,0 +1,5 @@ +import { createContext } from "react"; + +const DropdownContext = createContext(null); + +export default DropdownContext; diff --git a/src/components/text-field/dropdown-input.jsx b/src/components/text-field/dropdown-input/dropdown-input.jsx similarity index 53% rename from src/components/text-field/dropdown-input.jsx rename to src/components/text-field/dropdown-input/dropdown-input.jsx index 7d69d91..09c937b 100644 --- a/src/components/text-field/dropdown-input.jsx +++ b/src/components/text-field/dropdown-input/dropdown-input.jsx @@ -1,9 +1,42 @@ -import { useState } from "react"; import styled from "styled-components"; -import arrowDownImg from "../../assets/ic-chevron-down.svg"; -import arrowUpImg from "../../assets/ic-chevron-up.svg"; -import Colors from "../color/colors"; -import INPUT_STYLES from "./input-styles"; +import arrowDownImg from "../../../assets/ic-chevron-down.svg"; +import arrowUpImg from "../../../assets/ic-chevron-up.svg"; +import { useDropdown } from "../../../hooks/dropdown/use-dropdown"; +import INPUT_STYLES from "../input-styles"; +import Dropdown from "./dropdown"; +import DropdownOption from "./dropdown-option"; + +const PlaceholderText = styled.span` + ${INPUT_STYLES.font} + color: ${INPUT_STYLES.textColor.placeholder}; + flex-grow: 1; + text-align: left; +`; + +const InputText = styled.span` + ${INPUT_STYLES.font} + color: ${INPUT_STYLES.textColor.normal}; + flex-grow: 1; + text-align: left; +`; + +function Text({ value, placeholder }) { + return value ? ( + {value} + ) : ( + {placeholder} + ); +} + +const Icon = styled.div` + width: 16px; + height: 16px; + + img { + width: 100%; + height: 100%; + } +`; const StyledDropdownInput = styled.button` background-color: ${INPUT_STYLES.backgroundColor.normal}; @@ -41,62 +74,8 @@ const StyledDropdownInput = styled.button` } `; -const PlaceholderText = styled.span` - ${INPUT_STYLES.font} - color: ${INPUT_STYLES.textColor.placeholder}; - flex-grow: 1; - text-align: left; -`; - -const InputText = styled.span` - ${INPUT_STYLES.font} - color: ${INPUT_STYLES.textColor.normal}; - flex-grow: 1; - text-align: left; -`; - -const Icon = styled.div` - width: 16px; - height: 16px; - - img { - width: 100%; - height: 100%; - } -`; - -const Dropdown = styled.div` - background-color: white; - box-shadow: 0 0 0 1px ${Colors.gray(300)} inset, - 0 2px 12px 0 rgba(0, 0, 0, 0.08); - border-radius: 8px; - display: flex; - flex-direction: column; - align-items: center; - padding: 10px 0; - position: absolute; - top: calc(100% + 8px); - left: 0; - right: 0; -`; - -const DropdownOption = styled.div` - width: calc(100% - 2px); - border: none; - background: none; - padding: 12px 16px; - font-size: 16px; - font-weight: 400; - line-height: 26px; - color: ${Colors.gray(900)}; - cursor: pointer; - - &:hover { - background-color: ${Colors.gray(100)}; - } -`; - function DropdownInput({ + dropdownId, error, placeholder, value, @@ -104,28 +83,55 @@ function DropdownInput({ onSelect, ...props }) { - const [isOpen, setIsOpen] = useState(false); + const { + targetRef, + dropdownRect, + showsDropdown, + setShowsDropdown, + handleTargetClick, + } = useDropdown({ + id: dropdownId, + type: "dropdown-input", + }); + + const handleInputClick = () => { + handleTargetClick(!showsDropdown); + }; - const handleInputClick = (event) => { - setIsOpen(!isOpen); + const handleOptionClick = (event) => { onSelect(event.target.textContent); }; + const handleDropdownClose = () => { + setShowsDropdown(false); + }; + return ( <> - - {value ? ( - {value} - ) : ( - {placeholder} - )} + + - Dropdown 화살표 + Dropdown 화살표 - {isOpen && ( - + {showsDropdown && ( + {options.map((option, index) => ( - + {option} ))} diff --git a/src/components/text-field/dropdown-input/dropdown-option.jsx b/src/components/text-field/dropdown-input/dropdown-option.jsx new file mode 100644 index 0000000..6619019 --- /dev/null +++ b/src/components/text-field/dropdown-input/dropdown-option.jsx @@ -0,0 +1,20 @@ +import styled from "styled-components"; +import Colors from "../../color/colors"; + +const DropdownOption = styled.div` + width: calc(100% - 2px); + border: none; + background: none; + padding: 12px 16px; + font-size: 16px; + font-weight: 400; + line-height: 26px; + color: ${Colors.gray(900)}; + cursor: pointer; + + &:hover { + background-color: ${Colors.gray(100)}; + } +`; + +export default DropdownOption; diff --git a/src/components/text-field/dropdown-input/dropdown-provider.jsx b/src/components/text-field/dropdown-input/dropdown-provider.jsx new file mode 100644 index 0000000..f74b577 --- /dev/null +++ b/src/components/text-field/dropdown-input/dropdown-provider.jsx @@ -0,0 +1,10 @@ +import { useState } from "react"; +import DropdownContext from "./dropdown-context"; + +function DropdownProvider({ children }) { + const [dropdownState, setDropdownState] = useState({}); + const value = { dropdownState, setDropdownState }; + return {children}; +} + +export default DropdownProvider; diff --git a/src/components/text-field/dropdown-input/dropdown.jsx b/src/components/text-field/dropdown-input/dropdown.jsx new file mode 100644 index 0000000..188df8a --- /dev/null +++ b/src/components/text-field/dropdown-input/dropdown.jsx @@ -0,0 +1,66 @@ +import { createPortal } from "react-dom"; +import styled from "styled-components"; +import Colors from "../../color/colors"; + +const BACKDROP_CLASS_NAME = "dropdown-backdrop"; + +const DropdownContainer = styled.div` + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 111; + + & > *:not(.${BACKDROP_CLASS_NAME}) { + z-index: 114; + } +`; + +const DropdownBackdrop = styled(DropdownContainer)` + z-index: 112; + position: fixed; +`; + +const DropdownContent = styled(DropdownContainer)` + z-index: 113; + position: relative; + height: 100%; +`; + +const StyledDropdown = styled.div` + background-color: white; + box-shadow: 0 0 0 1px ${Colors.gray(300)} inset, + 0 2px 12px 0 rgba(0, 0, 0, 0.08); + border-radius: 8px; + display: flex; + flex-direction: column; + align-items: center; + padding: 10px 0; + position: absolute; + top: ${({ $origin }) => $origin.y}px; + left: ${({ $origin }) => $origin.x}px; + width: ${({ $size }) => $size.width}px; +`; + +function Dropdown({ children, origin, size, onClose }) { + const DropdownPortal = ({ children }) => { + return createPortal(children, document.getElementById("dropdown")); + }; + + return ( + + + + + + {children} + + + + + + ); +} + +export default Dropdown; diff --git a/src/components/text-field/text-field.jsx b/src/components/text-field/text-field.jsx index 831214c..c97832d 100644 --- a/src/components/text-field/text-field.jsx +++ b/src/components/text-field/text-field.jsx @@ -1,8 +1,8 @@ import styled from "styled-components"; import Colors from "../color/colors"; -import DropdownInput from "./dropdown-input"; +import DropdownInput from "./dropdown-input/dropdown-input"; import TEXT_FIELD_TYPE from "./text-field-type"; -import TextInput from "./text-input"; +import TextInput from "./text-input/text-input"; const StyledInputTextField = styled.div` display: flex; @@ -18,13 +18,13 @@ const ErrorMessage = styled.p` color: ${Colors.error}; `; -function InputTextField({ type, error, ...props }) { +function InputTextField({ type, error, dropdownId, ...props }) { return ( {type === TEXT_FIELD_TYPE.input ? ( ) : ( - + )} {error && {error}} diff --git a/src/components/text-field/text-input.jsx b/src/components/text-field/text-input/text-input.jsx similarity index 96% rename from src/components/text-field/text-input.jsx rename to src/components/text-field/text-input/text-input.jsx index be94af4..5687c6e 100644 --- a/src/components/text-field/text-input.jsx +++ b/src/components/text-field/text-input/text-input.jsx @@ -1,5 +1,5 @@ import styled from "styled-components"; -import INPUT_STYLES from "./input-styles"; +import INPUT_STYLES from "../input-styles"; const StyledTextInput = styled.input` background-color: ${INPUT_STYLES.backgroundColor.normal}; diff --git a/src/hooks/dropdown/use-dropdown.jsx b/src/hooks/dropdown/use-dropdown.jsx new file mode 100644 index 0000000..cdc06af --- /dev/null +++ b/src/hooks/dropdown/use-dropdown.jsx @@ -0,0 +1,54 @@ +import { useContext, useRef, useState } from "react"; +import DropdownContext from "../../components/text-field/dropdown-input/dropdown-context"; + +function makeRect({ x, y, width } = { x: 0, y: 0, width: 0 }) { + return { + origin: { x, y }, + size: { width }, + }; +} + +function calculateDropdownRect(target) { + if (!target) { + return makeRect(); + } + + const targetRect = target.getBoundingClientRect(); + const dropdownRect = makeRect({ + x: targetRect.left, + y: targetRect.bottom + 8, + width: targetRect.width, + }); + + return dropdownRect; +} + +function useDropdown({ id, type }) { + const { dropdownState, setDropdownState } = useContext(DropdownContext); + const [dropdownRect, setDropdownRect] = useState(); + + const targetRef = useRef(); + + const key = `${type}_${id}`; + const showsDropdown = dropdownState[key] ?? false; + + const setShowsDropdown = (shows) => { + setDropdownState((prev) => ({ ...prev, [key]: shows })); + }; + + const handleTargetClick = (shows) => { + const rect = calculateDropdownRect(targetRef.current); + setShowsDropdown(shows); + setDropdownRect(rect); + }; + + return { + targetRef, + dropdownRect, + showsDropdown, + setShowsDropdown, + handleTargetClick, + }; +} + +export { useDropdown }; diff --git a/src/pages/test-page.jsx b/src/pages/test-page.jsx index 0300ce8..0d34eee 100644 --- a/src/pages/test-page.jsx +++ b/src/pages/test-page.jsx @@ -134,6 +134,7 @@ function TestPage() {
Date: Tue, 12 Aug 2025 16:35:43 +0900 Subject: [PATCH 8/9] =?UTF-8?q?fix=20[]=20React=20router=20package=20?= =?UTF-8?q?=EC=84=A4=EC=B9=98=20/=20TestPage=EC=99=80=20MessagePage=20rout?= =?UTF-8?q?e=20=EB=B6=84=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit #12 작업내용 merge 및 conflict 수정 --- package-lock.json | 318 +++++++++++++++++++++++++++++++++++++ package.json | 2 + src/api/axios-instance.js | 9 ++ src/app.jsx | 8 +- src/pages/message-list.jsx | 137 ++++++++++++++++ src/pages/test-page.jsx | 1 + 6 files changed, 474 insertions(+), 1 deletion(-) create mode 100644 src/api/axios-instance.js create mode 100644 src/pages/message-list.jsx diff --git a/package-lock.json b/package-lock.json index 6237549..a13efef 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,8 +8,10 @@ "name": "rolling", "version": "0.0.0", "dependencies": { + "axios": "^1.11.0", "react": "^19.1.1", "react-dom": "^19.1.1", + "react-router": "^7.8.0", "styled-components": "^6.1.19" }, "devDependencies": { @@ -1498,6 +1500,23 @@ "dev": true, "license": "Python-2.0" }, + "node_modules/asynckit": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", + "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==", + "license": "MIT" + }, + "node_modules/axios": { + "version": "1.11.0", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.11.0.tgz", + "integrity": "sha512-1Lx3WLFQWm3ooKDYZD1eXmoGO9fxYQjrycfHFC8P0sCfQVXyROp0p9PFWBehewBOdCwHc+f/b8I0fMto5eSfwA==", + "license": "MIT", + "dependencies": { + "follow-redirects": "^1.15.6", + "form-data": "^4.0.4", + "proxy-from-env": "^1.1.0" + } + }, "node_modules/balanced-match": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", @@ -1549,6 +1568,19 @@ "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7" } }, + "node_modules/call-bind-apply-helpers": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz", + "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==", + "license": "MIT", + "dependencies": { + "es-errors": "^1.3.0", + "function-bind": "^1.1.2" + }, + "engines": { + "node": ">= 0.4" + } + }, "node_modules/callsites": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz", @@ -1626,6 +1658,18 @@ "dev": true, "license": "MIT" }, + "node_modules/combined-stream": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", + "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==", + "license": "MIT", + "dependencies": { + "delayed-stream": "~1.0.0" + }, + "engines": { + "node": ">= 0.8" + } + }, "node_modules/concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", @@ -1640,6 +1684,15 @@ "dev": true, "license": "MIT" }, + "node_modules/cookie": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz", + "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==", + "license": "MIT", + "engines": { + "node": ">=18" + } + }, "node_modules/cross-spawn": { "version": "7.0.6", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz", @@ -1706,6 +1759,29 @@ "dev": true, "license": "MIT" }, + "node_modules/delayed-stream": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", + "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==", + "license": "MIT", + "engines": { + "node": ">=0.4.0" + } + }, + "node_modules/dunder-proto": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz", + "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==", + "license": "MIT", + "dependencies": { + "call-bind-apply-helpers": "^1.0.1", + "es-errors": "^1.3.0", + "gopd": "^1.2.0" + }, + "engines": { + "node": ">= 0.4" + } + }, "node_modules/electron-to-chromium": { "version": "1.5.199", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.199.tgz", @@ -1713,6 +1789,51 @@ "dev": true, "license": "ISC" }, + "node_modules/es-define-property": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz", + "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==", + "license": "MIT", + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/es-errors": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz", + "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==", + "license": "MIT", + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/es-object-atoms": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz", + "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==", + "license": "MIT", + "dependencies": { + "es-errors": "^1.3.0" + }, + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/es-set-tostringtag": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz", + "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==", + "license": "MIT", + "dependencies": { + "es-errors": "^1.3.0", + "get-intrinsic": "^1.2.6", + "has-tostringtag": "^1.0.2", + "hasown": "^2.0.2" + }, + "engines": { + "node": ">= 0.4" + } + }, "node_modules/esbuild": { "version": "0.25.8", "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.8.tgz", @@ -2043,6 +2164,42 @@ "dev": true, "license": "ISC" }, + "node_modules/follow-redirects": { + "version": "1.15.11", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.11.tgz", + "integrity": "sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==", + "funding": [ + { + "type": "individual", + "url": "https://github.com/sponsors/RubenVerborgh" + } + ], + "license": "MIT", + "engines": { + "node": ">=4.0" + }, + "peerDependenciesMeta": { + "debug": { + "optional": true + } + } + }, + "node_modules/form-data": { + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.4.tgz", + "integrity": "sha512-KrGhL9Q4zjj0kiUt5OO4Mr/A/jlI2jDYs5eHBpYHPcBEVSiipAvn2Ko2HnPe20rmcuuvMHNdZFp+4IlGTMF0Ow==", + "license": "MIT", + "dependencies": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "es-set-tostringtag": "^2.1.0", + "hasown": "^2.0.2", + "mime-types": "^2.1.12" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/fsevents": { "version": "2.3.3", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", @@ -2058,6 +2215,15 @@ "node": "^8.16.0 || ^10.6.0 || >=11.0.0" } }, + "node_modules/function-bind": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz", + "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==", + "license": "MIT", + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/gensync": { "version": "1.0.0-beta.2", "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz", @@ -2068,6 +2234,43 @@ "node": ">=6.9.0" } }, + "node_modules/get-intrinsic": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz", + "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==", + "license": "MIT", + "dependencies": { + "call-bind-apply-helpers": "^1.0.2", + "es-define-property": "^1.0.1", + "es-errors": "^1.3.0", + "es-object-atoms": "^1.1.1", + "function-bind": "^1.1.2", + "get-proto": "^1.0.1", + "gopd": "^1.2.0", + "has-symbols": "^1.1.0", + "hasown": "^2.0.2", + "math-intrinsics": "^1.1.0" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/get-proto": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz", + "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==", + "license": "MIT", + "dependencies": { + "dunder-proto": "^1.0.1", + "es-object-atoms": "^1.0.0" + }, + "engines": { + "node": ">= 0.4" + } + }, "node_modules/glob-parent": { "version": "6.0.2", "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz", @@ -2094,6 +2297,18 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/gopd": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz", + "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==", + "license": "MIT", + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/has-flag": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", @@ -2104,6 +2319,45 @@ "node": ">=8" } }, + "node_modules/has-symbols": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz", + "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==", + "license": "MIT", + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/has-tostringtag": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz", + "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==", + "license": "MIT", + "dependencies": { + "has-symbols": "^1.0.3" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/hasown": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz", + "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==", + "license": "MIT", + "dependencies": { + "function-bind": "^1.1.2" + }, + "engines": { + "node": ">= 0.4" + } + }, "node_modules/ignore": { "version": "5.3.2", "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz", @@ -2295,6 +2549,36 @@ "yallist": "^3.0.2" } }, + "node_modules/math-intrinsics": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz", + "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==", + "license": "MIT", + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/mime-db": { + "version": "1.52.0", + "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz", + "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==", + "license": "MIT", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/mime-types": { + "version": "2.1.35", + "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz", + "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==", + "license": "MIT", + "dependencies": { + "mime-db": "1.52.0" + }, + "engines": { + "node": ">= 0.6" + } + }, "node_modules/minimatch": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", @@ -2494,6 +2778,12 @@ "node": ">= 0.8.0" } }, + "node_modules/proxy-from-env": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", + "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==", + "license": "MIT" + }, "node_modules/punycode": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz", @@ -2535,6 +2825,28 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "7.8.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.8.0.tgz", + "integrity": "sha512-r15M3+LHKgM4SOapNmsH3smAizWds1vJ0Z9C4mWaKnT9/wD7+d/0jYcj6LmOvonkrO4Rgdyp4KQ/29gWN2i1eg==", + "license": "MIT", + "dependencies": { + "cookie": "^1.0.1", + "set-cookie-parser": "^2.6.0" + }, + "engines": { + "node": ">=20.0.0" + }, + "peerDependencies": { + "react": ">=18", + "react-dom": ">=18" + }, + "peerDependenciesMeta": { + "react-dom": { + "optional": true + } + } + }, "node_modules/resolve-from": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", @@ -2601,6 +2913,12 @@ "semver": "bin/semver.js" } }, + "node_modules/set-cookie-parser": { + "version": "2.7.1", + "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz", + "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==", + "license": "MIT" + }, "node_modules/shallowequal": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz", diff --git a/package.json b/package.json index c3553fb..72906b1 100644 --- a/package.json +++ b/package.json @@ -10,8 +10,10 @@ "preview": "vite preview" }, "dependencies": { + "axios": "^1.11.0", "react": "^19.1.1", "react-dom": "^19.1.1", + "react-router": "^7.8.0", "styled-components": "^6.1.19" }, "devDependencies": { diff --git a/src/api/axios-instance.js b/src/api/axios-instance.js new file mode 100644 index 0000000..217889d --- /dev/null +++ b/src/api/axios-instance.js @@ -0,0 +1,9 @@ +import axios from "axios"; + +const axiosInstance = axios.create({ + baseURL: "https://rolling-api.vercel.app/", + timeout: 5000, + headers: { "Content-Type": "application/json" }, +}); + +export default axiosInstance; diff --git a/src/app.jsx b/src/app.jsx index 81ae363..745c6e7 100644 --- a/src/app.jsx +++ b/src/app.jsx @@ -1,10 +1,16 @@ +import { BrowserRouter, Route, Routes } from "react-router"; import DropdownProvider from "./components/text-field/dropdown-input/dropdown-provider"; import TestPage from "./pages/test-page"; function App() { return ( - + + + } /> + } /> + + ); } diff --git a/src/pages/message-list.jsx b/src/pages/message-list.jsx new file mode 100644 index 0000000..6cc97b3 --- /dev/null +++ b/src/pages/message-list.jsx @@ -0,0 +1,137 @@ +import ArrowButton from "../components/button/arrow-button"; +import ARROW_BUTTON_DIRECTION from "../components/button/arrow-button-direction"; +import { + OutlinedButton, + PrimaryButton, + SecondaryButton, +} from "../components/button/button"; +import BUTTON_SIZE from "../components/button/button-size"; +import ToggleButton from "../components/button/toggle-button"; + +import React, { useEffect, useState } from "react"; +import axiosInstance from "../api/axios-instance"; + +function ShowMessageList() { + // const [imageUrl, setImageUrl] = useState(null); + + const cardConStyle = { + border: "1px solid red", + display: "grid", + gridTemplateColumns: "275px 275px 275px 275px", + gap: "20px", + width: "fit-content", + + position: "relative", + overflow: "visible", + }; + + const cardStyle = { + width: "275px", + height: "260px", + border: "1px solid red", + }; + + const testStyle = { + textAlign: "center", + }; + + const sectionStyle = { + justifySelf: "center", + }; + + const buttonStyle = { + marginTop: "64px", + fontWeight: "400", + padding: "14px 60px", + }; + + const htStyle = { + textAlign: "left", + }; + + const rButton = { + position: "absolute", + right: -20, // 필요시 조정 + top: "50%", + transform: "translateY(-50%)", + zIndex: 20, + }; + + const lButton = { + position: "absolute", + left: -20, // 필요시 조정 + top: "50%", + transform: "translateY(-50%)", + zIndex: 20, + }; + + useEffect(() => { + axiosInstance + .get("/18-3/recipients/?limit=5&offset=20") + .then((res) => { + console.log(res.data); + }) + .catch(console.error); + }, []); + + return ( +
+ /* navi 들어갈 자리 */ +
+
+

인기 롤링 페이퍼 🔥

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

최근에 만든 롤링 페이퍼 ⭐

+
+
+
+
+
+
+ +
+
+
+
+ +
+ ); + + /* axios 사용 예시코드 */ + // useEffect(() => { + // axiosInstance + // .get("/background-images/") + // .then((res) => { + // if (res.data && res.data.imageUrls && res.data.imageUrls.length > 0) { + // setImageUrl(res.data.imageUrls[0]); + // } + // }) + // .catch(console.error); + // }, []); + + // return ( + //
+ // {imageUrl ? ( + // background + // ) : ( + //

이미지를 불러오는 중입니다...

+ // )} + //
+ // ); +} + +export default ShowMessageList; diff --git a/src/pages/test-page.jsx b/src/pages/test-page.jsx index 0d34eee..2ae1ed2 100644 --- a/src/pages/test-page.jsx +++ b/src/pages/test-page.jsx @@ -36,6 +36,7 @@ function TestPage() { margin: 16, }} > +

🤯

From e0745c4767800f8b4536e4a89d1c71a0eccf37b5 Mon Sep 17 00:00:00 2001 From: Chamsol Kim Date: Tue, 12 Aug 2025 16:37:19 +0900 Subject: [PATCH 9/9] =?UTF-8?q?fix=20[]=20Missing=20import=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/app.jsx b/src/app.jsx index 745c6e7..7fb23d8 100644 --- a/src/app.jsx +++ b/src/app.jsx @@ -1,5 +1,6 @@ import { BrowserRouter, Route, Routes } from "react-router"; import DropdownProvider from "./components/text-field/dropdown-input/dropdown-provider"; +import MessagePage from "./pages/message-list"; import TestPage from "./pages/test-page"; function App() {