Merge branch 'develop' into feature/user/sign-up

packages/apps/user/src/components/AppointmentCard/AppointmentCard.js

@@ -8,7 +8,6 @@ import {
   Text,
   Image,
   Icon,
-  Button,
   HStack,
   AspectRatio,
 } from '@chakra-ui/react';
@@ -71,7 +70,7 @@ function AppointmentCard({ data }) {
           {data.specialty && <span>{data.specialty}</span>}
         </Text>
         <Text fontSize="sm" mb="2" noOfLines="1">
-          {data.fields.join(', ')}
+          {data.fields && <span>{data.fields.join(', ')}</span>}
         </Text>
         <Text fontSize="sm" mb="1">
           {data.distance && <span>{data.distance}</span>}

packages/apps/user/src/components/PushAlarm/PushAlarm.js

@@ -49,12 +49,14 @@ const PushAlarm = function () {
     <>
       <Button
         width="full"
+        size="lg"
         ref={pushRef}
         colorScheme="primary"
         onClick={onOpen}
       >
         푸시 알림 ({notifications.length})
       </Button>
+
       <Drawer
         isOpen={isOpen}
         placement="right"
@@ -81,27 +83,24 @@ const PushAlarm = function () {
             >
               {notifications.length !== 0 ? (
                 notifications.map(notification => (
-                    <ListItem
-                      key={notification.title}
-                      width="full"
-                      p="4"
-                      bgColor="primary.200"
-                      borderRadius="lg"
-                    >
-                      <HStack
-                        justifyContent="space-between"
-                        alignItems="center"
-                      >
-                        <Text>{notification.title}</Text>
-                        <Checkbox
-                          // eslint-disable-next-line
-                          onChange={() => removePushAlarm(notification.id)}
-                          colorScheme="primary"
-                          borderColor="black"
-                        />
-                      </HStack>
-                    </ListItem>
-                  ))
+                  <ListItem
+                    key={notification.title}
+                    width="full"
+                    p="4"
+                    bgColor="primary.200"
+                    borderRadius="lg"
+                  >
+                    <HStack justifyContent="space-between" alignItems="center">
+                      <Text>{notification.title}</Text>
+                      <Checkbox
+                        // eslint-disable-next-line
+                        onChange={() => removePushAlarm(notification.id)}
+                        colorScheme="primary"
+                        borderColor="black"
+                      />
+                    </HStack>
+                  </ListItem>
+                ))
               ) : (
                 <Text>모든 알림을 확인했습니다</Text>
               )}

packages/apps/user/src/components/Root/Root.js

@@ -1,32 +1,33 @@
 import { useEffect, useState } from 'react';
 
 import { Outlet, useNavigate } from 'react-router-dom';
+import { useDispatch } from 'react-redux';
 import { onAuthStateChanged, getAuth } from 'firebase/auth';
 import { Box } from '@chakra-ui/react';
 
 import StatusBar from '../StatusBar/StatusBar';
 import SideBar from '../SideBar/SideBar';
+import { setUser } from '../../store';
 
 const Root = function () {
-  const [currentUser, setCurrentUser] = useState(null);
   const navigate = useNavigate();
+  const dispatch = useDispatch();
 
   useEffect(() => {
     const auth = getAuth();
 
     onAuthStateChanged(auth, user => {
       if (user) {
-        setCurrentUser(user);
+        dispatch(setUser(user));
       } else {
-        setCurrentUser(null);
         navigate('/auth/log-in');
       }
     });
   }, [navigate]);
 
   return (
     <>
-      <SideBar user={currentUser} />
+      <SideBar />
       <StatusBar />
       <Box ml="40" p="6" pt="14" height="100vh">
         <Outlet />

packages/apps/user/src/components/SelectPharm/PharmList.js

@@ -0,0 +1,43 @@
+export const PharmList = [
+  {
+    name: '조아 약국',
+    rate: '4.8',
+    profileImg: 'https://cdn-icons-png.flaticon.com/512/6743/6743757.png',
+    distance: '1.2km',
+  },
+  {
+    name: '행복약국',
+
+    rate: '4.6',
+    profileImg: 'https://cdn-icons-png.flaticon.com/512/6743/6743757.png',
+    distance: '1.7km',
+  },
+  {
+    name: '튼튼약국',
+
+    rate: '4.5',
+    profileImg: 'https://cdn-icons-png.flaticon.com/512/6743/6743757.png',
+    distance: '2.1km',
+  },
+  {
+    name: '비타민약국',
+
+    rate: '4.5',
+    profileImg: 'https://cdn-icons-png.flaticon.com/512/6743/6743757.png',
+    distance: '0.7km',
+  },
+  {
+    name: '합정 우리 약국',
+
+    rate: '4.9',
+    profileImg: 'https://cdn-icons-png.flaticon.com/512/6743/6743757.png',
+    distance: '1.2km',
+  },
+  {
+    name: '강남 신소재 약국',
+
+    rate: '4.9',
+    profileImg: 'https://cdn-icons-png.flaticon.com/512/6743/6743757.png',
+    distance: '3.7km',
+  },
+];

packages/apps/user/src/components/SelectPharm/SelectPharmacy.js

@@ -0,0 +1,81 @@
+import { useCallback, useState } from 'react';
+
+import {
+  Box,
+  Heading,
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalBody,
+  ModalCloseButton,
+  useDisclosure,
+  VStack,
+  SimpleGrid,
+  Select,
+} from '@chakra-ui/react';
+
+import AppointmentCard from '../AppointmentCard/AppointmentCard.js';
+
+import { PharmList } from './PharmList.js';
+
+function SelectPharm() {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+
+  const [selectedPharmacy, setSelectedPharmacy] = useState(null);
+  const filteredList = PharmList.filter(item => item.distance <= '2km');
+  const handlePharmacy = useCallback(
+    item => {
+      setSelectedPharmacy(item);
+      onOpen();
+    },
+    [onOpen],
+  );
+
+  return (
+    <VStack width="full" height="full" gap="4">
+      <Box width="100%">
+        <VStack width="100%" justifyContent="space-between">
+          <Heading as="h2" fontSize="24">
+            진료가 완료되었습니다
+          </Heading>
+          <Heading as="h3" fontSize="24">
+            처방전을 전송할 약국을 선택해주세요
+          </Heading>
+        </VStack>
+      </Box>
+      <SimpleGrid columns={2} gap="5" width="full" px="4" overflowY="scroll">
+        {filteredList.map((item, idx) => (
+          <Box onClick={() => handlePharmacy(item)} key={idx}>
+            <AppointmentCard data={item} key={idx} />
+          </Box>
+        ))}
+      </SimpleGrid>
+
+      {selectedPharmacy && (
+        <Modal isOpen={isOpen} onClose={onClose} isCentered>
+          <ModalOverlay />
+          <ModalContent>
+            <ModalHeader>
+              {selectedPharmacy && selectedPharmacy.name}
+            </ModalHeader>
+
+            <ModalCloseButton />
+            <ModalBody>
+              <Box display="flex" alignItems="center" whiteSpace="nowrap">
+                약을
+                <Select width="32" ml={2} mr={2}>
+                  <option value="배달수령">배달수령</option>
+                  <option value="직접수령">직접수령</option>
+                </Select>
+                하겠습니다.
+              </Box>
+            </ModalBody>
+          </ModalContent>
+        </Modal>
+      )}
+    </VStack>
+  );
+}
+
+export default SelectPharm;

packages/apps/user/src/components/SelectPharm/package.json

@@ -0,0 +1,3 @@
+{
+  "main": "SelectPharmacy.js"
+}

packages/apps/user/src/components/SelectPharm/test/SelectPharm-specs.js

@@ -0,0 +1,32 @@
+import { BrowserRouter } from 'react-router-dom';
+import { render, fireEvent } from '@testing-library/react';
+
+import '@testing-library/jest-dom';
+import SelectPharm from '../SelectPharmacy';
+
+jest.mock('../PharmList.js', () => ({
+  PharmList: [
+    { name: '조아약국', rate: '4.8', distance: '1km' },
+    { name: '튼튼약국', rate: '4.5', distance: '1.5km' },
+  ],
+}));
+
+describe('진료 후 약국 선택 페이지', () => {
+  it('약국 리스트가 잘 뜨는가', () => {
+    const { getByText } = render(<SelectPharm />, { wrapper: BrowserRouter });
+    expect(getByText('조아약국')).toBeInTheDocument();
+    expect(getByText('튼튼약국')).toBeInTheDocument();
+  });
+
+  it('약국을 누르면 모달창이 뜨는가', () => {
+    const { getByText, queryByText } = render(<SelectPharm />, {
+      wrapper: BrowserRouter,
+    });
+
+    expect(queryByText(/배달수령/)).not.toBeInTheDocument();
+
+    fireEvent.click(getByText('조아약국'));
+
+    expect(queryByText(/배달수령/)).toBeInTheDocument();
+  });
+});