prgrms-web-devcourse-final-project
diff --git a/‎src/app/community/[id]/page.tsx‎
Lines changed: 2 additions & 2 deletions b/‎src/app/community/[id]/page.tsx‎
Lines changed: 2 additions & 2 deletions
diff --git a/‎src/app/community/write/page.tsx‎
Lines changed: 15 additions & 2 deletions b/‎src/app/community/write/page.tsx‎
Lines changed: 15 additions & 2 deletions
diff --git a/‎src/domains/community/main/PostInfo.tsx‎ renamed to ‎src/domains/community/components/postInfo/PostInfo.tsx‎ b/‎src/domains/community/main/PostInfo.tsx‎ renamed to ‎src/domains/community/components/postInfo/PostInfo.tsx‎
diff --git a/‎src/domains/community/components/tag/CocktailTag.tsx‎
Lines changed: 16 additions & 0 deletions b/‎src/domains/community/components/tag/CocktailTag.tsx‎
Lines changed: 16 additions & 0 deletions
diff --git a/‎src/domains/community/components/tag/Tag.tsx‎
Lines changed: 27 additions & 0 deletions b/‎src/domains/community/components/tag/Tag.tsx‎
Lines changed: 27 additions & 0 deletions
diff --git a/‎src/domains/community/components/tag/TagList.tsx‎
Lines changed: 36 additions & 0 deletions b/‎src/domains/community/components/tag/TagList.tsx‎
Lines changed: 36 additions & 0 deletions
diff --git a/‎src/domains/community/detail/CocktailTag.tsx‎
Lines changed: 0 additions & 21 deletions b/‎src/domains/community/detail/CocktailTag.tsx‎
Lines changed: 0 additions & 21 deletions
diff --git a/‎src/domains/community/detail/DetailContent.tsx‎
Lines changed: 3 additions & 3 deletions b/‎src/domains/community/detail/DetailContent.tsx‎
Lines changed: 3 additions & 3 deletions
diff --git a/‎src/domains/community/main/PostCard.tsx‎
Lines changed: 2 additions & 2 deletions b/‎src/domains/community/main/PostCard.tsx‎
Lines changed: 2 additions & 2 deletions
diff --git a/‎src/domains/community/write/Category.tsx‎
Lines changed: 2 additions & 2 deletions b/‎src/domains/community/write/Category.tsx‎
Lines changed: 2 additions & 2 deletions
@@ -7,9 +7,9 @@ import Comment from '@/domains/shared/components/comment/Comment';
 
 function Page() {
   return (
-    <div className="w-full mb-10 flex relative">
+    <div className="w-full relative">
       <StarBg className="w-full h-32 absolute"></StarBg>
-      <article className="page-layout max-w-824 flex-1 z-5">
+      <article className="page-layout max-w-824 z-5">
         <DetailHeader />
         <DetailTitle />
         <DetailContent />
 
@@ -1,21 +1,34 @@
+'use client';
+
+import Tag from '@/domains/community/components/tag/Tag';
 import Category from '@/domains/community/write/Category';
+import TagModal from '@/domains/community/write/cocktail-tag/TagModal';
 import CompleteBtn from '@/domains/community/write/CompleteBtn';
 import FormTitle from '@/domains/community/write/FormTitle';
+import ImageSection from '@/domains/community/write/image-upload/ImageSection';
 import WriteForm from '@/domains/community/write/WriteForm';
 import StarBg from '@/domains/shared/components/star-bg/StarBg';
+import { useState } from 'react';
 
 function Page() {
+  const [isOpen, setIsOpen] = useState(false);
+
   return (
-    <div className="w-full relative">
+    <div className="w-full mb-20 flex relative">
       <StarBg className="w-full h-32 absolute"></StarBg>
-      <div className="page-layout max-w-824 z-5">
+      <div className="page-layout max-w-824 flex-1 z-5">
         <CompleteBtn />
         <section>
           <FormTitle />
           <Category />
           <WriteForm />
         </section>
+        <ImageSection />
+        <section className="mt-8">
+          <Tag use="write" onClick={() => setIsOpen(true)} />
+        </section>
       </div>
+      {isOpen && <TagModal isOpen={isOpen} setIsOpen={setIsOpen} />}
     </div>
   );
 }
 
@@ -0,0 +1,16 @@
+import Tag from './Tag';
+import TagList from './TagList';
+
+function CocktailTag({ use }: { use: 'write' | 'detail' }) {
+  return (
+    <div
+      role="list"
+      className={`flex sm:gap-5 gap-2 sm:flex-row flex-col justify-center sm:items-center items-start sm:mb-0 mb-2 transition-all ease-in `}
+    >
+      <Tag use={use} />
+      <TagList />
+    </div>
+  );
+}
+
+export default CocktailTag;
@@ -0,0 +1,27 @@
+import TagIcon from '@/shared/assets/icons/tag_30.svg';
+
+type Props = {
+  use: 'write' | 'detail';
+  onClick?: () => void;
+};
+
+function Tag({ use, onClick }: Props) {
+  return use === 'write' ? (
+    <button
+      type="button"
+      onClick={onClick}
+      className="flex gap-1 items-center justify-center text-sm text-secondary border-1 border-gray p-1 rounded-3xl cursor-pointer w-32 hover:bg-secondary/10 transition-colors duration-75"
+      aria-label="칵테일 태그 선택"
+    >
+      <TagIcon />
+      칵테일태그
+    </button>
+  ) : (
+    <p className="flex gap-1 items-center justify-center text-sm text-secondary">
+      <TagIcon />
+      칵테일태그
+    </p>
+  );
+}
+
+export default Tag;
@@ -0,0 +1,36 @@
+import CloseIcon from '@/shared/assets/icons/close_20.svg';
+
+function TagList({ hasDelete }: { hasDelete?: boolean }) {
+  return (
+    <ul className="flex text-sm gap-2 items-center text-primary font-light">
+      <li
+        className={`bg-[#FFE4E6] pl-2 pr-1 py-[1px] rounded-md flex gap-2 ${hasDelete && 'hover:opacity-90'}`}
+      >
+        <p>올드패션</p>
+        {hasDelete && (
+          <button
+            type="button"
+            className=" rounded-md transition-colors ease-in hover:text-primary/40"
+          >
+            <CloseIcon />
+          </button>
+        )}
+      </li>
+      <li
+        className={`bg-[#FFE4E6] pl-2 pr-1 py-[1px] rounded-md flex gap-2 ${hasDelete && 'hover:opacity-90'}`}
+      >
+        <p>미도리 샤워</p>
+        {hasDelete && (
+          <button
+            type="button"
+            className=" rounded-md transition-colors ease-in hover:text-primary/40"
+          >
+            <CloseIcon />
+          </button>
+        )}
+      </li>
+    </ul>
+  );
+}
+
+export default TagList;
@@ -1,9 +1,9 @@
 import Image from 'next/image';
 import prePost from '@/shared/assets/images/prepost_img.webp';
 
-import PostInfo from '../main/PostInfo';
+import PostInfo from '../components/postInfo/PostInfo';
 
-import CocktailTag from './CocktailTag';
+import CocktailTag from '../components/tag/CocktailTag';
 import DetailTabMobile from './tab/DetailTabMobile';
 
 function DetailContent() {
@@ -34,7 +34,7 @@ function DetailContent() {
         <br />
         <p>글입니다다다다다다다다다다다다</p>
       </article>
-      <CocktailTag />
+      <CocktailTag use="detail" />
       <PostInfo />
       <div className="block md:hidden mt-2">
         <DetailTabMobile />
 
@@ -1,12 +1,12 @@
 import Image from 'next/image';
 import prePost from '@/shared/assets/images/prepost_img.webp';
 
-import PostInfo from './PostInfo';
+import PostInfo from '../components/postInfo/PostInfo';
 import Label from '@/domains/shared/components/label/Label';
 
 function PostCard({ label }: { label: string }) {
   return (
-    <article className="pt-[30] pb-3 border-b-1 border-gray-light">
+    <article className="pt-5 pb-3 border-b-1 border-gray-light">
       <Label title={label} />
 
       <section className="flex items-start justify-between mt-3 cursor-pointer" role="link">
 
@@ -2,8 +2,8 @@ import SelectBox from '@/domains/shared/components/select-box/SelectBox';
 
 function Category() {
   return (
-    <div>
-      <SelectBox option={['레시피', '팁', '질문', '자유']} title="카테고리" />
+    <div className="w-full h-[38px] flex items-center justify-end mt-10">
+      <SelectBox option={['레시피', '팁', '질문', '자유']} title="카테고리" use="write" />
     </div>
   );
 }