From c22a61c78209db5b58ec6702a689b467df4591ce Mon Sep 17 00:00:00 2001
From: readygetset <ksp7292@gmail.com>
Date: Tue, 16 Jan 2024 01:02:41 +0900
Subject: [PATCH 1/3] feat: clothes introduction page

---
 src/components/StatusSign/index.tsx | 73 +++++++++++++++++++++++
 src/data/messages.ts                |  3 +
 src/hooks/api/clothes/clothes.ts    | 49 ++++++++++++++++
 src/pages/Clothes/index.tsx         | 90 +++++++++++++++++++++++++++++
 src/route/index.tsx                 |  2 +
 5 files changed, 217 insertions(+)
 create mode 100644 src/components/StatusSign/index.tsx
 create mode 100644 src/hooks/api/clothes/clothes.ts
 create mode 100644 src/pages/Clothes/index.tsx

diff --git a/src/components/StatusSign/index.tsx b/src/components/StatusSign/index.tsx
new file mode 100644
index 0000000..9a9d113
--- /dev/null
+++ b/src/components/StatusSign/index.tsx
@@ -0,0 +1,73 @@
+import { Box, Typography } from '@mui/material';
+
+interface StatusSignProp {
+  status: string;
+}
+export default function StatusSign({ status }: StatusSignProp) {
+  if (status === '대여가능') {
+    return (
+      <Box display={'flex'} alignItems={'center'}>
+        <Box
+          sx={{
+            backgroundColor: 'green',
+            width: 10,
+            height: 10,
+            borderRadius: 100,
+            mr: 1,
+          }}
+        />
+        <Typography>{status}</Typography>
+      </Box>
+    );
+  }
+  if (status === '대여불가') {
+    return (
+      <Box display={'flex'} alignItems={'center'}>
+        <Box
+          sx={{
+            backgroundColor: 'red',
+            width: 10,
+            height: 10,
+            borderRadius: 100,
+            mr: 1,
+          }}
+        />
+        <Typography>{status}</Typography>
+      </Box>
+    );
+  }
+  if (status === '대여중') {
+    return (
+      <Box display={'flex'} alignItems={'center'}>
+        <Box
+          sx={{
+            backgroundColor: 'orange',
+            width: 10,
+            height: 10,
+            borderRadius: 100,
+            mr: 1,
+          }}
+        />
+        <Typography>{status}</Typography>
+      </Box>
+    );
+  }
+  if (status === '공개중') {
+    return (
+      <Box display={'flex'} alignItems={'center'}>
+        <Box
+          sx={{
+            backgroundColor: 'black',
+            width: 10,
+            height: 10,
+            borderRadius: 100,
+            mr: 1,
+          }}
+        />
+        <Typography>{status}</Typography>
+      </Box>
+    );
+  }
+
+  return null;
+}
diff --git a/src/data/messages.ts b/src/data/messages.ts
index 793b48f..f4bb64e 100644
--- a/src/data/messages.ts
+++ b/src/data/messages.ts
@@ -1,3 +1,6 @@
 export const LOGIN_MESSAGE = {
   LOGIN_FAIL: '로그인에 실패하였습니다 :(',
 };
