feat:여행코스 추가 및 삭제 컴포넌트 추가(#44)

src/components/addTravel/Course.tsx

@@ -0,0 +1,95 @@
+import { plusBtn, textBox } from '@/components/addTravel/Details';
+import useFieldStore from '@/stores/useFieldStore';
+import { css } from '@emotion/react';
+import { CirclePlus, MapPin, X } from 'lucide-react';
+import { useRef, useState } from 'react';
+
+const Course = () => {
+  const [isComposing, setIsComposing] = useState(false);
+  const fields = useFieldStore((state) => state.fields);
+  const addField = useFieldStore((state) => state.addField);
+  const removeField = useFieldStore((state) => state.removeField);
+  const courseRef = useRef<HTMLInputElement>(null);
+
+  const handleAddCourse = () => {
+    if (courseRef.current) {
+      addField('courseList', courseRef.current.value);
+      courseRef.current.value = '';
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter' && !isComposing) {
+      handleAddCourse();
+    }
+  };
+
+  return (
+    <div css={courseWrapper}>
+      <p>여행 코스</p>
+      <ul>
+        {fields.courseList.map((course, index) => (
+          <li key={index}>
+            <div css={courseList}>
+              <MapPin css={{ marginRight: '10px' }} />
+              <span>{course}</span>
+              <button onClick={() => removeField('courseList', index)}>
+                <X size={20} />
+              </button>
+            </div>
+          </li>
+        ))}
+      </ul>
+      <div css={courseAddWrapper}>
+        <MapPin css={{ marginRight: '10px' }} />
+        <input
+          css={textBox}
+          ref={courseRef}
+          type="text"
+          onKeyDown={(e) => handleKeyDown(e)}
+          onCompositionStart={() => setIsComposing(true)}
+          onCompositionEnd={() => setIsComposing(false)}
+          placeholder="40자 내외로 여행 코스를 작성해주세요."
+        />
+        <button css={plusBtn} onClick={handleAddCourse}>
+          <CirclePlus size={24} />
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default Course;
+
+const courseWrapper = css`
+  width: 100%;
+  & p {
+    margin: 15px 0 5px;
+    font-size: 18px;
+  }
+`;
+const courseList = css`
+  display: flex;
+  align-items: center;
+  text-align: center;
+  border-radius: 8px;
+  background-color: #f8f8f8;
+  margin-bottom: 10px;
+  padding: 10px 20px;
+  & button {
+    color: #888;
+    margin-left: 10px;
+    transition: all 0.2s ease-in-out;
+    :hover {
+      transform: scale(1.2);
+    }
+  }
+`;
+const courseAddWrapper = css`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 8px;
+  background-color: #f8f8f8;
+  padding: 10px 20px;
+`;

src/components/addTravel/Details.tsx

@@ -89,15 +89,15 @@ const Details = ({ title }: DetailsProps) => {
 
 export default Details;
 
-const textBox = css`
+export const textBox = css`
   border: 1px solid #dedede;
   border-radius: 8px;
   height: 35px;
   padding: 0 10px;
   margin: 10px 0;
 `;
 
-const plusBtn = css`
+export const plusBtn = css`
   margin-left: 10px;
   display: flex;
   align-items: center;

src/components/addTravel/DetailsList.tsx

@@ -71,6 +71,7 @@ const DetailsList = ({ option }: DetailsListProps) => {
 };
 
 export default DetailsList;
+
 const list = css`
   display: flex;
   align-items: center;

src/pages/AddTravel.tsx

@@ -1,4 +1,5 @@
 import ChoiceTags from '@/components/addTravel/ChoiceTags';
+import Course from '@/components/addTravel/Course';
 import Details from '@/components/addTravel/Details';
 import Introduction from '@/components/addTravel/Introduction';
 import Thumbnail from '@/components/addTravel/Thumbnail';
@@ -14,6 +15,7 @@ const AddTravel = () => {
       </GrayBack>
       <Thumbnail />
       <Introduction />
+      <Course />
       <ChoiceTags />
       <GrayBack title={'가격'} price={true} padding={true}>
         <input css={noneStyleInput} type="number" placeholder="0" />

src/stores/useFieldStore.ts

@@ -1,6 +1,6 @@
 import { create } from 'zustand';
 
-export type Options = 'inclusionList' | 'notInclusionList' | 'faqs';
+export type Options = 'inclusionList' | 'notInclusionList' | 'faqs' | 'courseList';
 interface Faqs {
   question: string;
   answer: string;
@@ -9,6 +9,7 @@ interface Fields {
   inclusionList: string[];
   notInclusionList: string[];
   faqs: Faqs[];
+  courseList: string[];
 }
 
 interface State {
@@ -25,6 +26,7 @@ const useFieldStore = create<State & Action>((set) => ({
     inclusionList: [],
     notInclusionList: [],
     faqs: [],
+    courseList: [],
   },
   addField: (option: Options, newField: string, answer?: string) =>
     set((state) =>
@@ -55,6 +57,7 @@ const useFieldStore = create<State & Action>((set) => ({
         inclusionList: [],
         notInclusionList: [],
         faqs: [],
+        courseList: [],
       },
     }),
 }));