Merge pull request #102 from SOPT-all/feat/#73/postWrite

[Feat/#73] 게시물 작성 페이지 구현

src/asset/svg/IcDeleteBlack.tsx

@@ -0,0 +1,19 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const SvgIcDeleteBlack = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      stroke="#222"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="m16.167 7.833-8.334 8.334m0-8.334 8.334 8.334"
+    />
+  </svg>
+);
+export default SvgIcDeleteBlack;

src/asset/svg/IcDeleteWhite.tsx

@@ -0,0 +1,19 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const SvgIcDeleteWhite = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 20 20"
+    {...props}
+  >
+    <path
+      stroke="#fff"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="m14.167 5.833-8.334 8.334m0-8.334 8.334 8.334"
+    />
+  </svg>
+);
+export default SvgIcDeleteWhite;

src/asset/svg/IcImagePlus.tsx

@@ -0,0 +1,17 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const SvgIcImagePlus = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 167 167"
+    {...props}
+  >
+    <path fill="#D9D9D9" d="M0 0h167v167H0z" />
+    <path
+      fill="#222"
+      d="M76.255 93.414H51.338V78.78h24.917V53.863h14.502V78.78h25.049v14.634h-25.05v24.917H76.256z"
+    />
+  </svg>
+);
+export default SvgIcImagePlus;

src/asset/svg/IcRightArror.tsx

@@ -0,0 +1,19 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const SvgIcRightArror = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 20 20"
+    {...props}
+  >
+    <path
+      stroke="#717171"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="m7.5 15 5-5-5-5"
+    />
+  </svg>
+);
+export default SvgIcRightArror;

src/asset/svg/index.ts

@@ -1,31 +1,34 @@
+export { default as Check } from "./Check";
 export { default as IcBottomSheetLine } from "./IcBottomSheetLine";
 export { default as IcEllipse57 } from "./IcEllipse57";
+export { default as IcImagePlus } from "./IcImagePlus";
 export { default as IcNormal } from "./IcNormal";
 export { default as IcRightIcon } from "./IcRightIcon";
 export { default as IcShape } from "./IcShape";
 export { default as IcChevronLeft } from "./IcChevronLeft";
 export { default as IcChevronRight } from "./IcChevronRight";
+export { default as IcClear } from "./IcClear";
 export { default as IcDelete } from "./IcDelete";
+export { default as IcDeleteBlack } from "./IcDeleteBlack";
+export { default as IcDeleteWhite } from "./IcDeleteWhite";
 export { default as IcEditPen } from "./IcEditPen";
 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 IcOut } from "./IcOut";
 export { default as IcPlus } from "./IcPlus";
+export { default as IcPostImageSkeleton } from "./IcPostImageSkeleton";
+export { default as IcRightArror } from "./IcRightArror";
+export { default as IcSearch } from "./IcSearch";
+export { default as IcSearchFillter } from "./IcSearchFillter";
+export { default as IcSearchFillterBlue } from "./IcSearchFillterBlue";
 export { default as IcSettings } from "./IcSettings";
 export { default as IcTest } from "./IcTest";
 export { default as IcToastError } from "./IcToastError";
-export { default as Check } from "./Check";
 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 React } from "./React";
 export { default as Vite } from "./Vite";
-export { default as IcClear } from "./IcClear";
-export { default as IcLeftarrow } from "./IcLeftarrow";
-export { default as IcPostImageSkeleton } from "./IcPostImageSkeleton";
-export { default as IcSearch } from "./IcSearch";
-export { default as IcSearchFillter } from "./IcSearchFillter";
-export { default as IcSearchFillterBlue } from "./IcSearchFillterBlue";
-export { default as IcRight } from "./IcRight";

src/common/component/BottomSheet/BottomSheet.css.ts

