From 52aaceda30ebe8be297418b6314ebf74bf305f5b Mon Sep 17 00:00:00 2001 From: eggmun Date: Sun, 16 Feb 2025 16:15:15 +0900 Subject: [PATCH 01/30] =?UTF-8?q?feat(endpoints):=20=ED=83=9C=EA=B7=B8=20?= =?UTF-8?q?=EB=AA=A9=EB=A1=9D=20=EC=A1=B0=ED=9A=8C=EB=A5=BC=20=EC=9C=84?= =?UTF-8?q?=ED=95=9C=20API=20=ED=95=A8=EC=88=98=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/tags/tags.api.ts | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 src/api/tags/tags.api.ts diff --git a/src/api/tags/tags.api.ts b/src/api/tags/tags.api.ts new file mode 100644 index 0000000..a528f90 --- /dev/null +++ b/src/api/tags/tags.api.ts @@ -0,0 +1,3 @@ +import { Get } from '@/configs/fetch/http.api'; + +export const getTags = async (search?: string) => Get(`/tags`, { search }); From e8d5e5d1dd59be35e2681553f79d86d982b182be Mon Sep 17 00:00:00 2001 From: eggmun Date: Sun, 16 Feb 2025 16:49:13 +0900 Subject: [PATCH 02/30] =?UTF-8?q?rename(tag):=20tag=20api=20=ED=95=A8?= =?UTF-8?q?=EC=88=98=20=EC=84=A0=EC=96=B8=20=ED=8C=8C=EC=9D=BC=20=ED=8F=B4?= =?UTF-8?q?=EB=8D=94=20=EA=B2=BD=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/{api/tags => domains/tag/api}/tags.api.ts | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename src/{api/tags => domains/tag/api}/tags.api.ts (100%) diff --git a/src/api/tags/tags.api.ts b/src/domains/tag/api/tags.api.ts similarity index 100% rename from src/api/tags/tags.api.ts rename to src/domains/tag/api/tags.api.ts From 3bd19f2603599602190651a5535757661efc06b0 Mon Sep 17 00:00:00 2001 From: eggmun Date: Sun, 16 Feb 2025 16:55:52 +0900 Subject: [PATCH 03/30] =?UTF-8?q?refactor:=20api=20=EC=9D=B8=EC=8A=A4?= =?UTF-8?q?=ED=84=B4=EC=8A=A4=20=ED=95=A8=EC=88=98=20=EC=9D=91=EB=8B=B5=20?= =?UTF-8?q?=ED=83=80=EC=9E=85=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/configs/fetch/http.api.ts | 16 +++++----------- 1 file changed, 5 insertions(+), 11 deletions(-) diff --git a/src/configs/fetch/http.api.ts b/src/configs/fetch/http.api.ts index 6bf1b7f..d599fb0 100644 --- a/src/configs/fetch/http.api.ts +++ b/src/configs/fetch/http.api.ts @@ -1,9 +1,3 @@ -interface ResponseData { - code: string; - isSuccess: boolean; - result: T; -} - type FetchOptions = RequestInit & { params?: Record; revalidate?: number | false; @@ -58,7 +52,7 @@ const createFetchInstance = (baseUrl: string) => { export const fetchApi = createFetchInstance(baseURL); const createApiMethods = (instance: (url: string, options?: FetchOptions) => Promise) => ({ - Get: async (url: string, params = {}, options: { revalidate?: number | false } = {}): Promise> => { + Get: async (url: string, params = {}, options: { revalidate?: number | false } = {}): Promise => { try { return await instance(url, { method: 'GET', @@ -70,7 +64,7 @@ const createApiMethods = (instance: (url: string, options?: FetchOptions) => Pro } }, - Post: async (url: string, data?: D, options = {}): Promise> => { + Post: async (url: string, data?: D, options = {}): Promise => { try { return await instance(url, { method: 'POST', @@ -83,7 +77,7 @@ const createApiMethods = (instance: (url: string, options?: FetchOptions) => Pro } }, - Put: async (url: string, data?: D, options = {}): Promise> => { + Put: async (url: string, data?: D, options = {}): Promise => { try { return await instance(url, { method: 'PUT', @@ -96,7 +90,7 @@ const createApiMethods = (instance: (url: string, options?: FetchOptions) => Pro } }, - Delete: async (url: string, options = {}): Promise> => { + Delete: async (url: string, options = {}): Promise => { try { return await instance(url, { method: 'DELETE', @@ -108,7 +102,7 @@ const createApiMethods = (instance: (url: string, options?: FetchOptions) => Pro } }, - Patch: async (url: string, data?: D, options = {}): Promise> => { + Patch: async (url: string, data?: D, options = {}): Promise => { try { return await instance(url, { method: 'PATCH', From 248844acfbfea3f6157124b9db6b8c584d7363f6 Mon Sep 17 00:00:00 2001 From: eggmun Date: Sun, 16 Feb 2025 16:58:59 +0900 Subject: [PATCH 04/30] =?UTF-8?q?type(tag):=20Tag=20API=20=EC=9D=91?= =?UTF-8?q?=EB=8B=B5=20=ED=83=80=EC=9E=85=20=EC=84=A0=EC=96=B8=20=EB=B0=8F?= =?UTF-8?q?=20=ED=83=80=EC=9E=85=EB=A7=8C=20=EB=82=B4=EB=B3=B4=EB=82=B4?= =?UTF-8?q?=EA=B8=B0=20=EC=82=AC=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/domains/tag/tpyes/tag.type.ts | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 src/domains/tag/tpyes/tag.type.ts diff --git a/src/domains/tag/tpyes/tag.type.ts b/src/domains/tag/tpyes/tag.type.ts new file mode 100644 index 0000000..d0cd9e9 --- /dev/null +++ b/src/domains/tag/tpyes/tag.type.ts @@ -0,0 +1,11 @@ +interface TagType { + id: number; + name: string; +} + +interface TagResponse { + count: number; + tags: TagType[]; +} + +export type { TagType, TagResponse }; From 4c95d1e8fe871ada62b5f1e714a781f32ed6fc45 Mon Sep 17 00:00:00 2001 From: eggmun Date: Sun, 16 Feb 2025 16:59:28 +0900 Subject: [PATCH 05/30] =?UTF-8?q?refactor(tag-type):=20getTags=20=ED=95=A8?= =?UTF-8?q?=EC=88=98=20API=20=EC=9D=91=EB=8B=B5=20=ED=83=80=EC=9E=85=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/domains/tag/api/tags.api.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/domains/tag/api/tags.api.ts b/src/domains/tag/api/tags.api.ts index a528f90..53d9983 100644 --- a/src/domains/tag/api/tags.api.ts +++ b/src/domains/tag/api/tags.api.ts @@ -1,3 +1,4 @@ import { Get } from '@/configs/fetch/http.api'; +import type { TagResponse } from '@/domains/tag/tpyes/tag.type'; -export const getTags = async (search?: string) => Get(`/tags`, { search }); +export const getTags = async (search?: string) => Get(`/tags`, { search }); From 7c617d18e1734a541f9981f6a6deb7e74db3b7a1 Mon Sep 17 00:00:00 2001 From: eggmun Date: Sun, 16 Feb 2025 17:03:11 +0900 Subject: [PATCH 06/30] =?UTF-8?q?chore(config):=20=EB=AA=A8=EB=93=A0=20con?= =?UTF-8?q?sole=20=EB=A1=9C=EA=B7=B8=20=EC=A0=9C=EA=B1=B0=20=EC=84=A4?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- next.config.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/next.config.js b/next.config.js index 3f3be5d..f00be32 100644 --- a/next.config.js +++ b/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: true, + }, +}; module.exports = withVanillaExtract(nextConfig); From 21fd071a7c9d6237cbf0799cc5960bc330155c20 Mon Sep 17 00:00:00 2001 From: eggmun Date: Sun, 16 Feb 2025 17:06:42 +0900 Subject: [PATCH 07/30] =?UTF-8?q?chore(eslint):=20autoFocus=20=EA=B4=80?= =?UTF-8?q?=EB=A0=A8=20ESLint=20=EA=B7=9C=EC=B9=99=20=EB=B9=84=ED=99=9C?= =?UTF-8?q?=EC=84=B1=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .eslintrc.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.eslintrc.json b/.eslintrc.json index bdd27ad..646a272 100644 --- a/.eslintrc.json +++ b/.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" } } From 3c2a1e0b583bd9bbeb69abefafdad52703999872 Mon Sep 17 00:00:00 2001 From: eggmun Date: Sun, 16 Feb 2025 17:08:17 +0900 Subject: [PATCH 08/30] =?UTF-8?q?feat:=20Tag=20=EB=A6=AC=EC=8A=A4=ED=8A=B8?= =?UTF-8?q?=20=EC=A1=B0=ED=9A=8C=20Api=20=EC=97=B0=EB=8F=99=20=EB=B0=8F=20?= =?UTF-8?q?=EC=97=B0=EA=B4=80=20=EA=B2=80=EC=83=89=EC=96=B4=20=EA=B8=B0?= =?UTF-8?q?=EB=8A=A5=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../features/Inputs/Search/Search.css.ts | 15 ++++ .../features/Inputs/Search/Search.tsx | 90 ++++++++++++++++--- 2 files changed, 91 insertions(+), 14 deletions(-) diff --git a/src/components/features/Inputs/Search/Search.css.ts b/src/components/features/Inputs/Search/Search.css.ts index d49c8a1..c479ad4 100644 --- a/src/components/features/Inputs/Search/Search.css.ts +++ b/src/components/features/Inputs/Search/Search.css.ts @@ -116,6 +116,17 @@ 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({ @@ -123,3 +134,7 @@ export const relatedTagText = style({ color: '#000', }); + +export const focusedTag = style({ + backgroundColor: 'rgba(106, 104, 104, 0.1)', +}); diff --git a/src/components/features/Inputs/Search/Search.tsx b/src/components/features/Inputs/Search/Search.tsx index df44070..8a7dd82 100644 --- a/src/components/features/Inputs/Search/Search.tsx +++ b/src/components/features/Inputs/Search/Search.tsx @@ -1,21 +1,72 @@ 'use client'; -import { KeyboardEvent, useState } from 'react'; +import { KeyboardEvent, useEffect, useState } from 'react'; import Image from 'next/image'; import Tag from '@/components/atoms/Icons/Tag/Tag'; import * as styles from './Search.css'; +import { getTags } from '@/domains/tag/api/tags.api'; +import type { TagType } from '@/domains/tag/tpyes/tag.type'; export default function Search() { const [isExpanded, setIsExpanded] = useState(false); const [tagList, setTagList] = useState([]); - const [inputValue, setInputValue] = useState(''); // 입력값을 저장할 state 추가 + const [inputValue, setInputValue] = useState(''); + const [relatedTags, setRelatedTags] = useState([]); + const [focusedIndex, setFocusedIndex] = useState(-1); + + useEffect(() => { + const searchTags = async () => { + if (inputValue.trim().length > 0) { + try { + const response = await getTags(inputValue); + setRelatedTags(response.tags); + } catch (error) { + console.error('태그 검색 실패:', error); + setRelatedTags([]); + } + } else { + setRelatedTags([]); + } + }; + + const timer = setTimeout(searchTags, 300); + return () => clearTimeout(timer); + }, [inputValue]); const handleKeyDown = (event: KeyboardEvent) => { if (event.nativeEvent.isComposing || event.keyCode === 229) return; - if (event.key === 'Enter' && inputValue.trim()) { - setTagList((prev) => [...prev, inputValue.trim()]); - setInputValue(''); + if (event.key === 'ArrowDown') { + event.preventDefault(); + setFocusedIndex((prev) => (prev < relatedTags.length - 1 ? prev + 1 : prev)); + return; + } + + if (event.key === 'ArrowUp') { + event.preventDefault(); + setFocusedIndex((prev) => (prev > 0 ? prev - 1 : -1)); + return; + } + + if (event.key === 'Enter') { + event.preventDefault(); + if (focusedIndex >= 0) { + const selectedTag = relatedTags[focusedIndex].name; + setTagList((prev) => [...prev, selectedTag]); + setInputValue(''); + setRelatedTags([]); + setFocusedIndex(-1); + } else if (inputValue.trim()) { + setTagList((prev) => [...prev, inputValue.trim()]); + setInputValue(''); + setRelatedTags([]); + } + return; + } + + if (event.key === 'Escape') { + setIsExpanded(false); + setFocusedIndex(-1); } }; @@ -35,6 +86,7 @@ export default function Search() { value={inputValue} onChange={(e) => setInputValue(e.target.value)} onKeyDown={handleKeyDown} + autoFocus />
@@ -46,14 +98,24 @@ export default function Search() {
    -
  • - -

    관련 태그

    -
    • -
  • - -

    관련 태그

    -
    • + {relatedTags.map((tag, index) => ( +
  • { + setTagList((prev) => [...prev, tag.name]); + setInputValue(''); + setRelatedTags([]); + setFocusedIndex(-1); + }} + tabIndex={0} + role="option" + aria-selected={index === focusedIndex} + > + +

    {tag.name}

    +
    • + ))}
@@ -62,7 +124,7 @@ export default function Search() { onClick={onClickExpanded} role="button" tabIndex={0} - aria-label="검색 축속 화면 버튼" + aria-label="검색 축소 화면 버튼" onKeyDown={handleKeyDown} /> From 13b9514eccab7a6283a6aa2f994ae9bfb6366c1f Mon Sep 17 00:00:00 2001 From: eggmun Date: Sun, 16 Feb 2025 17:41:00 +0900 Subject: [PATCH 09/30] =?UTF-8?q?rename:=20configs=20=ED=8F=B4=EB=8D=94=20?= =?UTF-8?q?=EA=B2=BD=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/{ => commons}/configs/fetch/http.api.ts | 0 src/domains/tag/api/tags.api.ts | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) rename src/{ => commons}/configs/fetch/http.api.ts (100%) diff --git a/src/configs/fetch/http.api.ts b/src/commons/configs/fetch/http.api.ts similarity index 100% rename from src/configs/fetch/http.api.ts rename to src/commons/configs/fetch/http.api.ts diff --git a/src/domains/tag/api/tags.api.ts b/src/domains/tag/api/tags.api.ts index 53d9983..23adf1e 100644 --- a/src/domains/tag/api/tags.api.ts +++ b/src/domains/tag/api/tags.api.ts @@ -1,4 +1,4 @@ -import { Get } from '@/configs/fetch/http.api'; +import { Get } from '@/commons/configs/fetch/http.api'; import type { TagResponse } from '@/domains/tag/tpyes/tag.type'; export const getTags = async (search?: string) => Get(`/tags`, { search }); From b9049cae3e07de75164dddf2377bc6a20a80c5da Mon Sep 17 00:00:00 2001 From: eggmun Date: Sun, 16 Feb 2025 17:41:23 +0900 Subject: [PATCH 10/30] =?UTF-8?q?rename:=20Provider=20=ED=8F=B4=EB=8D=94?= =?UTF-8?q?=20=EA=B2=BD=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/layout.tsx | 2 +- src/{ => commons}/providers/ThemeProvider/ThemeProvider.tsx | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename src/{ => commons}/providers/ThemeProvider/ThemeProvider.tsx (100%) diff --git a/src/app/layout.tsx b/src/app/layout.tsx index ca878f8..11d3d07 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,4 +1,4 @@ -import ThemeProvider from '@/providers/ThemeProvider/ThemeProvider'; +import ThemeProvider from '@/commons/providers/ThemeProvider/ThemeProvider.tsx'; import '../styles/globalStyles.css.ts'; import { Metadata } from 'next'; diff --git a/src/providers/ThemeProvider/ThemeProvider.tsx b/src/commons/providers/ThemeProvider/ThemeProvider.tsx similarity index 100% rename from src/providers/ThemeProvider/ThemeProvider.tsx rename to src/commons/providers/ThemeProvider/ThemeProvider.tsx From ab39115963ebe4513a1774fad140783235cf5cd1 Mon Sep 17 00:00:00 2001 From: eggmun Date: Sun, 16 Feb 2025 17:41:49 +0900 Subject: [PATCH 11/30] =?UTF-8?q?rename:=20Styles=20=ED=8F=B4=EB=8D=94=20?= =?UTF-8?q?=EA=B2=BD=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/layout.tsx | 2 +- src/app/page.tsx | 2 +- src/commons/providers/ThemeProvider/ThemeProvider.tsx | 2 +- src/{ => commons}/styles/globalStyles.css.ts | 0 src/{ => commons}/styles/rootStyles.css.ts | 0 src/components/features/Common/Slider/Slider.css.ts | 2 +- 6 files changed, 4 insertions(+), 4 deletions(-) rename src/{ => commons}/styles/globalStyles.css.ts (100%) rename src/{ => commons}/styles/rootStyles.css.ts (100%) diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 11d3d07..f3108d5 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,5 +1,5 @@ import ThemeProvider from '@/commons/providers/ThemeProvider/ThemeProvider.tsx'; -import '../styles/globalStyles.css.ts'; +import '../commons/styles/globalStyles.css.ts'; import { Metadata } from 'next'; export const metadata: Metadata = { diff --git a/src/app/page.tsx b/src/app/page.tsx index cb0592a..1ff5cde 100755 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -2,7 +2,7 @@ import RemoteControl from '@/components/features/Common/RemoteControl/RemoteCont 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 * as styles from '@/commons/styles/rootStyles.css'; export default function RootPage() { return ( diff --git a/src/commons/providers/ThemeProvider/ThemeProvider.tsx b/src/commons/providers/ThemeProvider/ThemeProvider.tsx index bb78d8e..561b366 100644 --- a/src/commons/providers/ThemeProvider/ThemeProvider.tsx +++ b/src/commons/providers/ThemeProvider/ThemeProvider.tsx @@ -1,6 +1,6 @@ 'use client'; -import { darkTheme, lightTheme } from '@/styles/globalStyles.css'; +import { darkTheme, lightTheme } from '@/commons/styles/globalStyles.css'; import { ThemeProvider } from 'next-themes'; const Provider = ({ children }: { children: React.ReactNode }) => { diff --git a/src/styles/globalStyles.css.ts b/src/commons/styles/globalStyles.css.ts similarity index 100% rename from src/styles/globalStyles.css.ts rename to src/commons/styles/globalStyles.css.ts diff --git a/src/styles/rootStyles.css.ts b/src/commons/styles/rootStyles.css.ts similarity index 100% rename from src/styles/rootStyles.css.ts rename to src/commons/styles/rootStyles.css.ts diff --git a/src/components/features/Common/Slider/Slider.css.ts b/src/components/features/Common/Slider/Slider.css.ts index f00ce2a..128ed88 100644 --- a/src/components/features/Common/Slider/Slider.css.ts +++ b/src/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({ From afa8c4cf43d3292ce7a73b6143599533cd4b4f39 Mon Sep 17 00:00:00 2001 From: eggmun Date: Sun, 16 Feb 2025 17:42:24 +0900 Subject: [PATCH 12/30] =?UTF-8?q?renmae:=20types=20=ED=8F=B4=EB=8D=94=20?= =?UTF-8?q?=EA=B2=BD=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/{ => commons}/types/theme/index.ts | 0 src/components/features/Common/ThemeIcon/ThemeIcon.tsx | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) rename src/{ => commons}/types/theme/index.ts (100%) diff --git a/src/types/theme/index.ts b/src/commons/types/theme/index.ts similarity index 100% rename from src/types/theme/index.ts rename to src/commons/types/theme/index.ts diff --git a/src/components/features/Common/ThemeIcon/ThemeIcon.tsx b/src/components/features/Common/ThemeIcon/ThemeIcon.tsx index 43b682c..02ed17e 100644 --- a/src/components/features/Common/ThemeIcon/ThemeIcon.tsx +++ b/src/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 { Theme } from '@/commons/types/theme'; import { ThemeIconProps } from './ThemeIcon.types'; export default function ThemeIcon({ setTheme, resolvedTheme }: ThemeIconProps) { From 4df59e4bc95b8eea786e67b8a0984ef8ee9c6451 Mon Sep 17 00:00:00 2001 From: eggmun Date: Sun, 16 Feb 2025 17:42:52 +0900 Subject: [PATCH 13/30] =?UTF-8?q?rename:=20utils=20=ED=8F=B4=EB=8D=94=20?= =?UTF-8?q?=EA=B2=BD=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/{ => commons}/utils/ui/scrollToTop/scrollToTop.ts | 0 src/{ => commons}/utils/ui/scrollToTop/scrollToTop.types.ts | 0 src/components/features/Common/RemoteControl/RemoteControl.tsx | 2 +- 3 files changed, 1 insertion(+), 1 deletion(-) rename src/{ => commons}/utils/ui/scrollToTop/scrollToTop.ts (100%) rename src/{ => commons}/utils/ui/scrollToTop/scrollToTop.types.ts (100%) diff --git a/src/utils/ui/scrollToTop/scrollToTop.ts b/src/commons/utils/ui/scrollToTop/scrollToTop.ts similarity index 100% rename from src/utils/ui/scrollToTop/scrollToTop.ts rename to src/commons/utils/ui/scrollToTop/scrollToTop.ts diff --git a/src/utils/ui/scrollToTop/scrollToTop.types.ts b/src/commons/utils/ui/scrollToTop/scrollToTop.types.ts similarity index 100% rename from src/utils/ui/scrollToTop/scrollToTop.types.ts rename to src/commons/utils/ui/scrollToTop/scrollToTop.types.ts diff --git a/src/components/features/Common/RemoteControl/RemoteControl.tsx b/src/components/features/Common/RemoteControl/RemoteControl.tsx index c7473fb..eee8a13 100644 --- a/src/components/features/Common/RemoteControl/RemoteControl.tsx +++ b/src/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 { scrollToTop } from '@/commons/utils/ui/scrollToTop/scrollToTop'; import * as styles from './RemoteControl.css'; export default function RemoteControl() { From 09fe91cb359bcf1384b95c037464756dd4534a47 Mon Sep 17 00:00:00 2001 From: eggmun Date: Sun, 16 Feb 2025 17:43:27 +0900 Subject: [PATCH 14/30] =?UTF-8?q?rename:=20components=20=ED=8F=B4=EB=8D=94?= =?UTF-8?q?=20=EA=B2=BD=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/page.tsx | 8 ++++---- .../components/atoms/Icons/ArrowUp/ArrowUp.tsx | 0 .../atoms/Icons/MagnifyingGlass/MagnifyingGlass.tsx | 0 src/{ => commons}/components/atoms/Icons/Moon/Moon.tsx | 0 src/{ => commons}/components/atoms/Icons/Sun/Sun.tsx | 0 src/{ => commons}/components/atoms/Icons/Tag/Tag.tsx | 0 .../features/Common/RemoteControl/RemoteControl.css.ts | 0 .../features/Common/RemoteControl/RemoteControl.tsx | 2 +- .../components/features/Common/Slider/Slider.css.ts | 0 .../components/features/Common/Slider/Slider.tsx | 0 .../components/features/Common/ThemeIcon/ThemeIcon.tsx | 4 ++-- .../features/Common/ThemeIcon/ThemeIcon.types.ts | 0 .../components/features/Inputs/Search/Search.css.ts | 0 .../components/features/Inputs/Search/Search.tsx | 2 +- .../components/features/Items/Card/Card.css.ts | 0 src/{ => commons}/components/features/Items/Card/Card.tsx | 0 src/{ => commons}/components/widgets/Header/Header.tsx | 2 +- src/{ => commons}/components/widgets/Header/header.css.ts | 0 .../components/widgets/SearchToolbar/SearchToolbar.css.ts | 0 .../components/widgets/SearchToolbar/SearchToolbar.tsx | 4 ++-- 20 files changed, 11 insertions(+), 11 deletions(-) rename src/{ => commons}/components/atoms/Icons/ArrowUp/ArrowUp.tsx (100%) rename src/{ => commons}/components/atoms/Icons/MagnifyingGlass/MagnifyingGlass.tsx (100%) rename src/{ => commons}/components/atoms/Icons/Moon/Moon.tsx (100%) rename src/{ => commons}/components/atoms/Icons/Sun/Sun.tsx (100%) rename src/{ => commons}/components/atoms/Icons/Tag/Tag.tsx (100%) rename src/{ => commons}/components/features/Common/RemoteControl/RemoteControl.css.ts (100%) rename src/{ => commons}/components/features/Common/RemoteControl/RemoteControl.tsx (86%) rename src/{ => commons}/components/features/Common/Slider/Slider.css.ts (100%) rename src/{ => commons}/components/features/Common/Slider/Slider.tsx (100%) rename src/{ => commons}/components/features/Common/ThemeIcon/ThemeIcon.tsx (76%) rename src/{ => commons}/components/features/Common/ThemeIcon/ThemeIcon.types.ts (100%) rename src/{ => commons}/components/features/Inputs/Search/Search.css.ts (100%) rename src/{ => commons}/components/features/Inputs/Search/Search.tsx (98%) rename src/{ => commons}/components/features/Items/Card/Card.css.ts (100%) rename src/{ => commons}/components/features/Items/Card/Card.tsx (100%) rename src/{ => commons}/components/widgets/Header/Header.tsx (88%) rename src/{ => commons}/components/widgets/Header/header.css.ts (100%) rename src/{ => commons}/components/widgets/SearchToolbar/SearchToolbar.css.ts (100%) rename src/{ => commons}/components/widgets/SearchToolbar/SearchToolbar.tsx (56%) diff --git a/src/app/page.tsx b/src/app/page.tsx index 1ff5cde..98618df 100755 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,7 +1,7 @@ -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 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() { diff --git a/src/components/atoms/Icons/ArrowUp/ArrowUp.tsx b/src/commons/components/atoms/Icons/ArrowUp/ArrowUp.tsx similarity index 100% rename from src/components/atoms/Icons/ArrowUp/ArrowUp.tsx rename to src/commons/components/atoms/Icons/ArrowUp/ArrowUp.tsx diff --git a/src/components/atoms/Icons/MagnifyingGlass/MagnifyingGlass.tsx b/src/commons/components/atoms/Icons/MagnifyingGlass/MagnifyingGlass.tsx similarity index 100% rename from src/components/atoms/Icons/MagnifyingGlass/MagnifyingGlass.tsx rename to src/commons/components/atoms/Icons/MagnifyingGlass/MagnifyingGlass.tsx diff --git a/src/components/atoms/Icons/Moon/Moon.tsx b/src/commons/components/atoms/Icons/Moon/Moon.tsx similarity index 100% rename from src/components/atoms/Icons/Moon/Moon.tsx rename to src/commons/components/atoms/Icons/Moon/Moon.tsx diff --git a/src/components/atoms/Icons/Sun/Sun.tsx b/src/commons/components/atoms/Icons/Sun/Sun.tsx similarity index 100% rename from src/components/atoms/Icons/Sun/Sun.tsx rename to src/commons/components/atoms/Icons/Sun/Sun.tsx diff --git a/src/components/atoms/Icons/Tag/Tag.tsx b/src/commons/components/atoms/Icons/Tag/Tag.tsx similarity index 100% rename from src/components/atoms/Icons/Tag/Tag.tsx rename to src/commons/components/atoms/Icons/Tag/Tag.tsx diff --git a/src/components/features/Common/RemoteControl/RemoteControl.css.ts b/src/commons/components/features/Common/RemoteControl/RemoteControl.css.ts similarity index 100% rename from src/components/features/Common/RemoteControl/RemoteControl.css.ts rename to src/commons/components/features/Common/RemoteControl/RemoteControl.css.ts diff --git a/src/components/features/Common/RemoteControl/RemoteControl.tsx b/src/commons/components/features/Common/RemoteControl/RemoteControl.tsx similarity index 86% rename from src/components/features/Common/RemoteControl/RemoteControl.tsx rename to src/commons/components/features/Common/RemoteControl/RemoteControl.tsx index eee8a13..603384c 100644 --- a/src/components/features/Common/RemoteControl/RemoteControl.tsx +++ b/src/commons/components/features/Common/RemoteControl/RemoteControl.tsx @@ -1,6 +1,6 @@ 'use client'; -import ArrowUp from '@/components/atoms/Icons/ArrowUp/ArrowUp'; +import ArrowUp from '@/commons/components/atoms/Icons/ArrowUp/ArrowUp'; import { scrollToTop } from '@/commons/utils/ui/scrollToTop/scrollToTop'; import * as styles from './RemoteControl.css'; diff --git a/src/components/features/Common/Slider/Slider.css.ts b/src/commons/components/features/Common/Slider/Slider.css.ts similarity index 100% rename from src/components/features/Common/Slider/Slider.css.ts rename to src/commons/components/features/Common/Slider/Slider.css.ts diff --git a/src/components/features/Common/Slider/Slider.tsx b/src/commons/components/features/Common/Slider/Slider.tsx similarity index 100% rename from src/components/features/Common/Slider/Slider.tsx rename to src/commons/components/features/Common/Slider/Slider.tsx diff --git a/src/components/features/Common/ThemeIcon/ThemeIcon.tsx b/src/commons/components/features/Common/ThemeIcon/ThemeIcon.tsx similarity index 76% rename from src/components/features/Common/ThemeIcon/ThemeIcon.tsx rename to src/commons/components/features/Common/ThemeIcon/ThemeIcon.tsx index 02ed17e..a52f30e 100644 --- a/src/components/features/Common/ThemeIcon/ThemeIcon.tsx +++ b/src/commons/components/features/Common/ThemeIcon/ThemeIcon.tsx @@ -1,5 +1,5 @@ -import Moon from '@/components/atoms/Icons/Moon/Moon'; -import Sun from '@/components/atoms/Icons/Sun/Sun'; +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'; diff --git a/src/components/features/Common/ThemeIcon/ThemeIcon.types.ts b/src/commons/components/features/Common/ThemeIcon/ThemeIcon.types.ts similarity index 100% rename from src/components/features/Common/ThemeIcon/ThemeIcon.types.ts rename to src/commons/components/features/Common/ThemeIcon/ThemeIcon.types.ts diff --git a/src/components/features/Inputs/Search/Search.css.ts b/src/commons/components/features/Inputs/Search/Search.css.ts similarity index 100% rename from src/components/features/Inputs/Search/Search.css.ts rename to src/commons/components/features/Inputs/Search/Search.css.ts diff --git a/src/components/features/Inputs/Search/Search.tsx b/src/commons/components/features/Inputs/Search/Search.tsx similarity index 98% rename from src/components/features/Inputs/Search/Search.tsx rename to src/commons/components/features/Inputs/Search/Search.tsx index 8a7dd82..bfefee6 100644 --- a/src/components/features/Inputs/Search/Search.tsx +++ b/src/commons/components/features/Inputs/Search/Search.tsx @@ -2,7 +2,7 @@ import { KeyboardEvent, useEffect, useState } from 'react'; import Image from 'next/image'; -import Tag from '@/components/atoms/Icons/Tag/Tag'; +import Tag from '@/commons/components/atoms/Icons/Tag/Tag'; import * as styles from './Search.css'; import { getTags } from '@/domains/tag/api/tags.api'; import type { TagType } from '@/domains/tag/tpyes/tag.type'; diff --git a/src/components/features/Items/Card/Card.css.ts b/src/commons/components/features/Items/Card/Card.css.ts similarity index 100% rename from src/components/features/Items/Card/Card.css.ts rename to src/commons/components/features/Items/Card/Card.css.ts diff --git a/src/components/features/Items/Card/Card.tsx b/src/commons/components/features/Items/Card/Card.tsx similarity index 100% rename from src/components/features/Items/Card/Card.tsx rename to src/commons/components/features/Items/Card/Card.tsx diff --git a/src/components/widgets/Header/Header.tsx b/src/commons/components/widgets/Header/Header.tsx similarity index 88% rename from src/components/widgets/Header/Header.tsx rename to src/commons/components/widgets/Header/Header.tsx index 6de42ca..e3fdc39 100755 --- a/src/components/widgets/Header/Header.tsx +++ b/src/commons/components/widgets/Header/Header.tsx @@ -1,7 +1,7 @@ 'use client'; import Image from 'next/image'; -import ThemeIcon from '@/components/features/Common/ThemeIcon/ThemeIcon'; +import ThemeIcon from '@/commons/components/features/Common/ThemeIcon/ThemeIcon'; import { useTheme } from 'next-themes'; import * as styles from './header.css'; diff --git a/src/components/widgets/Header/header.css.ts b/src/commons/components/widgets/Header/header.css.ts similarity index 100% rename from src/components/widgets/Header/header.css.ts rename to src/commons/components/widgets/Header/header.css.ts diff --git a/src/components/widgets/SearchToolbar/SearchToolbar.css.ts b/src/commons/components/widgets/SearchToolbar/SearchToolbar.css.ts similarity index 100% rename from src/components/widgets/SearchToolbar/SearchToolbar.css.ts rename to src/commons/components/widgets/SearchToolbar/SearchToolbar.css.ts diff --git a/src/components/widgets/SearchToolbar/SearchToolbar.tsx b/src/commons/components/widgets/SearchToolbar/SearchToolbar.tsx similarity index 56% rename from src/components/widgets/SearchToolbar/SearchToolbar.tsx rename to src/commons/components/widgets/SearchToolbar/SearchToolbar.tsx index 04d088e..d3fb690 100644 --- a/src/components/widgets/SearchToolbar/SearchToolbar.tsx +++ b/src/commons/components/widgets/SearchToolbar/SearchToolbar.tsx @@ -1,5 +1,5 @@ -import Slider from '@/components/features/Common/Slider/Slider'; -import Search from '@/components/features/Inputs/Search/Search'; +import Slider from '@/commons/components/features/Common/Slider/Slider'; +import Search from '@/commons/components/features/Inputs/Search/Search'; import * as styles from './SearchToolbar.css'; export default function SearchToolbar() { From 338739e6454fba4319c5075592377125726ce1c2 Mon Sep 17 00:00:00 2001 From: eggmun Date: Sun, 16 Feb 2025 18:15:44 +0900 Subject: [PATCH 15/30] =?UTF-8?q?feat:=20TagBox=20Atom=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/commons/components/atoms/boxes/tagBox/tagBox.css.ts | 9 +++++++++ src/commons/components/atoms/boxes/tagBox/tagBox.tsx | 5 +++++ 2 files changed, 14 insertions(+) create mode 100644 src/commons/components/atoms/boxes/tagBox/tagBox.css.ts create mode 100644 src/commons/components/atoms/boxes/tagBox/tagBox.tsx diff --git a/src/commons/components/atoms/boxes/tagBox/tagBox.css.ts b/src/commons/components/atoms/boxes/tagBox/tagBox.css.ts new file mode 100644 index 0000000..9f5ded6 --- /dev/null +++ b/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', +}); diff --git a/src/commons/components/atoms/boxes/tagBox/tagBox.tsx b/src/commons/components/atoms/boxes/tagBox/tagBox.tsx new file mode 100644 index 0000000..7babb5f --- /dev/null +++ b/src/commons/components/atoms/boxes/tagBox/tagBox.tsx @@ -0,0 +1,5 @@ +import * as styles from './tagBox.css'; + +export function TagBox() { + return
TagBox
; +} From 47dd4b4a673b93232eb9f04c7808ebe5604930da Mon Sep 17 00:00:00 2001 From: eggmun Date: Sun, 16 Feb 2025 18:16:23 +0900 Subject: [PATCH 16/30] =?UTF-8?q?refactor:=20TagBox=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=82=AC=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/commons/components/features/Inputs/Search/Search.tsx | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/src/commons/components/features/Inputs/Search/Search.tsx b/src/commons/components/features/Inputs/Search/Search.tsx index bfefee6..46a02bf 100644 --- a/src/commons/components/features/Inputs/Search/Search.tsx +++ b/src/commons/components/features/Inputs/Search/Search.tsx @@ -6,6 +6,7 @@ import Tag from '@/commons/components/atoms/Icons/Tag/Tag'; import * as styles from './Search.css'; import { getTags } from '@/domains/tag/api/tags.api'; import type { TagType } from '@/domains/tag/tpyes/tag.type'; +import { TagBox } from '@/commons/components/atoms/boxes/tagBox/tagBox'; export default function Search() { const [isExpanded, setIsExpanded] = useState(false); @@ -91,9 +92,7 @@ export default function Search() {
{tagList.map((el) => ( -
- {el} -
+ ))}
@@ -139,9 +138,7 @@ export default function Search() { onKeyDown={handleKeyDown} > {new Array(3).fill('React').map((el, index) => ( -
- {el} -
+ ))}
From 1d3eb9b8a7127f839c52b6dbb99697156ad9c134 Mon Sep 17 00:00:00 2001 From: eggmun Date: Sun, 16 Feb 2025 18:28:29 +0900 Subject: [PATCH 17/30] =?UTF-8?q?refactor(tag-box):=20TagBox=EC=97=90=20ta?= =?UTF-8?q?gName=20props=EB=A1=9C=20=EB=B0=9B=EC=9D=84=20=EC=88=98=20?= =?UTF-8?q?=EC=9E=88=EB=8F=84=EB=A1=9D=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/commons/components/atoms/boxes/tagBox/tagBox.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/commons/components/atoms/boxes/tagBox/tagBox.tsx b/src/commons/components/atoms/boxes/tagBox/tagBox.tsx index 7babb5f..a0b2369 100644 --- a/src/commons/components/atoms/boxes/tagBox/tagBox.tsx +++ b/src/commons/components/atoms/boxes/tagBox/tagBox.tsx @@ -1,5 +1,5 @@ import * as styles from './tagBox.css'; -export function TagBox() { - return
TagBox
; +export function TagBox({ tagName }: { tagName: string }) { + return
{tagName}
; } From cb150b9585cb64bc52336951ea6a35e8210f942e Mon Sep 17 00:00:00 2001 From: eggmun Date: Sun, 16 Feb 2025 18:29:23 +0900 Subject: [PATCH 18/30] =?UTF-8?q?feat(feature):=20TagList=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/features/Lists/TagList/TagList.css.ts | 11 +++++++++++ .../components/features/Lists/TagList/TagList.tsx | 12 ++++++++++++ 2 files changed, 23 insertions(+) create mode 100644 src/commons/components/features/Lists/TagList/TagList.css.ts create mode 100644 src/commons/components/features/Lists/TagList/TagList.tsx diff --git a/src/commons/components/features/Lists/TagList/TagList.css.ts b/src/commons/components/features/Lists/TagList/TagList.css.ts new file mode 100644 index 0000000..ba3d37b --- /dev/null +++ b/src/commons/components/features/Lists/TagList/TagList.css.ts @@ -0,0 +1,11 @@ +import { style } from '@vanilla-extract/css'; + +export const tagListWrapper = style({ + display: 'flex', + flexDirection: 'row', + flexWrap: 'wrap', + + gap: '10px', + + fontSize: '12px', +}); diff --git a/src/commons/components/features/Lists/TagList/TagList.tsx b/src/commons/components/features/Lists/TagList/TagList.tsx new file mode 100644 index 0000000..9d402a2 --- /dev/null +++ b/src/commons/components/features/Lists/TagList/TagList.tsx @@ -0,0 +1,12 @@ +import { TagBox } from '@/commons/components/atoms/boxes/tagBox/tagBox'; +import * as styles from './TagList.css'; + +export const TagList = ({ tags }: { tags: string[] }) => { + return ( +
+ {tags.map((tag) => ( + + ))} +
+ ); +}; From ad5195302cb634292fbc82077bc0c89d32873359 Mon Sep 17 00:00:00 2001 From: eggmun Date: Sun, 16 Feb 2025 18:29:47 +0900 Subject: [PATCH 19/30] =?UTF-8?q?refactor:(tagList):=20TagList=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=82=AC=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../features/Inputs/Search/Search.tsx | 18 +++++++----------- 1 file changed, 7 insertions(+), 11 deletions(-) diff --git a/src/commons/components/features/Inputs/Search/Search.tsx b/src/commons/components/features/Inputs/Search/Search.tsx index 46a02bf..2a5acfd 100644 --- a/src/commons/components/features/Inputs/Search/Search.tsx +++ b/src/commons/components/features/Inputs/Search/Search.tsx @@ -6,7 +6,7 @@ import Tag from '@/commons/components/atoms/Icons/Tag/Tag'; import * as styles from './Search.css'; import { getTags } from '@/domains/tag/api/tags.api'; import type { TagType } from '@/domains/tag/tpyes/tag.type'; -import { TagBox } from '@/commons/components/atoms/boxes/tagBox/tagBox'; +import { TagList } from '../../Lists/TagList/TagList'; export default function Search() { const [isExpanded, setIsExpanded] = useState(false); @@ -76,7 +76,7 @@ export default function Search() { }; return ( -
+
{isExpanded ? ( <>
@@ -90,11 +90,7 @@ export default function Search() { autoFocus /> -
- {tagList.map((el) => ( - - ))} -
+
    {relatedTags.map((tag, index) => ( @@ -131,15 +127,15 @@ export default function Search() { <>
    - {new Array(3).fill('React').map((el, index) => ( - - ))} + + {/* {new Array(3).fill('React').map((el, index) => ( + + ))} */}
    ReadingGlasses From ed5d91d6f8b6325df55cb2eb006b67f41672113f Mon Sep 17 00:00:00 2001 From: eggmun Date: Sun, 16 Feb 2025 18:30:19 +0900 Subject: [PATCH 20/30] =?UTF-8?q?comment(remove):=20=EB=B6=88=ED=95=84?= =?UTF-8?q?=EC=9A=94=ED=95=9C=20=EC=A3=BC=EC=84=9D=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/commons/components/features/Inputs/Search/Search.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/commons/components/features/Inputs/Search/Search.tsx b/src/commons/components/features/Inputs/Search/Search.tsx index 2a5acfd..bee72cf 100644 --- a/src/commons/components/features/Inputs/Search/Search.tsx +++ b/src/commons/components/features/Inputs/Search/Search.tsx @@ -133,9 +133,6 @@ export default function Search() { onKeyDown={handleKeyDown} > - {/* {new Array(3).fill('React').map((el, index) => ( - - ))} */}
    ReadingGlasses From 723e038e728289f7ec03aaeb64cc910c5326eb60 Mon Sep 17 00:00:00 2001 From: eggmun Date: Sun, 16 Feb 2025 18:38:18 +0900 Subject: [PATCH 21/30] =?UTF-8?q?feat(feature):=20=EC=97=B0=EA=B4=80=20?= =?UTF-8?q?=ED=83=9C=EA=B7=B8=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=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 --- .../Lists/RelatedTags/RelatedTags.css.ts | 40 +++++++++++++++++++ .../Lists/RelatedTags/RelatedTags.tsx | 31 ++++++++++++++ 2 files changed, 71 insertions(+) create mode 100644 src/commons/components/features/Lists/RelatedTags/RelatedTags.css.ts create mode 100644 src/commons/components/features/Lists/RelatedTags/RelatedTags.tsx diff --git a/src/commons/components/features/Lists/RelatedTags/RelatedTags.css.ts b/src/commons/components/features/Lists/RelatedTags/RelatedTags.css.ts new file mode 100644 index 0000000..ba1d464 --- /dev/null +++ b/src/commons/components/features/Lists/RelatedTags/RelatedTags.css.ts @@ -0,0 +1,40 @@ +import { style } from '@vanilla-extract/css'; + +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)', +}); diff --git a/src/commons/components/features/Lists/RelatedTags/RelatedTags.tsx b/src/commons/components/features/Lists/RelatedTags/RelatedTags.tsx new file mode 100644 index 0000000..12c9c6b --- /dev/null +++ b/src/commons/components/features/Lists/RelatedTags/RelatedTags.tsx @@ -0,0 +1,31 @@ +import type { TagType } from '@/domains/tag/tpyes/tag.type'; +import * as styles from './RelatedTags.css'; +import Tag from '@/commons/components/atoms/Icons/Tag/Tag'; + +export const RelatedTags = ({ + relatedTags, + focusedIndex, + onClickRelatedTag, +}: { + relatedTags: TagType[]; + focusedIndex: number; + onClickRelatedTag: (tag: TagType) => void; +}) => { + return ( +
      + {relatedTags.map((tag, index) => ( +
    • onClickRelatedTag(tag)} + tabIndex={0} + role="option" + aria-selected={index === focusedIndex} + > + +

      {tag.name}

      +
      • + ))} +
    + ); +}; From b31a8b479adb861354554fe38febc8ccb2532318 Mon Sep 17 00:00:00 2001 From: eggmun Date: Sun, 16 Feb 2025 18:38:47 +0900 Subject: [PATCH 22/30] =?UTF-8?q?refactor(relatedTags):=20=EC=97=B0?= =?UTF-8?q?=EA=B4=80=20=ED=83=9C=EA=B7=B8=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EC=82=AC=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../features/Inputs/Search/Search.tsx | 30 ++++++------------- 1 file changed, 9 insertions(+), 21 deletions(-) diff --git a/src/commons/components/features/Inputs/Search/Search.tsx b/src/commons/components/features/Inputs/Search/Search.tsx index bee72cf..51ac3b5 100644 --- a/src/commons/components/features/Inputs/Search/Search.tsx +++ b/src/commons/components/features/Inputs/Search/Search.tsx @@ -2,11 +2,11 @@ import { KeyboardEvent, useEffect, useState } from 'react'; import Image from 'next/image'; -import Tag from '@/commons/components/atoms/Icons/Tag/Tag'; import * as styles from './Search.css'; import { getTags } from '@/domains/tag/api/tags.api'; import type { TagType } from '@/domains/tag/tpyes/tag.type'; import { TagList } from '../../Lists/TagList/TagList'; +import { RelatedTags } from '../../Lists/RelatedTags/RelatedTags'; export default function Search() { const [isExpanded, setIsExpanded] = useState(false); @@ -75,6 +75,13 @@ export default function Search() { setIsExpanded((prev) => !prev); }; + const onClickRelatedTag = (tag: TagType) => { + setTagList((prev) => [...prev, tag.name]); + setInputValue(''); + setRelatedTags([]); + setFocusedIndex(-1); + }; + return (
    {isExpanded ? ( @@ -92,26 +99,7 @@ export default function Search() { -
      - {relatedTags.map((tag, index) => ( -
    • { - setTagList((prev) => [...prev, tag.name]); - setInputValue(''); - setRelatedTags([]); - setFocusedIndex(-1); - }} - tabIndex={0} - role="option" - aria-selected={index === focusedIndex} - > - -

      {tag.name}

      -
      • - ))} -
    +
    Date: Sun, 16 Feb 2025 18:40:15 +0900 Subject: [PATCH 23/30] =?UTF-8?q?refactor(glasses):=20=EB=8F=8B=EB=B3=B4?= =?UTF-8?q?=EA=B8=B0=20=EC=95=84=EC=9D=B4=EC=BD=98=EC=9D=84=20=EA=B0=90?= =?UTF-8?q?=EC=8B=B8=EB=8A=94=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?= =?UTF-8?q?=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/commons/components/features/Inputs/Search/Search.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/commons/components/features/Inputs/Search/Search.tsx b/src/commons/components/features/Inputs/Search/Search.tsx index 51ac3b5..8d909bf 100644 --- a/src/commons/components/features/Inputs/Search/Search.tsx +++ b/src/commons/components/features/Inputs/Search/Search.tsx @@ -122,9 +122,7 @@ export default function Search() { >
    -
    - ReadingGlasses -
    + ReadingGlasses )}
    From 0b3f4b225d29a6637c2f891eceffe04c686fca25 Mon Sep 17 00:00:00 2001 From: eggmun Date: Sun, 16 Feb 2025 18:57:52 +0900 Subject: [PATCH 24/30] =?UTF-8?q?fix:=20keyDown=20=EC=9D=B4=EB=B2=A4?= =?UTF-8?q?=ED=8A=B8=20=EC=A4=91=EB=B3=B5=20=EB=B0=9C=EC=83=9D=20=EB=B6=80?= =?UTF-8?q?=EB=B6=84=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../features/Inputs/Search/Search.tsx | 34 +++++++++++++++---- 1 file changed, 28 insertions(+), 6 deletions(-) diff --git a/src/commons/components/features/Inputs/Search/Search.tsx b/src/commons/components/features/Inputs/Search/Search.tsx index 8d909bf..d3f7c08 100644 --- a/src/commons/components/features/Inputs/Search/Search.tsx +++ b/src/commons/components/features/Inputs/Search/Search.tsx @@ -39,26 +39,48 @@ export default function Search() { if (event.key === 'ArrowDown') { event.preventDefault(); - setFocusedIndex((prev) => (prev < relatedTags.length - 1 ? prev + 1 : prev)); + setFocusedIndex((prev) => { + if (prev === -1) return 0; + return Math.min(prev + 1, relatedTags.length - 1); + }); return; } if (event.key === 'ArrowUp') { event.preventDefault(); - setFocusedIndex((prev) => (prev > 0 ? prev - 1 : -1)); + setFocusedIndex((prev) => { + const next = prev > 0 ? prev - 1 : -1; + return next; + }); return; } if (event.key === 'Enter') { event.preventDefault(); - if (focusedIndex >= 0) { + + if (focusedIndex >= 0 && relatedTags[focusedIndex]) { const selectedTag = relatedTags[focusedIndex].name; - setTagList((prev) => [...prev, selectedTag]); + + setTagList((prev) => { + if (prev.includes(selectedTag)) { + return prev; + } + return [...prev, selectedTag]; + }); + setInputValue(''); setRelatedTags([]); setFocusedIndex(-1); } else if (inputValue.trim()) { - setTagList((prev) => [...prev, inputValue.trim()]); + const newTag = inputValue.trim(); + + setTagList((prev) => { + if (prev.includes(newTag)) { + return prev; + } + return [...prev, newTag]; + }); + setInputValue(''); setRelatedTags([]); } @@ -83,7 +105,7 @@ export default function Search() { }; return ( -
    +
    {isExpanded ? ( <>
    From 5ca03a15caa37b3a7004218a74b277fe393ee0c4 Mon Sep 17 00:00:00 2001 From: eggmun Date: Sun, 16 Feb 2025 19:09:42 +0900 Subject: [PATCH 25/30] =?UTF-8?q?feat(feature):=20CollapsedSearch=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../CollapsedSearch/CollapsedSearch.css.ts | 8 ++++++ .../CollapsedSearch/CollapsedSearch.tsx | 27 +++++++++++++++++++ 2 files changed, 35 insertions(+) create mode 100644 src/commons/components/features/Inputs/CollapsedSearch/CollapsedSearch.css.ts create mode 100644 src/commons/components/features/Inputs/CollapsedSearch/CollapsedSearch.tsx diff --git a/src/commons/components/features/Inputs/CollapsedSearch/CollapsedSearch.css.ts b/src/commons/components/features/Inputs/CollapsedSearch/CollapsedSearch.css.ts new file mode 100644 index 0000000..c6a4ebd --- /dev/null +++ b/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', +}); diff --git a/src/commons/components/features/Inputs/CollapsedSearch/CollapsedSearch.tsx b/src/commons/components/features/Inputs/CollapsedSearch/CollapsedSearch.tsx new file mode 100644 index 0000000..74958df --- /dev/null +++ b/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) => void; +}) => { + return ( + <> +
    + +
    + ReadingGlasses + + ); +}; From e7edaaae4460bd780792ff18039b2e83f906a59f Mon Sep 17 00:00:00 2001 From: eggmun Date: Sun, 16 Feb 2025 19:11:53 +0900 Subject: [PATCH 26/30] =?UTF-8?q?refactor(collapsedSearch):=20CollapsedSea?= =?UTF-8?q?rch=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=82=AC=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/features/Inputs/Search/Search.tsx | 15 ++------------- 1 file changed, 2 insertions(+), 13 deletions(-) diff --git a/src/commons/components/features/Inputs/Search/Search.tsx b/src/commons/components/features/Inputs/Search/Search.tsx index d3f7c08..07bf1c7 100644 --- a/src/commons/components/features/Inputs/Search/Search.tsx +++ b/src/commons/components/features/Inputs/Search/Search.tsx @@ -1,12 +1,12 @@ 'use client'; import { KeyboardEvent, useEffect, useState } from 'react'; -import Image from 'next/image'; import * as styles from './Search.css'; import { getTags } from '@/domains/tag/api/tags.api'; import type { TagType } from '@/domains/tag/tpyes/tag.type'; import { TagList } from '../../Lists/TagList/TagList'; import { RelatedTags } from '../../Lists/RelatedTags/RelatedTags'; +import { CollapsedSearch } from '../CollapsedSearch/CollapsedSearch'; export default function Search() { const [isExpanded, setIsExpanded] = useState(false); @@ -134,18 +134,7 @@ export default function Search() { /> ) : ( - <> -
    - -
    - ReadingGlasses - + )}
    ); From f5a5f95bf7697424e051ad1d553c92525d41a456 Mon Sep 17 00:00:00 2001 From: eggmun Date: Sun, 16 Feb 2025 19:13:31 +0900 Subject: [PATCH 27/30] =?UTF-8?q?chore(next):=20=EC=8B=A4=EC=A0=9C=20?= =?UTF-8?q?=EC=9A=B4=EC=98=81=EC=84=9C=EB=B2=84=EC=97=90=EC=84=9C=EB=A7=8C?= =?UTF-8?q?=20=EB=A1=9C=EA=B7=B8=EB=A5=BC=20=EC=A7=80=EC=9A=B8=20=EC=88=98?= =?UTF-8?q?=20=EC=9E=88=EB=8F=84=EB=A1=9D=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- next.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/next.config.js b/next.config.js index f00be32..5e98ec0 100644 --- a/next.config.js +++ b/next.config.js @@ -5,7 +5,7 @@ const withVanillaExtract = createVanillaExtractPlugin(); /** @type {import('next').NextConfig} */ const nextConfig = { compiler: { - removeConsole: true, + removeConsole: process.env.NODE_ENV === 'production', }, }; From 011294b4fc8e019f227a48f4d5ff4183ea20f675 Mon Sep 17 00:00:00 2001 From: eggmun Date: Sun, 16 Feb 2025 19:17:26 +0900 Subject: [PATCH 28/30] =?UTF-8?q?feat(feature):=20ExpandedSearch=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ExpandedSearch/ExpandedSearch.css.ts | 140 ++++++++++++++++++ .../Inputs/ExpandedSearch/ExpandedSearch.tsx | 54 +++++++ 2 files changed, 194 insertions(+) create mode 100644 src/commons/components/features/Inputs/ExpandedSearch/ExpandedSearch.css.ts create mode 100644 src/commons/components/features/Inputs/ExpandedSearch/ExpandedSearch.tsx diff --git a/src/commons/components/features/Inputs/ExpandedSearch/ExpandedSearch.css.ts b/src/commons/components/features/Inputs/ExpandedSearch/ExpandedSearch.css.ts new file mode 100644 index 0000000..c479ad4 --- /dev/null +++ b/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)', +}); diff --git a/src/commons/components/features/Inputs/ExpandedSearch/ExpandedSearch.tsx b/src/commons/components/features/Inputs/ExpandedSearch/ExpandedSearch.tsx new file mode 100644 index 0000000..9cf5e42 --- /dev/null +++ b/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) => void; + tagList: string[]; + relatedTags: TagType[]; + focusedIndex: number; + onClickRelatedTag: (tag: TagType) => void; + onClickExpanded: () => void; +}) => { + return ( + <> +
    + setInputValue(e.target.value)} + onKeyDown={handleKeyDown} + autoFocus + /> + + + + +
    + +
    + + ); +}; From 9256ee68affcc9a97d06739200cc4fa346426c8c Mon Sep 17 00:00:00 2001 From: eggmun Date: Sun, 16 Feb 2025 19:17:52 +0900 Subject: [PATCH 29/30] =?UTF-8?q?refactor(expandedSearch):=20ExpandedSearc?= =?UTF-8?q?h=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=82=AC=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../features/Inputs/Search/Search.tsx | 39 ++++++------------- 1 file changed, 11 insertions(+), 28 deletions(-) diff --git a/src/commons/components/features/Inputs/Search/Search.tsx b/src/commons/components/features/Inputs/Search/Search.tsx index 07bf1c7..79a732a 100644 --- a/src/commons/components/features/Inputs/Search/Search.tsx +++ b/src/commons/components/features/Inputs/Search/Search.tsx @@ -4,9 +4,8 @@ import { KeyboardEvent, useEffect, useState } from 'react'; import * as styles from './Search.css'; import { getTags } from '@/domains/tag/api/tags.api'; import type { TagType } from '@/domains/tag/tpyes/tag.type'; -import { TagList } from '../../Lists/TagList/TagList'; -import { RelatedTags } from '../../Lists/RelatedTags/RelatedTags'; import { CollapsedSearch } from '../CollapsedSearch/CollapsedSearch'; +import { ExpandedSearch } from '../ExpandedSearch/ExpandedSearch'; export default function Search() { const [isExpanded, setIsExpanded] = useState(false); @@ -107,32 +106,16 @@ export default function Search() { return (
    {isExpanded ? ( - <> -
    - setInputValue(e.target.value)} - onKeyDown={handleKeyDown} - autoFocus - /> - - - - -
    - -
    - + ) : ( )} From ce952e70312895543351fe2c06c62c4557c73129 Mon Sep 17 00:00:00 2001 From: eggmun Date: Sun, 16 Feb 2025 19:36:35 +0900 Subject: [PATCH 30/30] =?UTF-8?q?refactor(search):=20isExpanded=EA=B0=80?= =?UTF-8?q?=20true=EC=9D=BC=20=EA=B2=BD=EC=9A=B0=EC=97=90=EB=8A=94=20onCli?= =?UTF-8?q?ck=20=EC=9D=B4=EB=B2=A4=ED=8A=B8=20=EB=AF=B8=EC=82=AC=EC=9A=A9?= =?UTF-8?q?=ED=95=98=EB=8F=84=EB=A1=9D=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/commons/components/features/Inputs/Search/Search.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/commons/components/features/Inputs/Search/Search.tsx b/src/commons/components/features/Inputs/Search/Search.tsx index 79a732a..c5ed84d 100644 --- a/src/commons/components/features/Inputs/Search/Search.tsx +++ b/src/commons/components/features/Inputs/Search/Search.tsx @@ -104,7 +104,7 @@ export default function Search() { }; return ( -
    +
    {isExpanded ? (