From f2d16b9e6d9a13e24c3ebb17849a20864f67761b Mon Sep 17 00:00:00 2001
From: fr0gydev <ljh130334@naver.com>
Date: Tue, 22 Jul 2025 23:54:11 +0900
Subject: [PATCH 01/11] =?UTF-8?q?feat:=20=EC=83=88=20=EA=B8=80=20=EC=9E=91?=
 =?UTF-8?q?=EC=84=B1=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../createpost/PhotoSection.styled.ts         |  83 +++++++++++
 src/components/createpost/PhotoSection.tsx    |  68 +++++++++
 .../createpost/PostContentSection.styled.ts   |  39 +++++
 .../createpost/PostContentSection.tsx         |  31 ++++
 .../createpost/PrivacyToggleSection.tsx       |  28 ++++
 .../createpost/TagSelectionSection.tsx        |  30 ++++
 src/pages/index.tsx                           |   2 +
 src/pages/post/CreatePost.styled.ts           |  14 ++
 src/pages/post/CreatePost.tsx                 | 137 ++++++++++++++++++
 9 files changed, 432 insertions(+)
 create mode 100644 src/components/createpost/PhotoSection.styled.ts
 create mode 100644 src/components/createpost/PhotoSection.tsx
 create mode 100644 src/components/createpost/PostContentSection.styled.ts
 create mode 100644 src/components/createpost/PostContentSection.tsx
 create mode 100644 src/components/createpost/PrivacyToggleSection.tsx
 create mode 100644 src/components/createpost/TagSelectionSection.tsx
 create mode 100644 src/pages/post/CreatePost.styled.ts
 create mode 100644 src/pages/post/CreatePost.tsx

