[style/datalist-component] 💄Style: 도서/CD 리스트 컴포넌트 스타일링 #16

[style/datalist-component] 💄Style: 도서/CD 리스트 컴포넌트 스타일링 #16

package.json

@@ -13,6 +13,7 @@
     "@tanstack/react-query": "^5.66.0",
     "@types/three": "^0.173.0",
     "axios": "^1.7.9",
+    "classnames": "^2.5.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-router-dom": "^7.1.5",

src/components/datalist/DataList.tsx

@@ -0,0 +1,148 @@
+import search_icon from '@assets/search-icon.svg';
+
+import { useEffect, useRef, useState } from 'react';
+import NoEditStatusItem from './NoEditStatusItem';
+import EditStatusItem from './EditStatusItem';
+import classNames from 'classnames';
+
+export default function DataList({
+  datas,
+  type,
+}: {
+  datas: DataListInfo[];
+  type: string;
+}) {
+  const isBook = type === 'book' ? true : false;
+  const mainColor = isBook ? '#2656CD' : '#7838AF';
+  const debounceTimeout = useRef<NodeJS.Timeout | null>(null);
+
+  const [isEdit, setIsEdit] = useState(false);
+  const [currentInput, setCurrentInput] = useState('');
+  const [filteredDatas, setFilteredDatas] = useState<DataListInfo[]>([]);
+  // 입력창에 focus 여부
+  const [isFocused, setIsFocused] = useState(false);
+
+  const handleDelete = () => {
+    console.log('deleted!');
+  };
+
+  const handleEdit = () => {
+    setIsEdit(true);
+    setCurrentInput('');
+  };
+
+  const handleComplete = () => {
+    setIsEdit(false);
+  };
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setCurrentInput(event.target.value);
+  };
+
+  useEffect(() => {
+    const filteredDatas = datas.filter((data) => {
+      return (
+        data.author?.includes(currentInput) ||
+        data.publisher?.includes(currentInput) ||
+        data.released_year?.includes(currentInput) ||
+        data.singer?.includes(currentInput) ||
+        data.title?.includes(currentInput)
+      );
+    });
+    // 입력 결과 디바운싱 적용
+    if (debounceTimeout.current) clearTimeout(debounceTimeout.current);
+    debounceTimeout.current = setTimeout(() => {
+      setFilteredDatas(filteredDatas);
+    }, 500);
+  }, [currentInput]);
+
+  return (
+    <div className='absolute top-0 right-0  w-[444px] min-h-screen bg-[#FFFAFA] rounded-tl-3xl rounded-bl-3xl '>
+      <div className='pl-11 pt-15 pr-10 '>
+        <span
+          className={classNames(
+            `text-center text-4xl  font-bold leading-normal`,
+            isBook ? `text-[#2656CD]` : `text-[#7838AF]`,
+          )}>
+          PlayList
+        </span>
+
+        {/* 총 갯수, 편집 버튼 */}
+        <div
+          className={`flex  items-center justify-between gap-4 mt-15 font-semibold text-[${mainColor}]  `}>
+          <span className='text-[18px] '>{`총 ${datas.length}개`}</span>
+
+          {isEdit ? (
+            <div className='flex items-center gap-4.5'>
+              <button
+                className={`text-[${mainColor}]  cursor-pointer`}
+                onClick={handleDelete}>
+                삭제
+              </button>
+              <button
+                className={`  cursor-pointer ${
+                  isBook ? 'text-[#3E507D80]' : 'text-[#60308C]/80  '
+                }`}
+                onClick={handleComplete}>
+                완료
+              </button>
+            </div>
+          ) : (
+            <button
+              className='cursor-pointer text-[16px]'
+              onClick={handleEdit}>
+              편집
+            </button>
+          )}
+        </div>
+
+        {/* 검색창 */}
+        <div
+          style={isFocused ? { borderColor: mainColor } : {}}
+          className={`relative mt-7 mb-9 border-2 border-transparent  rounded-[10px]   `}>
+          <div
+            className={`flex items-center  w-full  pl-5 pr-4 py-2.5  rounded-[10px]  ${
+              isBook ? 'bg-[#C3D7FF26]' : 'bg-[#ddc3ff]/15'
+            }`}>
+            <input
+              className={` w-full focus:outline-none   ${
+                isBook
+                  ? 'placeholder:text-[#3E507D4D]'
+                  : 'placeholder:text-[#60308C4D]'
+              } `}
+              type='text'
+              placeholder='어떤 것이든 검색해보세요!'
+              value={currentInput}
+              onFocus={() => setIsFocused(true)}
+              onBlur={() => setIsFocused(false)}
+              onChange={handleChange}
+            />
+            <button>
+              <img
+                src={search_icon}
+                alt='검색창 로고'
+              />
+            </button>
+          </div>
+        </div>
+        <ul className='flex flex-col justify-center  gap-6 pb-17 '>
+          {filteredDatas.map((data, index) => {
+            return isEdit ? (
+              <EditStatusItem
+                key={index}
+                data={data}
+                isBook={isBook}
+              />
+            ) : (
+              <NoEditStatusItem
+                key={index}
+                data={data}
+                isBook={isBook}
+              />
+            );
+          })}
+        </ul>
+      </div>
+    </div>
+  );
+}

src/components/datalist/EditStatusItem.tsx

@@ -0,0 +1,63 @@
+import classNames from 'classnames';
+import { useState } from 'react';
+import check_logo from '@assets/datalist/check-logo.svg';
+
+export default function EditStatusItem({
+  data,
+  isBook,
+}: {
+  data: DataListInfo;
+  isBook: boolean;
+}) {
+  const mainColor = isBook ? '#2656CD' : '#7838AF';
+  const [isChecked, setIsChecked] = useState(false);
+  return (
+    <>
+      <li
+        style={isChecked ? { borderColor: `${mainColor}` } : {}}
+        className={classNames(
+          `pl-7 pr-9 py-4.5 flex items-center gap-7  rounded-xl border-2 border-transparent ${
+            isBook ? 'bg-[#F1F3FA80]' : 'bg-[#f7f1fa]/50 '
+          }`,
+        )}>
+        <label className='relative flex items-center justify-center  w-4 h-4'>
+          {/* 체크 박스 */}
+          <input
+            type='checkbox'
+            style={isChecked ? { backgroundColor: mainColor } : {}}
+            checked={isChecked}
+            onChange={() => setIsChecked(!isChecked)}
+            className={classNames(
+              'appearance-none w-4 h-4 rounded-full bg-no-repeat bg-center border',
+            )}
+          />
+          {isChecked && (
+            <img
+              className='absolute  w-2.5 h-2.5  '
+              src={check_logo}
+            />
+          )}
+        </label>
+
+        <div className='flex flex-col gap-2'>
+          <div
+            className={`flex items-center gap-2  ${
+              isBook ? 'text-[#3E507D]' : 'text-[#60308C]'
+            } `}>
+            <span className='text-[18px]'>{data.title}</span>
+            <span className='text-[14px]'>{data.singer || data.author}</span>
+          </div>
+
+          <div>
+            <span
+              className={` ${
+                isBook ? 'text-[#3E507DB2]' : 'text-[#5F3E7DB2]/70'
+              } `}>
+              {data.released_year}
+            </span>
+          </div>
+        </div>
+      </li>
+    </>
+  );
+}

src/components/datalist/NoEditStatusItem.tsx

@@ -0,0 +1,47 @@
+import cd_play_btn from '@/assets/datalist/cd-play-btn.svg';
+import book_go_btn from '@/assets/datalist/book-go-btn.svg';
+import { Link } from 'react-router-dom';
+
+export default function NoEditStatusItem({
+  data,
+  isBook,
+}: {
+  data: DataListInfo;
+  isBook: boolean;
+}) {
+  return (
+    <>
+      <li
+        className={`pl-7 pr-9 py-4.5 flex justify-between items-center  rounded-xl ${
+          isBook ? 'bg-[#F1F3FA80]' : 'bg-[#f7f1fa]/50'
+        } `}>
+        <div className='flex flex-col gap-2'>
+          <div
+            className={`flex items-center gap-2  ${
+              isBook ? 'text-[#3E507D]' : 'text-[#60308C]'
+            } `}>
+            <span className='text-[18px]'>{data.title}</span>
+            <span className='text-[14px]'>{data.singer || data.author}</span>
+          </div>
+
+          <div>
+            <span
+              className={` ${
+                isBook ? 'text-[#3E507DB2]' : 'text-[#5F3E7DB2]/70'
+              } `}>
+              {data.released_year}
+            </span>
+          </div>
+        </div>
+
+        <Link to={`${isBook ? '/book' : '/cd'}`}>
+          <img
+            className='cursor-pointer'
+            src={isBook ? book_go_btn : cd_play_btn}
+            alt={`이동하기 버튼`}
+          />
+        </Link>
+      </li>
+    </>
+  );
+}

src/main.tsx

@@ -5,6 +5,6 @@ import './styles/index.css';
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <App />
+    <App />,
   </StrictMode>,
 );

src/pages/cd/CdPage.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default function CdPage() {
+  return <div>CdPage</div>;
+}

src/pages/cdcase/CdCasePage.tsx

@@ -0,0 +1,56 @@
+import DataList from '@components/datalist/DataList';
+import React, { useState } from 'react';
+
+export default function CdCasePage() {
+  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+
+  const dummyData = [
+    {
+      title: '삐딱하게',
+      singer: '권지용',
+      released_year: '2019',
+    },
+    {
+      title: '삐딱하게',
+      singer: '권지용',
+      released_year: '2019',
+    },
+    {
+      title: '삐딱하게',
+      singer: '권지용',
+      released_year: '2019',
+    },
+    {
+      title: '삐딱하게',
+      singer: '권지용',
+      released_year: '2019',
+    },
+    {
+      title: '삐딱하게',
+      singer: '권지용',
+      released_year: '2019',
+    },
+    {
+      title: '삐딱하게',
+      singer: '권지용',
+      released_year: '2019',
+    },
+    {
+      title: '삐딱하게',
+      singer: '권지용',
+      released_year: '2019',
+    },
+  ];
+  return (
+    <>
+      <div>CdCasePage</div>
+      <button onClick={() => setIsSidebarOpen(true)}>사이드바 열기</button>
+      {isSidebarOpen && (
+        <DataList
+          type='book'
+          datas={dummyData}
+        />
+      )}
+    </>
+  );
+}