🔀 Deploy

.eslintrc.json

@@ -1,3 +1,70 @@
 {
-  "extends": "next/core-web-vitals"
-}
+  "env": {
+    "browser": true,
+    "es2021": true,
+    "node": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "ignorePatterns": ["node_modules/**", "**/dist/**"],
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "plugins": ["react", "@typescript-eslint", "import"],
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
+  "rules": {
+    "no-console": ["error", { "allow": ["warn", "error", "info"] }],
+    "@typescript-eslint/no-empty-interface": "off",
+    "react-hooks/exhaustive-deps": "off",
+    "@typescript-eslint/no-var-requires": "off",
+    "@typescript-eslint/no-empty-function": "off",
+    "react/react-in-jsx-scope": "off",
+    "import/order": [
+      "warn",
+      {
+        "groups": [
+          "builtin",
+          "external",
+          "internal",
+          "parent",
+          "sibling",
+          "index",
+          "object",
+          "type"
+        ]
+      }
+    ],// 일단 style의 경우 {}같은 형식으로 불러오는 hook또는 함수 사이에 있어 import에서 걸림 -> import를 아래쪽으로 내려 해결
+    "@typescript-eslint/no-unused-vars": [
+      "warn",
+      {
+        "argsIgnorePattern": "^_",
+        "varsIgnorePattern": "^_"
+      }
+    ],// 사용하지않는 기능을 불러오는 경우 -> 삭제
+    "react/self-closing-comp": [
+      "error",
+      {
+        "component": true,
+        "html": true
+      }
+    ],
+    // 수정해야할 부분들
+    "no-empty": "off",// 대부분 catch라서 off..
+    "react/prop-types": "off",// 아직 파악을 제대로 하지 못 함
+    "prefer-const": "warn", //const로 바꿔도 문제가 없는 let
+    "no-extra-boolean-cast":"warn", // 불필요한 !!사용 필요한 경우 Boolean()으로 바꾸는게 더 좋을 수도 있음
+    "no-constant-condition": "warn",// 항상 결과가 참 또는 거짓임
+    "@typescript-eslint/no-inferrable-types": "warn",//추론 가능 타입
+    "@typescript-eslint/ban-types": "warn"// Object -> NonNullable<object>
+  }
+}

package.json

@@ -10,7 +10,8 @@
     "build:dev": "env-cmd -f .env.development next build",
     "start": "next start",
     "lint": "next lint",
-    "analyze": "ANALYZE=true next build"
+    "analyze": "ANALYZE=true next build",
+    "prettier": "prettier --write **/*.{ts,tsx}"
   },
   "dependencies": {
     "@emotion/css": "^11.10.5",
@@ -25,8 +26,6 @@
     "axios": "^1.2.3",
     "caniuse-lite": "^1.0.30001559",
     "env-cmd": "^10.1.0",
-    "eslint": "8.32.0",
-    "eslint-config-next": "13.1.2",
     "jwt-decode": "^3.1.2",
     "lottie-react": "^2.4.0",
     "msw": "^1.2.1",
@@ -47,6 +46,12 @@
     "workerDirectory": "public"
   },
   "devDependencies": {
-    "@next/bundle-analyzer": "^14.2.3"
+    "@next/bundle-analyzer": "^14.2.3",
+    "@typescript-eslint/eslint-plugin": "^5.57.1",
+    "@typescript-eslint/parser": "^5.57.1",
+    "eslint": "8.32.0",
+    "eslint-config-next": "^14.2.6",
+    "eslint-config-prettier": "^9.1.0",
+    "prettier": "^3.3.3"
   }
 }

src/api/music.ts

@@ -43,3 +43,33 @@ export const deleteMusic = async (role: string, musicId: number) => {
     return false;
   }
 };
+
+export const likeMusic = async ({
+  role,
+  musicId,
+}: {
+  role: string;
+  musicId: number;
+}) => {
+  const response = await apiClient.patch(
+    SongController.likeMusic(role, musicId),
+  );
+  return response.data;
+};
+
+export const getLikeMusic = async ({
+  role,
+  date,
+}: {
+  role: string;
+  date: string;
+}) => {
+  try {
+    const { data } = await apiClient.get(SongController.getlikeMusic(role), {
+      params: {
+        date: date,
+      },
+    });
+    return data;
+  } catch (e: any) {}
+};

