diff --git a/public/svgs/ic_ImagePlus.svg b/public/svgs/ic_ImagePlus.svg
new file mode 100644
index 00000000..cc83ca50
--- /dev/null
+++ b/public/svgs/ic_ImagePlus.svg
@@ -0,0 +1,4 @@
+<svg width="167" height="167" viewBox="0 0 167 167" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="167" height="167" fill="#D9D9D9"/>
+<path d="M76.2549 93.4141H51.3379V78.7803H76.2549V53.8633H90.7568V78.7803H115.806V93.4141H90.7568V118.331H76.2549V93.4141Z" fill="#222222"/>
+</svg>
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 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.1667 7.83331L7.83334 16.1666M7.83334 7.83331L16.1667 16.1666" stroke="#222222" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/public/svgs/ic_delete_white.svg b/public/svgs/ic_delete_white.svg
new file mode 100644
index 00000000..494e5e5e
--- /dev/null
+++ b/public/svgs/ic_delete_white.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.1666 5.83337L5.83328 14.1667M5.83328 5.83337L14.1666 14.1667" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/public/svgs/ic_rightArror.svg b/public/svgs/ic_rightArror.svg
new file mode 100644
index 00000000..ecd2f18a
--- /dev/null
+++ b/public/svgs/ic_rightArror.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.5 15L12.5 10L7.5 5" stroke="#717171" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
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<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;
diff --git a/src/asset/svg/IcDeleteWhite.tsx b/src/asset/svg/IcDeleteWhite.tsx
new file mode 100644
index 00000000..8683584e
--- /dev/null
+++ b/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;
diff --git a/src/asset/svg/IcImagePlus.tsx b/src/asset/svg/IcImagePlus.tsx
new file mode 100644
index 00000000..5529ef5f
--- /dev/null
+++ b/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;
diff --git a/src/asset/svg/IcRightArror.tsx b/src/asset/svg/IcRightArror.tsx
new file mode 100644
index 00000000..3bb40af0
--- /dev/null
+++ b/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;
diff --git a/src/asset/svg/index.ts b/src/asset/svg/index.ts
index df50e6dd..1ce46ff0 100644
--- a/src/asset/svg/index.ts
+++ b/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";
diff --git a/src/common/component/BottomSheet/BottomSheet.css.ts b/src/common/component/BottomSheet/BottomSheet.css.ts
index 3d11fe40..9553c669 100644
--- a/src/common/component/BottomSheet/BottomSheet.css.ts
+++ b/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",
diff --git a/src/common/component/CheckBoxText/CheckBoxText.tsx b/src/common/component/CheckBoxText/CheckBoxText.tsx
index e48b0f19..21842a3a 100644
--- a/src/common/component/CheckBoxText/CheckBoxText.tsx
+++ b/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>
   );
 };
diff --git a/src/common/component/Chip/Chip.tsx b/src/common/component/Chip/Chip.tsx
index 62bcf6b7..3e094fa8 100644
--- a/src/common/component/Chip/Chip.tsx
+++ b/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",
diff --git a/src/common/component/HeaderNav/HeaderNav.css.ts b/src/common/component/HeaderNav/HeaderNav.css.ts
index ebc3a0d4..db378f02 100644
--- a/src/common/component/HeaderNav/HeaderNav.css.ts
+++ b/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": {
diff --git a/src/common/component/TextField/index.tsx b/src/common/component/TextField/index.tsx
index 836cb4ba..d1e46d60 100644
--- a/src/common/component/TextField/index.tsx
+++ b/src/common/component/TextField/index.tsx
@@ -1,25 +1,34 @@
 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 입력값 변경 함수
@@ -27,14 +36,18 @@ interface TextFieldProps {
  * @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>
     );
   }
