feat(search): 태그 검색 기능 구현 및 컴포넌트 구조 개선

.eslintrc.json

@@ -23,6 +23,7 @@
     "import/order": "off",
     "no-console": "off",
     "react/function-component-definition": "off",
-    "arrow-body-style": "off"
+    "arrow-body-style": "off",
+    "jsx-a11y/no-autofocus": "off"
   }
 }

next.config.js

@@ -1,8 +1,12 @@
-const { createVanillaExtractPlugin } = require("@vanilla-extract/next-plugin");
+const { createVanillaExtractPlugin } = require('@vanilla-extract/next-plugin');
 
 const withVanillaExtract = createVanillaExtractPlugin();
 
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+  compiler: {
+    removeConsole: process.env.NODE_ENV === 'production',
+  },
+};
 
 module.exports = withVanillaExtract(nextConfig);

src/app/layout.tsx

@@ -1,5 +1,5 @@
-import ThemeProvider from '@/providers/ThemeProvider/ThemeProvider';
-import '../styles/globalStyles.css.ts';
+import ThemeProvider from '@/commons/providers/ThemeProvider/ThemeProvider.tsx';
+import '../commons/styles/globalStyles.css.ts';
 import { Metadata } from 'next';
 
 export const metadata: Metadata = {

src/app/page.tsx

@@ -1,8 +1,8 @@
-import RemoteControl from '@/components/features/Common/RemoteControl/RemoteControl';
-import Card from '@/components/features/Items/Card/Card';
-import Header from '@/components/widgets/Header/Header';
-import SearchToolbar from '@/components/widgets/SearchToolbar/SearchToolbar';
-import * as styles from '@/styles/rootStyles.css';
+import RemoteControl from '@/commons/components/features/Common/RemoteControl/RemoteControl';
+import Card from '@/commons/components/features/Items/Card/Card';
+import Header from '@/commons/components/widgets/Header/Header';
+import SearchToolbar from '@/commons/components/widgets/SearchToolbar/SearchToolbar';
+import * as styles from '@/commons/styles/rootStyles.css';
 
 export default function RootPage() {
   return (

src/commons/components/atoms/boxes/tagBox/tagBox.css.ts

@@ -0,0 +1,9 @@
+import { style } from '@vanilla-extract/css';
+
+export const tagBox = style({
+  padding: '8px 10px',
+  borderRadius: '50px',
+  backgroundColor: '#6A6868',
+
+  fontSize: '12px',
+});

src/commons/components/atoms/boxes/tagBox/tagBox.tsx

@@ -0,0 +1,5 @@
+import * as styles from './tagBox.css';
+
+export function TagBox({ tagName }: { tagName: string }) {
+  return <div className={styles.tagBox}>{tagName}</div>;
+}

src/components/features/Common/RemoteControl/RemoteControl.tsx → src/commons/components/features/Common/RemoteControl/RemoteControl.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import ArrowUp from '@/components/atoms/Icons/ArrowUp/ArrowUp';
-import { scrollToTop } from '@/utils/ui/scrollToTop/scrollToTop';
+import ArrowUp from '@/commons/components/atoms/Icons/ArrowUp/ArrowUp';
+import { scrollToTop } from '@/commons/utils/ui/scrollToTop/scrollToTop';
 import * as styles from './RemoteControl.css';
 
 export default function RemoteControl() {

src/components/features/Common/Slider/Slider.css.ts → src/commons/components/features/Common/Slider/Slider.css.ts

@@ -1,4 +1,4 @@
-import { vars } from '@/styles/globalStyles.css';
+import { vars } from '@/commons/styles/globalStyles.css';
 import { keyframes, style } from '@vanilla-extract/css';
 
 export const wrapper = style({

src/components/features/Common/ThemeIcon/ThemeIcon.tsx → src/commons/components/features/Common/ThemeIcon/ThemeIcon.tsx

@@ -1,6 +1,6 @@
-import Moon from '@/components/atoms/Icons/Moon/Moon';
-import Sun from '@/components/atoms/Icons/Sun/Sun';
-import { Theme } from '@/types/theme';
+import Moon from '@/commons/components/atoms/Icons/Moon/Moon';
+import Sun from '@/commons/components/atoms/Icons/Sun/Sun';
+import { Theme } from '@/commons/types/theme';
 import { ThemeIconProps } from './ThemeIcon.types';
 
 export default function ThemeIcon({ setTheme, resolvedTheme }: ThemeIconProps) {

src/commons/components/features/Inputs/CollapsedSearch/CollapsedSearch.css.ts

@@ -0,0 +1,8 @@
+import { style } from '@vanilla-extract/css';
+
+export const collapsedSearchWrapper = style({
+  display: 'flex',
+  flexDirection: 'row',
+
+  marginRight: 'auto',
+});

src/commons/components/features/Inputs/CollapsedSearch/CollapsedSearch.tsx

@@ -0,0 +1,27 @@
+import { collapsedSearchWrapper } from './CollapsedSearch.css';
+import { KeyboardEvent } from 'react';
+import Image from 'next/image';
+import { TagList } from '../../Lists/TagList/TagList';
+
+export const CollapsedSearch = ({
+  tagList,
+  handleKeyDown,
+}: {
+  tagList: string[];
+  handleKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
+}) => {
+  return (
+    <>
+      <div
+        className={collapsedSearchWrapper}
+        role="button"
+        tabIndex={0}
+        aria-label="검색 확장 버튼"
+        onKeyDown={handleKeyDown}
+      >
+        <TagList tags={tagList} />
+      </div>
+      <Image src="/images/buttons/readingGlasses.png" alt="ReadingGlasses" width={22} height={30} />
+    </>
+  );
+};

src/commons/components/features/Inputs/ExpandedSearch/ExpandedSearch.css.ts

@@ -0,0 +1,140 @@
+import { style } from '@vanilla-extract/css';
+
+export const wrapper = style({
+  position: 'relative',
+
+  display: 'flex',
+  flexDirection: 'row',
+  backgroundColor: '#fff',
+
+  width: '27rem',
+  height: '3rem',
+  padding: '10px 20px',
+  borderRadius: '50px',
+
+  cursor: 'pointer',
+});
+
+export const glassesWrapper = style({
+  display: 'flex',
+  flexDirection: 'row',
+});
+
+export const tagWrapper = style({
+  display: 'flex',
+  flexDirection: 'row',
+
+  marginRight: 'auto',
+});
+
+export const tagBox = style({
+  padding: '6px',
+  borderRadius: '50px',
+  backgroundColor: '#6A6868',
+
+  fontSize: '12px',
+
+  marginRight: '10px',
+});
+
+export const OutExpandedWrapper = style({
+  position: 'fixed',
+  top: '0',
+  left: '0',
+  right: '0',
+  bottom: '0',
+
+  display: 'flex',
+  justifyContent: 'center',
+
+  width: '100vw', // 100%에서 100vw로 변경
+  height: '100vh', // 100%에서 100vh로 변경
+
+  padding: '80px 54px',
+
+  zIndex: '1000',
+  backgroundColor: 'rgba(0, 0, 0, 0.65)', // 반투명 검은색으로 변경
+});
+
+export const expandedWrapper = style({
+  position: 'absolute',
+  top: '0',
+  left: '0',
+  right: '0',
+  bottom: '0',
+
+  display: 'flex',
+  flexDirection: 'column',
+
+  width: '37rem',
+  height: '22rem',
+
+  backgroundColor: '#fff',
+
+  borderRadius: '25px',
+  padding: '20px',
+
+  zIndex: '2000',
+});
+
+export const searchInput = style({
+  width: '100%',
+  height: '16px',
+
+  marginBottom: '14px',
+
+  backgroundColor: 'transparent',
+  color: '#000',
+
+  fontSize: '14px',
+
+  border: 'none',
+  outline: 'none',
+});
+
+export const expandedTagWrapper = style({
+  display: 'flex',
+  flexDirection: 'row',
+  flexWrap: 'wrap',
+
+  fontSize: '12px',
+});
+
+export const relatedTagWrapper = style({
+  display: 'flex',
+  flexDirection: 'column',
+
+  margin: '0',
+  padding: '0',
+});
+
+export const relatedTagBox = style({
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'center',
+
+  width: '100%',
+
+  gap: '10px',
+
+  cursor: 'pointer',
+
+  ':focus': {
+    outline: 'none',
+    backgroundColor: 'rgba(106, 104, 104, 0.1)',
+  },
+
+  ':hover': {
+    backgroundColor: 'rgba(106, 104, 104, 0.1)',
+  },
+});
+
+export const relatedTagText = style({
+  fontSize: '12px',
+
+  color: '#000',
+});
+
+export const focusedTag = style({
+  backgroundColor: 'rgba(106, 104, 104, 0.1)',
+});

src/commons/components/features/Inputs/ExpandedSearch/ExpandedSearch.tsx

@@ -0,0 +1,54 @@
+import { TagType } from '@/domains/tag/tpyes/tag.type';
+import { RelatedTags } from '../../Lists/RelatedTags/RelatedTags';
+import { TagList } from '../../Lists/TagList/TagList';
+import * as styles from './ExpandedSearch.css';
+import { KeyboardEvent } from 'react';
+
+export const ExpandedSearch = ({
+  inputValue,
+  setInputValue,
+  handleKeyDown,
+  tagList,
+  relatedTags,
+  focusedIndex,
+  onClickRelatedTag,
+  onClickExpanded,
+}: {
+  inputValue: string;
+  setInputValue: (value: string) => void;
+  handleKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
+  tagList: string[];
+  relatedTags: TagType[];
+  focusedIndex: number;
+  onClickRelatedTag: (tag: TagType) => void;
+  onClickExpanded: () => void;
+}) => {
+  return (
+    <>
+      <div className={styles.expandedWrapper}>
+        <input
+          className={styles.searchInput}
+          type="text"
+          placeholder="검색어를 입력하세요"
+          value={inputValue}
+          onChange={(e) => setInputValue(e.target.value)}
+          onKeyDown={handleKeyDown}
+          autoFocus
+        />
+
+        <TagList tags={tagList} />
+
+        <RelatedTags relatedTags={relatedTags} focusedIndex={focusedIndex} onClickRelatedTag={onClickRelatedTag} />
+      </div>
+
+      <div
+        className={styles.OutExpandedWrapper}
+        onClick={onClickExpanded}
+        role="button"
+        tabIndex={0}
+        aria-label="검색 축소 화면 버튼"
+        onKeyDown={handleKeyDown}
+      />
+    </>
+  );
+};

src/components/features/Inputs/Search/Search.css.ts → src/commons/components/features/Inputs/Search/Search.css.ts

@@ -116,10 +116,25 @@ export const relatedTagBox = style({
   width: '100%',
 
   gap: '10px',
+
+  cursor: 'pointer',
+
+  ':focus': {
+    outline: 'none',
+    backgroundColor: 'rgba(106, 104, 104, 0.1)',
+  },
+
+  ':hover': {
+    backgroundColor: 'rgba(106, 104, 104, 0.1)',
+  },
 });
 
 export const relatedTagText = style({
   fontSize: '12px',
 
   color: '#000',
 });
+
+export const focusedTag = style({
+  backgroundColor: 'rgba(106, 104, 104, 0.1)',
+});