Merge pull request #69 from IT-Cotato/feat/PR-3_sessoin_page

Feat/pr 3 sessoin page
IT-Cotato · Aug 12, 2024 · ea2fe72 · ea2fe72
2 parents 115501b + 9b8e13a
commit ea2fe72
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 9 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -39,7 +39,7 @@ function App() {
           <Route path="/about" element={<ReadyState />} />
           <Route path="/products" element={<ReadyState />} />
           <Route path="/cs/*" element={<CSPage />} />
-          <Route path="/session" element={<Session />} />
+          <Route path="/session/*" element={<Session />} />
           <Route path="/faq" element={<FAQ />} />
           <Route path="/signin" element={<Login />} />
           <Route path="/findid" element={<FindID />} />

diff --git a/src/pages/Session/SessionCard.tsx b/src/pages/Session/SessionCard.tsx
@@ -136,7 +136,7 @@ const Container = styled.div<{ $isActive?: boolean }>`
   display: flex;
   flex-direction: column;
   width: calc(${IMAGE_WIDTH} + (3px * 2));
-  border: 3px solid
+  border: 2px solid
     ${({ $isActive, theme }) =>
       $isActive !== false ? theme.colors.primary100_1 : theme.colors.gray30};
   border-radius: 0.6rem;

diff --git a/src/pages/Session/SessionUploadModalImageInput.tsx b/src/pages/Session/SessionUploadModalImageInput.tsx
@@ -42,7 +42,7 @@ const SessionUploadModalImageInput = ({
 }: SessionUploadModalImageInputProps) => {
   const [selectedImage, setSelectedImage] = useState<SessionListImageInfo | null>(null);
   const [sortedImageList, setSortedImageList] = useState<SessionListImageInfo[]>([]);
-  const [isImageLoading, setIsImageLoading] = useState(selectedImage?.imageUrl ? true : false);
+  const [isImageLoading, setIsImageLoading] = useState(true);
 
   const theme = useTheme();
 
@@ -293,14 +293,20 @@ const SessionUploadModalImageInput = ({
    * If imageList is changed, set sortedImageList and selectedImage
    */
   useEffect(() => {
-    if (imageList.length > 0) {
+    if (
+      imageList.length > 0 &&
+      imageList.some((image, index) => image.imageUrl !== sortedImageList[index]?.imageUrl)
+    ) {
+      const newImageList = imageSortByOrder(imageList);
       if (sortedImageList.length === 0) {
-        setSelectedImage(imageList.find((image) => image.order === 0) || null);
-      }
-
-      if (imageList.some((image, index) => image.imageUrl !== sortedImageList[index]?.imageUrl)) {
-        setSortedImageList(imageSortByOrder(imageList));
+        setSelectedImage(newImageList[0]);
+        setIsImageLoading(true);
       }
+      setSortedImageList(newImageList);
+    } else if (imageList.length === 0) {
+      setSortedImageList([]);
+      setSelectedImage(null);
+      setIsImageLoading(false);
     }
   }, [imageList]);