It is a mobile trading website which has various gift cards on sale. This project was developed under the given directions by the design guide from Figma and API written in JSON.
- Production Period : 2022.02.07 - 2022.02.12
 Hyunho Lee (Leader) |
 Joy Lee |
 Hoonju Park |
 Changhyun Yoon |
| Member | Role |
|---|---|
| Hyunho Lee | QnA Page / Side Navbar |
| Joy Lee | Dynamic Header / Router structure |
| Hoonju Park | Detailed Page / Carousel |
| Changhyun Yoon | Grid menu component / Footer |
-
API Specification
-
Category List API :GET https://api2.ncnc.app/con-category1s
-
Items on sale List API :GET https://api2.ncnc.app/con-items/soon
-
Items with brand List API :GET https://api2.ncnc.app/con-category1s/$conCategory1Id/nested
-
Item details API :GET https://api2.ncnc.app/con-items/
-
FAQ types API :GET https://api2.ncnc.app/qa-types
-
FAQ items API :GET https://api2.ncnc.app/qas?qaTypeId=
-
You are able to start the app by typing the following commands in the command line:
git clone https://github.com/devjoylee/niconnaecon.git
npm install
npm run dev- Implemented conditional routing to the relevant page by saving query of a clicked component (Category Id โ Brand Id โ Item Id)
- Code Preview
// components/common/ConCard.tsx
export const ConCard = ({ category }: CategoryProps) => {
const router = useRouter();
const categoryId = router.query.id;
// if current data has item data, link to brand page. Or link to category page.
const href = !!category.conItems
? `/brands/${category.id}`
: `/categories/${category.id}`;
return (
<LinkBox>
<Link
href={{
pathname: href,
query: { categoryId: JSON.stringify(categoryId) },
}}
passHref
key={category.id}
>
<div>
<img src={category.imageUrl} />
<span>{category.name}</span>
</div>
</Link>
</LinkBox>
);
};- When a page redirect, change a header name into the name of the current page from API data (it can be a category name, brand name or item name).
- Change the browser tab title with the
<Head>tag as well as the header name. - Code Preview
// components/layout/Header.tsx
export const Header = ({ id }: Props) => {
const categoryId = useRef(id);
const { data } = useData(`con-category1s/${categoryId.current}/nested`);
const brandTitle = useRef<Title[]>([]);
const [title, setTitle] = useState('');
useEffect(() => {
if (data && id === categoryId.current) {
data.conCategory1.conCategory2s.map((brand: ConCategory2) => {
brandTitle.current.push({ id: brand.id, name: brand.name });
});
setTitle(data.conCategory1.name);
} else {
brandTitle.current.forEach(
brand => brand.id === Number(id) && setTitle(brand.name)
);
brandTitle.current = [];
}
}, [data, id, title]);
return (
<>
<Head>
<title>๋์ฝ๋ด์ฝ - {title}</title>
</Head>
<HeaderContainer>
<h2>{title}</h2>
</HeaderContainer>
</>
);
};- Implemented the carousel drag event using the difference in pageX value of the mouse event between
mouseDownandmouseUp - Code Preview
// components/carousel/CarouselBox.tsx
export const CarouselBox = ({ currentIndex, setCurrentIndex }: Props) => {
const [startX, setStartX] = useState(0);
const CarouselBoxRef = useRef<HTMLDivElement>(null);
const carouselLength = CAROUSEL_IMAGES.length - 1;
const handleMouseDown = (e: React.MouseEvent<HTMLUListElement>) => {
setStartX(e.pageX);
return;
};
const handleMouseUp = (e: React.MouseEvent<HTMLUListElement>) => {
const movedDistance = e.pageX - startX;
if (Math.abs(movedDistance) >= 50) {
setCurrentIndex(prev => (movedDistance > 0 ? prev - 1 : prev + 1));
return;
}
};
useEffect(() => {
CarouselBoxRef.current!.style.transition = '0.2s';
}, [currentIndex]);
return (
<CarouselBoxContainer currentIndex={currentIndex} ref={CarouselBoxRef}>
<CarouselUl
onMouseDown={e => handleMouseDown(e)}
onMouseUp={e => handleMouseUp(e)}
>
// ...
</CarouselUl>
</CarouselBoxContainer>
);
};The commit message is written with the GITMOJI icons in order to make commit messages more intuitive.
| Gitmoji | Meaning |
|---|---|
| ๐ | Init or begin a project. |
| ๐ | Move or rename resources |
| โจ | Introduce new features |
| ๐ | Add the UI and style files |
| โป๏ธ | Refactor code |
| ๐ | Add or update documentation |
| โ | Add a dependency |
| ๐ | Fix a bug |
| ๐ | Deploy stuff |
REFERENCE : Gitmoji (http://gitmoji.dev/)
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent