From 09627cb9ca2986338405fac626e888895d55e13c Mon Sep 17 00:00:00 2001 From: minjeoong Date: Thu, 16 Jan 2025 23:13:47 +0900 Subject: [PATCH 01/17] =?UTF-8?q?fix:=20=ED=97=A4=EB=8D=94=EC=97=90=20?= =?UTF-8?q?=EC=95=84=EC=9D=B4=EC=BD=98=20=EB=86=92=EC=9D=B4=20=EC=A7=80?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/common/component/HeaderNav/HeaderNav.css.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/common/component/HeaderNav/HeaderNav.css.ts b/src/common/component/HeaderNav/HeaderNav.css.ts index d5f6f0c3..c835cb11 100644 --- a/src/common/component/HeaderNav/HeaderNav.css.ts +++ b/src/common/component/HeaderNav/HeaderNav.css.ts @@ -39,10 +39,12 @@ export const btnItem = recipe({ base: [ font.body01, { + height: "2.4rem", color: color.gray.gray600, backgroundColor: "transparent", padding: "0", border: "none", + alignContent: "center", textDecoration: "none", transition: "background-color 0.3s", ":focus": { From 4ebbafc9b0c15b0db5ba7096c4ae7baf4499e075 Mon Sep 17 00:00:00 2001 From: minjeoong Date: Thu, 16 Jan 2025 23:17:39 +0900 Subject: [PATCH 02/17] =?UTF-8?q?feat:=20=EA=B2=8C=EC=8B=9C=EB=AC=BC=20?= =?UTF-8?q?=EC=83=9D=EC=84=B1=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=ED=97=A4?= =?UTF-8?q?=EB=8D=94=20=EA=B5=AC=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/svgs/ic_delete_black.svg | 3 +++ src/asset/svg/IcDeleteBlack.tsx | 19 +++++++++++++++++++ src/asset/svg/index.ts | 12 ++++++------ src/page/community/write/Write.css.ts | 6 ++++++ src/page/community/write/Write.tsx | 27 +++++++++++++++++++++++---- 5 files changed, 57 insertions(+), 10 deletions(-) create mode 100644 public/svgs/ic_delete_black.svg create mode 100644 src/asset/svg/IcDeleteBlack.tsx create mode 100644 src/page/community/write/Write.css.ts diff --git a/public/svgs/ic_delete_black.svg b/public/svgs/ic_delete_black.svg new file mode 100644 index 00000000..cc7a1d98 --- /dev/null +++ b/public/svgs/ic_delete_black.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/asset/svg/IcDeleteBlack.tsx b/src/asset/svg/IcDeleteBlack.tsx new file mode 100644 index 00000000..575cecd5 --- /dev/null +++ b/src/asset/svg/IcDeleteBlack.tsx @@ -0,0 +1,19 @@ +import * as React from "react"; +import type { SVGProps } from "react"; +const SvgIcDeleteBlack = (props: SVGProps) => ( + + + +); +export default SvgIcDeleteBlack; diff --git a/src/asset/svg/index.ts b/src/asset/svg/index.ts index 08f44efa..5aed1bfa 100644 --- a/src/asset/svg/index.ts +++ b/src/asset/svg/index.ts @@ -1,23 +1,23 @@ -export { default as IcNormal } from "./IcNormal"; +export { default as Check } from "./Check"; export { default as IcBottomSheetLine } from "./IcBottomSheetLine"; export { default as IcEllipse57 } from "./IcEllipse57"; +export { default as IcNormal } from "./IcNormal"; export { default as IcShape } from "./IcShape"; export { default as IcClear } from "./IcClear"; export { default as IcDelete } from "./IcDelete"; -export { default as IcLogo } from "./IcLogo"; +export { default as IcDeleteBlack } from "./IcDeleteBlack"; export { default as IcEllipses } from "./IcEllipses"; export { default as IcLeftarrow } from "./IcLeftarrow"; +export { default as IcLogo } from "./IcLogo"; export { default as IcMessage } from "./IcMessage"; export { default as IcSearch } from "./IcSearch"; export { default as IcSearchFillter } from "./IcSearchFillter"; export { default as IcSearchFillterBlue } from "./IcSearchFillterBlue"; - -export { default as Check } from "./Check"; -export { default as IcUp } from "./IcUp"; export { default as IcTest } from "./IcTest"; +export { default as IcToastError } from "./IcToastError"; +export { default as IcUp } from "./IcUp"; export { default as IcoMessage } from "./IcoMessage"; export { default as IcoSkeleton } from "./IcoSkeleton"; export { default as Plus } from "./Plus"; -export { default as IcToastError } from "./IcToastError"; export { default as React } from "./React"; export { default as Vite } from "./Vite"; diff --git a/src/page/community/write/Write.css.ts b/src/page/community/write/Write.css.ts new file mode 100644 index 00000000..f97eebea --- /dev/null +++ b/src/page/community/write/Write.css.ts @@ -0,0 +1,6 @@ +import { createVar, style } from "@vanilla-extract/css"; +import { color, font } from "@style/styles.css.ts"; + +export const writeWrap = style({ + backgroundColor: color.gray.gray200, +}); diff --git a/src/page/community/write/Write.tsx b/src/page/community/write/Write.tsx index d7988f0d..556e7320 100644 --- a/src/page/community/write/Write.tsx +++ b/src/page/community/write/Write.tsx @@ -1,8 +1,27 @@ +import HeaderNav from "@common/component/HeaderNav/HeaderNav"; +import { + IcClear, + IcDelete, + IcDeleteBlack, + IcLeftarrow, + React, +} from "@asset/svg"; +import { writeWrap } from "@page/community/write/Write.css.ts"; const Write = () => { + const onBackClick = () => {}; + return ( -
Write
- ) -} +
+ } + onLeftClick={onBackClick} + // type={"field"} + centerContent={"글쓰기"} + /> +
+
+ ); +}; -export default Write \ No newline at end of file +export default Write; From c52758748c5cdc864e0e40ead6db2dae4d66348e Mon Sep 17 00:00:00 2001 From: minjeoong Date: Thu, 16 Jan 2025 23:59:14 +0900 Subject: [PATCH 03/17] =?UTF-8?q?feat:=20=EA=B2=8C=EC=8B=9C=EB=AC=BC=20?= =?UTF-8?q?=EC=83=9D=EC=84=B1=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EA=B8=80=20?= =?UTF-8?q?=EC=9E=91=EC=84=B1=20=EC=84=B9=EC=85=98=EA=B9=8C=EC=A7=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/svgs/Ic_right.svg | 3 ++ src/asset/svg/IcRight.tsx | 19 +++++++ src/asset/svg/index.ts | 1 + src/common/component/TextField/index.tsx | 37 ++++++++----- src/common/component/TextField/styles.css.ts | 9 ++++ .../WriteInputSection.css.ts | 18 +++++++ .../WriteInputSection/WriteInputSection.tsx | 22 ++++++++ src/page/community/write/Write.css.ts | 4 ++ src/page/community/write/Write.tsx | 53 ++++++++++++++++++- 9 files changed, 151 insertions(+), 15 deletions(-) create mode 100644 public/svgs/Ic_right.svg create mode 100644 src/asset/svg/IcRight.tsx create mode 100644 src/page/community/component/WriteInputSection/WriteInputSection.css.ts create mode 100644 src/page/community/component/WriteInputSection/WriteInputSection.tsx diff --git a/public/svgs/Ic_right.svg b/public/svgs/Ic_right.svg new file mode 100644 index 00000000..ecd2f18a --- /dev/null +++ b/public/svgs/Ic_right.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/asset/svg/IcRight.tsx b/src/asset/svg/IcRight.tsx new file mode 100644 index 00000000..b0900e6b --- /dev/null +++ b/src/asset/svg/IcRight.tsx @@ -0,0 +1,19 @@ +import * as React from "react"; +import type { SVGProps } from "react"; +const SvgIcRight = (props: SVGProps) => ( + + + +); +export default SvgIcRight; diff --git a/src/asset/svg/index.ts b/src/asset/svg/index.ts index 5aed1bfa..d41506e4 100644 --- a/src/asset/svg/index.ts +++ b/src/asset/svg/index.ts @@ -1,3 +1,4 @@ +export { default as IcRight } from "./IcRight"; export { default as Check } from "./Check"; export { default as IcBottomSheetLine } from "./IcBottomSheetLine"; export { default as IcEllipse57 } from "./IcEllipse57"; diff --git a/src/common/component/TextField/index.tsx b/src/common/component/TextField/index.tsx index 619a3255..8255cc32 100644 --- a/src/common/component/TextField/index.tsx +++ b/src/common/component/TextField/index.tsx @@ -4,11 +4,13 @@ import { IcClear } from "@asset/svg"; interface TextFieldProps { icon?: React.ReactNode; + leftIcon?: React.ReactNode; state?: "default" | "error"; active?: boolean; + isDelete?: boolean; placeholder?: string; value: string; - onChange: (e: React.ChangeEvent) => void; + onChange?: (e: React.ChangeEvent) => void; onClick?: () => void; onKeyDown?: (e: React.KeyboardEvent) => void; onClearClick?: () => void; @@ -17,8 +19,10 @@ interface TextFieldProps { /** * TextField 공통 컴포넌트 * @param icon 오른쪽 아이콘 + * @param leftIcon 왼쪽 아이콘 * @param state 상태 (default, error) * @param active 활성화 여부 + * @param isDelete value 가 생기면 삭제 아이콘 표시 여부 * @param placeholder placeholder * @param value 입력값 * @param onChange 입력값 변경 함수 @@ -32,33 +36,38 @@ export const TextField = React.forwardRef( ( { icon, + leftIcon, state = "default", active = true, placeholder = "검색어를 입력해주세요", value, + isDelete = "true", onChange, onClick, onKeyDown, onClearClick, }, - ref, // forwardRef를 통해 ref를 받을 수 있도록 설정 + ref // forwardRef를 통해 ref를 받을 수 있도록 설정 ) => { return (
- - {value ? : icon} +
+ {leftIcon && leftIcon} + +
+ {value && isDelete ? : icon}
); - }, + } ); TextField.displayName = "TextField"; // React DevTools에서 이름이 올바르게 표시되도록 설정 diff --git a/src/common/component/TextField/styles.css.ts b/src/common/component/TextField/styles.css.ts index 28d647d3..50fd2426 100644 --- a/src/common/component/TextField/styles.css.ts +++ b/src/common/component/TextField/styles.css.ts @@ -12,6 +12,7 @@ export const styles = { padding: "1rem 2rem", border: `0.1rem solid ${color.gray.gray200}`, borderRadius: "8px", + background: color.gray.gray000, }, variants: { state: { @@ -34,6 +35,13 @@ export const styles = { active: true, }, }), + leftWrap: recipe({ + base: { + display: "flex", + alignItems: "center", + gap: "1rem", + }, + }), input: recipe({ base: [ font.body01, @@ -41,6 +49,7 @@ export const styles = { letterSpacing: "-0.28px", fontWeight: 500, height: "auto", + maxWidth: "100%", color: color.gray.gray900, border: "none", "::placeholder": { diff --git a/src/page/community/component/WriteInputSection/WriteInputSection.css.ts b/src/page/community/component/WriteInputSection/WriteInputSection.css.ts new file mode 100644 index 00000000..65c9ec4f --- /dev/null +++ b/src/page/community/component/WriteInputSection/WriteInputSection.css.ts @@ -0,0 +1,18 @@ +import { color, font } from "@style/styles.css"; +import { style } from "@vanilla-extract/css"; + +export const container = style({ + display: "flex", + flexDirection: "column", + gap: "0.8rem", +}); + +export const label = style([ + font.body01, + { + fontWeight: 500, + color: color.gray.gray900, + }, +]); + +export const child = style({}); diff --git a/src/page/community/component/WriteInputSection/WriteInputSection.tsx b/src/page/community/component/WriteInputSection/WriteInputSection.tsx new file mode 100644 index 00000000..20e21e76 --- /dev/null +++ b/src/page/community/component/WriteInputSection/WriteInputSection.tsx @@ -0,0 +1,22 @@ +import { + child, + container, + label, +} from "@page/community/component/WriteInputSection/WriteInputSection.css.ts"; +import React from "react"; + +interface WriteInputProps { + title: string; + children: React.ReactNode; +} + +const WriteInputSection = ({ title, children }: WriteInputProps) => { + return ( +
+
{title}
+
{children}
+
+ ); +}; + +export default WriteInputSection; diff --git a/src/page/community/write/Write.css.ts b/src/page/community/write/Write.css.ts index f97eebea..548214f6 100644 --- a/src/page/community/write/Write.css.ts +++ b/src/page/community/write/Write.css.ts @@ -3,4 +3,8 @@ import { color, font } from "@style/styles.css.ts"; export const writeWrap = style({ backgroundColor: color.gray.gray200, + padding: "2rem", + display: "flex", + flexDirection: "column", + gap: "3.2rem", }); diff --git a/src/page/community/write/Write.tsx b/src/page/community/write/Write.tsx index 556e7320..211cd9c2 100644 --- a/src/page/community/write/Write.tsx +++ b/src/page/community/write/Write.tsx @@ -4,12 +4,40 @@ import { IcDelete, IcDeleteBlack, IcLeftarrow, + IcRight, + IcTest, React, } from "@asset/svg"; import { writeWrap } from "@page/community/write/Write.css.ts"; +import WriteInputSection from "@page/community/component/WriteInputSection/WriteInputSection.tsx"; +import { TextField } from "@common/component/TextField"; +import { useState } from "react"; + +interface writeProps { + category: string; + title: string; + content: string; + image: string[]; +} const Write = () => { const onBackClick = () => {}; + const [params, setParams] = useState({ + category: "", + title: "", + content: "", + image: [], + }); + + const onChangeValue = ( + target: string, + value: string | React.ChangeEvent + ) => { + setParams({ + ...params, + [target]: value, + }); + }; return (
@@ -19,7 +47,30 @@ const Write = () => { // type={"field"} centerContent={"글쓰기"} /> -
+
+ + } + placeholder={"게시물 선택하기"} + icon={} + onClick={() => { + //todo: 게시물 카테고리 선택하기 모달 띄우기 + console.log("click"); + }} + isDelete={false} + value={params.category} + /> + + + onChangeValue("title", e.target.value)} + onClearClick={() => onChangeValue("title", "")} + /> + +
); }; From 1f4c9a19709372ae6358d8dfd69a33156db8d205 Mon Sep 17 00:00:00 2001 From: minjeoong Date: Fri, 17 Jan 2025 21:23:32 +0900 Subject: [PATCH 04/17] =?UTF-8?q?feat:=20textField=20state=20=ED=95=98?= =?UTF-8?q?=EB=82=98=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/common/component/TextField/index.tsx | 10 +- src/common/component/TextField/styles.css.ts | 11 ++- .../component/TextArea/TextArea.css.ts | 2 +- .../community/component/TextArea/TextArea.tsx | 5 +- .../WriteInputSection.css.ts | 9 +- src/page/community/write/Write.tsx | 96 +++++++++++++++---- 6 files changed, 108 insertions(+), 25 deletions(-) diff --git a/src/common/component/TextField/index.tsx b/src/common/component/TextField/index.tsx index 43481752..5068e5b9 100644 --- a/src/common/component/TextField/index.tsx +++ b/src/common/component/TextField/index.tsx @@ -1,11 +1,13 @@ import React from "react"; -import { styles } from "@common/component/TextField/styles.css.ts"; +import { + styles, + WrapVariants, +} from "@common/component/TextField/styles.css.ts"; import { IcClear } from "@asset/svg"; interface TextFieldProps { icon?: React.ReactNode; leftIcon?: React.ReactNode; - state?: "default" | "error"; active?: boolean; isDelete?: boolean; placeholder?: string; @@ -16,6 +18,8 @@ interface TextFieldProps { onClearClick?: () => void; } +type propsType = WrapVariants & TextFieldProps; + /** * TextField 공통 컴포넌트 * @param icon 오른쪽 아이콘 @@ -32,7 +36,7 @@ interface TextFieldProps { * @constructor minjeoong */ -export const TextField = React.forwardRef( +export const TextField = React.forwardRef( ( { icon, diff --git a/src/common/component/TextField/styles.css.ts b/src/common/component/TextField/styles.css.ts index 50fd2426..8e3901d5 100644 --- a/src/common/component/TextField/styles.css.ts +++ b/src/common/component/TextField/styles.css.ts @@ -1,5 +1,6 @@ -import { recipe } from "@vanilla-extract/recipes"; +import { recipe, RecipeVariants } from "@vanilla-extract/recipes"; import { color, font } from "@style/styles.css.ts"; +import { button } from "@common/component/Button/styles.css.ts"; export const styles = { wrapper: recipe({ @@ -20,6 +21,12 @@ export const styles = { error: { border: `0.1rem solid ${color.red.warning_red200}`, }, + write: { + padding: "1.2rem", + ":placeholder": { + color: color.gray.gray600, + }, + }, }, active: { true: {}, @@ -81,3 +88,5 @@ export const styles = { }, }), }; + +export type WrapVariants = RecipeVariants; diff --git a/src/page/community/component/TextArea/TextArea.css.ts b/src/page/community/component/TextArea/TextArea.css.ts index 538871e2..9bcbdc92 100644 --- a/src/page/community/component/TextArea/TextArea.css.ts +++ b/src/page/community/component/TextArea/TextArea.css.ts @@ -8,7 +8,7 @@ export const textareaContainer = style([ color: color.gray.gray900, width: "100%", minHeight: "23.5rem", - padding: "1.2rem", + padding: "1.5rem", borderRadius: "0.8rem", border: `0.1rem solid ${color.gray.gray200}`, background: color.gray.gray000, diff --git a/src/page/community/component/TextArea/TextArea.tsx b/src/page/community/component/TextArea/TextArea.tsx index 80112f7c..c8832e1f 100644 --- a/src/page/community/component/TextArea/TextArea.tsx +++ b/src/page/community/component/TextArea/TextArea.tsx @@ -1,5 +1,6 @@ import React from "react"; import { textareaContainer } from "./TextArea.css"; +import { WrapVariants } from "@common/component/TextField/styles.css.ts"; interface TextAreaProps { value: string; @@ -7,7 +8,9 @@ interface TextAreaProps { placeholder?: string; } -const TextArea = ({ value, onChange, placeholder }: TextAreaProps) => { +type typeProps = WrapVariants & TextAreaProps; + +const TextArea = ({ value, onChange, placeholder }: typeProps) => { return (