diff --git a/src/common/component/TextField/styles.css.ts b/src/common/component/TextField/styles.css.ts
index 972d59c1..f684c0fb 100644
--- a/src/common/component/TextField/styles.css.ts
+++ b/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,6 +12,7 @@ export const styles = {
       padding: "1rem 2rem",
       border: `0.1rem solid ${color.gray.gray200}`,
       borderRadius: "8px",
+      background: color.gray.gray000,
     },
     variants: {
       state: {
@@ -19,6 +20,9 @@ export const styles = {
         error: {
           border: `0.1rem solid ${color.red.warning_red200}`,
         },
+        write: {
+          padding: "1.2rem",
+        },
         centerPlaceholder: { maxWidth: "12rem" },
       },
       active: {
@@ -36,6 +40,13 @@ export const styles = {
     },
   }),
 
+  leftWrap: recipe({
+    base: {
+      display: "flex",
+      alignItems: "center",
+      gap: "1rem",
+    },
+  }),
   input: recipe({
     base: [
       font.body01,
@@ -43,6 +54,7 @@ export const styles = {
         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>;
diff --git a/src/page/community/component/DropDown/DropDown.css.ts b/src/page/community/component/DropDown/DropDown.css.ts
index 44d9044a..42fe1fc1 100644
--- a/src/page/community/component/DropDown/DropDown.css.ts
+++ b/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",
diff --git a/src/page/community/component/DropDown/DropDown.tsx b/src/page/community/component/DropDown/DropDown.tsx
index 74764ed5..9c2233a1 100644
--- a/src/page/community/component/DropDown/DropDown.tsx
+++ b/src/page/community/component/DropDown/DropDown.tsx
@@ -4,13 +4,23 @@ import React from "react";
 type DropDownType = {
   isOpen: boolean;
   items: Array<{ icon: React.ReactNode; label: string }>;
-  onClickItem: (item: string) => void;
+  onClickItem: (target: string, value: string) => void;
+  toggleDropDown: () => void;
 };
 
-const DropDown = ({ isOpen, items, onClickItem }: DropDownType) => {
+const DropDown = ({
+  isOpen,
+  items,
+  onClickItem,
+  toggleDropDown,
+}: DropDownType) => {
   if (!isOpen) {
     return;
   }
+  const onClick = (label: string) => {
+    onClickItem("category", label);
+    toggleDropDown();
+  };
 
   return (
     <div className={container}>
@@ -18,7 +28,7 @@ const DropDown = ({ isOpen, items, onClickItem }: DropDownType) => {
         <div
           key={index}
           className={itemStyle}
-          onClick={() => onClickItem(item.label)}
+          onClick={() => onClick(item.label)}
         >
           {item.icon}
           <span>{item.label}</span>
diff --git a/src/page/community/component/ImageCover/ImageCover.css.ts b/src/page/community/component/ImageCover/ImageCover.css.ts
new file mode 100644
index 00000000..2b7660b3
--- /dev/null
+++ b/src/page/community/component/ImageCover/ImageCover.css.ts
@@ -0,0 +1,32 @@
+import { createVar, style } from "@vanilla-extract/css";
+import { color, font } from "@style/styles.css.ts";
+
+export const container = style({
+  position: "relative",
+  borderRadius: "0.8rem",
+});
+
+export const deleteButton = style({
+  position: "absolute",
+  right: 0,
+  top: 0,
+  zIndex: 3,
+});
+
+export const ghost = style({
+  position: "absolute",
+  top: 0,
+  left: 0,
+  width: "10.4rem",
+  height: "10.4rem",
+  zIndex: 1,
+  borderRadius: "0.8rem",
+  background:
+    "linear-gradient(0deg, rgba(217, 217, 217, 0.00) 0%, rgba(115, 115, 115, 0.30) 100%)",
+});
+
+export const image = style({
+  width: "10.4rem",
+  height: "10.4rem",
+  borderRadius: "0.8rem",
+});
diff --git a/src/page/community/component/ImageCover/ImageCover.tsx b/src/page/community/component/ImageCover/ImageCover.tsx
new file mode 100644
index 00000000..b87204ac
--- /dev/null
+++ b/src/page/community/component/ImageCover/ImageCover.tsx
@@ -0,0 +1,33 @@
+import { container, deleteButton, ghost, image } from "./ImageCover.css.ts";
+import React from "react";
+import { IcDeleteWhite } from "@asset/svg";
+
+interface ImageSlideType {
+  key: number;
+  imageSrc: string;
+  onDeleteClick: (id: number) => void;
+}
+
+/**
+ * 이미지 백그라운드에 그라디언트 적용 및 X 아이콘
+ * @param key 삭제할 때 사용할 이미지 id
+ * @param imageSrc
+ * @param onDeleteClick
+ * @constructor
+ */
+
+const ImageCover = ({ key, imageSrc, onDeleteClick }: ImageSlideType) => {
+  return (
+    <div className={container}>
+      <IcDeleteWhite
+        width={20}
+        className={deleteButton}
+        onClick={() => onDeleteClick(key)}
+      />
+      <img src={imageSrc} alt="image" className={image} />
+      <div className={ghost}></div>
+    </div>
+  );
+};
+
+export default ImageCover;
diff --git a/src/page/community/component/Tag/Tag.tsx b/src/page/community/component/Tag/Tag.tsx
index 33fc3ab6..fdf98a99 100644
--- a/src/page/community/component/Tag/Tag.tsx
+++ b/src/page/community/component/Tag/Tag.tsx
@@ -1,24 +1,19 @@
 import { tagContainer } from "@page/community/component/Tag/Tag.css.ts";
-import { IcLeftarrow, IcRight } from "@asset/svg";
 import React from "react";
 import { color } from "@style/styles.css.ts";
+import IcRight from "@asset/svg/IcRight.tsx";
 
 interface tagType {
-  label: string;
-  value?: string;
-  setTag: (tag: string) => void;
+  placeholder: string;
+  value?: string | undefined;
+  onClick: () => void;
+  isActive: boolean;
 }
 
-const Tag = ({ label, value, setTag }: tagType) => {
-  const isActive = value === label;
-
-  const onClickTag = () => {
-    setTag(label);
-  };
-
+const Tag = ({ placeholder, value, onClick, isActive }: tagType) => {
   return (
-    <button className={tagContainer({ active: isActive })} onClick={onClickTag}>
-      {label}
+    <button className={tagContainer({ active: isActive })} onClick={onClick}>
+      {value === "" ? placeholder : value}
       <IcRight
         width={20}
         stroke={isActive ? color.primary.blue500 : "#717171"}
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 (
     <textarea
       value={value}
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..fb2e791e
--- /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: "1.2rem",
+});
+
+export const label = style([
+  font.body01,
+  {
+    fontWeight: 600,
+    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 (
+    <div className={container}>
+      <div className={label}>{title}</div>
+      <div className={child}>{children}</div>
+    </div>
+  );
+};
+
+export default WriteInputSection;
diff --git a/src/page/community/write/Write.css.ts b/src/page/community/write/Write.css.ts
new file mode 100644
index 00000000..22f1b0bc
--- /dev/null
+++ b/src/page/community/write/Write.css.ts
@@ -0,0 +1,34 @@
+import { createVar, style } from "@vanilla-extract/css";
+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",
+});
+
+export const imageContainer = style({
+  display: "flex",
+  gap: "1.2rem",
+  overflow: "auto",
+  scrollbarWidth: "none",
+});
+
+export const fileInput = style({
+  display: "none",
+});
+
+export const plusImage = style({
+  width: "10.4rem",
+  height: "10.4rem",
+  minWidth: "10.4rem",
+  borderRadius: "0.8rem",
+});
+
+export const bottomButton = style({
+  backgroundColor: color.gray.gray000,
+  width: "100%",
+  padding: "1.2rem 2rem 3.2rem 2rem",
+});
diff --git a/src/page/community/write/Write.tsx b/src/page/community/write/Write.tsx
index 42a837eb..2f1c9b34 100644
--- a/src/page/community/write/Write.tsx
+++ b/src/page/community/write/Write.tsx
@@ -1,22 +1,262 @@
+import DropDown from "@page/community/component/DropDown/DropDown.tsx";
+import { TextField } from "@common/component/TextField";
+import {
+  IcDeleteBlack,
+  IcImagePlus,
+  IcRightArror,
+  IcTest,
+  IcUp,
+} from "@asset/svg";
+import React, { ChangeEvent, useEffect, useRef, useState } from "react";
+import { useDropDown } from "../component/DropDown/useDropDown";
+import HeaderNav from "@common/component/HeaderNav/HeaderNav";
+import {
+  bottomButton,
+  fileInput,
+  imageContainer,
+  plusImage,
+  writeWrap,
+} from "@page/community/write/Write.css.ts";
+import WriteInputSection from "@page/community/component/WriteInputSection/WriteInputSection.tsx";
+
 import Tag from "@page/community/component/Tag/Tag.tsx";
-import { useState } from "react";
+import TextArea from "@page/community/component/TextArea/TextArea.tsx";
+import Spacing from "@common/component/Spacing/Spacing.tsx";
+import ImageCover from "@page/community/component/ImageCover/ImageCover.tsx";
+import { Button } from "@common/component/Button";
+import FilterBottomSheet from "@shared/component/FilterBottomSheet/FilterBottomSheet.tsx";
+import { useFilterStore } from "@store/filter.ts";
+import { useNavigate } from "react-router-dom";
+import { PATH } from "@route/path.ts";
+
+interface writeProps {
+  category: string;
+  title: string;
+  content: string;
+  image: string[];
+  selectedChips: {
+    breedId: number[];
+    diseaseIds: number[];
+    symptomIds: number[];
+  };
+}
+
+const DropDownItems = [
+  { icon: <IcUp width={20} />, label: "증상·질병" },
+  { icon: <IcTest width={20} />, label: "병원고민" },
+  { icon: <IcRightArror width={20} />, label: "일상·치유" },
+];
 
 const Write = () => {
-  const [params, setParams] = useState({
-    tag: "",
+  const navigate = useNavigate();
+  const onBackClick = () => {
+    navigate(PATH.COMMUNITY.ROOT);
+  };
+  const [params, setParams] = useState<writeProps>({
+    category: "",
+    title: "",
+    content: "",
+    image: [],
+    selectedChips: {
+      breedId: [],
+      diseaseIds: [],
+      symptomIds: [],
+    },
   });
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const { isDropDownOpen, toggleDropDown, closeDropDown } = useDropDown();
+  const { selectedChips, isOpen, setOpen } = useFilterStore();
+
+  const TagLabel = [
+    {
+      label: "반려동물 종류 추가하기",
+      value: selectedChips.breedId,
+    },
+    {
+      label: "증상 추가하기",
+      value: selectedChips.symptomIds,
+    },
+    {
+      label: "질병 추가하기",
+      value: selectedChips.diseaseIds,
+    },
+  ];
+
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
+    }
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [isOpen]);
+
+  const onTextFieldChange = (e: ChangeEvent<HTMLInputElement>) => {
+    onChangeValue("category", e.target.value);
+    if (!isDropDownOpen) closeDropDown();
+  };
+
+  const onTextFieldClick = () => {
+    toggleDropDown();
+  };
+
+  const onChangeValue = (
+    target: string,
+    value: string | React.ChangeEvent<HTMLInputElement>
+  ) => {
+    setParams({
+      ...params,
+      [target]: value,
+    });
+  };
 
-  const setTag = (tag: string) => {
-    setParams({ ...params, tag });
+  // 이미지 추가
+  const handleAddImage = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (event.target.files && event.target.files[0]) {
+      const newImage = URL.createObjectURL(event.target.files[0]);
+      setParams((prevParams) => ({
+        ...prevParams,
+        image: [...prevParams.image, newImage],
+      }));
+    }
   };
 
+  // 이미지 삭제
+  const handleDeleteImage = (index: number) => {
+    setParams((prevParams) => ({
+      ...prevParams,
+      image: prevParams.image.filter((_, i) => i !== index), // 선택한 이미지 제거
+    }));
+  };
+
+  // 이미지 업로드 버튼 클릭
+  const handleFileUploadClick = () => {
+    fileInputRef.current?.click();
+  };
+
+  const getDropdownIcon = (category: string) => {
+    const selectedItem = DropDownItems.find((item) => item.label === category);
+    return selectedItem ? selectedItem.icon : null;
+  };
+
+  useEffect(() => {
+    // selectedChips의 값을 params에 반영
+    setParams((prevParams) => ({
+      ...prevParams,
+      selectedChips: {
+        ...prevParams.selectedChips,
+        breedId: selectedChips.breedId,
+        diseaseIds: selectedChips.diseaseIds,
+        symptomIds: selectedChips.symptomIds,
+      },
+    }));
+  }, [selectedChips]);
+
+  const isAllParamsFilled =
+    params.category &&
+    params.title &&
+    params.content &&
+    params.selectedChips.breedId.length > 0;
+
   return (
-    <div>
-      <Tag label={"#태그1"} value={params.tag} setTag={setTag} />
-      <Tag label={"#태그2"} value={params.tag} setTag={setTag} />
-      <Tag label={"#태그3"} value={params.tag} setTag={setTag} />
-    </div>
+    <>
+      <div>
+        <HeaderNav
+          leftIcon={<IcDeleteBlack width={24} />}
+          onLeftClick={onBackClick}
+          centerContent={"글쓰기"}
+        />
+        <div className={writeWrap}>
+          {/* 제목 영역 */}
+          <WriteInputSection title={"제목"}>
+            <TextField
+              leftIcon={getDropdownIcon(params.category)}
+              icon={<IcRightArror width={20} />}
+              placeholder={"게시물 선택하기"}
+              onChange={onTextFieldChange}
+              onClick={onTextFieldClick}
+              isDelete={false}
+              value={params.category}
+            />
+            <DropDown
+              isOpen={isDropDownOpen}
+              items={DropDownItems}
+              onClickItem={onChangeValue}
+              toggleDropDown={toggleDropDown}
+            />
+          </WriteInputSection>
+          {/* 글 작성 영역 */}
+          <WriteInputSection title={"글 작성"}>
+            <TextField
+              placeholder={"제목을 입력해주세요"}
+              onClick={() => {
+                console.log("click");
+              }}
+              state={"write"}
+              value={params.title}
+              onClearClick={() => onChangeValue("title", "")}
+              onChange={(e) => onChangeValue("title", e.target.value)}
+            />
+            <Spacing marginBottom={"1.2"} />
+            <TextArea
+              value={params.content}
+              placeholder={`커뮤니티에 올릴 게시글 내용을 작성해 주세요.\n\n(예시: ~한 증상은 어디로 가야 하나요?)`}
+              onChange={(e) => onChangeValue("content", e.target.value)}
+            />
+            <Spacing marginBottom={"1.2"} />
+            <input
+              type="file"
+              onChange={handleAddImage}
+              accept="image/*"
+              ref={fileInputRef}
+              className={fileInput}
+            />
+            <div className={imageContainer}>
+              <IcImagePlus
+                className={plusImage}
+                onClick={handleFileUploadClick}
+              />
+              {params.image.map((imageSrc, index) => (
+                <ImageCover
+                  key={index}
+                  imageSrc={imageSrc}
+                  onDeleteClick={() => handleDeleteImage(index)}
+                />
+              ))}
+            </div>
+          </WriteInputSection>
+          {/* 태그 선택 영역 */}
+          <WriteInputSection title={"태그 선택"}>
+            {TagLabel.map((tag, index) => (
+              <>
+                <Tag
+                  key={index}
+                  placeholder={tag.label}
+                  value={tag.value.length > 0 ? tag.value.join(", ") : ""}
+                  isActive={tag.value.length > 0}
+                  onClick={() => setOpen(true)}
+                />
+                <Spacing marginBottom={"0.8"} />
+              </>
+            ))}
+          </WriteInputSection>
+          <Spacing marginBottom={"13.5"} />
+        </div>
+        {/* 바닥 버튼 영역 */}
+        <div className={bottomButton}>
+          <Button
+            variant={isAllParamsFilled ? "solidPrimary" : "solidNeutral"}
+            label={"글 작성 마치기"}
+            size={"large"}
+          />
+        </div>
+      </div>
+      <FilterBottomSheet />
+    </>
   );
 };
 
-export default Write
\ No newline at end of file
+export default Write;
diff --git a/src/shared/component/FilterBottomSheet/CategoryContent/CategoryContent.css.ts b/src/shared/component/FilterBottomSheet/CategoryContent/CategoryContent.css.ts
index 207fc228..130945c8 100644
--- a/src/shared/component/FilterBottomSheet/CategoryContent/CategoryContent.css.ts
+++ b/src/shared/component/FilterBottomSheet/CategoryContent/CategoryContent.css.ts
@@ -3,7 +3,6 @@ import { style } from "@vanilla-extract/css";
 export const styles = {
   kindWrapper: style({
     display: "flex",
-    width: "33.5rem",
     padding: "16px 0px",
     flexDirection: "column",
     alignItems: "flex-start",
@@ -12,7 +11,6 @@ export const styles = {
 
   symptomsWrapper: style({
     display: "flex",
-    width: "33.5rem",
     flexDirection: "column",
     alignItems: "flex-start",
   }),
diff --git a/src/shared/component/FilterBottomSheet/FilterBottomSheet.css.ts b/src/shared/component/FilterBottomSheet/FilterBottomSheet.css.ts
index 65ba19f1..47d30af7 100644
--- a/src/shared/component/FilterBottomSheet/FilterBottomSheet.css.ts
+++ b/src/shared/component/FilterBottomSheet/FilterBottomSheet.css.ts
@@ -13,6 +13,13 @@ export const selectedZone = style({
   whiteSpace: "nowrap",
   overflowX: "scroll",
   gap: "1rem",
+  selectors: {
+    "&::-webkit-scrollbar": {
+      display: "none",
+    },
+  },
+  msOverflowStyle: "none",
+  scrollbarWidth: "none",
 });
 
 export const categoryZone = style({
@@ -31,8 +38,7 @@ export const categoryZone = style({
 });
 
 export const bodyZone = style({
-  display: "flex",
-  justifyContent: "center",
+  padding: "0 2rem",
 });
 
 export const buttonWrapper = style({
@@ -40,7 +46,7 @@ export const buttonWrapper = style({
   bottom: "0",
 
   display: "flex",
-  width: "37.5rem",
+  width: "100%",
   height: "8.8rem",
   padding: "1.2rem 2rem 3.2rem 2rem",
   justifyContent: "center",
diff --git a/src/shared/util/checkKeysInParams.ts b/src/shared/util/checkKeysInParams.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/src/store/filter.ts b/src/store/filter.ts
index 155fc226..9a394918 100644
--- a/src/store/filter.ts
+++ b/src/store/filter.ts
@@ -55,7 +55,10 @@ interface FilterState {
 
   // 각 category에 해당하는 데이터 배열
   categoryData: CategoryData;
-  setCategoryData: (category: CategoryType, data: CategoryKind | CategorySymptom | CategoryDisease) => void;
+  setCategoryData: (
+    category: CategoryType,
+    data: CategoryKind | CategorySymptom | CategoryDisease
+  ) => void;
 }
 
 export const useFilterStore = create<FilterState>((set) => ({
@@ -66,30 +69,26 @@ export const useFilterStore = create<FilterState>((set) => ({
   category: "kind",
   setCategory: (category) => set({ category }),
 
-  selectedChips: { breedId: [], diseaseIds: [], symptomIds: [] }, // 초기화된 구조
+  selectedChips: { breedId: [], diseaseIds: [], symptomIds: [] },
   toggleChips: ({ id, category }) =>
     set((state) => {
-      // const keyMap = {
-      //   kind: "breedId",
-      //   disease: "diseaseIds",
-      //   symptoms: "symptomIds",
-      // } as const;
-
-      // // category가 keyMap에 존재하는지 체크
-      // console.log(category);
-
-      // if (!(category in keyMap)) {
-      //   console.error(`Invalid category: ${category}`);
-      //   return state; // 잘못된 category 값인 경우 상태를 그대로 반환
-      // }
-
-      // const key = keyMap[category as keyof typeof keyMap];
-
       const currentList = state.selectedChips[category] || [];
       const alreadyExists = currentList.includes(id);
 
-      // ID 추가 또는 제거
-      const updatedList = alreadyExists ? currentList.filter((chipId) => chipId !== id) : [...currentList, id];
+      // 카테고리가 'kind'일 경우 하나만 선택 가능
+      if (category === "breedId") {
+        return {
+          selectedChips: {
+            ...state.selectedChips,
+            [category]: alreadyExists ? [] : [id], // 선택된 ID만 남기고 초기화
+          },
+        };
+      }
+
+      // 일반적인 다중 선택 로직
+      const updatedList = alreadyExists
+        ? currentList.filter((chipId) => chipId !== id) // 이미 선택되어 있으면 제거
+        : [...currentList, id]; // 선택되지 않은 경우 추가
 
       return {
         selectedChips: {
@@ -99,7 +98,11 @@ export const useFilterStore = create<FilterState>((set) => ({
       };
     }),
 
-  categoryData: { kind: CATEGORY_KIND, symptoms: CATEGORY_SYMPTOM, disease: CATEGORY_DISEASE }, //todo: api 연결 후에는 [] 로 변경할 것
+  categoryData: {
+    kind: CATEGORY_KIND,
+    symptoms: CATEGORY_SYMPTOM,
+    disease: CATEGORY_DISEASE,
+  }, //todo: api 연결 후에는 [] 로 변경할 것
   setCategoryData: (category, data) =>
     set((state) => ({
       categoryData: { ...state.categoryData, [category]: data }, // todo: 이거 조금 수정 필요할 수도 있음