+export const CLOTHES_MESSAGE = {
+  CLOTHES_NOT_FOUND: '옷을 찾을 수 없어요 :(',
+};
diff --git a/src/hooks/api/clothes/clothes.ts b/src/hooks/api/clothes/clothes.ts
new file mode 100644
index 0000000..a69d92e
--- /dev/null
+++ b/src/hooks/api/clothes/clothes.ts
@@ -0,0 +1,49 @@
+import { enqueueSnackbar } from 'notistack';
+import axios, { AxiosError } from 'axios';
+
+import { CLOTHES_MESSAGE } from '../../../data/messages';
+
+interface Reviewer {
+  id?: number;
+  username: string;
+  nickname?: string;
+}
+interface Review {
+  review: string;
+  reviewer: Reviewer;
+}
+interface Owner {
+  id?: number;
+  nickname?: string;
+  location?: string;
+}
+export interface GetClothesResponse {
+  id: number;
+  description: string;
+  category: string;
+  season: string;
+  status: string;
+  isOpen: boolean;
+  name: string;
+  tag: string;
+  image: string;
+  owner: Owner;
+  review: Review[];
+  isWished: boolean;
+}
+
+export async function getClothesAPICall(clothesId: number) {
+  try {
+    const response = await axios.get<GetClothesResponse>(`${process.env.REACT_APP_API_URL}/clothes/${clothesId}`);
+    if (response.status === 200) {
+      return response.data;
+    }
+  } catch (err) {
+    if (err instanceof AxiosError) {
+      enqueueSnackbar(err.response?.data?.message ?? CLOTHES_MESSAGE.CLOTHES_NOT_FOUND, { variant: 'error' });
+    } else {
+      enqueueSnackbar(CLOTHES_MESSAGE.CLOTHES_NOT_FOUND, { variant: 'error' });
+    }
+  }
+  return null;
+}
diff --git a/src/pages/Clothes/index.tsx b/src/pages/Clothes/index.tsx
new file mode 100644
index 0000000..3916d90
--- /dev/null
+++ b/src/pages/Clothes/index.tsx
@@ -0,0 +1,90 @@
+import { useParams } from 'react-router-dom';
+import { useEffect, useState } from 'react';
+import { Box, Card, Chip, Divider, Typography } from '@mui/material';
+import LocationOnIcon from '@mui/icons-material/LocationOn';
+
+import { GetClothesResponse, getClothesAPICall } from '../../hooks/api/clothes/clothes';
+import StatusSign from '../../components/StatusSign';
+
+// TODO: 사용자 페이지 링크 추가
+export function ClothesPage() {
+  const { id } = useParams();
+  const clothesId = Number(id);
+  const [clothes, setClothes] = useState<GetClothesResponse | null>(null);
+  const getClothes = async () => {
+    try {
+      const result = await getClothesAPICall(clothesId);
+      setClothes(result);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+  useEffect(() => {
+    getClothes();
+  }, [clothesId]);
+
+  return (
+    <Box display={'flex'} flexDirection={'column'} alignItems={'center'}>
+      <Box display={'flex'} sx={{ mt: 4, ml: 7 }} alignItems={'flex-start'}>
+        <Box>
+          {clothes?.image ? (
+            <Box
+              component="img"
+              sx={{
+                width: 250,
+                borderRadius: 10,
+              }}
+              src={clothes.image}
+            />
+          ) : (
+            <Box
+              sx={{
+                backgroundColor: '#D9D9D9',
+                width: 250,
+                height: 300,
+                borderRadius: 10,
+              }}
+            />
+          )}
+        </Box>
+        <Box sx={{ mt: 1, ml: 6 }}>
+          <Box>
+            <StatusSign status={clothes?.status || ''} />
+          </Box>
+          <Box display={'flex'} alignItems={'center'} sx={{ mt: 1 }}>
+            <Typography variant="h5" fontWeight={'bold'} sx={{ mr: 2 }}>
+              {clothes?.name}
+            </Typography>
+            <Typography>{clothes?.category}</Typography>
+          </Box>
+          <Box display={'flex'} alignItems={'center'} sx={{ mt: 1 }}>
+            <Typography variant="h6" fontWeight={'bold'} sx={{ mr: 1 }}>
+              {clothes?.owner.nickname}님
+            </Typography>
+            <LocationOnIcon fontSize="small" sx={{ color: 'gray' }} />
+            <Typography color={'gray'}>{clothes?.owner.location}</Typography>
+          </Box>
+          <Chip label={clothes?.season} size="small" sx={{ mt: 2 }}></Chip>
+          <Card variant="outlined" sx={{ width: 500, height: 200, borderRadius: 5, padding: 2, mt: 2 }}>
+            <Typography variant="h6" fontWeight={'bold'} sx={{ mb: 1 }}>
+              상품정보
+            </Typography>
+            <Divider />
+            <Typography sx={{ mt: 2 }}>{clothes?.description}</Typography>
+          </Card>
+          <Card variant="outlined" sx={{ width: 500, height: 200, borderRadius: 5, padding: 2, mt: 2 }}>
+            <Typography variant="h6" fontWeight={'bold'} sx={{ mb: 1 }}>
+              리뷰
+            </Typography>
+            <Divider />
+            {clothes?.review.map((review) => (
+              <Typography sx={{ mt: 2 }}>
+                {review.reviewer.nickname} | {review.review}
+              </Typography>
+            ))}
+          </Card>
+        </Box>
+      </Box>
+    </Box>
+  );
+}
diff --git a/src/route/index.tsx b/src/route/index.tsx
index 178a20e..182716a 100644
--- a/src/route/index.tsx
+++ b/src/route/index.tsx
@@ -4,6 +4,7 @@ import { RegisterPage } from '../pages/Register';
 import { MainPage } from '../pages/Main';
 import { LoginPage } from '../pages/Login';
 import { ListPage } from '../pages/List';
+import { ClothesPage } from '../pages/Clothes';
 
 /**
  * 어느 url에 어떤 페이지를 보여줄지 정해주는 컴포넌트입니다.
@@ -16,6 +17,7 @@ export function RouteComponent() {
       <Route path="/register" element={<RegisterPage />} />
       <Route path="/list/:age" element={<ListPage />} />
       <Route path="/login" element={<LoginPage />} />
+      <Route path="/clothes/:id" element={<ClothesPage />} />
     </Routes>
   );
 }

From f4904cadc253e127e5cbeaa68b271d78884ee6f8 Mon Sep 17 00:00:00 2001
From: readygetset <ksp7292@gmail.com>
Date: Tue, 16 Jan 2024 17:22:00 +0900
Subject: [PATCH 2/3] feat: clothes intro page completion

---
 src/components/ApplyBtn/index.tsx   |  27 +++
 src/components/Header/index.tsx     |   6 +-
 src/components/StatusSign/index.tsx |  10 +-
 src/components/WishBtn/index.tsx    |  18 ++
 src/data/messages.ts                |   7 +
 src/hooks/api/auth/login.ts         |   2 +
 src/hooks/api/clothes/clothes.ts    |  56 +++++-
 src/hooks/api/wish/wish.ts          |  55 ++++++
 src/models/enum.ts                  |   1 +
 src/pages/Clothes/index.tsx         | 255 +++++++++++++++++++++-------
 src/pages/Login/index.tsx           |  11 +-
 src/recoil/atom.ts                  |   8 -
 12 files changed, 368 insertions(+), 88 deletions(-)
 create mode 100644 src/components/ApplyBtn/index.tsx
 create mode 100644 src/components/WishBtn/index.tsx
 create mode 100644 src/hooks/api/wish/wish.ts
 create mode 100644 src/models/enum.ts
 delete mode 100644 src/recoil/atom.ts

diff --git a/src/components/ApplyBtn/index.tsx b/src/components/ApplyBtn/index.tsx
new file mode 100644
index 0000000..aade53e
--- /dev/null
+++ b/src/components/ApplyBtn/index.tsx
@@ -0,0 +1,27 @@
+import { Button } from '@mui/material';
+
+interface ApplyBtnProp {
+  status: string;
+}
+export default function ApplyBtn({ status }: ApplyBtnProp) {
+  if (status === '대여가능') {
+    return (
+      <Button sx={{ borderRadius: 10, width: 250, backgroundColor: 'black', color: 'white' }}>대여 신청하기</Button>
+    );
+  }
+  if (status === '대여불가능') {
+    return (
+      <Button disabled sx={{ borderRadius: 10, width: 250, backgroundColor: 'red', color: 'white' }}>
+        대여가 불가능한 옷이에요
+      </Button>
+    );
+  }
+  if (status === '대여중') {
+    return (
+      <Button disabled sx={{ borderRadius: 10, width: 250, backgroundColor: 'orange', color: 'white' }}>
+        지금 대여 중인 옷이에요
+      </Button>
+    );
+  }
+  return null;
+}
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
index 34c9f96..ff63a01 100644
--- a/src/components/Header/index.tsx
+++ b/src/components/Header/index.tsx
@@ -1,19 +1,17 @@
-import { useRecoilValue } from 'recoil';
 import { Link, useNavigate } from 'react-router-dom';
 import { useState } from 'react';
 import { Typography, Box, Button } from '@mui/material';
 import AccountCircleIcon from '@mui/icons-material/AccountCircle';
 
 import ConfirmDialog from '../ConfirmDialog';
-import { userAtom } from '../../recoil/atom';
 
 export default function Header() {
   const navigate = useNavigate();
   const isAuthenticated = sessionStorage.getItem('accessToken');
+  const userNickname = sessionStorage.getItem('userNickname');
 
   const [isOpen, setIsOpen] = useState(false);
 
-  const userState = useRecoilValue(userAtom);
   const handleLogout = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
     sessionStorage.removeItem('accessToken');
@@ -48,7 +46,7 @@ export default function Header() {
         {isAuthenticated ? (
           <Box sx={{ display: 'flex', alignItems: 'center' }}>
             <AccountCircleIcon sx={{ mr: 0.5 }} />
-            <Typography sx={{ fontSize: 20, fontWeight: 'bold', mr: 2 }}>{userState.nickname} 님</Typography>
+            <Typography sx={{ fontSize: 20, fontWeight: 'bold', mr: 2 }}>{userNickname} 님</Typography>
             <Button sx={{ color: 'black', fontSize: 20, fontWeight: 'bold', mr: 2 }}>마이페이지</Button>
             <Button sx={{ color: 'black', fontSize: 20, fontWeight: 'bold', mr: 2 }} onClick={() => setIsOpen(true)}>
               로그아웃
diff --git a/src/components/StatusSign/index.tsx b/src/components/StatusSign/index.tsx
index 9a9d113..5f40158 100644
--- a/src/components/StatusSign/index.tsx
+++ b/src/components/StatusSign/index.tsx
@@ -6,7 +6,7 @@ interface StatusSignProp {
 export default function StatusSign({ status }: StatusSignProp) {
   if (status === '대여가능') {
     return (
-      <Box display={'flex'} alignItems={'center'}>
+      <Box display={'flex'} alignItems={'center'} sx={{ mr: 1 }}>
         <Box
           sx={{
             backgroundColor: 'green',
@@ -20,9 +20,9 @@ export default function StatusSign({ status }: StatusSignProp) {
       </Box>
     );
   }
-  if (status === '대여불가') {
+  if (status === '대여불가능') {
     return (
-      <Box display={'flex'} alignItems={'center'}>
+      <Box display={'flex'} alignItems={'center'} sx={{ mr: 1 }}>
         <Box
           sx={{
             backgroundColor: 'red',
@@ -38,7 +38,7 @@ export default function StatusSign({ status }: StatusSignProp) {
   }
   if (status === '대여중') {
     return (
-      <Box display={'flex'} alignItems={'center'}>
+      <Box display={'flex'} alignItems={'center'} sx={{ mr: 1 }}>
         <Box
           sx={{
             backgroundColor: 'orange',
@@ -54,7 +54,7 @@ export default function StatusSign({ status }: StatusSignProp) {
   }
   if (status === '공개중') {
     return (
-      <Box display={'flex'} alignItems={'center'}>
+      <Box display={'flex'} alignItems={'center'} sx={{ mr: 1 }}>
         <Box
           sx={{
             backgroundColor: 'black',
diff --git a/src/components/WishBtn/index.tsx b/src/components/WishBtn/index.tsx
new file mode 100644
index 0000000..454a830
--- /dev/null
+++ b/src/components/WishBtn/index.tsx
@@ -0,0 +1,18 @@
+import { IconButton } from '@mui/material';
+import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
+import FavoriteIcon from '@mui/icons-material/Favorite';
+
+interface WishBtnProps {
+  handleWish: React.MouseEventHandler<HTMLButtonElement>;
+  isWished: boolean;
+}
+
+const WishBtn: React.FC<WishBtnProps> = ({ handleWish, isWished = false }: WishBtnProps) => {
+  return (
+    <IconButton onClick={handleWish} size="small">
+      {isWished ? <FavoriteIcon sx={{ color: 'black' }} /> : <FavoriteBorderIcon sx={{ color: 'black' }} />}
+    </IconButton>
+  );
+};
+
+export default WishBtn;
diff --git a/src/data/messages.ts b/src/data/messages.ts
index f4bb64e..b095ff4 100644
--- a/src/data/messages.ts
+++ b/src/data/messages.ts
@@ -3,4 +3,11 @@ export const LOGIN_MESSAGE = {
 };
 export const CLOTHES_MESSAGE = {
   CLOTHES_NOT_FOUND: '옷을 찾을 수 없어요 :(',
+  CLOTHES_DELETED: '옷이 삭제되었어요',
+  CLOTHES_EDITED: '옷 정보가 수정되었어요',
+};
+export const WISH_MESSAGE = {
+  WISH_CREATED: '찜한 옷에 추가되었어요',
+  WISH_DELETED: '찜한 옷에서 삭제되었어요',
+  WISH_FAIL: '알 수 없는 오류가 발생했습니다',
 };
diff --git a/src/hooks/api/auth/login.ts b/src/hooks/api/auth/login.ts
index 967d26c..e221b54 100644
--- a/src/hooks/api/auth/login.ts
+++ b/src/hooks/api/auth/login.ts
@@ -14,6 +14,8 @@ export async function postLoginAPICall(values: Login) {
     if (response.status === 200) {
       const { id, nickname, isBannded, accessToken } = response.data;
       sessionStorage.setItem('accessToken', accessToken);
+      sessionStorage.setItem('userId', id);
+      sessionStorage.setItem('userNickname', nickname);
       enqueueSnackbar(`${nickname}님 안녕하세요 :)`, { variant: 'success' });
       if (isBannded === true) {
         enqueueSnackbar(`현재 ${nickname}님의 계정은 사용 정지되었습니다.`, { variant: 'warning' });
diff --git a/src/hooks/api/clothes/clothes.ts b/src/hooks/api/clothes/clothes.ts
index a69d92e..2a48a9f 100644
--- a/src/hooks/api/clothes/clothes.ts
+++ b/src/hooks/api/clothes/clothes.ts
@@ -3,6 +3,10 @@ import axios, { AxiosError } from 'axios';
 
 import { CLOTHES_MESSAGE } from '../../../data/messages';
 
+interface GetClothesParams {
+  clothesId: number;
+  token?: string;
+}
 interface Reviewer {
   id?: number;
   username: string;
@@ -32,9 +36,11 @@ export interface GetClothesResponse {
   isWished: boolean;
 }
 
-export async function getClothesAPICall(clothesId: number) {
+export async function getClothesAPICall({ clothesId, token }: GetClothesParams) {
   try {
-    const response = await axios.get<GetClothesResponse>(`${process.env.REACT_APP_API_URL}/clothes/${clothesId}`);
+    const response = await axios.get<GetClothesResponse>(`${process.env.REACT_APP_API_URL}/clothes/${clothesId}`, {
+      headers: { Authorization: `Bearer ${token}` },
+    });
     if (response.status === 200) {
       return response.data;
     }
@@ -47,3 +53,49 @@ export async function getClothesAPICall(clothesId: number) {
   }
   return null;
 }
+
+export async function deleteClothesAPICall({ clothesId, token }: GetClothesParams) {
+  try {
+    const response = await axios.delete(`${process.env.REACT_APP_API_URL}/clothes/${clothesId}`, {
+      headers: { Authorization: `Bearer ${token}` },
+    });
+    if (response.status === 200) {
+      enqueueSnackbar(CLOTHES_MESSAGE.CLOTHES_DELETED, { variant: 'success' });
+    }
+  } catch (err) {
+    if (err instanceof AxiosError) {
+      enqueueSnackbar(err.response?.data?.message ?? CLOTHES_MESSAGE.CLOTHES_NOT_FOUND, { variant: 'error' });
+    } else {
+      enqueueSnackbar(CLOTHES_MESSAGE.CLOTHES_NOT_FOUND, { variant: 'error' });
+    }
+  }
+}
+interface Clothes {
+  category: string;
+  season: string;
+  status: string;
+  isOpen: boolean;
+  name: string;
+  tag: string;
+}
+interface EditClothesParams {
+  clothesId: number;
+  token?: string;
+  clothes: Clothes;
+}
+export async function editClothesAPICall({ clothesId, token, clothes }: EditClothesParams) {
+  try {
+    const response = await axios.put(`${process.env.REACT_APP_API_URL}/clothes/${clothesId}`, clothes, {
+      headers: { Authorization: `Bearer ${token}` },
+    });
+    if (response.status === 200) {
+      enqueueSnackbar(CLOTHES_MESSAGE.CLOTHES_EDITED, { variant: 'success' });
+    }
+  } catch (err) {
+    if (err instanceof AxiosError) {
+      enqueueSnackbar(err.response?.data?.message ?? CLOTHES_MESSAGE.CLOTHES_NOT_FOUND, { variant: 'error' });
+    } else {
+      enqueueSnackbar(CLOTHES_MESSAGE.CLOTHES_NOT_FOUND, { variant: 'error' });
+    }
+  }
+}
diff --git a/src/hooks/api/wish/wish.ts b/src/hooks/api/wish/wish.ts
new file mode 100644
index 0000000..3a05463
--- /dev/null
+++ b/src/hooks/api/wish/wish.ts
@@ -0,0 +1,55 @@
+import { enqueueSnackbar } from 'notistack';
+import axios, { AxiosError } from 'axios';
+
+import { WISH_MESSAGE } from '../../../data/messages';
+
+interface WishAPIParams {
+  clothesId: number;
+  token: string;
+}
+
+export async function createWishAPICall({ clothesId, token }: WishAPIParams) {
+  try {
+    const response = await axios.post(
+      `${process.env.REACT_APP_API_URL}/wish/${clothesId}`,
+      {},
+      {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      },
+    );
+    if (response.status === 200) {
+      enqueueSnackbar(WISH_MESSAGE.WISH_CREATED, { variant: 'success' });
+    }
+  } catch (err) {
+    if (err instanceof AxiosError) {
+      enqueueSnackbar(err.response?.data?.message ?? WISH_MESSAGE.WISH_FAIL, { variant: 'error' });
+    } else {
+      enqueueSnackbar(WISH_MESSAGE.WISH_FAIL, { variant: 'error' });
+    }
+  }
+}
+
+export async function deleteWishAPICall({ clothesId, token }: WishAPIParams) {
+  try {
+    const response = await axios.put(
+      `${process.env.REACT_APP_API_URL}/wish/${clothesId}`,
+      {},
+      {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      },
+    );
+    if (response.status === 200) {
+      enqueueSnackbar(WISH_MESSAGE.WISH_DELETED, { variant: 'success' });
+    }
+  } catch (err) {
+    if (err instanceof AxiosError) {
+      enqueueSnackbar(err.response?.data?.message ?? WISH_MESSAGE.WISH_FAIL, { variant: 'error' });
+    } else {
+      enqueueSnackbar(WISH_MESSAGE.WISH_FAIL, { variant: 'error' });
+    }
+  }
+}
diff --git a/src/models/enum.ts b/src/models/enum.ts
new file mode 100644
index 0000000..0c674d3
--- /dev/null
+++ b/src/models/enum.ts
@@ -0,0 +1 @@
+export const StatusEnums = ['대여가능', '대여중', '대여불가능'];
diff --git a/src/pages/Clothes/index.tsx b/src/pages/Clothes/index.tsx
index 3916d90..1e3c7cd 100644
--- a/src/pages/Clothes/index.tsx
+++ b/src/pages/Clothes/index.tsx
@@ -1,19 +1,36 @@
 import { useParams } from 'react-router-dom';
 import { useEffect, useState } from 'react';
-import { Box, Card, Chip, Divider, Typography } from '@mui/material';
+import { Box, Card, Chip, Divider, MenuItem, Select, Typography } from '@mui/material';
 import LocationOnIcon from '@mui/icons-material/LocationOn';
 
-import { GetClothesResponse, getClothesAPICall } from '../../hooks/api/clothes/clothes';
+import { StatusEnums } from '../../models/enum';
+import { createWishAPICall, deleteWishAPICall } from '../../hooks/api/wish/wish';
+import {
+  GetClothesResponse,
+  deleteClothesAPICall,
+  editClothesAPICall,
+  getClothesAPICall,
+} from '../../hooks/api/clothes/clothes';
+import WishBtn from '../../components/WishBtn';
 import StatusSign from '../../components/StatusSign';
+import ConfirmDialog from '../../components/ConfirmDialog';
+import CancelSubmitBtns from '../../components/CancelSubmitBtn';
+import ApplyBtn from '../../components/ApplyBtn';
 
 // TODO: 사용자 페이지 링크 추가
 export function ClothesPage() {
   const { id } = useParams();
   const clothesId = Number(id);
+  const userId = Number(sessionStorage.getItem('userId'));
+  const token = sessionStorage.getItem('accessToken') ?? '';
+  const [isWish, setIsWish] = useState(false);
+
+  const [confirmDialogIsOpen, setConfirmDialogIsOpen] = useState(false);
+
   const [clothes, setClothes] = useState<GetClothesResponse | null>(null);
   const getClothes = async () => {
     try {
-      const result = await getClothesAPICall(clothesId);
+      const result = await getClothesAPICall({ clothesId, token });
       setClothes(result);
     } catch (error) {
       console.error(error);
@@ -22,69 +39,185 @@ export function ClothesPage() {
   useEffect(() => {
     getClothes();
   }, [clothesId]);
+  useEffect(() => {
+    if (clothes) {
+      setIsWish(clothes?.isWished ?? false);
+    }
+  }, [clothes]);
+  const isMyClothes = userId === clothes?.owner.id;
+
+  const handleEdit = () => {};
+  const handleDeleteBtnClick = () => {
+    setConfirmDialogIsOpen(true);
+  };
+  const handleDelete = () => {
+    deleteClothesAPICall({ clothesId, token });
+    setConfirmDialogIsOpen(false);
+  };
+  const handleCancel = () => {
+    setConfirmDialogIsOpen(false);
+  };
+  const handleWish = async () => {
+    try {
+      if (isWish) {
+        await deleteWishAPICall({ clothesId, token });
+      } else {
+        await createWishAPICall({ clothesId, token });
+      }
+      setIsWish(!isWish);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+  const handleStatusChange = async (value: string) => {
+    try {
+      await editClothesAPICall({
+        clothesId,
+        token,
+        clothes: {
+          category: clothes?.category || '',
+          season: clothes?.season || '',
+          status: value,
+          isOpen: clothes?.isOpen || false,
+          name: clothes?.name || '',
+          tag: clothes?.tag || '',
+        },
+      });
+      getClothes();
+    } catch (error) {
+      console.error(error);
+    }
+  };
+  const handleIsOpenChange = async (value: string) => {
+    try {
+      await editClothesAPICall({
+        clothesId,
+        token,
+        clothes: {
+          category: clothes?.category || '',
+          season: clothes?.season || '',
+          status: clothes?.status || '',
+          isOpen: value === 'true',
+          name: clothes?.name || '',
+          tag: clothes?.tag || '',
+        },
+      });
+      getClothes();
+    } catch (error) {
+      console.error(error);
+    }
+  };
 
   return (
-    <Box display={'flex'} flexDirection={'column'} alignItems={'center'}>
-      <Box display={'flex'} sx={{ mt: 4, ml: 7 }} alignItems={'flex-start'}>
-        <Box>
-          {clothes?.image ? (
-            <Box
-              component="img"
-              sx={{
-                width: 250,
-                borderRadius: 10,
-              }}
-              src={clothes.image}
-            />
-          ) : (
-            <Box
-              sx={{
-                backgroundColor: '#D9D9D9',
-                width: 250,
-                height: 300,
-                borderRadius: 10,
-              }}
-            />
-          )}
-        </Box>
-        <Box sx={{ mt: 1, ml: 6 }}>
-          <Box>
-            <StatusSign status={clothes?.status || ''} />
-          </Box>
-          <Box display={'flex'} alignItems={'center'} sx={{ mt: 1 }}>
-            <Typography variant="h5" fontWeight={'bold'} sx={{ mr: 2 }}>
-              {clothes?.name}
-            </Typography>
-            <Typography>{clothes?.category}</Typography>
-          </Box>
-          <Box display={'flex'} alignItems={'center'} sx={{ mt: 1 }}>
-            <Typography variant="h6" fontWeight={'bold'} sx={{ mr: 1 }}>
-              {clothes?.owner.nickname}님
-            </Typography>
-            <LocationOnIcon fontSize="small" sx={{ color: 'gray' }} />
-            <Typography color={'gray'}>{clothes?.owner.location}</Typography>
+    <>
+      <Box display={'flex'} flexDirection={'column'} alignItems={'center'}>
+        <Box display={'flex'} sx={{ mt: 4, ml: 7 }} alignItems={'flex-start'}>
+          <Box display={'flex'} flexDirection={'column'} alignItems={'center'}>
+            {clothes?.image ? (
+              <Box
+                component="img"
+                sx={{
+                  width: 250,
+                  borderRadius: 10,
+                  mb: 2,
+                }}
+                src={clothes.image}
+              />
+            ) : (
+              <Box
+                sx={{
+                  backgroundColor: '#D9D9D9',
+                  width: 250,
+                  height: 300,
+                  borderRadius: 10,
+                  mb: 2,
+                }}
+              />
+            )}
+            {isMyClothes ? (
+              <CancelSubmitBtns
+                submitBtnText="수정"
+                cancelBtnText="삭제"
+                handleSubmit={handleEdit}
+                handleCancel={handleDeleteBtnClick}
+              />
+            ) : (
+              <ApplyBtn status={clothes?.status ?? ''} />
+            )}
           </Box>
-          <Chip label={clothes?.season} size="small" sx={{ mt: 2 }}></Chip>
-          <Card variant="outlined" sx={{ width: 500, height: 200, borderRadius: 5, padding: 2, mt: 2 }}>
-            <Typography variant="h6" fontWeight={'bold'} sx={{ mb: 1 }}>
-              상품정보
-            </Typography>
-            <Divider />
-            <Typography sx={{ mt: 2 }}>{clothes?.description}</Typography>
-          </Card>
-          <Card variant="outlined" sx={{ width: 500, height: 200, borderRadius: 5, padding: 2, mt: 2 }}>
-            <Typography variant="h6" fontWeight={'bold'} sx={{ mb: 1 }}>
-              리뷰
-            </Typography>
-            <Divider />
-            {clothes?.review.map((review) => (
-              <Typography sx={{ mt: 2 }}>
-                {review.reviewer.nickname} | {review.review}
+          <Box sx={{ mt: 1, ml: 6 }}>
+            {isMyClothes ? (
+              <Box sx={{ mb: 2 }}>
+                <Select
+                  sx={{ mr: 1 }}
+                  value={clothes?.status}
+                  id="status"
+                  label="status"
+                  size="small"
+                  onChange={(event) => handleStatusChange(event.target.value)}
+                >
+                  {StatusEnums.map((StatusEnum) => (
+                    <MenuItem value={StatusEnum}>{StatusEnum}</MenuItem>
+                  ))}
+                </Select>
+                <Select
+                  value={clothes?.isOpen ? 'true' : 'false'}
+                  id="status"
+                  label="status"
+                  size="small"
+                  onChange={(event) => handleIsOpenChange(event.target.value)}
+                >
+                  <MenuItem value="true">공개</MenuItem>
+                  <MenuItem value="false">비공개</MenuItem>
+                </Select>
+              </Box>
+            ) : (
+              <StatusSign status={clothes?.status || ''} />
+            )}
+            <Box display={'flex'} alignItems={'center'} sx={{ mt: 1 }}>
+              <Typography variant="h5" fontWeight={'bold'} sx={{ mr: 2 }}>
+                {clothes?.name}
               </Typography>
-            ))}
-          </Card>
+              <Typography sx={{ mr: 1 }}>{clothes?.category}</Typography>
+              {!isMyClothes && <WishBtn isWished={isWish} handleWish={handleWish} />}
+            </Box>
+            {!isMyClothes && (
+              <Box display={'flex'} alignItems={'center'} sx={{ mt: 1 }}>
+                <Typography variant="h6" fontWeight={'bold'} sx={{ mr: 1 }}>
+                  {clothes?.owner.nickname}님
+                </Typography>
+                <LocationOnIcon fontSize="small" sx={{ color: 'gray' }} />
+                <Typography color={'gray'}>{clothes?.owner.location}</Typography>
+              </Box>
+            )}
+            <Chip label={clothes?.season} size="small" sx={{ mt: 2 }}></Chip>
+            <Card variant="outlined" sx={{ width: 500, height: 200, borderRadius: 5, padding: 2, mt: 2 }}>
+              <Typography variant="h6" fontWeight={'bold'} sx={{ mb: 1 }}>
+                상품정보
+              </Typography>
+              <Divider />
+              <Typography sx={{ mt: 2 }}>{clothes?.description}</Typography>
+            </Card>
+            <Card variant="outlined" sx={{ width: 500, height: 200, borderRadius: 5, padding: 2, mt: 2 }}>
+              <Typography variant="h6" fontWeight={'bold'} sx={{ mb: 1 }}>
+                리뷰
+              </Typography>
+              <Divider />
+              {clothes?.review.map((review) => (
+                <Typography sx={{ mt: 2 }}>
+                  {review.reviewer.nickname} | {review.review}
+                </Typography>
+              ))}
+            </Card>
+          </Box>
         </Box>
       </Box>
-    </Box>
+      <ConfirmDialog
+        isOpen={confirmDialogIsOpen}
+        message="정말 삭제하시겠습니까?"
+        handleSubmit={handleDelete}
+        handleCancel={handleCancel}
+      />
+    </>
   );
 }
diff --git a/src/pages/Login/index.tsx b/src/pages/Login/index.tsx
index ac6e21e..afaa10b 100644
--- a/src/pages/Login/index.tsx
+++ b/src/pages/Login/index.tsx
@@ -1,14 +1,11 @@
-import { useSetRecoilState } from 'recoil';
 import { Link, useNavigate } from 'react-router-dom';
 import { useState } from 'react';
 import { Box, Button, TextField, Typography } from '@mui/material';
 
-import { userAtom } from '../../recoil/atom';
 import { postLoginAPICall } from '../../hooks/api/auth/login';
 
 export function LoginPage() {
   const navigate = useNavigate();
-  const setUserState = useSetRecoilState(userAtom);
   const [values, setValues] = useState({
     username: '',
     password: '',
@@ -24,11 +21,9 @@ export function LoginPage() {
   const handleSubmit: React.FormEventHandler<HTMLFormElement> = async (e) => {
     e.preventDefault();
     try {
-      const response = await postLoginAPICall(values);
-      if (response) {
-        setUserState({ id: response.id, nickname: response.nickname });
-        navigate('/');
-      }
+      await postLoginAPICall(values);
+      navigate('/');
+      console.log(sessionStorage.getItem('accessToken'));
     } catch (error) {
       console.error(error);
     }
diff --git a/src/recoil/atom.ts b/src/recoil/atom.ts
deleted file mode 100644
index fa2c22c..0000000
--- a/src/recoil/atom.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { atom } from 'recoil';
-
-import { UserStandard } from '../models/user';
-
-export const userAtom = atom<UserStandard>({
-  key: 'user',
-  default: { id: 0, nickname: '' },
-});

From 042d23cd5f6f6f54d6598f60928eed46e08f05b1 Mon Sep 17 00:00:00 2001
From: readygetset <ksp7292@gmail.com>
Date: Tue, 16 Jan 2024 22:20:29 +0900
Subject: [PATCH 3/3] mod

---
 .vscode/settings.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 750fb2f..a577bb8 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -3,7 +3,7 @@
     "editor.formatOnSave": true
   },
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   },
   "eslint.validate": ["javascript"]
 }