diff --git a/src/components/createpost/PhotoSection.styled.ts b/src/components/createpost/PhotoSection.styled.ts
new file mode 100644
index 00000000..2513cdbb
--- /dev/null
+++ b/src/components/createpost/PhotoSection.styled.ts
@@ -0,0 +1,83 @@
+import styled from '@emotion/styled';
+import { typography, semanticColors, colors } from '../../styles/global/global';
+
+export const PhotoContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`;
+
+export const PhotoGrid = styled.div`
+  display: flex;
+  gap: 12px;
+  align-items: center;
+`;
+
+export const AddPhotoButton = styled.button`
+  width: 80px;
+  height: 80px;
+  border: 2px dashed ${colors.grey[300]};
+  background-color: transparent;
+  border-radius: 8px;
+  color: ${semanticColors.text.secondary};
+  font-size: 32px;
+  font-weight: ${typography.fontWeight.regular};
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s;
+
+  &:hover:not(:disabled) {
+    border-color: ${semanticColors.text.primary};
+    color: ${semanticColors.text.primary};
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`;
+
+export const PhotoItem = styled.div`
+  position: relative;
+  width: 80px;
+  height: 80px;
+`;
+
+export const PhotoImage = styled.img`
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 8px;
+`;
+
+export const RemoveButton = styled.button`
+  position: absolute;
+  top: -8px;
+  right: -8px;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background-color: ${semanticColors.button.fill.primary};
+  color: ${semanticColors.text.primary};
+  border: none;
+  font-size: 14px;
+  font-weight: ${typography.fontWeight.bold};
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+
+  &:hover {
+    background-color: ${semanticColors.button.fill.background};
+  }
+`;
+
+export const PhotoCount = styled.div`
+  align-self: flex-end;
+  color: ${semanticColors.text.tertiary};
+  font-size: ${typography.fontSize.xs};
+  font-weight: ${typography.fontWeight.regular};
+`;
diff --git a/src/components/createpost/PhotoSection.tsx b/src/components/createpost/PhotoSection.tsx
new file mode 100644
index 00000000..e98d7996
--- /dev/null
+++ b/src/components/createpost/PhotoSection.tsx
@@ -0,0 +1,68 @@
+import { useRef } from 'react';
+import { Section, SectionTitle } from '../../pages/group/CommonSection.styled';
+import {
+  PhotoContainer,
+  PhotoGrid,
+  PhotoItem,
+  AddPhotoButton,
+  PhotoImage,
+  RemoveButton,
+  PhotoCount,
+} from './PhotoSection.styled';
+
+interface PhotoSectionProps {
+  photos: File[];
+  onPhotoAdd: (files: File[]) => void;
+  onPhotoRemove: (index: number) => void;
+}
+
+const PhotoSection = ({ photos, onPhotoAdd, onPhotoRemove }: PhotoSectionProps) => {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleFileInputClick = () => {
+    fileInputRef.current?.click();
+  };
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = Array.from(e.target.files || []);
+    if (files.length > 0) {
+      onPhotoAdd(files);
+    }
+    // input 값 초기화 (같은 파일을 다시 선택할 수 있도록)
+    e.target.value = '';
+  };
+
+  const createImageUrl = (file: File) => {
+    return URL.createObjectURL(file);
+  };
+
+  return (
+    <Section>
+      <SectionTitle>사진 추가</SectionTitle>
+      <PhotoContainer>
+        <PhotoGrid>
+          <AddPhotoButton onClick={handleFileInputClick} disabled={photos.length >= 3}>
+            +
+          </AddPhotoButton>
+          {photos.map((photo, index) => (
+            <PhotoItem key={index}>
+              <PhotoImage src={createImageUrl(photo)} alt={`선택된 사진 ${index + 1}`} />
+              <RemoveButton onClick={() => onPhotoRemove(index)}>×</RemoveButton>
+            </PhotoItem>
+          ))}
+        </PhotoGrid>
+        <PhotoCount>{photos.length}/3개</PhotoCount>
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept="image/*"
+          multiple
+          style={{ display: 'none' }}
+          onChange={handleFileChange}
+        />
+      </PhotoContainer>
+    </Section>
+  );
+};
+
+export default PhotoSection;
diff --git a/src/components/createpost/PostContentSection.styled.ts b/src/components/createpost/PostContentSection.styled.ts
new file mode 100644
index 00000000..ff086eb6
--- /dev/null
+++ b/src/components/createpost/PostContentSection.styled.ts
@@ -0,0 +1,39 @@
+import styled from '@emotion/styled';
+import { typography, semanticColors, colors } from '../../styles/global/global';
+
+export const TextAreaBox = styled.div`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+`;
+
+export const TextArea = styled.textarea`
+  width: 100%;
+  min-height: 100px;
+  padding: 16px;
+  background-color: ${semanticColors.background.primary};
+  border: 1px solid ${colors.grey[300]};
+  border-radius: 12px;
+  color: ${semanticColors.text.primary};
+  font-size: ${typography.fontSize.base};
+  font-weight: ${typography.fontWeight.regular};
+  font-family: ${typography.fontFamily.primary};
+  resize: none;
+  outline: none;
+
+  &::placeholder {
+    color: ${semanticColors.text.secondary};
+  }
+
+  &:focus {
+    border-color: ${semanticColors.text.primary};
+  }
+`;
+
+export const CharacterCount = styled.div`
+  align-self: flex-end;
+  margin-top: 8px;
+  color: ${semanticColors.text.tertiary};
+  font-size: ${typography.fontSize.xs};
+  font-weight: ${typography.fontWeight.regular};
+`;
diff --git a/src/components/createpost/PostContentSection.tsx b/src/components/createpost/PostContentSection.tsx
new file mode 100644
index 00000000..c3daed3b
--- /dev/null
+++ b/src/components/createpost/PostContentSection.tsx
@@ -0,0 +1,31 @@
+import { Section, SectionTitle } from '../../pages/group/CommonSection.styled';
+import { TextAreaBox, TextArea, CharacterCount } from './PostContentSection.styled';
+
+interface PostContentSectionProps {
+  content: string;
+  onContentChange: (value: string) => void;
+}
+
+const PostContentSection = ({ content, onContentChange }: PostContentSectionProps) => {
+  const maxLength = 2000;
+
+  return (
+    <Section>
+      <SectionTitle>글 작성</SectionTitle>
+      <TextAreaBox>
+        <TextArea
+          placeholder="...한 생각이 들었어요😶"
+          value={content}
+          onChange={e => onContentChange(e.target.value)}
+          maxLength={maxLength}
+          rows={4}
+        />
+        <CharacterCount>
+          {content.length} / {maxLength}
+        </CharacterCount>
+      </TextAreaBox>
+    </Section>
+  );
+};
+
+export default PostContentSection;
diff --git a/src/components/createpost/PrivacyToggleSection.tsx b/src/components/createpost/PrivacyToggleSection.tsx
new file mode 100644
index 00000000..abf1505c
--- /dev/null
+++ b/src/components/createpost/PrivacyToggleSection.tsx
@@ -0,0 +1,28 @@
+import { Section, SectionTitle } from '../../pages/group/CommonSection.styled';
+import {
+  ToggleContainer,
+  ToggleLabel,
+  ToggleSwitch,
+  ToggleSlider,
+} from './PrivacyToggleSection.styled';
+
+interface PrivacyToggleSectionProps {
+  isPrivate: boolean;
+  onToggle: () => void;
+}
+
+const PrivacyToggleSection = ({ isPrivate, onToggle }: PrivacyToggleSectionProps) => {
+  return (
+    <Section>
+      <SectionTitle>공개 설정</SectionTitle>
+      <ToggleContainer>
+        <ToggleLabel>비공개로 설정</ToggleLabel>
+        <ToggleSwitch active={isPrivate} onClick={onToggle}>
+          <ToggleSlider active={isPrivate} />
+        </ToggleSwitch>
+      </ToggleContainer>
+    </Section>
+  );
+};
+
+export default PrivacyToggleSection;
diff --git a/src/components/createpost/TagSelectionSection.tsx b/src/components/createpost/TagSelectionSection.tsx
new file mode 100644
index 00000000..c679ec0f
--- /dev/null
+++ b/src/components/createpost/TagSelectionSection.tsx
@@ -0,0 +1,30 @@
+import { Section, SectionTitle } from '../../pages/group/CommonSection.styled';
+import { GenreButtonGroup, GenreButton } from '../creategroup/GenreSelectionSection.styled';
+
+interface TagSelectionSectionProps {
+  selectedTags: string[];
+  onTagToggle: (tag: string) => void;
+}
+
+const availableTags = ['문학', '과학·IT', '사회과학', '인문학', '예술'];
+
+const TagSelectionSection = ({ selectedTags, onTagToggle }: TagSelectionSectionProps) => {
+  return (
+    <Section>
+      <SectionTitle>태그</SectionTitle>
+      <GenreButtonGroup>
+        {availableTags.map(tag => (
+          <GenreButton
+            key={tag}
+            active={selectedTags.includes(tag)}
+            onClick={() => onTagToggle(tag)}
+          >
+            {tag}
+          </GenreButton>
+        ))}
+      </GenreButtonGroup>
+    </Section>
+  );
+};
+
+export default TagSelectionSection;
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 25584018..d81042c1 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -10,6 +10,7 @@ import SignupGenre from './signup/SignupGenre';
 import SignupNickname from './signup/SignupNickname';
 import SignupDone from './signup/SignupDone';
 import CreateGroup from './group/CreateGroup';
+import CreatePost from './post/CreatePost';
 import Group from './group/Group';
 import Feed from './feed/Feed';
 import GroupSearch from './groupSearch/GroupSearch';
@@ -32,6 +33,7 @@ const Router = () => {
         </Route>
         <Route path="signupdone" element={<SignupDone />} />
         <Route path="group/create" element={<CreateGroup />} />
+        <Route path="post/create" element={<CreatePost />} />
         <Route path="group" element={<Group />} />
         <Route path="groupsearch" element={<GroupSearch />} />
         <Route path="feed" element={<Feed />} />
diff --git a/src/pages/post/CreatePost.styled.ts b/src/pages/post/CreatePost.styled.ts
new file mode 100644
index 00000000..ca28490b
--- /dev/null
+++ b/src/pages/post/CreatePost.styled.ts
@@ -0,0 +1,14 @@
+import styled from '@emotion/styled';
+import { semanticColors } from '../../styles/global/global';
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  background-color: ${semanticColors.background.primary};
+  min-width: 360px;
+  max-width: 767px;
+  min-height: 100vh;
+  margin: 0 auto;
+  padding: 96px 20px 100px 20px;
+  box-sizing: border-box;
+`;
diff --git a/src/pages/post/CreatePost.tsx b/src/pages/post/CreatePost.tsx
new file mode 100644
index 00000000..21b4768a
--- /dev/null
+++ b/src/pages/post/CreatePost.tsx
@@ -0,0 +1,137 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import TitleHeader from '../../components/common/TitleHeader';
+import BookSearchBottomSheet from '../../components/common/BookSearchBottomSheet/BookSearchBottomSheet';
+import BookSelectionSection from '../../components/creategroup/BookSelectionSection';
+import PostContentSection from '../../components/createpost/PostContentSection';
+import PhotoSection from '../../components/createpost/PhotoSection';
+import PrivacySettingSection from '../../components/creategroup/PrivacySettingSection/PrivacySettingSection';
+import TagSelectionSection from '../../components/createpost/TagSelectionSection';
+import leftarrow from '../../assets/common/leftArrow.svg';
+import { Container } from './CreatePost.styled';
+import { Section } from '../group/CommonSection.styled';
+
+const CreatePost = () => {
+  const navigate = useNavigate();
+  const [selectedBook, setSelectedBook] = useState<any>(null);
+  const [postContent, setPostContent] = useState('');
+  const [selectedPhotos, setSelectedPhotos] = useState<File[]>([]);
+  const [isPrivate, setIsPrivate] = useState(false);
+  const [password, setPassword] = useState('');
+  const [selectedTags, setSelectedTags] = useState<string[]>([]);
+  const [isBookSearchOpen, setIsBookSearchOpen] = useState(false);
+
+  const handleBackClick = () => {
+    navigate(-1);
+  };
+
+  const handleCompleteClick = () => {
+    // 완료 로직 추후 구현
+    console.log('글 작성 완료');
+    console.log('선택된 책:', selectedBook);
+    console.log('글 내용:', postContent);
+    console.log('선택된 사진:', selectedPhotos);
+    console.log('비공개 설정:', isPrivate);
+    console.log('선택된 태그:', selectedTags);
+  };
+
+  const handleBookSearchOpen = () => {
+    setIsBookSearchOpen(true);
+  };
+
+  const handleChangeBook = () => {
+    setIsBookSearchOpen(true);
+  };
+
+  const handleBookSearchClose = () => {
+    setIsBookSearchOpen(false);
+  };
+
+  const handleBookSelect = (book: any) => {
+    setSelectedBook(book);
+  };
+
+  const handlePhotoAdd = (files: File[]) => {
+    setSelectedPhotos(prev => [...prev, ...files].slice(0, 3)); // 최대 3개까지
+  };
+
+  const handlePhotoRemove = (index: number) => {
+    setSelectedPhotos(prev => prev.filter((_, i) => i !== index));
+  };
+
+  const handlePrivacyToggle = () => {
+    setIsPrivate(!isPrivate);
+    // 비공개 설정을 끄면 비밀번호도 초기화
+    if (isPrivate) {
+      setPassword('');
+    }
+  };
+
+  const handlePasswordChange = (newPassword: string) => {
+    setPassword(newPassword);
+  };
+
+  const handlePasswordClose = () => {
+    setPassword('');
+  };
+
+  const handleTagToggle = (tag: string) => {
+    setSelectedTags(prev => (prev.includes(tag) ? prev.filter(t => t !== tag) : [...prev, tag]));
+  };
+
+  const isFormValid = selectedBook && postContent.trim() !== '';
+
+  return (
+    <>
+      <TitleHeader
+        leftIcon={<img src={leftarrow} alt="뒤로가기" />}
+        title="새 글"
+        rightButton="완료"
+        onLeftClick={handleBackClick}
+        onRightClick={handleCompleteClick}
+        isNextActive={isFormValid}
+      />
+      <Container>
+        <BookSelectionSection
+          selectedBook={selectedBook}
+          onSearchClick={handleBookSearchOpen}
+          onChangeClick={handleChangeBook}
+        />
+
+        <Section showDivider />
+
+        <PostContentSection content={postContent} onContentChange={setPostContent} />
+
+        <Section showDivider />
+
+        <PhotoSection
+          photos={selectedPhotos}
+          onPhotoAdd={handlePhotoAdd}
+          onPhotoRemove={handlePhotoRemove}
+        />
+
+        <Section showDivider />
+
+        <PrivacySettingSection
+          isPrivate={isPrivate}
+          password={password}
+          onToggle={handlePrivacyToggle}
+          onPasswordChange={handlePasswordChange}
+          onPasswordClose={handlePasswordClose}
+        />
+
+        <Section showDivider />
+
+        <TagSelectionSection selectedTags={selectedTags} onTagToggle={handleTagToggle} />
+
+        <BookSearchBottomSheet
+          isOpen={isBookSearchOpen}
+          onClose={handleBookSearchClose}
+          onSelectBook={handleBookSelect}
+        />
+      </Container>
+    </>
+  );
+};
+
+export default CreatePost;

From 87c6b994ce7505e420459f1317078f527ed8d49f Mon Sep 17 00:00:00 2001
From: fr0gydev <ljh130334@naver.com>
Date: Wed, 23 Jul 2025 00:24:31 +0900
Subject: [PATCH 02/11] =?UTF-8?q?fix:=20=EC=83=88=20=EA=B8=80=20=EC=9E=91?=
 =?UTF-8?q?=EC=84=B1=20=EC=99=84=EB=A3=8C=20=EC=A1=B0=EA=B1=B4=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/post/CreatePost.tsx | 24 ++++++++++++++++++------
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/pages/post/CreatePost.tsx b/src/pages/post/CreatePost.tsx
index 21b4768a..e6774c02 100644
--- a/src/pages/post/CreatePost.tsx
+++ b/src/pages/post/CreatePost.tsx
@@ -26,13 +26,24 @@ const CreatePost = () => {
   };
 
   const handleCompleteClick = () => {
-    // 완료 로직 추후 구현
+    // 필수 항목 검증
+    if (!isFormValid) {
+      console.log('필수 항목을 입력해주세요.');
+      return;
+    }
+
+    // 글 작성 완료 로직
     console.log('글 작성 완료');
-    console.log('선택된 책:', selectedBook);
-    console.log('글 내용:', postContent);
-    console.log('선택된 사진:', selectedPhotos);
-    console.log('비공개 설정:', isPrivate);
-    console.log('선택된 태그:', selectedTags);
+    console.log('필수 - 선택된 책:', selectedBook);
+    console.log('필수 - 글 내용:', postContent);
+    console.log('선택 - 선택된 사진:', selectedPhotos);
+    console.log('선택 - 비공개 설정:', isPrivate);
+    console.log('선택 - 비밀번호:', password);
+    console.log('선택 - 선택된 태그:', selectedTags);
+
+    // TODO: API 호출하여 글 등록
+    // 완료 후 이전 페이지로 이동
+    navigate(-1);
   };
 
   const handleBookSearchOpen = () => {
@@ -79,6 +90,7 @@ const CreatePost = () => {
     setSelectedTags(prev => (prev.includes(tag) ? prev.filter(t => t !== tag) : [...prev, tag]));
   };
 
+  // 책 선택과 글 내용만 필수, 나머지는 선택사항
   const isFormValid = selectedBook && postContent.trim() !== '';
 
   return (

From 83a25835379670326843810e8c729ae77773d590 Mon Sep 17 00:00:00 2001
From: fr0gydev <ljh130334@naver.com>
Date: Wed, 23 Jul 2025 00:30:27 +0900
Subject: [PATCH 03/11] =?UTF-8?q?feat:=20=EC=B1=85=20=EA=B2=80=EC=83=89=20?=
 =?UTF-8?q?=ED=95=84=ED=84=B0=20UI=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../BookSearchBottomSheet.tsx                 | 74 ++++++++++++-------
 1 file changed, 49 insertions(+), 25 deletions(-)

diff --git a/src/components/common/BookSearchBottomSheet/BookSearchBottomSheet.tsx b/src/components/common/BookSearchBottomSheet/BookSearchBottomSheet.tsx
index bc3a3c19..b8aa5dff 100644
--- a/src/components/common/BookSearchBottomSheet/BookSearchBottomSheet.tsx
+++ b/src/components/common/BookSearchBottomSheet/BookSearchBottomSheet.tsx
@@ -37,7 +37,7 @@ interface BookSearchBottomSheetProps {
 type TabType = 'saved' | 'group';
 
 // Mock Data
-const mockBooks: Book[] = [
+const mockSavedBooks: Book[] = [
   {
     id: 1,
     title: '토마토 컵라면',
@@ -56,51 +56,53 @@ const mockBooks: Book[] = [
     author: '작가명',
     cover: '/src/assets/books/hormone.svg',
   },
+];
+
+const mockGroupBooks: Book[] = [
   {
     id: 4,
-    title: '토마토 컵라면',
+    title: '단 한번의 삶',
     author: '작가명',
-    cover: '/src/assets/books/tomato.svg',
+    cover: '/src/assets/books/life.svg',
   },
   {
     id: 5,
-    title: '사슴',
-    author: '작가명',
-    cover: '/src/assets/books/deer.svg',
-  },
-  {
-    id: 6,
     title: '호르몬 체인지',
     author: '작가명',
     cover: '/src/assets/books/hormone.svg',
   },
   {
-    id: 7,
-    title: '단 한번의 삶',
+    id: 6,
+    title: '토마토 컵라면',
     author: '작가명',
-    cover: '/src/assets/books/life.svg',
+    cover: '/src/assets/books/tomato.svg',
   },
 ];
 
 const BookSearchBottomSheet = ({ isOpen, onClose, onSelectBook }: BookSearchBottomSheetProps) => {
   // State
   const [searchQuery, setSearchQuery] = useState('');
-  const [filteredBooks, setFilteredBooks] = useState<Book[]>(mockBooks);
+  const [filteredBooks, setFilteredBooks] = useState<Book[]>(mockSavedBooks);
   const [activeTab, setActiveTab] = useState<TabType>('saved');
 
   // Effects
   useEffect(() => {
+    // 현재 활성화된 탭의 책 목록 가져오기
+    const currentTabBooks = activeTab === 'saved' ? mockSavedBooks : mockGroupBooks;
+
     if (searchQuery.trim() === '') {
-      setFilteredBooks(mockBooks);
+      // 검색어가 없을 때는 선택된 탭의 전체 목록 표시
+      setFilteredBooks(currentTabBooks);
     } else {
-      const filtered = mockBooks.filter(
+      // 검색어가 있을 때는 선택된 탭 내에서만 검색
+      const filtered = currentTabBooks.filter(
         book =>
           book.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
           book.author.toLowerCase().includes(searchQuery.toLowerCase()),
       );
       setFilteredBooks(filtered);
     }
-  }, [searchQuery]);
+  }, [searchQuery, activeTab]);
 
   useEffect(() => {
     if (isOpen) {
@@ -145,6 +147,26 @@ const BookSearchBottomSheet = ({ isOpen, onClose, onSelectBook }: BookSearchBott
     setSearchQuery('');
   };
 
+  const handleTabChange = (tab: TabType) => {
+    setActiveTab(tab);
+    // 탭 변경 시 현재 검색어로 새로운 탭에서 다시 검색
+    const newTabBooks = tab === 'saved' ? mockSavedBooks : mockGroupBooks;
+
+    if (searchQuery.trim() === '') {
+      setFilteredBooks(newTabBooks);
+    } else {
+      const filtered = newTabBooks.filter(
+        book =>
+          book.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+          book.author.toLowerCase().includes(searchQuery.toLowerCase()),
+      );
+      setFilteredBooks(filtered);
+    }
+  };
+
+  // 검색어가 없을 때만 탭 표시
+  const showTabs = searchQuery.trim() === '';
+
   return (
     <Overlay isVisible={isOpen} onClick={handleOverlayClick}>
       <BottomSheetContainer isVisible={isOpen}>
@@ -169,15 +191,17 @@ const BookSearchBottomSheet = ({ isOpen, onClose, onSelectBook }: BookSearchBott
             </ButtonGroup>
           </SearchContainer>
 
-          {/* 탭 영역 */}
-          <TabContainer>
-            <Tab active={activeTab === 'saved'} onClick={() => setActiveTab('saved')}>
-              저장한 책
-            </Tab>
-            <Tab active={activeTab === 'group'} onClick={() => setActiveTab('group')}>
-              모임 책
-            </Tab>
-          </TabContainer>
+          {/* 탭 영역 - 검색어가 없을 때만 표시 */}
+          {showTabs && (
+            <TabContainer>
+              <Tab active={activeTab === 'saved'} onClick={() => handleTabChange('saved')}>
+                저장한 책
+              </Tab>
+              <Tab active={activeTab === 'group'} onClick={() => handleTabChange('group')}>
+                모임 책
+              </Tab>
+            </TabContainer>
+          )}
 
           {/* 책 목록 영역 */}
           <BookListContainer>

From 1c3d95607ed833583ac839181b0ca88eeb67531d Mon Sep 17 00:00:00 2001
From: fr0gydev <ljh130334@naver.com>
Date: Wed, 23 Jul 2025 00:42:15 +0900
Subject: [PATCH 04/11] =?UTF-8?q?style:=20=EA=B8=80=20=EC=9E=91=EC=84=B1?=
 =?UTF-8?q?=20=ED=85=8D=EC=8A=A4=ED=8A=B8=20=EC=98=81=EC=97=AD=20border=20?=
 =?UTF-8?q?=EC=A0=9C=EA=B1=B0=20=EB=B0=8F=20=EC=9D=BC=EB=B6=80=20=EC=8A=A4?=
 =?UTF-8?q?=ED=83=80=EC=9D=BC=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../createpost/PostContentSection.styled.ts    | 18 ++++++------------
 .../createpost/PostContentSection.tsx          |  2 +-
 2 files changed, 7 insertions(+), 13 deletions(-)

diff --git a/src/components/createpost/PostContentSection.styled.ts b/src/components/createpost/PostContentSection.styled.ts
index ff086eb6..1ba85097 100644
--- a/src/components/createpost/PostContentSection.styled.ts
+++ b/src/components/createpost/PostContentSection.styled.ts
@@ -10,30 +10,24 @@ export const TextAreaBox = styled.div`
 export const TextArea = styled.textarea`
   width: 100%;
   min-height: 100px;
-  padding: 16px;
   background-color: ${semanticColors.background.primary};
-  border: 1px solid ${colors.grey[300]};
-  border-radius: 12px;
-  color: ${semanticColors.text.primary};
-  font-size: ${typography.fontSize.base};
+  color: ${semanticColors.text.secondary};
+  font-size: ${typography.fontSize.sm};
   font-weight: ${typography.fontWeight.regular};
   font-family: ${typography.fontFamily.primary};
   resize: none;
   outline: none;
+  border: none;
 
   &::placeholder {
-    color: ${semanticColors.text.secondary};
-  }
-
-  &:focus {
-    border-color: ${semanticColors.text.primary};
+    color: ${semanticColors.text.ghost};
   }
 `;
 
 export const CharacterCount = styled.div`
   align-self: flex-end;
-  margin-top: 8px;
-  color: ${semanticColors.text.tertiary};
+  margin-top: 12px;
+  color: ${semanticColors.text.point.green};
   font-size: ${typography.fontSize.xs};
   font-weight: ${typography.fontWeight.regular};
 `;
diff --git a/src/components/createpost/PostContentSection.tsx b/src/components/createpost/PostContentSection.tsx
index c3daed3b..4579e034 100644
--- a/src/components/createpost/PostContentSection.tsx
+++ b/src/components/createpost/PostContentSection.tsx
@@ -14,7 +14,7 @@ const PostContentSection = ({ content, onContentChange }: PostContentSectionProp
       <SectionTitle>글 작성</SectionTitle>
       <TextAreaBox>
         <TextArea
-          placeholder="...한 생각이 들었어요😶"
+          placeholder="...한 생각이 들었어요. 🤔"
           value={content}
           onChange={e => onContentChange(e.target.value)}
           maxLength={maxLength}

From 2db5106f9673030a3f1aa749b41f7c895c02aaa0 Mon Sep 17 00:00:00 2001
From: fr0gydev <ljh130334@naver.com>
Date: Wed, 23 Jul 2025 01:15:00 +0900
Subject: [PATCH 05/11] =?UTF-8?q?style:=20=EC=82=AC=EC=A7=84=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80=20=EC=98=81=EC=97=AD=20=EC=8A=A4=ED=83=80=EC=9D=BC?=
 =?UTF-8?q?=EB=A7=81=20=EC=9D=BC=EB=B6=80=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/post/close.svg                     |  3 ++
 src/assets/post/plus-disabled.svg             |  4 ++
 src/assets/post/plus.svg                      |  4 ++
 .../createpost/PhotoSection.styled.ts         | 46 ++++++++++---------
 src/components/createpost/PhotoSection.tsx    | 18 +++++---
 .../createpost/PostContentSection.styled.ts   |  2 +-
 6 files changed, 48 insertions(+), 29 deletions(-)
 create mode 100644 src/assets/post/close.svg
 create mode 100644 src/assets/post/plus-disabled.svg
 create mode 100644 src/assets/post/plus.svg

diff --git a/src/assets/post/close.svg b/src/assets/post/close.svg
new file mode 100644
index 00000000..517027ec
--- /dev/null
+++ b/src/assets/post/close.svg
@@ -0,0 +1,3 @@
+<svg width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.707 1L1.70703 13M1.70703 1L13.707 13" stroke="#FEFEFE" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/post/plus-disabled.svg b/src/assets/post/plus-disabled.svg
new file mode 100644
index 00000000..9ab32165
--- /dev/null
+++ b/src/assets/post/plus-disabled.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.707 5L11.707 19" stroke="#3D3D3D" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M18.707 12L4.70703 12" stroke="#3D3D3D" stroke-width="1.5" stroke-linecap="round"/>
+</svg>
diff --git a/src/assets/post/plus.svg b/src/assets/post/plus.svg
new file mode 100644
index 00000000..3910e81c
--- /dev/null
+++ b/src/assets/post/plus.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.7061 5L11.7061 19" stroke="#FEFEFE" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M18.7061 12L4.70606 12" stroke="#FEFEFE" stroke-width="1.5" stroke-linecap="round"/>
+</svg>
diff --git a/src/components/createpost/PhotoSection.styled.ts b/src/components/createpost/PhotoSection.styled.ts
index 2513cdbb..95164f97 100644
--- a/src/components/createpost/PhotoSection.styled.ts
+++ b/src/components/createpost/PhotoSection.styled.ts
@@ -4,7 +4,7 @@ import { typography, semanticColors, colors } from '../../styles/global/global';
 export const PhotoContainer = styled.div`
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 12px;
 `;
 
 export const PhotoGrid = styled.div`
@@ -16,25 +16,26 @@ export const PhotoGrid = styled.div`
 export const AddPhotoButton = styled.button`
   width: 80px;
   height: 80px;
-  border: 2px dashed ${colors.grey[300]};
-  background-color: transparent;
-  border-radius: 8px;
-  color: ${semanticColors.text.secondary};
-  font-size: 32px;
-  font-weight: ${typography.fontWeight.regular};
+  border: 1px solid ${colors.grey[300]};
+  background-color: ${semanticColors.background.cardDark};
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.2s;
 
+  img {
+    width: 24px;
+    height: 24px;
+  }
+
   &:hover:not(:disabled) {
     border-color: ${semanticColors.text.primary};
-    color: ${semanticColors.text.primary};
   }
 
   &:disabled {
-    opacity: 0.5;
+    background-color: ${colors.darkgrey.dark};
+    border: 1px solid ${colors.darkgrey.main};
     cursor: not-allowed;
   }
 `;
@@ -49,35 +50,36 @@ export const PhotoImage = styled.img`
   width: 100%;
   height: 100%;
   object-fit: cover;
-  border-radius: 8px;
+  border: 1px solid ${colors.grey[300]};
 `;
 
 export const RemoveButton = styled.button`
   position: absolute;
-  top: -8px;
-  right: -8px;
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  background-color: ${semanticColors.button.fill.primary};
-  color: ${semanticColors.text.primary};
+  top: 0px;
+  right: 0px;
+  width: 24px;
+  height: 24px;
+  background-color: rgba(0, 0, 0, 0.6);
   border: none;
-  font-size: 14px;
-  font-weight: ${typography.fontWeight.bold};
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
-  line-height: 1;
+  border: 1px solid ${colors.grey[300]};
+
+  img {
+    width: 12px;
+    height: 12px;
+  }
 
   &:hover {
-    background-color: ${semanticColors.button.fill.background};
+    background-color: rgba(0, 0, 0, 0.8);
   }
 `;
 
 export const PhotoCount = styled.div`
   align-self: flex-end;
-  color: ${semanticColors.text.tertiary};
+  color: ${semanticColors.text.point.green};
   font-size: ${typography.fontSize.xs};
   font-weight: ${typography.fontWeight.regular};
 `;
diff --git a/src/components/createpost/PhotoSection.tsx b/src/components/createpost/PhotoSection.tsx
index e98d7996..5a3cd9dc 100644
--- a/src/components/createpost/PhotoSection.tsx
+++ b/src/components/createpost/PhotoSection.tsx
@@ -3,12 +3,14 @@ import { Section, SectionTitle } from '../../pages/group/CommonSection.styled';
 import {
   PhotoContainer,
   PhotoGrid,
-  PhotoItem,
   AddPhotoButton,
   PhotoImage,
   RemoveButton,
   PhotoCount,
 } from './PhotoSection.styled';
+import plusIcon from '../../assets/post/plus.svg';
+import plusDisabledIcon from '../../assets/post/plus-disabled.svg';
+import closeIcon from '../../assets/post/close.svg';
 
 interface PhotoSectionProps {
   photos: File[];
@@ -36,19 +38,23 @@ const PhotoSection = ({ photos, onPhotoAdd, onPhotoRemove }: PhotoSectionProps)
     return URL.createObjectURL(file);
   };
 
+  const isDisabled = photos.length >= 3;
+
   return (
     <Section>
       <SectionTitle>사진 추가</SectionTitle>
       <PhotoContainer>
         <PhotoGrid>
-          <AddPhotoButton onClick={handleFileInputClick} disabled={photos.length >= 3}>
-            +
+          <AddPhotoButton onClick={handleFileInputClick} disabled={isDisabled}>
+            <img src={isDisabled ? plusDisabledIcon : plusIcon} alt="사진 추가" />
           </AddPhotoButton>
           {photos.map((photo, index) => (
-            <PhotoItem key={index}>
+            <div key={index} style={{ position: 'relative', width: '80px', height: '80px' }}>
               <PhotoImage src={createImageUrl(photo)} alt={`선택된 사진 ${index + 1}`} />
-              <RemoveButton onClick={() => onPhotoRemove(index)}>×</RemoveButton>
-            </PhotoItem>
+              <RemoveButton onClick={() => onPhotoRemove(index)}>
+                <img src={closeIcon} alt="삭제" />
+              </RemoveButton>
+            </div>
           ))}
         </PhotoGrid>
         <PhotoCount>{photos.length}/3개</PhotoCount>
diff --git a/src/components/createpost/PostContentSection.styled.ts b/src/components/createpost/PostContentSection.styled.ts
index 1ba85097..15b52217 100644
--- a/src/components/createpost/PostContentSection.styled.ts
+++ b/src/components/createpost/PostContentSection.styled.ts
@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { typography, semanticColors, colors } from '../../styles/global/global';
+import { typography, semanticColors } from '../../styles/global/global';
 
 export const TextAreaBox = styled.div`
   position: relative;

From a69473ad87450572cbece34f5247a62e4272491b Mon Sep 17 00:00:00 2001
From: fr0gydev <ljh130334@naver.com>
Date: Wed, 23 Jul 2025 01:23:56 +0900
Subject: [PATCH 06/11] =?UTF-8?q?refactor:=20=EC=83=88=20=EA=B8=80=20?=
 =?UTF-8?q?=EC=9E=91=EC=84=B1=EC=97=90=EC=84=9C=20=EA=B3=B5=EA=B0=9C=20?=
 =?UTF-8?q?=EC=84=A4=EC=A0=95=20=EB=8B=A8=EC=88=9C=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../createpost/PrivacyToggleSection.styled.ts | 36 +++++++++++++++++++
 src/pages/post/CreatePost.tsx                 | 26 ++------------
 2 files changed, 39 insertions(+), 23 deletions(-)
 create mode 100644 src/components/createpost/PrivacyToggleSection.styled.ts

diff --git a/src/components/createpost/PrivacyToggleSection.styled.ts b/src/components/createpost/PrivacyToggleSection.styled.ts
new file mode 100644
index 00000000..1d2c4867
--- /dev/null
+++ b/src/components/createpost/PrivacyToggleSection.styled.ts
@@ -0,0 +1,36 @@
+import styled from '@emotion/styled';
+import { typography, semanticColors } from '../../styles/global/global';
+
+export const ToggleContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+
+export const ToggleLabel = styled.span`
+  color: ${semanticColors.text.primary};
+  font-size: ${typography.fontSize.base};
+  font-weight: ${typography.fontWeight.regular};
+`;
+
+export const ToggleSwitch = styled.div<{ active: boolean }>`
+  width: 48px;
+  height: 28px;
+  background-color: ${({ active }) =>
+    active ? semanticColors.button.fill.primary : semanticColors.background.card};
+  border-radius: 14px;
+  position: relative;
+  cursor: pointer;
+  transition: background-color 0.3s;
+`;
+
+export const ToggleSlider = styled.div<{ active: boolean }>`
+  width: 20px;
+  height: 20px;
+  background-color: ${semanticColors.text.primary};
+  border-radius: 50%;
+  position: absolute;
+  top: 4px;
+  left: ${({ active }) => (active ? '24px' : '4px')};
+  transition: left 0.3s;
+`;
diff --git a/src/pages/post/CreatePost.tsx b/src/pages/post/CreatePost.tsx
index e6774c02..158d0c32 100644
--- a/src/pages/post/CreatePost.tsx
+++ b/src/pages/post/CreatePost.tsx
@@ -5,7 +5,7 @@ import BookSearchBottomSheet from '../../components/common/BookSearchBottomSheet
 import BookSelectionSection from '../../components/creategroup/BookSelectionSection';
 import PostContentSection from '../../components/createpost/PostContentSection';
 import PhotoSection from '../../components/createpost/PhotoSection';
-import PrivacySettingSection from '../../components/creategroup/PrivacySettingSection/PrivacySettingSection';
+import PrivacyToggleSection from '../../components/createpost/PrivacyToggleSection';
 import TagSelectionSection from '../../components/createpost/TagSelectionSection';
 import leftarrow from '../../assets/common/leftArrow.svg';
 import { Container } from './CreatePost.styled';
@@ -17,7 +17,6 @@ const CreatePost = () => {
   const [postContent, setPostContent] = useState('');
   const [selectedPhotos, setSelectedPhotos] = useState<File[]>([]);
   const [isPrivate, setIsPrivate] = useState(false);
-  const [password, setPassword] = useState('');
   const [selectedTags, setSelectedTags] = useState<string[]>([]);
   const [isBookSearchOpen, setIsBookSearchOpen] = useState(false);
 
@@ -37,8 +36,7 @@ const CreatePost = () => {
     console.log('필수 - 선택된 책:', selectedBook);
     console.log('필수 - 글 내용:', postContent);
     console.log('선택 - 선택된 사진:', selectedPhotos);
-    console.log('선택 - 비공개 설정:', isPrivate);
-    console.log('선택 - 비밀번호:', password);
+    console.log('선택 - 공개 설정:', isPrivate ? '비공개' : '공개');
     console.log('선택 - 선택된 태그:', selectedTags);
 
     // TODO: API 호출하여 글 등록
@@ -72,18 +70,6 @@ const CreatePost = () => {
 
   const handlePrivacyToggle = () => {
     setIsPrivate(!isPrivate);
-    // 비공개 설정을 끄면 비밀번호도 초기화
-    if (isPrivate) {
-      setPassword('');
-    }
-  };
-
-  const handlePasswordChange = (newPassword: string) => {
-    setPassword(newPassword);
-  };
-
-  const handlePasswordClose = () => {
-    setPassword('');
   };
 
   const handleTagToggle = (tag: string) => {
@@ -124,13 +110,7 @@ const CreatePost = () => {
 
         <Section showDivider />
 
-        <PrivacySettingSection
-          isPrivate={isPrivate}
-          password={password}
-          onToggle={handlePrivacyToggle}
-          onPasswordChange={handlePasswordChange}
-          onPasswordClose={handlePasswordClose}
-        />
+        <PrivacyToggleSection isPrivate={isPrivate} onToggle={handlePrivacyToggle} />
 
         <Section showDivider />
 

From 785bd2b71a604ad854f65d1935bf7b2053513074 Mon Sep 17 00:00:00 2001
From: fr0gydev <ljh130334@naver.com>
Date: Wed, 23 Jul 2025 01:37:48 +0900
Subject: [PATCH 07/11] =?UTF-8?q?feat:=202=EB=8B=A8=EA=B3=84=20=ED=83=9C?=
 =?UTF-8?q?=EA=B7=B8=20=EC=84=A0=ED=83=9D=20=EC=8B=9C=EC=8A=A4=ED=85=9C=20?=
 =?UTF-8?q?=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../createpost/TagSelectionSection.styled.ts  |  99 ++++++++++++++++
 .../createpost/TagSelectionSection.tsx        | 106 +++++++++++++++---
 2 files changed, 192 insertions(+), 13 deletions(-)
 create mode 100644 src/components/createpost/TagSelectionSection.styled.ts

diff --git a/src/components/createpost/TagSelectionSection.styled.ts b/src/components/createpost/TagSelectionSection.styled.ts
new file mode 100644
index 00000000..0c4b514d
--- /dev/null
+++ b/src/components/createpost/TagSelectionSection.styled.ts
@@ -0,0 +1,99 @@
+import styled from '@emotion/styled';
+import { colors, typography, semanticColors } from '../../styles/global/global';
+
+export const TagContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+`;
+
+export const GenreButtonGroup = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+`;
+
+export const GenreButton = styled.button<{ active: boolean }>`
+  background-color: ${({ active }) =>
+    active ? semanticColors.button.fill.primary : colors.grey[400]};
+  border: none;
+  border-radius: 20px;
+  padding: 8px 12px;
+  color: ${semanticColors.text.primary};
+  font-size: ${typography.fontSize.xs};
+  font-weight: ${typography.fontWeight.regular};
+  cursor: pointer;
+  transition: all 0.2s;
+
+  &:hover {
+    background-color: ${({ active }) =>
+      active ? semanticColors.button.fill.background : colors.grey[300]};
+  }
+`;
+
+export const SubTagGrid = styled.div`
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 8px;
+`;
+
+export const SubTagButton = styled.button<{ active: boolean; disabled: boolean }>`
+  background-color: transparent;
+  border: 1px solid
+    ${({ active }) => (active ? semanticColors.button.fill.primary : colors.grey[300])};
+  border-radius: 20px;
+  padding: 8px 12px;
+  color: ${({ active }) =>
+    active ? semanticColors.text.point.purple : semanticColors.text.secondary};
+  font-size: ${typography.fontSize.xs};
+  font-weight: ${typography.fontWeight.regular};
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+  transition: all 0.2s;
+  opacity: ${({ disabled }) => (disabled ? 0.5 : 1)};
+
+  &:hover:not(:disabled) {
+    border-color: ${semanticColors.button.fill.primary};
+    background-color: ${({ active }) => (active ? 'transparent' : 'rgba(104, 104, 255, 0.1)')};
+  }
+`;
+
+export const TagCount = styled.div`
+  align-self: flex-end;
+  color: ${semanticColors.text.point.green};
+  font-size: ${typography.fontSize.xs};
+  font-weight: ${typography.fontWeight.regular};
+`;
+
+export const SelectedTagsSection = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+`;
+
+export const SelectedTagsTitle = styled.div`
+  color: ${semanticColors.text.primary};
+  font-size: ${typography.fontSize.sm};
+  font-weight: ${typography.fontWeight.medium};
+`;
+
+export const SelectedTagList = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+`;
+
+export const SelectedTagItem = styled.button`
+  background-color: transparent;
+  border: 1px solid ${colors.grey[200]};
+  border-radius: 20px;
+  padding: 6px 12px;
+  color: ${semanticColors.text.primary};
+  font-size: ${typography.fontSize.xs};
+  font-weight: ${typography.fontWeight.regular};
+  cursor: pointer;
+  transition: all 0.2s;
+
+  &:hover {
+    background-color: rgba(104, 104, 255, 0.1);
+  }
+`;
diff --git a/src/components/createpost/TagSelectionSection.tsx b/src/components/createpost/TagSelectionSection.tsx
index c679ec0f..5a9afa17 100644
--- a/src/components/createpost/TagSelectionSection.tsx
+++ b/src/components/createpost/TagSelectionSection.tsx
@@ -1,28 +1,108 @@
+import { useState } from 'react';
 import { Section, SectionTitle } from '../../pages/group/CommonSection.styled';
-import { GenreButtonGroup, GenreButton } from '../creategroup/GenreSelectionSection.styled';
+import {
+  TagContainer,
+  GenreButtonGroup,
+  GenreButton,
+  SubTagGrid,
+  SubTagButton,
+  SelectedTagsSection,
+  SelectedTagsTitle,
+  SelectedTagList,
+  SelectedTagItem,
+  TagCount,
+} from './TagSelectionSection.styled';
 
 interface TagSelectionSectionProps {
   selectedTags: string[];
   onTagToggle: (tag: string) => void;
 }
 
-const availableTags = ['문학', '과학·IT', '사회과학', '인문학', '예술'];
+// 상위 장르와 하위 태그 매핑
+const genreTagsMap = {
+  문학: ['소설', '시', '에세이', '인문학', '철학'],
+  '과학·IT': ['기술', '과학', 'AI', '데이터'],
+  사회과학: ['정치', '경제', '사회학', '심리학', '역사'],
+  인문학: ['철학', '역사', '문화', '언어학', '종교'],
+  예술: ['미술', '음악', '영화', '디자인', '사진'],
+};
+
+const availableGenres = Object.keys(genreTagsMap);
 
 const TagSelectionSection = ({ selectedTags, onTagToggle }: TagSelectionSectionProps) => {
+  const [selectedGenre, setSelectedGenre] = useState<string>('문학');
+
+  const handleGenreSelect = (genre: string) => {
+    setSelectedGenre(genre);
+  };
+
+  const handleTagToggle = (tag: string) => {
+    // 이미 선택된 태그면 해제
+    if (selectedTags.includes(tag)) {
+      onTagToggle(tag);
+      return;
+    }
+
+    // 5개 미만이면 추가 가능
+    if (selectedTags.length < 5) {
+      onTagToggle(tag);
+    }
+  };
+
+  const handleSelectedTagRemove = (tag: string) => {
+    onTagToggle(tag);
+  };
+
+  const currentSubTags = genreTagsMap[selectedGenre] || [];
+
   return (
     <Section>
       <SectionTitle>태그</SectionTitle>
-      <GenreButtonGroup>
-        {availableTags.map(tag => (
-          <GenreButton
-            key={tag}
-            active={selectedTags.includes(tag)}
-            onClick={() => onTagToggle(tag)}
-          >
-            {tag}
-          </GenreButton>
-        ))}
-      </GenreButtonGroup>
+      <TagContainer>
+        {/* 상위 장르 선택 */}
+        <GenreButtonGroup>
+          {availableGenres.map(genre => (
+            <GenreButton
+              key={genre}
+              active={selectedGenre === genre}
+              onClick={() => handleGenreSelect(genre)}
+            >
+              {genre}
+            </GenreButton>
+          ))}
+        </GenreButtonGroup>
+
+        {/* 하위 태그 그리드 */}
+        <SubTagGrid>
+          {currentSubTags.map(tag => (
+            <SubTagButton
+              key={tag}
+              active={selectedTags.includes(tag)}
+              disabled={!selectedTags.includes(tag) && selectedTags.length >= 5}
+              onClick={() => handleTagToggle(tag)}
+            >
+              {tag}
+            </SubTagButton>
+          ))}
+        </SubTagGrid>
+
+        {/* 태그 선택 개수 표시 */}
+        <TagCount>{selectedTags.length} / 5개</TagCount>
+
+        {/* 선택된 태그 목록 */}
+        {selectedTags.length > 0 && (
+          <SelectedTagsSection>
+            <SelectedTagsTitle>선택된 태그</SelectedTagsTitle>
+            <SelectedTagList>
+              {selectedTags.map(tag => (
+                <SelectedTagItem key={tag} onClick={() => handleSelectedTagRemove(tag)}>
+                  #{tag} ×
+                </SelectedTagItem>
+              ))}
+            </SelectedTagList>
+          </SelectedTagsSection>
+        )}
+      </TagContainer>
     </Section>
   );
 };

From f7ce20422ed5524ed56e07d500933242806e83e8 Mon Sep 17 00:00:00 2001
From: fr0gydev <ljh130334@naver.com>
Date: Wed, 23 Jul 2025 01:43:38 +0900
Subject: [PATCH 08/11] =?UTF-8?q?refactor:=20=ED=83=9C=EA=B7=B8=20?=
 =?UTF-8?q?=EC=84=A0=ED=83=9D=20UI=20=EA=B0=9C=EC=84=A0=20-=20=EC=9C=A0?=
 =?UTF-8?q?=EB=8F=99=EC=A0=81=20=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20?=
 =?UTF-8?q?=EB=B0=8F=20SVG=20=EC=95=84=EC=9D=B4=EC=BD=98=20=EC=A0=81?=
 =?UTF-8?q?=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../createpost/TagSelectionSection.styled.ts       | 14 ++++++++++++--
 src/components/createpost/TagSelectionSection.tsx  |  4 +++-
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/components/createpost/TagSelectionSection.styled.ts b/src/components/createpost/TagSelectionSection.styled.ts
index 0c4b514d..dd0d6db4 100644
--- a/src/components/createpost/TagSelectionSection.styled.ts
+++ b/src/components/createpost/TagSelectionSection.styled.ts
@@ -32,8 +32,8 @@ export const GenreButton = styled.button<{ active: boolean }>`
 `;
 
 export const SubTagGrid = styled.div`
-  display: grid;
-  grid-template-columns: repeat(5, 1fr);
+  display: flex;
+  flex-wrap: wrap;
   gap: 8px;
 `;
 
@@ -50,6 +50,8 @@ export const SubTagButton = styled.button<{ active: boolean; disabled: boolean }
   cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
   transition: all 0.2s;
   opacity: ${({ disabled }) => (disabled ? 0.5 : 1)};
+  white-space: nowrap;
+  width: auto;
 
   &:hover:not(:disabled) {
     border-color: ${semanticColors.button.fill.primary};
@@ -92,6 +94,14 @@ export const SelectedTagItem = styled.button`
   font-weight: ${typography.fontWeight.regular};
   cursor: pointer;
   transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+
+  img {
+    width: 12px;
+    height: 12px;
+  }
 
   &:hover {
     background-color: rgba(104, 104, 255, 0.1);
diff --git a/src/components/createpost/TagSelectionSection.tsx b/src/components/createpost/TagSelectionSection.tsx
index 5a9afa17..165028b7 100644
--- a/src/components/createpost/TagSelectionSection.tsx
+++ b/src/components/createpost/TagSelectionSection.tsx
@@ -12,6 +12,7 @@ import {
   SelectedTagItem,
   TagCount,
 } from './TagSelectionSection.styled';
+import closeIcon from '../../assets/post/close.svg';
 
 interface TagSelectionSectionProps {
   selectedTags: string[];
@@ -96,7 +97,8 @@ const TagSelectionSection = ({ selectedTags, onTagToggle }: TagSelectionSectionP
             <SelectedTagList>
               {selectedTags.map(tag => (
                 <SelectedTagItem key={tag} onClick={() => handleSelectedTagRemove(tag)}>
-                  #{tag} ×
+                  #{tag}
+                  <img src={closeIcon} alt="삭제" />
                 </SelectedTagItem>
               ))}
             </SelectedTagList>

From 9e711cf8934802d329f463d2aadce93b4328114c Mon Sep 17 00:00:00 2001
From: fr0gydev <ljh130334@naver.com>
Date: Wed, 23 Jul 2025 01:50:48 +0900
Subject: [PATCH 09/11] =?UTF-8?q?fix:=20=EC=9D=BC=EB=B6=80=20=EB=AC=B8?=
 =?UTF-8?q?=EB=B2=95=20=EC=97=90=EB=9F=AC=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/createpost/TagSelectionSection.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/createpost/TagSelectionSection.tsx b/src/components/createpost/TagSelectionSection.tsx
index 165028b7..78884b97 100644
--- a/src/components/createpost/TagSelectionSection.tsx
+++ b/src/components/createpost/TagSelectionSection.tsx
@@ -20,7 +20,7 @@ interface TagSelectionSectionProps {
 }
 
 // 상위 장르와 하위 태그 매핑
-const genreTagsMap = {
+const genreTagsMap: Record<string, string[]> = {
   문학: ['소설', '시', '에세이', '인문학', '철학'],
   '과학·IT': ['기술', '과학', 'AI', '데이터'],
   사회과학: ['정치', '경제', '사회학', '심리학', '역사'],

From 4776544b1e88bf8560fb5ea2995af17d09499e6a Mon Sep 17 00:00:00 2001
From: fr0gydev <ljh130334@naver.com>
Date: Wed, 23 Jul 2025 16:58:56 +0900
Subject: [PATCH 10/11] =?UTF-8?q?fix:=20=EC=A4=91=EB=B3=B5=20=EB=9D=BC?=
 =?UTF-8?q?=EC=9A=B0=ED=8A=B8=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/index.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 0ab02215..078c448f 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -35,7 +35,6 @@ const Router = () => {
           <Route path="genre" element={<SignupGenre />} />
         </Route>
         <Route path="signupdone" element={<SignupDone />} />
-        <Route path="group/create" element={<CreateGroup />} />
         <Route path="post/create" element={<CreatePost />} />
         <Route path="group" element={<Group />} />
         <Route path="group/create" element={<CreateGroup />} />

From 11a035a7aacc851ec1ae2e8129f77e9883ba0881 Mon Sep 17 00:00:00 2001
From: fr0gydev <ljh130334@naver.com>
Date: Wed, 23 Jul 2025 17:06:20 +0900
Subject: [PATCH 11/11] =?UTF-8?q?refactor:=20Book=20=EC=9D=B8=ED=84=B0?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=8A=A4=20=EC=A0=95=EC=9D=98=20=EB=B0=8F=20?=
 =?UTF-8?q?=ED=83=80=EC=9E=85=20=EC=95=88=EC=A0=84=EC=84=B1=20=EA=B0=9C?=
 =?UTF-8?q?=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/post/CreatePost.tsx | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/pages/post/CreatePost.tsx b/src/pages/post/CreatePost.tsx
index 158d0c32..38eb55ca 100644
--- a/src/pages/post/CreatePost.tsx
+++ b/src/pages/post/CreatePost.tsx
@@ -11,9 +11,16 @@ import leftarrow from '../../assets/common/leftArrow.svg';
 import { Container } from './CreatePost.styled';
 import { Section } from '../group/CommonSection.styled';
 
+interface Book {
+  id: number;
+  title: string;
+  author: string;
+  cover: string;
+}
+
 const CreatePost = () => {
   const navigate = useNavigate();
-  const [selectedBook, setSelectedBook] = useState<any>(null);
+  const [selectedBook, setSelectedBook] = useState<Book | null>(null);
   const [postContent, setPostContent] = useState('');
   const [selectedPhotos, setSelectedPhotos] = useState<File[]>([]);
   const [isPrivate, setIsPrivate] = useState(false);
@@ -56,7 +63,7 @@ const CreatePost = () => {
     setIsBookSearchOpen(false);
   };
 
-  const handleBookSelect = (book: any) => {
+  const handleBookSelect = (book: Book) => {
     setSelectedBook(book);
   };
 
@@ -77,7 +84,7 @@ const CreatePost = () => {
   };
 
   // 책 선택과 글 내용만 필수, 나머지는 선택사항
-  const isFormValid = selectedBook && postContent.trim() !== '';
+  const isFormValid = !!selectedBook && postContent.trim() !== '';
 
   return (
     <>