@@ -2,7 +2,7 @@ import { semanticColor } from "@style/styles.css";
 import { style } from "@vanilla-extract/css";
 
 export const overlay = style({
-  position: "absolute",
+  position: "fixed",
   top: 0,
   left: 0,
   zIndex: "99",

src/common/component/CheckBoxText/CheckBoxText.tsx

@@ -1,12 +1,16 @@
 import { checkboxText } from "./CheckBoxText.css";
-import { Check } from "@asset/svg";
+import Check from "@asset/svg/Check.tsx";
 
 interface CheckBoxTextPropTypes {
   children: string;
   isSelected: boolean;
   onClick: () => void;
 }
-const CheckBoxText = ({ children, isSelected, onClick }: CheckBoxTextPropTypes) => {
+const CheckBoxText = ({
+  children,
+  isSelected,
+  onClick,
+}: CheckBoxTextPropTypes) => {
   const handleClickTextBox = () => {
     onClick();
   };
@@ -19,7 +23,13 @@ const CheckBoxText = ({ children, isSelected, onClick }: CheckBoxTextPropTypes)
       onClick={handleClickTextBox}
     >
       <span style={{ width: "100%" }}>{children}</span>
-      {isSelected && <Check width={24} height={24} style={{ position: "relative", bottom: "3" }} />}
+      {isSelected && (
+        <Check
+          width={24}
+          height={24}
+          style={{ position: "relative", bottom: "3" }}
+        />
+      )}
     </div>
   );
 };

src/common/component/Chip/Chip.tsx

@@ -12,14 +12,19 @@ interface ChipProps {
 
 type CombinedChipProps = ChipProps & Exclude<ChipType, undefined>;
 
-const Chip = ({ label, icon = false, color = "blue", onClick, isSelected = false }: CombinedChipProps) => {
-
+const Chip = ({
+  label,
+  icon = false,
+  color = "blue",
+  onClick,
+  isSelected = false,
+}: CombinedChipProps) => {
   const [isActive, setIsActive] = useState(isSelected);
-  
+
   useEffect(() => {
     setIsActive(isSelected);
   }, [isSelected]);
-  
+
   const handleClick = () => {
     if (color === "gray" || (size === "large" && icon === false)) return;
     if (!icon) setIsActive(!isActive);
@@ -37,6 +42,8 @@ const Chip = ({ label, icon = false, color = "blue", onClick, isSelected = false
       {label}
       {icon && (
         <IcDelete
+          width={24}
+          height={24}
           color={color === "gray" ? "#717171" : "#14B5F0"}
           style={{
             position: "relative",

src/common/component/HeaderNav/HeaderNav.css.ts

@@ -40,10 +40,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": {

src/common/component/TextField/index.tsx

@@ -1,40 +1,53 @@
 import React from "react";
-import { styles } from "@common/component/TextField/styles.css.ts";
+import {
+  InputVariants,
+  styles,
+  WrapVariants,
+} from "@common/component/TextField/styles.css.ts";
 import { IcClear } from "@asset/svg";
 
 interface TextFieldProps {
   icon?: React.ReactNode;
-  state?: "default" | "error" | "centerPlaceholder";
+  leftIcon?: React.ReactNode;
   active?: boolean;
+  isDelete?: boolean;
   placeholder?: string;
   value: string;
-  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
   onClick?: () => void;
   onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
   onClearClick?: () => void;
   maxLength?: number; // input 입력 가능길이
 }
 
+type propsType = WrapVariants & TextFieldProps & InputVariants;
+
 /**
  * TextField 공통 컴포넌트
  * @param icon 오른쪽 아이콘
+ * @param leftIcon 왼쪽 아이콘
  * @param state 상태 (default, error)
  * @param active 활성화 여부
+ * @param isDelete value 가 생기면 삭제 아이콘 표시 여부
  * @param placeholder placeholder
  * @param value 입력값
  * @param onChange 입력값 변경 함수
  * @param onClick input 클릭 함수
  * @param onKeyDown 엔터키 입력 함수
  * @param onClearClick 입력값 삭제 함수
  * @constructor minjeoong
- */ export const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
+ */
+
+export const TextField = React.forwardRef<HTMLInputElement, propsType>(
   (
     {
       icon,
+      leftIcon,
       state = "default",
       active = true,
       placeholder = "검색어를 입력해주세요",
       value,
+      isDelete = "true",
       onChange,
       onClick,
       onKeyDown,
@@ -45,18 +58,21 @@ interface TextFieldProps {
   ) => {
     return (
       <div className={styles.wrapper({ state, active })} onClick={onClick}>
-        <input
-          ref={ref}
-          type="text"
-          className={styles.input({ state, active })}
-          placeholder={placeholder}
-          value={value}
-          onChange={onChange}
-          onKeyDown={onKeyDown}
-          disabled={!active}
-          maxLength={maxLength}
-        />
-        {value ? <IcClear onClick={onClearClick} /> : icon}
+        <div className={styles.leftWrap()}>
+          {leftIcon && leftIcon}
+          <input
+            ref={ref}
+            type="text"
+            className={styles.input({ state, active })}
+            placeholder={placeholder}
+            value={value}
+            onChange={onChange}
+            onKeyDown={onKeyDown}
+            disabled={!active}
+            maxLength={maxLength}
+          />
+        </div>
+        {value && isDelete ? <IcClear onClick={onClearClick} /> : icon}
       </div>
     );
   }

src/common/component/TextField/styles.css.ts

@@ -1,4 +1,4 @@
-import { recipe } from "@vanilla-extract/recipes";
+import { recipe, RecipeVariants } from "@vanilla-extract/recipes";
 import { color, font } from "@style/styles.css.ts";
 
 export const styles = {
@@ -12,13 +12,17 @@ export const styles = {
       padding: "1rem 2rem",
       border: `0.1rem solid ${color.gray.gray200}`,
       borderRadius: "8px",
+      background: color.gray.gray000,
     },
     variants: {
       state: {
         default: {},
         error: {
           border: `0.1rem solid ${color.red.warning_red200}`,
         },
+        write: {
+          padding: "1.2rem",
+        },
         centerPlaceholder: { maxWidth: "12rem" },
       },
       active: {
@@ -36,13 +40,21 @@ export const styles = {
     },
   }),
 
+  leftWrap: recipe({
+    base: {
+      display: "flex",
+      alignItems: "center",
+      gap: "1rem",
+    },
+  }),
   input: recipe({
     base: [
       font.body01,
       {
         letterSpacing: "-0.28px",
         fontWeight: 500,
         height: "auto",
+        maxWidth: "100%",
         color: color.gray.gray900,
         border: "none",
         width: "100%",
@@ -64,6 +76,11 @@ export const styles = {
       },
       state: {
         default: {},
+        write: {
+          "::placeholder": {
+            color: color.gray.gray600,
+          },
+        },
         error: {},
         centerPlaceholder: { maxWidth: "8rem", textAlign: "center" },
       },
@@ -82,3 +99,6 @@ export const styles = {
     },
   }),
 };
+
+export type WrapVariants = RecipeVariants<typeof styles.wrapper>;
+export type InputVariants = RecipeVariants<typeof styles.input>;

src/page/community/component/DropDown/DropDown.css.ts

@@ -2,9 +2,10 @@ import { createVar, style } from "@vanilla-extract/css";
 import { color, font } from "@style/styles.css.ts";
 
 export const container = style({
+  position: "absolute",
   backgroundColor: "white",
-  margin: "0 2rem",
-  width: "calc(100% - 4rem)",
+  width: "calc(100vw - 4rem)",
+  maxWidth: "72.8rem",
   borderRadius: "1.6rem",
   boxShadow: "0px 2px 10px 0px rgba(0, 0, 0, 0.15)",
   fontSize: "1.4rem",