src/assets/svg/ArrowDown.tsx

@@ -0,0 +1,21 @@
+const ArrowDown = () => {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M3.33301 5.6665L7.99967 10.3332L12.6663 5.6665"
+        stroke="#656B80"
+        strokeWidth="1.33333"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default ArrowDown;

src/assets/svg/HeartIcon.tsx

@@ -0,0 +1,31 @@
+import { Palette } from 'styles/globals';
+
+interface HeartIconProps {
+  heartState: boolean;
+}
+
+const HeartIcon = ({ heartState }: HeartIconProps) => {
+  const fillColor = heartState ? `${Palette.PRIMARY_P10}` : 'none';
+  const strokeColor = heartState ? `${Palette.PRIMARY_P10}` : '#656B80';
+
+  return (
+    <svg
+      width="25"
+      height="24"
+      viewBox="0 0 25 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M21.667 8.25C21.667 5.765 19.568 3.75 16.979 3.75C15.044 3.75 13.382 4.876 12.667 6.483C11.952 4.876 10.29 3.75 8.35399 3.75C5.76699 3.75 3.66699 5.765 3.66699 8.25C3.66699 15.47 12.667 20.25 12.667 20.25C12.667 20.25 21.667 15.47 21.667 8.25Z"
+        stroke={strokeColor}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        fill={fillColor}
+      />
+    </svg>
+  );
+};
+
+export default HeartIcon;

src/assets/svg/index.ts

@@ -47,7 +47,9 @@ export { default as EyeIcon } from './EyeIcon';
 export { default as EyeSelectedIcon } from './EyeSelectedIcon';
 export { default as MusicalNoteIcon } from './MusicNoteIcon';
 export { default as EllipsisVerticalIcon } from './EllipsisVerticalIcon';
-export { default as NewPageIcon } from './NewPageIcon';
 export { default as TrashcanIcon } from './TrashcanIcon';
 export { default as SettingIcon } from './SettingIcon';
 export { default as CircleDefaultProfile } from './CircleDefaultProfile';
+export { default as BookBenIcon } from './BookBenIcon';
+export { default as HeartIcon } from './HeartIcon';
+export { default as ArrowDown } from './ArrowDown';

src/components/Common/atoms/Calendar/index.tsx

@@ -1,12 +1,19 @@
-import { XtextIcon } from 'assets/svg';
-import UseToggleTheme from 'hooks/useToggleTheme';
 import Calendar from 'react-calendar';
-import { useRecoilState } from 'recoil';
-import { selectedDate } from 'recoilAtoms/recoilAtomContainer';
+import UseToggleTheme from 'hooks/useToggleTheme';
+import { XtextIcon } from 'assets/svg';
 import * as S from './style';
 
-const CalendarBox = ({ setModal }: { setModal?: (state: boolean) => void }) => {
-  const [date, setDate] = useRecoilState(selectedDate);
+interface CalendarBoxProps {
+  selectedDate?: Date;
+  setSelectedDate?: React.Dispatch<React.SetStateAction<Date>>;
+  setModal?: (state: boolean) => void;
+}
+
+const CalendarBox = ({
+  selectedDate,
+  setSelectedDate,
+  setModal,
+}: CalendarBoxProps) => {
   const [theme] = UseToggleTheme();
 
   return (
@@ -17,10 +24,10 @@ const CalendarBox = ({ setModal }: { setModal?: (state: boolean) => void }) => {
         </S.XIcon>
       )}
       <Calendar
-        value={date}
+        value={selectedDate}
         onChange={(value) => {
           if (!(value instanceof Date)) return;
-          setDate(value);
+          setSelectedDate?.(value);
         }}
         locale="ko"
         formatDay={(_locale, date) =>

src/components/Common/atoms/Items/FilterItem/index.tsx

@@ -1,11 +1,6 @@
 import { SearchFilterProps } from 'types';
 
-const FilterItem = ({
-  name,
-  item,
-  value,
-  onClick,
-}: SearchFilterProps) => {
+const FilterItem = ({ name, item, value, onClick }: SearchFilterProps) => {
   return (
     <>
       <input

src/components/Common/atoms/Wrappers/ModalOverayWrapper/style.ts

@@ -5,30 +5,24 @@ export const ModalOverayWrapper = styled.div`
   visibility: ${(props: ModalStyleProps) =>
     props.isClick ? 'visible' : 'hidden'};
   position: fixed;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
+  inset: 0;
   z-index: 2;
   display: flex;
   justify-content: center;
   align-items: center;
   background: hsla(235, 77%, 10%, 0.45);
 
   @media (max-width: 950px) {
-    background: hsla(235, 77%, 10%, 0.70);
-	}
+    background: hsla(235, 77%, 10%, 0.7);
+  }
 `;
 
 export const ResponseOverayWrapper = styled.div`
   @media (max-width: 950px) {
     visibility: ${(props: ModalStyleProps) =>
       props.isClick ? 'visible' : 'hidden'};
     position: fixed;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
+    inset: 0;
     z-index: 2;
     display: flex;
     justify-content: center;

src/components/Common/molecules/ApplicationItem/index.tsx

@@ -1,15 +1,15 @@
-import * as S from './style';
 import { DefaultProfile, FemaleIcon, MaleIcon, StampIcon } from 'assets/svg';
 import SelfstudyCheck from 'components/SelfStudy/atoms/SelfstudyCheck/SelfstudyCheck';
+import { ProfileImage } from 'components/Home/organisms/Profile/style';
 import { ApplicationItemProps } from 'types';
 import { useRecoilValue } from 'recoil';
 import { selfStudyLookup } from 'recoilAtoms/recoilAtomContainer';
 import { getRole } from 'utils/Libs/getRole';
 import Image from 'next/image';
-import Goldmedal from 'assets/png/GoldMedalIcon.png';
-import Silvermedal from 'assets/png/SilverMedalIcon.png';
+import GoldMedal from 'assets/png/GoldMedalIcon.png';
+import SilverMedal from 'assets/png/SilverMedalIcon.png';
 import BronzeMedal from 'assets/png/BronzeMedalIcon.png';
-import { ProfileImage } from 'components/Home/organisms/Profile/style';
+import * as S from './style';
 
 const ApplicationItem = ({
   id,
@@ -24,36 +24,18 @@ const ApplicationItem = ({
 }: ApplicationItemProps) => {
   const role = getRole();
   const lookUp = useRecoilValue(selfStudyLookup);
-
+  const rankImages = [GoldMedal, SilverMedal, BronzeMedal];
   return (
     <S.ApplicationItemWrapper>
       <S.Number>{rank}</S.Number>
       {listType === 'selfstudy' && (
         <>
           {!lookUp && (
             <S.Medal>
-              {rank === 1 && (
-                <Image
-                  src={Goldmedal}
-                  alt="goldmedal"
-                  priority
-                  width={44}
-                  height={64}
-                />
-              )}
-              {rank === 2 && (
-                <Image
-                  src={Silvermedal}
-                  alt="Silvermedal"
-                  priority
-                  width={44}
-                  height={64}
-                />
-              )}
-              {rank === 3 && (
+              {rank && rank <= 3 && (
                 <Image
-                  src={BronzeMedal}
-                  alt="BronzeMedal"
+                  src={rankImages[rank - 1]}
+                  alt="RankImage"
                   priority
                   width={44}
                   height={64}
@@ -74,7 +56,11 @@ const ApplicationItem = ({
         </>
       )}
       <S.Profile>
-        {profileImage ? <ProfileImage image={profileImage} /> : <DefaultProfile />}
+        {profileImage ? (
+          <ProfileImage image={profileImage} />
+        ) : (
+          <DefaultProfile />
+        )}
       </S.Profile>
       <S.StuInfo>
         <S.Name>